Cara membuat menu dropdown halaman statistik blog

Caranya sangat mudah,trik tentang cara membuat menu dropdown halaman statistik blog atau trik tentang cara memodifikasi menu halaman statistik blog ini dapat dilakukan tampa harus menambahkan atau mengedit kode html di halaman edit html template blog kalian.

Mau tahukah kalian?kalau mau silahkan lanjutkan membaca!

Inilah langkah-langkah cara membuat menu dropdown halaman statistik blog itu :

1. Login ke dasbor blogger kalian.
2. Klik tombol perintah opsi lainnya.
3. Klik tulisan tata letak.
4. Klik tombol perintah tambahkan gadget.
5. Pilih dan klik html / javascript.
6. Paste kode css dan html menu dropdown halaman statistik blog'nya .Harap diperhatikan,bahwa sebelum melakukan paste,ketik dulu kode <style> dan </style> di kolom konten pop up mengkonfigurasikan html/javascript.Lalu paste dulu kode css menu dropdown'nya di antara kode <style> dan <style>! kalau sudah paste kode html menu dropdownnya setelah kode </style> .Untuk membuat kode css dan kode html menu dropdown halaman statistik blog baca di bagian bawah posting saya ini!
7. Klik tombol perintah save.
8. Letakkan gadget menu dropdown'nya di bawah header halaman blog.
9. Klik tombol perintah simpan setelan.

Mudahkan? silahkan kalian cek hasilnya dengan mengetik alamat blog kalian di web browser.

Cara membuat kode css dan kode html menu dropdown halaman statistik blog:

Buka halaman situs www.cssmenumaker.com !

Klik menus!

Klik dropdown!

Klik salah satu model tampilan meu dropdownnya'1 submenu'.

Klik customize!

Keterangan cara customize menu dropdown:

• A.Klik home!
• B.Ganti tulisan home dengan judul menu.
• C.Ketik link alamat url blog.
• D.Pilih warna menu dropdown.
• E.Klik css untuk mengambil kode css menu dropdown.
• F.Copy kode css.
• H.Kolom untuk menambah judul menu dropdown,untuk menghapus menu dropdown klik tanda silang di sebelah kanannya menu yang sudah tersedia,lihat A!

Kalau kalian tidak puas dengan tampilan menu dropdown yang baru saja kalian buat,coba buat css atau kode html menu dropdownnya selain di cssmenumaker.com!

Inilah nama-nama situs lainnya selain css menumaker yang memberikan layanan pembuatan css atau kode html menu dropdown halaman statistik blog:

• Vista buttons.
• CSS men builder.
• XP web buttons.
• Flash menu templates.
• DHTML menu builder.
• Tabgenerator.
• My css menu.
• Pure css menu.
• Grcsites generate.

Tetapi jika kalian tidak mau repot-repot membuat menu dropdown halaman statistik blog seperti langkah di  atas,copy paste saja css menu dropdown berikut ini

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5-YZxRClWsYNpYC0xEGQOpCy2r3dcpiG2JBHoVaEnc1wa_UaTTjhbkXazQwfNGs9djr_lyrg-DHakjD0N6NX4XvmDzEsLCLlSds97Ij6tB4CtDIHmVp1hePhPCSrsMZMssk5BI7nqABY/655/menubar.png) repeat-x;width:655px;margin:0 auto;padding:0 auto} #menuwrapper{width:655px;height:35px;margin:0 auto}  .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#000000;border-right:0px solid #000000;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXw3KnzCfML63O4rSj6gsKIrc05s-7-idUHr2zxQzIBAEWPvGcJZ70l0BajzI8fb1b2rFHbs_llGFaZulUHF2zyGZVBxLi6uPvNtiQxq-QLUbCJZU7h53Icj2zehoRC9pFHLZN9Nj6C3Q/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:14px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#1E90FF;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#00FF00;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#FFFFFF;background-color:#000000;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#00FF00;!important;color:#fff!important;text-decoration:none} 

ke atas code ]]></b:skin>  yang ada di halaman edit html template blog kalian.
Kalau sudah,copy paste lagi html menu dropdown di bawah ini

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://cara-daftar-octafx.blogspot.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHYeZarMsRxLVBC4a-YflmuP7pcHGhIk_1GK0Zlch3zM3o0d83kL5vExNoXCIrz5VB06NmUDBsXyg8aXJV2tctcR450s3W_F54_mFmqZibQi4YlP0evtsmGoL4u4diAAGZpxwNlc7inx8/s1600/home_white.png' style='padding:0px;'/>Home</a></li>
  <li><a class='trigger'>Cara Daftar Forex</a>
