Home CSS Tips dan Trik Tutorial Tutorial HTML 5 Cara Menambahkan Menu Drop Down Multi Coloumn Pada Blog

kabelantena.blog di Februari 25, 2014
Cara Menambahkan Menu Drop Down Multi Coloumn Pada Blog - Menu drop down multi coloumn yaitu menu seperti gambar di bawah ini :
Menu Drop Down Multi Coloumn
Menu Drop Down Multi Coloumn
Langkah membuatnya yaitu:

Login ke akun blog
Pada dashboard , Pilih Template > Edit HTML
Cari dengan menggunakan Ctrl+f  tag ]]></b:skin> seperti gambar di bawah:

]]></b:skin>
Copy dan paste kode di bawah ini tepat di atas kode ]]></b:skin> :
-----------------------------------------------------------
    /* Mulai Menu Multi dropdown */  
 body, ul, li { 
        font-size:14px;  
        font-family:Arial, Helvetica, sans-serif; 
        line-height:21px; 
        text-align:left; 
    } 
     
   #menu {

           margin: 0 -26px 30px -20px;         padding: 10px 30px 10px 0;       
        list-style:none; 
        width:940px; 
       
        height:43px; 
        
     
        /* 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("drop.png") no-repeat rightright 8px; 
    } 
    #menu li:hover .drop { 
        background:url("drop.png") no-repeat rightright 7px; 
    } 
     
    /* Drop Down */ 
     
    .dropdown_1column,  
    .dropdown_2columns,  
    .dropdown_3columns,  
    .dropdown_4columns, 
    .dropdown_5columns { 
        margin:4px auto; 
        float:left; 
        position:absolute; 
        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: 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; 
        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:rightright; 
        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; 
        rightright:-1px; 
        top:auto; 
    } 
     
    /* Drop Down Content Stylings */ 
     
    #menu p, #menu h2, #menu h3, #menu ul 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:400; 
        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; 
    } 
