gondhengON: Bikin Menu Drop Down Tanpa Edit HTML

1. Cara Bikin Menu Drop Down yang Kayak gini :

Menu Seperti gambar di atas hanya dapat diterapkan di atas Header dan tidak dapat dipindahkan caranya sbb :
Langkah pertama yang harus dilakukan adalah Login ke Blogger Sobat
Setelah itu masuk ke Dashboard kemudian pilih 'Tata Letak'
Kemudian pilih Add gadget atau 'Tambah gadget'kemudian pilih :Html/Javascript".
selanjutnya langkah yang paling penting adalah masuka code script dibawah ini ke dalam nya

Script :

#japmenu ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#japmenu li .current{color: transparant;}#japmenu li a:hover, #japmenu li a:active {background: #4B0082;background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#japmenu {width: auto;float: left;margin: 0;padding: 0;}#japmenu {margin: 0;padding: 0;}#japmenu ul {float: left;list-style: none;margin: 0;padding: 0;}#japmenu li {list-style: none;margin: 0;padding: 0;}#japmenu li a, #japmenu li a:link, #japmenu li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#japmenu li a:hover, #japmenu li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#japmenu li li a, #japmenu li li a:link, #japmenu li li a:visited {background: #00FFFF;background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#japmenu li li a:hover, #japmenu li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#japmenu li {float: left;padding: 0;}#japmenu li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#japmenu li ul a {width: 140px;}#japmenu li ul ul {margin: -32px 0 0 171px;}#japmenu li:hover ul ul, #japmenu li:hover ul ul ul, #japmenu li.sfhover ul ul, #japmenu li.sfhover ul ul ul {left: -999em;}#japmenu li:hover ul, #japmenu li li:hover ul, #japmenu li li li:hover ul, #japmenu li.sfhover ul, #japmenu li li.sfhover ul, #japmenu li li li.sfhover ul {left: auto;}#japmenu li:hover, #japmenu li.sfhover {position: static;}#footer-column-divide {clear:both;}#japmenu{font-family:Comic Sans Ms;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuxfwBSX3K123PHyGW5PCCbXNvy8-fVNBWi2fEN-Jp7nqD48BSeozb80mcwHIUxlgorCR9CON4N4zhPMU7NH9ZuDv-zszdKRk4b4qc1_i7e9X0G2V8fOX9uT_ew7VuZBWdxIvnj-dw9Ps/)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}

</style>

<li><a href='disini letak link sobat' target='_blank'>Daftar Isi</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<li><a href='http://gondhengon.blogspot.com' title='tutorial' target='_blank'><blink>Tutorial</blink></a></li>

</ul>

</div>

Keterangan :

Ganti Warna MERAH dengan Ling yang Sobat Tuju dan Ganti Tulisan yang warna BIRU dengan Nama Lingnya

Dan Selanjutnya Simpan Trus Lihat Hasilnya................

2. Cara Bikin Menu Drop Down yang ke-2 Kayak gini :

Untuk Cara Awal Sama Ja dengan cara yang di atas.

Script :

okay Selesay dan Selamat berExperimen. Good Luck

Posting Terbaru

About Me

TRAFFIC

IP Address

Histats

Blog Archive

Sabtu, 03 November 2012

Bikin Menu Drop Down Tanpa Edit HTML

6 komentar:

Labels

Transliter

Kumpulblogger

Followers

pusatklik.com