Cara Membuat Popular Post Warna Warni Di Blog Terbaru

Popular post yaitu daftar / urutan artikel yang paling banyak dilihat yang fungsinya sama mirip gadget random post, related post dan recent post yaitu untuk navigasi atau mempermudah para hadirin mejelajahi seluruh konten artikel yang ada di blogspot, wordpress, mwb maupun website dengan gampang. Dan pasti teman blogger pernah blogwalking atau berkunjung ke blog blog lain dan menyaksikan sebuah widget most popular post ada yang bergerak, berlangsung, memiliki scroll maupun yang warna warni dengan nomor dan bentuk yang keren terpasang biasanya pada sidebar template blog yang membuat tampilan blog menjadi sangat mempesona untuk dilihat. Sebenarnya itu adalah widget popular post bawaan blog yang di pasang tetapi telah di penyesuaian / costumize dengan menambahkan beberapa kode css pada php / html blog yang mampu teman kerjakan bila ingin memperbesar atau menampilkan popular posts yang berwarna warni dengan Title Only (cuma judul postingan) atau with thumbnails (dengan gambar) agar mempercantik penampilan blog.

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru

Kali ini saya akan share gimana Cara Membuat Popular Post Warna Warni Di Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sahabat yang ingin memasang / menyertakan widget most popular posts keren pada sidebar template blogger.

Cara Membuat Popular Post Warna Warni Di Blog :

1. Bikin popular post warna warni seperti diatas yakni dengan cara pertama masuk tata letak lalu klik Tambahkan Gadget pada bagian sidebar

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru

2. Kemudian klik tombol tambah pada Entri Populer / Popular Post

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru

3. Setelah itu konfigurasi widget tersebut sesuai impian sahabat, centang thumbnail gambar bila sobat ingin membuat populer post dengan gambar (with thumbnail) atau kosongkan bila ingin cuma judul (title only), bila telah mampu klik tombol Simpan maka widget popular post umumbawaan blogger telah terpasang

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru

4. Selanjutnya kita akan mengubah nya menjadi lebih berwarna dan keren yaitu dengan cara masuk ke menu Template dan klik Edit HTML

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru

5. Kemudian cari kode ]]> atau , gunakan Ctrl+F untuk mempermudah pencarian

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru

6. Setelah itu silahkan teman pilih dibawah ini ada beberapa pilihan tipe widget popular post yang aneka macam macam bentuk dan warna yang keren dan cantik lalu copy script arahan nya :


 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 1
/*----- TAB POPULER -----*/
#PopularPosts1 ul li a:hovercolor:#fff;text-decoration:none
#PopularPosts1 ul li a -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;
#PopularPosts1 ul li .item-thumbnailfloat:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:63px
#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:afterposition: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:aftercontent:"8"
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +libackground:#B041FF;width:90%
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:aftercontent:"9"
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +libackground:#F52887;width:90%
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:aftercontent:"10"
#PopularPosts1 ul li:first-child + li + li + li + li +libackground:#7ee3c7;width:90%
#PopularPosts1 ul li:first-child + li + li + li + li + li:aftercontent:"6"
#PopularPosts1 ul li:first-child + li + li + li + li + li +libackground:#f6993d;width:90%
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:aftercontent:"7"
#PopularPosts1 ul li:first-child + li + li + li + libackground:#33c9f7;width:90%
#PopularPosts1 ul li:first-child + li + li + li + li:aftercontent:"5"
#PopularPosts1 ul li:first-child + li + li + libackground:#c7f25f;width:90%
#PopularPosts1 ul li:first-child + li + li + li:aftercontent:"4"
#PopularPosts1 ul li:first-child + li + libackground:#ffde4c;width:90%
#PopularPosts1 ul li:first-child + li + li:aftercontent:"3"
#PopularPosts1 ul li:first-child + libackground:#ff764c; width:90%
#PopularPosts1 ul li:first-child + li:aftercontent:"2"
#PopularPosts1 ul li:first-childbackground:#ff4c54 ;width:90%
#PopularPosts1 ul li:first-child:aftercontent:"1"
#PopularPosts1 ulmargin:0;padding:0px 0;list-style-type:none
#PopularPosts1 ul liposition: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


 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 2
