Widget label-size sebenarnya memang sudah bawaan atau secara default ada pada blogger tetapi dengan tampilan yang sederhana, atau pada beberapa template blogger sudah memodifikasi tampilannya menjadi sedemikian rupa atau bermacam-macam bentuk dan modelnya.
Pada widget label-size yang akan kami paparkan dibawah ini adalah sesuai dengan fungsinya yaitu widget yang dapat menampilkan label tertentu pada blog, kelebihan widget ini adalah dari tampilannya yang berwarna-warni dgn papan animasi yang tentunya akan semakin membuat tampilan label-size pada blog anda menjadi lebih cantik dan menarik.
Lihat gambarnya dibawah ini.
Membuat Label Size Animasi Warna-warni Di Blog
Dengan adanya widget label-size pada blog maka akan dapat mempermudah pengunjung mencari artikel atau postingan berdasarkan label tertentu, dan juga mempermudah sistem navigasi di blog milik anda.
Baiklah jika anda tertarik unutk merubah tampilan widget label-size yang ada di blog anda menjadi seperti widget yang saya bagikan ini, silahkan ikuti proses cara pemasanganya di blog anda.
Langkah Memasang Widget Label-Size Dengan Animasi
1. Masuk ke dasbor blogger milik anda.
2. Pilih Template buka Edit HTML kemudian letakan kode css dibawah ini diatas kode]]></b:skin> atau </style>
/* Label */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:0;}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .Label li{position:relative;background:#fff;color:#444;padding:0;margin:0;text-align:left;width:100%;transition:all .3s}
#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
#sidebar-wrapper .Label li:before {content:"";position:absolute;width:2px;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0 20px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{background:#df4840;position:relative;display:block;float:left;margin:0 1px 1px 0;font-size:11px;transition:all .3s}
#sidebar-wrapper .label-size a{display:inline-block;color:#fff;padding:4px 6px;font-weight:400;transition:all .3s}
#sidebar-wrapper .label-count{display:inline-block;background:#3a91c7;color:#fff;padding:5px 8px;text-align:center;transition:all .3s}
#sidebar-wrapper .label-size a:hover{color:#fff;text-decoration:underline}3. Cari Kode yang mirip atau seperti dibawah ini gunakan
<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
........ bla bla
........ bla bla
........ dan seterusnya.
</b:includable>
</b:widget>4. Setelah ketemu ganti semua kode tersebut dengan kode dibawah ini:
<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<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>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'><data:label.count/></span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + 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>
</b:includable>
</b:widget>5. Simpan template dan selesai
Penutup
Demikianlah sedikit penjelasan tentang Memasang Widget Label Size Dengan Papan Animasi Warna-warni Di Blog, jika ada kendala dalam pemasangan atau terdapat error silahkan hubungi kami dikolom komentar. Anjuran dari kami sebelum anda melakukan atau mengedit template silhakn back up terlebih dahulu, guna mencegah hal-hal yang tidak diinginkan, semoga bermanfaat dan "Salam Bloggerism"Original Konten: ditulis oleh Admin www.bloggerism.web.id Jumat,04 Desember 2015 ( Silahkan di copy codenya ! )
Disqus Comment