Cara Membuat Label Dengan Bounce Counter Di Blogspot

Banyak sekali berbagai jenis bentuk label yang bisa ada pakai di blog anda, namun karena hampir 100% pengguna blog menggunakan label maka bentuk label yang berbeda akan sulit ditemui. Untuk menghasilkan label yang berbeda maka widget berikut ini akan kita tambahkan efek hover, efek tooltips dan efek transition cubic-bezier.

Widget ini dasarnya berwarna hitam,namun jika anda memiliki blog dengan background putih anda bisa dengan mudah mengubah warna dasarnya dengan menggunakan kode hexa color. Jika anda ingin melihat demonya anda bisa lihat pada bagian label( kanan ) blog ini.

Jika anda belum memasang label apapun di blog anda maka anda harus memasangnya terlebih dahulu dengan membuka tutorial berikut

cara pemasangan label di blog

• Step 1  Buka blogger.com lalu pilih blog  anda
• Step 2  Pilih tata letak

• Step 3  Selanjutnya pilih tambahkan widget
• Step 4  Pilihlan option label seperti gambar berikut ini 

• Step 5  pastikan anda memilih bentuk daftar ,bukannya memilih opsi cloud
• Step 6  Selanjutnya pastikan bila anda mencentang kolom tampilkan jumlah entri per label

Jika anda sudah memasang label di blog anda maka lewati tutorial singkat diatas

Setelah anda memiliki widget label di blog anda maka sekarang anda harus mengubah tampilan widget standar menjadi widget label yang menggunakan bounce counter, dengan mengikuti petunjuk berikut

cara pemasangan di blog

• Step 1  Buka blogger.com lalu pilih blog  anda
• Step 2  Pilih template lalu edit html
• Step 3  Cari kode yang mirip dengan <b:widget id='Label1' locked='false' title='Label' type='Label'> <b:includable id='main'> 
• Step 4  Setelah anda menemukan kode yang mirip tersebut maka hapuslah kode yang ada diantara <b:widget id='Label1' locked='false' title='Label' type='Label'> <b:includable id='main'>  dengan </b:includable></b:widget>   . Sehingga menjadi seperti berikut

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

 </b:includable> </b:widget>

• Step 5  Selanjutnya ganti bagian yang dihapus tersebut dengan kode berikut

<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>

• Step 6  Saat ini kode tersebut sudah selesai sekarang, kita akan mengubah tampilan cssnya. Cari kode ]]></b:skin> selanjutnya pastekan css berikut diatasnya

.sidebar ul li { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFF5RHEIAziwAMc6eZKc-AQdg_1FXf31MsRGdKp_U8O9E32umq2J9-rvsgoxUp_nd5fz91TXk6PYNujBSWEswH4gakh-ti7WM4dztZa7GRQxv8VZYNchR86P4WPXyS-7WIDp-Wtzv6gij8/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; }

• Step 7  Simpan lalu cek bog anda untuk melihat hasilnya

Jika menurut anda artikel ini cukup sulit untuk dipahami, anda bisa membaca penjelasan lainnya dari sumber berikut Sumber