8 December 2013

floating pop out vertical

floating pop out verticaljika 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>

    2 comments

    iya donk gan
    makasih atas kunjungan dan apresiasi nya gan

    berkomentarlah sesuka anda
    ===>no link aktiv<===
    NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar