Menurut saya ini adalah menu navigasi blog yang terbaik yang dapat di terapkan ke halaman blogspot, templatenya jadi ada rasa Wordpress dan teknik pembuatannya terbilang mudah dan mendasar sekali. Khasiatnya juga telah kami buktikan. Halaman Blog terasa menjadi lebih optimal. Mudah diterapkan ke template template bawaan Blogger dari versi lama hingga template varian terbaru blogspot.
Itu juga alasannya mengapa kami menggunakannya sekarang.
Kami telah berkali kali merobah tampilan antarmuka halaman blog, dengan tujuan mengoptimalkan halaman ini di halaman website, akhirnya kami menemukan sebuah cara - atau lebih tepatnya trik yang dapat di terapkan dengan mudah ke setiap model template bawaan blogger - blogspot. Yakni menu navigasi yang sedang kami pergunakan sekarang ini.
Baiklah saya akan mencobakannya ke template contempo yang sebelumnya:
.Search{flex-grow:0}
.Search form{position:relative}
.Search form:before{content:'';position:absolute;top:8px;left:10px;width:20px;height:20px;background:url("data:image/svg+xml,%3CsvgviewBox='002424'xmlns='http://www.w3.org/2000/svg'%3E%3Cpathd='M9.5,3A6.5,6.500,116,9.5C16,11.1115.41,12.5914.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.4111.11,169.5,16A6.5,6.500,13,9.5A6.5,6.500,19.5,3M9.5,5C7,55,75,9.5C5,127,149.5,14C12,1414,1214,9.5C14,712,59.5,5Z'fill='%6600CC'/%3E%3C/svg%3E") no-repeat center}
.Search input{padding:10px 10px 10px 40px;font-size:12px;width:calc(100% -(10px+40px));border:solid;border-radius:1px;color:#555}
.Menu{position:sticky;position:-webkit-sticky;top:0;z-index:222;background-color:#555;font:arial;font-size:14px;color:#fff;text-transform:uppercase}
.Menu .inner{color:#fff;max-width:100%;margin:auto}
.Menu a{color:#fff;white-space:nowrap;display:block;padding:4px 0}
.Menu ul,.Menu li{list-style:none;list-style-type:none;padding:0;margin:0}
.Menu ul{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;overflow-x:auto}
.Menu ul li{padding:0 13px;cursor:pointer;position:relative;white-space:nowrap}
.Menu ul li:hover{background-color:rgb(255, 64, 0)}
.Search{flex-grow:0}
.Search form{position:relative}
.Search form:before{content:'';position:absolute;top:8px;left:10px;width:20px;height:20px;background:url("data:image/svg+xml,%3CsvgviewBox='002424'xmlns='http://www.w3.org/2000/svg'%3E%3Cpathd='M9.5,3A6.5,6.500,116,9.5C16,11.1115.41,12.5914.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.4111.11,169.5,16A6.5,6.500,13,9.5A6.5,6.500,19.5,3M9.5,5C7,55,75,9.5C5,127,149.5,14C12,1414,1214,9.5C14,712,59.5,5Z'fill='%6600CC'/%3E%3C/svg%3E") no-repeat center}
.Search input{padding:10px 10px 10px 40px;font-size:12px;width:calc(100% -(10px+40px));border:solid;border-radius:1px;color:#555}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 222;
top: 0;
left: 0;
background-color:#555;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 18px;
color: #f1f1f1;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #FF0033;
}
.sidenav .closebtn {
position: absolute;
top: 30;
right: 10%;
font-size: 18px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
body {
font-family: IM Fell English, Helvetica, sans-serif;
font-size: 20px;
}
header .inner{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;color:#333;max-width:100%;margin:auto;padding:0 20px}
#header{margin-right:5px}
#header a{color:rgb(128, 128, 128);display:inline-block}
#header img{max-height:17px;max-width:300px;vertical-align:middle}
#header .description{display:block}
#header h1,#header h2{margin:0;font-size:40px;font-weight:500;font-family: 'Grenze Gotisch', cursive;letter-spacing:2px;text-transform:uppercase}
#header .widget{background-repeat:no-repeat;background-size:contain;background-position:center}
#searchbox{background:#f0f0f0;border:4px solid #f0f0f0;border-radius:1px;padding:0;width:250px}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input{outline:0}
#searchbox input[type="text"]{background:no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;Border-radius:5px;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}
#button-submit{background:#555;border-width:0;Border-radius:1px;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}
#button-submit:hover{background:#FF0066}
#button-submit:active{background:#5b5d60;outline:0}
#button-submit::-moz-focus-inner{border:0}
<div class='Menu'>
<div class='inner'>
<ul>
<li><a href='#'><span onclick='openNav()' style='font-size:30px;cursor:pointer'>≋ </span></a></li>
<div class='Search'>
<form action='/search' id='searchbox' method='get'>
<input name='q' placeholder='Ketik disini...' size='15' type='text'/>
<input id='button-submit' type='submit' value='Cari'/>
</form>
</div>
<li><a href='/'>Beranda</a></li>
<li><a href='#' title='Menu berisikan Tutorial lengkap situs editblogtema.net'>Download</a></li>
<li><a href='#' title='kode warna'>Kode warna</a></li>
<li><a href='https://www.editblogtema.net/p/blog-page.html' title='why no download'>Why No Download?</a></li>
</ul></div></div>
<div class='sidenav' id='mySidenav'>
<a class='closebtn' href='javascript:void(0)' onclick='closeNav()'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z' fill='currentColor'/>
</svg></a>
<a href='/'>Beranda</a>
<a href='#' title='privasi'>Privasi</a>
<a href='#' title='privasi'>Sanggahan</a>
<a href='#' title='link 1'>Link1</a>
<a href='#' title='link 2'>Link2</a>
<a href='#' title='link 3'>Link3</a>
<a href='#' title='link 4'>Link4</a>
<a href='#' title='link 5'>Link5</a>
</div>
Tampilan menu navigasi ala editblogtema
Kami telah berkali kali merobah tampilan antarmuka halaman blog, dengan tujuan mengoptimalkan halaman ini di halaman website, akhirnya kami menemukan sebuah cara - atau lebih tepatnya trik yang dapat di terapkan dengan mudah ke setiap model template bawaan blogger - blogspot. Yakni menu navigasi yang sedang kami pergunakan sekarang ini.
Baiklah saya akan mencobakannya ke template contempo yang sebelumnya:
- Saya buang headernya
- Saya buang tombol pencarian bawaanya.
Jangan kuatir, Keduanya dapat dilakukan melalui tataletak pengaturan di dasbor blogger kok. Harus dilakukan agar widget widet bawaan tersebut tidak menjadi tumpang tindih dengan widget dan elemen tambahan yang akan segera kita buat.
Dan setelah nanti jadi maka halaman akan memiliki:
- Navbar dengan menu menu tidak terbatas namun mobile friendly karena menu navigasi ini adalah model scrollable menu, yakni menu yang dapat di geser ke kiri dan ke kanan untuk menampilkan menu menu tersembunyi pada tiap sisi halaman.
- Menu navigasi ini fixed
- Memiliki navigasi menu samping (sidebar navigation) kiri dengan tombol hamburger menu untuk membukanya.
- Memiliki kotak dan tombol pencarian yang user friendly.
Sumber kode: w3school (tentu saja setelah di modifikasi sedemikian rupa)
Gambar menu samping (sidenav menu):
Baiklah kita langsung pada cara pembuatannya.
Langkah pertama: Tambahkan CSS
- Masuk ke pengaturan blogger template contempo
- Pilih tema
- Pilih edit HTML
- Cari kode ]]></b:skin
Letakana kode CSS berikut tepat di atas kode ]]></b:skin> tadi:
.Search{flex-grow:0}
.Search form{position:relative}
.Search form:before{content:'';position:absolute;top:8px;left:10px;width:20px;height:20px;background:url("data:image/svg+xml,%3CsvgviewBox='002424'xmlns='http://www.w3.org/2000/svg'%3E%3Cpathd='M9.5,3A6.5,6.500,116,9.5C16,11.1115.41,12.5914.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.4111.11,169.5,16A6.5,6.500,13,9.5A6.5,6.500,19.5,3M9.5,5C7,55,75,9.5C5,127,149.5,14C12,1414,1214,9.5C14,712,59.5,5Z'fill='%6600CC'/%3E%3C/svg%3E") no-repeat center}
.Search input{padding:10px 10px 10px 40px;font-size:12px;width:calc(100% -(10px+40px));border:solid;border-radius:1px;color:#555}
.Menu{position:sticky;position:-webkit-sticky;top:0;z-index:222;background-color:#555;font:arial;font-size:14px;color:#fff;text-transform:uppercase}
.Menu .inner{color:#fff;max-width:100%;margin:auto}
.Menu a{color:#fff;white-space:nowrap;display:block;padding:4px 0}
.Menu ul,.Menu li{list-style:none;list-style-type:none;padding:0;margin:0}
.Menu ul{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;overflow-x:auto}
.Menu ul li{padding:0 13px;cursor:pointer;position:relative;white-space:nowrap}
.Menu ul li:hover{background-color:rgb(255, 64, 0)}
.Search{flex-grow:0}
.Search form{position:relative}
.Search form:before{content:'';position:absolute;top:8px;left:10px;width:20px;height:20px;background:url("data:image/svg+xml,%3CsvgviewBox='002424'xmlns='http://www.w3.org/2000/svg'%3E%3Cpathd='M9.5,3A6.5,6.500,116,9.5C16,11.1115.41,12.5914.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.4111.11,169.5,16A6.5,6.500,13,9.5A6.5,6.500,19.5,3M9.5,5C7,55,75,9.5C5,127,149.5,14C12,1414,1214,9.5C14,712,59.5,5Z'fill='%6600CC'/%3E%3C/svg%3E") no-repeat center}
.Search input{padding:10px 10px 10px 40px;font-size:12px;width:calc(100% -(10px+40px));border:solid;border-radius:1px;color:#555}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 222;
top: 0;
left: 0;
background-color:#555;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 18px;
color: #f1f1f1;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #FF0033;
}
.sidenav .closebtn {
position: absolute;
top: 30;
right: 10%;
font-size: 18px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
body {
font-family: IM Fell English, Helvetica, sans-serif;
font-size: 20px;
}
header .inner{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;color:#333;max-width:100%;margin:auto;padding:0 20px}
#header{margin-right:5px}
#header a{color:rgb(128, 128, 128);display:inline-block}
#header img{max-height:17px;max-width:300px;vertical-align:middle}
#header .description{display:block}
#header h1,#header h2{margin:0;font-size:40px;font-weight:500;font-family: 'Grenze Gotisch', cursive;letter-spacing:2px;text-transform:uppercase}
#header .widget{background-repeat:no-repeat;background-size:contain;background-position:center}
#searchbox{background:#f0f0f0;border:4px solid #f0f0f0;border-radius:1px;padding:0;width:250px}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input{outline:0}
#searchbox input[type="text"]{background:no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;Border-radius:5px;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}
#button-submit{background:#555;border-width:0;Border-radius:1px;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}
#button-submit:hover{background:#FF0066}
#button-submit:active{background:#5b5d60;outline:0}
#button-submit::-moz-focus-inner{border:0}
Langkah kedua: Tambahkan kode HTML/XML
Masih pada halaman editor HTML Blogger template contempo cari kode: <body> dan letakan kode berikut tepat di bawahnya:
<div class='Menu'>
<div class='inner'>
<ul>
<li><a href='#'><span onclick='openNav()' style='font-size:30px;cursor:pointer'>≋ </span></a></li>
<div class='Search'>
<form action='/search' id='searchbox' method='get'>
<input name='q' placeholder='Ketik disini...' size='15' type='text'/>
<input id='button-submit' type='submit' value='Cari'/>
</form>
</div>
<li><a href='/'>Beranda</a></li>
<li><a href='#' title='Menu berisikan Tutorial lengkap situs editblogtema.net'>Download</a></li>
<li><a href='#' title='kode warna'>Kode warna</a></li>
<li><a href='https://www.editblogtema.net/p/blog-page.html' title='why no download'>Why No Download?</a></li>
</ul></div></div>
<div class='sidenav' id='mySidenav'>
<a class='closebtn' href='javascript:void(0)' onclick='closeNav()'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z' fill='currentColor'/>
</svg></a>
<a href='/'>Beranda</a>
<a href='#' title='privasi'>Privasi</a>
<a href='#' title='privasi'>Sanggahan</a>
<a href='#' title='link 1'>Link1</a>
<a href='#' title='link 2'>Link2</a>
<a href='#' title='link 3'>Link3</a>
<a href='#' title='link 4'>Link4</a>
<a href='#' title='link 5'>Link5</a>
</div>
Langkah ketiga: Tambahkan Javascript
Masih pada halaman editor HTML Blogger template contempo cari kode: </body> dan letakan kode berikut tepat di atasnya:
<script>function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; document.body.style.backgroundColor = "rgba(0,0,0,0.4)";}function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; document.body.style.backgroundColor = "white";}</script>
Langkah ke empat: Hilangkan sticky header bawaan Template Contempo
Pada halaman editor HTML template blogger cari kode berikut:
Jika ingin menghilangkan tampilan sidebar bawaan contempo kalian dapat melakukan langkah langkah berikut:
Cari kode: .centered-top-container.sticky{
Di bawahnya akan menyusul penampakan kode CSS berikut:
left:0;
position: fixed;
right:0;
top:0;
width:auto;
z-index:8;
Ganti perintah sticky menjadi: none. Sedangkan fixed di ganti dengan relative lalu SAVE.
Langkah kelima: Sembunyikan sidebar bawaan template contempo
Masih di dalam halaman edit HTML template contempo cari kode ikon 'backarrow' berikut:
<a class='return_link' expr:href='data:blog.homepageUrl'>
<b:include data='{ button: true, iconClass: "back-button rtl-reversible-icon flat-icon-button ripple" }' name='backArrowIcon'/>
</a>
<b:else/>
<b:include data='{ button: true, iconClass: "hamburger-menu flat-icon-button ripple" }' name='menuIcon'/>
</b:if>
Hapus semua kode di atas tersebut seluruhnya. lalu cari kode kedua dalam bentuk format kode berikut:
<div class='navigation'>
<b:include data='{ button: true, iconClass: "flat-icon-button ripple sidebar-back" }' name='backArrowIcon'/>
</div>
Hapus juga semua kode tersebut.
Selanjutnya cari kode pengaturan sidebar berikut:
<Group description="Widths">
<Variable name="sidebar.width" description="Sidebar width" type="length"
min="100px" max="1000px" default="284px" value="284px"/>
<Variable name="content.width" description="Content width" type="length"
min="600px" max="2400px" default="922px" value="922px"/>
<Variable name="content.margin" description="Content margin" type="length"
min="0px" max="1000px" default="117px" value="117px"/>
</Group>
Ganti nilai yang saya merahkan menjadi '0px' semua. Seperti berikut:
<Group description="Widths">
<Variable name="sidebar.width" description="Sidebar width" type="length"
min="0px" max="0px" default="0px" value="0px"/>
<Variable name="content.width" description="Content width" type="length"
min="600px" max="2400px" default="922px" value="922px"/>
<Variable name="content.margin" description="Content margin" type="length"
min="0px" max="1000px" default="117px" value="117px"/>
</Group>
Save Template.
Jika Kalian support kami, please klik dan subscribe channel Youtube yang sedang kami kembangkan, masih sangat sederhana dan bersahaja. Channel ini berisikan tutorial yang sama dengan blog ini namun dalam bentuk tampilan visual yang lebih mudah di mengerti.
Banyak bener yang di ubah gan, sebetulnya cukup .centered-top aja di hidden maka semua header akan hilang termasuk sticky, search, dll 👍🙏
BalasHapusSaya malah baru tahu itu :D. Terimakasih masukannya..
Hapusmas sofyan dapat ilmu baru nih dari master baru kita, ea
Hapusberarti .centered-top-container.sticky{
Hapusjadi .centered-top-container.hidden{
Tetap ada PR membuang ikon hamburger menu dan search yang 'frozen' di atasnya..
Tiap widget itu kan bisa dihilangkan dgn cara tidak di conteng pada tata letak.
HapusAtau bisa juga langsung ke html nya.
<div class='hidden
Atau
<div class='invisible
BalasHapusMenarik ulasan tentang merubah scrif template...Meski perlu waktu untuk mengusai itu semua... Thanks toturial menariknya nih akan saya save..😊🙏🙏
jangan lupa ikuti saran Jaey Zona...master tu
HapusMaster dari hongkong 😆
Hapuswaduh jauhnya mas, jaey, mas berguru ke hongkongkah, he-he,..canda je
HapusVetul 😆
Hapusmantab juga ya mas jika header template blog baru yang lumayan lebar bisa dihilangkan dan diotak atik bawahnya berdasarkan menu yang costumized, coba saya pelajari dulu :D
BalasHapusjujur, saya 1 aja sering enggak ke pakek apalagi dua,he-he tapi inovasinya bagus nih
BalasHapushalo mas boz
BalasHapusseingatku sy pernah nyopot theme di sini. trims ya theme nya
Navigasi dobel bikin pusing kepala mas boz