Related Post di Lengkapi Dengan Gambar Thumbnail di Blogger

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Related Post di Lengkapi Dengan Gambar Thumbnail di Blogger, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang Blogger, CSS, Javascript, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Related post plus gambar thumbnail ini tampilannya elegan, tidak hanya judul postnya saja, related post kali ini juga di lengkapi dengan gambar thumbnail. Related berguna untuk memberitahukan pengunjung atau visitor agar berkunjung ke postingan yang berkaitan dengan postingan atau artikel yang sedang di kunjunginya, related post ini biasanya terdapat di akhir postingan atau di atas footer blogger.

Related ini adalah related post yang di gunakan pada blog ini, jika Anda ingin melihat langsung, Anda dapat melihatnya di akhir dari postingan ini. Untuk penerapannya tidak serumit yang Anda pikirkan, dengan beberapa langkah saja Anda dapat menampilkan related post ini di blog Anda.

Memasang Related Post Dengan Gambar Thumbnail

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda taruh CSS di bawah ini di atas kode ]]></b:skin> atau </style>

/* Related Posts */

#related-post{background:#fff;margin:0}

.related-post{margin:30px 0 0;position:relative;padding:0 0 10px}

.related-post h4{background: white;color:#555;font-family:&#39;Roboto&#39;,Arial;text-align:left;font-weight:400;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;padding:15px 20px 12px;margin:0 0 20px}

.related-post-style-3,.related-post-style-3 li{margin:0 auto;padding:0!important;list-style:none;word-wrap:break-word}

.related-post-style-3 li a{color:#444;font-weight:700!important;font-size:13px;line-height:1.4em}

.related-post-style-3 li a:hover{color:#444}

.related-post-style-3 .related-post-item{display:inline-block;float:left;width:25%;height:auto;padding:0;margin-bottom:0!important;position:relative;overflow:hidden}

.related-post-style-3 .related-post-item:focus{outline:none;border:none}

.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:100%;height:120px;text-align:center}

.related-post-style-3 .related-post-item-thumbnail img{width:100%;height:auto!important;transition:all 1s ease-out}

.related-post-item:hover .related-post-item-tooltip a{opacity:1}

.related-post-item-tooltip a{color:#fff!important;background:rgba(0,0,0,0.39);opacity:0;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s;text-align:center;bottom:0;left:0;right:0;padding:5px;font-size:11px!important;position:absolute}

.related-post-item-tooltip a:hover{background:rgba(0,0,0,0.54);color:#fff!important}

@media screen and (max-width:768px){

  .related-post-item-tooltip a{opacity:1!important}

}

@media screen and (max-width:480px){

  .related-post-style-3 .related-post-item{width:100%!important}

}

Langkah kedua :

Silakan Anda cari kode <div class='post-footer-line post-footer-line-3' atau </article> dan silakan Anda copy kode dibawah ini di bawah kode tersebut.

<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.random != &quot;true&quot;'>,</b:if>

      </b:loop></b:if>];

  var relatedPostConfig = {

     homePage: &quot;<data:blog.homepageUrl/>&quot;,

      widgetTitle: &quot;<h4>Related Post</h4>&quot;,

      numPosts: 8,

      summaryLength: 370,

      titleLength: &quot;auto&quot;,

      thumbnailSize: 200,

      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,

      newTabLink: false,

      moreText: &quot;Read More&quot;,

      widgetStyle: 3,

      callBack: function() {}

  };

</script>

<div style='clear: both;'/>

<script type='text/javascript'>

//<![CDATA[

var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.idblanter.com",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+""):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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"></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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><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]);

//

$(document).ready(function(){$("#showparser").click(function(){$("#parser").slideToggle("slow")})});

$(document).ready(function(){$("#emotext").click(function(){$("#emoshow").slideToggle("normal")})});

function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;};

//]]>

</script>

Silakan Anda sesuaikan angka 8 dengan jumlah post yang ingin Anda tampilkan.

Selanjutnya silakan Anda Save, lalu Anda lihat jika tidak ada yang error maka related post berhasil Anda pasang.

Jika terjadi error sebaiknya Anda berkomentar, dan nanti jika saya On pasti akan saya balas secepatnya. Terimakasih telah berkunjung semoga hari Anda menyenangkan.