Home Blog Cara Membuat popular pos warna warni dengan mudah

Cara Membuat popular pos warna warni dengan mudah

by Erzed
Membuat popular post bergerak kebawah
Membuat popular post bergerak kebawah

Cara Membuat popular pos warna warni dengan mudah. Sering kita melihat sedikit blog atau website yang terdapat widget popular post nya yang berwarna warni, kadang kita punya keinginan untuk menciptakan nya, atau hanya untuk coba-coba memasang kan nya di blog kita, kalau cocok kita pasang selama nya kalau tak cocok ya dibuang lagi.

Cara Membuat popular pos warna warni dengan mudah 1

Tidak ada salah nya kita mencoba atau sekedar belajar bereksperimen saja, sebab admin yakin sebagai blogger pemula seperti admin senang mempelajari hal yang unik-unik dalam mendesain tampilan blog, tampilan blog yang indah tentu menciptakan kita dan pengunjung blig kita merasa betah dan berlama-lama mengunjungi blog kita.

Nah apabila anda ingin mencobanya di blog anda masing-masing, maka ikutilah langkah langkah berikut ini secara langsung

Langsung saja ke TKP apabila anda ingin mencoba nya silahkan ikuti cara nya seperti dibawah ini.

 Cara Membuat popular pos warna warni dengan mudah

 

1. langkah yang pertama seperti biasa anda masuk ke akun blog anda dahulu atau ke akun blogger anda.

2. Cari tata letak di pengaturan blog anda kemudian  Klik tata letak, kemudian  tambahkan widget popular post nya terserah ingin ditaruh sebelah mana umum nya sih di sebelah kanan.

3. Kemudian Pada pengaturan  popular post hilangkan centang thumbnail atau gambar dan seting minimal 9 atau 10 tampilan popular post., tergantung anda sendiri.

4.Setelah itu klik simpan dan kemudian kita ke tahap berikut nya untuk setting di template nya dengan cara edit template.

4. Selanjutnya  kita ke pengaturan edit template klik  edit HTML

5. Cari lah kode Sebagaimana berikut ini ]]></b:skin> setelah ketemu tempatkan kode berikut dibawah ini tepat diatas kode ]]></b:skin>   Utuk mempermudah pencarian dapat gunakan tombol  CTRL + F

Baca :  5 dasar Seo On page Yang Wajib Anda Ketahui Untuk Masuk Halaman Pertama Google

6.Klik pratinjau template template, apabila sudah cocok silahkan simpan template

Berikut ini merupakan kode nya

#PopularPosts1 ul li:first-child:after, 
#PopularPosts1 ul li:first-child + li:after, 
#PopularPosts1 ul li:first-child + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:”8″} 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:”9″} 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:”10″} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} 
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:”6″} 
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:”7″} 
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} 
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:”5″} 
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} 
#PopularPosts1 ul li:first-child + li + li + li:after{content:”4″} 
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} 
#PopularPosts1 ul li:first-child + li + li:after{content:”3″} 
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} 
#PopularPosts1 ul li:first-child + li:after{content:”2″} 
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} 
#PopularPosts1 ul li:first-child:after{content:”1″} 
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} 
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

 

Baca :  Tutorial Mendaftarkan Blog ke DMCA untuk Perlindungan Konten

Tapi keberhasilan nya tergantung jenis template yang dipergunakan ada juga template tertentu yang tak dapat memakai trik ini.

Demikianlah artikel kali ini tentang  Cara Membuat popular pos warna warni dengan mudah, semoga membantu dan bermanfaat bagi kita yang membutuhkan nya, terimakasih.
Selamat mencoba dan semoga berhasil.

 

You may also like