<ul>
<li><a href='http://cara-daftar-octafx.blogspot.com/2013/09/cara-daftar-forex-octafx.html'>Cara Daftar Octafx</a></li>
<li class='hr'/>
<li><a href="http://caradaftarfbs.blogspot.com/" target="_blank"><span style="font-size: small;">Cara daftar FBS</span></a></li>
<li class='hr'/>
<li><a href="http://caradaftaragea.blogspot.com/" target="_blank"><span style="font-size: small;">Cara daftar Agea</span></a></li>
<li class='hr'/>
<li><a href="http://caradaftarforexinstaforex.blogspot.com/" target="_blank"><span style="font-size: small;">Cara daftar Instaforex</span></a></li>
</li></li></li></ul>
<li><a class='trigger'>Panduan Software Trading Forex</a>
<ul>
<li><a href='http://cara-daftar-octafx.blogspot.com/p/blog-page.html'>Cara Download dan Install MT4</a></li>
<li class='hr'/>
<li><a href='http://cara-daftar-octafx.blogspot.com/p/blog-page_19.html'>Cara Menjalankan MT4 Untuk Trading</a></li>
</li></ul>
<li><a class='trigger'>Tips dan Trik Forex</a>
<ul>
<li><a href='http://cara-daftar-octafx.blogspot.com/2014/02/penyebab-trading-forex-kalah.html'>Penyebab trading forex kalah</a></li>
<li class='hr'/>
<li><a href='http://cara-daftar-octafx.blogspot.com/2014/02/strategi-forex-agar-loss-jadi-laba.html'>Strategi forex agar loss jadi laba</a></li>
</li></ul></li>
 <div class='menusearch'>
</div></li></li></ul></div></div>

ke tambahkan gadget html javasript blog kalian.

Untuk hasilnya yaitu tampilan menu dropdown'nya seperti apa? klik dan lihat disini!

Kode HTML yang lainnya lagi yang bisa untuk membuat menu dropdown halaman statis blog tampa harus mengedit susunan kode HTML yang ada dikolom edit HTML halaman dasbor blogger adalah sebagai berikut :

