Cara Pasang Artikel terkait di bawah postingan Di Blogspot

Design tampilan sebuah blog adalah segalanya buat saya, terkadang lebih  diutamakan designnya dari segi warna dan tata letak layout dari pada memposting sebuah artikel yang bermanfaat.

Banyak sekali bahan ispirasi untuk men-desaign halaman sebuah blog, terkadang apa yang kita inginkan tidak sesuai dengan hasilnya. sebagai contoh kita ingin memasang sebuah accessories related post / postingan terkait yang terpasang cantik dan rapi di halaman blog master seperti kolom-tutorial dan O-om.com.

Sebenernya ada banyak model Related Post namun saya akan memberikan contoh bagai mana cara memasang artikel terkait beradasarkan label di bawah postingan. Ok kita mulai saja!

1. Login account blogger → Layout → Edit HTML → centang Expand Widget Templates
2. Copy code di JavaScript dibawah ini di ataran ]]> dan
3. Copy code CSS di bawah ini di atas ]]>

/* Related Post
----------------------------------------------*/
#related-posts {
float : left;
width : 585px;
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://www.pronetter.com/file/newconcept_bullet.png") 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;}

4. Cari code di bawah ini (Ctrl + F2)

 
 / 

5. Copy code di bawah ini, kemudian paste di atara code warna Hijau dan Merah di atas (4)
6. Jangan lupa tambahkan code di bawah code

sehingga hasilnya tampak seperti di bawah ini:

Simpatn template Finish dan lihat hasilnya

Catatan : Apabila ada kesalahan atau error coba Anda baca mungkin Anda kurang menambahan tag atau .

Anda sudah mengikuti langkah-langkah di atas namun hasil belum maksimal, silahkan post disini saya akan coba membantunya. Terima kasih semoga bermanfaat.