/*Custom Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a imgmargin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none
.PopularPosts ulmargin:.5em 0;list-style:none;color:black;counter-reset:num
.PopularPosts ul libackground-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative
.PopularPosts ul li acolor:#fff!important
.PopularPosts ul li a:hovercolor:#2c3e50!important
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li afont-weight:bold;color:inherit;text-decoration:none
.PopularPosts ul li:beforecontent:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1)background-color:#f1c40f;
.PopularPosts ul li:nth-child(2)background-color:#f39c12;
.PopularPosts ul li:nth-child(3)background-color:#2ecc71;
.PopularPosts ul li:nth-child(4)background-color:#27ae60;
.PopularPosts ul li:nth-child(5)background-color:#e67e22;
.PopularPosts ul li:nth-child(6)background-color:#d35400;
.PopularPosts ul li:nth-child(7)background-color:#3498db;
.PopularPosts ul li:nth-child(8)background-color:#2980b9;
.PopularPosts ul li:nth-child(9)background-color:#ea6153;
.PopularPosts ul li:nth-child(10)background-color:#c0392b;
.PopularPosts .item-thumbnailmargin:0 7 0 0
.PopularPosts .item-snippetfont-size:11px


 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 3
/* Popular Post */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;

.PopularPosts ul
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;

.PopularPosts ul li img
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;

.PopularPosts ul li
background-color:#eee;
margin:0 10% .4em 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a
font-weight:normal;
color:#000 !important;
text-decoration:none;

.PopularPosts ul li:before
content:counter(num) !important;
display:block;
position:absolute;
background-color:#333;
color:#fff !important;
width:22px;
height:22px;
line-height:22px;
text-align:center;
top:0px;
right:0px;
padding-right:0px !important;

/* Set color and level */
.PopularPosts ul li:nth-child(1) background-color:#A51A5D;margin-right:1% !important
.PopularPosts ul li:nth-child(2) background-color:#F53477;margin-right:2% !important
.PopularPosts ul li:nth-child(3) background-color:#FD7FAA;margin-right:3% !important
.PopularPosts ul li:nth-child(4) background-color:#FF9201;margin-right:4% !important
.PopularPosts ul li:nth-child(5) background-color:#FDCB01;margin-right:5% !important
.PopularPosts ul li:nth-child(6) background-color:#DEDB00;margin-right:6% !important
.PopularPosts ul li:nth-child(7) background-color:#89C237;margin-right:7% !important
.PopularPosts ul li:nth-child(8) background-color:#44CCF2;margin-right:8% !important
.PopularPosts ul li:nth-child(9) background-color:#01ACE2;margin-right:9% !important
.PopularPosts ul li:nth-child(10) background-color:#94368E;margin-right:10% !important
.PopularPosts .item-thumbnail
margin:0 0 0 0;

.PopularPosts .item-snippet
font-size:11px;

.widget-content ul limargin:0;padding:6px 0px;border-bottom:1px solid #ededed

.widget-content ul li:last-childborder-bottom:medium none !important

.widget-content ul li acolor:#333

.widget-content ul li a:hovercolor:#C80441

.item-date font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00


 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 4
