Sunday, November 12, 2017

√ Cara Modifikasi Widget Popular Post Di Blog

Cara Modifikasi Widget Popular Post di Blog √ Cara Modifikasi Widget Popular Post di Blog
FARESPO - Jika anda yaitu seorang blogger, khususnya yang memakai platform blogspot, tentunya anda sudah cukup jago bukan mengotak-atik "jeroan" pada tampilan blog anda, terlebih lagi kalau anda merupakan seorang yang telah berpengalaman dalam dunia blogging, namun bagi anda yang gres menekuni dunia blogging, inilah waktu yang sempurna bagi anda untuk mengasah kepiawaian anda, alasannya yaitu siapa tahu nanti anda dapat menjadi salah satu master di dunia blogsphere, hehe.

Nah, bagi anda yang memakai platform blogspot, tentunya anda sudah mengetahui bukan banyak sekali macam widget yang telah disediakan oleh pihak blogspot pada halaman tata letak, sederhananya itu semua merupakan widget yang asli dan belum dimodifikasi, jadi kalau anda ingin memodifikasi salah satu dari widget disana, anda dapat mengatur atau mengotak-atiknya lewat Edit HTML, tepatnya anda cukup menambahkan beberapa bait aba-aba CSS3 saja, maka nanti tampilanya akan berubah sesuai dengan perintah dari aba-aba CSS3 tadi.

Pada chapter modifikasi widget blog ini, aku ingin membahas mengenai salah satu modifikasi dari widget yang cukup penting di blogspot, yakni popular post, kegunaan widget ini yaitu menampilkan artikel-artikel atau konten yang terkenal di blog anda dalam jangka waktu selamanya, 1 bulan, 1 minggu, dll. Nantinya kita akan memodifikasi widget popular post ini menjadi menyerupai rounded corners, atau berbentuk menyerupai oval yang memanjang.

Sebenarnya postingan ini juga sudah pernah aku bagikan sebelumnya tentang cara modifikasi widget popular post blogger, hampir sama juga menyerupai widget yang akan aku bahas ini, namun hanya berbeda dari segi tampilan saja, tujuanya yaitu untuk menyuguhkan banyak opsi dan pilihan modifikasi yang cocok dengan tampilan blog anda.

Cara Modifikasi Widget Popular Post di Blog

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML.

4. Cari aba-aba ]]></b:skin> (gunakan CTRL+F).

5. Lalu letakkan aba-aba berikut ini sempurna diatas ]]></b:skin>.

/* Kode CSS Modifikasi Popular Post Start */
.farespo-popular-posts ul{padding-left:0px;}
.farespo-popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.farespo-popular-posts ul li a {
font-style: italic;
}
.farespo-popular-posts ul li:hover {
border:1px solid #d10202;
 -moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.farespo-popular-posts ul
li a:hover {
text-decoration:none;
}
.farespo-popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.farespo-popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}
/* Kode CSS Modifikasi Popular Post End */

6. Klik "Save/Simpan" Template.

7. Sekarang menuju ke halaman Tata Letak / Layout.

8. Klik Add / Tambahkan Gadget.

9. Pilih Entri Populer / Popular Posts.

Cara Modifikasi Widget Popular Post di Blog √ Cara Modifikasi Widget Popular Post di Blog







10. Hilangkan centang pada opsi "cuplikan/snippet".

Cara Modifikasi Widget Popular Post di Blog √ Cara Modifikasi Widget Popular Post di Blog









11. Klik "Save/Simpan", dan selesai.

Demikian warta terbaru perihal Cara Modifikasi Widget Popular Post di Blog, simak juga artikel dan ulasan menarik lainya seputar tips trik dan tutorial blog tentang Membuat Menu Navigasi (Navbar) Blue Thin di Blog, agar bermanfaat, dan selamat berkreasi, Happy Blogging!

Via Bloggertrix


Sumber http://farespo.blogspot.com