Cara membuat recent post dengan gambar thumbnail

 Ask

Cara membuat recent post dengan gambar thumbnail

1. Buka akun blogger anda.

2. Klik menu thema dan edit html.

3. Cari kode </head> dan letakkan kode berikut ini di atasnya.

  <style>

/* Related Posts*/ #related-post {display:block; margin:20px 0px; line-height:1.5em;}

#related-post h4{ font-size:17px; font-weight:600; text-align:center; text-transform:uppercase; line-height:initial; } #related-post h4 span{ background-color:#fff; padding:0px 15px; position:relative; z-index:1; } #related-post h4:before{ content: &#39;&#39;; display: block; position: relative; top:15px; width: 100%; border-top: 2px solid #068488; }

#related-summary .news-text {display:none;}

ul#related-summary{margin:20px 0px 0px; padding:0px; display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap;}

ul#related-summary li{list-style:none; width:calc((100% / 3) - 15px); text-align:left; margin-right:20px; margin-bottom:20px; padding:0px; -webkit-margin-start:0px !important;}

ul#related-summary li img{ overflow:hidden; line-height:0px; border-radius:4px; } 

ul#related-summary li:nth-of-type(3n){ margin-right:0px; } ul#related-summary li a{ display:block; }

ul#related-summary li img{width:100%; height:117px; transition:all .3s ease; border:0px; margin:0px;}

ul#related-summary li:hover img {transform:scale(1.1); filter: brightness(75%); -webkit-filter: brightness(75%);}

ul#related-summary li a.relinkjdulx{background-image:none;color:#000;display:block;font-size:13px;font-weight:600;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none;margin-top:7px}

ul#related-summary li a.relinkjdulx:hover{color:#066;}

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

ul#related-summary li{ width: calc((100% / 2) - 7.5px); margin-right:15px; margin-bottom:15px; }

ul#related-summary li a img{ height:85px;} 

ul#related-summary li:nth-of-type(3n){ margin-right:15px; } ul#related-summary li:nth-of-type(2n){ margin-right:0px; }} 

</style>

<script type='text/javascript'>

//<![CDATA[

//Related Post

var relnojudul = 0;

var relmaxtampil = 6;

var numchars = 120;

var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};

//]]>

</script>

4. Jika ingin menampilkannya di bawah postingan, cari kode <data:post.body/> kemudian pastekan kode berikut ini di bawahnya.

  <!-- Related Posts -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-post'>

<div class='relhead'>

  <h4><span>Related Posts</span></h4>

<div class='clear'/>

          <b:loop values='data:post.labels' var='label'>

               <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/>

          </b:loop>

          <ul id='related-summary'>

               <script type='text/javascript'>artikelterkait();</script>

          </ul>

     </div>

</div>

<div class='clear'/>

</b:if>

<!-- Related Posts End-->

 5. Simpan template. 

Kategori : Quote, AskNews, Perpustakaan, Nasional, Internasional, Flora & Fauna, Tehnologi, Properti, Travel, Sport, Food, Kesehatan, Populer, Entertainment, Agama, Vidio.

Baca Juga