Cara Membuat Simple Navbar Blogger - Yosshh.. setelah lama ngga update kali ini AHS akan update tutorial lagi,, kali ini AHS akan membagikan tutorial tentang
cara membuat navigasi simple ala AHS yang sebelumnya pernah dipake,tapi karena sekarang sudah ganti lagi,jadi yang lama saya share aja daripada kesimpen di lemari terus :3 hehe..
tujuan share ini apa ya??
hmm.. ada yang minta di ajari buat navigasi simple kayak gini tuh,ya sekalian bagi-bagi trik gratis gitu..
makanya bro,tetap stay tune di sini ya,nantikan update artikel yang berkualitas :3 *sedikit bercanda*
untuk yang penasaran sama demonya silahkan di lihat aja langsung :
Demo
udah tau kan?? langsung ke tutorialnya.. simak baik-baik..
AHSBar CSS Design
udah melihat demonya kan?? oke sekarang saya akan mengajari bagaimana cara membuatnya,simple aja kok sebenarnya..
CSS
#AHSbar{background-color: #fff;border-bottom:5px solid #c0392b;box-shadow:0px 1px 2px rgba(0,0,0,0.3);height:40px;width:100%;position:fixed;top:0;left:0;z-index:999;overflow:hidden;}#AHShelp,#AHSmenu2{margin:0 auto;width:100%;max-width:1050px;}.AHS-connect{width:252px;float:left;margin:-3px 20px;padding:0px;height:34px;}.AHS-connect li{float:left;}.AHS-connect li a{display:block;width:34px;height:34px;line-height:40px;outline:none;margin:0 2px;position:relative;text-align:center;color:#c0392b;}.AHS-connect li a:hover{-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out;color:#393939;margin-top:-5px;}.AHSlogo{float:left;background:#fff;}.AHSlogo img{margin:-3px auto;opacity:.3}.AHSlogo img:hover{margin:-3px auto;opacity:1;transition:all 1.4s ease-in-out;-webkit-transition:all 1.4s ease-in-out;-moz-transition:all 1.4s ease-in-out;}
HTML
<div id='AHSbar'>
<div id='AHSmenu'>
<div id='AHShelp'>
<div class='AHSlogo'>
<a href='#'><img alt='AH-SHARED' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF_2dEudOhJHzZ2007l2CzXo5IBppt1Bzv-VvC8VOECgYsDl9If55FCFzd80Dy3GCwF_6QIlYRIvufrM0YuOHiSb0qOIjhIoTukV4rLEMFsWMMyaOlWkz2OqO-ZeJMSLe3k9XBPbPuqKhn/s1600/AHS-logo.png' style='padding:0px;' title='Home'/></a></div>
<div class='AHS-connect'>
<ul><li><a href='http://www.facebook.com/id-fb' rel='nofollow' target='_blank' title='Facebook Author'><i class='icon-facebook-sign'></i></a></li>
<li><a href='https://twitter.com/id-twitter' rel='nofollow' target='_blank' title='Twitter Author'><i class='icon-twitter-sign'></i></a></li>
<li><a href='https://plus.google.com/id-gp' rel='nofollow' target='_blank' title='Google+ Author'><i class='icon-google-plus-sign'></i></a></li>
<li><a href='#' onclick='prompt("My Skype ID:","user-skype")' rel='nofollow' title='Skype Author'><i class='icon-skype'></i></a></li>
</ul>
</div>
</div>
<div id='AHSmenu2'>
<div id='search'>
<form action='#url-tujuan-search' id='id-cse'><input name='cx' type='hidden' value='id-unik-cse'/><input name='cof' type='hidden' value='FORID:10'/><input name='ie' type='hidden' value='ISO-8859-1'/><input name='q' onblur='if (this.value == "") {this.value = "Search Something...";}' onfocus='if (this.value == "Search Something...") {this.value ="";}' size='30' type='text' value='Search Something...'/>
</form>
</div>
</div>
</div>
</div>
Cara Memasangnya gimana???
- saya anggap sudah masuk blogger
- sekarang copy kan kode
CSS
nya ke atas kode </b:skin>
- lalu,kode
HTML
nya taruh diatas kode <body>
- bila,kode
<body>
tidak ada maka,anda hanya perlu cari kode <body
saja,gunakan CTRL+F untuk memudahkan pencarian
- silahkan ganti gambar yang ada(ukurannya sekitar 70x50) dan tanda # dengan url tujuan sobat,juga sekalian ganti yang bertuliskan
id-gp
,id-twitter
,id-fb
,user-skype
,#url-tujuan-search,dan id-cse
sobat
Selamat mencoba..
Oke,tutorial hari ini sampai sini dulu ya,,byee..