Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover - Widget untuk berbagi artikel ke layanan social bookmark sudah
banyak kita jumpai diberbagai situs. Termasuk saya pun sudah beberapa kali
menuliskan postingan mengenai social bookmark dan yang terakhir adalah tentang
cara membuat floating share button (tombol share melayang) di blog. Nah selain
widget social bookmark statis yang biasanya ada di sidebar atau pun widget
social bookmark melayang yang biasanya ada di halaman posting, masih ada
beberapa style lagi yang bisa kita gunakan. Pada tips blogging kali ini saya
ingin berbagi bagaimana cara membuat
menu navigasi ke layanan social bookmark dengan efek mouseover. Efek mouseover artinya kalau mouse
didekatkan pada obyek tertentu maka akan menghasilkan efek tertentu pula,
contoh sederhananya seperti pada drop down menu. Hasil dari widget social bookmark dengan tampilan
seperti menu navigasi ini dapat anda lihat langsung pada bagian atas header
blog saya ini.
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/AVvXsEh6Qv4Ec_rl9BLbYZxgzthQzhtkPJoyrtYnDfpwS5ZGk-2sPAmykH81PCEDWg_iBqq8bHplkChaQMFeqCrmNB42bKLM1G1ByvTBbUUPuGjh7MQSDxP3MKmSU68yONlTlyzQiaLYoQDxINE/s1600/64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLWWa5ESmqtSZiuu8NRtdywsCkJ-M67A8NB5Em5bHgZsd1Bn05KSxISWWuqhsoAp1h76f4j17IfvS72W0n9vwi6V0JJKlyvuG6ZReb0uoUuyN3M03SsbbnlbP5pBdxRWImK1Abrs0wspI/s1600/64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzUDmi2i_VlTsp9nTQv41HZUG5pxCx24JCTsdm4_61yZyEpCn3JeuntRPtbNXjKR4DVwrqIQrhSBH0tcqu1vJXPpikAYz3bK99waByQ8-BKvCmAdxGudndNlIBN07N3Vz5oyDK1Nzp2o8/s1600/64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5IkioKtdGwuv1IVmetVTxOQ_hARg8r4zrkuZ_c4BODWKmqA3aeS59pIsEe6ATrREycW8EcGOkEdCRB3yHBYraN_-FXBIwdlgDFmwWiwmLXgJOYhYgf7vrKklqUCQULREHQ54dXAl7F0o/s1600/64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGS8mt1XkXE_jpR3xtGKK8IhF3OYg-SO1QP_X9exV9CHt0BRWM8TbMH7FHu0q7sqS3YRUw0jpEibfZlm2vNf3n2m1fhtrMVelhtHev2hnsC0a6MtHhg9mzO-0kJa9-ZEDAQFzmiPImQMmw/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>
Widget social bookmark melayang dengan efek mouseover
ini sebenarnya dapat juga ditempatkan secara permanen pada template anda. Nah
buat sobat blogger yang punya hoby ngutak-ngatik template, cobalah bereksprimen
melakukannya. Yang pasti sobat harus menempatkan menu navigasi social bookmark tadi diatas menu blog yang ada pada
header. Selamat bereksprimen ya..:D
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/AVvXsEh6Qv4Ec_rl9BLbYZxgzthQzhtkPJoyrtYnDfpwS5ZGk-2sPAmykH81PCEDWg_iBqq8bHplkChaQMFeqCrmNB42bKLM1G1ByvTBbUUPuGjh7MQSDxP3MKmSU68yONlTlyzQiaLYoQDxINE/s1600/64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLWWa5ESmqtSZiuu8NRtdywsCkJ-M67A8NB5Em5bHgZsd1Bn05KSxISWWuqhsoAp1h76f4j17IfvS72W0n9vwi6V0JJKlyvuG6ZReb0uoUuyN3M03SsbbnlbP5pBdxRWImK1Abrs0wspI/s1600/64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzUDmi2i_VlTsp9nTQv41HZUG5pxCx24JCTsdm4_61yZyEpCn3JeuntRPtbNXjKR4DVwrqIQrhSBH0tcqu1vJXPpikAYz3bK99waByQ8-BKvCmAdxGudndNlIBN07N3Vz5oyDK1Nzp2o8/s1600/64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5IkioKtdGwuv1IVmetVTxOQ_hARg8r4zrkuZ_c4BODWKmqA3aeS59pIsEe6ATrREycW8EcGOkEdCRB3yHBYraN_-FXBIwdlgDFmwWiwmLXgJOYhYgf7vrKklqUCQULREHQ54dXAl7F0o/s1600/64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGS8mt1XkXE_jpR3xtGKK8IhF3OYg-SO1QP_X9exV9CHt0BRWM8TbMH7FHu0q7sqS3YRUw0jpEibfZlm2vNf3n2m1fhtrMVelhtHev2hnsC0a6MtHhg9mzO-0kJa9-ZEDAQFzmiPImQMmw/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
