>>>>Download Arsip dan Software: Membuat Menu Drop Down pada Blog

Membuat Menu Drop Down pada Blog

Al hamdulillah kelar juga deh

Akhirnya setelah coba browsing sana sisni dapet juga nih menu yang ok banget loh

bisa di cek langsung di tkp hasilnya

Belajar tuh emang harus sabar deh

buktinya sudah hampir 4 bulan saya coba buat menu drop down akhirnya bisa juga, awalnya copas lah pastinya. terus dikembangkan sendiri

ok kita mulai aja yach

Langkah Langkah:

1. Buka akun blogger kalian

2. pilih Tambah Gadget -> pilih Scrip <HTML>

3. Co Pas scrip <HTML> berikut ini dihalaman bawah yah

4. simpan

5. lihat hasilnya

Catatan Penting : Geser gadget tersebut pas di atas entri dibawah judul blogger

Berikut ada scrip <HTML>

COPAS Aja yah scrip <HTML> dibawah ini ya

<div id="menu">
<li><a href="http://tokomukmin.blogspot.com/2014/01/new-inovation.html" class="drop">Profile</a>
<div class="dropdown_2columns">
<div class="col_2">
<h2></h2>

</div>
<div class="col_2">
<h2></h2>
</div>
<div class="col_1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhN-ginM4ZwDV9wycMwLVsy5BgzwnKtm92DilRVRWEgIsR4buXagPE9W3tdaNKt_szAdOB9sHtRQLhrxfcj0GGA6YqC4PSJoB0A0kGPt5roYV3GnF9JAzVdcnj2pK2OenuPVZIh_V1aDV/s1600/rolex+date.jpeg" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p></p>
</div>

</div>
</li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/my-produc.html" class="drop">My Favorit Product</a>
<div class="dropdown_5columns">
<div class="col_5">
<h2></h2>
</div>
<div class="col_1">
<p class="black_box"></p>
</div>
<div class="col_1">
<p></p>
</div>
<div class="col_1">
<p class="italic"></p>
</div>
<div class="col_1">
<p></p>
</div>
<div class="col_1">
<p class="strong">.</p>
</div>
<div class="col_5">
<h2></h2>
</div>
<div class="col_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXS1CH6KLrUIwhdvgyoLQ3c_kYBAv972KhIZL641BSuWZNiExbh6t_0A8VxkEAoXHVvoQs2KD9imHeZzHEHhxsIVzsFtbZ6scigE41ivO7l6m98P49nZjBy_s3JHCoK9yGRIRJJ4YEoegc/s1600/alqur%2527an+digital.JPG" width="50" height="50" class="img_left imgshadow" alt="" />
<p>...<a href="http://tokomukmin.blogspot.com/2014/01/al-quran-digital.html">Read more</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghtgSU-Hpv5spvIIB5LzyUPqRkDfbiD6Z3MM-feSStRRCdBnhzUyJI0yyCF2GxkpjKphRQiC6QWchP54qi7Sm9DMFoZomuuO2V4Jg5DDHs17B9QvkVha3qUD9RIy7fkWuYritcQTEoWNfX/s1600/jam+adzan+otom+tm004.jpg" width="50" height="50" class="img_left imgshadow" alt="" />
<p>...<a href="http://tokomukmin.blogspot.com/2014/01/jam-otomatis-tm-004.html">Read more</a></p>
</div>
<div class="col_2">
<p class="black_box">Kitab Suci Al Quran, Dapat merekam setiap ayat dengan tombol rekam, Support Micro SD / TF Card sampai 8 GB, Baterai Tahan 6 Jam, Bisa sebagai MP3 Player</p>
</div>
</div>
</li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/my-produc.html" class="drop">Daftar Produk</a>
<div class="dropdown_4columns">
<div class="col_4">
<h2></h2>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="http://tokomukmin.blogspot.com/2014/01/mukena-katun-nilon-bordir-kupu-kupu.html">Mukena Nilon</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/mukena-bordir-kupu-kupu-set.html">Mukena BordirTutorial</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/gamis-muslimah-tm2571.html">Gamis Muslimah 2571</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/gamis-muslimah-tm2573.html">Gamis Muslimah 2573</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/gelang-korea.html">Gelang Korea</a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="http://tokomukmin.blogspot.com/2014/01/celana-ajaib-vakoou.html">Celana Vakou</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/rolex-skeleton-jothem-leather-series.html">Rolex Skeleton</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/rolex-milgauss-superlative-all-black.html">Rolex Milgauss</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/rolex-datejust-five-chain-series.html">Rolex DateJust</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/alat-pijat-electronic-tz-dtm.html">Alat Pijat TZ DTM</a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="http://tokomukmin.blogspot.com/2014/01/fortuner-ad1208.html">Fortuner AD1208</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/fortuner-256.html">Fortuner 2F56</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/fortuner-f176.html">Fortuner F176</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/fortuner-f955.html">Fortuner F955</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/fortuner-f566.html">Fortuner F566</a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="http://tokomukmin.blogspot.com/2014/01/fortuner-f877.html">Fortuner F877</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/fortuner-original-f221.html">Fortuner F221</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/jam-otomatis-tm-005.html">Jam TM 005</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/jam-otomatis-tm-001.html">Jam TM 001</a></li>
<li><a href="http://tokomukmin.blogspot.com/2014/01/al-quran-digital.html">Al Qur'an Digital</a></li>
</ul>
</div>
</div>
</li>

