contoh template editblog |
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>2. BAGIAN HTML
.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:'Mansalva', 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:'Mansalva', 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>
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'>3. JAVASCRIPT
<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;'>☰</a>
</div>
<div class='overlay' id='myOverlay'>
<span class='tomboltutup' 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...' 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>
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() {SAVE template. Mudah di terapkan ke template template terbaru bawaan Blogger seperti: Contempo, emporio, Soho dan Notable.
document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
function myFunction() {
var x = document.getElementById("myeditblognav");
if (x.className === "editblognav") {
x.className += " responsive";
} else {
x.className = "editblognav";
}
}
</script>
Artikel ini di tayangkan di situs: