EDITBLOGTEMA

Menu klasik (baca desain menu navigasi blog lama) adalah menu yang tampil di header dalam bentuk inline, horisontal hingga dropdown - dan sebagian disembunyikan hanya pada tampilan mobile. Namun oleh karena trend bahasa web yakni CSS yang semakin maju, hingga memungkinkan untuk membuat menu halaman web kemudian di buat minimalis, dan minimalis menjadi SEO. Tanpa javascript! Banyak alasan mengapa halaman web modern tampak lebih minimalis antarmukanya tapi ini bukanlah pendapat seseorang, akan tetapi melihat kepada trend dari evolusi kemunculan halaman halaman webblog personal dengan tampilan minimalis namun dengan fitur yang lengkap. Juga karena makin kesininya CSS ternyata menjadi semakin powerful. Menu template zaman sekarang sangat minimalis kebanyakan hanya menampilkan sebua tombol namun jangan salah, satu tombol berisikan menu yang sangat lengkap! Dan tombol yang paling populer adalah: Menu Hamburger! 1. Apakah menu hamburger itu? Menu hamburger adalah ikon menu tiga garis berlapis

S ebenarnya dengan atau tanpa menu navigasi sebuah halaman blog akan berjalan normal dan baik baik saja. Akan tetapi menu navigasi telah diangap secara signifikan dapat membantu menavigasi pengunjung untuk dengan lebih mudah menemukan dan mengeksplorasi konten konten penting yang ingin kita tonjolkan.  Dan tentu saja sedikit banyaknya akan menambah nilai bagus bagi halaman yang menggunakannya, terutama sebuah halaman blog yang sudah besar, kompleks dan memiliki lebih banyak konten konten berguna.  Salah satu menu navigasi yang dapat Anda buat adalah menu navigasi yang dapat diterapkan ke dalam template blog berikut ini. Kelebihan menu navbar kustom ini: Tampak premium dan minimalis Responsif dan sudah barang tentu mobile friendly Memiliki dropdown sehingga dapat menambahkan daftar menu tanpa baras Sumber Kodenya adalah sebagai berikut: See the Pen poEYWdj by Sufyan Yaan ( @sufyan-yaan ) on CodePen . Cara menerapkannya ke dalam template: 1 . Klik tombol HTML di dalam kolom code

