Menambahkan dan Mengedit Sidebar Blogger (menu Samping)

Menambahkan dan Mengedit Sidebar Blogger (menu Samping)

Sidebar adalah sebuah kolom yang berada di samping "main content" sebuah website, sidebar bisa berada di sebelah kanan juga bisa diletakkan di sebelah kiri.

Untuk website gurublogger sendiri menggunakan sidebar di sebelah kanan


Bagi pengunjung blog fungsi utama sidebara adalah memudahkan navigasi, sebab link link utama yang tidak bisa diakomodir oleh "main menu" diletakkan disana.

Bagi pemilik blog sendiri fungsi sidebar adalah meletakkan link link penting agar pengunjung mudah menemukan sebuah konten

Banyak pemilik web menggunakan sidebar untuk meletakkan peta lokasi, i frame facebook page, i frame toko di shopee dll

Hal hal seperti itu boleh dilakukan bila memang "sangat penting", bila tidak sebaiknya jangan lakukan karena javascript dari pranala luar menyebabkan website menjadi berat (lemot)

Dalam artikel kali ini gurublogger akan membahas bagaimana cara merubah menu di sidebar bila teman teman menggunakan template SEO Aggressive Blogger Template V.1.1.0 buatan gurublogger dan juga bagaimana cara membuat menu sidebar dari nol


Merubah Menu Sidebar Gurublogger V.1.1.0


Frontend adalah tampilan website versi pengunjung sedangkan backend adalah tampilan website versi admin

Bila teman teman menggunakan template gurublogger, tampilan tersebut kurang lebih terlihat seperti ini :

(untuk admin bisa mengakses sidebar disini)






Apa yang dilihat oleh pengunjung blog dan apa yang dilihat admin di menu admin berbeda tergantung kode html yang dipasng namun pada dasarnya itu adalah hal yang sama.

Untuk merubah menu caranya cukup mudah, di bagian backend silahkan klik logo pensil pada masing masing item sidebar



Bila ingin menghapus search dari sidebar cukup klik pada tombol remove, klik cancel untuk membatalkan, dan klik tombol save bila hendak menyimpan perubahan yang baru saja dibuat


Menampilkan Category Pada Sidebar Blogger


Secara default pada template gurublogger sudah terpasang menu category, menu ini menampilkan kategori kategori di dalam blog.

Saat kita membuat sebuah artikel kita memberi artikel tersebut "label", label ini sama halnya dengan kategori hanya saja blogger menyebutnya sebagai label, ilustrasinya seperti ini



Label atau kategori tersebut kemudian terlihat di halaman front end karena kita menambahkan "menu label" di bagian sidebar.

Tampilannya pun dapat diatur sedemikian rupa sehingga sesuai dengan design website kita masing masing




Menampilkan Iklan Di Sidebar Blogger


Dalam template gurublogger V.1.1.0 juga sudah disertakan space untuk menaruh iklan, untuk merubah iklannya silahkan klik edit dan ganti kode iklan dengan kode iklan milik teman teman sendiri




Menampilkan Artikel Populer di Sidebar Blogger


Menu artikel populer bawaan template gurublogger V.1.1.0 sengaja di setting secara manual agar kita bisa mengendalikan Flow audience.

Artikel artikel yang sifatnya adalah "perang SEO" dalam tanda kutip, konten marketing, serta artikel artikel dengan keyword incaran kita letakkan pada menu ini secara manual.

Catatan: Untuk menghindari kesalahan dalam mengcopy silahkan copy kode kedalam notepad terlebih dahulu baru selanjutnya dicopy lagi dan dipindahkan kedalam blog 


Untuk mengedit kode htmlnya kurang lebih sebagai berikut