<li class="menu_right"><a href="#" class="drop">Member</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">Register</a></li>
<li><a href="#">Payment Confirmation</a></li>
<li><a href="#">Contact Us2</a></li>
<li><a href="#">How to Paid</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
</li>

<li class="menu_right"><a href="#" class="drop">Info Tecno</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="http://smaissoftware.blogspot.com/2013/04/tablet-lokal-spec-tinggi-aroma-vendor.html">Tablet Test</a></li>
<li><a href="http://smaissoftware.blogspot.com/2013/05/update-fireware-andromax-i4-ok-sobat-ku.html">Update Firmware</a></li>
<li><a href="http://smaissoftware.blogspot.com/2013/01/hati-hati-scam.html">Scam Hati2</a></li>
<li><a href="http://smaissoftware.blogspot.com/2013/05/asphalt-7-adrenalin-asphalt-7.html">Asphalt 7</a></li>
<li><a href="http://smaissoftware.blogspot.com/2014/01/games-android-played-by-pc.html">You Wave</a></li>
</ul>
</div>
</div>
</li>

<li class="menu_right"><a href="#" class="drop">Produk Lainnya</a>
<div class="dropdown_3columns align_right">
<div class="col_3">
<h2>Daftar di box</h2>
</div>
<div class="col_1">
<ul class="greybox">

<li><a href="http://tokoberniaga21.blogspot.com/2014/01/cream-herbal.html">Cream Herbal</a></li>
<li><a href="http://tokoberniaga21.blogspot.com/2014/01/habbatussauda.html">Habbat's</a></li>
<li><a href="http://tokoberniaga21.blogspot.com/2014/01/sari-kurma.html">Sari Kurma</a></li>

<li><a href="http://tokoberniaga21.blogspot.com/2014/01/madu-hutan.html">Madu Hutan</a></li>
<li><a href="http://tokoberniaga21.blogspot.com/2014/01/zaitun-zaitun-olea-europaea-adalah.html">Zaitun</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="http://tokoberniaga21.blogspot.com/2014/01/madu-syamil.html">Syamil</a></li>
<li><a href="http://tokoberniaga21.blogspot.com/2014/01/siwak.html">Siwak</a></li>
<li><a href="http://tokoberniaga21.blogspot.com/2014/01/rani-product.html">Rani Product</a></li>
<li><a href="http://tokoberniaga21.blogspot.com/2014/01/propolis-melia.html">Propolis</a></li>
<li><a href="http://tokoberniaga21.blogspot.com/2014/01/jelly-gamat.html">Gamat</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="http://tokoberniaga21.blogspot.com/2014/01/habasyfa.html">Habasyfa</a></li>
<li><a href="http://tokoberniaga21.blogspot.com/2014/01/otem-dan-thm.html">Otem THM</a></li>
<li><a href="http://tokoberniaga21.blogspot.com/2014/01/kurma.html">Kurma</a></li>
<li><a href="#">Madu Ternak</a></li>
<li><a href="http://tokoberniaga21.blogspot.com/2014/01/ar-rehab.html">Ar Rehab</a></li>
</ul>
</div>
<div class="col_3">
<h2>sample</h2>
</div>
<div class="col_3">
<img src="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg" width="50" height="50" class="img_left imgshadow" alt="" />
<p><a href="#">Read more</a></p>
<img src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="50" height="50" class="img_left imgshadow" alt="" />
<p>Tecnician smaissoftware.blogspot.com<a href="http://smaissoftware.blogspot.com/">Read more</a></p>
</div>
</div>
</li>
</div>

<style type="text/css">
body, ul, li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}

/* Navigation Bar */

#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;

/* Rounded Corners */

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

/* Background color and gradients */

background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

/* Borders */

border: 1px solid #002232;

-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}

#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;

/* Background color and gradients */

background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

/* Rounded corners */

-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}

#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 7px;
}

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute !important;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;

/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 600px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px ;
z-index:444 !important;
top:auto;
}

/* Columns */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Right alignment */

#menu .menu_right {
float:right !important;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}

/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu div li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:00;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}

#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;

/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;

/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}

.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid transparent !important ;
}

</style>
<a href="http://smaissoftware.blogspot.com/" title="tecnician" ><img src="#" /></a>

Kemudian setelah menu udah muncul nih waktunya editing

Kalian baca Ulang Teks HTML diatas.

disitu dikit keterangan lihat aja

jelasnya berikut nih ya