Widget Popular Posts merupakan sebuah Fitur penting dalam blog karena orang akan tertarik dengan adanya postingan yang populer dalam blog kalian, Namun demikian untuk menjadikan orang menrik tentunya harus di Desain sedemikian rupa sehingga orang akan lebih suka untuk berlama-lama diblog kita, tetapi tidak boleh mengurangi hal dasar dalam SEO, Kecepatan dalam Loading Blog, serta mudah dalam pemasangannya. Satu hal menurut kami dalam sebuah Desain, semenarik apapun warna dalam Blog namun Warna dasarnnya hanyalah di Hitam dan Putih, namun itu semua sesuai dengan selera kalian mau menggunakan unsur warna apapun boleh, hanya dalam pesan saya adalah Buatlah Widget Popular Posts yang sederhana serta menarik.
Widget Popular Posts 1
.PopularPosts .widget-content ul{margin-top:-7px;padding:7px !important;list-style-type:none;}
.PopularPosts .widget-content ul li{position:relative;padding:10px !important;width:100%;margin-bottom:1px}
.PopularPosts .widget-content ul li:nth-child(1){background:#444}
.PopularPosts .widget-content ul li:nth-child(2){background:#555}
.PopularPosts .widget-content ul li:nth-child(3){background:#666}
.PopularPosts .widget-content ul li:nth-child(4){background:#777}
.PopularPosts .widget-content ul li:nth-child(5){background:#888}
.PopularPosts .widget-content ul li:nth-child(6){background:#999}
.PopularPosts .widget-content ul li:nth-child(7){background:#aaa}
.PopularPosts .widget-content ul li:nth-child(8){background:#bbb}
.PopularPosts .widget-content ul li:nth-child(9){background:#c1c1c1}
.PopularPosts .widget-content ul li:nth-child(10){background:#ccc}
.PopularPosts .widget-content ul li a{color:white;text-decoration:none;}
.PopularPosts .widget-content ul li a:hover{color:#B8860B;}
Widget Popular Posts 2
.PopularPosts .item-title{font-weight:bold;padding-bottom:0.2em;text-shadow:0px 1px 0px #fff;}
.PopularPosts .widget-content ul li{padding:0.7em 0;background:none}
.PopularPosts img{border: 2px solid #FFF;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;padding-right: 0em;height: 5.4em;width: 5.6em;box-shadow: 0px 0px 6px rgba(14, 21, 34, 1);-webkit-transition: all 0.5s ease;}
.PopularPosts img:hover {-webkit-transform: rotate(360deg);}
.PopularPosts .item-thumbnail {margin: 0 5px 0px 5px;}
Widget Popular Posts 3
.popular-posts ul{padding-left:0px;} .popular-posts ul li {list-style-type: none;background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg04xhnoNOXX-Dyn6KvcUnWLlGXukF0NqnrIWt-8bnrnXsSShYYco-ovt6uixYPXeYX0cs6oENOcXaWrF7vJspc2iP1X36H2Or7bc8PcOHvFgOb4CfkSrwSTTTFP0u4YQ4p5tBLpOo6tUo/s1600/bo-pp-arrow.gif) no-repeat scroll 5px 10px;border: 1px solid #ddd;padding:5px 5px 5px 20px !important;margin:0 0 5px 0px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;} .popular-posts ul li:hover {border:1px solid #6BB5FF;} .popular-posts ul li a:hover {text-decoration:none;} .popular-posts .item-thumbnail img {border-radius: 100px;-moz-border-radius: 100px;webkit-border-radius: 100px; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);}
Widget Popular Posts 4
.popularposts{line-height:1.6;color:#fff;font-size:100%;border-radius:5px 5px 0 0;} .popular-posts{font-size:100%;line-height:1.6;border-radius:0; color:#fff} .popular-posts a{color:#fff} .popular-posts a:hover{color:#fff} .PopularPosts ul{counter-reset:popcount;list-style:none;padding:0;margin:0;} .popular-posts ul li:before{counter-increment:popcount;list-style-type:none;margin:10px 15px 0 5px;padding:0.3em 0.8em;content:counter(popcount);color:#fff;font-size:16px;position:relative;border:1px solid #fff;border-radius:100%;float:left;} .PopularPosts li{background:none;list-style:none;display:block;text-transform:uppercase;padding:10px 18px;margin:0;clear:both;overflow:hidden;border-bottom:none;font:13.5px/140%;} .PopularPosts li a{text-decoration:none} .PopularPosts li:hover{background:#0FB9BB} #PopularPosts1 .widget-content{margin-bottom:-2px;padding:0px 0 0 17px;} .PopularPosts ul li{padding:3px 7px;border:none} .PopularPosts ul li:nth-child(1){margin-right:0;background-color:#F48067;} .PopularPosts ul li:nth-child(2){margin-right:0;background-color:#2ba6e1;} .PopularPosts ul li:nth-child(3){margin-right:0;background-color:#718397;} .PopularPosts ul li:nth-child(4){margin-right:0;background-color:#11b7b5;} .PopularPosts ul li:nth-child(5){margin-right:0;background-color:#d9ba71;} .PopularPosts ul li:nth-child(6){margin-right:0;background-color:#d9ba71;} .PopularPosts ul li:nth-child(7){margin-right:0;background-color:#2ba6e1;} .PopularPosts ul li:nth-child(8){margin-right:0;background-color:#718397;} .PopularPosts ul li:nth-child(9){margin-right:0;background-color:#11b7b5;} .PopularPosts ul li:nth-child(10){margin-right:0;background-color:#d9ba71;} 0, .4);}
Widget Popular Posts 5
/***** Popular Post *****/
.PopularPosts .widget-content { background: #f2f2f2; border: 1px solid #e3e3e3; }
.PopularPosts h5 { background: #8C8C8C; color: #FFFFFF !important; padding: 12px 24px !important; margin: -1px -1px 0; }
.PopularPosts .widget-content { font-size: 15px; margin: 0 !important; }
.popular-posts ul { margin: 0 !important; padding: 0 !important; }
.popular-posts ul li { list-style: none; border-bottom: 1px solid #ccc; border-top: 1px solid #FFFFFF; padding: 0 !important; }
.popular-posts ul li:first-child { border-top: 0; }
.popular-posts ul li:last-child { border-bottom: 0; }
.popular-posts ul li:hover { background: #fafafa; text-decoration: none; }
.popular-posts ul li a { color: #404040; display: block; padding: 18px 24px; }
.popular-posts ul li a:hover { color: #262626; text-decoration: none; }
.popular-posts ul li .item-snippet { padding: 0 24px 18px; }
.PopularPosts img { background: #fff; border: 1px solid #CCCCCC; display: block; float: left; height: 48px; margin-right: 8px; padding: 3px; width: 48px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }
Selanjutnya ke tehnik Pemasangan Widget Popular Posts, Silahkan pilih salah satu widget Popular Post yang menarik dan cocok dengan blog anda :
1. Silahkan Log In ke Blog anda
2. Setelah Log In masuk ke Dashboard Klik Edit Template, Cari Kode ]]>
3. Lalu Copy Code CSS nya dan Paste tepat di atas kode ]]>
(lihat gambar di bawah) (untuk mencari Kode silahkan klik dimana saja asalkan masih di area kode Template lalu klik Contol F dan masukkan kode ]]>
(seperti yang saya lingkari dibagian kanan atas)
4. Setelah kode CSS terpasang silahkan klik Simpan.
Selanjutnya yaitu Setting Tata Letak Widget Popular Posts
1. Klik Tata letak, selanjutnya Klik Tambahkan Gadget
2. Setelah Muncul Pop Up seperti gambar, Pilihlah Postingan Populer
3. Setting Widget Popular Posts menurut kode CSS nya.
Paling Banyak di Kunjungi silahkan Pilih :
- Semua (Semua Postingan yang paling banyak dikunjungi sepanjang waktu)
- Tahun lalu 30 hari terakhir (Semua postingan yang paling banyak dikunjungi dalam 30 hari teakhir)
- 7 hari terakhir (Semua postingan yang paling banyak dikunjungi dalam 7 hari teakhir)
Tampilkan Judul Entri dan (Silahkan Centang)
- Thumbnail gambar (Widget Popular Posts yang akan tampil di sertai dengan gambar)
- Cuplikan (Widget Popular Posts yang akan tampil disertai dengan cuplikan Artikel)
- Tampilkan hingga (Misalkan Popular Post yang akan di tampilkan adalah 10 Artikel)
Menurut Kode CSS di atas adalah jika pada CSSnya ada gambar yang akan di tampilkan maka sebaiknya pada settingnya juga ikut di tampilkan
4. Terakhir Klik SIMPAN, selesai silahkan klik lihat Blog untuk melihat hasilnya, Jika merasa belum puas silahkan di edit kembali sesuai dengan keinginan anda. Semoga Bermanfaat.
Post a Comment