<div class="sidebar1">
  <ul>
    <li>
      <a alt="article-1"
        href="https://templategurublogger.blogspot.com/2020/07/article2-etiam-sit-amet-orci-eget-eros.html">Popular Article1</a>
    </li>
    <li>
      <a alt="article-1"
        href="https://templategurublogger.blogspot.com/2020/07/article-4-lorem-ipsum-aenean-commodo.html">Popular Article2</a>
    </li>
    <li>
      <a alt="article-1"
        href="https://templategurublogger.blogspot.com/2020/07/article-3-lorem-ipsum-dolor-sit-amet.html">Popular Article3</a>
    </li>
    <li>
      <a alt="article-1"
        href="https://templategurublogger.blogspot.com/2020/06/article-1.html">Popular Article4</a>
    </li>
    <li>
      <a alt="article-1"
        href="https://templategurublogger.blogspot.com/2020/07/article2-etiam-sit-amet-orci-eget-eros.html">Popular Article5</a>
    </li>
    <li>
      <a alt="article-1"
        href="https://templategurublogger.blogspot.com/2020/07/article-4-lorem-ipsum-aenean-commodo.html">Popular Article6</a>
    </li>
    <li>
      <a alt="article-1"
        href="https://templategurublogger.blogspot.com/2020/07/article-3-lorem-ipsum-dolor-sit-amet.html">Popular Article7</a>
    </li>
  </ul>
</div>

Silahkan ganti yang berwarna kuning dengan judul yang diinginkan dan yang berwarna biru dengan link artikel terkait.

Untuk alt bisa diganti dengan alternate artikel masing masing (biasanya keyword).... ganti yang didalam tanda petik, gunakan minus sebagai pengganti spasi

Setelah itu copy kembali kode html tersebut ke populer sidebar kemudian save


Sticky Sidebar Blogger


Gurublogger menempatkan dua menu yang "sticky" tetap menempel walaupun pengunjung malakukan scroll

Yang pertama adalah kode html untuk gambar (bisa diganti dengan fotonya masing masing sekedar narsis) atau dengan gambar lain.



Untuk mengganti gambar silahkan ganti link gambar yang diwarnai dengan warna kuning menggunakan link gambar milik teman teman sendiri, dan jangan lupa untuk mengganti judul gambar yang berwarna biru.

<div><img alt="false-advertising" class="lazy"

data-src="https://1.bp.blogspot.com/-HyW-6jC7JCE/Xvxmb5S2y7I/AAAAAAAAHao/4uywq9WZM6Ixt7LxVDMgw-smW_dcVw_JwCK4BGAsYHg/d/false-advertising.jpg"

src="https://1.bp.blogspot.com/-_Twe1QIDkfM/XvwABcQvxDI/AAAAAAAAHZw/QQ28-22Zm0UX7Wc1CgWRA_tYp1huHEn8gCK4BGAsYHg/lazy-load.jpg"

title="False Advertising" / /></div>


Selanjutnya copykan kode html diatas kedalam menu sidebar kemudian simpan.


Untuk merubah menu link caranya juga hampir sama, silahkan ganti kode yang diwarnai dibawah ini dengan kode milik teman teman sendiri

<div class="sidebar1">
<ul>
<li>

<a alt="article-1" href="https://templategurublogger.blogspot.com/2020/07/article2-etiam-sit-amet-orci-eget-eros.html">Feature Link 1</a>
</li>

<li><a alt="article-1" href="https://templategurublogger.blogspot.com/2020/07/article-4-lorem-ipsum-aenean-commodo.html">Feature Link 2</a></li>

<li><a alt="article-1" href="https://templategurublogger.blogspot.com/2020/07/article-3-lorem-ipsum-dolor-sit-amet.html">Feature Link 3</a>

</li>
</ul>
</div>






Membuat Menu di Sidebar Blogger dari Nol


Untuk membuat menu sidebar dari nol cukup mudah, beberapa diantaranya tinggal checklist, atau tinggal upload atau tinggal paste kode kedalam blog



Untuk mengakses gadget silahkan pilih Layout >> Add Gadget

Catatan: bila menu add gadget tidak ada, kemungkinan disebabkan karena teman teman menonaktifkan javascript default Blogger

Blogger menyediakan 25 gadget yang bebas dipasang di sidebar tanpa dipungut biaya

Dari ke25 gadget tersebut beberapa diantaranya memang sangat penting dan harus dipasang di blog, dan sebagaian lgi hanya sebatas pernak pernik

Berikut ini adalah gadget blogger yang menurut gurublogger penting :


1. Gadget Blog Search


Definisi menurut blogger: Let visitors search your blog.

Artinya bila kita menambahkan gadget pencarian maka pengunjung blog akan bisa mencari artikel didalam blog

Untuk menambahkan gadget ini cukup mudah, tinggal add gadget >> pilih blog search >>Save

Hasilnya kurang lebih akan tampak seperti gambar dibawah ini :





2. Gadget Featured Post


Definisi menurut blogger: Highlight a special post on your blog.

