Daftar Isi Clicking Here!

Ad 468 X 60

Terlepas berhasil menjadi baik atau tidak itu urusan nanti, yang penting selalu berusaha baik !

Minggu, 17 Januari 2016

Widgets

MEMBUAT MENU DROPDOWN MELAYANG DAN KEREN

Langsung saja pada langkah-langkah pembuatan MENU DROPDOWN KEREN otomatis ini :
  • Langkah pertama, Anda mesti login ke blogger dengan akun Anda
  • Pilih blog yang ingin anda modifikasi TAB MENU nya
  • Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
  • Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  • ----------------------------------------------- */
    #top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeMA5sP3AIecdEDnhZWSEqxZ92tEr_EQiTOV-roqzSa76U_lDli1VbKnbN7BHnH75D8GUJxEU_bzyIgGL7eaLQMXSINFYLwHNoh9B4hNOQPa3LzJjmDs30Pc_1eXTveJRshIH8rjRalnW/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
    #topbar{width:980px;height:40px;margin:0 auto}
    #top{width:100%}
    #top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
    #top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
    #top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyIy3n10RlQpPIfC1UFwbYAY_mr9xYZaP_27aPa7sn6K_3dkPifGcAvBM9ppFSeTimcQdusgL9mazAtryHLtFA6n70dgbownUPBiU_kgs1vAtsA7-zPSGCo6uuEqAMllxm1e3rxHhdz1E/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
    #top li{float:left;position:static;width:auto}
    #top li ul,#top ul li{width:170px}
    #top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
    #top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
    #top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
    #top li:hover ul,#top li.hvr ul{display:block}
    #top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
    #top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
    #top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
    #top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
    #top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .clearfix{display:inline-block}
    #inner{padding-top:40px;}
    #fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
    #fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
    * html, * html body{overflow-y:hidden;height:100%;}
    * html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
    * html #fixedinner{margin-right:17px;}
    * html #fixed {position:absolute;}
  • Untuk mencoba-coba silakan atur warna dan ukuran Font atau hover sesuai keinginan pada element yang diblok warna biru, merah, hijau dan ungu diatas.
  • Kemudian cari kode <div class='header-outer'> atau <div id='header-wrapper'> . Pilih salah satu
  • jika sudah ketemu, pastekan kode di bawah ini di bawah kode  <div class='header-outer'> atau <div id='header-wrapper'> 
    <div id='fixed'>
    <div id='fixedinner'>
    <div id='top-wrapper'>
    <div id='topbar'>
    <ul id='top'>
    <li><a href=‘http://ideapelajar.blogspot.com/'><span>Welcome</span>Homepage</a></li>
    <li><a href=‘http://ideapelajar.blogspot.com/'><span>This is</span>About Us</a></li>

    <li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
    <ul>
    <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
    <ul>
    <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
    <ul>
    <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 4</a></li>
    <li class='hr'/>
    <li><a href=‘http://ideapelajar.blogspot.com/'>Sub menu 5</a></li>
    </ul>
    </li>

    </ul>
    <br class='clearit'/>
    </div>
    <div style='clear:both;'/>
    </div>
    </div></div>   
     
  •  Selanjutnya ganti warna biru sebagai link sobat, warna hijau sebagai Menu, warna orange sebagai keterangan menu dan warna merah sebagai sub menu.
  •  Jika sudah, pratinjau dahulu. apabila sudah pas. klik simpan template
  •  Selamat, blog agan memiliki menu dropdown yang keren. :D
  •  Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :/* Horyzontal Droupdown menu

Read more » Rate this posting:
{[["☆","★"]]}

SHARE THIS POST   

  • Facebook
  • Twitter
  • Google Buzz
Author: Abufajri
Penulis Blog Kelas Pemula Tea. Read More →

0 comments: