Selamat pagi semua kali ini kami akan menyampaikan trip gemana cara Anda untuk mengedit blog dengan mudah termasuk menu dropdown. Bila ingin mengikutinya silahkan ikuti langkah langkah berikut ini
1. Anggap Anda telah memiliki blog standar dan email dari Gmail.com yaitu
silahkan dialog menu
masuk ke Blog seperti berikut ini
2. Setelah
diisi dialog form tersebut di atas klik masuk dan akhirnya muncul dialog
berikut ini
4. Setelah
Anda klik Open link in new tab akan muncul dialog berikut ini
Gbr. 4
5. Dengan munculnya dialog tersebut di atas silahkan klik close
Gbr. 5
6. Setelah Anda cloce maka akan muncul dialog berikut ini
7. Dengan dialog menu tersebut diatas langkah berikutnya pilih menu template yang nantinya muncul gambar berikut ini;
Gbr. 7
8. Pada gambar dialog tersebut di atas silahkan Anda Klik Custum dan muncul gambar berikut ini
Gbr. 8
9. Dari Menu-menu template tersebut diatas silahkan atur sedemikian rupa sesuai dengan selera Anda dari satu coloum sampai tiga coloum
10. Sedang untuk membuat menu dropdown silahkan pilih menu Advanced terus pilih add css sperti berikut ini
Gbr. 9
11. Dengan munculnya dialog tersebut diatas silahkan masukkan listink dibawah ini kedalam kotak teks tersebut
/* ----- NAVBAR MENU ----- */
#NavbarMenu {width: 100%;height: 20px;background:#09B309 top;color: #09B309;margin: 0 auto 0;padding: 0;font: bold 12px Arial, Tahoma, Verdana;border-top: 1px solid 09B309;border-bottom: 1px solid #09B309;}
#NavbarMenuleft {width: 680px;float: left;margin: 0;padding: 0;}
#nav {margin: 0;padding: 0;}
#nav ul {float: left;list-style: none;margin: 0;padding: 0;}
#nav li {list-style: none;background: transparent url('#') repeat-x top left;margin: 0;padding: 0;}
#nav li a,
#nav li a:link,
#nav li a:visited {color: #09B309;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: bold 12px VERDANA;}
#nav li a:hover,
#nav li a:active {background:#09B309;color: #3D81EE;margin: 0;padding: 9px 15px 8px;text-decoration: none;}
#nav li li a,
#nav li li a:link,
#nav li li a:visited {background: SprinGreen url('#') repeat-x top;width: 150px;color: #000;text-transform: lowercase;float: none;margin: 0;padding: 7px 10px;border-bottom: 1px solid #99C9FF;border-left: 1px solid #99C9FF;border-right: 1px solid #99C9FF;font: normal 15px,;}
#nav li li a:hover,
#nav li li a:active {background: #99C9FF;color: #3D81EE;padding: 7px 10px;}
#nav li {float: left;padding: 0;}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;}
#nav li ul a {width: 140px;}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul,
#nav li li li.sfhover ul {left: auto;}
#nav li:hover,
#nav li.sfhover {position: static;}
/* Navigasi Dropdown Menu */
#navdropdownmenu{
background:black; /*Warna Latar Belakang */
width:100%;
height:auto;
margin:0;
padding:0;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
color:yellow; /* Warna Teks */
display:block;
padding:9px 10px 9px 10px;
font-size: 12px; /* Ukuran Teks */
font-family: verdana; /* Jenis font */
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:black; /* Warna teks saat kursor mouse berada di atasnya */
padding:9px 10px 9px 10px;
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
border-width:1px 0 0 0; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:Blue; /* Warna latar belakang submenu */
width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
border-width:0 1px 1px 1px; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a:hover{
background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
}
#navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu, #navdropdownmenu li:hover a:hover ul#submenu{
z-index:10;
position:absolute;
height:auto;
width:225px; /* Lebar submenu */
left:auto;
}
.ngumpet{
display:none;
}
.muncul{
display:block;
}
12. Setelah Anda masukkan listing tersebut diatas seperti gambar dibawah ini
Gbr. 10
13. Bila Anda data telah masuk silahkan Apply to blog tunggu sesaat dan klik Back to blogger
Gbr. 11
14. Dengan
munculnya dialog tersebut diatas silahkan klik layout dan akhirnya muncul
dialog berikut ini
15. Klik Add Gadget yang nantinya muncul dialog ini
16. Pilih
menu HTML/ Java Scrip adn muncul berikut ini
Isikan
form Title dengan Menu
Sedangkan Form content copykan listink di bawah ini masukkan kedalam form
tersebut
Listinknya
<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='nav'>
<li><a class='indukmenu' href='home.html/' title='link'>
Home</a></li>
<li><a class='indukmenu'
href='http://pengalamanberkomputer.blogspot.com/p/blog-page_13.html/'
title='link'> Artikel</a></li>
<li><a class='indukmenu'
href='http://pengalamanberkomputer.blogspot.com/p/tutorial.html' title='link'>Tutorial</a>
<ul>
<li><a
href='http://pengalamanberkomputer.blogspot.com/p/blog-page_5985.html'/'
target='_blank'>Cara Buat Menu Blog</a></li>
<li><a
href='http://pengalamanberkomputer.blogspot.com/p/blog-page_16.html'/
target='_blank''>Cara Mengisi Page Blog</a></li>
</ul>
<li><a
class='http://pengalamanberkomputer.blogspot.com/p/blog-page_4362.html'
title='link'>Media Pembelajaran</a>
<ul>
<li><a
href='http://pengalamanberkomputer.blogspot.com/p/membuat-media-interaktif.html/'
target='_blank'>Membuat media Interaktif</a></li>
</ul></li>
<li><a class='indukmenu'
href=http://pengalamanberkomputer.blogspot.com/p/download.html'
title='link'>Download</a>
<ul>
<li><a
href='http://pengalamanberkomputer.blogspot.com/p/blog-page_6475.html/'
target='_blank'>Internet</a></li>
<li><a
href='http://pengalamanberkomputer.blogspot.com/p/blog-page_6475.html/'
target='_blank'>Grafis</a></li>
<li><a href='http://pengalamanberkomputer.blogspot.com/p/office.html/'
target='_blank'>Office</a></li>
</ul></li>
<li><a class='indukmenu'
href='http://pengalamanberkomputer.blogspot.com/p/kontak-kami.html/'
title='link'> Contact</a></li>
<li><a class='indukmenu'
href='http://pengalamanberkomputer.blogspot.com/p/profilku.html/'
title='link'> About</a></li>
</li></ul></div></div>
17. Bila Anda
telah mengcopykan listing tersebut silahkan klik save dan tunggu sesaat dan
akhirnya kembali ke Layout seperti berikut ini
18. Di dalam layout telah ada dibawah header tindakan berikutnya silahkan klik Save Arangement bila proses menyimpan selesai silahkan klik menu view blog
Sekian tips trik yang saya sajikan semoga bermanfaat dan terima kasih atas kunjungan Anda di webku
No comments:
Post a Comment