Langsung ke konten utama

Cara membuat double navigasi menu ala editblogtema

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.
tampilan menu navigasi ala editblogtema
Tampilan menu navigasi ala editblogtema

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:
  1. Saya buang headernya
  2. 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):
contoh sidenav menu ala editblogtema

Baiklah kita langsung pada cara pembuatannya.

Langkah pertama: Tambahkan CSS

  1. Masuk ke pengaturan blogger template contempo
  2. Pilih tema
  3. Pilih edit HTML
  4. 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'>&#8779; </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(&quot;mySidenav&quot;).style.width = &quot;250px&quot;;
  document.getElementById(&quot;main&quot;).style.marginLeft = &quot;250px&quot;;
  document.body.style.backgroundColor = &quot;rgba(0,0,0,0.4)&quot;;
}
function closeNav() {
  document.getElementById(&quot;mySidenav&quot;).style.width = &quot;0&quot;;
  document.getElementById(&quot;main&quot;).style.marginLeft= &quot;0&quot;;
  document.body.style.backgroundColor = &quot;white&quot;;
}</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:

<b:if cond='data:view.isSingleItem'>
<a class='return_link' expr:href='data:blog.homepageUrl'>
<b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='backArrowIcon'/>
</a>
<b:else/>
<b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' 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: &quot;flat-icon-button ripple sidebar-back&quot; }' 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.




Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

Komentar

  1. Banyak bener yang di ubah gan, sebetulnya cukup .centered-top aja di hidden maka semua header akan hilang termasuk sticky, search, dll 👍🙏

    BalasHapus
    Balasan
    1. Saya malah baru tahu itu :D. Terimakasih masukannya..

      Hapus
    2. mas sofyan dapat ilmu baru nih dari master baru kita, ea

      Hapus
    3. berarti .centered-top-container.sticky{
      jadi .centered-top-container.hidden{

      Tetap ada PR membuang ikon hamburger menu dan search yang 'frozen' di atasnya..

      Hapus
    4. Tiap widget itu kan bisa dihilangkan dgn cara tidak di conteng pada tata letak.

      Atau bisa juga langsung ke html nya.
      <div class='hidden
      Atau
      <div class='invisible

      Hapus

  2. Menarik ulasan tentang merubah scrif template...Meski perlu waktu untuk mengusai itu semua... Thanks toturial menariknya nih akan saya save..😊🙏🙏

    BalasHapus
    Balasan
    1. jangan lupa ikuti saran Jaey Zona...master tu

      Hapus
    2. Master dari hongkong 😆

      Hapus
    3. waduh jauhnya mas, jaey, mas berguru ke hongkongkah, he-he,..canda je

      Hapus
  3. mantab 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

    BalasHapus
  4. jujur, saya 1 aja sering enggak ke pakek apalagi dua,he-he tapi inovasinya bagus nih

    BalasHapus
  5. halo mas boz
    seingatku sy pernah nyopot theme di sini. trims ya theme nya
    Navigasi dobel bikin pusing kepala mas boz

    BalasHapus

Posting Komentar

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Hal ini terjadi pada tema editblogtema yang pada saat itu kami modifikasi untuk sementara berdasarkan tema sederhana bawaan blogger. Karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal postingan sudah terlanjur di publish. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering atau Numbered List dan Add Bullets atau Bulleted List" yang tidak bekerja. Sudah tentu ini pasti celah kelemahan template, jadi harus segera di perbaiki. Padahal kami tidak membuat template baru, lho. Hanya memodifikasi template tua bawaan dengan tajuk simple atau 'sederhana'. Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tersebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau li

PERIHAL GOOGLE PAGERANK dan ranking ALEXA

GOOGLE PAGERANK K alau dengan Google Pagerank jadi ingat saat membuka blogger tahun 2014 waktu itu Blog dengan Google Pagerank tinggi benar benar dijadikan "primadona"nya blogspot. Namun apa yang terjadi segalanya berubah. Google telah melakukan update algoritmanya secara besar besaran, dan kini walaupun pagerank masih penting namun telah berubah menjadi rahasia dapurnya Google. Selama bertahun tahun Google PageRank telah menjadi benchmark yang penting untuk menilai kualitas suatu website namun  pada April 2016 menjadi bulan yang penuh dengan kehebohan bagi komunitas pemasaran digital pada umumnya dan SEO (Search Engine Optimization) khususnya. Berbagai website dan blog terkemuka SEO sedunia banyak yang memberikan komentar mengenai hal tersebut. SearchEngineLand menyebutkan bahwa sejak Jumat, 15 April 2016, tiba tiba saja Google PageRank lenyap dari Google Toolbar! MASIH PENTINGKAH GOOGLE PAGERANK ITU? Ada yang berpendapat Google pagerank masih penting, tetapi tidak

JARINGAN INTERNET DAN TELEKOMUNIKASI TELKOMSEL RUSAK, PELANGGAN SANGAT DI RUGIKAN

Hey teman teman,  Aku di Indonesia sempat mau bikin konten tutorial dan itu seharusnya berjalan dengan baik, kalau tiba tiba saja jaringan internet tidak 'rusak'. Parahnya di tunggu berjam jam tidak juga aktif dari pukul satu atau pukul dua siang tadi. Mood aku buyar, karena ketika aku mendapatkan internet kembali draft aku sudah hilang separoh karena tidak ter-'save' pada saat internet hancur lebur tadi.  Sebagai gantinya aku menulis curhatan ini, maaf ya telkomsel, aku tidak menggunakan jaringan internetmu yang mahal, aku menulis sisi burukmu ini melalui jaringan internet Indosat. Kamu pasti mengerti mengapa aku marah. Karena jaringan internet terputus hingga sore tidak ada tanda tanda kehidupan. Awalnya aku menyangka karena quota internet sudah habis atau kartu halo belum bayar ya...eh gak mungkin! Tanya sama teman teman yang rata rata pengguna telkomsel. Yaaah sama. Mau tidak mau kalau masih terhubung harus beli kartu internet dari operator lain INDOSAT. Benar, dapa