Cara Membuat, Menampilkan, atau Memasang Widget Posting Terkait atau Related Post plus Gambar Thumbnail Responsive di Blogger.

WIDGET Related Posts berikut ini rada-rada beda dengan widget artikel terkait plus gambar (image thumbnail) lainnya, alasannya ialah mobile-friendly alias responsive. Ditampilkan di bawah tiap posting blog halaman dalam (single post/single page).

Berikut ini penampakannya di Desktop dan Mobile (HP). Live DEMO-nya dapat dilihat di CB Blogger Lab atau CB Simple Theme.

Related Post di Desktop

 atau Memasang Widget Posting Terkait atau Related Post plus Gambar Thumbnail Responsive d Cara Memasang Related Post Gambar Thumbnail Responsive

Related Post di Mobile/HP

 atau Memasang Widget Posting Terkait atau Related Post plus Gambar Thumbnail Responsive d Cara Memasang Related Post Gambar Thumbnail Responsive

Keren 'kan?

CB tidak akan panjang lebar membahas fungsi related post ini, pribadi saja ke cara memasangnya.

Cara Memasang Related Post Gambar Thumbnail Responsive

Jika sudah ada Related Posts sebelumnya, Hapus Dulu semua aba-aba related post yang ada di template Anda.

1. Template > Edit HTML
2. Pasang aba-aba CSS dan JavaScript Related Post Gambar Thumbnail Responsive berikut ini di atas aba-aba </head>

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-post {margin:0 auto;padding:0;}
#related-post h4{position:relative;overflow:hidden;margin:10px 0 20px 0;font-size:120%;font-weight:700}
#related-post h4:after{position:absolute;top:51%;overflow:hidden;width:78.3%;height:1px;content:&#39;a0&#39;;background-color:#ccc}
#related-post h4 span{position:relative;display:inline-block;margin:0 10px 0 0}
.relhead {font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:10px 0;}
#related-summary .news-text {display:none;}
ul#related-summary{margin:0 auto;padding:0;list-style:none;word-wrap:break-word}
ul#related-summary li{position:relative;float:left;list-style:none outside none;padding:0;overflow:hidden;margin:0 10px 0 0;width:100%;max-width:175px;height:170px;transition:opacity .2s ease}
ul#related-summary li a {display:block;}
ul#related-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:100%;max-height:100px;vertical-align:middle;overflow:hidden;margin:0 0 10px;transition:all 1s ease-out}
ul#related-summary li:hover img {opacity:0.96;}
ul#related-summary li a.relinkjdulx{background-image:none;color:#444;display:block;font-size:13px;font-weight:700;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none}
ul#related-summary li a.relinkjdulx:hover{color:#c00;}
@media only screen and (max-width:640px){
ul#related-summary li {float:left;list-style:none;overflow:hidden;width:100%;border-bottom:1px solid #e6e6e6;padding:10px 0;max-width:100%;height:auto;}
ul#related-summary li:last-child{border-bottom:none;}
ul#related-summary li img{max-width:72px;float:left;margin:0 10px 0 0;}
ul#related-summary li a.relinkjdulx {display:block;font-size:15px;font-weight:700;line-height:normal;overflow:hidden;padding:0 10px 10px 0;}}
@media screen and (max-width:384px){
ul#related-summary li img{display:none}}
</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="http://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>
<script type='text/javascript'>
$(&quot;ul#related-summary li img&quot;).each(function(){$(this).attr(&quot;src&quot;,$(this).attr(&quot;src&quot;).replace(//s[0-9]+(-c)?//,&quot;/w175-h100-c/&quot;))});
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

3. Pasang aba-aba HTML Related Post Gambar Thumbnail Responsive berikut ini di bawah aba-aba <data:post.body/> yang kedua atau ketiga atau di atas, atau di bawah aba-aba <div class='post-footer'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'>

<!-- Related Posts with Thumbnails Code Start-->
<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 with Thumbnails Code End-->

4. Save Template!

Jika ada duduk masalah ukuran gambar, atur di aba-aba CSS (bagian width).

Mengatasi Gambar Buram (Blur)

Jika gambar Related Post Gambar Thumbnail Responsive buram (blur), tambahkan aba-aba berikut ini di atas kode </body>

<script>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(//s72-c/, "/s" +
size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
} resizeThumb('related-post', 300);
//]]>
    </script>

Lihat Juga: Widget Related Posts Lainnya

Demikian Cara Memasang Related Post plus Gambar (Image) Thumbnail Responsive di bawah posting blog Anda. Good Luck! (www.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours