Cara mudah membuat menu horizontal responsive sederhana dengan CSS

Cara mudah membuat menu horizontal responsive sederhana dengan CSS

Salah satu hal yang wajib untuk Anda sediakan pada desain blog Anda adalah menu navigasi. Tujuan disediakannya menu navigasi ini adalah agar pengunjung menjadi lebih mudah untuk menemukan konten lainnya yang mereka cari dengan cepat dan sesuai dengan harapan.

Sesuai prinsip utamanya, menu navigasi berfungsi sebagai terminal / tempat kumpulan link utama yang konsisten dan mudah untuk ditemukan, sehingga pengunjung bisa berpindah dari satu halaman ke halaman lainnya dengan mudah.

Banyak cara dan metode yang bisa digunakan untuk membuat menu navigasi di blog, beberapa diantaranya adalah dengan menggunakan gadget label ataupun gadget pages yang bisa Anda letakkan dimana saja terutama di bawah Judul Blog.

Namun umumnya, menu navigasi yang menggunakan gadget label bawaan blogspot pada template model lama tidaklah responsive, sehingga terasa sangat tidak cocok dan bisa mengurangi kenyamanan pengunjung.

membuat menu horizontal responsive dengan css
Baca juga : 4 Varian template blogger terbaru

Oleh karena itu, pada artikel kali ini saya akan menginformasikan bagaimana cara membuat menu navigasi responsive sederhana yang bisa dengan mudah untuk Anda praktekkan sendiri.

Gambar dibawah berikut adalah tampilan dan bentuk dari menu horizontal responsive yang sudah jadi baik itu tampilan menu horizontal responsive versi desktop ataupun versi mobile.

Tampilan menu horizontal responsive versi desktop
Tampilan menu horizontal responsive versi desktop

Tampilan menu horizontal responsive versi mobile
Tampilan menu horizontal responsive versi mobile

Oiya, bagi Anda yang ingin belajar membuat template bawaan blogspot menjadi responsive silahkan download ebook gratis membuat template bawaan blogspot menjadi responsive.


Cara membuat menu horizontal responsive sederhana

