Bismillah... Lama sekali Blogger Tune-Up tidak menulis artikel... Ma'af sekali teman-teman blogger, masalah klasik sedang melanda. Koneksi yang tidak stabil (endut-endutan) sehingga untuk publish artikel dan membalas komentar sangat sulit, dan ini juga sedang mengakali masalah tersebut. Sekali lagi ma'af karena jarang update dan membalas komentar, Insya Allah setelah koneksi stabil akan dibahas semua pertanyaan dan komentar-komentar teman-teman.
Setelah membahas 4 versi artikel terkait, sekarang kita akan mencoba artikel terkait yang sangat mudah sekali di integrasikan pada blog kita. Tetapi kode javascript dan jQuery-nya bukan milik Blogger Tune-Up, ini hanya ulasan dari artikel blogger lain. Walau demikian setelah di coba sesuai dengan informasinya, artikel jenis ini sangat mudah diterapkan pada blog kita, selain itu load yang sangat ringan karena menggunakan Google Data API serta ditambahkan sedikit efek jQuery walau tidak begitu terasa efeknya. Sebenarnya Blogger Tune-Up ingin membuat artikel terkait versi lain yang melibatkan gambar mini (thumbnail) yang diambil dari gambar yang ada diartikel plus sedikit ulasan artikelnya (summary post). Mungkin teman blogger ada yang punya referensinya. Nanti kalau scriptnya sudah jadi ditambahkan sentuhan efek jQuery pasti lebih mantap hasilnya. (Sayang baru angan-angan...)
1. Mengintegrasikan Artikel Terkait pada Sidebar
Untuk mengintegrasikan artikel terkait pada sidebar cukup mudah, ikuti langkah dibawah ini:Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian Rancangan - Elemen Laman
Langkah 3
Tambahkan sebuah Gadget dengan type HTML/JavaScript
Langkah 4
Masukan kode dibawah ini pada bagian konten:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>Langkah 5
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'loadingText':'memanggil...'
,'relatedTitle':'Artikel Terkait'
});
</script>
Klik tombol Simpan dan Preview blog anda...
2. Mengintegrasikan Artikel Terkait dibawah Artikel
Untuk mengintegrasikan artikel terkait dibawah artikel, ikuti langkah dibawah ini:Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian Rancangan - Elemen Laman
Langkah 3
Tambahkan sebuah Gadget dengan type HTML/JavaScript
Langkah 4
Masukan kode dibawah ini pada bagian konten:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>Langkah 5
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'memanggil...'
,'relatedTitle':'Artikel Terkait'
});
</script>
Klik tombol Simpan dan Preview blog anda...
Mudah bukan? Kalau diperhatikan antara pemasangan pada sidebar dengan pemasangan dibawah artikel caranya sama saja, hanya ada penambahan kode dibawah ini:
'containerSelector':'div.post-body'
jadi kita tidak perlu masuk kebagian template blogger yang memusingkan, karena kode secara otomatis akan menempatkannya pada bagian bawah artikel...
3. Penambahan kode CSS
Sedangkan jika kita ingin mempercantik tampilan Artikel Terkait, silahkan berekspresi dengan bermain-main kode CSS dan Blogger Tune-Up memberikan contoh kode CSS seperti dibawah ini:
<style type="text/css">
#related-posts{
border:1px solid #BBB;
clear:both;
color:#CCCCCC;
margin-bottom:10px;
margin-top:5px;
padding:5px;
}
#related-posts h2{
border-bottom:1px dotted #223344;
color:#223344;
font:bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
margin-bottom:0.5em;
margin-top:0;
}
#related-posts ul {
list-style:none outside none;
margin:0;
padding:0;
}
#related-posts ul li{
display:list-item;
background:url(http://www2.blogblog.com/rounders/icon_arrow_sm.gif) no-repeat scroll 2px 0.4em transparent;
border-bottom:1px dotted #BBBBBB;
line-height:1.4em;
margin:0 0 3px;
padding:0 0 3px 16px;
}
#related-posts ul li:last-child{
border-bottom:none;
}
#related-posts ul li a{
text-decoration:none;
}
#related-posts-loadingtext{
color:green;
}
</style>
Untuk intergrasi kode CSS satukan saja pada kode JavaScript diatas (pemasangan pada sidebar atau dibawah artikel), sehingga kode menjadi seperti dibawah ini:
<style type="text/css">Selamat mencoba dan semoga berhasil... Happy Blogging :)
#related-posts{
border:1px solid #BBB;
clear:both;
color:#CCC;
margin-bottom:10px;
margin-top:5px;
padding:5px;
}
#related-posts h2{
border-bottom:1px dotted #234;
color:#234;
font:bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
margin-bottom:0.5em;
margin-top:0;
}
#related-posts ul {
list-style:none outside none;
margin:0;
padding:0;
}
#related-posts ul li{
display:list-item;
background:url(http://www2.blogblog.com/rounders/icon_arrow_sm.gif) no-repeat scroll 2px 0.4em transparent;
border-bottom:1px dotted #BBB;
line-height:1.4em;
margin:0 0 3px;
padding:0 0 3px 16px;
}
#related-posts ul li:last-child{
border-bottom:none;
}
#related-posts ul li a{
text-decoration:none;
}
#related-posts-loadingtext{
color:green;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hensblog.googlecode.com/files/new_relpost_pack.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'memanggil...'
,'relatedTitle':'Artikel Terkait'
});
</script>
Special thanks to Moretechtips.net
