floating pop out vertical

moonroemoort

jquery, widget

8 December 2013

2 Komentar

jika kemarin saya share floating sosial widget  
sekarang saya akan share floating pop out vertical  apa bedanya dengan floating sosial widget ??
ini agak mirip tapi berbeda jika floating sosial widget berada pada kiri blog floating pop out vertical berada pada kanan blog , dan floating pop out vertical tergolong menu

 

langsung saja ikuti langkahnya

• Login ke Blogger
•  Tata Letak / Tambah gadget
•  Pilih HTML / JavaScript 
• Paste kode berikut:

 <style>
ul#btt_nav {
position: fixed;
margin: 0px;
padding: 0px;
top: 150px;
right: 0px;
list-style: none;
z-index:9999;
}
ul#btt_nav li {
width:100px;
border:0px;
display: block;
padding-top:1px;
padding-bottom:1px;
}
ul#btt_nav li a {
display: block;
margin-right: -2px;
width: 100px;
height: 70px;
background-color:#000;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
-moz-border-radius:10px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-khtml-border-top-left-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#btt_nav .home a{
background-image: url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/64/blue-home-icon.png);
}
ul#btt_nav .portfolio a {
background-image: url(http://icons.iconarchive.com/icons/aha-soft/standard-portfolio/64/Graphic-designer-icon.png);
}
ul#btt_nav .services a {
background-image: url(http://icons.iconarchive.com/icons/kyo-tux/phuzion/64/Misc-Tools-icon.png);
}
ul#btt_nav .profile a {
background-image: url(http://icons.iconarchive.com/icons/webiconset/blogging/64/About-me-icon.png);
}
ul#btt_nav .contact a {
background-image: url(http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-2/64/message-already-read-icon.png);
}
</style>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/><br>
 <script type='text/javascript'>
$(function() {
$(&#39;#btt_nav a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;85px&#39;},1000);
$(&#39;#btt_nav &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;85px&#39;},200);
}
);
});
</script>
 <ul id='btt_nav'> 
<li class='home'><a href='/'/></li> 
<li class='portfolio'><a href='#'/></li>
 <li class='services'><a href='#'/></li>
 <li class='profile'><a href='#'/></li> 
<li class='contact'><a href='#'/></li> 
</ul>

• klik simpan

KETERANGAN
 ganti yang berwarna merah dengan url yang ingin di tuju,
jika di blog anda sudah terdapat kode jquery hapus kode yang berwarna hijau
lebih jelasnya hapus kode ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/><br>