◄ Min  Size Fonts: + | - | ± Color: Max ►

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
tag
.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(http://1.bp.blogspot.com/-hGmDu4RbOkU/VEZum75xRyI/AAAAAAAAAJM/COcpoyC-eXk/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.
Loading...
XMake Float Category for Blogger
Membuat konten kategori berada di pojok kanan atas untuk blogspot.
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE