Float and Slide can be Disappear

Ternyata masih menjadi andalan keberadaan iklan melayang-layang dan bisa ditutup (menghilang) guna menarik para pelancong untuk mengkliknya yak :D :"> Pernah di Prodigy of Head juga membahas bagaimana cara membuat seperi itu, nih dicinih nich . Walau judulnya rada jauh dengan trick yg disuguhkan, namun itulah caranya membuat iklan melayang bisa di close ;)
Setali tiga uang berbicara close/tutup, Beben Koben si bloglang anu ganteng kalem tea buat yang lebih simpel dengan fungsi yang sama :x Mau tauk gimana caranya, mau tahu...bener mau tau...DEMO

Klik buat mengambil link demo!
Masukin seluruh bumbu dengan tehnik Add a Gadget ► HTML/Javascript

Bumbu Float

SAVE :D

Bonus postingan Koben kasih mengenai Social Slider. Sobat bisa melihat 5 buah Live example disini Social Slider jQuery Plugin. Buat WP padahal tricknya yak ;)) it's okay no problemo :P Beben disini hanya meminimalisir & menambahkan penggunaan atribut CSS supaya good looking b-)

Klik buat mengambil link demo!

jQuery plugin Script

Letakin diatas tag </body>

Kode CSS

Masukin sebelum tag </b:skin>

#socialslider {
padding: 0;
top: 100px;
width: 85px;
left: -86px;
background: #333;
position: fixed;
border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
#socialslider img {
padding: 0;
margin: 0;
}
#socialslider-linki {
float: left;
width: 75px;
}
#socialslider-linki img {
width: 33px;
height: 33px;
display: block;
border: none;
margin: 0 auto;
}
#socialslider-ikony {
right: -33px;
position: absolute;
width: 32px;
z-index: 10;
background: #333;
border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
}
#socialslider-ikony ul {
left: 0;
position: relative;
bottom: -10px;
width: 32px;
background: #333;
border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
#socialslider-ikony ul li {
padding: 0 6px 8px 6px;
width: 20px;
height: 20px;
}
#socialslider-ikony img {
width: 20px;
height: 20px;
margin: 0;
}
#socialslider-ikony ul, #socialslider-linki ul, #socialslider-ikony li, #socialslider-linki li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#socialslider-linki li {
padding: 10px 0 5px 5px;
text-align: center;
width: 100%;
}
#socialslider-linki a {
color: #fff;
font-size: 10px;
text-decoration: none;
}

HTML - Pemakaian

Didalam tag body template or HTML/Javascript :D

<div id="socialslider">

       <div id="socialslider-linki">
     <ul>
      <li>

<a href='YOUR-FEED-URL-HERE' title='RSS' target='_blank'><img src='http://feedburner.google.com/fb/lib/images/icons/feed-icon-12x12-orange.gif' alt='RSS' />RSS</a></li>
<li>
<a href='YOUR-FEEDBURNER-EMAIL-URL-HERE' title='Newsletter' target='_blank'><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/newsletter-32.png' alt='Newsletter' />Newsletter</a>
</li>
<li>
<a href='YOUR-TWITTER-URL-HERE' title='Twitter' target='_blank'><img src='http://twitter.com/phoenix/favicon.ico' alt='Twitter' />Twitter</a>
</li>
<li>
<a href='YOUR-FACEBOOK-URL-HERE' title='Facebook' target='_blank'><img src='http://static.ak.fbcdn.net/rsrc.php/yi/r/q9U99v3_saj.ico' alt='Facebook' />Facebook</a>
</li>
<li>
<a href='YOUR-YOUTUBE-URL-HERE' title='YouTube' target='_blank'><img src='http://s.ytimg.com/yt/favicon-vflZlzSbU.ico' alt='YouTube' />YouTube</a>

</li>
</ul>
    </div>

       <div id="socialslider-ikony">
    <ul>
    <li>
<img src='http://feedburner.google.com/fb/lib/images/icons/feed-icon-12x12-orange.gif' alt='RSS' />
</li>
<li>
<img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/newsletter-20.png' alt='Newsletter' />
</li>

<li>
<img src='http://twitter.com/phoenix/favicon.ico' alt='Twitter' />
</li>
<li>
<img src='http://static.ak.fbcdn.net/rsrc.php/yi/r/q9U99v3_saj.ico' alt='Facebook' />
</li>
<li>
<img src='http://s.ytimg.com/yt/favicon-vflZlzSbU.ico' alt='YouTube' />
</li>    
</ul>
   </div>

  </div>

Isikan link dengan link account sobat masing² and kemudian itu gambar hosting sendiri² juga, okay!!! Save!
Beres yang memakai sentuhan jQuery, sekarang bagaimana kalau yang murni menggunakan CSS doang nih :-/ Sikat sekalian dah biar beres 100%.

Klik buat mengambil link demo!

Kode CSS

#socialslider {
display: block;
padding: 0;
top: 90px;
left: -1px;
position: fixed;
}
* html #socialslider {
position: absolute;
}
#socialslider li {
margin: 0 auto;
background: #559900;
}
#socialslider-ikony img {
width: 20px;
height: 20px;
}
#socialslider-ikony ul {
left: 0;
width: 32px;
}
#socialslider-ikony ul li {
padding: 5px;
width: 20px;
height: 20px;
border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
}
#socialslider-ikony ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}

Kode HTML

Ganti link dengan link account sobat, dan gambar hostingkan sendiri². SAVE. Permios :-h
Happy blogging \m/