Loading...

3 Jenis Widget Popular Post Menggunakan CSS3 untuk Blogger

ajatshare 03:06 8 Comments

Widget Popular Post merupakam bagian dari situs/blog. Yang menampilkan daftar update reguler suatu artikel yang paling banyak dibaca di situs Anda yang diperuntukan bagi pengunjung Anda. Karena widget ini berfungsi sebagai alat navigasi bagi pengunjung terhadap halaman web/blog anda. Blogspot juga menyediakan widget popular post bagi pengunjung, tetapi secara default itu sangat membosankan, maka saya coba membuat 3 koleksi widget popular Post terbaik menurut saya dengan menggunakan properti CSS3.

- Buka Blog masuk Dashboard → Template → Html Editor
- Cari (menekan Ctrl + F) "]]></b:skin>"
- Copy paste kode CSS dibawah ini tepat di atasnya.

3 Jenis Widget Popular Post Menggunakan CSS3 untuk Blogger

.popular-posts img{display:none}
.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;
 }


3 Jenis Widget Popular Post Menggunakan CSS3 untuk Blogger

.popular-posts{margin-left:-20px}
.popular-posts li{background:#fff}
.popular-posts ul {
 padding-left: 0px;
 counter-reset: popcount;
 }
.popular-posts img{display:none!important}
.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: #ff2e00;
 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;
 }


3 Jenis Widget Popular Post Menggunakan CSS3 untuk Blogger

.PopularPosts h2{
 padding-right:.4em;
 padding-left:1em
 } 
.popular-posts ul {  padding-left: 0; 
 counter-reset: trackit;/*setting counter-reset*/
 }
.popular-posts ul li {  
 border-bottom: 1px solid #f0f0f0;  
 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;/*setting counter-increment*/
 }
.PopularPosts ul li:before{
 content: counters(trackit, ".");
 padding: 0 .1em 0 0;
 font-size: 20px;
 font-weight: bold;
 color: #C4C4C4;
 float:left;
 margin-right:10px;
 }
.PopularPosts li:first-child{
 border-top:1px solid #f0f0f0
 }
.PopularPosts li:nth-child(odd)
 {background:#f5f5f5}
.PopularPosts .item-thumbnail, .PopularPosts .item-snippet {  
 display: none!important}
.PopularPosts a, .PopularPosts a:hover{
 color:#959595;
 font-size:.9rem
 }
#PopularPosts1 li{
 padding-right: 1em !important;
 padding-left: 1em !important;
 }
.widget.PopularPosts{padding:1.2em 0em !important}

Masukan email Anda untuk Dapatkan Update terbaru dari AjatShare BloggerPrint PDF
3 Jenis Widget Popular Post Menggunakan CSS3 untuk Blogger
3 Jenis Widget Popular Post Menggunakan CSS3 untuk Blogger - written by ajatshare, published at 03:06, categorized as Widget . And have 8 comments
Facebook Twitter Google+ Linkedin Technorati Digg DMCA.com

8 comments

Tambah komentar

Keren Mas Ajat tutorial widget popular post nya
Saya coba yah Mas, keren sekali ijin pasang di blog
Saya terima kasih atas artikel nya. salam sukses selalu :)

Keren sekali mas :D


salam,
http://firman-ardy.blogspot.com/

Ijin nyoba Kang script widget popularnya, bahan belajar buat kami. Terimakasih

Lebih tertarik sama widget popular post yang kedua, thanks udah share kang ajat :D langsung dipake nih

kelihatannya bagus tapi masih kurang faham untuk ubek2 template mas, maklum masih baru.

Izin praktek di http://naufalqih.blogspot.com

This comment has been removed by a blog administrator.
This comment has been removed by a blog administrator.
  • Berkomentarlah dengan baik, sopan dan sesuai dengan isi konten serta tidak [SPAM].
  • Untuk menyisipkan kode dalam komentar harap di [Konversi] terlebih dahulu.
  • Jika ingin bertanya di luar judul artikel "3 Jenis Widget Popular Post Menggunakan CSS3 untuk Blogger". Harap menggunakan tombol [OOT].

Forum DiskusiOut Off Topic (OOT)Formulir KontakArsip Blog
-->