IKLAN
Kontak Saya
300x250
Selamat Datang Di BiriBisi
Page Hits Counter

Senin, 07 Agustus 2017

Cara Menggabungkan Kotak Pencarian Dengan Menubar - BiriBisi


Tema Minimalis - BiriBisi
Tampilan tema (template) yang bersih dan menarik adalah tampilan yang diidam-idamkan oleh para bloger untuk blog-blog mereka,
karena tampilan tema bagi bloger bisa dibilang merupakan cerminan dari kepribadiannya yang cerdas, sederhana, dan tidak mau ribet. Baca juga Cara Memasang Menubar Untuk Blog.

Sebagai perbandingan anda bisa melihat tampilan halaman beranda (home) blog-blog yang terkenal. Mereka pada umumnya memiliki tampilan tema yang simpel, bersih, dan menarik, bahkan kebanyakan website yang terkenal mempunyai halaman beranda yang berpenampilan minimalis dan menarik, seperti tampilan situs pencarian google.com misalnya.

Disamping itu, tampilan tema yang bersih dan menarik juga bisa membuat para pengunjung blog terkesan dengan blog anda, sehingga akan memberi nilai tambah bagi blog anda, apalagi jika blog anda penuh dengan konten-konten yang menarik dan berbobot. Bisa anda bayangkan ribuan pengunjung dalam setiap harinya akan memadati blog anda. Amin!

Membangun sebuah situs dari awal sangat nembutuhkan kesabaran dan keuletan, apalagi jika anda berawal dari orang yang tidak mengerti tentang blog sama sekali, seperti saya misalnya. Untuk membenahi tanpilan halaman berandanya saja memerlukan waktu berbulan-bulan, itupun masih belum sesuai dengan keinginan, bahkan sampai saat ini.

Belum lagi, blog yang secara terus-menerus harus diisi dengan konten-konten. Tentu ini merupakan tantangan yang harus anda hadapi dengan penuh ketelatenan dan kesabaran. Sanggupkah anda menghadapinya? Jika anda termasuk pekerja keras dan menyukai tantangan, maka kesuksesan ada didepan anda. Goodluck!

Fungsi Menubar Dan Kotak Pencarian - BiriBisi



Fungsi utama menubar dan kotak pencarian adalah untuk memudahkan para pengunjung dalam mengakses konten-konten yang terdapat pada sebuah blog dan meningkatkan nilai SEO-nya, baik bagi pengunjung ataupun bagi mesin pencarian. Selain itu, keberadaan keduanya pada sebuah blog juga bisa menjadi pemanis tampilannya, sebab bila sebuah blog diibaratkan sebagai manusia, maka menubar dan kotak pencarian yang diletakkan didaerah header bisa disebut sebagai sebuah kalung yang dapat mempercantik penampilannya.

Terlepas dari kaidah SEO dan tidak SEO, sebetulnya sebuah blog itu bisa saja dibangun kosong dari menubar dan kotak pencarian. Blog anda boleh-boleh saja tampil tampa kedua benda tersebut. Artikel anda tetap bisa diakses dan tetap bisa dibaca tanpa keduanya, karena sesungguhnya fungsi utama dari blog itu untuk menampung konten-konten yang kita buat, macam sebuah buku.

Namun tentu saja bila blog yang anda bangun kosong dari keduanya, maka nilainya sedikit banyak akan berkurang dimata pengunjung dan mesin pencarian, karena pengunjung blog anda akan kesulitan dalam mencari atau mengakses konten yang ada dalam blog anda.

Jika ini sampai terjadi, maka pengunjung enggan lagi mengunjungi blog anda. Blog yang konten-kontenya mudah diakses saja belatak (banyak), ngapain repot-repot masuk ke blog yang kontennya susah diakses, kira-kira demikianlah apa yang ada dalam benak para pengunjung. Hal ini tentu akan membuat nilai yang rendah juga dimata mesin pencarian.

