Cara membuat recent post dengan gambar thumbnail

 Ask

Cara membuat recent post dengan gambar thumbnail

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 : QuoteAskNewsPerpustakaanNasionalInternasionalFlora & FaunaTehnologiPropertiTravelSportFoodKesehatanPopulerEntertainmentAgamaVidio.

Baca Juga

Komentar

Lebih baru Lebih lama