Memasang Popular Post dengan gambar bulat

Siapa sih yang ngak kepengen tampilan blognya menjadi keren dan menawan ? tentunya setiap para blogger ingin membuat para pengunjungnya kembali hadir untuk mengunjungi blog-nya ibarat dunia nyata orang yang memiliki blog adalah seorang pedagang dan mereka berharap pembeli akan datang kemudian hari membawa apa yang mereka inginkan.

Dalam hal ini ternyata keindahan popular post dapat mempengaruhi tingkat laju (trafik) jumlah pengunjung lho. Ya walaupun tergolong hanya berapa persentase saja akan tetapi setelah saya survei ke blog-blog sahabat hampir 90% semuanya memakai popular post dengan judul atau title yang beraneka ragam, So kenapa masih pakai yang default.? Hehehehe

Popular Post ini adalah merupakan bagian dari kegiatan mempercantik tampilan sebuah blog, oleh karenanya silahkan anda mengunjungi artikel Tentang dan Seputar Blog untuk sekedar merefresh pemahaman anda.

Itulah Gambaran screenshot untuk popular post yang saya share kali ini dan untuk tutorialnya sahabat bisa baca artikel ini sampai habis. Oh iya jika sahabat kurang suka dengan gaya post diatas saya juga menyajikan banyak popular post yang saya kumpulkan di Kumpulan Popular Post Keren, Terbaru Dan Di Update Disana sahabat bisa melihat koleksi popular post yang bisa sahabat pakai ataupun poles dan modifikasi untuk membuat popular post yang baru.

Baiklah saya akan langsung memulai tutorialnya Cara Memasang Popoular Post Dengan Gambar Bulat yang Keren ini.

“ Sebelum melakukan tindakan tutorial berikut ini alangkah baiknya sahabat membackup template sahabat terlebih dahulu, karena tidak semua kode apapun bisa berhasil atau sinkron terhadap template yang sahabat punya. “

Ini dia langkah-langkah tutorial Cara Memasang Popoular Post Dengan Gambar Bulat yang Keren

1. Masuk ke dalam Blogger sendiri-sendiri
2. Pada layar Dasboard pilih Template kemudian Edit HTML
3. Carilah kode CSS popular Post default dalam template sahabat, biar cepat gunakan CTRL+F Setelah dapat hapus kode tersebut. Ingat hati-hati dalam memodifikasi jika sahabat kurang yakin tidak dihapus juga tidak masalah
4. Lihat kode CSS berikut dan Copas tepat sebelum kode ]]></b:skin> atau dimana tempat sahabat menghapus popular post defaultnya tadi.

Kode CSS :

 /*---Popular Posts Customized--- */ .popular-posts .item-thumbnail img:hover { opacity: 1; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent),color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); } .popular-posts .item-thumbnail img { border-radius: 100px 100px 100px 100px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border: 5px solid #eee; /*Transition*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .popular-posts ul li { margin: 12px; opacity: 0.8; border: 5px solid #eee; border-radius: 100px 100px 100px 100px; /*Transition*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; /*Reflection*/ } .popular-posts a{ font-size: 13px solid; }

Lihat hasilnya blog sahabat, sudah berubah kah.?

Itulah tadi Cara Memasang Popoular Post Dengan Gambar Bulat Salam sukses slalu buat para blogger-blogger, semoga bisa terus menjadi sahabat dan saling berbagi aspirasi dan inspirati serta kreasinya.

Sumber

Seputar Dunia Blogging