Make Float Category for Blogger

Lama juga tidak memposting tentang tutorial blogspot! Saya bertualang kemari-kesana sudah melihat banyak artikel post tutorial blogger dibahas. Bumbu kode sudah tersedia tinggal urusan kreatifitas kita dalam menerapkan ke dalam blog tercinta :x ;)) Sekarang AA Koben akan berbagi sedikit kreasi tut's seputaran tagging kategori/label/tag blogcepot.
Kebanyakan konten yang berposisikan absolute top right/left para kreator membuat untuk link berbagi ke web sosial. Sebagai contoh make something to be float & float and slide can be disappear pokoknya yg seperti itu lah :D

Lihat pojok kanan atas...hover it!
Demo

jsfiddle.net/bebenkoben/qnhLwm75/embedded/result

.side-tag {
content: '';
display: block;
clear: both;
height: 0;
*zoom: 1;
position: fixed;
top: 87px;
right: 0;
z-index: 100;
margin: 0;
}
.side-tag .taglist {
position: relative;
height: 50px;
min-width: 50px;
}
.side-tag .taglist:hover .side-contents, .side-tag .taglist.current .side-contents {
z-index: 100;
display: block;
}
.side-tag .btn-tag {
width: 50px;
height: 50px;
display: block;
vertical-align: middle;
position: absolute;
top: 0;
right: 0;
background: #ff9e36 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_mDQw8Ek6cgrrGkp7Ktdj45ZWanuf16dwcIrzuWKbOI1IOEfx2SkS1-UQLMF3ByzfZwcVWUgbJLJpLN42-KqoHCo6nobJ_5nH0VVHkAqtpq5v_OHhlBj60xaIQKjPR0U-Ecm2CEWQVGGg/s35/tag-icon.png) no-repeat center center;
}
.side-tag .side-contents {
background-color: #ff9e36;
width: 270px;
margin-right: 49px;
display: none;
overflow: hidden;
position: relative;
z-index: 10;
}
.side-tag .side-contents a {
text-decoration: none;
font-size: 17px;
color: #fff1e5;
}
.side-tag .side-contents h2 {
margin: 0 0 15px;
}
.side-tag .taglist .side-contents {
padding: 25px;
width: 220px;
color: #fff;
}
.side-tag .taglist ul li {
float: left;
font-size: 12px;
line-height: 28px;
margin-right: 10px;
}

Untuk penerapan markup HTML, sobat harus masuk ke dalam editor template blog. Press Ctrl + F kemudian cari kode<b:widget id='Label1' locked='false' title='Labels' type='Label'>Kalau ribet coba dengan keyword Label1 saja!

Perhatikan struktur berikut!!!

          <b:widget id='Label1' locked='false' title='Labels' type='Label'>
            <b:includable id='main'>

<div class="side-tag">
 <div class="taglist">
  <a class="btn-tag"></a>
  <div class="side-contents">

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

--------- SCROLL KE BAWAH ----------

<b:include name='quickedit'/>

  </div>
 </div>
</div>

Yang sobat mesti lakukan memasukan taging berikut, sesuai dengan struktur diatas!

<div class="side-tag">
 <div class="taglist">
  <a class="btn-tag"></a>
  <div class="side-contents">

  </div>
 </div>
</div>

DONE.