Selamat Datang Di Blog Bisnis Online Terpercaya www.maslukis.com


Kamis, 03 November 2016

Membuat Menu Blog Vertikal Mudah Dan Cantik


Membuat Menu Blog Vertikal Mudah Dan Cantik
Untuk mempermudah pengunjung blog menjelajahi semua artikel yang ada pada blog tidak lain adalah adanya menu yang di sediakan oleh pemilik blog,selain itu menu juga akan memberi kesan profesional seorang pemilik blog karena berusaha membuat seorang pengunjung agar merasa lebih mudah untuk memilih artikel yang di tuju.Untuk membuat menu vertikal sangat mudah anda hanya kang roni minta untuk mengikuti beberapa langkah saja.

Langkah-langkah membuat menu vertikal pada blog

1.Masuk Blogger.com -->Klik Rancangan -->Pilih tab Edit HTML.
2.Download Template Lengkap Sebelum mengedit template Anda.
3.Beri centang pada kotak Expand Template Widget.
4.Cari kode ]]></b:skin> (untuk mempermudah pencarian tekan tombol F3 dan masukkan kode yang dicari pada kolom pencarian)
5.Selanjutnya taruh kode dibawah ini tepat di atas kode ]]></b:skin> yang baru anda temukan tadi.

.glossymenu, .glossymenu li ul{

list-style-type: none;

margin: 0;

padding: 0;

width: 185px; /*WIDTH OF MAIN MENU ITEMS*/

border: 1px solid black;

}

.glossymenu li{

position: relative;

}

.glossymenu li a{

background: white url('http://i580.photobucket.com/albums/ss241/nobhita/green1.gif') repeat-x bottom left;

font: bold 12px Verdana, Helvetica, sans-serif;

color: white;

display: block;

width: auto;

padding: 5px 0;

padding-left: 10px;

text-decoration: none;

}

.glossymenu li ul{

position: absolute;

width: 190px;

left: 0;

top: 0;

display: none;

}

.glossymenu li ul li{

float: left;

}

.glossymenu li ul a{

width: 180px;

}

.glossymenu li a:visited, .glossymenu li a:active{

color: white;

}

.glossymenu li a:hover{

background-image: url('http://i580.photobucket.com/albums/ss241/nobhita/green2.gif');

}


* html .glossymenu li { float: left; height: 1%; }

* html .glossymenu li a { height: 1%; }

6.Save template.Setelah anda menyimpannya anda harus kembali lagi pada halaman Rancangan ->Pilih dan klik Tambah Gadget di lokasi yang anda inginkan,selanjutnya pilih dan klik HTML/JavaScript dan masukkan kode dibawah ini kedalamnya.

<ul id="vertical menu Edit By antok" class="glossymenu">

<li><a href="/">Home</a></li>

<li><a href="http://www.blogmaslukis.blogspot.com/">Ubah dgn judul Menu</a></li>

<li><a href="http://www.blogmaslukis.blogspot.com/">Ubah dgn judul menu</a></li>

<li><a href="http://www.blogmaslukis.blogspot.com/">Ubah dgn Judul Menu</a></li>

</li>

</ul>

7.Simpan dan lihat hasilnya untuk Langkah-langkah membuat menu vertikal pada blog.
Ket:Untuk kode dengan warna merah ganti dengan Url/link halaman yang anda tuju dan kode dengan warna biru di atas boleh anda edit untuk menyesuaikan tampilan halaman blog.


Baca Juga:

Comments
0 Comments

0 komentar:

Posting Komentar

 
Copyright © 2018. Info Hari Ini . All Rights Reserved
Jl. Delta Raya Utara Kav. 49 - 51 Deltasari Baru, Sidoarjo, Jawa Timur, Indonesia 61256
PT. Bimasakti Multi Sinergi