Ini Cara Menciptakan Sajian Navigasi Yang Responsif
Sabtu, 03 Januari 2015
Edit
Cara Membuat Menu Navigasi Yang Responsif - Setiap blogger atau website pada umumnya mempunyai sajian navigasi yang terlihat di sekita header blog. Memang dalam blog harus mengandung sajian dan sub sajian navigasi untuk memudahkan pengunjung menemukan kategori artikel yang tersaji dalam blog.Namun untuk menciptakan sajian navigasi harusnya yang responsif. Ada juga blog yang mempunyai sub sajian navigasi sehingga blog kelihatan lebih keren.
Pengertian Dan Fungsi Menu Navigasi
Menu navigasi ialah bagaian dari web/blog yang berisi link-link yang mengarah ke halaman lain dalam satu atau mengarah kehalaman website atau blogger lain. Biasanya sajian navigasi tampil dengan rapi dan terstruktur serta berisi link-link tiap menu. Pada umumnya sajian navigasi terletak diatas header
Menu navigasi ialah elemen penting yang harus ada dalam blog alasannya ialah sanggup membantu pengunjung untuk menemukan halaman-halaman penting sesuai dengan pengakategorian artikel. Maka tak heran setiap pemiliki blog selalu menciptakan navigasi blog.
Dalam blogspot.com pemasangan sajian navigasi pada umumnya menurut derma label pada artikel. atau sanggup juga memasang link ke webiste lain dalam sajian navigasi.
Secara defult pada ketika awal menciptakan blog, sajian navigasi pada blog tidak terdapat fitur-fitur yang menampilkan sajian navigasi. Yang mungkin tampil dalam blog hannyalah halaman beranda saja.
Namun bagi anda yang memakai templete hasil download sajian navigasi pada umunya sudah ada, tinggal merubah sesaui cita-cita dan kebutuhan anda. Bagi yang memakai templete hasil unduhan yang telah mempunyai sajian navigasi maka tidak perlu lagi untuk menciptakan sajian navigasi pada blog.
Apa Sih Fungsi Menu Navigasi?
Beberapa fungsi sajian navigasi untuk blog atau website yaitu sebagai berikut :
1. Blog yang mempunyai sajian navigasi di nilai profesional
Dengan adanya sajian navigasi yang menempel dan jelas pada blog atau website maka blog tersebut dinilai oleh profesional oleh pengunjung dan juga oleh google
2. Praktis Mendapatkan sitelink
Blog yang mempunyai sajian navigasi yang terstruktur dan terang akan gampang mendapat sitelink. Site yang paling banyak memang hanya berada pada sajian navigasi.3. Memudahkan Pengunjung untuk menemukan dan memahami pengkategorian konten dalam blog.
Dengan hanya melihat meni navigasi di blog secara sepintas pengunjung eksklusif memahami kategori-kategori konten yang ada dalam blog. Makara upayakan menciptakan dan memasang sajian navigasi yang terang dan responsih.
Menu navigasi yang responsif mengandung arti bahwa sajian navigasi tampil dengan tepat dengan menyesuaikan dengan lebar layar beling android bila blog di buka memakai perangkat android
Berikut ini ialah cara menciptakan sajian navigasi responsif bagi templete defult/bawaan blogspot.
# Cara menciptakan sajian navigasi Diatas Header bagi templete defult
Sebenarnya untuk menciptakan navigasi di blog sangat mudah, hanya saja membutuhkan ketelitian untuk memasang arahan HTML dalam templete. Biasanya dan pada umunya sajian navigasi terpasang diatas hedaer. Untuk blog yang masih memakai templete bawaah blogspot tentu sajian navigasi pada blog belum ada. Dan apabila ingin menciptakan sajian navigasi diatas header blog maka ada arahan CSS,HTML dan arahan JavaSript yang harus disisipkan dalam templete.
Langkah Pertama Pasang arahan CSS dibawah ini tepatnya di atas arahan ]]></b:skin>
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
Setelah arahan diatas sudah dipasang diatas ]]></b:skin> maka langkah kedua
Pasang HTML dibawah ini tepatnya di bawah arahan <body>
<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="Totorial">Totorial</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="#news">News</a></li> <li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
Catatan :
Untuk goresan pena yang berwarna merah isi Link label atau halaman dan goresan pena merah yang kedua isi Nama Label atau laman
Pasang JavaSript dibawah ini tepatnya diatas di atas arahan </body>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Simpan templete
# Cara mengatur sajian navigasi bagi templete hasil download
Apabila anda memakai templete hasil unduh dari portal penyedia templete pada umumnya sudah terdapat sajian navigasi dengan aneka macam gaya sehingga anda tidak perlu lagi untuk menciptakan sajian navigasi blog yang responsif. Anda hanya mengatur navigasi blog sesuai kebutuhan anda dan kategori konten blog.
Setelah anda mengopload templete/tema blog yang gres saja anda download maka langkah pertama ada pembiasaan sajian navigasi di blog. Berikut cara mengatur sajian navigasi blog.
1. Edit tempelet atau tema blog anda
2. cari nama sajian navigasi dalam tempele memakai tekan Ctrl + F dalam kotak arahan HTML
4. simpan templete/tema blog anda
5. Simpan
Selesai demikian artikel Cara Membuat Menu Navigasi Yang Responsif. Baca juga cara menciptakan laman penunjang blog