.menu:before, .menu:after     { content: '';         position: absolute;         border-style: solid;         border-color: transparent;         bottom: -6px;     } .menu:after     {         border-width: 0 0 6px 6px;         border-left-color: #555;         right: 0;     } 

/*  Menu Multi dropdown Selesai */ 
----------------------------------------------------------------------------------

Kemudian simpan template, dan masuk ke bagian layout, tambah widget HTML/Javascript, Paste kode di bawah ini:

-------------------------------------------------------
<ul id="menu"> 
         
        <li><a href="http://kabelantena.blogspot.com" class="drop">Home</a><!-- Home Menu --> 
         
            <div class="dropdown_2columns"><!-- Selamat datang --> 
         
                <div class="col_2"> 
                    <h2>Selamat Datang</h2> 
                </div> 
         
                <div class="col_2"> 
                    <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhei52kOhr3Gfk-Rs-zb3oqk54gN_Si4ua62vflF-I90Faf_JeB9tanmKnNIV-pDCqDGhU9fh4roLQdNSO5RTik7-SNDCJMZslI9ByK8ah_wzNEthpEcYUPGppL3GlEnPDhWxiIi_M9L0Sb/s1600/home.png" alt="Home"/></p>                            
                </div> 
         
                              
            </div><!-- selesai selamat datang --> 
         
        </li><!-- Selesai Home --> 
     
        <!-- Batas menu home dan tutorial -->
     
        <li><a href="#" class="drop">Tutorial</a><!-- Mulai tutorial --> 
         
            <div class="dropdown_4columns"><!-- kontener tutorial --> 
             
                <div class="col_4"> 
                    <h2>Daftar Tutorial</h2> 
                </div> 
                 
                <div class="col_1"> 
                 
                    <h3>Web Develop</h3> 
                    <ul> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Tutorial%20HTML%205">HTML</a></li> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/CSS">CSS</a></li> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Javascript">Javascript</a></li> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/jQuery">JQuery</a></li> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Tutorial%20PHP">PHP</a></li> 
                    </ul>    
                      
                </div> 
         
                <div class="col_1"> 
                 
                    <h3>Microsoft</h3> 
                    <ul> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Ms%20Word">Word</a></li> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/excel">Excel</a></li> 
                       
                    </ul>    
                      
                </div> 
         
                <div class="col_1"> 
                 
                    <h3>Design Graphic</h3> 
                    <ul> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Adobe%20Photoshop">Photoshop</a></li> 
                        <li><a href="#">Corel</a></li> 
                    </ul>    
                      
                </div> 
         
                <div class="col_1"> 
                 
                    <h3>Portal / CMS</h3> 
                    <ul> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Joomla">Joomla</a></li> 
                        
                    </ul>    
                      
                </div> 
                <div class="col_4"> 
                    <h2>Daftar Tutorial</h2> 
                </div> 
            </div><!-- Selesai kontener tutorial --> 
         
        </li><!-- selesai tutorial --> 
            
        <!-- Batas menu tutorial dan news -->
       
        <li><a href="#" class="drop">News Dan Info</a><!-- Mulai news --> 
         
            <div class="dropdown_4columns"><!-- kontener news --> 
             
                <div class="col_4"> 
                    <h2>Daftar News Dan Info</h2> 
                </div> 
                 
                <div class="col_1"> 
                 
                    <h3>Artikel</h3> 
                    <ul> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Ikan">Perikanan</a></li> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Pertanian">Pertanian</a></li> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Kesehatan">Kesehatan</a></li>
                    </ul>    
                      
                </div> 
         
                <div class="col_1"> 
                 
                    <h3>Berita & Info</h3> 
                    <ul> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Nasional">Nasional</a></li> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Tekno">Tekno</a></li> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/ANEH%20TAPI%20NYATA">Info Unik</a></li> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Berita%20Pendidikan">Pendidikan</a></li> 
                    </ul>    
                      
                </div> 
         
                <div class="col_1"> 
                 
                    <h3>Hiburan</h3> 
                    <ul> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Download%20MP3">Info Musik</a></li> 
                        <li><a href="#">Info Artis</a></li>
                        <li><a href="http://kabelantena.blogspot.com/search/label/movie">Info Film</a></li>
                    </ul>    
                      
                </div> 
         
                <div class="col_1"> 
                 
                    <h3>Materi Sekolah</h3> 
                    <ul> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Soal-soal%20Fisika">Fisika</a></li> 
                        
                    </ul>    
                      
                </div> 
                <div class="col_4"> 
                    <h2>Daftar News Dan Info</h2> 
                </div> 
            </div><!-- Selesai kontener news --> 
         
        </li><!-- selesai news --> 
       
        <!-- Batas menu news dan download-->
       
        <li><a href="#" class="drop">Download</a><!-- Mulai download --> 
         
            <div class="dropdown_4columns"><!-- kontener download --> 
             
                <div class="col_4"> 
                    <h2>Daftar Download</h2> 
                </div> 
                 
                <div class="col_1"> 
                 
                    <h3>Software</h3> 
                    <ul> 
                        <li><a href="http://kabelantena.blogspot.com/2013/12/software-download.html">Windows</a></li> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/ANDROID">Android</a></li> 
                        <li><a href="#">Macintosh</a></li>
                    </ul>    
                      
                </div> 
         
                <div class="col_1"> 
                 
                    <h3>Template</h3> 
                    <ul> 
                        <li><a href="http://kabelantena.blogspot.com/search/label/Template%20Joomla">Joomla</a></li> 
                    </ul>    
                      
                </div> 
          
                <div class="col_4"> 
                    <h2>Daftar Download</h2> 
                </div> 
            </div><!-- Selesai kontener download --> 
         
        </li><!-- selesai download -->
    </ul>  
-----------------------------------------------------------------------------

Untuk widgetnya taruh pada bagian header. jika masih belum bisa tampil, coba cari di template, section pada header maxwidgetnya ditambah. cari digoogle aja ya caranya.. :)

Semoga manfaat.
, , ,
Share To:

kabelantena.blog

View Profile
Terima kasih sudah berkunjung ke kabelantena, semoga bermanfaat,, aamiin..
----------------------------------

Post A Comment: