Make Float Category for Blogger - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Float Category for Blogger, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Blogger, Article CSS, Article HTML, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make Float Category for Blogger
link : Make Float Category for Blogger

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/AVvXsEj3jlRja-OLCTPjHqyDx57YqtlbwLGIe24MpJlG1_PcKOk5jR-GL7I33GfT2bSwt-IVCltrXrkPUJNK3lyyP9n_plNL1MS-7qbgCMNomA7edYAdT5ByzePkKBdk6AmAK_a_qes4BpV4190Y/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.

Thus articles Make Float Category for Blogger

that is all articles Make Float Category for Blogger This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Float Category for Blogger with the link address https://autopostingblogspot.blogspot.com/2014/12/make-float-category-for-blogger.html