Kumpulan widget Popular post keren dan warna warni untuk blog anda - Kali ini saya akan berbagi tutorial cara membuat popular post warna warni di blog atau popular post keren yang akan membuat tampilan blog anda lebih relevan dan tampil lebih stylis.
Popular post atau posting populer adalah artikel yang paling sering di kunjungi atau banyak mendapatkan komentar dari pengunjung.
Sebelum anda membuat popular post keren untuk blog anda, silakan terlebih dahulu anda memilih mana yang cocok untuk blog anda. Dibawah ini adalah kumpulan kode widget popular post keren, warna warni dan tentu akan menambah blog anda SEO (maybe) hehe.
Berikut kumpulan widget popular post atau widget posting populer warna warni, keren, seo ! !
- Popular post warna warni V.1
Cara memasang :
1. Klik menu template dan edit HTML
2. Cari kode ]]></b:skin> ,Gunakan CTRL+F
3. Copy dan paste kode berikut di atas kode ]]></b:skin>
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img { margin:0 0; padding:0 0; list-style:none; border:none; background:none; outline:none;}Sumber kode
.PopularPosts ul { margin:.5em 0; list-style:none; font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif; color:black; counter-reset:num;}
.PopularPosts ul li img { display:block; margin:0 .5em 0 0; width:50px; height:50px; float:left;}
.PopularPosts ul li { background-color:#eee; margin:0 10% .4em 0; padding:.5em 1.5em .5em .5em; counter-increment:num; position:relative;}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a { font-weight:bold; font-size:120%; color:inherit; text-decoration:none;}
.PopularPosts ul li:before { content:counter(num); display:block; position:absolute; background-color:black; color:white; width:30px; height:30px; line-height:30px; text-align:center; top:50%; right:-10px; margin-top:-15px; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px;}
/* Set color & level */.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}
- Style popular post widget
Cara memasang :
1. Klik menu template dan edit HTML
2. Cari kode </b:skin> ,Gunakan CTRL+F
3. Copy dan paste kode berikut di atas kode </b:skin>
.popular-posts ul {padding-left: 0px;counter-reset: popcount;}.popular-posts ul li:before {list-style-type: none;margin-right: 15px;padding: 0.3em 0.6em;counter-increment: popcount;content: counter(popcount);font-size: 16px;background: #292D30;color: #ffffff;position: relative;font-weight: bold;font-family: georgia;float: left;border: 2px solid #dddddd;box-shadow: 1px 2px 9px #666666; }.popular-posts ul li {border-bottom: 1px dashed #dddddd;}.popular-posts ul li:hover {border-bottom: 1px dashed #696969;}.popular-posts ul li a {text-decoration:none; color:#5A5F63;}
.popular-posts ul li a:hover {text-decoration:none;}
.popular-posts ul li a:hover {text-decoration:none;}
- Popular post widget V.2 green lentern
Cara memasang :1. Masuk ke Tata letak
2. Tambahkan gadget
3. pilih HTML/Java script
4. Copy dan paste kode berikut di HTML/Javascript
<!-- Popular posts by www.ko2.blogspot.com --><script type="text/javascript">function getYpipePP(feed) {document.write('<ol style="">');var i;for (i = 0; i < feed.count ; i++){var href = "'" + feed.value.items[i].link + "'";var pTitle = feed.value.items[i].title;var pComment = " (" + feed.value.items[i].commentcount + ")";var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;document.write(pList);document.write(pComment); //to remove comment count delete this linedocument.write('</a></li>');}document.write('</ol>');}</script><script src="http://pipes.yahoo.com/pipes/pipe.run?YourBlogUrl=http://ko2.blogspot.com&ShowHowMany=10&_id=390e906036f48772b2ed4b5d837af4cd&_callback=getYpipePP&_render=json"type="text/javascript"></script><!-- Popular posts by www.ko2.blogspot.com -->
Keterangan :
- Kode yang berwarna biru adalah jumlah artikel yang akan kita tayangkan.
- Kode yang berwarna merah silakan ganti dengan url blog anda.
- Widget popular post pelangi
Cara memasang :
1. Klik menu template dan edit HTML
2. Cari kode ]]></b:skin> ,Gunakan CTRL+F
3. Copy dan paste kode berikut di atas kode ]]></b:skin> atau di atas </style>
/*Custom Popular Post*/.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}.PopularPosts ul li a{color:#fff!important}.PopularPosts ul li a:hover{color:#2c3e50!important}.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}/* Pengaturan Warna */.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}.PopularPosts ul li:nth-child(2){background-color:#f39c12;}.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}.PopularPosts ul li:nth-child(4){background-color:#27ae60;}.PopularPosts ul li:nth-child(5){background-color:#e67e22;}.PopularPosts ul li:nth-child(6){background-color:#d35400;}.PopularPosts ul li:nth-child(7){background-color:#3498db;}.PopularPosts ul li:nth-child(8){background-color:#2980b9;}.PopularPosts ul li:nth-child(9){background-color:#ea6153;}.PopularPosts ul li:nth-child(10){background-color:#c0392b;}.PopularPosts .item-thumbnail{margin:0 0 0 0}.PopularPosts .item-snippet{font-size:11px}
sumber kode
Demikian Kumpulan widget popular post keren Terima kasih dan selamat mencoba.
Nyimak aja .
ReplyDeleteblog anda rapi
Terimakasih bang :)
Delete