Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover

Pernah lihat sebuah widget seperti ini ?

Apakah agan tertarik untuk membuat/memasangkan widget tersebut di blog agan ?
Selamat agan termasuk ke dalam orang-orang yang beruntung.Karena agan datang ke tempat blog dan di saaat yang tepat.
Kenapa ? Karena pada hari ini ane akan share info menarik yaitu Cara Membuat/Memasang Widget Social Bookmark Dengan Efek Mouseover.
elayang seperti gambar diatas.
Berikut langkah-langkahnya.
1.Yang pasti Login dulu ke blog agan semua.
2.Klik Rancangan>Elemen Laman>Add Gadget(HTML/JavaScript)
3.Copy paste Kode JavaScript berikut ini
<style><br>ul#navigation {<br>position: fixed;<br>margin: 0px;<br>padding: 0px;<br>top: 0px;<br>right: 0px;<br>list-style: none;<br>z-index:999999;<br>width:721px;<br>}<br>ul#navigation li {<br>width: 103px;<br>display:inline;<br>float:left;<br>border:0;<br>}<br>ul#navigation li a {<br>display: block;<br>float:left;<br>margin-top: -2px;<br>width: 100px;<br>height: 25px;<br>background-color:#eeeeee;<br>background-repeat:no-repeat;<br>background-position:50% 10px;<br>border:1px solid #BDDCEF;<br>-moz-border-radius:0px 0px 10px 10px;<br>-webkit-border-bottom-right-radius: 10px;<br>-webkit-border-bottom-left-radius: 10px;<br>-khtml-border-bottom-right-radius: 10px;<br>-khtml-border-bottom-left-radius: 10px;<br>text-decoration:none;<br>text-align:center;<br>padding-top:80px;<br>opacity: 0.96;<br>filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br>}<br>ul#navigation li a:hover{<br>background-color:#CAE3F2;<br>}<br>ul#navigation li a span{<br>letter-spacing:2px;<br>font-size:11px;<br>color:#60ACD8;<br>font-family:trebuchet-ms, arial, tahoma, Sans-Serif;<br>font-weight:bold;<br>text-shadow: 0 -1px 1px #fff;<br>}<br>ul#navigation .rss a{<br>background-image: url(<span style="color: rgb(0, 0, 255);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0S-Ym03ZvbxUwUsILBA99JQ_3iXHi0Bl3GUN8bOCaL_TpUznXQWx1N1zAumQHn8u8BkYmgaUcfIYzWpGrzspK-bHc146X574azRGb-U1wsf41RT7sVK_FOSVN-eSGk1qru6PoeGspNY/s1600/64x64.png</span>);<br>}<br>ul#navigation .facebook a {<br>background-image: url(<span style="color: rgb(0, 0, 255);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtlqWVPRocZvK8UQLOUVPJwpGGUmpewyHjUCFf812CAkm5Na-i3BEWFm6MAxlv0YpW_B1ltYnTfQFu6d1UGaQoBK8FZXigbxhwu9Vi2QrMEnNnBAHuc4Qwac5GqmHzt8qCauInd2zhFDY/s1600/64x64.png</span>);<br>}<br>ul#navigation .twitter a {<br>background-image: url(<span style="color: rgb(0, 0, 255);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7KWtO9RUSnbIyzQCy6RiE1uFsL22ra6836ElgpSYfo6KtS7uw8cVztSfS9mDre_g2ADZZgpFh4BZWS7NHH6gw1En4IztC31n5Sop4Y6gYM1j16p2p6f9uT_qnr8wI5GDi2KgJ0OjcllU/s1600/64x64.png</span>);<br>}<br>ul#navigation .googlebookmarks a {<br>background-image: url(<span style="color: rgb(0, 0, 255);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgguEZUk-l4NICaGV3kl22JYZE4sYarR2ZKauYXn4CW_inWLZPAUl6xGLSmFfefk-ii7XaJoaGihVi4ae_eEhitsr5PWqgRZIAd1m7Fl6oHtTjWt-nuGF8zA5Umz9i8f3VsCUkWMYaqe1A/s1600/64x64.png</span>);<br>}<br>ul#navigation .e-mail a {<br>background-image: url(<span style="color: rgb(0, 0, 255);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiAiwxhjJXeqEPKSQt3TvjerUncOL8-zVXIyM0ZCiuV8X0z9z1w4W5mLbCQRpK9Hs41CIe8BMA8LSLrC1Yb_hWaBa3JQ1Lc274SEU_LcJk_qdUPg5ws77m5jXUPpD4r63mcoH1hBteyyBc/s400/yahoo_64x64.png</span>);</p><p>}<br></style><br><br><script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"><br></script><br><script type="text/javascript"><br>$(function() {<br>var d=300;<br>$('#navigation a').each(function(){<br>$(this).stop().animate({<br>'marginTop':'-80px'<br>},d+=150);<br>});<br><br>$('#navigation > li').hover(<br>function () {<br>$('a',$(this)).stop().animate({<br>'marginTop':'-2px'<br>},200);<br>},<br>function () {<br>$('a',$(this)).stop().animate({<br>'marginTop':'-80px'<br>},200);<br>}<br>);<br>});<br></script><br><br><ul id="navigation"><br><li class="rss"><a href="<span style="color: rgb(255, 0, 0);">http://YOUR-BLOG.blogspot.com/atom.xml</span>">RSS Feed</a></li><br><li class="facebook"><a href="<span style="color: rgb(255, 0, 0);">FACEBOK-PROFILE</span>">Facebook</a></li><br><li class="twitter"><a href="<span style="color: rgb(255, 0, 0);">TWITTER-ACCOUNT</span>">Twitter</a></li><br><li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li><br><li class="e-mail"><a href="<div style="color: red;"<span style="color: rgb(255, 0, 0);">YAHOO!-ACCOUNT</span>">Yahoo!</a></li><br></ul>
4.Edit yang teks sesuai yang agan inginkan dan sesuai akun Social Network agan punya.
5.Klik Save/Simpan.
Dan wala jadilah Widget Social Bookmark Melayang di Blog agan.
Selamat mencoba dan semoga berhasil agan semua.Terima kasih telah datang di blog ane yang simple tetapi inovatif ini.
Keep Blogging dan Bye-Bye agan semua :)

Baca Artikel lainya: