Inilah daftar kode warna silahkan anda pilih :
Artikel kali ini akan membahas mengenai "Cara membuat navbar auto hidden"
Pengertian dari judul diatas adalah navbar akan tersembunyi/tidak kelihatan, kecuali disorot oleh mouse.Seperti yang di gunakan oleh Blog Informasi Pasid. Berikut ini adalah langkah-langkahnya :
- Masuk ke akun blogger anda
- Pilih Rancangan/Template
- Edit HTML
- Centang Expand Template Widget
- Cari kode body {
- Copy kode dibawah ini, kemudian paste tepat diatas kode tadi
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}
- Klik tombol Simpan Template.
- Lihat perubahan navbar blog anda.
Sumber : --klik disini--
- Log in ke akun blog anda
- Klik Rancangan/Template
- Lalu centang Expand Widget
- Kemudian cari kode </head>
- Copy kode di bawah ini dan letakkan diatas kode </head>
<script language="JavaScript" src="http://wisnunugraha.googlecode.com/files/Love%20IN.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("http://i1123.photobucket.com/albums/l546/wizyuloverz/LeftofLoveINA.png")</script>
6.Simpan dan lihat hasilnya
Berikut cara pembuatannya.
Silahkan Ikuti Langkah-langkah berikut :
1. Silahkan login akun Blog Anda
2. Pilih menu Rancangan dan Pilih Elemen Laman
3. Setelah itu pilih Tambah Gadget
4. Kemudian Tambahkan HTML/JavaScript
5. Dan Copy dan kode di bawah ini :
<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width: 993px;
}
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:#000000;
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=40);
}
ul#navigation li a:hover{
background-color:#BDBDBD;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#FFFFFF;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/RSS.png);
}
ul#navigation .facebook a {
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Facebook.png);
}
ul#navigation .twitter a {
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Twitter.png);
}
ul#navigation .g-mail a{
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Google.png);
}
ul#navigation .y-mail a{
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Yahoo.png);
}
ul#navigation .youtube a{
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/YouTube.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://wizyuloverz.blogspot.com/atom.xml" rel="http://urlblog anda.blogspot.com" target="_blank">RSS Feed</a></li>
<li class="facebook"><a href="http://www.facebook.com/alamat%20facebook%20anda" target="_blank">Facebook</a></li>
<li class="twitter"><a href="https://twitter.com/nama%20twitter%20anda" target="_blank">Twitter</a></li>
<li class="g-mail a"><a href="https://www.google.com/bookmarks/....." target="_blank">Google</a>
</li>
<li class="y-mail a"><a href="https://www.yahoo.com/bookmarks/...." target="_blank">Yahoo</a>
</li>
<li class="youtube a"><a href="https://www.youtube.com/...." target="_blank">YouTube</a></li>
</ul>
6. Setelah di Copy silahkan sahabat bisa mengganti Angka berwarna Pink diatas untuk mengatur posisi widget pada blog sahabat.
7. Ganti URL/Alamat Blog di atas yang berwarna Merah dengan URL/Alamat Blog sahabat
8. Setelah Selesai Silahkan Simpan/SAVE widget, kemudian lihat hasilnya.
Sumber : --klik disini--
Social Networking adalah sebutan lain terhadap website community.
Social Networking adalah tempat untuk para netter berkolaborasi dengan netter lainnya.
Memasang widget atau badge facebook pada blogger bisa Anda lakukan dengan memanfaatkan link badge atau lencana profil pada facebook\