Widget Postingan populer juga merupakan bawaan Blogger yang memungkinkan kita untuk dengan mudah menambahkan widget "Popular Post" yang kita pilih dari daftar gadget dan dapat ditambahkan di blog kita dengan cara pergi ke Layout / Tata Letak blog. Tetapi untuk
memberikan tampilan postingan populer baru dengan tampilan yang lebih menarik kita perlu membuat beberapa perubahan dalam kode css nya. Disini ada 5 contoh indah populer pos yang dapat digunakan sehingga dapat mempercantik penampilan populer pos kita dan dapat memberikan kesan yang baik pada pengunjung dan dapat meningkatkan jumlah halaman yang dilihat.
Baiklah langsung menuju ke pokok tujuan, caranya adalah sbb :
1. Login ke blogger
2. Klik Tata Letak / Layout
3 .Klik "Tambahkan Gadget"
4. Cari dan klik "Popular Post"
5. Setelah selesai klik Save
MEMILIH BEBERAPA GAYA WIDGET POPULAR POST
• Pilihlah gaya yang anda sukai dan copy paste kode CSS nya
• Klik Template >> Edit HTML dan cari
]]> </ b: skin>
Untuk menemukannya tekan Ctrl + F dan salin kode di bawah ini dan letakkan kodena sebelum
]]> </ b: skin> tag
Berikut gaya CSS yang bisa anda pilih :
TYPE 1
#PopularPosts1 h2{position:relative;padding:8px 10px 6px 10px;width:100%;margin-bottom: 5px;font-size:17px;color:#757575; text-align:left;}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;left:-8px;width:100%;}#PopularPosts1 li{ width:100%;position:relative;left:0;margin:0 0 1px 12px;padding:4px 5px;}#PopularPosts1 ul li:before{content: counter(li);counter-increment: li;position: absolute; left: -30px;top: 50%;margin-top: -13px;background: #FF9900; height: 1.9em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;color: #fff;font-size: 14px;}#PopularPosts1 ul li:after{position: absolute;content: '';left: -2px;margin-top: -.7em; top: 50%;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left:10px solid #FF9900; /* background color of the right arrow*/}#PopularPosts1 ul li a{color: #FF8000;text-decoration: none; font-size:15px;}#PopularPosts1 ul li {position: relative;display: block;padding: .4em .4em .4em .8em;*padding: .4em;margin: .5em 0 .5em 0.4em;background: #BFE3FE;transition: all .3s ease-out;text-decoration:none;transition: all .1s ease-in-out;}#PopularPosts1 ul li:hover{background: #eee; /* Background color on mouseover */} #PopularPosts1 ul li a:hover{color:#444; /* Link color on mouseover */margin-left:3px;}
TYPE 2
/*--- Arkeyes88 Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3lf8ohljYdUJL1i9F4gtuBmgzQNy7I876O4-7EoZqjrSg0eotk05w-NG2p60JVFbw1z7Wv5k32rZRmkQJUVhhX4ERGKTCkxHc1ddeMQwpHe0q1XZcXOj77cZ_Cl9j_ItKbUaQQsouM1nO/s1600/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #000000;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #80C8FE;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
TYPE 3
# popular-posts and {padding-left: 0px; -moz-box-shadow: 1px 1px 2px #dcdcdc; Web-kit-box-shadow: 1px 1px 2px #dcdcdc; -goog-ms-box-shadow: 1px 1px 2px #dcdcdc; box-shadow: 1px 1px 2px #dcdcdc; border: 1px solid #dcdcdc; } .popular-Posts and the list-style-type {: None; margin: 0 0 5px 0px; padding: 5px 5px 5px 20px! important; border-bottom: 1px dashed #dcdcdc; background: #ffffff; } .popular-Posts and that a {text-decoration: None; font: 16px Georgia, Verdana; color: # 3d87c4; } .popular-Posts and the a: hover {text-decoration: None; color: # 333333; }
TYPE 4
#PopularPosts2 h2{padding:8px 10px 3px 0;width:100%;margin:0;font-size:16px;position:relative;left:-20px;display:block;border-bottom:2px solid #ccc;}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;width:100%;}#PopularPosts1 li{ /* Styles of each element */width:100%;position:relative;left:0;margin:0 0 6px 10px;padding:4px 5px;}#PopularPosts1 ul li:before{ /* Style of the numbers */content:counter(li);counter-increment:li;position:absolute;top:3px;left:-39px;font-size:21px;width:28px;height:28px;border-radius: 50%;color:#777; /* Text color */border: 2px solid #ddd; /* Rounded border color */padding:0;text-indent:9px;}#PopularPosts1 ul li a{display:block;position:relative;left:-45px;width:100%;margin:0;min-height:28px;padding: 5px 3px 3px 39px;color:#333; /* color of the links */text-decoration:none;font-size:14px; /* Font size of the links */font-style: italic;
}#PopularPosts1 ul li a:hover{color:#3366ff;margin-left:3px;}
TYPE 5
#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px;
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* Background color */
color:#f2f2f2; /* Color of the widget's title */
text-align:left;
text-indent:18px;}
.popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF no-repeat scroll 5px 10px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 1px solid #dcdcdc; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } .popular-posts ul li:hover { background:#FF8040; } .popular-posts ul li a { text-decoration:none; font:14px Georgia, verdana; color:#222222; } .popular-posts ul li a:hover { text-decoration:none; color:#fff; }
• Setelah selesai klik Save..
Catatan : kode warna dapat diganti sesuai dengan keinginan anda, Untuk mengetahui kode
.gif)
