Welcome To My Blog In Blog You Is All The Free (Tapi Ojo' Copas)
Catatan Hilmy
Showing posts with label SubMenu. Show all posts
Showing posts with label SubMenu. Show all posts

Cara Membuat SubMenu Navigasi Horizontal Ver. COOL (New)

1
in ,

Assalamu'alaikum sobat, lagi bosan ya.... maksudnya bosan dengan menu horizontal dengan submenu yang dulu, ya kan??? kali ini saya akan memberikan trik cepat dan mudah untuk membuat menu horizontal dengan submenu yang baru dan COOL'.... juga tidak membuat visitor bosan dan tetap singgah di blog sobat! langsung saja tidak usah lama-lama ikuti langkah-langkah berikut ini :
lihat contoh dulu : 
1. bagus kan? relax dulu....
2. login ke blogger sobat
3. pilih layout/tata letak > add gadget/tambah gadget > pilih HTML/Javascript, kemudian copas kode berikut :

<div class="widget-content">
<style>
/*------ CSS3 Drop Down Menu By www.thepowerofhilmy.co.cc ---------*/
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">

<li><a href="#">Home</a></li>

<li><a href="#">MenuHorizontal</a></li>

<li><a href="#">MenuHorizontal</a></li>

<li><a href="#">MenuHorizontal</a>
<ul>
<li><a href="#">SubMenu</a></li>
<li><a href="#">SubMenu</a></li>
<li><a href="#">SubMenu</a></li>
</ul>

</li><li><a href="#">MenuHorizontal</a>
<ul>
<li><a href="#">SubMenu</a></li>
<li><a href="#">SubMenu</a></li>
<li><a href="#">SubMenu</a></li>
</ul>

</li><li><a href="#">MenuHorizontal</a>
<ul>
<li><a href="#">SubMenu</a></li>
<li><a href="#">SubMenu</a></li>
<li><a href="#">SubMenu</a></li>
</ul>

</li></ul>
</div>

note : - ganti tulisan "MenuHorizontal" dengan judul menu sobat (misal : Artikel)
          - ganti tulisan "SubMenu" dengan nama submenu sobat 
          - ganti lambang # dengan link/URL tujuan menu blog sobat (misal : www.google.com)
4. selesai ngatur-ngaturnya??? langsung save/simpan saja
5. atur letak menu tersebut, lebih baik di atas posting blog (OK!!!)
6. lihat hasilnya !!!
7. sudah saya bilang COOL' bukan?
terima kasih semoga tetap cool'...
dan bermanfaat bagi sobat,
Wassalamu'alaikum!

Read more

Cara Membuat SubMenu Navigasi Horizontal Ver. Glossy (New)

0
in ,

Menurut pendapatku banyak trik/tips blogging yang bisa kita gunakan untuk membuat menu navigasi horisontal pada template blogger. Ketika anda browse di-google menu navigasi horisontal, pasti banyak ditemukan metode pembuatan menu navigasi horizontal . Namun pada kesempatan ini saya akan membahas tips blogging tentang cara pembuatan glossy menu navigasi horizontal. Cara pembuatan glossy menu navigasi horizontal ini tidaklah sulit, dan jika anda mengikuti petunjuk pembuatan glossy menu navigasi horizontal secara teliti dan step by step, maka akan dihasilkan glossy menu navigasi horizontal yang akan mempercantik tampilan blog anda dan bisa membuat blog anda SEO juga loh.
Berikut tips blogging membuat glossy menu horizontal :

1. Sebelum anda akan membuat glossy menu navigasi horizontal, anda tentu harus sign in pada account blogger anda, kemudian tuju Dashboard --> Klik Tata Letak --> Edit HTML

2. Langkah kedua untuk membuat glossy menu navigasi horizontal adalah dengan menambahkan kode CSS berikut diatas tag ]]></b:skin>

