Navigasi yang bagus dan jelas sangat penting untuk popularitas blog dan Seo. Sebuah blog yang memiliki navigasi yang jelas memiliki lebih banyak lalu lintas daripada blog yang memiliki navigasi yang tidak jelas karena pengunjung yang mengunjungi blog untuk konten yang diinginkan tidak dapat menemukannya. Navigasi bukan hanya tentang memiliki kategori untuk konten atau memiliki peta situs namun sebuah menu juga memainkan peran penting dalam navigasi blog. Karena blogger belum memberikan pilihan apapun untuk menambahkan menu secara langsung seperti wordpress dan situs lainnya maka blogger harus menambahkannya dari situs lain. Kita bisa menemukan sejumlah situs di internet yang menyediakan menu secara gratis namun sebagian besar dari menu ini tidak bekerja di blogger atau sangat sulit digunakan khusus untuk pemula sehingga sangat sulit untuk menambahkan menu di blogger.
Oleh karena itu saya telah berbagi hampir setiap jenis menu seperti menu accordian dengan gaya yang berbeda, menu pita yang dijahit , menu vertikal responsif dan menu horizontal responsif dengan tutorial langkah demi langkah jadi blogger apakah dia profesional atau pemula dia bisa menggunakan menu siapa saja yang telah saya bagikan di blognya dengan mudah hanya dengan mengikuti tutorial. Saya telah berbagi hampir setiap jenis menu di blog saya tapi beberapa hari yang lalu saya melihat menu mengambang bergaya responsif di blog dan saya melihat begitu banyak komentar pengunjung yang menanyakan menu itu jadi saya pikir bisa membaginya dengan Anda. Mungkin Anda sudah melihatnya karena sekarang setiap hari setiap webmaster dan blogger sedang mencoba sesuatu yang baru untuk membuat blog / situsnya mengesankan. Anda bisa melihat demo menu vertikal apung di bawah gambar animasi, semoga anda menyukainya:
Menu ini memiliki desain yang elegan, responsif dan stylish, bekerja pada Css namun meluncur / mengambang dengan jquery. Ini dihiasi oleh Css tapi untuk membuat efek mengambang saya telah menambahkan kode jquery. Anda bisa membuat efek sliding / floating di gadget apapun dengan menggunakan script yang sama dengan membaca postingan tentang cara membuat sidebar mengambang di blogger, disini saya sudah menunjukkan bagaimana membuat sidebar mengambang di blogger dan juga cara membuat gadget apung di blogger.
Cara menambahkan menu apung di blogger:
Untuk menambahkan menu ini di blog Anda ikuti langkah-langkah di bawah ini tapi sebelum itu ubah desain tata letak blog Anda karena Anda bisa melihat menu dropdown dari menu ini berada di sisi kanan karena itu Anda harus menambahkan menu ini dari sisi kiri blog Anda. Saya telah berbagi posting baru-baru ini dimana saya telah menunjukkan bagaimana mengubah desain layout di blogger, baca postingan di sini dan ganti layout design blog anda lalu ikuti langkah-langkah di bawah ini untuk membuatnya menambahkannya di blog anda membuatnya mengambang. Jika Anda sudah memiliki ruang untuk menambahkan gadget di sisi kiri blog Anda maka cukup ikuti langkah-langkah di bawah ini dan selesai:
Langkah 1: Pergi ke dashboard blogger.
Langkah 2: Klik pada layout pada menu di sebelah kiri.
Langkah 3: Klik pada menambahkan gadget, pastikan untuk menambahkan gadget di sisi kiri blog Anda jika Anda tidak memiliki ruang untuk menambahkan gadget di sisi kiri blog Anda lalu ikuti posting ini untuk memberi ruang bagi gadget di sisi kiri oleh mengubah gaya tata letak blog Anda.
Langkah 4: Bila Anda mengklik add a gadget, sebuah jendela kecil akan dibuka gulir ke bawah dan klik pada Html / javascript.
Langkah 5: Copy kode di bawah ini dan paste ke Html / javascript winodow:
<div id = 'cssmenu'>
<ul>
<li> <a href=' #'> <span> Home </ span> </a> </ li>
<li class = 'aktif memiliki-sub'> <a href=' #'> <span> Produk </ span> </a>
<ul>
<li class = 'memiliki-sub'> <a href=' #'> <span> Produk 1 </ span> </a>
<ul>
<li> <a href=' #'> <span> Sub Produk </ span> </a> </ li>
<li class = 'terakhir'> <a href=' #'> <span> Sub Produk </ span> </a> </ li>
</ ul>
</ li>
<li class = 'memiliki-sub'> <a href=' #'> <span> Produk 2 </ span> </a>
<ul>
<li> <a href=' #'> <span> Sub Produk </ span> </a> </ li>
<li class = 'terakhir'> <a href=' #'> <span> Sub Produk </ span> </a> </ li>
</ ul>
</ li>
</ ul>
</ li>
<li> <a href=' #'> <span> Tentang </ span> </a> </ li>
<li class = 'terakhir'> <a href=' #'> <span> Hubungi </ span> </a> </ li>
<li> <a href=' #'> <span> Peta Situs </ span> </a> </ li>
</ ul>
</ div>
Langkah 6: Klik save dan pindah ke langkah 7.
Langkah 7: Pilih template di menu dan klik Edit Html.
Langkah 8: Klik di manapun dalam kode Html dan cari ]]> </ b: skin> dengan menggunakan Ctrl + F pada keyboard Anda .
Langkah 9: Salin kode di bawah ini dan tempelkan di atas ]]> </ b: skin> :
@charset "UTF-8";
/ * Beberapa stylesheet reset * /
#cssmenu> ul {
daftar-gaya: tidak ada;
margin: 0;
padding: 0;
vertical-align: baseline;
garis-tinggi: 1;
}
/* Wadah */
#cssmenu> ul {
tampilan: blok;
posisi: relatif;
lebar: 150px;
/ * Daftar elemen yang berisi link * /
}
#cssmenu> dan {
tampilan: blok;
posisi: relatif;
margin: 0;
padding: 0;
lebar: 100%;
}
/ * General link styling * /
#cssmenu> ul li a {
/ * Layout * /
tampilan: blok;
posisi: relatif;
margin: 0;
border-top: 1px burik # 3a3a3a;
border-bottom: 1px burik # 1b1b1b;
padding: 11px 20px;
/ * Tipografi * /
font-family: Helvetica, Arial, sans-serif;
warna: # d8d8d8;
hiasan teks: tidak ada;
text-transform: huruf besar;
text-shadow: 0 1px 1px # 000;
ukuran font: 13px;
font-weight: 300;
/ * Latar Belakang & efek * /
latar belakang: # 282828;
}
/ * Sudut dibulatkan untuk link pertama dari menu / submenu * /
#cssmenu> ul li: anak pertama> a {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top: 0;
}
/ * Sudut dibulatkan untuk link terakhir dari menu / submenu * /
#cssmenu> ul li: last-child> a {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: 0;
}
/ * Status hover dari link menu / submenu * /
#cssmenu> ul li> a: hover,
#cssmenu> ul li: hover> a {
warna: #ffffff;
text-shadow: 0 1px 0 rgba (0, 0, 0, 0.3);
latar belakang: # 54cdf1;
background: -webkit-linear-gradient (# 72d4f2, # 54cdf1);
background: -moz-linear-gradient (# 72d4f2, # 54cdf1);
latar belakang: linear-gradien (# 72d4f2, # 54cdf1);
border-color: transparan;
}
/ * Panah yang menunjukkan submenu * /
#cssmenu> ul .has-sub> a :: after {
isi: "";
posisi: absolut;
atas: 16px;
kanan: 10px;
lebar: 0px;
tinggi: 0px;
/ * Membuat panah menggunakan batas * /
border: transparan transparan 4px;
border-left: 4px solid # d8d8d8;
}
/ * Panah yang sama, tapi dengan warna yang lebih gelap, untuk menciptakan efek bayangan * /
#cssmenu> ul .has-sub> a :: before {
isi: "";
posisi: absolut;
atas: 17px;
kanan: 10px;
lebar: 0px;
tinggi: 0px;
/ * Membuat panah menggunakan batas * /
border: transparan transparan 4px;
border-left: 4px solid # 000;
}
/ * Mengganti warna panah pada hover * /
#cssmenu> ul li> a: hover :: setelah,
#cssmenu> ul li: hover> a :: after {
border-left: 4px solid #ffffff;
}
#cssmenu> ul li> a: hover :: sebelumnya,
#cssmenu> ul li: hover> a :: before {
border-left: 4px solid rgba (0, 0, 0, 0.3);
}
/ * SUBMENUS * /
#cssmenu> ul ul {
posisi: absolut;
kiri: 100%;
top: -9999px;
padding-left: 5px;
keburaman: 0;
lebar: 140px;
/ * Efek pudar, dibuat menggunakan opacity transition * /
-webkit-transition: opacity 0.3s easy-in;
-moz-transition: opacity 0.3s easy-in;
transisi: opacity 0.3s memudahkan-in;
}
/ * Menampilkan submenu saat pengguna melayang link induk * /
#cssmenu> ul li: hover> ul {
atas: 0px;
keburaman: 1;
}
<script type = 'text / javascript' src = 'http: //ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js? ver = 1.3.2'> </ script>
<script type = "text / javascript">
$ (fungsi () {
var offset = $ ("# cssmenu") offset ();
adalah topPadding = 0;
$ (jendela) .scroll (fungsi () {
if ($ (window) .scrollTop ()> offset.top) {
$ ("# cssmenu") berhenti () bernyawa ({
marginTop: $ (window) .scrollTop () - offset.top + topPadding
});
} lain {
$ ("# cssmenu") berhenti () bernyawa ({
marginTop: 0
});
};
});
});
</ script>
Langkah 11: Klik save template dan anda selesai, buka blog anda untuk melihat menu apung.
Kustomisasi:
Semua perubahan yang bisa Anda buat di menu ini adalah menambahkan atau menghapus tombol dan meletakkan link blog Anda di tombolnya, jadi baca di bawah ini untuk mempelajari cara menambahkan atau menghapus tombol dan menambahkan tautan pada menu ini:
- Ganti hash berwarna hitam (#) pada kode yang digunakan pada Langkah 5 dengan link. Misalnya jika ingin menambahkan link beranda blog anda ganti # dengan link beranda di kode yang digunakan pada langkah 5 keseluruhan kode seharusnya terlihat seperti kode dibawah ini:
<li> <a href=' http://www.abc.blogspot.com'> <span> Beranda </ span> </a> </ li>
- Untuk mengganti nama tombol yang ada ganti teks tombol dengan nama yang anda inginkan. Katakan bahwa Anda ingin mengganti Rumah dengan Homepage sekarang yang harus Anda lakukan adalah menghapus Beranda dan ketik Homepage, bukan Beranda , kode keseluruhan seharusnya seperti:
<li> <a href=' http://www.abc.blogspot.com'> <span> Situs Web </ span> </a> </ li>
- Untuk menambahkan satu tombol baru di menu, Anda harus menambahkan potongan kode di bawah ini setelah tombol di mana Anda ingin tombolnya ada. Misalnya Anda ingin menambahkan tombol baru yang memiliki tombol New setelah tombol Home sekarang Anda harus menempelkan kode di bawah ini di bawah kode tombol Home :
<li> <a href=' #'> <span> tombol New </ span> </a> </ li>
Kode keseluruhan harus terlihat seperti kode di bawah ini:
<div id = 'cssmenu'>
<ul>
<li> <a href=' #'> <span> Home </ span> </a> </ li>
<li> <a href=' #'> <span> tombol New </ span> </a> </ li>
<li class = 'aktif memiliki-sub'> <a href=' #'> <span> Produk </ span> </a>
<ul>
<li class = 'memiliki-sub'> <a href=' #'> <span> Produk 1 </ span> </a>
<ul>
<li> <a href=' #'> <span> Sub Produk </ span> </a> </ li>
<li class = 'terakhir'> <a href=' #'> <span> Sub Produk </ span> </a> </ li>
</ ul>
</ li>
<li class = 'memiliki-sub'> <a href=' #'> <span> Produk 2 </ span> </a>
<ul>
<li> <a href=' #'> <span> Sub Produk </ span> </a> </ li>
<li class = 'terakhir'> <a href=' #'> <span> Sub Produk </ span> </a> </ li>
</ ul>
</ li>
</ ul>
</ li>
<li> <a href=' #'> <span> Tentang </ span> </a> </ li>
<li class = 'terakhir'> <a href=' #'> <span> Hubungi </ span> </a> </ li>
<li> <a href=' #'> <span> Peta Situs </ span> </a> </ li>
</ ul>
</ div>
- Untuk menambahkan tombol drop-down yang memiliki sub tombol yang harus Anda tambahkan di bawah potongan kode pada kode yang digunakan pada langkah 5:
<li class = 'aktif memiliki-sub'> <a href=' #'> <span> Produk </ span> </a>
<ul>
<li class = 'memiliki-sub'> <a href=' #'> <span> Produk 1 </ span> </a>
<ul>
<li> <a href=' #'> <span> Sub Produk </ span> </a> </ li>
<li class = 'terakhir'> <a href=' #'> <span> Sub Produk </ span> </a> </ li>
</ ul>
</ li>
<li class = 'memiliki-sub'> <a href=' #'> <span> Produk 2 </ span> </a>
<ul>
<li> <a href=' #'> <span> Sub Produk </ span> </a> </ li>
<li class = 'terakhir'> <a href=' #'> <span> Sub Produk </ span> </a> </ li>
</ ul>
</ li>
Kode diatas memiliki tombol drop-down dan tombol ini juga memiliki tombol drop-down sekarang jika Anda hanya menginginkan tombol drop-down (single drop-down) mengatakan bahwa Anda ingin memiliki tombol yang diberi nama About and buttons buttons Company, Author and blog maka Anda harus menambahkan hanya di bawah potongan kode:
<li class = 'memiliki-sub'> <a href=' #'> <span> Tentang </ span> </a>
<ul>
<li> <a href='#'> <span> Perusahaan </ span> </a> </ li>
<li> <a href=' #'> <span> Penulis </ span> </a> </ li>
<li class = 'terakhir'> <a href=' #'> <span> Blog </ span> </a> </ li>
</ ul>
</ li>
Jika Anda ingin menambahkan tombol drop-down dan drop-down juga memiliki drop-down maka Anda harus menempelkan kode di bawah ini:
<li class = 'aktif memiliki-sub'> <a href='#'> <span> Dropdown </ span> </a>
<ul>
<li class = 'has-sub'> <a href='#'> <span> Dropdown 1 </ span> </a>
<ul>
<li> <a href='#'> <span> Sub-dropdown 1 </ span> </a> </ li>
<li class = 'last'> <a href='#'> <span> Sub-dropdown 2 </ span> </a> </ li>
</ ul>
</ li>
</ ul>
Dengan menambahkan di atas potongan kode Anda menambahkan sebuah tombol drop-down bernama Dropdown 1 yang juga memiliki 2 drop-down yang dinamakan Sub-dropdown 1 dan Sub-dropdown 2 .
- Untuk menghapus / menghapus tombol yang ada Anda harus menghapus kodenya. Misalnya jika Anda ingin menghapus satu tombol seperti Home sekarang Anda harus menghapus kode di bawah ini dari kode yang digunakan pada langkah 5 di atas:
<li> <a href=' #'> <span> Rumah </ span> </a> </ li>
Demikian pula untuk menghapus Tentang tombol Anda harus menghapus <li> <a href=' #'> <span> Rumah </ span> </a> </ li> dari kode yang digunakan pada langkah 5.
Jika Anda ingin menghapus drop down Anda harus menghapus kodenya misalnya jika Anda ingin menghapus tombol Sub Product sekarang Anda harus menghapus potongan kode di bawah ini:
<ul>
<li> <a href=' #'> <span> Sub Produk </ span> </a> </ li>
<li class = 'terakhir'> <a href=' #'> <span> Sub Produk </ span> </a> </ li>
/ Ul>
Jika Anda ingin menghapus tombol tunggal remove <li> <a href=' #'> <span> Sub Produk </ span> </a> </ li> tetapi jika Anda ingin menghapus kedua tombol produk sub maka Anda memiliki untuk menghapus kode diatas Lakukan hal yang sama jika Anda ingin menghapus tombol dropdown seperti produk 1 atau produk 2.
Saya telah banyak menjelaskan di atas tentang cara menambahkan atau menghapus atau menambahkan link di tombol atau cara menambahkan atau menghapus tombol drop-down, namun jika Anda masih bingung atau tidak mengerti jangan ragu untuk bertanya kepada saya di komentar atau hubungi saya .
Saya harap Anda menyukai menu ini dan posting ini sangat membantu Anda, jika Anda memiliki masalah terkait dengan posting ini tanyakan kepada saya di komentar. Terima kasih telah mengunjungi AccFunkysst. Jika Anda suka posting ini membaginya dengan orang lain, ikuti dan berlangganan untuk mendapatkan update terbaru di inbox Anda. Jika ada saran atau opini, beri komentar di bawah ini.
Search tags: lagu rohani kristen tuhan pimpin sepanjang jalan mp3, lagu, rohani, kristen, tuhan menu paling atas ke bawah untuk blogger, gadget apung untuk blogger, menu bergaya untuk blogger.
EmoticonEmoticon