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




Artikel ini hanyalah simpanan cache dari url asal penulis yang berkebarangkalian sudah terlalu lama atau sudah dibuang :

http://teknikbuatblog.blogspot.com/2013/09/cara-pasang-widget-popular-post.html

Kempen Promosi dan Iklan
Kami memerlukan jasa baik anda untuk menyokong kempen pengiklanan dalam website kami. Serba sedikit anda telah membantu kami untuk mengekalkan servis percuma aggregating ini kepada semua.

Anda juga boleh memberikan sumbangan anda kepada kami dengan menghubungi kami di sini
Cara Pasang Widget Related Post Nrelate

Cara Pasang Widget Related Post Nrelate

papar berkaitan - pada 12/11/2021 - jumlah : 136 hits
Sebelum ini Admin ada membuat posting tentang cara memasang artikel terkait Nrelate adalah satu widget yang serupa dengan tetapi lebih menarik kerana anda mempunyai pilihan bagi mengubah setting pada widget ini Terdapat enam styles widget y...
Cara Buat Widget Popular Posts Dengan Animasi Gambar Berputar

Cara Buat Widget Popular Posts Dengan Animasi Gambar Berputar

papar berkaitan - pada 12/11/2021 - jumlah : 147 hits
Widget popular posts dengan animasi gambar berputar ini sangat cantik dan menarik sekali terlebih lagi jika dipasang di blog anda yang pasti pengunjung blog akan teruja dan tertarik ingin membuatnya juga Tentunya penampilan blog yang cantik...
Widget Popular Post Hitam Dan Merah

Widget Popular Post Hitam Dan Merah

papar berkaitan - pada 12/11/2021 - jumlah : 148 hits
Sebelum ini admin pernah membuat artikel mengenai Kali agak berbeza sedikit kerana ia berwarna hitam dan merah serta akan bergerak bila dilalukan mouse diatas nya cara memasangnya pada blog 1 Masuk ke blogger dan masukkan widget popular pos...
Cara Mudah Pasang Bismillahirrahmanirrahim Pada Semua Posting

Cara Mudah Pasang Bismillahirrahmanirrahim Pada Semua Posting

papar berkaitan - pada 17/11/2021 - jumlah : 198 hits
Masih di Variasi Blogger share Cara Mudah Pasang Bismillahirrahmanirrahim pada semua posting cekidot Silahkan Log in terlebih dahulu di blogs sobat kemudian klik Template klik Edit HTML lalu sobat Copy Paste kode script di bawah ini dan sim...
Cara Mudah Pasang Jam Dan Tanggal Di Blog

Cara Mudah Pasang Jam Dan Tanggal Di Blog

papar berkaitan - pada 17/11/2021 - jumlah : 219 hits
Masih di Variasi Blogger share Cara Mudah Pasang Jam dan Tanggal di blog cekidot Silahkan sobat Copy Paste kode script di bawah ini dan simpan di blog sobat diantaranya Untuk kode script widget Hari Tanggal Bulan dan Tahun script var mydate...
Cara Pasang Pop Up Facebook Like Box Dengan Timer

Cara Pasang Pop Up Facebook Like Box Dengan Timer

papar berkaitan - pada 12/11/2021 - jumlah : 179 hits
Facebook like box ini akan muncul sebaik sahaja pengunjung blog anda ini mempunyai kaunter masa sebelum ia hilang secara automatik dan boleh juga ditutup dengan butang close yang adaCara memasangnya 1 Masuk ke blogger2 Pada dashboard pilih ...
Cara Memasang Widget Di Blogs

Cara Memasang Widget Di Blogs

papar berkaitan - pada 17/11/2021 - jumlah : 182 hits
Bagaimana cara memasang atau menambahkan widget di Blogspot dari pertanyaan tersebut mungkin sebagian para pakar blogger profesional pastinya sudah pada tau namun bagaimana jika ada seorang blogger pemula yang baru belajar di blogspot Mungk...
Cara Pasang Meta Tag Yang Power Punya

Cara Pasang Meta Tag Yang Power Punya

papar berkaitan - pada 12/11/2021 - jumlah : 140 hits
Berjumpa lagi di blog Johan Rakyat dan saya yang tak pernah bosan untuk berkongsi tips dengan anda semua sebelumnya saya sudah memposting artikel tentang beberapa jenis meta tag dan dan sekarang saya akan memposting artikel tentang ini sang...
Cara Pasang Atap Spandek

Cara Pasang Atap Spandek

papar berkaitan - pada 11/11/2021 - jumlah : 383 hits
Cara Pasang Atap Spandek atau juga yang dikenal dengan atap gelombang spandek karena permukaannya yang bergelombang terbuat dari baja bertegangan tarik tinggi mempunyai daya tahan 4 x lebih tinggi dibandingkan dengan baja biasa Baja dengan ...
Oriental Kopi Klcc Port Minum Kopi Terbaru

Pasar Raya Flagship Jaya Grocer Di Sunway Pyramid Tarik Pengunjung Dengan Penampilan Serba Baharu

U Mobile The New Ali Baba Contractor For The Second 5g Network Tender

Rachel Zegler S Legs And Feet In Tights 6

Panas Artis Wanita Malaysia Ditahan Polis Thailand Turut Ditemukan 6 000 Biji Pil Kuda

The Celebrity Legs And Feet In Tights 2024 Pantyhose Queen Poll Full Contender List

Projek Tebatan Banjir S Ngor Gagal Rugi Besar

Iphones Dalam Bahaya Amaran Baru Peretasan Sasarkan Peranti Apple


echo '';
Info Dan Sinopsis Drama Berepisod Senyawa iQIYI Malaysia

Info Dan Sinopsis Drama Berepisod Project Projek Exit Astro Originals

Pelajari Asal Usul Nama Makhluk Seram Kisah Fiksyen Barat Yang Terkenal

10 Fakta Filem Kahar Kapla High Council Yang Ramai Tak Tahu Prekuel Drama Project Projek High Council

Anugerah Seri Angkasa 2024 Senarai Keputusan Pemenang Calon Top 5 Kategori Hadiah Persembahan Penyampai Trofi Dan Segala Info ASA 36


Larangan Menjalinkan Hubungan Sulit Dengan Suami Isteri Orang

12 Cawangan Ahmad S Fried Chicken Yang Semakin Mengganas Di Pasaran

Drama One Cent Thief 2

Jadual Tarikh Pembayaran Pencen Tahun 2025

Biodata Vivy Yusof Usahawan Ikon Fesyen Malaysia

Gantung Jawatankuasa Bersatu Bahagian Bentong Bendahari Bersama 40 Ahli Umum Keluar Parti