Kamis, 05 April 2018

Cara Membuat dan Pasang Menu Dropdown pada Blog

Cara Membuat dan Pasang Menu Dropdown pada Blog

Cara Membuat dan Pasang Menu Dropdown pada Blog
Blog Mang Otep | Menu ini biasanya berisi label atau Katoegori artikel anda, Cara Membuat dan Memasang Menu Standart dan juga Menu Dropdown pada Blog merupakan bentuk dasar tampilan blog. Menu ini berfungsi untuk pembimbing navigasi blog anda untuk para visitor. Dengan adanya menu ini diharapkan para visitor lebih dengan mudah mencari artikel yang sesuai label blog anda.

Dalam membuat menu terdapat 2 komponen penting yang harus bersinkronasi satu sama lain yaitu : CSS dan HTML, anda bisa mempelajari hal tersebut dengan banyak berlatih bagaiman fungsi dari kedua komponen tersebut.

Konsep dasarnya untuk template blogspot sudah terdapat bagian ini dan kita tinggal edit URL label dan Nama yang kita inginkan. Tetapi jika tidak mengetahui dasarnya akan sangat sulit menentukkan bagaimana cara memasang menu ini. Untuk lebih dalam mari kita lihat bagaimana cara membuat dan memasang tab menu pada blog anda ini adalah sebagai berikut.

Cara Membuat dan Pasang Menu Dropdown pada Blog :

1. Masuk ke blogger.com
2. Pilih blog yang ingin anda tambahkan menu.
3. Masuk ke edit HTML
4. Cari kode ]]</b:skin> lalu pastekan kode CSS dibawah ini tepat diatasnya.


nav{text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;background:#e74c3c}
nav *{margin:0 0 0 0;padding:0 0 0 0;list-style:none}
nav ul{overflow:hidden;background:rgba(231,76,60,0.84);float:left}
nav li{float:left;display:inline}
nav li a{padding:3px 15px;line-height:40px;color:#fff!important;display:block;text-decoration:none}
nav li a:hover{background:rgba(231,76,60,0.84)!important}
nav li ul{display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s}
nav li li{display:block;float:none;width:100%}
nav li:hover > ul{visibility:visible;width:200px;opacity:1}
nav li li ul{left:200px;margin-top:-40px}
nav li.sub > a{position:relative;padding-right:30px}
nav li.sub > a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px}
nav li.sub li.sub > a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px}

5. Kemudian pasang HTML untuk memanggil perintah CSS tadi. Letakkan kode dibawah ini dengan bebas dibawah <head>


<nav>
<ul>
<li><a href="/search/label/Tutorial">Tutorial</a></li>
<li class="sub"><a href="/search/label/Template">Template</a><ul>
<li><a href="/search/label/CSS3">CSS3</a></li>
<li><a href="/search/label/HTML5">HTML5</a></li>
<li><a href="/search/label/Responsive">Responsive</a></li>
<li><a href="/search/label/SEO">SEO</a></li>
</ul>
</li>
</ul>
<select class="nav2" id="nav2" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="/">Home</option>
<option value="/search/label/Tutorial">Tutorial</option>
<option value="/search/label/Template">Template</option>
<option value="/search/label/CSS3">- CSS3</option>
<option value="/search/label/HTML5">- HTML5</option>
<option value="/search/label/Responsive">- Responsive</option>
<option value="/search/label/SEO">- SEO</option>
</select>
</nav>

Pada html diatas gantilah warna Biru dengan LABEL blog anda gan ganti warna MERAH dengan teks menu yang anda inginkan. untuk pengaturan lebih jauh anda bisa merubah ukuran pada kode CSS untuk menyesuaikan dengan template yang anda gunakan. anda juga bisa mengatur letak menu sesuai yang anda mau.

Dan pada kode HTML ingatlah baik - baik kode pembuka dan penutup seperti diatas, jangan sampai tertinggal satu kode pun karena bisa berakibat error dan tidak bisa menyimpang template yang anda sudah sesuaikan.

Demikianlah info dari Blog mang Otep tentang artikel Cara Membuat dan Pasang Menu Dropdown pada Blog ini, semoga bisa menambah wawasan pengetahuan anda. Jika anda menyukai artikel dari Blog Mang Otep silahkan klik like and subscribe untuk mendapatkan artikel terbaru.
Terimakasih. Salam Blogger.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments