Senantiasa Belajar Cara menambahkan Menu Vertikal Keren Buat Blog Anda
Bila Para Sobat Tertarik Silahkan Sobat Ikuti Langkat Berikut:
sangat Mudah
1. shobat Login Ke Blogg Lalu Pergi KE ke Dashboard> Layout>>> dan di halaman Elemen Halaman, klik Tambah Gadget dan pilih HTML / JavaScript Tambahkan lalu copy kode berikut dan paste di area Konten HTML / JavaScript.
<style type="text/css">
/* Made By AllBlogTools.com */
#ddblueblockmenu{
border: 1px solid #000000; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff; /* Menu Font Color */
background-color: #2175bc; /*Menu background Color */
border-bottom: 1px solid #90bade; /*Bottom border color */
border-left: 7px solid #1958b7; /*Left border color */
list-style-type:none;
}
* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}
#ddblueblockmenu a:hover {
background-color: #2586d7; /*Menu background Color On Hover*/
border-left-color: #1c64d1; /*Left border color On Hover*/
}
#ddblueblockmenu div.menutitle{
color: #ffffff; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000; /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/* Made By AllBlogTools.com */
</style>
<div id="ddblueblockmenu">
<div class="menutitle">Browse</div>
<ul>
<a href="http://www.allblogtools.com/">Home</a>
<a href="http://www.allblogtools.com/about/">About us</a>
<a href="http://www.allblogtools.com/category/blogger-templates/">Blogger
templates</a>
<a href="http://www.allblogtools.com/category/tricks-and-hacks/">Blogger
Tricks</a>
<a href="http://www.allblogtools.com/blogger-tools/">Blogger Tools</a>
<a href="#">Edit</a></* You can copy this line each time you want to add a new element to your menu and change Edit to your text and change# to the url.*/>
</ul></div><font size="1">Menu By <a
href="http://www.allblogtools.com/">AllBlogTools.com</a></font>
Bila Para Sobat Tertarik Silahkan Sobat Ikuti Langkat Berikut:
sangat Mudah
1. shobat Login Ke Blogg Lalu Pergi KE ke Dashboard> Layout>>> dan di halaman Elemen Halaman, klik Tambah Gadget dan pilih HTML / JavaScript Tambahkan lalu copy kode berikut dan paste di area Konten HTML / JavaScript.
<style type="text/css">
/* Made By AllBlogTools.com */
#ddblueblockmenu{
border: 1px solid #000000; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff; /* Menu Font Color */
background-color: #2175bc; /*Menu background Color */
border-bottom: 1px solid #90bade; /*Bottom border color */
border-left: 7px solid #1958b7; /*Left border color */
list-style-type:none;
}
* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}
#ddblueblockmenu a:hover {
background-color: #2586d7; /*Menu background Color On Hover*/
border-left-color: #1c64d1; /*Left border color On Hover*/
}
#ddblueblockmenu div.menutitle{
color: #ffffff; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000; /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/* Made By AllBlogTools.com */
</style>
<div id="ddblueblockmenu">
<div class="menutitle">Browse</div>
<ul>
<a href="http://www.allblogtools.com/">Home</a>
<a href="http://www.allblogtools.com/about/">About us</a>
<a href="http://www.allblogtools.com/category/blogger-templates/">Blogger
templates</a>
<a href="http://www.allblogtools.com/category/tricks-and-hacks/">Blogger
Tricks</a>
<a href="http://www.allblogtools.com/blogger-tools/">Blogger Tools</a>
<a href="#">Edit</a></* You can copy this line each time you want to add a new element to your menu and change Edit to your text and change# to the url.*/>
</ul></div><font size="1">Menu By <a
href="http://www.allblogtools.com/">AllBlogTools.com</a></font>
Sekarang klik Simpan Dan Anda selesai, silakan cek blog Anda.
Sekarang kita akan mempelajari bagaimana untuk menyesuaikan warna menu untuk saya itu tampak sempurna dengan template blogger Anda Atau Anda hanya dapat meninggalkan sebagai Anda melihatnya.
Sesuaikan warna menu.
Sekarang silahkan lihat pada kode di atas, Anda akan melihat beberapa kode yang ditulis dalam warna. dalam kode di atas saya dijelaskan apa yang bertanggung jawab untuk setiap bagian. Semua apa yang harus Anda lakukan adalah pergi ke hex generator kami Html warna Dan mendapatkan kode warna favorit Anda kemudian paste bukan kode warna dalam kode di atas.
Sebagai contoh jika Anda ingin mengubah warna latar belakang menu.
Anda akan menemukan sebuah baris yang mengatakan
background-color: # 2175bc; / * Menu Warna latar belakang * /
Hanya mengubah 2175bc untuk kode warna favorit Anda yang Anda mendapatkannya dari hex warna Html generator kami disini
Jika Anda menemukan kode di atas membingungkan atau tidak dapat memahami apa yang di nama elemen dalam menu, silahkan periksa gambar berikutnya.
trims"
senantiasa belajar";
keyword:"Cara menambahkan Menu Vertikal,Cara Membuat Menu Vertikal Dengan CSS,Cara Membuat Menu Vertikal Dengan Icon,Cara Membuat Menu Navigasi Slide,Membuat menu horizontal dan sub menu vertikal blogspot"
Cara menambahkan Menu Vertikal,Cara Membuat Menu Vertikal Dengan CSS,Cara Membuat Menu Vertikal Dengan Icon,Cara Membuat Menu Navigasi Slide,Membuat menu horizontal dan sub menu vertikal blogspot"
ReplyDelete