Membuat Related Post / Artikel Terkait Dengan Gambar

Cara Membuat Related Post / Artikel Terkait Dengan Gambar. Sobat blogger, jika sebelumnya saya membuat related posts atau artikel terkait tanpa gamabar,maka pada kesempatan kali ini,saya akan membuat related post atau artikel terkait dengan gambar, sudah saya jelaskan sebelumnya fungsi related post itu adalah sangat penting untuk kemajuan blog yaitu untuk meningkatkan pageview dan menurunkan tingkat bounce rate pada sebuah blog,karena dengan adanya related post atau artikel terkait,pengunjung akan di tawarkan berbagai artikel yang bisa mereka baca sesuai label.

Gambar di atas adalah contoh artikel terkait yang akan kita buat, cukup keren bukan sobat untuk tampilannya dan yang pasti bisa mempercantik tampilan blog anda,jika anda ingin menerapkan related post atau artikel terkait dengan gambar seperti contoh di atas,silahkan ikuti tutorialnya.

Baca Juga : Cara Membuat Social Share Button Keren

Cara Membuat Related Post / Artikel Terkait Dengan Gambar

1. Buka akun blogger anda.

2. Pilih menu template > Klik edit Html.

3. Lalu silahkan letakan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>

 /* ==== Related Post Widget Start ==== */
.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 16px Fjalla One, Helvetica, Arial, sans-serif;
}
.related-post-style-2 .related-post-item-summary {
display:block;
overflow:hidden;
}
.related-post-style-2 .related-post-item-more {} 

4. Selanjutnya letakan kode di bawah ini tepat di atas kode </body>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[     
/*! Related Post => 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>
</b:if> 

5. Oke selanjutnya letakan lagi kode di bawah ini tepat di bawah kode <data:post.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;Artikel Terkait Lainnya :&lt;/h4&gt;&quot;,
      numPosts: 7,
      summaryLength: 110,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 60,
      noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-1fA4wb1lxIL5LetXOzW4Gzwa1mKCGJuhOVL9TyjWUjm7LhAkreWgYs8FYIlmPC_flkZVZ7N3oYpOj667BAEXgAqT1XC2B_SUVfHnSkgA7ySS2AXMD85FZQBT6i2L2dx4ILa92iRu6FA/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 --> 

Catatan : Biasanya kode <data:post.body/> ini lebih dari satu,silahkan letakan biasanya di paling akhir,jika tidak berhasil maka anda bisa mencoba dari kode pertama atau kedua dan seterusnya sampai berhasil, atau lebih mudahnya anda bisa menempatkan di bawah kode share button dan jika sudah oke, lalu save template anda dan lihat hasilnya.

Saya rasa cukup sekian di Membuat Related Post / Artikel Terkait Dengan Gambar,namun jika anda mengalami kendala dalam tutorial ini,silahkan tanyakan di kolom komentar,untuk lebih dan kurangnya,saya mohon maaf,semoga sukses.

Share to:

Google+ Facebook Twitter