Membuat Menu Drop Down Serbaguna Blogger

Selamat jumpa kembali, kali ini saya akan mencoba menampilkan artikel tentang "Menu Drop Down Serbaguna" untuk blog Blogger, yang dimaksud serbaguna ini adalah, pada menu Drop Down tersebut Anda bisa menyimpan potongan teks posting berikut gambar dari judul posting dan lagi dapat menyisipkan link untuk kelanjutannya (readmore) contohnya di bawah:

Bagian pertama:

Gadget menu drop down serbaguna seperti pada gambar atas, ini sangat reflek dan sensitif sekali apabila tersentuh cursor, dengan spontan menjulur ke bawah, memperlihatkan isi menu yang disimpan di gadget. 

Bagian ke dua:

Anda pun dapat membuat daftar link seperti halnya pada menu drop down navigasi lainnya, hanya saja pada menu ini mampu memuat dari apa yang kita inginkan, lihat gambar bawah adalah satu wadah dapat memuat semuanya.

Lihat gambar atas adalah contoh link yang berada pada masing - masing kotak ketika cursor menyentuh akan berubah warna latar belakang link dalam kotak tersebut. Dan masih mampu menyimpan beberapa potongan teks dari postingan dan link nya plus gambar.

Cara menerapkannya pun sangat sederhana sekali Anda cukup menambahkan gadget baru untuk blog Anda, adapun code HTML /JavaScript seperti di bawah:

COPY CODENYA

<div id="menu">

<li><a href="#" class="drop"><p class="strong">JUDUL BLOG</p></a><!-- Begin Home Item -->
    <div class="dropdown_2columns"><!-- Begin 2 columns container -->
    <div class="col_2">
    <h2>Selamat Datang di Blog Kami</h2>
         <div class="col_2">

<p>TEKS AREA POTONGAN ARTIKEL 1</p>            
    <p>TEKS AREA POTONGAN ARTIKEL 2 <a href="http:"#">JUDUL UNTUK LINK</a></p>            
    </div>
    <div class="col_2">
    <h2>Berikutnya</h2>
    </div>
    <div class="col_1">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvYjWDnPyH58Y46rJy9abqpWD-HswJafpeZqGEzfKo5L4swqpLWoz6uCyxTrRG2pylXObvAMxdgdHRpKLKDzM7mRDKKfzyolQGOyuEqHZLtFjNvVOwcUevEo7nPDw4snaimUn1Jv8smhWT/s1600/DSC_0100.JPG" width="250" height="90" alt="" />
    </div>
    <div class="col_2">
    <p>TEKS AREA POTONGAN ARTIKEL 3 <a href="http://gadgetbloganda.blogspot.com/">baca halaman selanjutnya</a></p>
    </div>
    </div><!-- End 2 columns container -->
    </div></li></div><!-- End Home Item --> 

<style type="text/css">
    body, ul, li {
     font-size:14px;
     font-family:Arial, verdana, sans-serif;
     line-height:21px;
     text-align:left;
    }
     
    /* Navigation Bar */
     
    #menu {
     list-style:none;
     width:100px;
     margin:37px auto 0px auto;
     height:40px;
     padding:0px 10px 0px 10px;
     
     /* Rounded Corners */
     
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
     border-radius: 8px;
     
     /* Background color and gradients */
     
     background: BLACK;
 background: -moz-linear-gradient(top, BLACK, #444444);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(BLACK), to(#444444));
 
 /* Borders */
 
 border: 1px solid black;
 
 -moz-box-shadow:inset 0px 0px 1px yellow;
 -webkit-box-shadow:inset 0px 0px 1px yellow;
 box-shadow:inset 0px 0px 1px BLACK;
}
 
#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 yellow;
 padding: 4px 9px 4px 9px;
 
 /* Background color and gradients */
 
 background: #848484;
 background: -moz-linear-gradient(top, #444444, #444444);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444444), to(#444444));
 
 /* 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, verdana, sans-serif;
 font-size:23px;
 color: BLUE;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px 0;
}
 
#menu li:hover a {
 color:#8cbb02;
 text-shadow: 1px 1px 1px transparent;
}
#menu li .drop {
 padding-right:21px;
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFo-3XVQtyq9vThEu3QCTf-OTMxLVW2WDeWkvmd6FIEpYEWwQO7iULDsAAYxXIf3S8rw0b8e9Ekb60YWLhXeBkUFmb_mowL6q3ebC7Ec7bN86pHCThISyxzcpT_HpDINIWfLRtof5hkMgo/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFo-3XVQtyq9vThEu3QCTf-OTMxLVW2WDeWkvmd6FIEpYEWwQO7iULDsAAYxXIf3S8rw0b8e9Ekb60YWLhXeBkUFmb_mowL6q3ebC7Ec7bN86pHCThISyxzcpT_HpDINIWfLRtof5hkMgo/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 yellow;
 border-top:none;
 
 /* Gradient background */
 background:#444444;
 background: -moz-linear-gradient(top, #444444, #000000);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444444), to(#000000));
 
 /* 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: 700px;}
 
#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:aut;
    right:-1px;
    top:auto;
    }
     
    /* Drop Down Content Stylings */
     
    #menu p, #menu h2, #menu h3, #menu div li {
    font-family:Arial, verdana, sans-serif;
    line-height:21px;
    font-size:12px;
    text-align:left;
    text-shadow: 1px 1px 1px transparent;
    }
    #menu h2 {
    font-size:21px;
    font-weight:400;
    letter-spacing:-1px;
 margin:7px 0 14px0;
 paddingbottom:14px;
 border-bottom:1px solid yellow;
}
    #menu h3 {
     font-size:14px;
     margin:7px 0 14px 0;
     padding-bottom:7px;
     border-bottom:1px solid yellow;
    }
    #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:transparent;
     padding:4px;
     border:1px solid yellow;
     margin-top:5px;
     -moz-box-shadow:0px 0px 5px yellow;
     -webkit-box-shadow:0px 0px 5px yellow;
     box-shadow:0px 0px 5px yellow;
    }
    .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 0;
     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 transparent;
     -moz-box-shadow:inset 0 0 3px transparent;
     box-shadow:inset 0 0 3px transparent;
    }
    #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 transparent;
     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 .greenbox li {
     background:#797079;
     border:1px solid yellow;
     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 .greenbox li:hover {
     background:#f6f627;
     border:1px solid yellow;
     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></div>

Catatan: 

Yang berwarna merah, seperti "JUDUL BLOG" , "JUDUL UNTUK LINK" , " URL IMAGE_ANDA_JPG"ganti dengan  punya Anda.

Sedangkan teks yang berwarna hijau, seperti: > TEKS AREA POTONGAN ARTIKEL 1<, 3 dan 3.ganti pula dengan  punya Anda.

Lihat demo pada Link Teks pada Sidebar/Gadget " HOME "