Membuat MENU di BLOG

MEMBUAT MENU DI BLOGGER

Untuk menghemat ruang di dalam blogger adalah dengan membuat menu, yang biasanya terletak di atas


Pembuatan menu ini berlaku untuk semua template blogger, dikarenakan kode terlampir di bawah ini akan membuat area widget sendiri, yang terletak di bawah head.


tujuannya adalah untuk mempercepat pengunjung blog guna menemukan lebih cepat target yang didinginkan.
secara umum, biasanya menu tersebut berisi Home,Profile,kategori,contact me dll.
ikuti langkah berikut ini untuk membuat menu tersebut.
caranya:
Buka rancangan/edit html/coba cari kode ]]></b:skin> kemudian copy kode css di bawah ini tepat diatasnya.

#menuq{ font-family: Verdana; padding:10px;}

.menuq a { color:yellow; border:1px #EDEEF0 solid; padding:5px; text-decoration:none;}

.menuq a:hover {color:red; border:1px #000000 solid; text-decoration:none;}

.menul .widget { border-bottom-width: 0;}

Selanjutnya carilah kode di bawah ini

<div id='header-wrapper'>

<b:section .......dst>

</b:section>

</div>

lalu copy kode di bawah ini tepat di bawah kode di atas..

<div id='menuq'><br /> <b:section class='menuq' id='menul' preferred='yes'/> </div>

apabila telah selesai kemudian simpan


Buka menu setting,(Rancangan) pada page element, coba perhatikan dibawah head akan ada area widget baru... langkah selanjutnya klik add(tambah) widget , dan pilih HTML/JavaScript, kemudian copy kode di bawah ini ke dalamnya html java script tersebut.

<div id="menuq"><style type="text/css">

#menuq {

margin:0; padding:10px;}

#menuq a{

display:0;width:100px;border-style:dashed;border-width:1px;border-color:#996600;background-color:#CCCC99;color:#CC6600;font-family:Arial;font-size:12pt;font-weight:bold;padding:5px; text-decoration:none;}

#menuq a:hover{

border-width:1px;border-color:#663300;background-color:#666666;color:#00FFFF;border-Bottom:2px #663300 solid;text-decoration:none;}

</style>

<div id="menuq"><a href="http://protonicatv.blogspot.com" target="_self">Home</a>

<a href="http://protonicatvr050.wordpress.com/" target="_blank">Wordpress</a>

<a href="http://www.facebook.com/roshoprasetyo" target="_blank">Facebook</a>

<a href="http://http://www.blogger.com/profile/02535293399233491827" target="_self">Profile</a>

<a href="http://r050prstyo@yahoo.com" target="_blank">Email</a></div>

Pada tulisan target _blank: berarti pada saat klik menu tersebut,link akan terbuka pada tab Browsing baru.(open New Tab).


Ganti link diatas sesuai keinginan anda untuk disesuaikan dengan menu tersebut..
contoh:
menu profil:http://www.blogger.com/profile/02535293399233491827 ganti dengan alamat/link anda.
setelah selesa konfigurasi yang anda atur,klik simpan,lihat blog


jika ingin mengganti font, maka tinggal merubah font family-nya yang ada di
#menuq { font-family:.....(Verdana, Arial, Times New romans)
sedangkan untuk warna font, anda dapat mengubah warna tersebut dengan melihat Kode Warna script HTML
.menuq a { color:...(yellow, blue atau #fff dll.)
.menuq a:hover {color:...(red, blue atau #fff dll)
untuk menambah warna background, tambahin kode
.menuq a { background:...(yellow, red dll.) atau
.menuq a:hover { background:...(yellow, red dll.)
warna tersebut berdasar kode seperti: #CCCC99 = abu2 #666666 = kuning dll

menu tersebut adalah menu singgle horizontal, sedang untuk membuat menu Horizontal droptdown, ikuti langkah CARA MEMBUAT MENU DROPTDOWN DENGAN MENGGUNAKAN CSS MENU GENERATOR 3.2.
atau jika  ingin berkreasi sendiri, anda dapat menggunakan Software pembuat Menu seperti
Css menu  Generator 4.1 yang dapat kamu  Download Disini

semoga keterangan diatas dapat dimengerti dan bermanfaat, selamat mencoba.

baca juga:

TIPS BLOGGING:
Cara Intall Templete HTML Tips Blogging
CARA POSTING DI BLOG ( Blogger Pemula ) 
Meletakkan Kotak form pencarian (Search) di kotak Menu ... 
Kreasi Tombol Readmore [Kode HTML] 
Mengganti Header dengan Gambar Gambar Header
Horizontal Menu Pul Dropt down type Rounded Corner
Horizontal Menu Pul Dropt down type Rounded Corner...
Verttikal Rounded Corner Tips Blogging
Horizontal Menu Pul Dropt down type Rounded Corner... 
Horizontal Pull Dropt Down Menu 
Combo BOX Menu
Vertical Menu, 
Cara Menerapkan Link Pada Image/Gambar
Free Template Designer
KODE WARNA HTML Colour ...
Chating Yahoo Massanger Melalui Blog 
Menambah Yahoo Massanger Blogger Post
KODE WARNA HTML Colour for websites HTML
Membuat Border scroll kotak artikel atau gambar Po...
Burung Twitter terbang Di Blog Tips Blogging
MEMBUAT MENU ROUNDED CORNER Tips Blogging
Cara Menambah Elemen Persis Di bawah Header
Membuat Text Berjalan / Rolling text dengan ..
Berbagai cara menghilangkan Navigasi Bar dan Auto ... 
Kode Warna HTML web dan blog Tips Blogging
CARA MEMBUAT MENU DROPTDOWN DENGAN MENGGUNAKAN CSS GENERATOR 3..
DAPATKAN UANG DENGAN MENYELA WAKTU ANDA
Membuat Menu Dropdown Pull Di Blogg
Cara Membuat Account Paypal 
Protonica Tv & Computer: Membuat MENU BLOG
Membuat MENU di BLOG