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!
- Login account blogger → Layout → Edit HTML → centang Expand Widget Templates
- Copy code di JavaScript dibawah ini di ataran ]]> dan
- Copy code CSS di bawah ini di atas ]]>
- Cari code di bawah ini (Ctrl + F2)
- Copy code di bawah ini, kemudian paste di atara code warna Hijau dan Merah di atas (4)
- Jangan lupa tambahkan code di bawah code
/* 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;}
/
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.
