Modifikasi widget popular posts blogger

Mungkin anda berencanda untuk merubah tampilan widget popular posts yang biasa aja?berikut saya akan memberikan tutorial tentang merubah tampilan widget popular posts keren pada blogger,caranya sangat mudah sob,hanya perlu menambah beberapa code CSS pada tempelate kita,dan hasilnya tampilan popular post pun lebih menarik. . :)

Berikut cara merubah tampilan popular posts pada blogger:

• Pastikan anda sudah memasang popular post
• Edit widget popular post pada blog anda tanpa thumnail dan cuplikan pada popular post
• Kalau sudah sekarang ke menu tempelate>>edit HTML
• Lalu cari kode ]]></b:skin>
• Copy CSS dibawah ini
• Letakan tepat diatas kode ]]></b:skin> pada tempelate anda

.popular-posts ul li a {
background: none repeat scroll 0 0 #DDDDDD;
color: #444444;
display: block;
margin: 0 0 0.5em;
padding: 0.4em;
position: relative;
text-decoration: none;
transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
background: none repeat scroll 0 0 #CCCCCC;
font-weight: 700;
height: 2em;
left: -2.5em;
line-height: 2em;
margin-top: -1em;
position: absolute;
text-align: center;
top: 50%;
width: 2em;
}
.popular-posts ul li a:after {
border: 0.5em solid transparent;
content: "";
left: -1em;
margin-top: -0.5em;
position: absolute;
top: 50%;
transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {
border-left-color: #CCCCCC;
left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}

• Kalau sudah previeuw dulu tempelate anda
• Bila tidak ada yang error langsung "Save"
• Dan lihat hasilnya. .

Nah begitulah cara simple dan mudah,merubah tampilan popular post pada blogger.selamat mencoba dan Happy blogging. . ! ! :D

Modifikasi Kotak Pesan Komentar Admin

Cara mudah Memodifikasi tampilan pesan formulir komentar di blog kita, mungkin bagi anda yang bosan dengan tampilan pesan komentar pada blog anda yang biasa-biasa saja karena tidak ada warna background atau yang lainya. Dengan sedikit modifikasi mungkin ini bisa jadi solusi, kita bisa merubah warna background, warna font, jenis font dan ukuran font. Memodifikasinya sangat mudah dilakukan karena hanya sedikit perubahn pada kode HTML dan sedikit penambahan kode CSS pada tempelate.
Berikut cara memodifikasi Tampilan Pesan Komentar:

• Masuk ke dasbord blogger
• Tempelate >> Edit HTML
• Cari kode <p><data:blogCommentMessage/></p>
• Lalu ganti dengan kode dibawh ini

<div id='pra-comment'><data:blogCommentMessage/></div>

• Biasanya dalam tempelate kode <p><data:blogCommentMessage/></p> ada dua,ganti semua kode tersebut
• Kalau sudah sekarang cari kode ]]></b:skin>
• Copy CSS dibawah ini dan letakan diatas ]]></b:skin>

/*-- modifikasi pesan komentar--*/ #pra-comment{ position: relative; background:#F3C5C5; width:100%; padding:10px; font:normal 12px trebuchet ms; text-align:justify; border:3px solid #AD3000; margin:0 10px 10px 0; margin-top: 10px; line-height: 1.3em; } #pra-comment::after, #pra-comment::before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none } #pra-comment::before { border-top-color: #AD3000; border-width: 15px; left: 10%; margin-left: -36px } #pra-comment::after { border-top-color: #F3C5C5; /* Samakan dengan warna background */ border-width: 9px; left: 10%; margin-left: -30px }

Kalau sudah,SIMPAN tempelate anda,dan sesuaikan pesan pada kotak pesan komentar dengan kata-kata yang anda inginkan. .
selamat mencoba. . .