Monday, January 13, 2014

Cara Install Related Post di Blogspot

Ane heran juga nih, kenapa di blogspot harus report install related post. Bukannya langsung disediakan seperti widget atau feature lainnya.

Tapi yah sudahlah…

Buat ente yang masih belajar seperti ane untuk install related post, berikut ane bantu sharing sekalian buat dokumentasi ane sendiri.


Ini source javascriptnya ane dapat dari bos-tutorial dot blogspotd dot com. Berikut langkah-langkah installnya :

1. Setelah login, masuk ke menu template >>Edit HTML
2. Kalau blogspot jaman dulu harus click expand widget, tapi di blog ane ini bisa langsung di edit.
3. Cari kode </head> (pake control F aja untuk memudahkan pencariannya)
Masukkan script berikut diatas </head> tersebut

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqAFz0Cwyo66_pMOOZTDOXldoHqtS3OOQ5tzwwafEySA-4vsRsR0QjRgyt5oN9XRcaTTIRiB2K_DGGlpyU71tot4lh1lo2DoBXqldLL7RVQi2bobehLvj5JhpS_2unefmolJgh-hZzsyM/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <scriptsrc='http://yourjavascript.com/11631137121/related_post_pelajaran_blog.js' type='text/javascript'/>

4. Langkah selanjutnya cari kode <data:post.body/>, lalu masukkan script berikut dibawahnya. Saat ane cari kode <data:post.body/> ane menemukan ada 3 kode tersebut dan berhasil diinstall related post nya di code yang kedua.

<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font 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>

Setelah selesai simpan template blognya.

Script diatas bekerja berdasarkan kesamaan label.

Tapi script diatas akan memunculkan link ke bos-tutorial dot blogspotd dot com di setiap postingan kita (dibagian bawah setelah related post), maka dari itu gak jadi ane pake...hehehe, tapi kalau ente tidak keberatan ya silahkan dicoba.

Nah…jika anda keberatan jika ada link seperti yang ane utarakan diatas, ini ada script lain yang bisa digunakan. Ane dapat dari seowaps dot com.
Langkah-langkahnya sama seperti diatas.

Ini Script ke 1 nya :

<script type="text/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 < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>

Ini Script ke 2 nya :

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

Selesai…selamat mencoba dan semoga bermanfaat.


Bye ..bye..

Artikel Terkait

No comments:

Post a Comment