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