tampilan menu navigasi |
- Responsive kompatibel dipergunakan baik desktop, laptop, tablet maupun hape (smartphone)
- Harus rapi dan enak dilihat, familiar bagi pengguna atau pengunjung blog
- Memiliki menu dan submenu (opsi dropdown)
- Tombol klik khusus saat tampil pada layar smarphone
- Dilengkapi dengan menu atau tombol pencarian.
- Warna bar dan huruf bisa diganti
- Mudah dipasang
Nah sepulang kerja saya bermain di codepen "ngepen" disana mengutak atik HTML CSS. Hasilnya adalah atikel tutorial kali ini yang telah saya cobakan ke beberapa blog teman, bekerja sangat baik pada template lama dan pada varian varian terbaru template blogspot blogger.
Silahkan lihat DEMO terlebih dahulu: D E M O
Baiklah kita masuk kecara pembuatannya:
1. Tambahkan HTML
Masuk ke-pengaturan blogger>pilih tema>pilih edit HTML, pada halaman editor HTML cari kode <body> dan tambahkan kode dibawah ini tepat dibawah atau diatasnya.
<div class='Header1'/> <div class='topnav' id='myTopnav'>2. Tambahkan CSS style
<a class='active' href='/'><b><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></b></a>
<a href='#news'>News</a>
<a href='#contact'>Contact</a>
<div class='dropdown'>
<button class='dropbtn'>Dropdown
<i class='fa fa-caret-down'/>
</button>
<div class='dropdown-content'>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
</div>
<a href='#about'>About</a>
<a class='icon' href='javascript:void(0);' onclick='myFunction()' style='font-size:15px;'><i class='fas fa-th fa-lg'/></a>
</div>
<div id='top-scrollbar'>
<div id='top-scrollbar-bg'>
</div>
</div>
<progress max='1' value='0'>
<div class='progress-container'>
<span class='progress-bar'/>
</div>
</progress>
<div style='padding:16px'>
<a class='icon' href='javascript:void(0);' onclick='myFunction()'/></div><div class='overlay' id='myOverlay'><span class='closebtn' onclick='closeSearch()' title='Close Overlay'>×</span><div class='overlay-content'><form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' placeholder='cari...dan tekan enter' size='25' type='text'/></form></div></div>
<button class='openBtn' onclick='openSearch()'><i class='fa fa-search' style='color:#000;'/></button>
Masih pada halaman editor HTML cari kode </head> jika sudah ketemu tambahkan kode berikut dibawah ini tepat diatasnya.
<style>3. Tambahkan JavaScript
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #fff;
position: fixed;
top:0;
z-index:99;
width: 100%;
border: solid;
border-color: #DCDCDC;
}
.topnav a {
float: left;
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #fff;
color: black;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
position: fixed;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #fdd;
color: black;
}
.dropdown-content a:hover {
background-color: #fdd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.openBtn {
background: transparent;
border: none;
border-radius:180px;
border-color: transparent;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
position: fixed;
z-index: 99;
top: 6px;
right:9%;
}
.openBtn:hover {
background: transparent;
}
.overlay {
height: 62px;
width: 100%;
display: none;
position: fixed;
z-index: 100;
top: 0;
left: 19;
background-color:#DDDDDD;
}
.overlay-content {
position: relative;
top: 3%;
width: 100%;
text-align: center;
margin-top: 10px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 5px;
right: 11%;
padding: 0px 0px 0px 0px;
z-index: 99;
font-size: 40px;
cursor: pointer;
color: #87CEFA;
}
.overlay .closebtn:hover {
color: #000;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: solid;
border-color: transparent;
border-radius:0px;
float: left;
width: 100%;
background: #fff;
height: 56px;
}
.overlay input[type=text]:hover {
background: #fff;
}
.overlay button {
float: left;
width: 10%;
padding: 15px;
background: transparent;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: transparent;
}
</style>
Masih pada dihalaman editor HTML blogger, cari kode </body> dan letakan kode berikut tepat diatasnya:
<script>Terakhir Save Tema. Sebelum melakukannya silahkan back up template terlebih dahulu. Atau lakukan pada template percobaan. Jika menemukan kesuliatan silahkan komentar dibawah ini.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
www.editblogtema.net
Mantap mas,...mau bertsnya mas, cara memasang kode play store di bawah templete vio magz bagsimana mas ya, karena yang ada hanya tombol ig, fb, twitter saja
BalasHapusAslinya malah tidak ada tapi jika tetap ingin memasangnya harus melakukan kustom pada bagian footernya. adapun ikon play store android memang belum ada di librari font awsome. Kalau App Store apple malah sudah ada.
Hapussebagai gantinya harus membuat sendir ikonnya melalui opsi "img...png" misalnya.
Perhatikan kode yang bisa diletakan dibawah footer viomagz yang ada hanya facebook, instagram, hingga youtube:
<a href="https://web.facebook.com/facebookkalian/"><img alt="Facebook" border="0" height="55" src="https://1.bp.blogspot.com/-uZ8Xxh94d8g/Wurunx3skaI/AAAAAAAABTc/W8CUT8-JKFwza7t98r2ssogpCOecVLzlwCLcBGAs/s200/logo-facebook-bulat-biru-256x256.png" title="Find Us on Facebook" /></a>
<a href="https://twitter.com/twitterkalian/"><img alt="Twitter" border="0" height="55" src="https://3.bp.blogspot.com/-h1TC4hqLhps/WurvQQbnhII/AAAAAAAABTk/bJV2cCuRBDgbkWU5AMy5Q3boPgUt_V1UACLcBGAs/s200/twitter-png-3.png" title="Follow Us On Twitter" /></a>
<a href="https://www.instagram.com/instagramkalian/?hl=id"><img alt="Instagram" border="0" height="55" src="https://4.bp.blogspot.com/-RW_Z3hlVDag/WugFYAYvnJI/AAAAAAAABNc/Mz113nVoIhMQSb3MebADydniofaVajyggCLcBGAs/s200/instagram.png" title="Follow Us On Instagram" /></a>
<a href="alamat youtube kalian"><img alt="Youtube" border="0" height="55" src="https://3.bp.blogspot.com/-8mvWSfh9xsM/WugF1FRbSHI/AAAAAAAABNw/T1iu5zcaLlktjAx_-6Pt8KP3-6K2rGLWgCLcBGAs/s200/youtube_14198.png" title="Follow Us On Youtube" /></a>
Sip mas, saya cari dulu perbedaannya
BalasHapusThanks infonya om..
BalasHapusJazakallahu khairan atas tutorialnya... sangat bermanfaat
BalasHapusKeren banget !
BalasHapusAsik bisa utak atik blog sendiri.
Bagi icon youtube di navigasi bawah mas ... 😁
BalasHapusCari dan ganti CSSnya dengan:
Hapus.hbzsocial-icons ul li.social-facebook a {
background-position: -62px 1px;
}
.hbzsocial-icons ul li.social-facebook a:hover {
background-color: #3b5998;
}
.hbzsocial-icons ul li.social-twitter a {
background-position: -254px 1px;
}
.hbzsocial-icons ul li.social-twitter a:hover {
background-color: #00aced;
}
.hbzsocial-icons ul li.social-instagram a {
background-position: -95px 0px;
}
.hbzsocial-icons ul li.social-instagram a:hover {
background-color: #ffffff;
}
.hbzsocial-icons ul li.social-pinterest a {
background-position: -160px 1px;
}
.hbzsocial-icons ul li.social-pinterest a:hover {
background-color: #cb2027;
}
.hbzsocial-icons ul li.social-rss a {
background-position: -190px 0px;
}
.hbzsocial-icons ul li.social-rss a:hover {
background-color: #F87E12;
}
.hbzsocial-icons ul li.social-youtube a {
background-position: -287px 1px;
}
.hbzsocial-icons ul li.social-youtube a:hover {
background-color: #F87E12;
}
Tidak semua diganti ya... hanya bagian itu, mengapa adalah karena pengaturan background-postionnya saja.
Atau...
Atur saja nilai jarak posisi background tersebut sampai dia mencapai nilai tertentu yang dapat menjangkau ikon youtube. Ikon ini png, bukan librari ikon ikonnya boostrap atau ikon awsome.
Naah makanya saya bingung, kayaknya gak ada pemakaian bostrap/awesome kok bsa. 😁 Mklum kurang bgt paham.
HapusOya, mkasih mas sudah beres terpasang.