Cara pasang widget popular post berwarna warni

Popular post adalah salah satu widget yang disediakan oleh blogger bagi memaparkan posting yang popular pada sesuatu bulan,minggu atau sepanjang masa.Anda boleh memilih bagaimana ia akan dipaparkan.Tutorial ini adalah cara untuk mengubahsuai paparannya dalam bentuk yang berwarna warni.


Langkah bagi membuatnya:

1.Masuk ke blogger dan masukkan widget popular post pada blog anda
   Pada dashboard pilih Layout>>Add A gadget



2.Pilih popular post dari senarai tersebut dan namakan widget tersebut dengan perkataan yang diingini.


3.Seterusnya pada template pilih Edit HTML

4.Cari kod ]]></b:skin> gunakan CTRL+F(rujuk sini)
Kemudian letakkan kod ini diatasnya

#PopularPosts1 ul{margin:0;padding:4px 0;list-style-type:none}
#PopularPosts1 ulli{position:relative;margin:4px 0;border:0;padding:10px}
#PopularPosts1 ulli:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ulli:first-child:after{content:"1"}
#PopularPosts1 ulli:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ulli:first-child + li:after{content:"2"}
#PopularPosts1 ulli:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ulli:first-child + li + li:after{content:"3"}
#PopularPosts1 ulli:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ulli:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ulli:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ulli:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ulli:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ulli:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ulli:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ulli:first-child:after,
#PopularPosts1 ulli:first-child + li:after,
#PopularPosts1 ulli:first-child + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}



5.Klik pada preview template untuk melihat paparannya.
6.Klik pada save template


Post a Comment

15 Comments:

Jasmi said...
Teknik Buat Blog

Bagaimana cara buat image thumbnail pada post mobile view.. terima kasih..

Waskim Kim said...
Teknik Buat Blog

terima kasih atas tips bloggernya bro

Tuan Asmila Tuan Mohd Nor said...
Teknik Buat Blog

Thanks...

sha (chirp chirp) said...
Teknik Buat Blog

nice tutorial :)

Mohd Ridzwan Abdullah said...
Teknik Buat Blog

Untuk wordpress boleh guna tak?

Fokus Impian said...
Teknik Buat Blog

@Mohd Ridzwan Abdullahuntuk blogger saja

yana said...
Teknik Buat Blog

saya tak jumpa la setting tue kat mana

Fokus Impian said...
Teknik Buat Blog

@yana
mungkin yana masih guna dashboard yg lama...design..add page element...add a gadget

mhd sham said...
Teknik Buat Blog

Amat berguna tip ini untuk blog permula. Thanks saudara.

MNH said...
Teknik Buat Blog

kenapa saya punya tak berwarna warni?

Azlan Islam said...
Teknik Buat Blog

Saya nak tanya ni .. saya dah cuba cari kod ]]> , tapi tak jumpa .. pada mulanya saya guna popular post yang warna merah hitam .. saya tak tahu ada yang warna warni .. sekarang saya tahu .. saya cuba sekali lagi .. tapi dah tak jumpa kod ]]> .. dah cari dengan CTRL+F dah .. tetap tak jumpa .. tolong .

Fokus Impian said...
Teknik Buat Blog

@Azlan Islamcuba tekan anak panah disebelah kiri kod...anak pamnah menunjukkan ada kod selepas itu

Admin Paku Tembaga said...
Teknik Buat Blog

sy dah guna kod ctrl f tuk cari kod ini ]]> tapi tak jumpa..sy taip ]]> pun takde tuan..mcm mane yea..tlg sy

Fokus Impian said...
Teknik Buat Blog

@Admin Paku Tembaga
ada kod tu pastikan kursor berada dalam ruangan search dan tekan enter

Mohd Shahril said...
Teknik Buat Blog

wow!!!awak bijak....