 |
| Add caption |
Mau membuat menu dropdown pada blogger ????? tapi bingung bagaimana caranya .
pada dasarnya cara membuat menu dropdown pada blogger itu menggunakan kode-kode CSS .singkat kata saja jika sobat membuat menu pada blog sobat tanpa menggunakan CSS atau hanya menggunakan kode HTML saja ,hasil yang di dapat itu pasti nya bukan menu menurun / menu dorpdown ,melainkan menu biasa yang bahkan tanpa ada box modelnya.
atau jika sobat ingin menggunakan jasa web flash menu juga bisa .. caranya mudah kok tinggal copas script yang sobat inginkan saja pada web tersebut ..
setttttttt .. tapi ingat setiap kali sobat menggunakan flash pada blog sobat .. maka bobot pada blog sobat pun akan semakin besar adanya . atau lebih umunya lagi kecepatan loading blog akan semakin lelet ..
memang siii kecepatan loading pada blog juga bisa di percepat dengan cara meng compress nya..
tapi tetap saja kalau terlalu banyak flash pada blog .maka blog tersebut sudah pasti akan lelet di bukanya .
untuk itu cara paling ampuh untuk membuat menu dropdown pada blog ... yaaa dengan css itu.
selain sobat dapat membuat menu dengan kreasi sobat sendiri sobat juga dapat sekalian belajar kan ..hitung-hitung menambah wawasan ...hehehe ..(jadi so ceramah bhogell ..huft )
blum lama ini ada seorang sobat yang menanyakan bagaimana cara membuat menu dropdown pada blogger ????
yaaahhh awalnya si bhogell cukup malas menerangkannya pada sobat,
yuaaaa gmna bhogell ga malessss, toh CSS saja dia masih blank sama sekali.. ya kan mau ngga mau bhogell harus menerangkannya lagi dari awal ....
untuk itu bhogell membuat postingan ini , agar sobat yang blum lama menanyakan ,bagaimana cara membuat menu drop down pada menu .dapat melihat postingan ini saja dan sekalian kan memperbanyak postingan bhogell .hehehe :D
nahhhh mungkin bagi sobat yang juga kebingungan bagaimana cara membuat menu menurun pada blogger dapat juga melihat postingan ini . :D
sebelumnya bhogell juga telah membuat artikel tentang langkah awal membuat blog .. jika sobat mungkin tertarik juga ingin membacanya silakan klik disini ...jika tidak yaa sudah lewatkan saja..
kannnnn sobat sudah ingin membuat menu dorpdown yaaaa ....kenapa jadi di suruh membuat blog dari awal lagi ..hehehhehhe (itung-itung promosi sampingan)
oke langsung saja ke TKP ..
biar lebih menarik menjelaskannya ...coba sobat lihat menu dropdown yang ada pada blog bhogell sa'at ini ,di pojok kiri atas ada sebuah menu dropdown kan .. nahh hasilnya nanti akan seperti itu .. jika sobat tertarik silakan baca terus postingan ini sampai habis .. dan dibawa santai saja yaa .nggak usah terlalu serius . ntar matanya keluar lagi ..hehehheh :D.
oke .. penjelasan singkatnya .
biar lebih asikk dan jelas menerangkannya ... coba sobat masukan kode HTML berikut ini tepat di bawah kode <header/> atau semacam nya yang mirip pada template sobat..
kisi-kisi : kenapa bisa bhogell katakan ( atau semacam nya ) ???? singkat kata ,jika sobat telah mengubah/mengedit template yang sobat gunakan pada blog , maka berbagai macam nama kode nya pun juga bisa akan berubah nama (tergantung siapa yang membuat template tersebut ) , tapi tetap saja fungsinya sama .
caranya :
-login blogger
-klik rancangan
-download template lengkap ( untuk berjaga-jaga jika sistem error )
-centang tanda expand template widget
lihat gambar
-kemudian cari kode <header/> ataupun kode <body>
(itu tergantung dimana sobat ingin meletakan menu tersebut dan bhogell ingatkan sekali lagi setiap template mempunyai nama-nama kode yang berbeda jika sudah anda ubah/edit akan tetapi tetap saja fungsinya sama)contoh jika sobat tidak menemukan kode-kode tersebut pada template sobat , sobat bisa menaruh nya dimana saja ... asalkan masih dalam area <body> ataupun html )
( agar lebih mudah tekan ctrl+F untuk mencarinya )
-lalu masukan kode HTML berikut ini tepat di bawah nya :
<li><a href='#'>Home</a></li>
<li><a href='#'>Tutorial blog</a>
<ul>
<li><a href='#'>Penjelasan blog</a></li>
<li><a href='#'>Langkah awal membuat blog</a></li>
<li><a href='#'>Desain blog</a>
<ul>
<li><a href='#'>membuat menu dropdown</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page #4</a></li>
<li><a href='#'>Sub Page #5</a></li>
</ul>
</li>
<li><a href='#'>Sample Post</a></li>
<li><a href='#'>Blog Page</a></li>
nahhh jika sudah sobat masukan kode tersebut ... lalu tekan pratinjau untuk melihat hasilnya ..
.. sudah belum .. kalau belum coba dulu donk .. biar lebih asik menerangkannya nanti..hehehe :D
nahhh .. jika sudah sobat lihat .. bagaimana hasilnya ???? huft..pasti cuma begitu saja kan . bukan seperti menu yang sobat ingin kan ...
nahhh untuk itulah diperlukannya kode css untuk membuat menu dropdown ..agar lebih menarik .
pertanyaannya !!.. dimana si letak kode css pada template ?????
kalau ingin tahu lebih mudahnya .. silakan sobat cari kode ]]></b:skin> pada template ..
nahh .. letak kode css tersebut ada tepat di atas kode tersebut .
kira-kira seperti ini lah struktur singkat di mana kode css dan html di letakan pada template :
<html>
<head>
di sini letak kode-kode CSS
</head>
<body>
di sini letak kode-kode HTML
</body>
</html>
nahhh .. sobat sudah sedikit mengetahui tentang kode-kode css kan ...
oke ..sekarang tinggal sobat letakan kode-kode css berikut ini pada template sobat .untuk membuat menu dropdown pada blog..
langkah-langkahnya .
-login blogger sobat
-klik rancangan
-klik edit HTML
-centang expand template widget
-cari kode ]]></b:skin> (gunakan ctrl+F untuk mencari)
-kemudian letakan kode css berikut ini tepat di atas ]]></b:skin> .
#NavbarMenu {
background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGOi8l3G8Q_tlm0Jj2lM12qoMkq887xiA1LbXneecwojPleEAzTDB8_UJargVJqQ-LpXsAFq4bM0e2ducVQwYeqwPDzPKXOpSgOMoxhbiNEHzcv0JbeI2bZL4_xWekQ5VD49vtZJ4zaA/s1600/navbar.png);
width: 1000px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding:
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
border-right:0.5px solid#000080;
}
#nav li a:hover, #nav li a:active {
background:#7FFF00;
color: #000000;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;border-right:0.5px solid#000080;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #FF8C00;
width: 150px;
color: #000000;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
-moz-box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888;
border-bottom: 1px solid #000080;
border-left:0.5px solid#000080;
moz-border-radius: 0px 0px 3px 3px;border-radius: 3px ;
}
#nav li li a:hover, #nav li li a:active {
background: #008000;
color: #FFF;
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;
}
sudah di pasang belum sobat ???
kalau sudah .. ini bhogell jelaskan maksud kata-kata dari kode-kode css tersebut .
sobat pun juga bisa mengubah nya sesuai kebutuhan sobat :
-width = panjang / vertical
-height = lebar/ horizontal
-font = tulisan
-margin = jarak antara menu dengan sekitar (jarak kotak menu dengan sekitarnya )
-padding = jarak antar tulisan dengan kotak menu ( jarak tulisan dengan garis pinggir )
lihat gambar berikut :
-color = warna
-border = ketebalan garis
Nahhhh ..langkah selanjutnya adalah menerapkan kode-kode css tersebut pada HTML template sobat
caranya :
-login blogger sobat
-klik rancangan
-klik edit HTML
-centang expand template widget
cari kode <header/> ataupun <body>
(itu tergantung di mana nantinya sobat ingin meletakan menu tersebut dan bhogell ingatkan sekali lagi setiap template akan mempunyai nama-nama kode yang berbeda jika sudah anda ubah/edit akan tetapi tetap saja fungsinya sama)contoh jika sobat tidak menemukan kode-kode tersebut pada template sobat , sobat bisa menaruh nya dimana saja . asalkan masih dalam area <body> ataupun html )
( agar lebih mudah tekan ctrl+F untuk mencarinya )
untuk penjelasan dimana letak kode-kode html nya sudah bhogell jelaskan di atas tadi yuaa kan ..
-kemudian masukan kode-kode html berikut ini yang sudah di tambahkan dengan kode-kode css yang tadi baru saja di letakan ..
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>Tutorial blog</a>
<ul>
<li>
<a href='#'>Penjelasan blog</a>
</li>
<li><a href='#'>Langkah awal membuat blog</a>
</li>
<li><a href='#'>Desain blog</a>
<ul>
<li><a href='#'>membuat menu dropdown</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul></li>
<li><a href='#'>Sub Page #4</a></li>
<li><a href='#'>Sub Page #5</a></li>
</ul>
</li>
<li><a href='#'>Sample Post</a></li>
<li><a href='#'>Blog Page</a></li>
</ul>
</div>
jika sobat perhatikan dengan seksama kode-kode yang berwarna merah itu adalah kode-kode css yang tadi telah sobat buat bukan .dan sekarang telah bhogell gabungkan dengan dengan kode-kode html tersebut .
-ganti tulisan yang telah bhogell tandai dengan warna kuning . dengan alamat URL dan nama alamat yang sobat butuhkan ..
oke setelah sobat terapkan langkah tersebut pada blog sobat ..
sekarang tinggal klik simpan template .. dan lihat hasilnya dehh..
semoga artikel cara membuat menu dropdown pada blogger (menu menurun )dapat bermanfaat bagi sobat semua ...dan mari bersama kita cerdaskan anak-anak indonesia .
terima kasih
bagaimana tanggapan sobat >??????????????
atau jika sobat ingin menggunakan jasa web flash menu juga bisa .. caranya mudah kok tinggal copas script yang sobat inginkan saja pada web tersebut ..
setttttttt .. tapi ingat setiap kali sobat menggunakan flash pada blog sobat .. maka bobot pada blog sobat pun akan semakin besar adanya . atau lebih umunya lagi kecepatan loading blog akan semakin lelet ..
memang siii kecepatan loading pada blog juga bisa di percepat dengan cara meng compress nya..
tapi tetap saja kalau terlalu banyak flash pada blog .maka blog tersebut sudah pasti akan lelet di bukanya .
untuk itu cara paling ampuh untuk membuat menu dropdown pada blog ... yaaa dengan css itu.
selain sobat dapat membuat menu dengan kreasi sobat sendiri sobat juga dapat sekalian belajar kan ..hitung-hitung menambah wawasan ...hehehe ..(jadi so ceramah bhogell ..huft )
blum lama ini ada seorang sobat yang menanyakan bagaimana cara membuat menu dropdown pada blogger ????
yaaahhh awalnya si bhogell cukup malas menerangkannya pada sobat,
yuaaaa gmna bhogell ga malessss, toh CSS saja dia masih blank sama sekali.. ya kan mau ngga mau bhogell harus menerangkannya lagi dari awal ....
untuk itu bhogell membuat postingan ini , agar sobat yang blum lama menanyakan ,bagaimana cara membuat menu drop down pada menu .dapat melihat postingan ini saja dan sekalian kan memperbanyak postingan bhogell .hehehe :D
nahhhh mungkin bagi sobat yang juga kebingungan bagaimana cara membuat menu menurun pada blogger dapat juga melihat postingan ini . :D
sebelumnya bhogell juga telah membuat artikel tentang langkah awal membuat blog .. jika sobat mungkin tertarik juga ingin membacanya silakan klik disini ...jika tidak yaa sudah lewatkan saja..
kannnnn sobat sudah ingin membuat menu dorpdown yaaaa ....kenapa jadi di suruh membuat blog dari awal lagi ..hehehhehhe (itung-itung promosi sampingan)
oke langsung saja ke TKP ..
biar lebih menarik menjelaskannya ...coba sobat lihat menu dropdown yang ada pada blog bhogell sa'at ini ,di pojok kiri atas ada sebuah menu dropdown kan .. nahh hasilnya nanti akan seperti itu .. jika sobat tertarik silakan baca terus postingan ini sampai habis .. dan dibawa santai saja yaa .nggak usah terlalu serius . ntar matanya keluar lagi ..hehehheh :D.
oke .. penjelasan singkatnya .
biar lebih asikk dan jelas menerangkannya ... coba sobat masukan kode HTML berikut ini tepat di bawah kode <header/> atau semacam nya yang mirip pada template sobat..
kisi-kisi : kenapa bisa bhogell katakan ( atau semacam nya ) ???? singkat kata ,jika sobat telah mengubah/mengedit template yang sobat gunakan pada blog , maka berbagai macam nama kode nya pun juga bisa akan berubah nama (tergantung siapa yang membuat template tersebut ) , tapi tetap saja fungsinya sama .
caranya :
-login blogger
-klik rancangan
-download template lengkap ( untuk berjaga-jaga jika sistem error )
-centang tanda expand template widget
lihat gambar
-kemudian cari kode <header/> ataupun kode <body>
(itu tergantung dimana sobat ingin meletakan menu tersebut dan bhogell ingatkan sekali lagi setiap template mempunyai nama-nama kode yang berbeda jika sudah anda ubah/edit akan tetapi tetap saja fungsinya sama)contoh jika sobat tidak menemukan kode-kode tersebut pada template sobat , sobat bisa menaruh nya dimana saja ... asalkan masih dalam area <body> ataupun html )
( agar lebih mudah tekan ctrl+F untuk mencarinya )
-lalu masukan kode HTML berikut ini tepat di bawah nya :
<li><a href='#'>Home</a></li>
<li><a href='#'>Tutorial blog</a>
<ul>
<li><a href='#'>Penjelasan blog</a></li>
<li><a href='#'>Langkah awal membuat blog</a></li>
<li><a href='#'>Desain blog</a>
<ul>
<li><a href='#'>membuat menu dropdown</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page #4</a></li>
<li><a href='#'>Sub Page #5</a></li>
</ul>
</li>
<li><a href='#'>Sample Post</a></li>
<li><a href='#'>Blog Page</a></li>
nahhh jika sudah sobat masukan kode tersebut ... lalu tekan pratinjau untuk melihat hasilnya ..
.. sudah belum .. kalau belum coba dulu donk .. biar lebih asik menerangkannya nanti..hehehe :D
nahhh .. jika sudah sobat lihat .. bagaimana hasilnya ???? huft..pasti cuma begitu saja kan . bukan seperti menu yang sobat ingin kan ...
nahhh untuk itulah diperlukannya kode css untuk membuat menu dropdown ..agar lebih menarik .
pertanyaannya !!.. dimana si letak kode css pada template ?????
kalau ingin tahu lebih mudahnya .. silakan sobat cari kode ]]></b:skin> pada template ..
nahh .. letak kode css tersebut ada tepat di atas kode tersebut .
kira-kira seperti ini lah struktur singkat di mana kode css dan html di letakan pada template :
<html>
<head>
di sini letak kode-kode CSS
</head>
<body>
di sini letak kode-kode HTML
</body>
</html>
nahhh .. sobat sudah sedikit mengetahui tentang kode-kode css kan ...
oke ..sekarang tinggal sobat letakan kode-kode css berikut ini pada template sobat .untuk membuat menu dropdown pada blog..
langkah-langkahnya .
-login blogger sobat
-klik rancangan
-klik edit HTML
-centang expand template widget
-cari kode ]]></b:skin> (gunakan ctrl+F untuk mencari)
-kemudian letakan kode css berikut ini tepat di atas ]]></b:skin> .
#NavbarMenu {
background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGOi8l3G8Q_tlm0Jj2lM12qoMkq887xiA1LbXneecwojPleEAzTDB8_UJargVJqQ-LpXsAFq4bM0e2ducVQwYeqwPDzPKXOpSgOMoxhbiNEHzcv0JbeI2bZL4_xWekQ5VD49vtZJ4zaA/s1600/navbar.png);
width: 1000px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding:
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
border-right:0.5px solid#000080;
}
#nav li a:hover, #nav li a:active {
background:#7FFF00;
color: #000000;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;border-right:0.5px solid#000080;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #FF8C00;
width: 150px;
color: #000000;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
-moz-box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888;
border-bottom: 1px solid #000080;
border-left:0.5px solid#000080;
moz-border-radius: 0px 0px 3px 3px;border-radius: 3px ;
}
#nav li li a:hover, #nav li li a:active {
background: #008000;
color: #FFF;
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;
}
sudah di pasang belum sobat ???
kalau sudah .. ini bhogell jelaskan maksud kata-kata dari kode-kode css tersebut .
sobat pun juga bisa mengubah nya sesuai kebutuhan sobat :
-width = panjang / vertical
-height = lebar/ horizontal
-font = tulisan
-margin = jarak antara menu dengan sekitar (jarak kotak menu dengan sekitarnya )
-padding = jarak antar tulisan dengan kotak menu ( jarak tulisan dengan garis pinggir )
lihat gambar berikut :
-color = warna
-border = ketebalan garis
Nahhhh ..langkah selanjutnya adalah menerapkan kode-kode css tersebut pada HTML template sobat
caranya :
-login blogger sobat
-klik rancangan
-klik edit HTML
-centang expand template widget
cari kode <header/> ataupun <body>
(itu tergantung di mana nantinya sobat ingin meletakan menu tersebut dan bhogell ingatkan sekali lagi setiap template akan mempunyai nama-nama kode yang berbeda jika sudah anda ubah/edit akan tetapi tetap saja fungsinya sama)contoh jika sobat tidak menemukan kode-kode tersebut pada template sobat , sobat bisa menaruh nya dimana saja . asalkan masih dalam area <body> ataupun html )
( agar lebih mudah tekan ctrl+F untuk mencarinya )
untuk penjelasan dimana letak kode-kode html nya sudah bhogell jelaskan di atas tadi yuaa kan ..
-kemudian masukan kode-kode html berikut ini yang sudah di tambahkan dengan kode-kode css yang tadi baru saja di letakan ..
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>Tutorial blog</a>
<ul>
<li>
<a href='#'>Penjelasan blog</a>
</li>
<li><a href='#'>Langkah awal membuat blog</a>
</li>
<li><a href='#'>Desain blog</a>
<ul>
<li><a href='#'>membuat menu dropdown</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul></li>
<li><a href='#'>Sub Page #4</a></li>
<li><a href='#'>Sub Page #5</a></li>
</ul>
</li>
<li><a href='#'>Sample Post</a></li>
<li><a href='#'>Blog Page</a></li>
</ul>
</div>
jika sobat perhatikan dengan seksama kode-kode yang berwarna merah itu adalah kode-kode css yang tadi telah sobat buat bukan .dan sekarang telah bhogell gabungkan dengan dengan kode-kode html tersebut .
-ganti tulisan yang telah bhogell tandai dengan warna kuning . dengan alamat URL dan nama alamat yang sobat butuhkan ..
oke setelah sobat terapkan langkah tersebut pada blog sobat ..
sekarang tinggal klik simpan template .. dan lihat hasilnya dehh..
semoga artikel cara membuat menu dropdown pada blogger (menu menurun )dapat bermanfaat bagi sobat semua ...dan mari bersama kita cerdaskan anak-anak indonesia .
terima kasih
bagaimana tanggapan sobat >??????????????
No comments:
Post a Comment