Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover

-->

class='home blog'>

Home
About
- facebook
- twitter
Android
- Aplikasi
- Games
- Launcher
Blogger
Game Pc
- Racing
- Sport
- Starategy
- Game Updates
LAIN-LAIN

Popular Post

Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover

Posted by : Ariq Rastaman Kamis, 17 Oktober 2013

Cara membuat navigasi social bookmark melayang (floating social bookmark widget) :

1. Seperti biasa, login dulu ke dashboard blogger anda.

2. Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3. Copy script widget social bookmark dibawah ini, dan paste pada gadget.

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBry1JOohWudni9FmPhvwD0eaotgOzRxi0cwNXqy9vEE5P84vbOXju8Hue4-h2_QiPxuu5Hw2aH6g2LkOwFurf7ZKfx5VgyBWTM0UCs8DwOFpHxlLRjEL81Q76PBwxx7E0OPtbdVaMtB4/s1600/64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQFi0yNEt6fnbjDhMLylIw7Jzz1NYWTTjWdiKKmeGrL94CRXdjIdhR3pzLdhiuRsf3qiMB2nuXxHFjcf4moQtQqirGaoOu2eBBK_RPLtVFwbsMYiOnoK-Dzo2ASkuUJS2xpNzxgVAV0Cc/s1600/64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic9q4laYcb64iwJoLTKKp3DsS1_wYB9KZvcdaNjbnfhrON0c1w6wAiEpVjtckyi6tFY6BVXUmTYSomUE3b88NIhTl0NNkRQDhUI5ZY3zNUm6NSX-IJkNeLcsvEdIJjN7rCIJ8dgwa3VeY/s1600/64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4eqK0WAPiRfCEpvuIqz58GBdJuEYUbV8s-5IDXE_DtI973EXgtIBmLzFf73dIAWk4PeivYS0q85jBbq0y5XD3xijcM2KF8fcIAJD5rdYQJjhWicCObMy2FNVRjLITXOyv1dSdXhcqrug/s1600/64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghEIGDmfBt9zNUhOaYQX3VzgQujxgw7RbZOyXwhUCo0J9-6ny8TkOefardPmjydISyKcLl-bLWAQXrXHqtulcj_2LbB4QHFYPHGGftlvJDNjAPaWoLEoVHcSeAcxzsXeTX0B_lx76L-5Vm/s400/yahoo_64x64.png);
}
</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

<ul id="navigation">
<li class="rss"><a href="http://YOUR-BLOG.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="FACEBOK-PROFILE">Facebook</a></li>
<li class="twitter"><a href="TWITTER-ACCOUNT">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
<li class="e-mail"><a href="<div style="color: red;"YAHOO!-ACCOUNT">Yahoo!</a></li>
</ul>

4. Silahkan edit link akun social bookmark yang ada pada script, sesuai dengan akun social bookmark yang sobat miliki.

5. Simpan / Save gadget

CONTOH SPERTI YANG MELAYANG DI ATAS BLOG

Silahkan Komentar!

PERATURAN BERKOMENTAR DI BLOG OARU:

1. Gunakanlah bahasa yang sopan saat berkomentar.
2. Dilarang Memasang link hidup pada saat berkomentar.
3. Dilarang SPAM !!!
4. Untuk menyisipkan catatan, gunakan [catatan].. CATATAN KAMU ...[/catatan]
5. Untuk menyisipkan gambar, gunakan [img]URL GAMBAR KAMU[/img]

Subscribe to Posts | Subscribe to Comments

Navigation

info

SELAMAT DATANG

Selamat datang di Official Ariq Rastaman Uyeah - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan Berlama - Lama di sini dan membaca artikel saya silahkan berkomentar atau like fans page nya atau follow jika kalian ingin mendownlaod sesuatu di sini tenang saja karena semuanya gratis!!!!!!! jangan lupa Komentar Di Blog Saya

Sekilas Tentang Admin

Nama saya Ariq, Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru...

- Copyright © 2013 Official Ariq Rastaman Uyeah -

SELAMAT DATANG DI OFFICIAL ARIQ

JANGAN LUPA KOMENTAR!!

Minimize Zoom Close