BAGAIMANA MEMBUAT TAMPILAN WIDGET "POPULAR POST" MENJADI LEBIH MENARIK

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 

               warna yang anda inginkan tekan disini