Kali ini saya mau berbagi cara tentang pengalaman saya membuat menu bar dan sub menunya pada blog. Sebenarnya sudah ada versi defaultnya dari blog itu sendiri, akan tetapi nampaknya banyak yang tidak suka/jarang bloger2 yang masang cara itu bahkan yang baru bermain blog saja ingin rasanya pakai yang keren langsung wkwkwkk
Tetapi gak masalah, itu tergantung dari kalian sendiri pilih yang mana saja boleh, Asal gak ribet. Bener gak? Wkwkwk
Tapi sebenernya semuanya mudah kok, oke ngomong2 soal menu default tadi . kita langsung bahas saja
Pertama-tama kalian bisa langsung login ke blog, lalu pilih tata letak, kemudian pilih tambahkan gagdet.
Setelah itu kalian bisa klik HALAMAN
Setelah klik halaman kalian langsung tambahkan link eksternal sesuai keinginan kalian, Paham kan?
Setalah kalian menambahkan link, tekan selesai
Nah setelah itu kalian bebas mau naruh gadget tadi disamping atau di atas
Tampilan di atas (mendatar) dan di samping (menurun)
Kan itu backgroundnya masih polos alias mengikuti background template blog kalian, terus gimana cara mengubah warnanya?
Kalian bisa pergi ke toko bangunan untuk membeli cat warna sesuai keinginan kalian,bilang saja “beli cat buat blog”, terus kalian cat background tadi dengan halus dan merata, tapi jangan lupa bayar cat tadi ya WKWKWKW , Bercanda kok biar gak tegang hehehe, ok lanjut serius
Kalian ke menu blog, klik tema,klik sesuaikan, pilih lanjutan, terus pilih latar tab, nah sekarang sesuaikan warna background sesuai keinginan kalian, mudahkan
Kalau sudah selesai klik terapkan ke blog, dan liat hasilnya kerenkan, nah ini versi default dari blog sendiri, sekarang lanjut berikutnya;
Cara buat menu dan sub menu
Tadikan sudah kita bahas yang versi default dari blog, kali ini bahas yang versi agak kerenan dikit saja ya jangan banyak2 nanti batuk wkwkkw, dan ini juga sangat mudah kok, bahkan yang baru maen blog 1 hari langsung bisa xixixi
Pertama tama login dulu ke blog kalian, lalu pilih tata letak, klik tambhkan gadget, lalu klik HTML/JavaScript, Kemudian kalian copy kode di bawah ini
<style>
#menunavigasihorisontal {
background: #38761d;
width: 100%;
color: #000000;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px; }
#bb2nav {
margin: 10;
padding: 10;}
#bb2nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;}
#bb2navli {
list-style: none;
margin: 0;
padding: 0;}
#bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
color: #FFF;
display: block;
font:bold 14px Georgia, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;}
#bb2nav li a:hover, #bb2nav li a:active {
background: #2E9AFE;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;}
#bb2nav li {
float: left;
padding: 0;}
#bb2nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;}
#bb2nav li ul a {
width: 140px;}
#bb2nav li ul ul {
margin: -25px 0 0 161px;}
#bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
left: -999em;}
#bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
li li li.sfhover ul {
left: auto;}
#bb2nav li:hover, #bb2nav li.sfhover {
position: static;}
#bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 14px Georgia, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;}
#bb2nav li li a:hover, #bb2nav li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
#bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 14px Georgia, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;}
#bb2nav li li li a:hover, #bb2nav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
</style>
<div id='menunavigasihorisontal'>
<ul id='bb2nav'>
<li>
<a href='Link'> Nama Menu Yang Tampil Di Blog </a>
</li>
<li>
<a href='Link'>Nama Menu Yang Tampil Di Blog</a>
<ul>
<li><a href=’Link’ > Nama Sub Menu Yang Tampil Di Blog </a></li>
<li><a href='Link’ >Nama Sub Menu YangTampil Di Blog</a></li>
</ul>
</li>
</ul>
<li>
</li></div>
Keterangan :
Warna merah bisa kalian ganti dengan link yang ini kalian masukan
Warna biru bisa kalian ganti dengan nama yang ingin kalian tampilkan di menu dan submenunya, dan hasilnya seperti ini
Cuma 2 ya karena ini hanya sekedar contoh saja, lalu bagaimana jika ingin menambahkan menu dan submenunya agar lebih banyak
Kode tambahkan menu (taruh tepat di bawah menu lainnya)
<li>
<a href='Link'> Nama Menu Yang Tampil Di Blog </a>
</li>
Kode tambahkan submenu (taruh tepat di bawah submenu lainnya)
<li><a href='Link’ >Nama Sub Menu YangTampil Di Blog</a></li>
Setelah itu klik simpan dan liat hasilnya ok kan
Sangat mudah kan cara membuat menu dan submenu pada blog, intinya kita harus teliti bener jika ingin work semua jangan buru2 maen santai aja hehehe
Demikian cara membuat menu dan submenu pada blog yang bisa saya sampaikan kepada kalian, dan jika ada kesalahan dalam penulisan mohon di maafkan karena disini kita sama2 belajar
Semoga bermanfaat bagi kita semua, dan jika ada yang kurang paham monggo di tanyakan dan jangan sungkan2 untuk memberi masukan, karena ini sangat berguna buat kemajuan blog ini.
Terima kasih juga sudah berkunjung kesini dan jangan bosen2 ya
Sekian dulu dan terima kasih,
Siplah, dimanapun ilmu itu bermanfa'at. Tergantungkita mau di bawa ke arah mana itu ilmu, PUTIH / HITAM... Terimakasih
BalasHapus