Ingat, mesin pencarian itu akan mengikuti kemauan pengunjung. Seburuk apapun tata bahasa sebuah artikel, misalnya, namun jika pengunjung berebut untuk membacanya, maka artikel tersebut mempunyai nilai yang tinggi dimata mesin pencarian. Karenanya utamakanlah dan usahakanlah untuk membuat konten yang bisa menarik pengunjung blog anda.

Cara Menggabungkan Kotak Pencarian Dengan Menubar - BiriBisi
Pada umumnya kotak pencarian akan terpisah dengan menubar. Banyak diantara bloger meletakkan kotak pencarian jauh dibawah menubar, baik dihalaman utama ataupun disidebar. Namun terkadang kebutuhan menghendaki untuk meletakkannya dibagian menubar. Ini bisa terjadi, karena untuk memanfaatkan ruang dalam blognya seefisien mungkin.

Bagi blog-blog yang sudah sangat terkenal dan mempunyai banyak pengunjung sebuah petak dalam halamannya tentu sangat berharga, sebab petak tersebut bisa dipergunakan untuk menempatkan sebuah iklan, yang tentunya bisa memberikan nilai ekonomi yang cukup lumayan bagi pemiliknya. Karena itu, perlu adanya modifikasi agar semua halaman blognya  bisa dimanfaatkan semaksimal mungkin, tanpa mengurangi nilai SEO dan keindahannya. Baca juga Cara Membuat Kotak Pencarian Keren.

Untuk tujuan itulah saya sajikan kepada anda sebuah artikel yang menjelaskan "tata cara menempatkan kotak pencarian dalam menubar" ini. Berikut ini tahapan-tahapan yang harus anda lakukan:

  • Masuk kedraf blogger anda
  • Pilih "Tata Letak"
  • Klik "Tambahkan Gadget"
  • Pilih gadget "HTML/JavaScrip"
  • Pastekan kode html berikut ini kedalamnya.


<style>
     /*-----Biribisi Horizontal Navigation------*/
     #nav_hr1 {
     width:100%
     }
     #nav_hr1 ul {
     list-style:none;
     margin:0;
     padding:0;
     overflow:none;/*Hide the overflow */
     }
     #nav_hr1 ul li {
     float:left;
     }
     #nav_hr1 ul li a:link,#nav_hr1 ul li a:visited {
     display:block;
     width:337.7px;
     height:10px;
     font-size:12px;
     font-weight:bold;
     color:#ffffff;
     background:#666666;
     text-align:center;
     text-decoration:none;
     text-transform:capitalize;
     padding:6px 0px;
     }
     #nav_hr1 ul li a:hover,#nav_hr1 ul li a:active {
     background:#ff0000;
     -webkit-transition:background .2s ease-in ;
     -moz-transition:background .2s ease-in ;
     transition:background .2s ease-in ;
     }
     #nav_hr1 ul li a:hover{
     -moz-opacity:0.90;
     -khtml-opacity:0.90;
     filter:alpha(opacity=90%);
     opacity:0.90;
     }
     #nav_hr1 ul li a:active {
     -webkit-box-shadow:inset 1px 1px 1px 1px #0000ff;
     -moz-box-shadow:inset 1px 1px 1px 1px #0000ff;
     box-shadow:inset 1px 1px 1px 1px #0000ff;
     color:#0000ff;
     opacity:0.85;
     -moz-opacity:0.85;
     -khtml-opacity:0.85;
     filter:alpha(opacity=85%);
     -webkit-transition:all .2s cubic-bezier .1s;
     -moz-transition:all .2s cubic-bezier .1s;
     transition:all .2s cubic-bezier .1s;
     top:12px;q
     }
     </style>
     <div id="nav_hr1">
     <ul>
     <li><a href="http://www.biribisi.com" >Beranda</a></li>  
<li><a href="http://www.biribisi.com/p/biribisi.html" >Tentang BiriBisi</a></li>
     <li><a href="http://www.biribisi.com/p/blog-page.html" >Kontak Saya</a></li>
     <li><a href="http://www.biribisi.com/p/daftar-isi.html" >Daftar Isi</a></li>      
