Cara membuat menu vertikal pada blogspot merupakan hal yang sangat menarik untuk anda karena akan membuat tampilan blog anda semakin rapi dan menarik. Silahkan praktekin langsung berikut coding yang anda perlukan dan dijamin BERHASIL . . .
Gunakan coding Cara membuat menu vertikal pada blogspot berikut :
CODING CSS :
Note: URL yang berwarna merah pada coding CSS diatas bisa diubah sendiri dengan cara mengganti alamat URL tersebut.
CODING HTML :
CARA PAKAI :
1.Buka pengaturan template blog anda.
2.Pilih edit html blog.
3.Jangan lupa centang expand yang ada diatas editor html .
4.Cari coding html </head> .
4.Letakkan kode CSS diatas tepat diatas </head>.
5.buka kembali pengaturan blog anda.
6.Pilih tataletak blog.
7.Pada tataletak blog anda silihkan pilih tambah gadget blog
8.Dan letakkan kode html diatas pada gadget html dan java script
9.Gantilah Tanda pagar berwarna biru diatas dengan alamat URL tujuan Anda.
10.SAVE
NOTE :
Bagi Anda yang masih bingung untuk menggunakan coding diatas silahkan berkomentar dibawah ini atau langsung E-mail saya di : halim.byregar@gmail.com.
THANKS telah berkunjung di: www.blogger-paluta.blogspot.com
Gunakan coding Cara membuat menu vertikal pada blogspot berikut :
CODING CSS :
<!--www.blogger-paluta.blogspot.com-->
<style type="text/css">
#menu4 {width: 200px;margin: 10px;border-style: solid solid none solid;border-color: #000;border-size: 1px;border-width: 1px;}
#menu4 ul {list-style: none;margin: 0;padding: 0;}
#menu4 li a {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 80%;font-weight: bold;height: 32px;voice-family: "\"}\""; voice-family: inherit;height: 24px;text-decoration: none;}
#menu4 li a:link, #menu4 li a:visited {color: #CCC;display: block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjolWKGN4b7sRfpHOi9-pQnJ5W4Bk4m3brXuGrYc76npREDYC8TxCifKw-vJsKggpIp-Rd-T4Vhjcf7cLy2NFy7AgUEbWHkmelNZ7fNj0DMZnPF1LzocpRa8GNwmTILIE01uOOtJqqYh3I/s1600/menu4.gif);padding: 8px 0 0 10px;}
#menu4 li a:hover, #menu4 li #current {color: #FFF;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjolWKGN4b7sRfpHOi9-pQnJ5W4Bk4m3brXuGrYc76npREDYC8TxCifKw-vJsKggpIp-Rd-T4Vhjcf7cLy2NFy7AgUEbWHkmelNZ7fNj0DMZnPF1LzocpRa8GNwmTILIE01uOOtJqqYh3I/s1600/menu4.gif) 0 -32px;padding: 8px 0 0 10px;}
</style>
<style type="text/css">
#menu4 {width: 200px;margin: 10px;border-style: solid solid none solid;border-color: #000;border-size: 1px;border-width: 1px;}
#menu4 ul {list-style: none;margin: 0;padding: 0;}
#menu4 li a {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 80%;font-weight: bold;height: 32px;voice-family: "\"}\""; voice-family: inherit;height: 24px;text-decoration: none;}
#menu4 li a:link, #menu4 li a:visited {color: #CCC;display: block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjolWKGN4b7sRfpHOi9-pQnJ5W4Bk4m3brXuGrYc76npREDYC8TxCifKw-vJsKggpIp-Rd-T4Vhjcf7cLy2NFy7AgUEbWHkmelNZ7fNj0DMZnPF1LzocpRa8GNwmTILIE01uOOtJqqYh3I/s1600/menu4.gif);padding: 8px 0 0 10px;}
#menu4 li a:hover, #menu4 li #current {color: #FFF;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjolWKGN4b7sRfpHOi9-pQnJ5W4Bk4m3brXuGrYc76npREDYC8TxCifKw-vJsKggpIp-Rd-T4Vhjcf7cLy2NFy7AgUEbWHkmelNZ7fNj0DMZnPF1LzocpRa8GNwmTILIE01uOOtJqqYh3I/s1600/menu4.gif) 0 -32px;padding: 8px 0 0 10px;}
</style>
Note: URL yang berwarna merah pada coding CSS diatas bisa diubah sendiri dengan cara mengganti alamat URL tersebut.
CODING HTML :
<div id="menu4">
<ul>
<!--www.blogger-paluta.blogspot.com-->
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Order</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<ul>
<!--www.blogger-paluta.blogspot.com-->
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Order</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
CARA PAKAI :
1.Buka pengaturan template blog anda.
2.Pilih edit html blog.
3.Jangan lupa centang expand yang ada diatas editor html .
4.Cari coding html </head> .
4.Letakkan kode CSS diatas tepat diatas </head>.
5.buka kembali pengaturan blog anda.
6.Pilih tataletak blog.
7.Pada tataletak blog anda silihkan pilih tambah gadget blog
8.Dan letakkan kode html diatas pada gadget html dan java script
9.Gantilah Tanda pagar berwarna biru diatas dengan alamat URL tujuan Anda.
10.SAVE
NOTE :
Bagi Anda yang masih bingung untuk menggunakan coding diatas silahkan berkomentar dibawah ini atau langsung E-mail saya di : halim.byregar@gmail.com.
THANKS telah berkunjung di: www.blogger-paluta.blogspot.com
0 komentar:
Silahkan tinggalkan komentar sobat dan dapatkan backlink satu arah langsung ke blog sobat dengan widget top komentator yang saya pasang di sidebar blog ini. Caranya dengan menjadi pemberi komentar terbanyak di blog ini, tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.