×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Menambahkan Icon Bintang di Widget Popularpost Blogger

February 20, 2020   • Comment

Pada tutorial sebelumnya saya membagikan tutorial membuat Widget Popularpost seperti IDNXMUS, dan kali ini saya akan membagikan sebuah tutorial untuk menambahkan icon Bintang di Widget Popularpostnya.

Mungkin kamu ingin menambahkan icon bintang di widget popularpost kamu agar menjadi lebih menarik untuk dilihat, dan tampil berbeda seperti biasanya, nah untuk menambahkan icon bintang tersebut tidaklah sulit, karna kamu hanya perlu mengcopy kode CSS yang berisi icon bintang dari Font Awesome ini kedalam template blog kamu.

Icon bintang ini bisa kamu tambahkan di berbagai macam style widget popularpost, namun untuk kamu yang widget popularpostnya seperti IDNXMUS, saya sarankan tidak menambahkan Icon bintang ini, karna mungkin terjadi tabrakan terhadap bintang dengan judul, dan butuh utak atik kembali CSSnya agar menjadi responsive. Nah yuk langsung saja ke tutorial menambahkan Icon bintangnya.



Menambahkan Icon Bintang di Widget Popularpost

1. Pertama, login dulu ke Blogger,
2. Kemudian, pada dashboard Blogger pilih TemaEdit HTML,
3. Lalu copy kode CSS dibawah ini dan letakkan tepat diatas kode </b:skin>,
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#ff69b4;text-align:center;bottom:0;right:10px;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:black;font-size:13px;}
.PopularPosts ul li a:hover{color:#ff69b4;}
4. Terakhir simpan atau save template.

Kesimpulan
Menambahkan Icon Bintang di widget popularpost tidak direkomendasikan untuk pengguna style popularpost seperti IDNXMUS karna mungkin akan terjadi tabrakan, dan icon bintang ini menggunakan FontAwesome yang mungkin akan mempengaruhi sedikit kecepatan blog kamu (menurut saya gak masalah besar, karna gak terlalu ngaruh).

Akhir Kata
Sekian tutorial menambahkan icon bintang di widget popularpost yang dapat saya bagikan, jika ada pertanyaan seputar blogger, kamu dapat berkomentar atau langsung menghubungi saya melalui contact form yang tersedia di web log ini, dan Semoga Bermanfaat :D

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

0 Response to "Cara Menambahkan Icon Bintang di Widget Popularpost Blogger"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2017 - 2020 Anirock Site - All Rights Reserved Created With