Posted by Aak
Aak-share.com Updated at: 3:59:00 AM

Membuat Artikel Terkait Bergambar Responsive di Bawah Postingan Blog

2 comments:
Artikel terkait atau lebih dikenal dengan nama Related Post banyak kita jumpai pada web atau blog yang kita kunjungi, widget ini terletak di akhir kalimat atau di bawah postingan Blog. Menariknya, widget ini bisa membantu menaikan pageview karena melalui related post pengunjung bisa menemukan dan membaca artikel-artikel kita lainnya.

Artikel yang akan ditampilkan pada related post per label, widget ini memiliki fitur diataranya:
  • Gambar memiliki effect blur
  • Fast loading
  • Effect hover pada subtittel
  • Responsive
Terkait :


Widget yang sedang kita bahas ini memiliki tampilan seperti pada Related post yang ada pada blog saya ini, untuk pemasangannya Anda bisa mengikuti langkah-langkahnya dibawah ini ;

1. Log-in keakun Blogger
2. Pilih Template, lalu klik Edit HTML
3. Selanjutnya Anda cari kode ]]></b:skin>, untuk memudahkan pencarian gunakan tombol CTRL+F, lalu copy code CSS dibawah ini dan pastekan diatasnya

/*---Related postaak---*/
@media (max-width:700px) {
width:100% !important;}
#related_posts{padding:0;overflow:hidden;display:inline;}
#related_posts h4{padding-left:1px;padding-bottom:10px;color:#333;font-family:cursive;font-size:20px;line-height:23px;text-align:left; letter-spacing:normal;}
ul#relpost_img_sum{margin:0;padding:0;text-align:justify;display:inline;}
ul#relpost_img_sum li{list-style:none;padding:3px;margin:0;width:335px;height:159px;float:left;display:inline;}
ul#relpost_img_sum li a{display:block}
ul#relpost_img_sum li img{float:left;width:450px;height:120px;margin-right:15px;padding:0 auto;border:none;filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;}
ul#relpost_img_sum li a.relinkjdulx{display:block;overflow:hidden;margin-top:105px;background-color:rgba(32, 32, 32, 0.77);font-weight:normal;font- size:14px;width:329px;line-height:20px; float:left;text-align:center;position: absolute;padding: 5px 0px 2px 5px;}
ul#relpost_img_sum li img:hover {float:left;width:460px;height:130px;margin-right:15px;border:none;filter:alpha(opacity=25); - moz-opacity:0.3; opacity:0.3;}
ul#relpost_img_sum li a.relinkjdulx:hover{display:block;overflow:hidden;margin-bottom:3px;background-color:rgba(98, 112, 119, 0.35);font-weight:normal;font size:14px;width:329px;line-height:20px; float:left;text-align:center;}
@media screen and (max-width:700px){u#relpost_img_sum li{padding:3px;margin:0;width:335px;height:170px;}ul#relpost_img_sum li img{min width:100%;float:left;border:none;!important;width:650px;height:150px;margin-right:15px;!important}ul#relpost_img_sum li a.relinkjdulx{min-width:100%;float:left;text align:center;display:block;overflow:hidden;background-image:none;font-weight:normal;!important; margin-bottom:3px;font-size:14px;width:300px;line-height:20px;!important;}}

4. Langkah berikutnya, Anda cari kode <data:post.body/> , lalu Anda copy kode dibawah ini dan pastekan dibawahnya

<!-- Artikel Terkait Thumbnail Responsive Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relnojudul = 0;var numpost = 4;var numchars = 0;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/-Xz4yd0i8yX0/UWmBGpGDn4I/AAAAAAAAELY/b-BxtwST5cE/s1600/grey.png"}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<numpost){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><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==numpost){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
<div style='@media (max-width:810px){width:100% !important;}width:800px;height:320px; margin-bottom:10px; margin-top:15px; @media screen and (max-width:810px {width:800px;height:510px; margin-bottom:10px; margin-top:15px;}}'>
<div id='related_posts'>
<h4>Artikel Terkait</h4>
<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;callback=relpostimgcuplik&amp;max-results=19&quot;' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</div>
</b:if>
<!-- Artikel Terkait Thumbnail Responsive End -->

5. Simpan Template

Penjelasan:
  • 4 adalah pengaturan jumlah postingan yang ditampilkan

Demikian saya sampaikan tutorial membuat  Artikel Terkait Bergambar Responsive di Bawah Postingan Blog, terimakasih sudah berkunjung dan semoga bermanfaat.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

2 comments

Terima kasih gan sharingnya....semoga berhasil dan keren bila di coba nanti......

Balas

Sama-sama gan, terima kasih juga sudah berkunjung :-bd

Balas