Tambahkan Menu Drop-Down Indah Blogger

bagaimana menambahkan sebuah drop down menu untuk blogger dan cara yang sangat mudah,
Menu ini kompatibel dengan sebagian besar browser modern dan klasik, dan dapat ditambahkan untuk template hanya dalam 3 langkah,

Jangan lupa untuk backup template blogger Anda saat ini, (dengan men-download )

1. Tambahkan CSS Menu

Buka akun blogger Anda,
Arahkan ke Dashboard>> Desain>> Edit> Html
Dan cari kode berikut,

]]></ B: skin>

Dan sebelum itu, tambahkan kode css berikut,

# Jsddm {margin: 0; padding: 15px; z-index: 1000000000; position: relative;} # jsddm li {float: kiri; list-style: none; font: 12px Tahoma, Arial;} # jsddm li {display : block; white-space: nowrap; margin: 1px 3px; border: 1px solid # AAAAAA; background: # CCCCCC; background:-webkit-gradien (linear, kiri atas, kiri bawah, dari (# ebebeb), untuk (# CCCCCC)); background:-moz-linear-gradien (atas, # ebebeb, # CCCCCC); padding: 10px 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px ; text-shadow: # ffffff 0 1px 0; color: # 363636; font-size: 15px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: tengah;} # li jsddm a: hover {background: # C8C8C8;} # li jsddm ul {margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white;} # jsddm li ul li {float: none; display: inline;} # jsddm li ul li {width: auto; background: # CAE8FA;} # jsddm li ul li a: hover {background: # A3CEE5;}

2. Menambahkan kode Java

Pada halaman yang sama, menemukan kode berikutnya,

</ Head>

Kemudian tambahkan kode ini persis sebelum itu,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/> <script type='text/javascript'> / / ! <[CDATA timeout [var = 500; closetimer var = 0; ddmenuitem var = 0; fungsi jsddm_open () {jsddm_canceltimer (); jsddm_close ();. ddmenuitem = $ (ini) find ('ul') css ('. visibilitas ',' terlihat ');} fungsi jsddm_close () {if (ddmenuitem) ddmenuitem.css (' visibility ',' tersembunyi ');} fungsi jsddm_timer () {closetimer = window.setTimeout (jsddm_close, timeout);} Fungsi jsddm_canceltimer () {if (closetimer) {window.clearTimeout (closetimer); closetimer = null;}}. $ (dokumen) siap (function () {$ ('# jsddm> li') mengikat ('mouseover', jsddm_open. ) $ mengikat ('# jsddm> li') ('mouseout', jsddm_timer)});. document.onclick = jsddm_close; <//]]> / script>

Sekarang Klik Simpan Template

3. Menambahkan Menu ini Untuk Blog Anda

Sekarang Pergi ke Dashboard>> Desain>>
Dan pada Anda elemen halaman halaman, klik Tambah Gadget dimana saja di layar,
Dan pilih "HTML / JavaScript", Biarkan judul kosong, semut di area konten, paste kode berikut,

<ul id="jsddm"> <li> <a href="#"> Home </ a> <li> <a href="#"> Menu 1 </ a> <ul> <li> <a href Drop ="#"> 1-1 </ a> </ li> <li> <a href="#"> Drop 1-2 </ a> </ li> <li> <a href = "#" > Drop 1-3 </ a> </ li> </ ul> </ li> <li> <a href="#"> Menu 2 </ a> <ul> <li> <a href = "# "> Drop 2-1 </ a> </ li> <li> <a href="#"> Drop 2-2 </ a> </ li> </ ul> </ li> <li> <a title ="#"> Menu 3 </ a> <ul> <li> <a href="#"> Drop 3-1 </ a> </ li> <li> <a href="#"> Drop 3-2 </ a> </ li> <li> <a href="#"> Drop 3-3 </ a> </ li> <li> <a href="#"> Drop 3-4 < / a> </ li> </ ul> </ li> <li> <a href="#"> Menu 4 </ a> </ li> <li> <a href="#"> Menu 5 < / a> </ li> <li> <a href="#"> AllBlogTools </ a> </ li> </ li> </ ul>

Dan klik Simpan
Sekarang, penting untuk memindahkan gadget baru dari tempat saat ini ke bagian atas halaman Anda, apakah itu di sidebar, atau footer, hanya tarik ke header halaman Anda atau di atas area posting Anda, dan klik dan klik Simpan lagi,
Sekarang pergi untuk melihat blog Anda dan menikmati blogger baru Anda menu drop-down.
Catatan: Pada langkah 3, Anda harus mengubah judul menu dan mengganti semua huruf # oleh url menu anda.

Sumber :http://www.allblogtools.com/