Membuat Artikel Terkait (Versi 1.0)

Browsing kesana kemari mencari artikel Related Post tapi malah membuat pusing, bingung dan tidak hanya sekali mengalami kegagalan, berkali-kali bahkan sampai bosan membuat Related Post. Pernah melakukan berbagai percobaan Related Post ada yang berhasil tetapi kurang puas dengan hasilnya. Akhirnya ramu sana ramu sini berginilah related post yang Blogger Tune-Up gunakan. Blogger Tune-Up ingin membuat berbagai tips dan trik blogger hack yang sederhana, fleksible tapi dengan hasil lumayanlah, cukup memuaskan. Mau mencoba tips trik blogger hack kali ini mengenai related post atau artikel terkait (ada juga yang memberi nama "Artikel Menarik Lainnya")? Ikuti langkah dibawah ini...

Integrasi Artikel Terkait (Versi 1.0)

Langkah 1
Login ke Blogger
Langkah 2
Pilih "Tata Letak - Edit HTML"
Langkah 3
Backup Template Blog untuk mengantisipasi kegagalan modifikasi template
Langkah 4
Jangan lupa check "Expand widget template"
Langkah 5
Masukan Cascading Stye Sheet (CSS) seperti dibawah ini:
Cari kode dibawah ini :

]]></b:skin>

Copy Paste (CoPas) kode dibawah ini tepat diatasnya :

#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 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://dedehendriono.googlepages.com/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

Langkah 6
Sebaiknya simpan terlebih dahulu template untuk mencegah terjadinya error template
Langkah 7
Cari kode dibawah ini :

</head>

Langkah 8
Masukan link dibawah ini tepat diatas langkah 7 :

<script src='http://hensblog.googlecode.com/files/artikelterkait.js' type='text/javascript'/>

Langkah 9
Cari kode dibawah ini :

<data:post.body/>

Langkah 10
Masukakan kode dibawah ini tepat dibawah langkah 9 :

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Artikel Terkait : </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>

Langkah 11
Simpanlah template dan preview blog

Keterangan :

• Silahkan ubah kode CSS tersebut sesuai dengan keinginan.
• Perhatikan Langkah 10, ubah nama "Artikel Terkait" sesuai keinginan dan ubah nilai 5 untuk menentukan jumlah artikel terkait yang akan ditampilkan, jika diset nilai maka hanya akan muncul 5 artikel dari setiap kategori.

Tampilan secara keseluruhan dari semua langkah diatas:

#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 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://dedehendriono.googlepages.com/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
]]></b:skin>
...
...
<script src='http://hensblog.googlecode.com/files/artikelterkait.js' type='text/javascript'/>
</head>
...
...
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Artikel Terkait : </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>

Mudah-mudahan berhasil... Happy blogging :) Tinggalkan pesan dikomentar jika mengalami kegagalan...