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 == "item"'>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2sdbzil9MvWmgj20nFo-KhJCG8wMAl_7gdHeWmkYKF1ROJa4FfXP3X9DFopOGS8O17YcETie3kf0vlZxpwCTzYStvJFG_BahEl3poxULe4b51A9JkNErMrF272xN_wGpxLQMOyvp7gWI/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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=19"' 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.
No comments:
Post a Comment