Cara Membuat Top Menu Plus Kotak Pencarian di Atas Header
Cara Membuat Navigasi Menu Plus Kotak Pencarian (Search Box) di Atas Header Blog.TIPS desain ini lanjutan tips sebelumnya tentang navigasi menu di atas header blog. Kali ini ada plusnya, yakni navbar menu plus kotak pencarian. Contohnya seperti topmenu di atas blog CB ini.
1. Blogger Dashboard >> Template >> Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>
/* CSS FOR SEARCH BAR STARTS */
#search{width:330px; border:none;background:transparent;height:32px;padding:0;text-align:left;overflow:hidden;border-left:1px solid #BBB}
#search #s{width:70%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:0}
/* CSS FOR MENU BAR STARTS */
.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 980px;
background-color: #eeeded; -webkit-box-shadow: 0 10px 10px #666;
}
.shadowblockmenu ul{
border: 1px dotted #BBB;
border-width: 0px 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}
.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: none;
color: black;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
}
.shadowblockmenu li:nth-of-type(1) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(2) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(3) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(4) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(5) a{
padding-left:25px;
}
.shadowblockmenu ul li a:hover{
color: yellow;
}
Note: sesuaikan lebarnya dengan lebar header blog Anda (angka berwarna merah).
3. Copas kode berikut ini di atas kode <div id='header-wrapper'>
<div class='shadowblockmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Sitemap</a></li>
<li><div class='topsearch' style='float: right'>
<div class='clerfix' id='search'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search here...";}' onfocus='if (this.value == "Search here...") {this.value = ""}' type='text' value='Search Here...'/>
<input class='buttonsubmit' name='submit' type='submit' value='Search'/>
</form>
</div>
</div>
<div style='clear:both;'/></li>
</ul>
</div>
NB:
- Kode header tiap template mungkin berbeda. Untuk pengguna New Johny Wuss, simpan kode tersebut di atas kode ini:
<div class='outerpic-wrapper'>
<div class='header-wrapper'>
- Ganti nama menu dan linknya dengan "kepunyaan" Anda.
4. Save Template!
Sudah.... beres.... segitu doang kok cara membuat top menu plus kotak pencarian di atas header.
Good luck and happy blogging!
Sumber
Makasih sob untuk informasi tutornya :)
BalasHapushttp://goo.gl/I7YrK4
Nice Info Gan, Terimkahasih Banyak
BalasHapushttp://goo.gl/mMn4uz
manfaat sekali gan artikelnya
BalasHapushttp://goo.gl/xC7jgJ
Terimakasih informasinya :)
BalasHapushttp://bit.do/3eEL
WAYANG POKER BANDAR POKER TERPERCAYA DAN TERBESAR DI INDONESIA
BalasHapusPermainan 100% fair play ( Player vs Player ) No Bot & Admin !!!
# Minimal Deposit ; 20.000
# Mininmal Withdraw : 40.000
Proses transaski yang SUPER CEPAT dengan dilayani cs kami yang ramah siap membantu anda selama 24 jam nonstops.
* Proses Deposit & Withdraw Cepat ( 1-2Menit )
* Sistem keamanan terpecaya
* Bandar Poker Online Terpecaya
* Bonus Cashback 0.5%
* Bonus Referral 20%
* Deposit & Withdraw Nonstop 24/7
* Hadiah Jackpot terbesar Jutaan Rupiah
Untuk info lebih lanjut hubungi Customer Service kami :
Telp : +85512804273
Skype : wayangpoker
BB : 2BE326CC
Facebook : Wayangpoker
Berita Terupdate hariini : https://birdnewscom.blogspot.co.id/2017/10/pencuri-ini-mencuri-di-warung-milik.html
https://birdnewscom.blogspot.co.id/2017/10/karena-melawan-disaat-ingin-dirampas.html
Poker | AduQ | BandarQ | DominoQ | Capsa Susun | Bandar Poker
BalasHapus____________________________________
BONUS REFF 20% SEUMUR HIDUP
BONUS TURN OVER PALING BESAR 0.5% !!
Kelebihan Seniqq.com yang digemari masyarakat Indonesia:
Minimal Depo, Hanya Rp. 20.000
Jackpot hingga Jutaan rupiah
Proses Depo dan WD SUPER CEPAT
Bisa dimainkan di Android, Iphone dan Ipad
Pelayanan CS 24 jam yang Ramah dan Profesional
| BCA | Mandiri | BNI | BRI | Danamon |
100% TANPA ROBOT Real Player vs Player
Segera daftarkan diri anda sekarang juga ^^
Klik Register
goo.gl/yig6cA
Untuk info selengkapnya silahkan hubungi kami di :
pelayanan terbaik kami
LIVECHAT
a
FACEBOOK : SENI QQ
BBM : 561A1388
YmaiL : csseniqq@yahoo.com
Mari bergabung dengan kami SENI99
Partner sejati untuk permainan kartu anda .^^.
agenqq
agen qq
domino 99
agen bandarq
dominoqq
agen domino
domino qq
bandarq
aduq
agen poker
poker online