Banyak betul yang menanyakan bagaimana cara menciptakan Related Post (widget artikel terkait) menyerupai yang terpasang di blog ini (saat ini, mungkin suatu ketika mau diganti lagi). Bagi yang ingin menciptakan related pos menyerupai yang aku gunakan di blog ini, silahakn ikuti caranya berikut.
Modifikasi lainnya: Cara Membuat Related Post/Artikel Terkait di Dalam Postingan
Silahkan masuk ke Edit HTML, kemudian tambahkan CSS berikut ini di atas </head> atau </head><!--<head/>-->
Cari instruksi </article> kemudian tambahkan instruksi ini.
Keterangan: angka 6 pada instruksi di atas ialah jumlah post yang tampil pada related post.
Juga JavaScript berikut ini, letakkan di atas </body> atau <!--</body>--></body>
Simpan template dan lihat hasilnya.
Demikian cara menciptakan widget Related Post (DTE) 2 kolom with thumbnail menyerupai yang dipakai blog Bungfrangki.com, biar sanggup diterapkan dengan mudah.
Bagi yang ingin mempunyai template menyerupai ini, silahkan meunju ke Themeindie.com pada postingan Template Noname.
Terima kasih!
Modifikasi lainnya: Cara Membuat Related Post/Artikel Terkait di Dalam Postingan
Cara menciptakan Related Post (DTE) dua kolom dengan thumbnail
Silahkan masuk ke Edit HTML, kemudian tambahkan CSS berikut ini di atas </head> atau </head><!--<head/>-->
<b:if cond='data:blog.pageType == "item"'>
/* css related posts DTE */
#related-wrapper{margin:auto;padding:0 20px}
.related-post h4{margin:30px 4px 15px 4%!important;font-size:22px;text-transform:capitalize;font-weight:normal;padding:0;color:#444}
.related-post{margin:0 0 0 -4%;padding:0;font-size:13px;text-align:left;box-sizing:border-box}
.related-post,.related-post-style-3 .related-post-item{-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.related-post-style-3,.related-post-style-3 li{margin:0!important;padding:0!important;list-style:none;word-wrap:break-word;overflow:hidden}
.related-post-style-3 .related-post-item{display:block;float:left;width:50%;height:230px;padding-left:4%!important;margin:0 0 10px!important;box-sizing:border-box}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0 0 5px;width:100%;height:160px;max-width:none;max-height:none;background-color:transparent;padding:0;}
.related-post-style-3 .related-post-item-tooltip{padding:0;overflow:hidden;text-overflow:ellipsis;display:block;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.related-post-style-3 .related-post-item-tooltip a.related-post-item-title{font-size:17px;font-weight:700;display:block;color:#444!important;line-height:1.15em!important}
.related-post-style-3 .related-post-item-tooltip a.related-post-item-title:hover{color:#4285f4!important}
@media screen and (max-width:480px){#related-wrapper{padding:0 15px}.related-post h4{margin:30px 4px 15px 0!important;}.related-post{margin:0;}.related-post-style-3 .related-post-item{display:block;float:none;width:100%;height:auto;margin-bottom:20px!important;padding:0!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.related-post-style-3 .related-post-item-thumbnail{width:100%;height:auto}}
</b:if>
Cari instruksi </article> kemudian tambahkan instruksi ini.
<b:if cond='data:blog.pageType == "item"'>
<div id='related-wrapper'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];var relatedPostConfig={homePage:"<data:blog.homepageUrl/>",widgetTitle:"<h4>Artikel Terkait</h4>",numPosts:6,summaryLength:0,titleLength:"auto",thumbnailSize:320,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Read More",widgetStyle:3,callBack:function(){}}
</script></div>
</b:if>
Keterangan: angka 6 pada instruksi di atas ialah jumlah post yang tampil pada related post.
Juga JavaScript berikut ini, letakkan di atas </body> atau <!--</body>--></body>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+(\-c)?/, "/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="Banyak betul yang menanyakan bagaimana cara menciptakan Related Post Modifikasi Related Post (DTE) Seperti Bungfrangki.com (Saat Ini)" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="Modifikasi Related Post (DTE) Seperti Bungfrangki.com (Saat Ini)" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="Banyak betul yang menanyakan bagaimana cara menciptakan Related Post Modifikasi Related Post (DTE) Seperti Bungfrangki.com (Saat Ini)" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="Modifikasi Related Post (DTE) Seperti Bungfrangki.com (Saat Ini)" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="Modifikasi Related Post (DTE) Seperti Bungfrangki.com (Saat Ini)"'+b+'><img alt="Banyak betul yang menanyakan bagaimana cara menciptakan Related Post Modifikasi Related Post (DTE) Seperti Bungfrangki.com (Saat Ini)" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="Modifikasi Related Post (DTE) Seperti Bungfrangki.com (Saat Ini)" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="Banyak betul yang menanyakan bagaimana cara menciptakan Related Post Modifikasi Related Post (DTE) Seperti Bungfrangki.com (Saat Ini)" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="Modifikasi Related Post (DTE) Seperti Bungfrangki.com (Saat Ini)" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>
Simpan template dan lihat hasilnya.
Demikian cara menciptakan widget Related Post (DTE) 2 kolom with thumbnail menyerupai yang dipakai blog Bungfrangki.com, biar sanggup diterapkan dengan mudah.
Bagi yang ingin mempunyai template menyerupai ini, silahkan meunju ke Themeindie.com pada postingan Template Noname.
Terima kasih!
Advertisement