Membuat Related Posts responsive di bawah postingan pada blogger - ini merupakan widget atau bagian yang saya kira wajib ada pada blog kita. Karena bisa dikatakan merupakan media atau sarana navigasi untuk menyuguhkan dan menyarankan kepada pengunjung untuk membaca artikel yang terkait dengan artikel yang dibacanya saat itu. Jadi lumayan untuk menambah jumlah view artikel pada blog kita. Semakin banyak jumlah viewer maka semakin besar pula keuntungan yang bisa kita dapatkan. Selain blog selalu direkomendasikan google pada search engine juga semakin memperbanyak pendapatan jika blog kita sudah terdaftar google adsense.
Sekarang bagaimana cara membuat dan memasangnya? Mari ikuti langkah demi langkah di bawah ini dengan teliti agar tidak terjadi kesalahan yang berakibat fatal. Saran saya jika Anda masih tahap-tahap belajar, lebih baik templatenya dibackup dulu. Jika Anda mengikuti langkah-langkahnya dengan benar maka nanti seharusnya hasilnya akan seperti gambar di bawah ini.
Style di atas merupakan style milik template Viomagz. Dan kita akan menggunakan style tersebut. Keuntungan dari style ini adalah Responsive. Jadi meskipun kita buka di mobile/hp hasilnya tidak berantakan.
Lets Code!!!
Langkah pertama silahkan kalian letakkan kode CSS di bawah ini sebelum tag </style>. Tips jika di template kalian terlalu banyak tag style silahkan perhatikan tag kondisional blogger yang membungkusnya. Saya sarankan taruh di tag style yang tak memiliki tag kondisional blogger. Atau jika mau meletakkannya di tag style yang dibungkus dengan tag kondisional blogger, pastekan di tag style yang memiliki pembungkus <b:if cond='data:blog.pageType == "item"'>. Namun jika kalian masih merasa bingung lebih baik buat tag style sendiri, lalu letakkan tepat sebelum tag </head>. Berikut kode CSSnya.
/* RELATED POSTS */
.related-post {
margin: 30px auto 0;
overflow: hidden;
}
.label-line-c {
position:relative;
}
.label-line-c {
text-align: center;
margin-bottom: 6px;
}
.label-line:before, .label-line-c:before {
z-index: 1;
content: "";
width: 100%;
height: 2px;
background: #efefef;
position: absolute;
top: 50%;
left: 0;
margin-top: -2px;
}
.related-post h4 {
position:relative;
margin: 0;
display: inline-block;
font-weight: 600;
color: #000;
text-transform: uppercase;
font-size: 15px;
z-index: 1;
background: #fff;
padding: 0 10px;
}
.related-post ul {
padding: 0 !important;
font-size: 14px;
}
/* Style 3 */
.related-post-style-3,
.related-post-style-3 li {
margin: 0;
padding: 0;
list-style: none;
word-wrap: break-word;
overflow: hidden;
}
.related-post-style-3 .related-post-item {
transition: opacity 0.2s linear;}
.related-post-style-3 .related-post-item {
float: left;
width: 23.5%;
height: auto;
margin-right: 2%;
margin-bottom: 10px;
}
.related-post-style-3 .related-post-item:nth-of-type(4n+0) {
margin-right: 0;
}
.related-post-style-3 .related-post-item:hover {
opacity: 0.7;
}
.related-post-style-3 .related-post-item-thumbnail {
display: block;
max-height: none;
background-color: transparent;
border: none;
padding: 0;
max-width: 100%;
}
.related-post-item-thumbnail{border-radius: 3px;}
.related-post-style-3 .related-post-item-title {
color: #444;
}
.related-post-style-3 .related-post-item-tooltip {
padding: 10px 0;
}
.related-post-item-tooltip .related-post-item-title {
font-weight: 500;
display: block;
}
@media only screen and (max-width:480px){
.related-post-style-3 .related-post-item {
width: 48%;
margin-right: 4%;
}
.related-post-style-3 .related-post-item:nth-of-type(2n+0) {
margin-right: 0;
}
.related-post-style-3 .related-post-item:nth-of-type(2n+1) {
clear: both;
}
}
Kalian bisa mengubahnya nanti sesuai style yang kalian lebih suka. Selanjutnya ini yang paling penting dan kalian juga harus teliti. Karena kode berikut ini merupakan penempatan Related Postsnya. Pastekan kode di bawah ini tepat sebelum tag </article>. Atau jika di template kalian tidak menggunakan tag tersebut bisa di taruh di bawah <data:post.body/>. Cari kode tersebut, jika ada banyak di template kalian silahkan dicoba satu-persatu.
Tips untuk lebih mudah memasangnya, kalian cek pada halaman postingan. Widget apa saja yang ada di bawah postingan kalian. Dan biasanya untuk penempatan Related Post di bawah postingan ini tempatnya berada di atas komentar. Jadi sebaiknya kalian cek widget sebelum komentar. Jika terdapat widget share sosial media, tinggal kalian cari widgetnya lalu pastekan di bawahnya. Cara mengetahuinya tentu kalian harus mengetahui bahasa HTML dan tag-tag pada blogger. Berikut kodenya.
<b:if cond="data:blog.pageType == "item"">
<div class="related-post" expr:id=""related-post-" + data:post.id">
<script>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<div class='label-line-c'><h4>Related Posts</h4></div>",
numPosts: 4,
summaryLength: 370,
titleLength: "auto",
thumbnailSize: 250,
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikIH6FXIZOf_JqjgGZVrx3nq3q3LFoiokJccVJyILQSz4k4-aZrCRsr0RM4vW6YHCimyuWhctre7ctCDwJ0t7OrnfqTTehSdyk2L5Yt4aBbwxiLa_egcMhfxBm_5KBimhGkw05w2Nfje6p/w250-c-h250/no-image.png",
containerId: "related-post-<data:post.id/>",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};
</script>
</div>
</b:if>
Setelah selesai, selanjutnya kita akan pasang kode Javascriptnya. Letakkan tepat di atas tag </body>.
<b:if cond="data:blog.pageType == "item"">
<script>
//<![CDATA[
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>
Artikel Terkait:</h4>
",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(//$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:///g , "//").replace(//s[0-9]+(-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='
<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>
"}else{if(A==3||A==4){c+='
<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip">
<a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>
"+y+"</li>
"}else{if(A==5){c+='
<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>
"}else{if(A==6){c+='
<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip">
<img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div>
</li>
"}else{c+='
<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>
"}}}}}s.innerHTML=c+="</ul>
"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(//$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>
Nah sampai sini sudah selesai. Coba save template kalian dan lihat hasilnya. Jika ada error, coba ulangi dan teliti lagi dari awal. Biasanya menurut sepengalaman saya pribadi waktu masih tahap belajar memasang widget-widget di blogger sering salah di penempatan kode-kodenya. Awalnya saya berpikir bahwa di kodenya pasti ada yang salah. Setelah berusaha lagi dan lebih teliti lagi akhirnya bisa. Dan letak kesalahannya di penempatan masing-masing kode ada yang salah.
Oke, demikian cara membuat Related Posts atau Artikel Terkait di bawah postingan pada blogger. Semoga bermanfaat.