<style>.cf:before, .cf:after{    content:"";    display:table;}
.cf:after{    clear:both;}
.cf{    zoom:1;}  
 /* Form wrapper styling */.search-wrapper {width: 1357.50px;margin:10px 0;box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);}
/* Form text input */
.search-wrapper input {width: 1145px;height: 12px;padding: 4px;float: left;font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';color: white;border: 0;background: #ff9900;border-radius: 3px 0 0 3px;}
.search-wrapper input:focus {    outline: 0;    background: #666666;    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;}
.search-wrapper input::-webkit-input-placeholder {   color: #fff;   font-weight: normal;   font-style: italic;}
.search-wrapper input:-moz-placeholder {    color: #999;    font-weight: normal;    font-style: italic;}
.search-wrapper input:-ms-input-placeholder {    color: #999;    font-weight: normal;    font-style: italic;}  
/* Form submit button */.search-wrapper button {overflow: visible;position: relative;float: right;border: 0;padding: 0;cursor: pointer;height: 20px;width: 200px;font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';color: white;text-transform: uppercase;background: #ff9900;border-radius: 0 3px 3px 0;text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);}  .search-wrapper button:hover{       background: #e54040;}   .search-wrapper button:active,.search-wrapper button:focus{     background: #c42f2f;    outline: 0; }
.search-wrapper button:before { /* left arrow */    content: '';    position: absolute;    border-width: 8px 8px 8px 0;    border-style: solid solid solid none;    border-color: transparent #d83c3c transparent;    top: 12px;    left: -6px;}
.search-wrapper button:hover:before{    border-right-color: #e54040;}
.search-wrapper button:focus:before,.search-wrapper button:active:before{        border-right-color: #c42f2f;}    
.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */    border: 0;    padding: 0;}   </style><form action="/search" class="search-wrapper cf">        <input type="text" method="get" name="q" placeholder="Cari Artikel? Ketik Disini......!" required="" />        <button type="submit">Telusuri</button>    </form>
  </ul>
    </div>

Keterangan:
1.   #nav_hr1 ul li a:link,#nav_hr1 ul li a:visited {
     display:block;
     width:337.7px;
     height:10px;
     font-size:12px;
     font-weight:bold;
     color:#ffffff;
     background:#666666;
     text-align:center;
     text-decoration:none;
     text-transform:capitalize;
     padding:6px 0px;
     }

width:337.7px = lebar perkolom menubar. Angka 337.7 bisa anda rubah sesuai keperluan anda.

height:15px = tinggi kolom. Yang ini juga bisa anda rubah sesuai keinginan anda.
font-size:14px = ukuran huruf dalam kolom menubar. Bisa dirubah juga
font-weight:bold = ukuran ketebalan hurup. Idem.
color:#ffffff = warna huruf. Kode #ffffff adalah kode warna huruf putih, kode ini saya pergunakan karena backround-nya berwarna hitam. Tujuannya agar tulisannya bisa tampak jelas. Ide
backround:#666666 = warna latar belakang huruf. Kode ini untuk warna hitam agak pucat. Untuk warna yang hitam pekat kodenya #000000. Idem.
Berikut ini saya sajikan untuk anda tabel kode warna html lengkap yang bisa anda pergunakan untuk gonta-ganti warna.





2. <li><a href="http://www.biribisi.com" >Beranda</a></li>  
<li><a href="http://www.biribisi.com/p/biribisi.html" >Tentang BiriBisi</a></li>
     <li><a href="http://www.biribisi.com/p/blog-page.html" >Kontak</a></li>
     <li><a href="http://www.biribisi.com/p/daftar-isi.html" >Daftar Isi</a></li>  

<li><a href="http://www.biribisi.com" >Beranda</a></li>
Ganti alamat ini dengan alamat blog anda. Alamat ini untuk halaman beranda atau home.

<li><a href="http://www.biribisi.com/p/biribisi.html" >Tentang BiriBisi</a></li>
<li><a href="http://www.biribisi.com/p/blog-page.html" >Kontak</a></li>
<li><a href="http://www.biribisi.com/p/daftar-isi.html" >Daftar Isi</a></li>  
Yang tiga ini anda ganti dengan alamat laman anda yang ingin ditampilkan. Berikut ini cara mengambil url laman:


  • Masuk draf blogger anda
  • Pilih menu "Laman"
  • Klik menu "Lihat" yang berada dibawah judul laman. Disitu ada tiga menu, menu "Edit", menu "Lihat", dan menu "Hapus"
  • Lihat alamat lamannya dibagian atas, dikolom dimana anda biasa menuliskan alamat situs / blog saat browsing
  • Copy alamat tersebut

3. Untuk seting menubar sudah selesai. Sekarang mari kita menyeting kotak pencariannya.

/* Form wrapper styling */.search-wrapper {width: 1357.50px;margin:10px 0;box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);}
/* Form text input */
.search-wrapper input {width: 1145px;height: 12px;padding: 4px;float: left;font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';color: white;border: 0;background: #ff9900;border-radius: 3px 0 0 3px;}


Tulisan warna merah disini artinya adalah:
  • width: 1357.50px = Lebar keseluruhan kotak pencarian. Angka 1357.50px ini jika perlu, bisa anda rubah.
  • margin:10px 0 = batas kotak pencarian. Angkanya juga bisa dirubah
  • width: 1145px = lebar kolom pengetikan dalam kotak pencarian. Idem
  • height: 12px  = tinggi kolom pengetikan dalam kotak pencarian. Idem
  • font: bold 16px = ukuran huruf tebal. Idem
  • color: white  = warna huruf. Disini saya pakai warna putik agar tampak jelas, karena warna backroundnya oren
  • background: #ff9900 = warna latar belakang. Tanda #ff9900 adalah untuk warna orange

4. /* Form submit button */.search-wrapper button {overflow: visible;position: relative;float: right;border: 0;padding: 0;cursor: pointer;height: 20px;width: 200px;font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';color: white;text-transform: uppercase;background: #ff9900;border-radius: 0 3px 3px 0;text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);}  .search-wrapper button:hover{       background: #e54040;}   .search-wrapper button:active,.search-wrapper button:focus{     background: #c42f2f;    outline: 0; }

Tulisan warna merah disini artinya adalah:
  • height: 20px = tinggi tombol search dalam kotak pencarian
  • width: 200px = lebar tombol search dalam kotak pencarian
  • font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma = ukuran huruf tebal dan jenis hurufnya
  • color: white = warna huruf. Disini saya juga pakai warna putih agar tulisannya menjadi jelas, karena warna latar belakangnya orange
  • text-transform: uppercase = bentuk huruf akan berupa huruf besar semua kendati yang anda tuliskan hurup besar dan kecil atau huruf kecil semua
  • background: #ff9900 = warna latar belakang

Dalam setingan menubar dan kotak pencarian disini saya sengaja membuat bentuk garis yang tipis dan warna keduanya sengaja dibuat berbeda agar kesan tipisnya tetap terjaga, karena jika keduanya berwarna sama, maka akan terkesan lebih tebal. Dan itu yang saya hindari disini. Namun jika anda punya selera garis tebal, maka tinggal ubah saja ketebalannya, dengan cara menambah angka-angkanya.

Perhatian!
Jangan sampai anda membuang atau merubah kode html tersebut, sebab jika anda melakukannya, walaupun cuma membuang satu titik saja, maka hasilnya akan berbeda, kecuali yang telah saya sebutkan diatas, dan juga kecuali jika anda sudah ahli. Baca juga Cara Membuat Link Internal Dan Link Eksternal.

Demikianlah penjelasan mengenai cara menggabung kotak pencarian dengan menubar yang bisa saya sampaikan kepada anda. Senoga bermanfaat. Amin!

Comments
0 Comments

Tidak ada komentar: