twittsev.com

Situs Web Pendidikan Terupdate

7 Tempat Wisata Perbukitan Keren dan Hits di Banyumas (Bag. Kedua)

7 Tempat Wisata Perbukitan Keren dan Hits di Banyumas (Bag. Kedua)7 Tempat Wisata Perbukitan Keren dan Hits di Banyumas (Bag. Kedua)

Memasang widget Popular Post merupakan salah satu cara agar pengunjung tertarik untuk membaca artikel-artikel pilihan yang ada di blog kita. Artikel-artikel tersebut merupakan artikel yang sering dibaca oleh pengunjung sehingga harapannya juga dapat menarik perhatian pengunjung lainnya untuk membaca artikel tersebut. Selain itu, widget ini juga berfungsi untuk memudahkan pengunjung dalam menjelajahi setiap postingan yang ada di blog kita.

Secara default, widget popular post memang telah disediakan oleh blogspot dengan tampilan simpel dan sederhana. Meski begitu, kita dapat memodifikasi tampilan postingan populer tersebut agar menjadi lebih menarik. Salah satunya yaitu dengan memberikan sentuhan warna-warni unik agar tampilan blog menjadi lebih cantik. Tampilan yang unik tentu akan terlihat sangat menarik di mata pengunjung sehingga peluang artikel untuk dibaca juga lebih besar ketimbang saat tampilan standar.

Pada postingan kali ini, saya akan berbagi cara untuk membuat widget popular post dengan tampilan warna-warni keren dan cantik untuk menghiasi tampilan blog anda. Ada dua style yang bisa anda pilih. Untuk tampilannya kurang lebih seperti berikut ini:

artikel populer warna warni

Anda tertarik untuk membuatnya?, silahkan ikuti langkah-langkah pembuatannya di bawah ini.

Cara Membuat Widget Artikel Populer Warna Warni Keren

1. Buka akun blogger anda.

2. Pilih menu layout (tata letak) dan klik pada add gadget (Tambahkan Gadget) di bagian sidebar.

3. Selanjutnya pilih Entri Populer atau Postingan Populer. Jika sudah, lihat gambar berikut ini:

setting

Keterangan:
silahkan beri judul widget dan atur sesuai pilihan anda.
jika ingin disertai gambar silahkan centang pada pengaturan thumbnail, kalau tidak ingin ada gambar maka jangan dicentang.

3. Klik simpan.

Postingan populer sudah muncul di blog anda. Sekarang tinggal langkah untuk memodifikasi tampilannya.

4. Kembali pada menu dashboard blogger, pilih tema dan klik edit html.

5. Kemudian cari kode ]]></b:skin> atau </style>.

6. Jika sudah ketemu, silahkan anda copy salah satu script kode dari pilihan dua style di bawah ini dan letakkan di atasnya.

Popular Post style 1

popular post style 1

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, ‘Times New Roman’, Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:63px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:”8″}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:”9″}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:”10″}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:”6″}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:”7″}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:”5″}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:”4″}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:”3″}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:”2″}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:”1″}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Sumber: https://ngegas.com/ini-alasan-software-open-source-diminati/