Lokasi : Komplek Graha Bukit Raya 1 Blok G3 No 16 LT 3, Bandung Barat

Lokasi : Komplek Graha Bukit Raya 1 Blok G3 No 16 LT 3, Bandung Barat

VIDEO TUTORIAL MIKROTIK VIDEO + MODUL TRAINING ORDER BISA VIA TOKOPEDIA KLIK LINK GAMBAR

VIDEO TUTORIAL MIKROTIK  VIDEO + MODUL TRAINING ORDER BISA  VIA TOKOPEDIA KLIK LINK GAMBAR
Update Video Tutorial > Lebih dari 350 Video Tutorial MIkrotik

Jadwal Training Mikrotik Running Setiap Awal dan Akhir Bulan

Excel Fundamental, Excel Advanced, Dan Excel Programming VBA

IT TRAINING CENTER CONTACT : 0812-1451-8859 / 081-1219-8859

Cara Mudah Membuat Menu Drop Down Horizontal di Blogger


Fungsi  Dibuatnya Menu DropDown adalah ketika anda sudah mempunyai konten yang banyak dan ingin mempermudah pengunjung dalam mengakses artikel atau page/halaman yang anda pilih.  sehingga  konten blog anda lebih terorganisir. Untuk membuat menu Dropdown Horizontal di blogger langkahnya adalah sebagai berikut 

1.       Login Ke Blogger
2.       Klik  Menu Template > Edit HTML
3.       Setelah kotak dialog edit HTML muncul centang  expland template widget


      4.       Selanjutnya tekan ctrl+F untuk melakukan pencarian kode dan cari ]]></b:skin>


5.       Letakan Kode ini diatas ]]></b:skin>


/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESDti5d_RDndO-OWUMjoI7OfnGGLa0Cq9YSArd4QZdTvw-Xj9sSUZZIxEXcniZrzikPiV8sF5sWgrHvLWR_NF1e7t02nxu9b_5iZJv8Gf5wEcy3w8G9a1ibDz5ePWbCCJUPX3TefRHWG1/s1600/navi.png) repeat-x;width:1060px;margin:0 auto;padding:0 auto} #menuwrapper{width:1060px;height:37px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding: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:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKNy1qW9WbBNFy835nhh1pfTgjWbehqOJZBancBgJMh8ryAgC3T9j_FTZI2dwjnHf2fCME8JMgXE4CDWveVdMsaZOUNY9-Fi2RaYgA3_gpd3MlFg7kbOJt0MiQjDk5V2jQ85Qy8aibhqo/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:12px;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:#222;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:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;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:#555!important;color:#fff!important;text-decoration:none}

6.       Selanjutnya Klik Simpan Template
7.       Langkah Selanjutnya kita akan membuat menu drop down nya, masuk ke menu tata letak dan tambahkan Gadget HTML/JavaScript


8.       Klik Tombol + dan Masukan Script ini

<div id='menuwrapperpic'>

<div id='menuwrapper'>

<ul id='menubar'>

  <li><a href='http://padepokan-it.blogspot.com/search/label/Apex'>Apex</a></li>

  <li><a class='trigger'>Database</a>

    <ul>

      <li><a href='http://padepokan-it.blogspot.com/search/label/Konsep%20Database'>Konsep Database</a>  </li>

      <li class='hr'/>

      <li><a href='http://padepokan-it.blogspot.com/search/label/SQL'>SQL,PL/SQL</a></li>

      <li class='hr'/>

      <li><a href='http://padepokan-it.blogspot.com/search/label/Oracle'>Oracle</a></li>

      <li class='hr'/>

      <li><a href='#'>SQL Server</a></li>

      <li class='hr'/>

      <li><a href='http://padepokan-it.blogspot.com/search/label/PostgreSQL'>PostgreSQL</a></li>

      <li class='hr'/>

      <li><a href='http://padepokan-it.blogspot.com/search/label/MySQL'>MySQL</a></li>

      </li></li></li></li></li></ul>

    </li>



  <li><a class='trigger'>Jaringan</a>

    <ul>

      <li><a href='http://padepokan-it.blogspot.com/search/label/Konsep%20Jaringan'>Konsep Jaringan</a></li>

      <li class='hr'/>

      <li><a href='http://padepokan-it.blogspot.com/search/label/Network'>Jaringan LAN</a></li>

      <li class='hr'/>

      <li><a href='http://padepokan-it.blogspot.com/search/label/Wireless%20Network'>Jaringan Wireless</a></li>

      <li class='hr'/>

      <li><a href='http://padepokan-it.blogspot.com/search/label/Keamanan%20Jaringan'>Keamanan Jaringan</a></li>

      </li></li></li></ul>

    </li>

  <li><a class='trigger'>Sistem Operasi</a>

    <ul>

      <li><a href='http://padepokan-it.blogspot.com/search/label/Linux'>Linux</a></li>

      <li class='hr'/>

      <li><a href='http://padepokan-it.blogspot.com/search/label/Windows'>Windows</a></li>

      <li class='hr'/>

      <li><a href='http://padepokan-it.blogspot.com/search/label/Mikrotik'>Mikrotik</a></li>

     </li></li></ul>

    </li>

  <li><a href='http://padepokan-it.blogspot.com/search/label/Sistem%20Informasi'>Sistem Informasi</a></li>


  <li><a class='trigger'>Web Master</a>

    <ul>

      <li><a href='#'>Desain Web</a></li>

      <li class='hr'/>

      <li><a href='#'>Pemgrograman Web</a></li>

     </li></ul>

    </li>

     <li><a class='trigger'>Multimedia</a>

    <ul>

      <li><a href='#'>Desain Grafis</a></li>

      <li class='hr'/>

      <li><a href='#'>Animasi</a></li>

     </li></ul>

    </li>

     <li><a class='trigger'>Blackberry</a>

    <ul>

      <li><a href='#'>Themes</a></li>

      <li class='hr'/>

      <li><a href='#'>Software</a></li>

     </li></ul>

    </li>

     <li><a class='trigger'>Pemrograman</a>

    <ul>

      <li><a href='#'>Visual Basic</a></li>

      <li class='hr'/>

      <li><a href='#'>Delphi</a></li>

       <li class='hr'/>

      <li><a href='#'>MS Access</a></li>

     </li></li></ul>

    </li>

<li><a href='http://padepokan-it.blogspot.com/search/label/Tutorial%20Blog'>Blogger</a></li>

  </ul>

</div>

</div>

Catatan : Nama-Nama Menu Dan Linknnya sesuaikan dengan Blog anda

9.       Letakan Gadget Tersebut dibawah Laman

10.   Selanjutnya Simpan, dan lihat hasilnya seperti tampak pada gambar dibawah ini





Selamat Mencoba
Share

Artikel Lainnya :



No comments:

Post a Comment

Training Bulan ini

Padepokan IT Course

Lokasi Training
Jl. H.Gofur Komplek Graha Bukit Raya 1 Blok G3 No 16 Lantai 3, Cilame, Bandung Barat

Telp : 081214518859 (WhatsApp)
E-Mail : padepokanit.course@gmail.com
Instagram : @padepokanit
Website : www.padepokanit.com

Info Site

User Online Padepokan-IT Course

IT Tutorial, Training & IT Solution