.PopularPosts ul,.PopularPosts li,.PopularPosts li amargin:0;padding:0;list-style:none;border:none;background:none;outline:none.PopularPosts ulmargin:0;list-style:none;color:black;counter-reset:num.PopularPosts ul libackground-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative.item-thumbnail imgfloat:left;margin:0 10px 0 0.PopularPosts acolor:#fff!important.PopularPosts a:hovercolor:#222!important.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li afont-weight:bold;color:inherit;text-decoration:none.PopularPosts ul li:beforecontent:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important.PopularPosts ul li:nth-child(1)background-color:#A51A5D.PopularPosts ul li:nth-child(2)background-color:#F53477.PopularPosts ul li:nth-child(3)background-color:#FD7FAA.PopularPosts ul li:nth-child(4)background-color:#FF9201.PopularPosts ul li:nth-child(5)background-color:#FDCB01.PopularPosts ul li:nth-child(6)background-color:#DEDB00.PopularPosts ul li:nth-child(7)background-color:#89C237.PopularPosts ul li:nth-child(8)background-color:#44CCF2.PopularPosts ul li:nth-child(9)background-color:#01ACE2.PopularPosts ul li:nth-child(10)background-color:#94368E.cloud-label-widget-contenttext-align:left.label-sizedisplay:block;background:#fff;float:left;margin:0 2px 2px 0;color:#000!important;border:1px solid #ccc;padding:5px.label-size:hoverborder:1px solid #000;color:#000!important.label-size a:hovercolor:#000!important


 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 5
/* Pengaturan Warna */ .PopularPosts ul li:nth-child(1) background-color:#E11E28;margin-right:1% .PopularPosts ul li:nth-child(2) background-color:#FD3C03;margin-right:2% .PopularPosts ul li:nth-child(3) background-color:#FECB09;margin-right:3% .PopularPosts ul li:nth-child(4) background-color:#6EBE27;margin-right:4% .PopularPosts ul li:nth-child(5) background-color:#149A48;margin-right:5% .PopularPosts ul li:nth-child(6) background-color:#5BBFF1;margin-right:6% .PopularPosts ul li:nth-child(7) background-color:#61469C;margin-right:7% .PopularPosts ul li:nth-child(8) background-color:#863E86;margin-right:8% .PopularPosts ul li:nth-child(9) background-color:#863E62;margin-right:9% .PopularPosts ul li:nth-child(10) background-color:#815540;margin-right:10% /*Custom Popular Post*/ .PopularPosts ul, .PopularPosts li, .PopularPosts li img, .PopularPosts li a, .PopularPosts li a img   margin:0 0;   padding:0 0;   list-style:none;   border:none;   background:none;   outline:none; .PopularPosts ul   margin:.5em 0;   list-style:none;   font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;   color:black;   counter-reset:num; .PopularPosts ul li img   display:block;   margin:0 10px 0 10px;   width:50px;   height:50px;   float:left; .PopularPosts ul li   background-color:#eee;   margin:0 10% .4em 0;   padding:.5em 1.5em .5em .5em;   counter-increment:num;   position:relative; .PopularPosts ul li:before, .PopularPosts ul li .item-title a   font-weight:bold;   font-size:120%;   color:inherit;   text-decoration:none; .PopularPosts ul li:before   content:counter(num);   display:block;   position:absolute;   background-color:black;   color:white;   width:30px;   height:30px;   line-height:30px;   text-align:center;   top:50%;   right:-10px;   margin-top:-15px;   -webkit-border-radius:30px;   -moz-border-radius:30px;   border-radius:30px;


Jika sudah menentukan tipe dari widget tersebut dan copy scriptnya berikutnya masukkan script tersebut tepat diatas aba-aba ]]> atau seperti pada gambar dibawah ini dan klik Simpan template.. Selesai dan lihat alhasil

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru

7. Berikut ialah performa tampilan blog yang sukses atau work 100% dalam menciptakan popular post warna warni dengan berbagai tipe :

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 1 ( TITLE ONLY)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 1 (WITH THUMBNAIL)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 2 (TITLE ONLY)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 2 (WITH THUMBNAIL)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 3 (TITLE ONLY)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 3 (WITH THUMBNAIL)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 4 (TITLE ONLY)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 4 (WITH THUMBNAIL)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 5 (TITLE ONLY)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 5 (WITH THUMBNAIL)

Nah itulah bagaimana cara menciptakan popular post warna warni di blog dengan gampang dan cepat.

Silahkan dicoba
Sumber http://carazain.blogspot.com/

Posting Komentar

Lebih baru Lebih lama