Tips Memasang Menu dan Sub Menu Di Tata Letak / Diluar Postingan Blog
Kali
ini PiBay postingkan bagaimana cara memasang menu dan submenu dropdown
di luar dari halaman postingan blog. Mungkin untuk menu yang asli dari
blog biasa terpasang di crosscol diatas postingan. Tepatnya dibawah nama
blog kalian. Tetapi menu yang kalian pasang kali ini dapat kalian
terapkan sesuai keinginan posisi tata letak blog kalian. Dapat kalian
letakkan diatas atau disamping blog kalian. Begini tutorialnya sebagai
berikut
1. Masuk ke Dashbor Blogger
2. Pilih Tata Letak
3. Klik Add Gadget/ Tambah Gadget
4. Pilih HTML/JAVASCRIPT.
Copy dan pastekan kode script dibawah :
<div
id="Menu">
<div id="Box">
<ul id="punch">
<li><a href="#">Home</a></li>
<li>
<a href="#">Sample Page</a>
<ul>
<li>
<a href="#">Sub Page #1</a>
<ul>
<li><a href="#">Sub Sub Page #1</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 #2</a></li>
<li><a href="#">Sub Page #3</a></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>
</div>
<div id="Box">
<ul id="punch">
<li><a href="#">Home</a></li>
<li>
<a href="#">Sample Page</a>
<ul>
<li>
<a href="#">Sub Page #1</a>
<ul>
<li><a href="#">Sub Sub Page #1</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 #2</a></li>
<li><a href="#">Sub Page #3</a></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>
</div>
Perhatikan :
Kode (#) ganti dengan URL blog atau laman yang dituju.
Sample Page ganti dengan nama menu kalian.
Home bisa kalian ganti dengan nama beranda atau sejenisnya.
Sub page menu dari sub menu page ganti dengan sub menu
Sub sub page menu dari sub ke sub menu. Jangan sampai salah. Jika ingin menghapus submenu tinggal didelete saja.
5. Pertinjau. Jika sudah klik SAVE.
Jika anda melakukan langkah-langkah
di atas dengan benar, anda akan melihat sebuah horizontal drop down menu di
tempat yang anda inginkan.
Untuk Menambah Item di dalam drop down menu horizontal ini sangatlah mudah:
Silahkan cari pada bagian akhir ada kode seperti ini:
Silahkan cari pada bagian akhir ada kode seperti ini:
<li><a href="#">Blog Page</a></li>
</ul>
Tepat di bagian atas </ul> bisa
disisipkan menu baru, dan akan terlihat seperti di bawah ini:
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU">TEKS BARU</a></li>
</ul>
Jika menu tambahan lebih dari satu akan terlihat seperti di bawah ini
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>
<li><a href="LINK BARU 2">TEKS BARU 2</a></li>
<li><a href="LINK BARU n">TEKS BARU n</a></li>
</ul>
Jika salah satu menu tambahan mempunyai sub menu, maka perhatikan kode </li> menu tersebut yang diturunkan untuk membuka ruang baru bagi sub menu di dalam menu tersebut
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>
<li><a href="LINK BARU 2">TEKS BARU 2</a>
<li><a href="LINK BARU SUB MENU 1">SUB MENU 1</a></li>
<li><a href="LINK BARU SUB MENU 2">SUB MENU 2</a></li>
</li>
<li><a href="LINK BARU n">TEKS BARU n</a></li>
Model ke-2.
Model drop down ini
bertingkat, yang bisa menggabungkan antara menu dan submenu kemudian sub submenu
dst. terserah kebutuhan; juga bisa saja hanya memasang menu saja (label) untuk
lebih simpelnya.
Contoh silakan lihat di bagian atas blog ini.
Scriptnya adalah:
<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0
0;
list-style: none;
background:
#000000;
background:
-moz-linear-gradient(#444, #000000);
background:
-webkit-gradient(linear,left bottom,left top,color-stop(1, #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 0px #9c9c9c;
-webkit-box-shadow:
0 2px 0px #9c9c9c;
box-shadow: 0 2px
0px #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: 2px;
}
#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='http://namablog.blogspot.com/'
rel='nofollow' target='_blank'>Drop menu</a>
<ul>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a
href='http://namablog.blogspot.com/'
rel='nofollow' target='_blank'>Drop menu 2</a>
<ul>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 3</a>
<ul>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 3.1</a></li>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 3.2</a></li>
<li><a
href='http://namablog.blogspot.com'
rel='dofollow' target='_blank'>Menu 3.3</a></li>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 3.4</a></li>
</ul>
</li>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a
href='http://namablog.blogspot.com/'
rel='nofollow' target='_blank'>Drop menu 3</a>
<ul>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow'
target='_blank'>Menu 4</a></li>
<li><a
href='http://namablog.blogspot.com/'
rel='dofollow' target='_blank'>Menu 5</a></li>
</ul></li></ul>
Keterangan:
1. Silakan ganti tulisan yang berwarna merah diatas dengan URL alamat blog anda.
2. Skrip ini bisa dipasang di side
bar (luar artikel) atau pun di dalam artikel.
- Untuk di side bar,
seperti bisa anda ke
"Edit blogger- Tata letak - Tambah Gadget - HTML/JAVASCRIPT"
Sekian potingan tips memasang menu dan submenu diluar postingan. Jika masih ada pertanyaan bisa coment dibawah :D**Untuk di dalam artikel, anda mesti ke Template-Edit HTML dst., dan agar bisa terpasang di bagian paling atas blog, silakan copas skrip ini di atas kode </head>.
No comments:
Post a Comment