Selamat Datang Di Blog Sederhana http://andylaoe.blogspot.com | Semoga Artikel-Artikel Yang Ada Bisa Bermanfaat | Terima Kasih Atas Kunjungannya.

Sabtu, 30 Juni 2012

Pin It

Widgets

Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot


Horizontal Menu: Pure CSS 3D Button Effect for Blogger
Menu/navigasi horizontal Blogger/Blogspot ini juga dibuat dengan HTML dan CSS murni tanpa sentuhan javascript maupun jquery., sama seperti menu/navigasi horizontal sebelumnya. Cara membuat dan memasangnya pun sangat sederhana dan tanpa mengedit template HTML, karena aturan CSS saya buat menyatu dengan HTML nya.

Cara membuat/memasang widget horizontal menu/mavigation 3d button Blogger/Blogspot:
1.  Copy dan edit kode di bawah ini:
Kode: 

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
</ul>
</div>

- Ganti  dengan url yang ingin anda pasang di menu, misalnya url homepage, daftar isi, label, dan lain-lain.
- Ganti Link 1Link 2Link 3, dan seterusnya dengan nama menu/anchor text sesuai dengan yang anda inginkan, misalnya Home, Daftar Isi, Tips, dan seterusnya.
- Jika ingin menambah/menghapus daftar menu, tambahkan/hapus baris: 
<li><a href="#"><span>Link</span></a></li> sebelum </ul>.

2. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

3. Setelah pop up window muncul, pilih opsi HTML/Javascript

4. Kemudian masukkan Kode yang sudah diedit tersebut ke kolom configure HTML/Javascript.
 

7. Klik save.
8. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget).
9. Save lagi.
10. Done! menu/navigasi horizontal Blog Blogger anda siap digunakan.
Please Share it! :)

Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter
BLOG SEDERHANA

0 komentar:

Poskan Komentar

:a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p   :q   :r   :s   :t

Terima kasih atas kunjungannya, Semoga artikel di atas bisa bermanfaat.

Silakan komentar sesuai dengan artikel yang di sajikan!!!!
terima kasih.


andylaoe.blogspot.com

Loading...

Blog Teman

 

About Me

Foto Saya
Andy tia ari wibowo
Hiii !!!! My name is Andy tia ari wibowo
I live on Jl. Muara Baru Raya, Jakarta. 
I was born on May 16, 1991. 
My hobbies are traveling and play game. 
I like black colours. 
I love eating fried rice. My favourite singer is Bob Marley. 
I like him because I am very inspired musical works. That's all about me. Thank you.

Lihat profil lengkapku

Recent Posts

Recent Comments

| Blog Sederhana © 2012. All Rights Reserved | Template Style by Blog Sederhana .com | email adittia.wibowo@gmail.com | Back To Top |