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!
- 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 ]]>
/* 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;}
- 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
sehingga hasilnya tampak seperti di bawah ini:
Other Recommended Posts
Simpatn template Finish dan lihat hasilnyaCatatan : 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.
»» READMORE...