foto: Cara Membuat Popular Post Warna Warni Di Blog Terbaru

Popular post adalah daftar/urutan article yang paling banyak dilihat yang fungsinya sama seperti random post on gadget, post related to a new post given in a new post, going back to their navigation to facilitate before new accounts for posting blogspot, wordpress, mwud accounts. Pasti sobat blogger pernah blogwalking atau pemada ke blog blog lain and melihat sebuah The most popular widgets posts to skip, belangi, memiliki scroll yang yang warn about the number and besuk yang keren terpasangbias panganya menjad in blog side model. Sevanaria itu adalah popular post widget Bawaan Blog Yang nga Pasang Namun Telah nga Modifikasi / Costumes Dengan Menambahkan Beberapa Kode CSS Pada PHP/HTML Blog Yang Bisa Sobat Dolukan Jika Ingin Menambah Atau Menampilkan Popular Post Title Yang Berwarna me Ju) (dengan gambar) mempercantik display blog agar.

Kali ini saya akan share gimana Dear Popular Post Warna Warni By Blog Terbaru , silahkan ikuti tutorial langkah langkah berikut lengkap besert gambarnya buat sobat yang iningin masag / Menambahkan Most Popular Posts Widget Keren Pada Sidebar Blogger Template.

Popular blog article Cara Membuat Warna Warni Tue:

1. Bikin Popular post warn seperti diatas yaitu dengan kara pertama masuk tata letak lalu klik Add Gadget to sidebar

2. Specially click on Popular Entry / Popular Post

3. The Seletah widget is configured, but the configuration of the first thumbnail, a thumbnail centang gambar jika sobat ingin membuat popular post dengan gambar (with thumbnail) atau kosongkan bila ingin hanya judul (title only), from a sudah bisa bota in the blog of known

4. Next, we will change it so that we can change it to something new and then enter the Template menu and click Edit HTML

5. Code of Eternal Love ]]> atau , Use Ctrl + F for Memudahkan Penkarian

6. Setelah itu silahkan sobat pilih dibawah ini ada sebelum pilihani typee Popular Widget Post Widget yang berangang macam benuk and warna yang keren and bagus lalu copy code script nya:

TIP 1

/* ----- POPULAR CARD ----- */
# Popular Posts1 ul li a: hover {color: #fff; text-decoration: none}
# Popular Posts1 is a {-webkit-text-size-adjust: auto; -webkit-text-text-width: 0px; Color: #333333; screen lock; Font family: Georgia, "Times New Roman", Times, Serif; Font size: 13px; font-style: normal; character variant: normal; font-weight: normal; case-spacing: normal; line-height: 18px; Margins: 0px 40px 0px 0px; Minimum height: 30px; Orphans: 2; Padding: 0px; Text alignment: -webkit-auto; Text formatting: not!important; text-indent: 0px; Text conversion: no; spaces: regular; widow: 2; word-spacing: 0px;}
# Popular Posts1 ul li .item-thumbnail { item float: left; limit: 0; margin-right: 10px; Background: transparent; padding: 0; Width: 70px; Height: 63px}
# Popular Posts 1 ul li: first child: after,
# Popular Posts1 ul li: first child + li: after,
# Popular Posts1 ul li: first child + li + li: after,
# Popular Posts1 ul li: first child + li + li + li: after,
# Popular Posts1 ul li: first child + li + li + li + li: after,
# Popular Posts1 ul li: first child + li + li + li + li + li: after,
# Popular Posts1 ul li: first child + li + li + li + li + li + li: after,
# Popular Posts1 ul li: first child + li + li + li + li + li + li + li: after,
# Popular Posts1 ul li: first child + li + li + li + li + li + li + li + li: after,
# Popular Posts1 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}
# Popular Posts1 ul li: first child + li + li + li + li + li + li + li { background: #DF01D7; width: 90%}
# Popular Posts1 ul li: first child + li + li + li + li + li + li + li: after { content: "8" }
# Popular Posts1 ul li: first child + li + li + li + li + li + li + li + li { background: #B041FF; width: 90%}
# Popular Posts1 ul li: first child + li + li + li + li + li + li + li + li: after {content: "9"}
# Popular Posts1 ul li: first child + li + li + li + li + li + li + li + li + li { background: #F52887; width: 90%}
# Popular Posts1 ul li: firstborn + li + li + li + li + li + li + li + li + li: after {content: "10"}
# Popular Posts1 ul li: first child + li + li + li + li + li { background: # 7ee3c7; width: 90%}
# Popular Posts1 ul li: first child + li + li + li + li + li: after { content: "6" }
# Popular Posts1 ul li: first child + li + li + li + li + li + li { background: # f6993d; width: 90%}
# Popular Posts1 ul li: firstborn + li + li + li + li + li + li: after {content: "7"}
# Popular Posts1 ul li: firstborn + li + li + li + li { background: #33c9f7; width: 90%}
# Popular Posts1 ul li: firstborn + li + li + li + li: after { content: "5" }
# Popular Posts1 ul li: first child + li + li + li { background: # c7f25f; width: 90%}
# Popular Posts1 ul li: firstborn + li + li + li: after {content: "4"}
# Popular Posts1 ul li: first child + li + li { background: # ffde4c; width: 90%}
# Popular Posts1 ul li: firstborn + li + li: after {content: "3"}
# Popular Posts1 ul li: first child + li { background: # ff764c; width: 90%}
# Popular Posts1 ul li: firstborn + li: after {content: "2"}
# Popular Posts1 ul li: first child { background: # ff4c54; width: 90%}
# Popular Posts1 ul li: first child: after {content: "1"}
# Popular Posts1 lower { margin: 0; padding: 0px 0; list style type: none}
# Popular Posts1 ul li { position:relative; border: 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}

