Cara Membuat Widget Popular Post Warna-Warni Menarik | Tutorial Komputer dan Internet Terlengkap Android 86

Cara Membuat Widget Popular Post Warna-Warni Menarik




Cara membuat popular post warna-warniWidged popular post sangat diperlukan agar visitor mengetahui artikel apa yang populer selama sehari,seminggu atau sebulan. Setting popular post sebenarnya sudah default dari sebuah template blog. Sobat bisa mengubah dan mengedit widged popular post, seperti popular post yang ada disamping blog ini.

screenshoot
http://2.bp.blogspot.com/-p6Crr09F-YI/UhLUVmrFr-I/AAAAAAAADDU/jbWu_EpQ2ks/s1600/populer+post.png
Lalu,bagaimana cara membuat popular post seperti gambar diatas? Caranya cukup mudah,sobat tinggal mengikuti turtorial sederhana ini

Cara membuat widged popular post warna-warni
Pertama ,login akun blogger sobat>Template>Edit HTML (sebaiknya lakukan backup sebelum mengedit template sobat dengan cara klik>Cadangkan/Pulihkan
Lalu,Cari kode ]]><b:skin> atau </style>, Pastekan Kode berikut tepat diatasnya

.PopularPosts .item-thumbnail {
    float: left;
    margin: 0 10px 0 0;
}

.PopularPosts img {
    margin-right: 0.5em;
    transition: all 0.5s;
}

.PopularPosts .item-title {
    padding-bottom: 0.2em;
}

.PopularPosts .item-snippet {
    color: #fff;
}

.item-thumbnail img {
    border-radius: 100px;
    padding: 5px;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
}

.PopularPosts ul li {
    position: relative;
    margin: 5px 0;
    padding: 5px;
    border: 0;
}

.PopularPosts ul li:first-child {
    background: #ff4c54;
    width: 95%;
}

.PopularPosts ul li:first-child:after {
    content: "1";
}

.PopularPosts ul li:first-child + li {
    background: #ff764c;
    width: 87%;
}

.PopularPosts ul li:first-child + li:after {
    content: "2";
}

.PopularPosts ul li:first-child + li + li {
    background: #ffde4c;
    width: 84%;
}

.PopularPosts ul li:first-child + li + li:after {
    content: "3";
}

.PopularPosts ul li:first-child + li + li + li {
    background: #c7f25f;
    width: 81%;
}

.PopularPosts ul li:first-child + li + li + li:after {
    content: "4";
}

.PopularPosts ul li:first-child + li + li + li + li {
    background: #33c9f7;
    width: 78%;
}

.PopularPosts ul li:first-child + li + li + li + li:after {
    content: "5";
}

.PopularPosts ul li:first-child + li + li + li + li +li {
    background: #7ee3c7;
    width: 75%;
}

.PopularPosts ul li:first-child + li + li + li + li + li:after {
    content: "6";
}

.PopularPosts ul li:first-child + li + li + li + li + li +li {
    background: #f6993d;
    width: 72%;
}

.PopularPosts ul li:first-child + li + li + li + li + li + li:after {
    content: "7";
}

.PopularPosts ul li:first-child + li + li + li + li + li + li +li {
    background: #f59095;
    width: 69%;
}

.PopularPosts ul li:first-child + li + li + li + li + li + li + li:after {
    content: "8";
}

.PopularPosts ul li:first-child + li + li + li + li + li + li + li +li {
    background: #c7f25f;
    width: 66%;
}

.PopularPosts ul li:first-child + li + li + li + li + li + li + li + li:after {
    content: "9";
}

.PopularPosts ul li:first-child:after,
.PopularPosts ul li:first-child + li:after,
.PopularPosts ul li:first-child + li + li:after,
.PopularPosts ul li:first-child + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li + li + li + li + li:after {
    position: absolute;
    top: 20px;
    right: -15px;
    border-radius: 50%;
    background: #353;
    width: 30px;
    height: 30px;
    line-height: 1em;
    text-align: center;
    font-size: 28px;
    color: #fff;


Simpan template dengan mengklik tombol >Save Template 
Lihat Perubahan di blog sobat dengan mengklik >Lihat Blog

Perkerjaan Sobat untuk menambahkan widget popular post multi color sudah selesai, jika menemui hambatan atau kesulitan saat mempraktekkan tutorial ini, jangan sungkan meninggalkan komentar pada bagian bawah artikel ini ,sampai jumpa.

Cara Membuat Widget Popular Post Warna-Warni Menarik Rating: 4.5 Diposkan Oleh: Mas Bagus

1.Berkomentarlah sesuai topik
2.Harap jaga sopan santun dalam berkomentar
3.Dilarang berkomentar yang merugikan orang lain

 

Top
android phone with best battery life, what is the best android phone 2017,android phone with best camera,tagged mobile app for android,how to develop an app for android,best tablets for the price,best rated smart phones,top ten cell phones 2017,best android phone camera,best tv apps for android,best rated smartphones 2017,new droid phones 2017,best rated smartphone 2017,best droid phone 2017,best new cell phones 2017,,best free android tablet games,how to get free android games,android marketplace app download,best android camera phone,