Kumpulan kotak widget warna

Popular Posts merupakan widget blog yang mempunyai fungsi untuk menampilkan artikel atau postingan yang paling banyak dibaca oleh pengunjung blog. Banyak cara merubah tampilan popular posts default blogger dengan bentuk / format yang menarik dan kali ini Mashidayat juga akan berbagi tutorial blog pada anda mengenai modifikasi popular posts yang lebih keren dari yang sudah keren. Widget popular posts ini bagus juga diterapkan pada template galery.

yang satu lagi tampilan widget ini nantinya akan berbeda-beda warna dan style dari widget satu dengan yang lainya


Jika anda tertarik ingin mencoba memasang popular posts keren hasil modifikasi ini, silahkan simak tutorialnya yang akan saya sajikan dibawah ini.

1. Login ke Blogger
2. Di dasbor, silahkan pilih Template => Edit HTML
3. Ceklis kotak kecil di sebelah tulisan Expand Widget Templates.
4. Oia, backup dulu template anda untuk jaga-jaga kalau terjadi kesalahan
5. Sekarang tekan Ctrl+F dan cari kode ]]></b:skin>
lalu letakkan kode berikut ini diatasnya

#PopularPosts1 h2 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVxg9fPFTweYZ2NFIvdOQXix0UCphT787FvKwLnBDliWAiK8Bzu8SS-cVPaYEfRps-qVB5aFZTG1lcMytjdxkrw3-rsg52flpKhnyKU9ppKRUfu2K5-07YetA9x_0DWk7p-_xpHInE68Lp/s1600/RenderedImage.2.png") no-repeat ;
Width:300px;
Height:40px;
color: #ffffff;
font-size: 13px;
font-family: Oswald;
font-weight: strong;
margin: 10px 0px 5px 0px;
padding: 10px 0px 5px 20px;
text-align:none;
}
#BlogArchive1 h2 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtJ-uiAbqDSUMpLbPHlbGR5os_CSq9llT7_KQjSh6VzRmF3rNyACgpgQBMIi8ikbpnnD6ojB2GGvTDa0KgQJHtoBTNTqp8_XJLXFAeBHFF68EVuxDjHhtjaSNmVdw-YvyGGaG3qB0ptIHZ/s1600/RenderedImage.3.png") no-repeat;
Width:300px;
Height:40px;
color: #ffffff;
font-size: 13px;
font-family: Oswald;
font-weight: strong;
margin: 10px 0px 5px 0px;
padding: 10px 0px 5px 20px;
text-align:none;
}
#Label1 h2 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNdgslteKWKxJd9E3xySg4E4Hm59PTtWUU-0OZPdWMBP7ZyqTjx7FwU6Q-0u2zRhUqetKS8nGgaCCJhE_pdf5m1_UyORD26xMJ-LQ_OV__0bOh9_lSWBv99NaWFxH7-fjTjGFkbZh68Axm/s1600/RenderedImage.5.png") no-repeat ;
Width:300px;
Height:40px;
color: #ffffff;
font-size: 13px;
font-family: Oswald;
font-weight: strong;
margin: 10px 0px 5px 0px;
padding: 10px 0px 5px 20px;
text-align:none;
}

catatan
silahkan ganti url gambar yang berwarna merah dengan url gambar yang sudah Admin sediakan di bawah ini dan ingat gambar di bawah ukuran lebar 300px
sobat bisa menyesuaikan dengan mengatur lebar widget sidbar blog sobat , batas atas bawah kanan kiri bisa di sesuaikan dengan merubah padding margin ....oky gampang kan..?

5. silahkan save template sobat dan lihat hasilnya

