Hongkiat CSS Popular Post Widget For Bloggers

Berikut ini seocips akan membagikan lagi widget popular post untuk Blogger. Jadi untuk anda yang mungkin sudah bosan dengan tampilan popular post yang ada di template blog anda maka berikut ini kami akan membagikan tutorialnya kepada anda.

Popular post berikut ini memiliki tampilan popular post menarik. Memang berbeda dengan popular post 3D yang telah dibagikan sebelumnya dan Juga popular post dengan thumbnail berbentuk lingkaran yang telah dibagikan sebelumnya.

Letakan CSS di bawah ini kedalam Css di template blog sobat, atau cari kode  ]]></b:skin> atau kode </style> dan letakan kode dibawah ini diatas ]]></b:skin> atau kode </style>.
.PopularPosts { width:100%; margin:0 auto; padding:0 !important; border-radius:2%; -moz-border-radius:2%; -webkit-border-radius:2%; counter-reset:trackit; box-shadow:0 4px 0 -2px rgba(0,0,0,0.1),0px 3px 0 0 rgba(0,0,0,0.07),0px 2px 0 0 rgba(0,0,0,0.03); -moz-box-shadow:0 4px 0 -2px rgba(0,0,0,0.1),0px 3px 0 0 rgba(0,0,0,0.07),0px 2px 0 0 rgba(0,0,0,0.03); -webki-box-shadow:0 4px 0 -2px rgba(0,0,0,0.1),0px 3px 0 0 rgba(0,0,0,0.07),0px 2px 0 0 rgba(0,0,0,0.03); border:1px solid #EEE; }
.PopularPosts h2 { line-height:1.5em !important; display:block !important; font-family:"Calibri","Droid Sans",Tahoma,Geneva,sans-serif; font-weight:500 !important; text-transform:uppercase !important; padding:5px 10px !important; margin:0 !important; color:#D1D9E5; background-color:#5A77A0 !important; text-shadow:1px 1px #486286; border-bottom:1px solid #4D678C; box-shadow:0 5px 12px -7px rgba(0,0,0,0.5); -moz-box-shadow:0 5px 12px -7px rgba(0,0,0,0.5); -webkit-box-shadow:0 5px 12px -7px rgba(0,0,0,0.5); font-size:16px !important; border-top-right-radius:3px; border-bottom-right-radius:0; border-bottom-left-radius:0; border-top-left-radius:3px; -moz-border-radius-topright:3px; -moz-border-radius-bottomright:0; -moz-border-radius-bottomleft:0; -moz-border-radius-topleft:3px; -webkit-border-top-right-radius:3px !important; -webkit-border-bottom-right-radius:0; -webkit-border-bottom-left-radius:0; -webkit-border-top-left-radius:3px; bottom:0; top:0; }
.widget-content.popular-posts { border-top:1px solid #CCC; padding:0; margin:0 0 0; }
.popular-posts ul { padding:0 !important; margin:0 !important; }
.popular-posts ul li { border-bottom:1px solid #f1f1f1; list-style:none outside none !important; margin-left:0 !important; overflow:hidden; padding:10px 0 !important; transition:all 0.25s linear 0s; counter-increment:trackit; }
#PopularPosts1 li:nth-child(odd) { background:#F9F9F9; }
#PopularPosts1 li:nth-child(even) { background:#FFF; }
#PopularPosts1 li:first-child { border-top:1px solid #f1f1f1; }
#PopularPosts1 li { padding-right:1em !important; padding-left:1em !important; }
#PopularPosts1 ul li:before { content:counters(trackit,"."); padding:0 .1em 0 0; font-size:20px; font-weight:bold; color:#D8D8D8; float:left; }
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet { display:none; }
#PopularPosts1 a:hover { text-decoration:underline; }
#PopularPosts1 a { color:#3F3F3F; font-size:.9rem; }
.PopularPosts .item-title { padding:0 0 .2em 1.5em; }
Nah bagaimana tampilan popular post di template blog anda? apakah sudah sesuai dengan keinginian anda? ok sob jangan lupa lihat artikel terbaru seocips yang lainnya dan semoga bermanfaat.
0 Komentar untuk "Hongkiat CSS Popular Post Widget For Blogger"