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 floating top bar. 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

<style type='text/css'>
#TopBar {
height: 29px;
width: auto;
text-align: left;
padding: 5px 0 0 5px;
border: 1px #555 solid;
border-bottom: 0px;
background-color: #6997EE;
}
#B-area {
width: 350px;
height: auto;
padding: 5px;
margin: 0 auto;
background-color: #F8F8F8;
border-top: 0px;
border: 1px #555 solid;
}
#Topatas {
top: 20%;
left: 20%;
height: auto;
width: auto;
padding: 0px;
z-index: 1000;
position: fixed;
}
#ben {
float: right;
padding: 4px 10px;
cursor: pointer;
}
#b3n {
color: #FFFFFF;
font-size: 13px;
font-weight: bold;
line-height: 22px;
text-shadow: #000 .1em .1em .1em;
}
</style>

<script type="text/javascript">
function getValue()
{
document.getElementById("Topatas").style.display = 'none';
}
</script>

<div id="Topatas">
<div id="TopBar">
<img align="left" style="padding-left:2px;" src="http://icons.iconarchive.com/icons/deleket/folder/24/Mozilla-Thunderbird-icon.png" />
<span id="b3n">Ads by Google</span>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf_1mL3yzucm3eSb_Ugqs5sxbuJfcnheRZQKxBjNaboWnTw5afHntsSwIbmP7CkabWjAkK5kCsRAbnvkFqB035endalGmhcPE3laik1727c8NEH_hgOysAvcE3gilYCSU7CNSOQ3cU8fJo/s1600/close.png" onclick="getValue()" id="ben" />
</div>

<div id="B-area">

YOUR CONTENT HERE!!!

</div>
</div>

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>

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function () {
var hideDelay = 500;
var DelayTimer = null;
jQuery("#socialslider").hover(function () {
if (DelayTimer) clearTimeout(DelayTimer);
jQuery("#socialslider").animate({
left: '0'
}, "normal");
}, function () {
if (DelayTimer) clearTimeout(DelayTimer);
DelayTimer = setTimeout(function () {
DelayTimer = null;
jQuery("#socialslider").animate({
left: '-86'
}, "normal");
}, hideDelay);
});
});
//]]>
</script>

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

<div id="socialslider">
<div id="socialslider-ikony">

<ul>
<li>
<a href='YOUR-FEED-URL-HERE' title='RSS' target='_blank'><img src='http://xn--wicek-k0a.pl/wp-content/plugins/social-slider-2/icons/standard/rss-20.png' alt='RSS' /></a>
</li>
<li>
<a href='YOUR-BLIP-URL-HERE' title='Blip' target='_blank'><img src='http://xn--wicek-k0a.pl/wp-content/plugins/social-slider-2/icons/standard/blip-20.png' alt='Blip' /></a>
</li>
<li>
<a href='YOUR-GOOGLE-BUZZ-URL-HERE' title='Buzz' target='_blank'><img src='http://xn--wicek-k0a.pl/wp-content/plugins/social-slider-2/icons/standard/buzz-20.png' alt='Buzz' /></a>
</li>
<li>
<a href='YOUR-VIMEO-URL-HERE' title='Vimeo' target='_blank'><img src='http://xn--wicek-k0a.pl/wp-content/plugins/social-slider-2/icons/standard/vimeo-20.png' alt='Vimeo' /></a>
</li>
<li>
<a href='YOUR-YOUTUBE-URL-HERE' title='YouTube' target='_blank'><img src='http://xn--wicek-k0a.pl/wp-content/plugins/social-slider-2/icons/standard/youtube-20.png' alt='YouTube' /></a>
</li>
<li>
<a href='YOUR-WYKOP-URL-HERE' title='Wykop' target='_blank'><img src='http://xn--wicek-k0a.pl/wp-content/plugins/social-slider-2/icons/standard/wykop-20.png' alt='Wykop' /></a>
</li>
<li>
<a href='YOUR-FACEBOOK-URL-HERE' title='Facebook' target='_blank'><img src='http://xn--wicek-k0a.pl/wp-content/plugins/social-slider-2/icons/standard/facebook-20.png' alt='Facebook' /></a>
</li>
<li>
<a href='YOUR-PICASA-URL-HERE' title='Picasa' target='_blank'><img src='http://xn--wicek-k0a.pl/wp-content/plugins/social-slider-2/icons/standard/picasa-20.png' alt='Picasa' /></a>
</li>
</ul>

</div>
</div>

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