/*Credits: By Muhammad Hilmy Haidar Fawwazie (www.thepowerofhilmy.co.cc) */
/*Modified : Hilmy Blogging Team (http://www.thepowerofhilmy.co.cc/) */

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4cU1mHb4OYc8tNAaSVmzGI9qDgBCki8YkT-PayiwLMOhCXI_B70l39f_oG5xkXPA2SdlyHcJbB_a7dKay3UDRjBowCeWx9F8aI3StcR-CpntzzeOqXeLEg1FNXCr_nhdoKLgLsEXwT39h/s1600/1.bmp) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW1mQOkccAJyZJ7KX8dWV9XRI7gS6sS1ro5vKVA3PGXRLq5dt2Dk07NMIy9VAuHYziENYggHRPCcOwRfK0fw6wV6HbK57JhUUOKynUEDJO3qcBe1avE0g0gZy14m8pEAXwIOpeJ9C6O5CQ/s1600/2.bmp) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR5wXKdd6B9DfkF2IPJlACz3WGzPrnR1QnHQILCkR0SteMxmNW7COinaGv5tZJ_yHmXOXdZrGSre65H9SW_sh4L28lZzD4fI58YSclBNkdd6JTEc4EZ1qNeIfPRUp0Hp520OtG4YMM2meO/s1600/3.bmp) no-repeat right top; /*right tab image path*/
}
3. Langkah ketiga untuk membuat glossy menu navigasi horizontal adalah cari kode html berikut (letaknya pada bagian bagian bawah). <div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

3. Langkah keempat untuk membuat glossy menu navigasi horizontal adalah dengan meletakkan kode HTML berikut tepat dibawah kode diatas (langkah ketiga)

<ul class="glossymenu">
<ul class="glossymenu">
<li class="current"><a href="#"><b>MenuHorizontal</b></a></li>
<li><a href="#"><b>Menu</b></a></li>
<li><a href="#"><b>Menu</b></a></li>
<li><a href="#"><b>Menu</b></a></li>
<li><a href="#"><b>Menu</b></a></li>
<li><a href="#"><b>Menu</b></a></li>
</ul>
Jangan lupa pada bagian a href="#" anda ubah suaikan dengan link glossy menu navigasi horizontal yang anda inginkan pada blog anda. Oh ya, jika blog anda lebar templatenya 660 px maka anda tidak bisa memasang 6 sub menu (glossy menu horizontal) oleh karenanya anda hanya bisa memasang 5 sub menu glossy menu navigasi horizontal atau untuk sub menu Sekali tidak bisa anda pasang. Jika Anda Ingin  Menambahkan Menu silahkan copas kode html mulai <li class="current"><a href="#"><b>MenuHorizontal</b></a></li>

4. Langkah terakhir dari membuat glossy menu navigasi horizontal adalah Simpan template anda.

Mudah bukan membuat glossy menu horizontal? Selamat mencoba membuat glossy menu horizontal, semoga bermanfaat dengan tips blogging glossy menu navigasi horizontal ini, terima kasih!

Read more

Cara membuat SubMenu tanpa jQuery (Update 28 Mei 2012)

0
in ,

Membuat Menu Serta Sub Menu Tanpa jQuery
Pada artikel kali ini saya akan menuliskan cara membuat menu serta sub menu di blogger tanpa menggunakan jQuery, yakni menggunakan kode css saja

Langsung saja ya, tidak perlu basa-basi

Panduan Langkah Demi Langkah Membuat Menu Horizontal + Sub Menu Di Blogger

Seperti biasa, langkah pertama yang wajib dilakukan adalah login ke blogger.

  • PANDUAN UNTUK BLOGGER BARU
  • PANDUAN UNTUK BLOGGER LAMA

Tutorial Membuat Menu Serta Sub Menu Tanpa jQuery Untuk Blogger Baru

1. Klik menu seperti ini

2. Klik menu / tulisan Template 

3. Klik menu Edit HTML 

4. Klik tulisan / menu Lanjutkan 

5. Beri centang pada Expand Template Widget


Kode Yang Harus Di Cari / Temukan
Cari kode :
<div class='main-outer'> atau
<div id='main-wrapper'> atau
<div id='main'> baca : Cara Mudah + Cepat Mencari Kode Html di Blogger
Setelah kode tersebut sudah ditemukan silakan pasang kode berikut tepat di atasnya
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
</ul>
</div>
<a href='http://www.thepowerofhilmy.co.cc'>SubMenu Powered By Hilmy</a></li>
Catatan:
Silakan ganti tanda PAGAR (#) dengan link/url yang kamu mau, boleh link posting atau link Label (Kategori)
Sub Menu dan Sub adalah sub menu dari menu (Menu + Sub Menu dan Menu + Sub), silakan ganti nama masing-masing menu sesuai selera.

Read more

 
Design by ThemeShift | Bloggerized by Lasantha - Free Blogger Templates | Best Web Hosting