• About
  • Contact
  • Disclaimer
  • Sitemap
  • Privacy Policy
  • TOS
  • Kode warna
BOS GO BLOG
  • Home
  • Tips Desain Blog
  • Tips SEO
  • Tips Adsense
  • Tips Lain
  • My Diary
  • Banking
  • Informasi
Home » blog » Cara Membuat Navigasi Kotak Pencarian

Cara Membuat Navigasi Kotak Pencarian

Posted by bosgoblog
» blog
» 5/16/2015

membuat navigasi kotak pencarian
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0K9aeELbTEslDif4IPctBIYGuJzlB-1NFTMP1l5gr_LqSEqZSM5eAnj7NZbqxiTQglr_4mw6yB5ns-pKn5BAJXdhIQhOji5j5EcoPCdjWYa0KWzkWLDyhQWm5pLIZg39-X1HHBEKNGIVP/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.

Terima Kasih telah berkunjung :)
Silahkan tinggalkan komentar yang relevan

Newer Post
Older Post
Home
Subscribe to: Post Comments (Atom)

Search Here

Formulir Kontak

Name

Email *

Message *

Popular Posts

  • Manfaat Blogwalking
      Manfaat Blogwalking - pasti para blogger sering mendengar kata Blogwalking. Karena ini merupakan salah satu kebiasaan para blogger. se...
  • Cara Mengaktifkan Internet Banking BRI
    Cara Mengaktifkan Internet Banking BRI - Kali ini admin Bos Go Blog akan membagikan info bagaimana cara mengaktifkan internet banking di BR...
  • Cara Memasang Iklan Adsense
    Cara Belajar Memasang Iklan Adsense - menjadi Publisher Adsense merupakan idaman para blogger. pundi - pundi dollar yang sangat menggi...
  • Anjuran Mengganti Sikat Gigi
    Anjuran Menganti Sikat Gigi -  Sikat Gigi adalah salah satu kebutuhan primer yang digunakan oleh manusia di seluruh dunia. Seusai fungsinya...
  • 5 Fakta Personil BTS Yang Mungkin Kamu Belum Tahu
    BTS adalah Boy Band yang berasal dari Korea Selatan yaitu singkatan dari Bangtan Boys atau Bulletproof Scouts atau Bangtan So Nyun Dan. Mer...

Labels

  • adsense
  • Banking
  • blog
  • diary
  • informasi
  • k-pop
  • kesehatan
  • lainnya
  • seo
  • ulasan

ads

Followers

Lirik Lagu BGB

Random Posts

    Copyright © BOS GO BLOG. All rights reserved. bos-goblog.blogspot.com.
    New Thesis SEO V3. Designed by Bos Go Blog. Original Theme: Thesis SEO. Powered by Blogger