Dalam posting ini saya memiliki tipe yang unik sangat dingin dan dalam banyak drop down untuk Css Blogger . Penurunan biasa down kita digunakan untuk melihat kehendak bila link melayang di atas link layar lebih vertikal below.This menu namun dikenal sebagai 'Bar Drop' sebagai di hover akan menampilkan link horizontal di sebuah bar di bawah menu.I telah mencari sesuatu seperti ini dan sementara saya menemukan beberapa jQuery versi bertenaga tetapi saya cintai ini karena hanya menggunakan Css, sehingga tidak ada script atau tambah waktu buka ke blog Anda dan lebih mudah untuk implement.Also menu memiliki memperbaiki besar untuk Internet Explorer tua teman kita yang biasanya memainkan ketika Css adalah used.I telah menguji kembali ke IE6 dan tampaknya fine.Your mungkin masih bertanya-tanya bagaimana ini akan menampilkan link horizontal bukan vertikal sehingga saya punya screenshot dan live demo Anda dapat melihat di bawah ini.
Konsep menu dari mengagumkan Buka Menu Css Gratis , saya akan mencakup lebih dari menu mereka dalam future.Now mari kita lihat bagaimana menambahkan satu ini ke blog Anda!
Tambahkan Drop Down Menu Bar Untuk Blogger
Ingat Back Up Template Anda Sebelum Anda Membuat Perubahan
Langkah 1. Pada Dashboard Blogger Anda Desain Klik> Edit HTML
Langkah 2. Cari potongan kode berikut di blog Anda Html: (Klik Ctrl dan F untuk bar pencarian untuk membantu menemukan kode
Langkah 3. Salin dan sisipkan kode berikut Langsung Di atas / sebelum]]> </ b: skin>
.nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQurinlZJx_ayxNu94B_MFeL-rNmaygOL0NuHXpvjbB_3LNUIImmPsd1SNhR6tffaZgS9UcjhpPMnKNGArcsMRi8Jy7lsp1WCIMfReAdN7AExFUTsvdn7Os09Yp3HfGHdbXXNRUmM4sYYL/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}
.nav .table {
display:table;
margin:0 auto;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQurinlZJx_ayxNu94B_MFeL-rNmaygOL0NuHXpvjbB_3LNUIImmPsd1SNhR6tffaZgS9UcjhpPMnKNGArcsMRi8Jy7lsp1WCIMfReAdN7AExFUTsvdn7Os09Yp3HfGHdbXXNRUmM4sYYL/s1600/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#2b3238;
}
.nav .select a:hover,
.nav .select li:hover a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH80Tw470d8_dG-gpRnuZ_5OgZ02_oxv4Y5JJoaqmnTKUxvH1e1drTmjS82byiXQxtYC8Njd37UOx-p2b_E88IjJu6cXlnvYa9ggZlrFURk1jlor4UcBdI9Lt_LkexatX-3wIx4AezYjP9/s1600/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#2b3238;
}
.nav .select a b{
font-weight:bold;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH80Tw470d8_dG-gpRnuZ_5OgZ02_oxv4Y5JJoaqmnTKUxvH1e1drTmjS82byiXQxtYC8Njd37UOx-p2b_E88IjJu6cXlnvYa9ggZlrFURk1jlor4UcBdI9Lt_LkexatX-3wIx4AezYjP9/s1600/hover.gif) right top;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg720KU4ionDZw0RFnuIrE50b8wPa6rgur0cPapNyvVjrfOb8KAQaZKD_-449P5Jtj9DqL3C39b3F7_TBCTWx0D7RmPv6aUvr0EN5G03Z9CejI1TtKEbhCkn3vYgFtsMb1xsA_0p2wqKPJV/s1600/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}
.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}
.nav .select .sub li a {
font-weight:normal;
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#73a0d2;
}
<!--[if IE]>
.nav ul {display:inline-block;}
.nav ul {display:inline;}
.nav ul li {float:left;}
.nav {text-align:center;}
.nav .select a:hover b,
.nav .select li:hover a b {float:none;}
<![endif]-->
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQurinlZJx_ayxNu94B_MFeL-rNmaygOL0NuHXpvjbB_3LNUIImmPsd1SNhR6tffaZgS9UcjhpPMnKNGArcsMRi8Jy7lsp1WCIMfReAdN7AExFUTsvdn7Os09Yp3HfGHdbXXNRUmM4sYYL/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}
.nav .table {
display:table;
margin:0 auto;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQurinlZJx_ayxNu94B_MFeL-rNmaygOL0NuHXpvjbB_3LNUIImmPsd1SNhR6tffaZgS9UcjhpPMnKNGArcsMRi8Jy7lsp1WCIMfReAdN7AExFUTsvdn7Os09Yp3HfGHdbXXNRUmM4sYYL/s1600/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#2b3238;
}
.nav .select a:hover,
.nav .select li:hover a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH80Tw470d8_dG-gpRnuZ_5OgZ02_oxv4Y5JJoaqmnTKUxvH1e1drTmjS82byiXQxtYC8Njd37UOx-p2b_E88IjJu6cXlnvYa9ggZlrFURk1jlor4UcBdI9Lt_LkexatX-3wIx4AezYjP9/s1600/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#2b3238;
}
.nav .select a b{
font-weight:bold;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH80Tw470d8_dG-gpRnuZ_5OgZ02_oxv4Y5JJoaqmnTKUxvH1e1drTmjS82byiXQxtYC8Njd37UOx-p2b_E88IjJu6cXlnvYa9ggZlrFURk1jlor4UcBdI9Lt_LkexatX-3wIx4AezYjP9/s1600/hover.gif) right top;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg720KU4ionDZw0RFnuIrE50b8wPa6rgur0cPapNyvVjrfOb8KAQaZKD_-449P5Jtj9DqL3C39b3F7_TBCTWx0D7RmPv6aUvr0EN5G03Z9CejI1TtKEbhCkn3vYgFtsMb1xsA_0p2wqKPJV/s1600/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}
.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}
.nav .select .sub li a {
font-weight:normal;
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#73a0d2;
}
<!--[if IE]>
.nav ul {display:inline-block;}
.nav ul {display:inline;}
.nav ul li {float:left;}
.nav {text-align:center;}
.nav .select a:hover b,
.nav .select li:hover a b {float:none;}
<![endif]-->
Langkah 4. Simpan template Anda.
Css selanjutnya menambahkan html untuk menu Anda.
Sekarang, masuklah ke Halaman Desain Anda blog, kami akan menambahkan menu di blog Anda di bawah area header.This disebut Kolom Cross dan dapat dilihat pada gambar below.If blog Anda tidak memiliki bagian ini tersedia, anda dapat melihat cara mengaktifkan sini -
Tambahkan Para Html menu
Pada Page Desain blog Anda klik Tambah Gadget> Pilih Html / Javascript> Salin dan sisipkan kode berikut ke dalam gadget Html / Javascript:
<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Ini adalah kode untuk membangun menu Replace tag hash (#) dengan link dan teks.If Anda anda akan melihat cara kerjanya Jika Anda ingin menambahkan link yang Anda dapat dengan cara yang sama,. untuk melihat tata letak dari kode dan Anda akan melihat bagaimana yang dilakukan.
Template Tab Designer Perbaiki
Jika Anda menggunakan template dari Blogger Template Designer ada bagian dari Css yang akan mempengaruhi ini atau menu yang Anda tempatkan di kolom section.This lintas disebut tab dan Anda akan perlu untuk menghapus atau lebih naik css.I tab memiliki membuat video singkat untuk menunjukkan cara untuk menghapus it.You dapat melihat video di sini - Hapus Tab Css .
Tidak ada komentar:
Posting Komentar