Cara Pasang Menu Dropdown Cantik Terbaru Di Blogger

Cara pasang menu dropdown cantik terbaru di blogger, Baru-baru ini banyak pengunjung setia saya bertanya kepada saya tentang kemampuan untuk menambahkan menu drop-down yang mudah dan indah untuk blogger, tidak ribet dan juga keren.



Jadi hari ini kita akan belajar 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 mudah, tapi tolong diingat, simpan dulu template lama anda, buat jaga-jaga kalau terjadi kecelakaan, Oke. Lanjut gan!!

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: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-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: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li 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 a {
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[

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});

document.onclick = jsddm_close;
//]]>
</script>

Kemudian klik save template

3. Menambahkan Menu ini Untuk Blog Anda

Sekarang Pergi ke Dashboard>> Desain>>
Dan pada halaman elemen halaman Anda, klik Add A 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 href="#">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>

Simpan, dan lihat hasilnya

RELATED POST:

kode-kodean

• Membuat tulisan/teks berjalan di blog
• Widget untuk pernak pernik blog anda
• Widget J-Query ( pasang Icon Social) pada blogger kamu terbaru

Membuat Menu Blog Keren

Membuat Menu Blog Keren .Anda pasti bertanya menu blog seperti apa ? bentuknya seperti pada blog saya di sebelah kanan yang berwarna Hijau kalau mousenya di dekatkan maka menu blognya akan keluar,
Klik disini  : Demo  


Mau tau bagaiman cara membuatnya , langsung aja :

1. pastinya login terlebih dahulu
masuk ke tata letak (layout) >> elemen halaman

2. tambah gedget >> html/java script
3. masukkan code berikut:


<script language="JavaScript1.2" src="http://oktri.googlecode.com/files/slide%20menu%20keren.js"></script>
<script>
resizereinit=true;

menu[3] = {
id:'menu3',
bartext:'MENU BLOG',
menupos:'left',
kviewtype:'fixed',
barbgcolor:"#00ff00",
barcolor:"#000000",
barfontweight:"bold",
bordercolor:'#000000',
hdingbgcolor:"#ffffff",
fontsize:'80%',
linkheight:20 ,
hdingwidth:210 ,

menuItems:[
["Home", "http://www.oktri.co.cc/", "_self"],
["My Facebook", "http://www.facebook.com/oktri.darmadi",""],
["Berita", "http://www.okezone.com/", ""],
["Kaskus", "http://www.kaskus.us", ""],
["My Profile", "http://www.blogger.com/profile/08032455232856850277", ""],
["free Download", "http://www.download.com", ""],
["Tips And Trics Blog", "http://oktridarmadi.blogspot.com", ""],
["Bisnis Uang Blog", "http://www.bisnis.com/", ""],
["free game", "http://freegamepick.com", ""],
["Back To Top", "#", ""] //tidak ada tanda koma pada akhir entry
]};

make_menus();
</script>Keterangan :

+ Ganti Direct Link http://oktri.googlecode.com/files/slide%20menu%20keren.jsdengan Direct Link File JS anda sendiri, sebab script tersebut bisa over load jika terlalu banyak yg menggunakan, anda bisa download script JS nya.
+ Ganti tulisan yang warna orange dengan judul untuk Side menu Navigasi sesuai yang anda inginkan.
+ Kode yang saya tulis dengan warna hitam adalah kode warna yang bisa anda ganti dengan kode warna yg anda inginkan.
+ Ganti link dan judul link yang saya tulis dengan warna merahdan Biru dengan link Anda sendiri.
+ Ganti Tulisan right yang saya tulis dengan warna Coklat dengan left jika anda ingin Side Menu ini muncul disebelah kiri body blog.

4. Klik Simpan dan selesai.