Cara Membuat Menu Drop Down Bar di Blogger
KIta Jumpa lagi nih sob, ini masih sama tentang Tips and trick blogger kik disini untuk mengetahui beberapa kumpulan tips and trick blogger. Para blogger atau blogging memungkinkan pengguna untuk menyesuaikan blog mereka menggunakan HTML dan CSS kode. Yang pertama mengacu pada kode yang diperlukan untuk membangun bentuk, menambahkan tombol dan menampilkan informasi, sedangkan yang kedua mengacu pada kode yang dibutuhkan untuk elemen seperti gaya dan mengilhami mereka dengan warna, perbatasan dan latar belakang. Keduanya dibutuhkan untuk membuat menu bar drop-down di Blogger.
Langsung saja ya, tak perlu banya basa basi, Simak ya gan.
Langkah 1
Login ke dashboard Blogger Anda, klik tombol "Design" yang berkaitan dengan blog yang ingin menyesuaikan, pilih "Edit HTML" pilihan dan periksa tombol di samping "Expand Template Widget."
Langkah 2
Cari untuk "]]> </ b: skin>" tag dan masukkan kode berikut tepat di atasnya:
/* Navigation Menu ------------------------------------------------------*/ #NavbarMenu {
width: 100%; height: 35px; background:#cdaa7d url(http://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.png) repeat-x top; color: #cdaa7d margin: 0 auto 0; padding: 0; font: normal 12px Arial, Tahoma, Verdana; border-top: 1px solid #855e42; border-bottom: 1px solid #855e42; } #NavbarMenuleft { width: 1200px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { color: #ff0000; display: block; text-transform: capitalize; margin: 0; padding: 9px 15px 8px; font: bold 12px Arial, Tahoma, Verdana; } #nav li a:hover, #nav li a:active { background:#ffffff; color: #8b5a00; margin: 0; padding: 9px 15px 8px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #cdaa7d url(http://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.png) repeat-x top; width: 140px; color: #fff; text-transform: capitalize; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #855e42; border-left: 1px solid #855e42; border-right: 1px solid #855e42; font: normal 12px Arial, Tahoma, Verdana; } #nav li li a:hover, #nav li li a:active { background: #ffffff; color: #8b5a00; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
Langkah 3
Masukkan kode berikut tepat setelah "/ b: section - / div" tag:
<div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='#'>SECTION</a> <ul> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> </ul> </li> </ul> </div> </div> <!-- end navbar -->
Langkah 4
Ganti "URL" (s) dengan URL yang berkaitan dengan halaman blog anda. Demikian juga, menggantikan "BAGIAN" (s) dengan label menu yang sesuai.
Langkah 5
Tambahkan sub-menu tambahan dengan menyisipkan kode berikut antara
<li> <a href='http://URL'> BAGIAN </a> </ li> </ ul> </ li>
dan</ ul> </ div> </ div> <! - end navbar ->
:<li> <a href='#'> BAGIAN TAMBAHAN </a> <ul> <li> <a
href='http://URL'> BAGIAN </a> </ li> <li> <a
href = 'http: // URL'> BAGIAN </a> </ li> <li> <a
href='http://URL'> BAGIAN </a> </ li> <li> <a
href = 'http: // URL '> BAGIAN </a> </ li> <li> <a
href='http://URL'> BAGIAN </a> </ li> </ ul> </ li>
Langkah 6
Simpan perubahan di atas dan lihat hasilnya,,
Selamat mencoba, semoga dengan apa yang saya tulis ini bisa membantu dan bermanfaat untuk anda.
Baca juga kumpulan tips dan trick Blogger
Kumpulan Aplikasi Android dan game
Langsung saja ya, tak perlu banya basa basi, Simak ya gan.
Langkah 1
Login ke dashboard Blogger Anda, klik tombol "Design" yang berkaitan dengan blog yang ingin menyesuaikan, pilih "Edit HTML" pilihan dan periksa tombol di samping "Expand Template Widget."
Langkah 2
Cari untuk "]]> </ b: skin>" tag dan masukkan kode berikut tepat di atasnya:
/* Navigation Menu ------------------------------------------------------*/ #NavbarMenu {
width: 100%; height: 35px; background:#cdaa7d url(http://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.png) repeat-x top; color: #cdaa7d margin: 0 auto 0; padding: 0; font: normal 12px Arial, Tahoma, Verdana; border-top: 1px solid #855e42; border-bottom: 1px solid #855e42; } #NavbarMenuleft { width: 1200px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { color: #ff0000; display: block; text-transform: capitalize; margin: 0; padding: 9px 15px 8px; font: bold 12px Arial, Tahoma, Verdana; } #nav li a:hover, #nav li a:active { background:#ffffff; color: #8b5a00; margin: 0; padding: 9px 15px 8px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #cdaa7d url(http://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.png) repeat-x top; width: 140px; color: #fff; text-transform: capitalize; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #855e42; border-left: 1px solid #855e42; border-right: 1px solid #855e42; font: normal 12px Arial, Tahoma, Verdana; } #nav li li a:hover, #nav li li a:active { background: #ffffff; color: #8b5a00; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
Langkah 3
Masukkan kode berikut tepat setelah "/ b: section - / div" tag:
<div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='#'>SECTION</a> <ul> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> </ul> </li> </ul> </div> </div> <!-- end navbar -->
Langkah 4
Ganti "URL" (s) dengan URL yang berkaitan dengan halaman blog anda. Demikian juga, menggantikan "BAGIAN" (s) dengan label menu yang sesuai.
Langkah 5
Tambahkan sub-menu tambahan dengan menyisipkan kode berikut antara
<li> <a href='http://URL'> BAGIAN </a> </ li> </ ul> </ li>
dan</ ul> </ div> </ div> <! - end navbar ->
:<li> <a href='#'> BAGIAN TAMBAHAN </a> <ul> <li> <a
href='http://URL'> BAGIAN </a> </ li> <li> <a
href = 'http: // URL'> BAGIAN </a> </ li> <li> <a
href='http://URL'> BAGIAN </a> </ li> <li> <a
href = 'http: // URL '> BAGIAN </a> </ li> <li> <a
href='http://URL'> BAGIAN </a> </ li> </ ul> </ li>
Langkah 6
Simpan perubahan di atas dan lihat hasilnya,,
Selamat mencoba, semoga dengan apa yang saya tulis ini bisa membantu dan bermanfaat untuk anda.
Baca juga kumpulan tips dan trick Blogger
Kumpulan Aplikasi Android dan game
Post a Comment for "Cara Membuat Menu Drop Down Bar di Blogger"