Salam Blogger, Kali ini PASBLOZ
mau berbagi tips Cara Membuat Artikel Terkait ( Related Article ) dibawah
postingan Blog dengan Thumbnail. Widget ini akan terbagi dalam dua kolom atas
dan bawah yang terdiri 3 baris artikel di tiap kolomnya, jadi total yang
ditampilkan dalam dua kolom adalah 6 artikel.
Jika Sobat sebelumnya sudah memasang Widget Artikel terkait atau Related Article di Blognya, maka Sobat harus menghapus kode atau script yang sebelumnya terpasang yaitu CSS,HTML dan Javascript.
Bagi Sobat yang ingin mencoba Membuat Widget
Artikel Terkait dibawah Postingan Blog dengan Thumbnail, monggo ikuti tutorial
cara membuatnya dibawah ini :
Cara Membuat Widget Artikel
Terkait dibawah Postingan Blog dengan Thumbnail
1. Masuk ke Akun Blogger >> Dashboard >> Edit HTML
2. Cari kode </head> letakkan kode dibawah ini sebelum kode tersebut
<b:if cond='data:blog.pageType == "item"'>
/* CSS Related Article CrepictDGZ */
#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>3. Kemudian cari kode </article> atau, jika tidak ada letakkan dibawah HTML social share dibawah postingan.
<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>4. Kemudian cari kede </body> lalu letakkan kode dibawah ini sebelum kode tersebut.
<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="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" 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="" 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="'+t+'" 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="'+t+'"'+b+'><img alt="" 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="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" 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="'+t+'" 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>5. Setelah itu Simpan/Save Template……selesai
Demikian Tips bagaimana Cara Membuat Widget Artikel Terkait dibawah Postingan Blog dengan Thumbnail, Jika ada pertanyaan seputar tutorial diatas silahkan tulis permasalahan pada kotak komentar dibawah atau bisa menghubungi Admin melalui kontak form.
Terima Kasih….
