Membuat Widget Related Post dengan Thumbnail

Membuat Widget Related Post dengan Thumbnail
Membuat Widget Related Post di bawah postingan Blogger cukup elegant dan mempermudah pengunjung ataupun visitor membaca artikel lainnya yang terkait dengan konten yang sedang dibaca, dan ini juga bisa mengurangi bounce rate.

Widget Related Post
Pertama copy css dibawah diatas ]]></skin> atau </style>


/* ==== Related Post Widget ==== */
.related-post {margin:15px 0 0; border-top:1px solid #f0f0f0; padding:15px 0 0;}
.related-post h4 {font-size:14px; margin:0 0 .5em; text-transform:uppercase;}
.related-post-style-2 {margin:0 0 0 0 !important; padding:0 0 0 0 !important; list-style:none;}
.related-post-style-2 li {margin:0 0 0 0; padding:0 0 0 0;}
.related-post-style-2 li {padding:5px 0 !important; border-top:1px solid #eee; overflow:hidden;}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {width:60px; height:60px; max-width:none; max-height:none; background-color:transparent; border:none; padding:0; float:left; margin:2px 8px 0 0;}
.related-post-style-2 .related-post-item-title {font:normal normal 18px Open Sans Condensed, Helvetica, Arial, sans-serif;}
.related-post-style-2 .related-post-item-summary {display:block; overflow:hidden;}
.related-post-style-2 .related-post-item-more {}


Lalu pastekan scrypt ini diatas kode </body>

            <!-- Related Post Widget Start -->
              <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'>
                      &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
                  </b:loop></b:if>];
              var relatedPostConfig = {
                  homePage: &quot;<data:blog.homepageUrl/>&quot;,
                  widgetTitle: &quot;&lt;h4&gt;Related Posts :&lt;/h4&gt;&quot;,
                  numPosts: 5,
                  summaryLength: 140,
                  titleLength: &quot;auto&quot;,
                  thumbnailSize: 60,
                  noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTuvcN4XUieZbSI_IevdMTnGZO4K20P2p1QT5vIfmtxooRnjg8xzbZHYmX24HX9UhoD2QOeNJN7We65tTjA94KRZK7QL1lAkEcKkiOvr4e3W7OLRCzIaMcfRZwMMHeDCsWCFn4F6Vk_thK/w60-c-h60/no-image.png&quot;,
                  containerId: &quot;related-post&quot;,
                  newTabLink: false,
                  moreText: &quot;Read More...&quot;,
                  widgetStyle: 2,
                  callBack: function() {}
              };
              </script>
            <!-- Related Post Widget End -->

<script type='text/javascript'>
//<![CDATA[              
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
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:72,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)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):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)+"&hellip;":"";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>


Maka Hasilnya tampak seperti dibwah postingan ini.

1 Response to "Membuat Widget Related Post dengan Thumbnail"

  1. This comment has been removed by the author.

    ReplyDelete