Cara Membuat Simple Navbar Blogger With Social Button ~ AH-SHARED

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 HTMLnya 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