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

Sabtu, 21 Januari 2017

Cara Memasang Menubar Untuk Blog



Sebuah blog sebaiknya mempunyai daftar menu, yang tujuannya untuk memudahkan para pengunjung dalam mencari konten-konten yang ada di dalamnya.


Bagi blog-blog yang sudah lama di buat, biasanya mempunyai konten yang cukup banyak. Dan konten-konten itu tentu tidak mungkin di tayangkan seluruhnya di halaman beranda (home), walaupun cuma judulnya saja apalagi bila blog tersebut mempunyai banyak label. Lihat Cara Memasang Label Untuk Postingan.

Coba anda bayangkan jika sebuah blog mempunayai tiga jenis label saja dan masing-masing label berisi 50 artikel, maka jumlah total artikel blog tersebut adalah 150. Dan 150 artikel tersebut tidak mungkin di tayangkan seluruhnya di halaman berandanya, walau cuma berbentuk judul-judulnya saja, belum lagi halaman-halaman blog yang lainnya seperti halaman kontak kami, halaman profil, dan halaman-halaman lainnya.




Definisi dan fungsi menubar


Karena itu di butuhkan sebuah daftar menu yang bisa mewakili penayangan conten-conten yang ada di dalam blog tersebut, sehingga para pengunjungnya dapat mencari konten-konten tersebut dengan sangat mudah, sebab sudah di kumpulkan dalam satu bar. Itulah kenapa daftar menu itu di sebut dengan sebutan menu bar, yang bisa kita terjemahkan dengan "baris menu" dan biasanya di letakkan di bagian atas halaman sebuah blog.


Menubar adalah sebuah garis mendatar berbentuk balok yang berisi daftar menu ataupun sub menu dari blog tersebut dan pada umumnya di letakkan di bagian atas halaman sebuah blog.


Secara teoritis memang mengharuskan menu bar itu di letakkan di bagian atas halaman sebuah blog, karena bagian itu mudah di lihat oleh mata pengunjung. Dan juga penempatannya di situ bisa berguna sebagai hiasan yang akan mempercantik tampilan sebuah blog.


Sedangkan secara logika boleh-boleh saja menu bar itu di letakkan di bagian mana saja dalam halaman blog, bisa di bagian sidebar, bisa di bagian footer, atau di bagian lainnya. Terserah anda mau menempatkannya di mana, yang penting di dalam blog anda ada sebuah kelompok menu yang bisa mewakili penayangan judul-judul halaman blog, baik halaman postingan atau pun halaman statis.


Memilih widget menubar terbaik


Berdasarkan apa yang telah saya sebutkan di atas, maka pemilihan widget menubar terbaik adalah harus di dasarkan pada widget menubar yang bisa di tempatkan di mana saja di dalam blog kita.


Jadi nantinya kita bisa leluasa untuk menempakan dan memindahkannya dimanapun kita mau tanpa kesulitan sama sekali dengan proses yang tidak memakan waktu yang lama, seperti widget yang akan saya bagikan untuk anda. Karena dengan widget ini kita hanya cukup masuk ke menu tata letak dan tanpa perlu mengedit template segala.


Memasang widget menubar

Baiklah kita langsung saja menuju ke pokok tujuan dari pembahasan dalam artikel ini, yaitu memasang widget menubar. Baca juga Cara Memasang Tombol Share Melayang disini. Untuk memasang widget menubar ini anda tidak memerlukan banyak langkah, karena anda hanya perlu memasangnya di widget Html/JavaScript, kemudian terserah mau anda tempatkan dimana. Berikut ini urutan langkahnya:


#1. Masuk ke dashbord blog anda


#2. Pilih menu "Tata Letak", lalu klik tambahkan gadget


3. Pikih widget Html/JavaScript, lalu pastekan script berikut ini:


<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:224.5px;
     font-weight:bold;
     color:#ffffff;
     background:#ff0000;
     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;
     }
     </style>
     <div id="nav_hr1">
     <ul>
     <li><a href="http://www.biribisi.com" >Beranda</a></li>
     <li><a href="#" >Profil</a></li>
     <li><a href="#" ></a>Galeri</li>
     <li><a href="#" >Daftar Isi</a></li>
     <li><a href="#" >Privasi</a></li>
     <li><a href="http://www.biribisi.com/p/kontak.html" >Kontak</a></li>
     </ul>
    </div>

Keterangan:


√. width:224.5px; angka ini menunjukkan lebar dari tiap-tiap kotak, sehingga lebar keseluruhannya mencapai 1347px, sesuai dengan lebar halaman posting blog saya ini. Anda bisa merubah angka tersebut sesuai selera anda, namun saran saya sebelum anda mengotak-atik widget ini sebaiknya anda coba dulu apa yang sudah jadi ini untuk mengetahui bentuknya, sehingga nantinya anda tidak mendapatkan kesulitan untuk merymubahnya.


√. #ffffff ini adalah kode untuk warna putih. Anda bisa menggantinya sesuai selera anda, begitu juga kode-kode lainnya yang saya beri warna biru.


√. Alamat url blog <a href="http://www.biribisi.com" >Beranda</a> dan tanda pagar "#" ini harus anda ganti dengan alamat halaman statis anda atau alamat url blog anda, jika untuk tujuan halaman beranda, seperti contoh di atas, yaitu  <a href="http://www.biribisi.com" >Beranda</a>


√. Contoh url halaman statis adalah seperti

<a href="http://www.biribisi.com/p/kontak.html" >Kontak</a>

√. Kontak (>Kontak</a>) dan yang lainnya bisa anda ganti sesuai nama halaman statis yang anda buat


Demikianlah panduan dan tutorial cara memasang menubar yang bisa saya sajikan untuk anda. Semoga bermanfaat. Amin!





Comments
0 Comments