Tutorial Menambahkan Widget Related Post Di Blogger Dengan Mudah

Tutorial Blog kali ini Saya akan membahas mengenai cara menambahkan widget related post di blogger. Perlu diketahui, related post / artikel terkait adalah salah satu widget yang penting dalam sebuah blog. Hal ini karena dapat membantu visitor untuk mengakses artikel dengan tema serupa yang secara tidak langsung akan menambah jumlah page view blog yang kita kelola. Tidak perlu lama-lama, pemasangannya cukup membutuhkan waktu 5 menit saja.

Tutorial Menambahkan Widget Related Post Di Blogger Dengan Mudah :

1. Silahkan menuju ke halaman Dashboard > Template > Edit HTML

2. Klik Lanjutkan dan jangan lupa centang Expand Template Widget

3. Carilah kode </head>  (Untuk mempercepat pencarian klik F3 atau ctrl+F)

4. Letakkan kode berikut tepat diatas kode tadi

<!--Related Posts Start--> 

<style> 

#related-posts { 

float : left; 

width:550px; 

margin-top:0px; 

margin-left : 5px; 

font : 11px Verdana; 

padding:5px; 

} 

#related-posts .widget { 

list-style-type : none; 

margin : 5px 0 5px 0; 

padding : 0; 

} 

#related-posts .widget h2, #related-posts h2 { 

color : #940f04; 

font-size : 20px; 

font-weight : normal; 

margin : 5px 7px 0; 

padding : 0 0 5px; 

} 

#related-posts a { 

color : #054474; 

font-size : 12px; 

text-decoration : none; 

} 

#related-posts a:hover { 

color : #0080ff; 

text-decoration : none; 

} 

#related-posts ul { 

list-style:none; padding:0px !important; 

} 

#related-posts ul li { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxmEb_LV5PnQbp-0ooJFuc-Qn_SxaMThhKno2-kbbh4d4hp7I0aDamGEONT7vJV_NuSoV56k1HQAgB3WqT1IHguV5dc4zc-Wld2mVXhTSBdUwaWfGYZ4E8bxT2MCPw5c3_V7RCjLDb63gj/s1600/255.gif) no-repeat scroll 0px 6px; margin: 0.3em 0 !important; padding: 0 0 0.8em 20px; line-height : 2em; border-bottom:1px dotted #cccccc; 

} 

#related-posts ul li:hover{     

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_dcszr5EJ0YjZLIQwsvli3kcmyY8_NcbKipmUjZ5HKRm7OsHhqHB-p4L8LMf6VW8QBV-kNiLo2_uyrV1kT29w3UkcZgIQBH5MfWK1GAURBDzEzuMS-Kt2dL-l85NVXugBPSzfagJyTbX7/s1600/251.gif) no-repeat scroll 0px 6px !important; 

} 

  

</style> 

<script language='JavaScript'> 

//<![CDATA[ 

var relatedTitles = new Array(); 

var relatedTitlesNum = 0; 

var relatedUrls = new Array(); 

function related_results_labels(json) { 

for (var i = 0; i < json.feed.entry.length; i++) { 

var entry = json.feed.entry[i]; 

relatedTitles[relatedTitlesNum] = entry.title.$t; 

for (var k = 0; k < entry.link.length; k++) { 

if (entry.link[k].rel == 'alternate') { 

relatedUrls[relatedTitlesNum] = entry.link[k].href; 

relatedTitlesNum++; 

break; 

} 

} 

} 

} 

function removeRelatedDuplicates() { 

var tmp = new Array(0); 

var tmp2 = new Array(0); 

for(var i = 0; i < relatedUrls.length; i++) { 

if(!contains(tmp, relatedUrls[i])) { 

tmp.length += 1; 

tmp[tmp.length - 1] = relatedUrls[i]; 

tmp2.length += 1; 

tmp2[tmp2.length - 1] = relatedTitles[i]; 

} 

} 

relatedTitles = tmp2; 

relatedUrls = tmp; 

} 

function contains(a, e) { 

for(var j = 0; j < a.length; j++) if (a[j]==e) return true; 

return false; 

} 

function printRelatedLabels() { 

var r = Math.floor((relatedTitles.length - 1) * Math.random()); 

var i = 0; 

document.write('<ul>'); 

while (i < relatedTitles.length && i < 6) { 

document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); 

if (r < relatedTitles.length - 1) { 

r++; 

} else { 

r = 0; 

} 

i++; 

} 

document.write('</ul>'); 

document.write('<a rel="dofollow" href="http://ragam-beritaku.blogspot.com/2012/07/tutroial-menambahkan-widget-related-post-di-blogger-dengan-mudah.html" style="float:right;font-size:10px;">Get This Widget</a></font>'); 

} 

//]]> 

</script> 

<!--Related Posts Stop-->

5. Kemudian cari kode <data:post.body/>

6. Paste kode di bawah ini sebelum kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<div id='related-posts'> 

<font color='#289728' face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'> 

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font> 

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); 

</script> 

</div></b:if> 

7. Save, kemudian lihat hasilnya :)