<style>
    #menu
    {
    width: autopx;
    margin: 5;
    padding: 5px 0 0 0;
    list-style: none;
    background: #45818e;
    background: -moz-linear-gradient(#45818e;, #45818e);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #45818e));
    background: -webkit-linear-gradient(#45818e, #111);
    background: -o-linear-gradient(#45818e, #111);
    background: -ms-linear-gradient(#45818e, #111);
    background: linear-gradient(#45818e, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 2px 0px #9c9c9c;
    -webkit-box-shadow: 0 2px 0px #9c9c9c;
    box-shadow: 0 2px 0px #9c9c9c;
    }
    #menu li
    {
    float: left;
    padding: 0 0 10px 0;
    position: relative;
    line-height: 0;
    }
    #menu a
    {
    float: left;
    height: 20px;
    padding: 0 15px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
    }
    #menu li:hover > a
    {
    color: #fafafa;
    }
    *html #menu li a:hover /* IE6 */
    {
    color: #fafafa;
    }
    #menu li:hover > ul
    {
    display: block;
    }
    /* Sub-menu */
    #menu ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 25px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);
    -moz-border-radius: 5px;
    border-radius: 2px;
    }
    #menu ul ul
    {
    top: 0;
    left: 150px;
    }
    #menu ul li
    {
    float: none;
    margin: 0;
    padding: 50;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    }
    #menu ul li:last-child
    {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    #menu ul a
    {
    padding: 5px;
    height: 5px;
    width: autopx;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    }
    *html #menu ul a /* IE6 */
    {
    height: 10px;
    }
    *:first-child+html #menu ul a /* IE7 */
    {
    height: 10px;
    }
    #menu ul a:hover
    {
    background: #0186ba;
    background: -moz-linear-gradient(#04acec, #0186ba);
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec, #0186ba);
    background: -o-linear-gradient(#04acec, #0186ba);
    background: -ms-linear-gradient(#04acec, #0186ba);
    background: linear-gradient(#04acec, #0186ba);
    }
    #menu ul li:first-child > a
    {
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    }
    #menu ul li:first-child > a:after
    {
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
    }
    #menu ul ul li:first-child a:after
    {
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
    }
    #menu ul li:first-child a:hover:after
    {
    border-bottom-color: #04acec;
    }
    #menu ul ul li:first-child a:hover:after
    {
    border-right-color: #04acec;
    border-bottom-color: transparent;
    }
    #menu ul li:last-child > a
    {
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    }
    /* Clear floated elements */
    #menu:after
    {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
    * html #menu { zoom: 1; } /* IE6 */
    *:first-child+html #menu { zoom: 1; } /* IE7 */
    </style>

    <ul id="menu">
    <li><a href='/'><span style="color: white;">Home</span></a></li>
    <li><a href='/'><span style="color: white;">Pemula &#9660;</span></a>
    <ul>
    <li><a href='http://www.kursusforexditangerang.com/2015/03/pengertian-forex.html'><div style="text-align: left;">Pengertian Forex</div></a></li>
<li><a href="http://www.kursusforexditangerang.com/2016/02/tujuan-menekuni-bisnis-trading-forex.html"><div style="text-align: left;">Tujuan Menekuni Bisnis Forex</div></a></li>
    <li><a href='http://www.kursusforexditangerang.com/2015/04/macam-macam-mata-uang-asing-yang.html'><div style="text-align: left;">Mata Uang Forex</div></a></li><li><a href='http://www.kursusforexditangerang.com/2016/02/harga-mata-uang-forex.html'><div style="text-align: left;">Harga Mata Uang Forex</div></a></li>
<li><a href='http://www.kursusforexditangerang.com/2016/02/nama-satuan-harga-mata-uang-forex.html'><div style="text-align: left;">Nama Satuan Harga Mata Uang Forex</div></a></li>
<li><a href='http://www.kursusforexditangerang.com/2016/02/rumus-laba-rugi-dalam-transaksi-forex.html'><div style="text-align: left;">Rumus Laba Rugi Transaksi Forex</div></a></li>   
<li><a href='http://www.kursusforexditangerang.com/2016/02/cara-menghitung-nilai-uang-laba-forex.html'><div style="text-align: left;">Cara Menghitung Nilai Uang Laba Forex</div></a></li>
<li><a href='http://www.kursusforexditangerang.com/2015/05/hari-apa-dan-jam-berapakah-transaksi.html'><div style="text-align: left;">Hari & Jam Buka Pasar Forex</div></a></li>
<li><a href='http://www.kursusforexditangerang.com/2015/05/jam-terbaik-untuk-mulai-melakukan.html'><div style="text-align: left;">Jam Terbaik Memulai Trading Forex</div

</a></li>

</ul></li>

<li><a href='/''><span style="color: white;">Tutorial Bonus &#9660;</span></a>

<ul>

<li><a href='http://caradaftaragea-forex.blogspot.com' target="_blank"><div style="text-align: left;">Cara Daftar Forex Dibroker Forex Yang Memberikan Uang Bonus Pendaftaran Forex Sebesar $5 </div></a></li>

<li><a href='http://caradaftarfbs-forex.blogspot.co.id/2016/01/cara-daftar-fbs-forex.html' target="_blank"><div style="text-align: left;">Cara Daftar Forex Dibroker Forex Yang Depositnya Bisa Lewat Transfer ATM Bank BRI, BNI, BCA, NISP & Mandiri</div></a></li

</ul></li>

<li><a href='/''><span style="color: white;"><!--Free Tutorial--></span></a>

<ul>

<!--<li><a href='/'><div style="text-align: left;">Averaging</div></a></li>

<li><a href='/'><div style="text-align: left;">Martingale</div></a></li>

<li><a href='/'><div style="text-align: left;">Piramide</div></a></li>-->

</ul></li>

</ul>

Sebaiknya trik cara membuat menu dropdown halaman statis blog di atas kamu coba saja semuanya! yang mana hasilnya yang paling bagus, silahkan kamu pilih untuk kamu gunakan membuat menu dropdown halaman statis blog kamu.

Demikianlah share dari saya tentang cara membuat menu dropdown halaman statistik blog, semoga bermanfaat.