Add Widget Related Post

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/AVvXsEhH-mMzjEbu4NAZmmjMCpnne6GAcC41Ajp6Owt8_f0TsskW_ibTfl-nRx_1hQ0nuCjzPQoglObm2uZQpYj6YM64NzmckMHeWMhiGqNqlV67S3oIOw4RrohkYmRqGr3ADtcxphdPAGZpTqEl/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/AVvXsEilMcbF6eompMUjGmVyeuJvNvt-gL3Rh5YDl_JOCX9qt0z9jpY3hvY9P6QvkT4KMMq93Db-NvZ-SM5a2zu_PKH-DgOHMLClA0_p1G_h3BoAxxzjPoIj6ZT6xix9ku1pnfEM2BiLdA5RRzlo/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