Tak terasa kini kita telah berhasil membuat popular posts yang lebih keren dari yang sudah keren, ternyata cukup capek juga ya membuat kotak widget popular posts yang sekeren itu , hehhehehe tapi asalkan anda tahu lebih lelah yang menyajikan tutorialnya dari pada anda mempraktekan , hehehhe . ok sekian dari saya , silahkan mencobanya

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQ11jERQwp8YP43lo55oQx4fvuLPCYka0BRbayMuzFga63WyffAPuKggZFv1mLOJAWJJdfF5JflI3pRViN_loDzG_QI87d-p7bJyQLIHuEQ_YT-KEswztuso9kLy9SkYifhkRAXCpK7Zh/s1600/RenderedImage.aspx.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjJaNPHs2CSmWZYFV5XkKg4Pg8lP7KwXwOAuM-6ylq1CysblGsLLgqlJUfSGR7KznODzgRAsCqKyp8N0loiS61FCLX90zbWlpqA7jdGP2z_7LaEcFyXrqgLj-NHpf3exjZIcnCtuH7HwhH/s1600/RenderedImage.aspx+6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm7-6hLCZ-fhO0xSNoP8GxQUpoVJ9bPQatl7k_I9Pwcb3avhxp30ykO4rcDI2H0sEn0c_BHGG9yUDLdx6mDtGLRkg5-KzLUzMDxs_k12P-26AXhgabmgyz-szDVviGHDtvWuYw_UDjzD1z/s1600/RenderedImage.aspx0.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU4rxcfgTfYDBsk-I_jsSStYhyMtzNhKKA93r2U5rUUP1SY3Xzh6haSV4o1_eM1mY7KdQ4dhMEfzp4Zc7H8igMsHbcuCATYuUdWln0YIwC_fc1NS9SqjqaEHs6bcSBpqGZ79O7neHfyRym/s1600/RenderedImage.aspx9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm820zOSL060Sj5PMWDqTNEk5B6ndKNcu1QHydo5lULdlicilH7Sg0FuJcoY95q5hrW4zy3xPVc3hJpDvXQwuxNs4ERFZ9TzN6qh1P4d5R7w4oR7jRifFBmF4YzAje8wKgZGRhINj7Wcot/s1600/RenderedImage.aspx+7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLAAfQWRaSkx_wv_KJkbc_LnPUphvUTykIwX6z7ZMISwzzzpzU_h2pYaTpWgrEmMP3AYUZ4IyenKA9x9gxv7e0Eza_8h1YfN8N6PqI_GoV9FCVFJktI6BKZCeaY4A5EDB8iYySkgxb8mgq/s1600/RenderedImage.aspx.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0X6UVJwKyIpy7naBQuK-txgsY_-_VrWDPa3M_YeAZLV2CzRBHJCqx3AzvVKo74CCcld46G3JXBVNYSHvYqLCzprm2bBf8qVicmO-8jFMciXrNH54iIz0-JqtRdU_KiJ2sbO5TYbYVtBfv/s1600/RenderedImage.aspx2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEIg8tNiWWFG8fXneSYQDgEwmYi6BWQ306O9pYa-oZNuJVp0RTq8jCGvRrIBZ53PKcvRrLAIrxIEECtqFHwW5KHdSA-wBNlS4gB3_iAqromtzSbtdKBcOUFuahF7cbxe3gxDhACJ-weXlQ/s1600/RenderedImage.aspx3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI0YnxLXGF_hk5tj4afYDmjWBfIIiiuosgCYbyan3422gEV2l_u7nTdpp04hXMf2MTMwNcAu97NJzjk_-smdpJ6DmXGXTTI4dPw0BNGA7zweiZ6-Q-j1ebYXUf0LNvaKQ9l5zT-PhHOjdB/s1600/RenderedImage.aspx5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBeJFmS44giQyd-U7bsBehQP851KBFogq72DgBihqCSEl7u9Ybulte3_erpwUaDQ-8rLKcgEkhn6gOiUNnffnP7D5pg_Rx3NMGcGzaZiBYLKBC4gbmb4zRfLuuXjxuPADr5czfzWdziBo9/s1600/RenderedImage.aspx6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA7AaPsOJlP5K3iKWltQpe5lUYegjBu3027KuYe9KqF3phyphenhyphennseQpgdjtR6w7nSMvLwBqveCK_AiUQ0NS5MWGyYqmvZAZwdjXSVg-JED9JUnAe3zz5CtkeERs5tWCVVpnu1OlTsk9tXidpU/s1600/RenderedImage.aspx58.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhudjEa8E5nnRSyLcrDdg55q8ytRSwxGQpliJzbiY57Ehr7X2N03UvVEQiOt76OBCmbvEfeP5kDUMwIDn9pKDhjd2Tj2jDzZ2QBRNzhJyttCYlh__7Gze7iOelPAMfj97iZPpZoZtH4l9G3/s1600/RenderedImage.aspx6666.png

Tweet