Mengedit Count Label Blogger menjadi lebih keren

Kali ini saya akan membagikan style css pada count label yang tampilannya begitu saja kali ini kita akan rubah dengan lebih menarik. dengan sedikit animasi css hover. Gambar di samping menunjukan saat efek hover muncul yang akan memunculkan count (jumlah artikel pada label) dengan efek transition cubic-bezier. Pada dasarnya widget label blogger hampir sama seperti menu navigation dengan menggunakan kodeul dan li.

    Liat DEMO disini

Jika anda tertarik, anda dapat mengukuti step by stepnya dibawah :

1.  Kita harus sudah pasang widget label blogger dan buka widget label setting lalu contreng Tampilkan Jumlah Entri Per Label

2.  Kemudian simpan.

3.  Masuk ke Edit template.
4.  Cari id widget Label atau temukan barisan code mirip seperti ini .

<b:widget id='Label1' locked='false' title='Label' type='Label'><b:includable id='main'>Perhatikan :lihat pada bagian ini <b:widget id='Label1' locked='false' title='Label' type='Label'><b:includable id='main'> hapus semua pada bagian ini. </b:includable></b:widget>

Jika anda mempunyai 1 widget label pasti akanid='Label1',tetapi jika anda mempunyai 2 

label, akan ada id='label2'.

5.  Jika sudah dihapus lalu masukan code ini pada bagian yang di hapus tadi:

<b:if cond='data:title'> <h2><data:title/></h2> </b:if><div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> <b:if cond='data:display == &quot;list&quot;'><ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'><data:label.count/> Artikel</span> </b:if> </b:if> </li> </b:loop> </ul> <b:else/> <b:loop values='data:labels' var='label'> <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'>(<data:label.count/>)</span> </b:if> </span> </b:loop> </b:if> </div>

6.  Simpan CSS berikut diatas kode ]]</skin>

.sidebar ul li { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglbYuOrSJ45eDgoF05aGZy66nN8PqbGXu_DarS4b6FMzJ_AOALvowRI0vDZoE-9wUSXNt9EdIJQc5t9Dy2LlvUItEJdH3SPFw8CceZ5TwuFZYOmnQUiP_7OaXnYvKhcXtZu3lBGJfWplc6/s1600/icon-new-window.png) no-repeat left center; list-style-type:none; margin:0 0 5px; padding-left:20px; transition:padding 0.26s ease; -moz-transition:padding 0.26s ease; -webkit-transition:padding 0.26s ease;}.sidebar ul li:hover { padding-left:23px;}.sidebar ul li:hover span.label-count { opacity:0.5; margin-left:10px;}span.label-count { background:#000; border-radius:0 10px 10px 0; -moz-border-radius:0 10px 10px 0; -webkit-border-radius:0 10px 10px 0; color:#FFF; height:auto; margin-left:50px; opacity:0; position:relative; text-align:center; width:auto; padding:2px 8px; transition:all 0.3s cubic-bezier(1,2,0,0) 0s; -moz-transition:all 0.3s cubic-bezier(1,2,0,0) 0s; -webkit-transition:all 0.3s cubic-bezier(1,2,0,0) 0s;}span.label-count:before { content:""; width:0; height:0; position:absolute; right:100%; top:0; border-width:10px; border-style:solid; border-color:transparent black transparent transparent;}

7.  Terakhir Simpan template anda dan lihat hasilnya .

Faktor kesalahan CSS diatas saya menggunakan class dengan class='sidebar' . mungkin pada template anda akan berbeda. jika anda memasangnya pada bagian footer. css yang perlu di rubah pada css bagian yang di garis bawahi berikut ini.

.sidebar ul li {

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglbYuOrSJ45eDgoF05aGZy66nN8PqbGXu_DarS4b6FMzJ_AOALvowRI0vDZoE-9wUSXNt9EdIJQc5t9Dy2LlvUItEJdH3SPFw8CceZ5TwuFZYOmnQUiP_7OaXnYvKhcXtZu3lBGJfWplc6/s1600/icon-new-window.png) no-repeat left center; list-style-type:none; margin:0 0 5px; padding-left:20px; transition:padding 0.26s ease; -moz-transition:padding 0.26s ease; -webkit-transition:padding 0.26s ease;}.sidebar ul li:hover { padding-left:23px;}.sidebar ul li:hover span.label-count { opacity:0.5; margin-left:10px;}

Banyak terjadi kesalahan adalah karena perbedaan id atau class pada CSS. jadi perhatikan dulu widget Label di taruh di sebelah mana .Jika anda mengalami kesulitan. silahkan ajukan pertanyaan dengan benar dan jelas. agar jawabannya pun jelas

Last Words

Bagaimana? sangat mudah sekali bukan? Dengan cara ini label blogger anda akan terlihat lebih keren. Sekian post tentang Mengedit Count Label Blogger menjadi lebih keren. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata dan semoga tulisan ini dapat bermanfaat bagi anda :)

Share this

Facebook Twitter Pinterest WhatsApp Telegram Linkedin

Related Posts