Pada pecobaan kali ini saya menggunakan template contempo - yakni salah satu template terbaru blogger, Contempo memang memiliki sidebar, dan saya menyembunyikannya karena saya akan mengganti atau menambahkan sidebar yang berfungsi sebagai menu navigasi agar tampilan template lebih simple dan fresh antar mukanya, ikut langkah demi langkahnya. contoh salah satu rancangan desain sidebar+navbar blogger kami Langkah pertama Tambahkan CSS.  Masuk kepengaturan dasbor blogger. Pilih tema Pilih edit HTML Cari kode berikut: ]]></b:skin> Letakan kode css berikut tepat di atas kode ]]></b:skin> tadi: body {   font-family: "Lato", sans-serif; } .sidenav {   height: 100%;   width: 0;   position: fixed;   z-index: 999;   top: 10;   left: 10;   background-color: #f0f0f0;   overflow-x: hidden;   transition: 0.5s;   padding-top: 60px; } .sidenav a {   padding: 8px 8px 8px 32px;   text-decoration: none;   font-size: 25px;   color: #333;   display: block;   transition: 0.3s; }

ilustrasi menu pencarian Ini adalah cara simpel (sederhana) dapat kalian terapkan untuk membuat navbar blog kalian sendiri dan karena template blogger di buat dengan HTML, trik ini dapat di terapkan hampir pada semua jenis template bawaan blogger. Pada Navbar hanya di tampilkan tiga menu agar ia tampak sederhana, dalam tutorial ini saya misalnya menambahkan tiga menu saja untuk mewakili konten sebuah blog: Judul Blog Tentang atau Perihal Kontak Dan lalu "Menu Pencarian" pada ujung paling kanan Tentu saja navbar ini cukup responsif pada saat di terapkan ke blogger. Perhatikan contoh. Contoh di bawah ini "live" kalian dapat mencoba menyentuh dan mencobanya. Namun demikian fungsi kotak pencarian belum saya lengkapi dengan perintah PHP. (demo mungkin tidak akan terlihat pada browser di hape/mobile) Judul Tentang kontak Cara penerapannya: 1. Pasang CSS: Masuk ke pengaturan blog Pilih theme Lalu akan muncul menu baru b

gambar megamenu Saran: terapkan ke template bawaan blogger simple atau awsome yang sudah di modifikasi menjadi responsive dan mobile friendly. Walaupun bisa diterapkan tanpa di modifikasi namun tampilannya di hape tidak mobile friendly nantinya kami akan menyediakan template template bawaan yang sudah di modifikasi secara gratis namun minus navigasi menu demi untuk pembelajaran. Mega menu ini dapat diterapkan dengan mudah ke dalam template template default/bawaan blogger seperti Tema awsome, perjalanan dan sederhana. Akan tetapi dengan catatan ia hanya bekerja apabila blog bersifat terbuka secara umum basis kerjanya adalah JQuery library dan Json feed API, ia hanya akan bekerja layaknya menu navigasi drop down biasa jika JavaScript di non aktifkan. Langkah pertama: buat HTML 1. Pengaturan>Theme/Template 2. Pilih EditHTML 3. Tekan ctrl+f>pada kotak pencarian ketikan: <div class='main-outer'> 4. Masukka kode beriku

Serial tutorial khusus Mari kita coba sticky Menu Navigasi dibawah ini, dan membuktikan apakah kita dapat menerapkannya pada template blogger kita. Perhatikan cara membuatnya: Sebaiknya back up template anda terlebih dahulu untuk berjaga jaga Masuk ke pengaturan blogger Pilih Tema Pilih opsi editHTML Langkah pertama: Cari kode </header> lalu copy kode dibawah ini dan pastekan diatas kode tadi. <div id="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> </div> Langkah kedua: Cari kode ]]></b:skin> lalu copy kode dibawah ini dan pastekan diatas kode tadi. /* Style the navbar */ #navbar { overflow: hidden; background-color: #333; } /* Navbar links */ #navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px; text-decoration: none; } /* Page content */ .content { padding: 16px; } .sticky { position:

Seperti biasa kami tidak lupa meluangkan waktu membuat template template blogger free (gratis) namun dengan fitur fitur premium, misalnya: Heading dinamis, template responisve dan mobile friendly Ads ready (slot iklan di atas/sejajar dengan header) Menu navigasi responsive, plus kotak pencarian Tentu saja tdak ada keharusan bagi anda mempertahankan kredit kami Kami tidak sedang berbisnis, jadi silahkan coba sendiri. DEMO DONLOT Sebenarnya Temanya sedang kami pergunakan buat blog ini dengan sedikit modifikasi ringan. Pengeditan dan modifikasi template ini murni menggunakan elemen elemen html dasar blogger, kecepatan dapat di tingkatkan dengan mudah jika anda mau sedikit mencari tahu melalui google. Semua yang sedang kami lakukan adalah matode pembelajaran yang setidaknya hanya demikian dapat kami terapkan. Dilain waktu kami akan membuat tema tema baru yang lebih simpel namun cepat dan responsive. Jika ingin mencari jenis tema blogger yang kami tawarkan silahkan klik

Navigasi menu itu penting terutama bagi blog blog dengan niche khusus. Membuat tampilan muka sebuah blog menjadi menarik dan mudah di fahami oleh pengunjung. Menurut hemat kami Menu Navigasi yang baik itu harus responsive dan mobile friendly. Artinya dapat berfungsi dan atau di fungsikan dengan baik pada tampilan desktop dan hape. Terutama pada zaman sekarang yang serba mobile tampilan blogger pada ponsel cerdas menjadi amat penting! Lihat Menu Navigasi hasil buatan kami: Atau lihat DEMO  Cara pembuatannya adalah: (Sangat cocok diterapkan ke template awsome, sederhana dan Perjalanan yang sudah di modifikasi menjadi responsive dan mobile friendly.) Masuk ke pengaturan blogger Pilih Theme/Tema Pilih EditHTML Langkah pertama: Tambahkan HTML Pastikan template anda telah terpasang kode:  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Jika sudah ada langsung saja cari kode <

Membuat dan menambahkan ikon MENU BAR ke header blog sebenarnya mudah. Menu bar itu bagi blog ibarat penerima tamu, semakin ramah semakin banyak tamu yang akan datang. Salah satu bentuk navigasi menu blog yang paling ramah, simple dan tidak sombong adalah bentuk menu bar. Pernahkan kita terpikir bagaimana cara desainer web membuatnya? Awalnya hanya bentuk tiga baris bar, tapi ketika di klik menjadi "X" Ternyata kita dapat membuatnya dengan 3 elemen web  berikut dengan mudah: Masuk kepengaturan blogger Pilih tataletak Pilih tema atau theme Pilih EditHTML Cara mencari kode tertentu cukup tekan ctrl+f pada keyboard dan masukan kode kedalam kotak pencarian tekan "enter" maka kode pencarian yang kita cari akan muncul dengan sorotan berwarna kuning. 1. TAMBAHKAN HTML: <div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> &l

Pada tutorial sebelumnya kita telah membahasa bagaimana membuat menu Navigasi plus kotak pencarian pada blog, akan tetapi kotak menu pencarian tidak "berfungsi" alias tidak bisa digunakan untuk melakukan pencarian he he he... Hal tersebut kami sengajakan agar kita berfikir dan bertanya mengapa? Disanalah letak indahnya seni berfikir dan indahnya 'desain' html. Kebanyakan gaya nih admin, minta maaf hanya bercanda. Pada tutorial pertama kita telah menanamkan kode css untuk skin/bentuk navigasi diatas kode ]]></b:skin> dan menambahkan kode HTML ke dalam widget HTML/Javascript, nah untuk memodifikasi agar kotak pencarian berfungsi dengan benar kita hanya perlu mengedit kode HTML pada widget ini, jangan kuatir, kan kodenya pendek saja kok: Pada tutorial pertama kita telah melatakan kode berikut dengan cara: 1. Layout > Add a Gadget 2. Pilih HTML/JavaScript 3. Judul kosongkan 4. Masukka kode berikut ini: <div class="topnav">