kumpulan membuat popular post berwarna dan keren - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul kumpulan membuat popular post berwarna dan keren, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel blogging, Artikel css, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : kumpulan membuat popular post berwarna dan keren
link : kumpulan membuat popular post berwarna dan keren

kumpulan membuat popular post berwarna dan keren

 Halo sobat webdsign di mana pun sobat berada,mungkin cara yang akan saya bagikan sebenarnya sudah ada sejak lama,tetapi di sini jika sobat menemukan artikel saya dengan topik membuat popular post berwarna dan elegan kali ini saya ada 2 variasi membuat popular post yang tentunya akan semakin menarik untuk dipasang di blog maupun website sobat,silahkan sobat pilih yang sesuai dengan keinginan untuk di pasang mana yang cocok dengan desain sobat.

1.popular post berwarna minimalis

cara membuatnya sobat seperti biasanya buka html ,lalu cari bagian CSS skin,setelah ketemu,sobat copy paste kode di bawah tepat di atas </style> atau di atas ]]></b:skin>setelah itu simpan.berikut scriptnya


/*popular post keren*/ .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{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative} .PopularPosts ul li a{color:#fff!important} .PopularPosts ul li a:hover{color:#2c3e50!important} .PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;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;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-thumbnail{margin:0 0 0 0} .PopularPosts .item-snippet{font-size:11px}
untuk mengubah warna sesuai dengan selera sobat,sobat bisa mengganti script di bawah ini dengan warna yang sobat kehendaki.
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;}

1.popular post berwarna versi daun

dari segi tampilan script ini lebih elegan dan tentunya lebih enak di lihat,tidak terlalu minimalis.atau biasa-biasa saja.cara memasangya sangat mudah sama seperti contoh di atas taruh script di bawah ,tepat di atas </style> atau di atas ]]></b:skin>,berikut scriptnya

#PopularPosts1 ul li a:hover{color:#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-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #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}
setelah selesai sobat simpan template ,atau bisa dengan lakukan preview,demikian 2 script membuat popular post lebih elegen dan berwarna,semoga bermanfaat dan salm belajar.

Demikianlah Artikel kumpulan membuat popular post berwarna dan keren

Sekianlah artikel kumpulan membuat popular post berwarna dan keren kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel kumpulan membuat popular post berwarna dan keren dengan alamat link https://dev-create.blogspot.com/2016/06/kumpulan-membuat-popular-post-berwarna.html