Loading...

Cara Membuat Popular Post Warna Warni

Bangiz - Jika Anda mempunyai website atau blog tentunya widget popular post sangat penting untuk dicantumkan di halaman homepage atau lebih tepatnya di bagian sidebar. Keuntungannya supaya pengunjung blog mengetahui artikel yang banyak di buka di site atau blog tersebut apa. Para blogger tentunya terus melakukan inovasi supaya popular post ini kelihatan lebih menarik, begitu juga dengan widget yang lainnya. 

Salah satunya popular post yang memiliki warna-warni, dikatakan demikian karena memiliki banyak warna yang cukup menarik. Jika Anda suka, ikuti terus tutorialnya berikut ini:
Popular post warna warni
Popular post
1. Masuk dasbor Blogger > Template > Edit HTML.

2. Silahkan cari kode ]]></b:skin> (gunakan Ctrl+F untuk memudahkan pencarian).

3. Copy paste kode berikut di atas atau sebelum kode ]]></b:skin>:
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}#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:72%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}#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:#c7f25f;width:66%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;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:12px;color:#444;text-decoration:none}#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}#PopularPosts3 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;    background: #F2F2F2;}#PopularPosts1 img:hover {    -moz-transform: scale(1.2) rotate(-560deg) ;    -webkit-transform: scale(1.2) rotate(-560deg) ;    -o-transform: scale(1.2) rotate(-560deg) ;    -ms-transform: scale(1.2) rotate(-560deg) ;    transform: scale(1.2) rotate(-560deg) ;}
4. Tambahkan widget Entry Popular dari blog Anda dan pilih tampilkan maximal 9 post. Kemudian klik Simpan.

5. Lihat hasilnya dan atur tata letaknya.

Begitulah salah satu cara untuk mempercantik tampilan blog Anda. Apabila warna yang didapatkan kurang sesuai silahkan ganti kode-kode warna hexa di atas dengan kode yang ada disini

/fa-thumbs-up/ RELATED$type=list-tab$hide=home

Name

Android,5,Blogging,108,CorelDRAW,14,Desain Grafis,24,Facebook,22,Foto Sampul,34,Gambar,54,Info,18,Internet,31,Kata Mutiara,26,Kesehatan,31,Komputer,25,Microsoft Word,12,Office,12,PhotoScape,10,Resep,6,SEO,10,Sosial media,21,Tutorial,36,Wallpaper,20,
ltr
item
Bangiz: Cara Membuat Popular Post Warna Warni
Cara Membuat Popular Post Warna Warni
Popular post keren, popular post rainbow, popular post berwarna-warni, Cara membuat popular post warna warni lucu, Widget entry populer keren untuk blogger-blogspot..
https://4.bp.blogspot.com/-7AzrBK1hPc0/UbmohQPoHXI/AAAAAAAAFZ4/6CKpMs-KNl8/s320/rainbow.jpg
https://4.bp.blogspot.com/-7AzrBK1hPc0/UbmohQPoHXI/AAAAAAAAFZ4/6CKpMs-KNl8/s72-c/rainbow.jpg
Bangiz
https://bangiz.blogspot.com/2013/06/Rainbow.html
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/2013/06/Rainbow.html
true
5131493432912556385
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy