Membuat Artikel Terkait Bergambar Responsive Di Bawah Postingan Blog
atau lebih dikenal dengan nama Related Post banyak kita jumpai pada web atau blog yang kita kunjungi, widget ini terletak di selesai kalimat atau di bawah postingan Blog. Menariknya, widget ini dapat membantu menaikan pageview alasannya melalui related post pengunjung dapat menemukan dan membaca artikel-artikel kita lainnya.
Artikel yang akan ditampilkan pada related post per label, widget ini mempunyai fitur diataranya:
Widget yang sedang kita bahas ini mempunyai tampilan menyerupai pada Related post yang ada pada blog saya ini, untuk pemasangannya Anda dapat mengikuti langkah-langkahnya dibawah ini ;
5. Simpan Template
Penjelasan:
Demikian saya sampaikan tutorial membuat Bergambar Responsive di Bawah Postingan Blog, terimakasih sudah berkunjung dan biar bermanfaat.
Artikel yang akan ditampilkan pada related post per label, widget ini mempunyai fitur diataranya:
- Gambar mempunyai effect blur
- Fast loading
- Effect hover pada subtittel
- Responsive
Terkait :
Widget yang sedang kita bahas ini mempunyai tampilan menyerupai pada Related post yang ada pada blog saya ini, untuk pemasangannya Anda dapat mengikuti langkah-langkahnya dibawah ini ;
1. Log-in keakun Blogger
2. Pilih Template, kemudian klik Edit HTML
3. Selanjutnya Anda cari kode ]]></b:skin>, untuk memudahkan pencarian gunakan tombol CTRL+F, kemudian 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 isyarat <data:post.body/> , kemudian Anda copy isyarat dibawah ini dan pastekan dibawahnya
<!-- 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/AVvXsEjLk6aFK9CyPG3YtziMEr8T6V0cWEmP9pt0Hm70PDP4MOuBV5QhvqK5ObFL6-NV0oh9KHFFN2sUbWeGXYdb3ntz5ymNQ-zWK2kxvEMVkQ3Dp-ntqeJObsoCn0aMKZ5qH3_V9z5D5TJ18Sc/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></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>
<!-- Thumbnail Responsive End -->
5. Simpan Template
Penjelasan:
- 4 yakni pengaturan jumlah postingan yang ditampilkan
Demikian saya sampaikan tutorial membuat Bergambar Responsive di Bawah Postingan Blog, terimakasih sudah berkunjung dan biar bermanfaat.