Cara Mudah Membuat Related Post Keren bergambar

adscblog

Cara Membuat Related Posts di Bawah Postingan dengan Gambar

Related Posts atau dengan bahasa kita halaman yang terkait dengan postingan sangat lah mudah di terapkan di blog kita terutama di tempat kan di bawah postingan,tidak semua Related post di tempat kan di bawah postingan,namun ada juga blogger yang menempatkan Related Postingan tersebut di Widget nya sehingga lebih menarik.

Namun kali ini kita tidak membahas tentang Related post yang di tempatkan di Widget,melainkan Related Post yang di tempatkan di bawah postingan,Related Post ini sangatlah penting di terapkan di blog kita,agar para pengunjung blog kita dapat menelusuri berbagai artikel yang berada di blog kita.

Memang Related Post ini memudahkan pra pengunjung untuk membaca Artikel yang berkaitan dengan artikel yang sedang di baca nya,dengan begitu maka para pengunjung akan semakin betah dan akan semakin mudah untuk membaca artikel yang berada di blog kita.

Banyak sekali jenis Related Posts namun disini saya akan berbagi Related posts ini yang menurut saya sangat keren dan juga banyak di gunakan oleh para blogger,maka dari itu saya akan berbagi dengan anda,bisa anda lihat model nya pada gambar di atas,dan anda juga dapat menerapkan nya di blog anda dengan mengikuti langkah langkah berikut

1::Pastikan anda sudah login ke blogger anda
2::Kemudian silahkan anda masuk ke Template > Edit Html
3::Setelah itu silahkan anda klik tombol Ctrl+F secara bersamaan
4::Kemudian silahkan anda cari kode ]]></b:skin> kemudian letakan kode berikut di atas kode tersebut

.related-post{margin:1px 0 0;border-top:1px solid #f0f0f0;padding:15px 0 0}
.related-post a:hover{font-size:14px;color:#999;margin:0 0 .5em;text-transform:uppercase}
.related-post a:link{font-size:14px;color:#222;margin:0 0 .5em;text-transform:uppercase}
.related-post h4{font-size:14px;margin:0 0 .5em;text-transform:uppercase}
.related-post-style-2{margin:0!important;padding:0!important;list-style:none}
.related-post-style-2 li{margin:0;padding:0;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:70px;height:60px;max-width:none;max-height:none;background-color:transparent;border:1px solid #999;border-radius:4px;padding:0;float:left;margin:2px 8px 0 0}
.related-post-style-2 .related-post-item-title{font:normal normal 14px Fjalla One,Helvetica,Arial,sans-serif}
.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}

5::Setelah itu letakan kode berikut di dalam postingan anda

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clearfix' id='related'>
<!-- 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/AVvXsEgNWLKrJZ7SRt4P72iyIIJ1X9Bo-AK5-GZB71lc7OT55DYql2IX-fFvvliURXMol_NT14SoFGN8rnxTUM6wSl9gLwA7zyzJVi3gJu2W2T3qEcnKEUmDUJ_XE1tABe8VJuibsUo3Rry55e47/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 -->

</div>
</b:if>

6::Setelah itu silahkan anda cari kode </body> Dan letakan kode berikut tepat di atas nya

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

Langkah terakhir silahkan anda Save template nya dan lihat hasil nya dengan mengklik salah satu postingan yang berada di blog anda,semoga bermanfaat dan salam blogger.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 21 September and have 0 komentar