Berikut adalah langkah-langkah bagaimana cara membuat menu horizontal responsive sederhana di blogger
  1. Login ke akun Blogspot Anda dan pilih blog yang akan di pasangkan menu horizontal responsive ini
  2. Klik pada menu Layout yang terletak disisi kiri layar Anda
  3. Klik Add A Gadget hingga muncul pop up untuk menambahkan gadget blog
  4. Pilihlah Gadget HTML/JavaScript, kemudian copy pastekan script dan kode dibawah ini
    <!--- Kode CSS Menu Horizontal Responsive Sederhana --->
    <style type="text/css">
    body{font-family:"Roboto",sans-serif!important;font-size:100%;margin:0px;padding:0px;}

    /*navmenu-horizontal*/
    #nav{background:#111111;}
    #nav ul{margin:0;padding:0;}
    #nav li{display:inline;display:inline-block;display:-moz-inline-stack;list-style:none;margin:0;padding:0;zoom:1;}
    #nav li a{color:#ffffff;display:block;padding:1em;text-decoration:none;}
    #nav li a:hover{background:#191919;color:#ffffff;}
    #nav li:first-child{background:#e42a2a;}
    .top-menu{background:#c91717;color:#fff;display:none;padding:10px 5px;text-align:left;text-decoration:none;}
    .top-menu span{float:right;margin-right:1em;}
    .top-menu b{font-size:30px;}
    #nav input[type=checkbox]:checked ~ #menus{display:block;}
    #nav input[type=checkbox]{display:none;}

    /*css-styles-responsive*/
    @media screen and (max-width:768px){
     #nav ul{display:none;position:static;}
    #nav li{border-bottom:1px solid #333;}
    #nav ul li, #nav li a{width:100%;}
    #nav li a{display:block;height:auto;line-height:normal;}
    #nav li a{text-align:left;}
    .top-menu{display:block!important;line-height:30px;}
    .top-menu:hover{cursor:pointer;}
    label{margin:0!important;}
    }
    </style>

    <!--- Kode HTML Menu Horizontal Responsive Sederhana --->
    <nav id='nav'>
    <label class='top-menu' for='top-menu'><b>&#9776;</b> <span>Menu</span></label>
    <input autocomplete='off' id='top-menu' role='button' type='checkbox'/>
    <ul id='menus'>
    <li><a href='/'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>Sitemap</a></li>
    </ul>
    </nav>
  5. Klik Save untuk menyimpan gadget
  6. Geser dan letakkan gadget yang baru dibuat (sebaiknya) tepat dibawah Header
  7. Klik Save arrangement yang ada disudut kanan untuk menyimpan perubahan dan lihatlah hasilnya
Catatan :
Ganti tanda # dengan alamat url halaman tujuan, lalu ikuti dengan mengganti kata About, Contact, Sitemap sesuai dengan keinginan Anda.

Baca juga : Tips membuat navigasi blog yang baik


Kesimpulan

Salah satu kelebihan dari tipe menu navigasi ini adalah menu ini cukup ringan dan tidak terlalu mempengaruhi loading blog. Selain itu, menu horizontal responsive sederhana dengan CSS ini sangatlah simple dan juga mudah untuk dipasang sebagai menu navigasi blog Anda.

Demikianlah artikel tentang Cara mudah membuat menu horizontal navigasi responsive sederhana dengan CSS ini bisa saya sampaikan semoga bermanfaat.
Cara memasang Google Custom Search Engine di blog

Cara memasang Google Custom Search Engine di blog

Google penelusuran khusus atau yang juga dikenal dengan nama Google Custom Search Engine (CSE) merupakan salah satu fitur dari Google yang cukup menjanjikan untuk di tambahkan di blog Anda sebagai alat navigasi.

Selain karena fiturnya yang sangat memadai untuk digunakan sebagai mesin telusur, Google Custom Search Engine ini juga bisa dikaitkan dengan akun Adsense, sehingga sangat memungkinkan untuk dipakai sebagai alat navigasi blog sekaligus berguna untuk meningkatkan pendapatan adsense Anda.

Ada beberapa pilihan yang sudah disediakan dan bisa Anda gunakan untuk memasang Google CSE ini kedalam blog, namun pada artikel kali ini, saya hanya akan menerapkan pemasangan Google CSE yang memanfaatkan dan menggunakan Page (halaman statis) sebagai tempat menampilkan hasil pencarian.

memasang dan membuat Google Custom Search Engine
Selain karena hasil penelusurannya yang terlihat lebih rapi, cara ini juga saya anggap bisa menjaga pengunjung untuk tetap berada didalam blog ketika mereka menggunakan alat pencarian. Yuk, simak cara memasang Google Custom Search Engine pada langkah-langkah dibawah berikut

Cara memasang Google Custom Search Engine di blog


1. Siapkan halaman baru untuk menampilkan hasil pencarian

Langkah pertama yang diperlukan adalah dengan membuat halaman statis baru di Blog yang akan kita pasang Google Custom Search Engine. Halaman baru ini nantinya akan kita gunakan sebagai tempat untuk menampilkan hasil pencarian. Berikut cara membuatnya;
  • Loginlah ke blogspot Anda, lalu pilih blog yang akan Anda pasangi Google Custom Search Engine.
  • Lanjutkan dengan memilih menu Laman lalu dilanjutkan dengan klik pada pilihan Laman Baru.
  • Beri judul laman dengan nama "Search Results" atau sesuaikan dengan selera dan keinginan Anda.

    Membuat halaman search results
    Membuat halaman baru untuk menampilkan Search results
  • Klik Publish
  • Setelah selesai di Publish, bukalah halaman tersebut, kemudian salin alamat url lengkapnya lalu simpan kedalam notepad. Berikut adalah contoh alamat url yang saya gunakan untuk menampilkan hasil pencarian di blog ini http://www.mengelolablog.com/p/searcresult.html

Untuk sementara kita tinggalkan halaman baru di blogspot tadi dan ikuti langkah selanjutnya guna memasang Google Custom Search Engine di blog.


2. Membuat Google Custom Search Engine

Setelah kita membuat laman tempat menampilkan hasil pencarian, langkah berikutnya adalah kita akan membuat Google Custom Search Engine. Ikuti langkah dibawah untuk mendapatkan kode dan script Google Custom Search Engine.
  • Login ke akun Google Anda, lalu kunjungi alamat https://cse.google.com/cse/all
  • Pilih menu New Search Engine di sudut kiri atas
    Pilih menu New Search untuk membuat Google CSE
    Pilih New Search Engine
  • Anda akan dibawa ke halaman seperti pada gambar dibawah berikut. Isikan alamat blog Anda pada kotak Sites to search. Kemudian, pilih Indonesian pada menu Language jika blog Anda menggunakan bahasa Indonesia (sesuaikan dengan bahasa di blog Anda), dan terakhir klik pada tombol Create untuk membuat Google Custom Search Engine.
    Buat New Google Custom Search Engine
    Isikan data untuk membuat New Google CSE
  • Saat ini Google Custom Search Engine Anda sudah siap digunakan, namun untuk pemasangan di blog, pilihlah menu Control Panel untuk merubah setting agar mesin telusur ini bisa berfungsi dengan baik dan benar. Silahkan di klik terlebih dahulu tombol Control Panel yang terletak di sudut kanan bawah.
    Pilih control panel untuk membuat Google Custom Search Engine
    Pilih control panel untuk membuat Google Custom Search Engine
  • Setelah Anda mengklik tombol Control Panel tadi, Anda akan dibawa ke halaman Setup (pengaturan). Disini Anda bisa melakukan pengaturan lanjutan, namun kali ini kita lewati dahulu halaman ini dengan mengklik menu Look and feel di sisi kiri Anda.
    Halaman menu SETUP
    Halaman menu SETUP
  • Setelah halaman menu pengaturan look and feel akan terbuka, lanjutkan dengan memilih Two page, kemudian lanjutkan dengan mengklik tombol Save & Get Code disudut bawah kanan untuk mendapatkan kode script Google Custom Search Engine.
    Pilih Look And feel Untuk membuat Google Custom Search Engine
    Masuk ke menu Look And Feel untuk pengaturan Google CSE
  • Setelah Anda mengklik Save & Get Code, jangan langsung meng-copy code yang ada, namun yang perlu Anda lakukan adalah mengklik tombol Search Result Details yang berada tepat disamping kanan tulisan Get code for search box hingga muncul pop up baru.
  • Isikan pada kotak pertama, alamat url halaman baru yang sudah Anda simpan sebelumnya pada langkah 1 diatas tadi, kemudian lanjutkan dengan mengklik save untuk menyimpan perubahan. Silahkan perhatikan gambar dibawah ini
    Pop up pada Search Result details
    Mengisi alamat url halaman hasil pencarian pada pop up Search result detail
  • Setelah selesai dengan Search Result Details, barulah Anda bisa meng-copy dan paste-kan kode untuk search box kedalam notepad dan simpanlah untuk sementara. Perhatikan bahwa kode script pertama ini adalah kode untuk kotak pencariannya, sedangkan untuk mendapatkan Kode Hasil Pencarian, klik tombol berwarna biru disisi kiri bawah yang bertuliskan Next: Get code for search results. Copy lalu pastekan kode search results kedalam notepad untuk sementara waktu.
    Kode Search Box untuk membuat Google Custom Search Engine
    Kode Search Box untuk membuat Google Custom Search Engine
  • Sampai di langkah ini Anda sudah memiliki 2 script yang akan kita gunakan untuk membuat Google Custom search Engine, yaitu kode script Kotak penelusuran dan kode script hasil penelusuran. Langkah selanjutnya adalah memasang kode script tersebut kedalam Blog.


3. Cara memasang Google Custom Search Results di blog

Buka kembali akun blogspot yang sudah Anda lakukan di langkah #1, kemudian ikuti kembali langkah pemasangan kode script Google Custom Search Engine di blog berikut ini.

#A. Memasang kode script Search Results / hasil penelusuran
  • Pilih menu laman, cari laman yang sudah Anda buat tadi lalu klik Edit
  • Pindahkan mode penulisan dari compose ke mode HTML
  • Buka Notepad yang berisikan kode script Google Custom Search Engine. Pilih kode script Search Results, lalu copy pastekan kedalam laman baru tersebut.
    Memasang script Google Custom Search Results
    Memasang script Google Custom Search Results
  • Klik publish untuk menerbitkan halaman Search Results

Langkah selanjutnya yang diperlukan untuk menyelesaikan tutorial kali ini adalah dengan memasang script Search Box (kotak penelusuran) melalui menu layout blogspot, untuk detailnya perhatikan langhkah dibawah berikut.

#B. Memasang kode script Search Box / Kotak Penelusuran
  • Pilih menu layout yang terletak disisi kiri Anda
  • Klik pada Add a gadget untuk menambahkan kotak penelusuran
  • Pilih menu HTML/Javascript
  • Copy dan pastekan kode script Search Box kedalam gadget tersebut lalu klik simpan
    Memasang script Google Custom Search Results di gadget html
    Memasang script Google Custom Search Results di gadget html
  • Atur posisi Search box sesuai keinginan Anda
  • Klik Save Arrangement untuk menyimpan perubahan.

Berikut adalah contoh hasil Google Custom Search Engine yang sudah jadi dan bisa Anda coba.





Kesimpulan

Untuk memasang Google Custom Search Engine ini memang sedikit ribet, namun jika Anda teliti saat memasangnya, maka seharusnya Fitur ini sudah bisa digunakan dan berfungsi di blog.

Sebagai catatan, ada satu kendala ketika saya mencobanya di browser Mozilla Firefox. Hasil pencarian Google Custom Search Engine ini tidak bisa terbuka (kemungkinan browser ini memblock script dari Google sehingga tidak mau terbuka), oleh karena itu untuk memastikannya berfungsi atau tidak silahkan Anda coba buka pada browser lainnya (saya rekomendasikan untuk menggunakan Google Chrome).

Yap, demikianlah langkah-langkah memasang Google Custom Search Engine kedalam blog, semoga bermanfaat
Cek kecepatan loading hingga prediksi hilang kunjungan di Testmysite-thinkwithgoogle

Cek kecepatan loading hingga prediksi hilang kunjungan di Testmysite-thinkwithgoogle

Kabar terbaru kali ini yang bisa saya sampaikan adalah tentang update sebuah webtool gratisan besutan Google yang umum dipakai untuk mengetahui kecepatan loading sebuah blog khusus untuk perangkat mobile.

Ya, tools yang satu ini awalnya merupakan turunan dari pagespeed insight yang  sudah lebih dahulu tersedia bagi para webmaster guna memeriksa kecepatan loading blog mereka, namun perubahan yang terjadi kali ini adalah Testmysite saat ini didukung oleh situs pemeriksa kecepatan loading blog yang memang sudah lama berkecimpung soal urusan kecepatan loading yaitu webpagetest.org.

Pada dasarnya kegunaan dari tool ini adalah sama, yaitu sama-sama digunakan untuk memeriksa kecepatan waktu loading sebuah halaman blog. Namun, Testmysite ini lebih ditujukan untuk pemeriksaan kecepatan loading versi perangkat mobile.

Selain itu, pembaruan kali ini juga menambahkan beberapa fitur baru guna memperjelas hasil pengetesan kecepatan loading yang bisa dijadikan acuan bagi para pengelola blog dalam meningkatkan kecepatan loading blognya.


Apa saja pembaruan yang dilakukan ?


Dari hasil penelusuran yang saya lakukan, ada beberapa perubahan yang terjadi terkait update dan pembaruan yang dilakukan pada webtool ini yaitu :


1. Perubahan pada tampilan laman pemeriksaan


Perubahan yang nampak pertama kali pada webtool ini adalah tampilan laman pemeriksaannya. Jika sebelumnya background seorang wanita yang sedang memainkan smartphone, kini tampilan halaman awal pemeriksaan lebih didominasi dengan warna biru berlatar smartphone model flat design.

tampilan testmysite sebelum dan sesudah pembaran
Tampilan testmysite sebelum dan sesudah pembaruan


2. Penambahan nilai prediksi hilangnya pengunjung


Selain menampilkan nilai kecepatan loading, perubahan berikutnya yang nampak adalah munculnya nilai prediksi kehilangan pengunjung yang tampil dalam bentuk persentase. Nilai perkiraan ini mengindikasikan besarnya nilai persentase kehilangan pengunjung terkait hasil kecepatan loading yang sudah didapat.

Nilai prediksi kehilangan penginjung di testmysite
Nilai prediksi kehilangan pengunjung di testmysite


3. Perbandingan kategori seputar niche blog


Selanjutnya, pada laman hasil pemeriksaan juga ada penambahan informasi terkait perbandingan dengan blog dan situs dengan kategori-kategori sejenis. Hasil kecepatan loading yang didapat dari pemeriksaan menunjukan posisi dari performa blog Anda dengan situs sejenis.

Tampilan perbandingan indistri terkait niche
Tampilan perbandingan industri terkait niche

Untuk halaman selanjutnya tidaklah jauh berbeda dengan format sebelumnya yaitu adanya tombol get my free report bagi Anda yang menginginkan laporan yang lebih lengkap terkait pemeriksaan yang sudah dilakukan sebelumnya (meskipun dalam hal ini, menurut saya lebih simple jika kita menggunakan pagespeed insight karena laporan dan rekomendasi perbaikan langsung di tampikan di halaman tersebut tanpa perlu melalui email)


Kesimpulan

Perubahan yang nampak dari pembaruan ini lebih cenderung ada pada tampilan informasi terkait perbandingan kategori dan nilai prediksi kehilangan pengunjung terkait hasil pemeriksaan. Meskipun tidak signifikan namun informasi yang terkandung didalamnya bisa dimanfaatkan guna pengembangan blog.

Nah bagi Anda yang belum pernah mencoba silahkan kunjungi alamat Url tools ini di https://testmysite.thinkwithgoogle.com/ guna memeriksa seberapa cepat loading blog Anda dan seberapa besar persentasi kehilangan pengunjung terkait hasilnya.

Demikianlah artikel Cek kecepatan loading hingga prediksi hilang kunjungan di Testmysite-thinkwithgoogle ini bisa sayasampaikan, semoga bermanfaat

Cara mengetahui kata kunci organik sebuah postingan blog menggunakan Search Console

Cara mengetahui kata kunci organik sebuah postingan blog menggunakan Search Console

Pernahkah kamu terpikir tentang apa saja kata kunci organik yang masuk kedalam postingan blog ? Jika tidak, kini saatnya kamu perlu mempelajari apa saja kata kunci organik yang bisa mengantarkan setiap pembaca masuk ke setiap postingan di blog kamu.

Sebagai pengelola blog, tentunya yang kita inginkan saat membuat blog adalah blog kita bisa berkembang naik dan naik setiap waktunya. Dan salah satu kunci untuk mengembangkan blog adalah dengan memperbanyak kunjungan pembaca ke dalam blog kita.

Nah, untuk memperbanyak jumlah kunjungan pembaca tentu kita juga perlu tau terlebih dahulu darimana asal pengunjung yang masuk ke blog kita. Ada yang langsung (direct) dengan mengetikkan alamat url posting blog, ada yang melalui media sosial (referral), ada juga yang melalui Search Engine (SEO) dan beragam jalur lainnya.

MENGETAHUI KATA KUNCI POSTINGAN MELALI SEARCH CONSOLE

Jalur direct dan melalui media sosial biasanya tidak mengandung kata kunci pencarian, sedangkan pengunjung yang masuk dari Search Engine biasanya mengandung kata kunci pencarian, yaitu kata kunci yang diketikkan dan digunakan pengunjung melalui search engine.

Pada artikel kali ini, saya akan menginformasikan tentang bagaimana cara kita mengetahui apa saja kata kunci yang digunakan oleh pengunjung untuk masuk ke salah satu postingan blog kita.

Namun sebelum kita melanjutkan, saya harap blog Anda sudah dikaitkan dengan search console. Jika belum maka Anda perlu mengkaitkannya terlebih dahulu, silahkan baca artikel cara agar blog terindeks di Google terlebih dahulu terutama pada poin #2 untuk mendaftarkan blog ke Search Console

Cara mengetahui kata kunci sebuah postingan menggunakan search console


Ikuti langkah dibawah ini untuk mengetahui kata kunci yang digunakan oleh pengunjung untuk masuk ke salah satu postingan di blog kita melalui search Console,
  1. Log in kedalam search console
  2. Pilih Blog yang akan di cek
  3. Lihat sisi kiri, kemudian pilih menu Lalu Lintas Penelusuran
  4. Kemudian pilih Telusuri Analytics
    Menu lalu lintas penelusuran di search console
  5. Lanjutkan dengan memilih Laman
    Pilih laman
  6. Urutkan nilai klik dengan mengklik tulisan "klik" hingga didapat nilai paling besar.
    Urutkan nilai klik
  7. Klik pada link laman disisi kirinya

    Pilih laman
  8. Setelah masuk ke grafik baru, pilih Kueri

    Pilih kembali kueri
  9. Ya, disitulah semua kata kunci yang digunakan pengguna untuk sebuah halaman posting bisa Anda temukan
Setelah anda selesai pada langkah ke 9, maka disitu Anda dapat melihat apa saja kata kunci yang digunakan oleh pengunjung blog Anda pada satu laman postingan.

Tips :

1. Urutkan kembali nilai klik untuk mengetahui kata kunci apa yang paling banyak digunakan pengunjung untuk masuk ke postingan tersebut.
2. Klik pada Tayangan, RKT, Posisi untuk melanjutkan analisa kata kunci yang ingin Anda optimalkan pada postingan tersebut.

Berikut adalah beberapa manfaat yang bisa Anda dapatkan setelah mengetahui kata kunci pencarian sebuah postingan melalui Search Console
  1. Sumber ide untuk membuat artikel selanjutnya
  2. Sumber ide untuk mengembangkan artikel yang sudah ada berdasarkan target kata kunci yang ingin Anda targetkan.
  3. Mengetahui mana saja postingan yang naik ataupun turun pengunjungnya sehingga lebih mudah untuk memperbaikinya.


Kesimpulan

Kata kunci yang digunakan dalam sebuah postingan sangat menentukan jumlah pengunjung organik yang masuk dari Search Engine. Adakalanya postingan kita bisa menempati rangking #1 SERP Google namun pengunjungnya sedikit karena kita salah menargetkan kata kunci yang digunakan dalam postingan tersebut.

Dengan mempelajari dan mengetahui kata kunci apa saja yang paling banyak diklik dan digunakan pengunjung pada sebuah laman postingan, maka kita bisa mencoba untuk mengubah pola dalam meningkatkan kekuatan artikel terhadap kata kunci yang digunakan pengunjung tersebut guna meningkatkan pageviews.

Demikianlah artikel tentang Cara mengetahui kata kunci organik sebuah postingan blog menggunakan Search Console bisa saya sampaikan, terima kasih.