SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




Auto Hidden Navigasi Menu Share di Sisi Kanan

Berbicara tentang Navigasi Menu atau Tab Menu pasti kawan sudah tahu, yang biasanya berada diatas posting atau dibawah / diatas  Header dan ada juga yang menaruhnya dibawah posting [pada Footer Blog] itu semua tergantung selera masing-masing, :r tapi sekarang saya akan mencoba berbagi dengan kawan cara membuat Navigasi Menu Share di sisi kanan yang bisa Auto Hidden :z
untuk Demonya kawan bisa lihat disini
Caranya : 
  • Saya asumsikan kawan sudah berada pada Design / Perancang Template 
  • Tambah Gadget atau HTML / JavaScript
  • Copas Kode berikut kedalamnya 
<style>

ul#navigation1 {
position: fixed;
margin: 0px;
padding: 0px;
top: 100px;
right: 0px;
list-style: none;
z-index:9999;
}
ul#navigation1 li {
width:100px;
border:0px;
display: block;
padding-top:1px;
padding-bottom:1px;
}

ul#navigation1 li a {
display: block;
margin-right: -2px;
width: 100px;
height: 70px; 
background-color:transparent;
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#navigation1 .rss a{
background-image: url(http://4.bp.blogspot.com/_LZtXSNcp76A/TQO8L8P3ZKI/AAAAAAAABUM/CI6VTjlEZsI/s400/rss.png);
}
ul#navigation1 .facebook a {
background-image: url(http://1.bp.blogspot.com/_LZtXSNcp76A/TQO8LKKzUVI/AAAAAAAABT0/uDnhDlFgPuA/s400/facebook.png);
}
ul#navigation1 .twitter a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO8MAfFqUI/AAAAAAAABUU/z1PwLV5UWlA/s400/twitter.png);
}
ul#navigation1 .profile a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO9lg8rMiI/AAAAAAAABUk/DwJNZAO8Wnc/s400/photo.png);
}
ul#navigation1 .e-mail a {
background-image: url(http://2.bp.blogspot.com/_LZtXSNcp76A/TQO9lQ5T9GI/AAAAAAAABUc/Nyk6OTOMOH8/s400/mail_edit.png);
}
</style>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script> 
<script type="text/javascript"> 

$(function() {
$('#navigation1 a').stop().animate({'marginLeft':'85px'},1000);

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

<ul id="navigation1">
<li class="rss"><a href="http://info-blogbego.blogspot.com/atom.xml" target="_blank"></a></li>
<li class="facebook"><a href="http://www.facebook.com/KASTAONE" target="_blank"></a></li>
<li class="twitter"><a href="http://twitter.com/KASTAONE" target="_blank"></a></li>
<li class="profile"><a href="http://www.blogger.com/profile/14829445231709686413" target="_blank"></a>
</li>
<li class="e-mail"><a href="https://mail.google.com/mail/u/0/?hl=id&shva=1#inbox" target="_blank"></a>
</li>
</ul>

  • Simpan Template Kawan dan lihat hasilnya :# 
  • Kalau hasilnya tidak mau Auto Hidden, maksud saya Navigasi tersebut akan masuk ke sisi / pinggir kanan Blog dan akan keluar satu elemen Share kalau mouse di dekatkan pada elemen Share tersebut. [seperti gambar / image disamping] berarti pada template kawan belum berisi jquery, maka tambahkan kode berikut dibawah 
]]></b:skin> atau diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 

  • Setting lainnya, kalau kawan ingin biar kelihatan warna background / latar belakang silahkan text transparent berwarna merah diganti dengan warna kesukaan kawan
  • Ganti semua URL saya yang berwarna merah dengan URL kawan 
  • Kalau semuanya sudah okey simpan kembali template kawan 
Mudah-mudahan apa yang saya sampaikan ini cukup jelas bagi kawan, dan jangan lupa berikan sepatah, dua patah kata sebagai komentar dan jejak kawan agar saya bisa mengunjungi Blog dan membalas komentar kawan, terima kasih

9 komentar pada “Auto Hidden Navigasi Menu Share di Sisi Kanan”

  1. nah, ini nih yang ane cari..., tapi bisa gak kalo dibuat button sharenya diganti button komentar di atas posting?

    numpang simpan artikelnya buat dokumen pribadi ya gan...

    sekali lagi makasih infonya ya gan...sukses selalu...

    BalasHapus
  2. @Sendiri (Lomba Menulis Puisi) saya belum pernah coba tentang itu, nanti akan saya coba dulu :z

    BalasHapus
  3. @Beben Koben saya banyak belajar dari bos hehehe :#

    BalasHapus
  4. wow mantap tutorialnya...,
    tukeran link manual sob :D

    BalasHapus
  5. kalo saya coba di kanan ke dabling sama buku tamu mas... ada solusi buat di sebelah kAnan gak...
    nanya mulu :$

    BalasHapus
  6. @campuran saya masih belajar, tukeran Link silahkan :z

    BalasHapus
  7. uda ane pasang sob..., cek sendiri ya sob

    BalasHapus
  8. @Muhammad Fakhrial Zld sebenarnya ada yang diatas Header mas, cuma file saya hilang karena hardish tempo hari jebol - solusinya quest booknya pakai melayang seperti sebelah kiri blog ini :@

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger