Last Minute Posts

4 Desember 2009 aRi isTiadi


Beberapa hari belakangan ini saya bingung mencari bahan untuk memposting artikel di blog ini.saya browsing kesana kemari dan menemukan menu navigasi untuk menambah cantik blog teman teman. Smooth Navigational Menu (v1.31) biar lebih merakyat saya sebut saja Menu navigasi berbayang itulah namanya karena di Menu tersebut ada bayangannya,yang saya dapat dari dynamicdrive
mau lihat contoh yang aslinya?
anda bisa DI KLIK


Mau bikin menu seperti itu..?
oke deh kalau mau yuk ikutin langkah langkahnya


Pertama
[1]Login dahulu di account blogger anda

Kedua
[2]klik Tata Letak

Ketiga
[3]klik Edit HTML



nah kalau sudah,coba anda cari kode
<head>

kalau sudah ketemu kodenya,copy kode di bawah ini
dan letakan persis di bawah kode <head>

<link href='http://ariistiadi.googlepages.com/ddsmoothmenu.css' rel='stylesheet' type='text/css'/>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://ariistiadi.googlepages.com/ddsmoothmenu.js' type='text/javascript'>
</script>





Setelah itu anda cari kode
</head>

kalau sudah ketemu kodenya
copy kode di bawah ini dan paste tepat di atas kode </head>

<script type='text/javascript'>

ddsmoothmenu.init({
mainmenuid: &quot;smoothmenu1&quot;, //menu DIV id
orientation: &#39;h&#39;, //Horizontal or vertical menu: Set to &quot;h&quot; or &quot;v&quot;
classname: &#39;ddsmoothmenu&#39;, //class added to menu&#39;s outer DIV
//customtheme: [&quot;#1c5a80&quot;, &quot;#18374a&quot;],
contentsource: &quot;markup&quot; //&quot;markup&quot; or [&quot;container_id&quot;, &quot;path_to_menu_file&quot;]
})

ddsmoothmenu.init({
mainmenuid: &quot;smoothmenu2&quot;, //Menu DIV id
orientation: &#39;v&#39;, //Horizontal or vertical menu: Set to &quot;h&quot; or &quot;v&quot;
classname: &#39;ddsmoothmenu-v&#39;, //class added to menu&#39;s outer DIV
//customtheme: [&quot;#804000&quot;, &quot;#482400&quot;],
contentsource: &quot;markup&quot; //&quot;markup&quot; or [&quot;container_id&quot;, &quot;path_to_menu_file&quot;]
})

</script>




setelah itu anda cari kembali kode berikut ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='buat template baru (Header)' type='Header'/>
</b:section>
</div>



nah setelah itu copy kode di bawah ini
dan letakan persis di bawah kode
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='buat template baru (Header)' type='Header'/>
</b:section>
</div>

<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
<li><a href='http://www.dynamicdrive.com'>Item 1</a></li>
<li><a href='#'>Folder 0</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Folder 1</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Folder 2</a>
<ul>
<li><a href='#'>Sub Item 2.1</a></li>
<li><a href='#'>Folder 2.1</a>
<ul>
<li><a href='#'>Sub Item 2.1.1</a></li>
<li><a href='#'>Sub Item 2.1.2</a></li>
<li><a href='#'>Folder 3.1.1</a>
<ul>
<li><a href='#'>Sub Item 3.1.1.1</a></li>
<li><a href='#'>Sub Item 3.1.1.2</a></li>
<li><a href='#'>Sub Item 3.1.1.3</a></li>
<li><a href='#'>Sub Item 3.1.1.4</a></li>
<li><a href='#'>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://www.dynamicdrive.com/style/'>Item 4</a></li>
</ul>
<br style='clear: left'/>
</div>





anda bisa mengganti
alamat [http://www.dynamicdrive.com] dan [#] dengan alamat link anda sendiri
dan mengganti tulisan
-Sub Item
-Folder 0
-Folder 1
-Item 3
-Folder 2

sesuai keinginan anda masing masing

kayaknya itu saja caranya
masih blum berhasil?
tanyakan saja

Sumber:dynamicdrive

PERHATIAN..!Bagi Anda Yang Ingin Copy Paste Artikel Saya Harap Mencantumkan Sumbernya
Terima Kasih

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

15 komentar:

salam sobat
wah hebat nich,,sobat
menu navigasi berbayangnya,,
tapi saya belum berani untuk mencobanya nich,,
harus diulang-ulang dulu membaca caranya .

(maaf) izin mengamankan KEDUA dulu. Boleh kan?!
keren banget scriptnya. Sayang gak support buat WP.

Sob izin praktek ya sob, thank's bgt pengetahuannya sob!!!

Kalau buat templateku kira kira cocok nggak ya sob heheheheheeh

info bagus nie, mo di coba ahh
thanks ya sob

di tunggu artikel selanjutnya sob udah nggak sabar nih

sip.. semakin memperkaya tampilan blog euy

tambah ilmu..sangat membantu kawan...nice job..

ck ck ck dynamic drive maennya nih...thumbsup

tutorial yang menarik langsung disedot ilmunya mengembalikan jati diri bangsa

Waduh blognya makin.. mantap kak .... :-D ,,, Semangat terus berkreasi kak.


Salam Blogger.


Yudha.wibowo ( XI TKJ 2 ) ~ (TERVOET);

:-D

Kirimkan Komentar Anda

Mohon Komentarkan ketika anda selesai membaca

Bagi anda pengguna blog,harap pilih Name/URL
untuk memudahkan saya membacklink anda