TIP 2

/* Popular custom message */
.PopularPosts ul, .PopularPosts li, .PopularPosts li img, .PopularPosts li a, .PopularPosts li a img { field: 0 0; padding: 0 0; list style: no; border: no; Background: no; outline: nothing}
.Popular Posts ul { field: .5em 0; list style: no; Color: Black; reset counter: number}
.Popular Posts ul li { background-color: #eee; Fields: 0 0 0 0! Important; Padding: .5em 1.5em .5em .5em! Important; counter addition: number; position: relative}
.Popular Posts ul li a {color: #fff! important}
.Popular Posts ul li a:hover {color: #2c3e50! important}
.PopularPosts ul li: para, .PopularPosts ul li .item-title a, .PopularPosts ul li a {font-weight: bold, color: inherit, text-decoration: none}
.Popular Posts ul li: para { content: counter (num)! Important; screen lock; position: absolute; background-color: #333; Color: #fff! Important; Width: 22px; Height: 22px; line-height: 22px; text-align: center; below: 0; right: 0; Right padding: 0! important}
/*Varna Pegnatiano*/
.Popular Posts ul li: nth-child(1) {background-color: #f1c40f;}
.Popular Posts ul li: nth-child(2) {background-color: #f39c12;}
.Popular Posts ul li: nth-child(3) {background-color: #2ecc71;}
.Popular Posts ul li: nth-child(4) {background-color: #27ae60;}
.Popular Posts ul li: nth-child(5) {background-color: #e67e22;}
.Popular Posts ul li: nth-child(6) {background-color: #d35400;}
.Popular Posts ul li: nth-child(7) {background-color: #3498db;}
.Popular Posts ul li: nth-child(8) {background-color: #2980b9;}
.Popular Posts ul li: nth-child(9) {background-color: #ea6153;}
.Popular Posts ul li: nth-child(10) {background-color: #c0392b;}
.Popular Posts .item-thumbnail {margin: 0 7 0 0}
.Popular Posts .item-snippet {font-size: 11px}

TIP 3

/*Known post*/
.Popular Postsul,
.PularPosts there.
Popular Posts li img,
.PularPosts are linked,
.Popular Posts li img {
Margin: 0 0;
padding: 0 0;
list style: no;
border: no;
Background: no;
outline: no;
}
.Popular Posts st {
margin: .5em 0;
list style: no;
Black color;
reset counter: number;
}
.Popular Posts ul li img {
screen lock;
Margin: 0.5m 0 0;
Width: 50px;
Height: 50px;
swim to the left;
}
.Popular Posts ul li {
background-color: #eee;
margin: 0 10% .4em 0 !important;
Padding: .5em 1.5em .5em .5em! important;
increment counter : number ;
position: relative;
}
.Popular Posts ul li: first,
.Popular Posts ul li .item-title a, .PopularPosts ul li a {
font-weight: normal;
Color: #000!Important;
Text formatting: no;
}
.Popular Posts ul li: te {
Content: counter (number)!Important;
screen lock;
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 */
.Popular Posts ul li: nth-child(1) { background-color: # A51A5D; Right Margin: 1%! important}
.Popular Posts ul li: nth-child(2) { background-color: # F53477; Right Margin: 2%! important}
.Popular Posts ul li: nth-child(3) { background-color: # FD7FAA; Right Margin: 3%! important}
.Popular Posts ul li: nth-child(4) { background-color: #FF9201; Right Margin: 4%! important}
.Popular Posts ul li: nth-child(5) { background-color: # FDCB01; Right Margin: 5%! important}
.Popular Posts ul li: nth-child(6) { background-color: # DEDB00; Right Margin: 6%! important}
.Popular Posts ul li: nth-child(7) { background-color: #89C237; Right Margin: 7%! important}
.Popular Posts ul li: nth-child(8) { background-color: #44CCF2; Right Margin: 8%! important}
.Popular Posts ul li: nth-child(9) { background-color: #01ACE2; Right Margin: 9%! important}
.Popular Posts ul li: nth-child(10) { background-color: #94368E; Right Margin: 10%! important}
.Popular Posts
Margin: 0 0 0 0;
}
.Popular Posts .article snippet {
Font size: 11px;
}
.widget-content ul li { margin: 0; Padding: 6px 0px; Margin End: 1px solid #edded
}
.widget-content ul li: last-child { border-bottom: between none! important
}
.widget-content ul li a {color: #333
}
.widget-content ul li a: hover {color: #C80441
}
.item-data { font-size: 11px; font style: italic; font-weight: bold; Color: #FFCC00
}

TIP 4

.PopularPosts ul, .PopularPosts li, .PopularPosts li a { field: 0; padding: 0; list style: no; border: no; Background: no; Outline: none } .Popular Posts ul {field: 0; list style: no; Color: Black; reset counter: number } .Popular Posts ul li { background-color: #eee; Field: 0 0 0 0! : Number; position: relative} .item-thumbnail img {float: left; margin: 0 10px 0 0} .Popular Posts a {color: #fff! ul li: before, .Popular Posts ul li .item-title a, .Popular Posts ul li a {font-weight: bold, color: inherited, text-style: none} .Popular Posts ul li: before {content: counter(num) !important ; screen lock; position: absolute; background-color: #333; Color: #fff!Important; Width: 22px; Height: 22px; line-height: 22px; text-align: center; below: 0; right: 0; padding right: 0! Popular Posts ul li:nth-child (3) {background-color: #FD7FAA} -color: #FDCB01} .Popular Posts ul li:nth-child (6) {background-color: #DEDB00} .Popular Posts ul li :nth -child (7) {background-color: #89C237} -child (8) {background-color: #44CCF2} .Popular Posts ul li:nth-child (9) {background-color: #01ACE2} } . cloud-label -widget-content {text -align: left} .label-size { display: block; Background: #fff; Swimmer: left; border: 0 2px 2px 0; Color: #000! Important; border: 1px solid #cccc; padding: 5px} .label -size: hover { border: 1px solid #000; Color: #000! important} .label-size a: hover {color: #000! important}

TIP 5

/* Setting Varna */ .Popular Posts ul li: nth-child(1) { background-color: # E11E28; margin-right: 1%} .Popular Posts ul li:nth-child(2) { backgroundcolor: #FD3C03 ; Margin right: 2 %} .Popular Posts ul li: nth-child(3) { background-color: #FECB09; Margin-right: 3 %} .Popular Posts ul li: nth-child(4) { background-color: #6EBE27; Margin-right: 4 %} .Popular Posts ul li: nth-child(5) { background-color: #149A48; Right margin: 5%} .Popular Posts ul li: nth-child(6) { background-color: #5BBFF1; margin-right: 6%} .Popular Posts lower left: nth-child(7) { background-color: #61469C; Margin-right: 7 %} .Popular Posts ul li: nth-child(8) { background-color: #863E86; Right margin: 8%} .Popular Posts lower left: nth-child(9) { background-color: #863E62; Right margin: 9%} .Popular Posts lower left: 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: no; border: no; Background: no; scheme:none;} .Popular Posts ul { margin: .5em 0; list style: no; Font: Regular Regular 13px/1.4 "Arial Narrow", Arial, sans serif; Black color; reset counter: number;} .Popular Posts ul li img { display: block; border: 0 10px 0 10px; Width: 50px; Height: 50px; float: left;} .Popular Posts ul li { background-color: #eee; margin: 0 10% .4em 0; Padding: .5em 1.5em .5em .5em; increment counter : number ; position: relative;} .Popular Posts ul li: para, .Popular Posts ul li .item-title a {weight: bold; Font size: 120%; color - inherit; text-decoration: none; } .Popular Posts ul li: para { content: counter(num); screen lock; position: absolute; background-color: black; White color; Width: 30px; Height: 30px; line-height: 30px; text-align: center; high: 50%; right: -10px; border-top: -15px; -Radius limitation of the web-kit: 30px; -moz-radius-border: 30px; border-radius: 30px ;}

Jika sudah memilik typee dari short widget, given copy of scriptnya selekatu pusatkan script kratesebut tepat diatas code ]]> atau seperti pada gambar dibawah ini dan klik model Simpan .. Selesai dan lihat rahalana