RAHASIA NAVIGASI MENU BLOGGER EDITBLOGTEMA

Oleh: adelina sofyan

contoh template editblog

Navigasi menu menentukan tampilan sebuah halaman blog secara keseluruhan. Dengan memiliki hal tersebut halaman sebuah blog tampak lebih keren, lebih professional. Karena aku menggunakan template buatan editblogtema, aku di izinkan mengutak atik editorial HTMLnya.

Menurutku menu navigasi buatan editblog cukup cantik sederhana dan rapi, apalagi ia memiliki tombol menu pencarian, tidak berat karena tidak menggunakan font awsome sebagai ikonnya, hanya menggunakan ikon SVG. Support HTML5 dan CSS3.

Setelah mencoba mempelajarinya ternyata sederhana saja, namun jika ingin menerapkannya dan untuk berjaga jaga sebelum menerapkannya, silahkan back up dulu templatenya ya..

1. BAGIAN CSS (style)

Bagian ini sangat penting. CSS membentuk HTML dan menetukan seperti apa nanti dia ditampilkan dalam bentuk visual di internet, termasuk warna. Kalian bisa meletakan bagian ini diatas tag penutup </head> cari saja dengan menekan CTR+F sekaligus:

</style>
.editblognav {
overflow: hidden;
background-color: rgb(25, 25, 112);
z-index: 100;
position: fixed;
width: 100%;
}
.editblognav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family:&#39;Mansalva&#39;, cursive;
}
.active {
background-color: #6A5ACD;
color: #A9A9A9;
}
.editblognav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family:&#39;Mansalva&#39;, cursive;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 180px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
position: absolute;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.editblognav a:hover, .dropdown:hover .dropbtn {
background-color: transparent;
color: yellow;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
z-index: 100;
position: fixed;
}
@media screen and (max-width: 800px) {
.editblognav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.editblognav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 800px) {
.editblognav.responsive {position: fixed;}
.editblognav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.editblognav.responsive a {
float: none;
display: block;
text-align: left;
}
.editblognav.responsive .dropdown {float: none;}
.editblognav.responsive .dropdown-content {position: relative;}
.editblognav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.tombolbuka {
background: transparent;
border: transparent;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
position: fixed;
z-index: 100;
top: 0px;
right:8%;
color: transparent;
}
.tombolbuka:hover {
background: transparent;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 250;
top: 0;
left: 10;
background-color: none;
}
.overlay-content {
position: relative;
top: 0%;
width: 100%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .tomboltutup {
position: absolute;
top: -2px;
left: 89%;
font-size: 40px;
cursor: pointer;
color: blue;
z-index:101;
}
.overlay .tomboltutup:hover {
color: #000;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: none;
float: left;
width: 80%;
background: #f0f0f0;
}
.overlay input[type=text]:hover {
background: #fff;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #f0f0f0;
font-size: 17px;
border: none;
cursor: pointer;
height: 50px;
}
.overlay button:hover {
background: #f1f1f1;
}</style>

2. BAGIAN HTML

Nah bagian ini berisikan nama atau judul menu, link dll. Keterkaitannya dengan CSS diatas adalah pada bagian kode yang di sorot merah. Jangan bingung terlihat banyak karena disertai oleh ikon SVG, meletakannya dibawah tag penutup </head>:

<div class='editblognav' id='myeditblognav'><a expr:href='data:blog.homepageUrl'><svg style='width:14px;height:14px' viewBox='0 0 24 24'>
<path d='M6.18,15.64A2.18,2.18 0 0,1 8.36,17.82C8.36,19 7.38,20 6.18,20C5,20 4,19 4,17.82A2.18,2.18 0 0,1 6.18,15.64M4,4.44A15.56,15.56 0 0,1 19.56,20H16.73A12.73,12.73 0 0,0 4,7.27V4.44M4,10.1A9.9,9.9 0 0,1 13.9,20H11.07A7.07,7.07 0 0,0 4,12.93V10.1Z' fill='#FF0000'/>
</svg><data:blog.title/></a>
<a href='#'><font color='#FF0000'>Disclaimer</font></a>
<a href='#'>Contents</a>
<div class='dropdown'>
<button class='dropbtn'>Features<svg style='width:14px;height:14px' viewBox='0 0 17 17'>
<path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' fill='#FF0000'/>
</svg>
</button>
<div class='dropdown-content'>
<a href='https://www.editblogtema.net/p/tahukah-kamu.html'><font color='#FF0000'>Tahukah kamu?</font></a>
<a href='#'>Blogging</a>
<a href='#'>HTML|CSS|Js</a>
<a href='#'>Teknologi/A.I</a>
<a href='#'>Sains</a>
<a href='#'>Paradox</a>
</div>
</div>
<a href='#'>Try this template</a>
<a class='icon' href='javascript:void(0);' onclick='myFunction()' style='font-size:15px;'>&#9776;</a>
</div>
<div class='overlay' id='myOverlay'>
<span class='tomboltutup' onclick='closeSearch()' title='Close Overlay'>&#215;</span>
<div class='overlay-content'>
<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' placeholder='cari...' size='25' type='text'/>
<button type='submit'/>
</form>
</div>
</div>
<button class='tombolbuka' onclick='openSearch()'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='#ffffff'/>
</svg></button>

3. JAVASCRIPT

Ternyata cukup mengherankan bagian yang ini tidak terlalu panjang instruksinya mencakup untuk navigasi menu sekaligus instruksi untuk tombol pencarian yang berbentuk  kaca pembesar yang apabila diklik akan terbuka kolom dialog pencariannya, letakan kodenya diatas kode penutup </body>:

<script>function openSearch() {
document.getElementById(&quot;myOverlay&quot;).style.display = &quot;block&quot;;
}
function closeSearch() {
document.getElementById(&quot;myOverlay&quot;).style.display = &quot;none&quot;;
}
function myFunction() {
var x = document.getElementById(&quot;myeditblognav&quot;);
if (x.className === &quot;editblognav&quot;) {
x.className += &quot; responsive&quot;;
} else {
x.className = &quot;editblognav&quot;;
}
}
</script>

SAVE template. Mudah di terapkan ke template template terbaru bawaan Blogger seperti: Contempo, emporio, Soho dan Notable.

Artikel ini di tayangkan di situs:

Mari membuat navigasi menu blogger

DEMO