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


Catat Ulasan

15 Comments:

Jasmi berkata...
Teknik Buat Blog

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

Waskim Kim berkata...
Teknik Buat Blog

terima kasih atas tips bloggernya bro

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

Thanks...

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

nice tutorial :)

Mohd Ridzwan Abdullah berkata...
Teknik Buat Blog

Untuk wordpress boleh guna tak?

Fokus Impian berkata...
Teknik Buat Blog

@Mohd Ridzwan Abdullahuntuk blogger saja

yana berkata...
Teknik Buat Blog

saya tak jumpa la setting tue kat mana

Fokus Impian berkata...
Teknik Buat Blog

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

mhd sham berkata...
Teknik Buat Blog

Amat berguna tip ini untuk blog permula. Thanks saudara.

MNH berkata...
Teknik Buat Blog

kenapa saya punya tak berwarna warni?

Azlan Islam berkata...
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 berkata...
Teknik Buat Blog

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

Admin Paku Tembaga berkata...
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 berkata...
Teknik Buat Blog

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

Mohd Shahril berkata...
Teknik Buat Blog

wow!!!awak bijak....