Kita bisa menampilkan postingan penting lengkap dengan gambar dan snippetnya pada halaman sidebar, sayangnya hanya 1 buah postingan

Untuk menambahkan gadget featured post caranya adalah: add gadget >> Pilih Featured Post



Pilih show featured post untuk menampilkan gadget tersebut pada sidebar, dan uncheck untuk menyembunyikan (tidak tampil)

Gadget title bisa diisi bisa juga dikosongin saja

Post snippet nya bisa dipilih antara menampilkan judul artikel, menampilkan snippet dan juga apakah menampilkan gambar atau tidak

Yang terakhir kita bisa memilih usethe most recent publish post untuk menampilkan postingan terbaru, atau

pilih selected featured post untuk memilih featured post secara manual

Kenapa template gurublogger tidak dipasang featured post?

Dengan alasan SEO saya sengaja tidak memasang gadget ini, bila teman teman mau menambahkan gadget ini silahkan dicoba memodifikasi template



3. Gadget HTML/JavaScript


Definisi menurut blogger: Add third-party functionality or other code to your blog.

Gadget html / javascript merupakan gadget paling penting menurut gurublogger

Karena teman teman bisa menambahkan kode apapun baik itu dari 3rd party seperti facebook, instagram, twitter atau membuat kode sendiri untuk ditambahkan disitu

Untuk menambahkan gadget html / javascript caranya adalah: add gadget >> Pilih Html / Javascript

Selanjutnya silahkan tulis / copy kode di area yang sudah disediakan kemudian save dan lihat hasilnya


Untuk sekedar uji coba teman teman bisa menggunakan kode html berikut:
<img class="lazy" src="https://1.bp.blogspot.com/-_Twe1QIDkfM/XvwABcQvxDI/AAAAAAAAHZw/QQ28-22Zm0UX7Wc1CgWRA_tYp1huHEn8gCK4BGAsYHg/lazy-load.jpg" data-src="https://1.bp.blogspot.com/-J32hKuoBzGg/XvrIiIU6g_I/AAAAAAAAHYA/NGIJtsx9YugTjkXOFvIkmWEYCAaHoHfRgCK4BGAsYHg/d/banner.jpg" alt="ads-iklan" title="Ads / Iklan" />




4. Gadget Labels


Definisi menurut blogger: Show all the labels of posts in your blog.

Fungsi dari gadget ini adalah untuk menampilkan label atau biasa kita sebut sebagai kategori

Dengan menambahkan gadget label maka ketika user melakukan klik  pada label / kategori tertentu maka pengunjung akan dibawa pada daftar postingan pada kategori yang bersangkutan

Penjelasan terkait penggunaan gadget label telah diuraikan diatas (scroll ke atas)



5. Gadget Link List


Definisi menurut blogger: Display a collection of your favorite sites, blogs, or web pages for your visitors.

Fungsi dari gadget link list adalah untuk membuat daftar link, link tersebut bisa berupa link website lain, medsos, atau link ke artikel didalam blog

Untuk menambahkan gadget Link List caranya adalah: add gadget >> Pilih Link List

Untuk menambahkan link baru cukup isi kolom New Site Name >> kemudian isikan linknya pada New Site Url >> kemudian add link

Selanjutnya klik save dan lihat hasilnya






6. Gadget Popular Posts


Definisi menurut blogger: Display a list of the most popular posts from your blog.

Gadget popular post hampir sama dengan gadget featured post, bedanya adalah bahwa gadget ini menampilkan link post terpopuler secara otomatis

Untuk menambahkan gadget popular post caranya adalah: add gadget >> pilih popular post

Langkah selanjutnya adalah memilih postingan terpopuler apakah all time, terpopuler tahun ini, 30 hari terakhir, dan 7 hari terakhir

Pilihan selanjutnya adalah akan ditampilkan dengan thumbnail gambar atau tidak, menggunakan snippet atau tidak, dan berapa jumlah postingan populer yang ingin ditampilkan

Bila modifikasi dirasa cukup teman teman bisa save dan lihat hasilnya.

Gurublogger sendiri tidak menggunakan gadget ini karena lebih suka mengendalikan flow chart kunjungan secara manual dan membuat fake popular post menggunakan gadget html


Demikian sedikit tips menggunakan gadget dan memodifikasi halaman sidebar pada blogger

Selamat belajar...
Komentar
Silahkan, saya ga nggigit !