Entri yang Diunggulkan

Test for new blog in English (sorry my broken English)

picture that I shot with my phone This new blog for test T here is no big deal even how hard I try to concealed and in the back do...

Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

October 22, 2019

, , , , ,

RAHASIA NAVIGASI MENU BLOGGER EDITBLOGTEMA

contoh template editblog
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


Continue reading RAHASIA NAVIGASI MENU BLOGGER EDITBLOGTEMA