Posted by Cewek Jaman Now
Cara Membuat Navigasi Kotak Pencarian - Sekali lagi Bos Go Blog akan memberikan postingan tentang membuat Navigasi. karena Bos Go Blog pernah mengemukakan bahwa Navigasi sangat penting untuk blog. Kali ini Bos Go Blog akan memberikan Tips Cara Membuat Navigasi Kotak Pencarian. Cara nya gampang dan banyak, ada yang mengambil langsung dari blogger dan ada yang menggunakan kode sendiri.
Cukup basa - basi nya langsung saja simak cara nya sebagai berikut.
Cara 1
1. Buka Dashboard Blog anda.
2. Masuk ke menu Layout => Add Gadget
3. Pilih Search Box kemudian klik Save
Namun bila anda memakai navigasi kotak pencarian yang telah disediakan Blogger terkadang error dan tidak cocok dengan template anda. jika hal itu terjadi gunakan lah cara kedua.
Cara 2
1. Buka Dashboard Blog anda.
2. Masuk ke menu Layout => Add Gadget
3. Copy kan kode dibawah ini.
#Kode 1
<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel"/></form><style>
#s { margin: 0 auto; -webkit-appearance: none; -moz-appearance: none; padding: 12px 48px 12px 12px; -webkit-border-radius: 200px;-moz-border-radius: 200px; border-radius: 200px;
width: 200px;height: 16px;color: #3a4449;border: none;outline: none;-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);position: relative;z-index: 2; background: #fff url(http://2.bp.blogspot.com/RdCoLqn34t4/UDeUFSTJ17I/AAAAAAAAKqg/GxdClZ5RjXg/s1600/Search.png) center right no-repeat;} #s::-webkit-input-placeholder, #s:-moz-placeholder {color: #607078;}</style>
#Kode 2
<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(http://2.bp.blogspot.com/-mOcbojPwG1U/UOiqgUK1LwI/AAAAAAAAAak/ZwmGebAuDfU/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Cari...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div></span>
#Kode 3
<form action="http://bos-goblog.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
Keterangan :
Warna Merah : Bisa anda ganti dengan kata - kata anda sendiri atau tidak juga boleh.
Warna Biru : Ukuran kotak pencarian
Warna Ungu : Ganti dengan Url Blog anda
Silahkan anda pilih sendiri kode mana yang sesuai selera untuk blog anda. dan itulah tips Cara Membuat Nevigasi Kotak Pencarian yang dapat Bos Go Blog berikan. Semoga bermanfaat untuk para blogger semua. dan ingatlah blog yang baik memiliki Navigasi yang baik.
