Home / WordPress / Cara Membuat Sticky Widget (Fixed Sidebar) WordPress Dengan Mudah

Cara Membuat Sticky Widget (Fixed Sidebar) WordPress Dengan Mudah

Cara Membuat Sticky Widget – Dihari yang cerah ini saya akan membahas bagaimana cara membuat sticky widget blog? Sebenarnya apa sih sticky itu? Mungkin secara tidak sadar Anda sendiri sering melihat fitur sticky yang diterapkan di sebuah blog atau website. Tapi Anda tidak tahu bahwa fitur tersebut namanya adalah sticky. Maka dari itu sebelum membahas cara membuatnya, alangkah baiknya saya jelaskan terlebih dahulu apa yang dimaksud dengan sticky.

Baca Juga : Cara Membuat Sticky Post Di WordPress Dan Pengertiannya

Sticky (bahasa Inggris) dan jika diartikan kedalam bahasa Indonesia adalah lengket. Lalu apa hubungannya dengan sticky widget? Dengan sudah mengetahui bahwa arti kata sticky adalah lengket, mungkin Anda sudah bisa menerka kalau sticky widget adalah widget yang tetap lengket berada pada sidebar.

Maksud widget tetap lengket pada sidebar adalah ketika mouse di scroll kebawah maka widget tetap lengket pada tempatnya. Artinya widget tidak akan menghilang pengaruh scroll mouse.

Kita sering melihat fitur sticky widget ini diterapkan di forum-forum bahkan jejaring sosial seperti Facebook juga pada widgetnya menggunakan sticky.

Selain widget biasanya yang dibuat sticky adalah menu, iklan, dan kotak pencarian. Maksud dibuat sticky pada elemen-elemen tertentu tersebut adalah untuk menonjolkan bagian tertentu agar mudah terlihat oleh pembaca. Dengan begitu kemungkinan fitur sticky akan memperoleh nilai jumlah klik yang banyak.

Kemudian fungsi diaktifkannya sticky adalah untuk memudahkan pembaca blog. Misal yang dibuat sticky adalah kotak pencarian, maka ketika pembaca ingin mencari artikel lain tidak perlu menggeser-geserkan scroll mouse.

Jika sudah jelas apa yang dimaksud dengan sticky, baiklah mari kita bahas sekarang bagaimana cara membuat sticky khususnya membuat sticky widget. Yang akan saya bahas sticky widget atau fixed sidebar untuk blog CMS WordPress.

Namun bukan berarti Blogspot tidak bisa menggunakan trik ini. Karena pada tutorial sticky widget ini saya bagi menjadi dua bagian. Pertama cara membuat sticky widget menggunakan plugin dan kedua tanpa plugin. Nah untuk Blogspot bisa menerapkan cara yang kedua, yaitu membuat sticky widget menggunakan kode HTML dan Javascript (tanpa plugin).

Sedangkan untuk blog WordPress.com karena tidak diperbolehkan melakukan perubahan kode, solusinya Anda bisa menggunakan template yang sudah dilengkapi fitur sticky widget, sticky menu, dan sebagainya.

Cara Membuat Sticky Widget Menggunakan Plugin (Khusus WordPress TLD)

Banyak plugin gratis untuk membuat sticky widget di WordPress, diantaranya adalah plugin Q2W3 Fixed Widget.

Silakan Anda download plugin Q2W3 Fixed Widget kemudian install dan aktifkan. Saya tidak perlu membahas lagi bagaimana cara mengaktifkan plugin. Saya anggap Anda semua sudah bisa melakukannya.

Setelah sukses menginstall dan mengaktifkan plugin Q2W3 Fixed Widget, sekarang Anda klik pilih menu Appearance kemudian Fixed Widget Options. Halaman ini fungsinya untuk mengatur bagian-bagian tertentu plugin Q2W3 Fixed Widget.

Anda setting lagi sesuai dengan yang Anda inginkan atau kalau tidak mau ribet, Anda tinggal menyamakan pengaturannya seperti yang terlihat pada gambar di bawah ini :

Cara Membuat Sticky Widget (Fixed Sidebar) WordPress Dengan Mudah 1

Simpan semua pengaturan Anda di halaman Fixed Widget Options dan sekarang Anda pergi menu Appearance kemudian Widgets. Anda buat widget baru yang akan ditampilkan di sidebar dengan cara seperti biasa yaitu klik & drop. Atau bisa juga menggunakan widget yang sudah aktif di sidebar WordPress Anda.

Setelah Anda mengaktifkan plugin Q2W3 Fixed Widget, nanti di setiap widget akan muncul sebuah pengaturan baru yaitu Fixed Widget. Nah jika Anda ingin membuat fixed pada widget tertentu, caranya Anda tinggal mencentang Fixed Widget tersebut.

Cara Membuat Sticky Widget (Fixed Sidebar) WordPress Dengan Mudah 2

Bagaimana mudah bukan? Dan memang jika kita menggunakan plugin, kita tidak akan dipusingkan dengan pengaturan-pengaturan kode. Namun efeknya jika kita terlalu banyak menggunakan plugin, maka akan menimbulkan beban server bertambah berat. Jika kuota bandwith hosting kita pas-pasan, maka kinerja/kecepatan blog akan menurun.

Cara Membuat Sticky Widget Tanpa Menggunakan Plugin

Cara ini bukan hanya blog CMS WordPress saja yang bisa mempraktekkan sticky widget, Blogspot juga bisa melakukannya. Karena cara membuat sticky widget ini menggunakan kode HTML dan Javascript.

Untuk menghemat penggunaan plugin, WordPress TLD sangat disarankan menggunakan cara ini.

Pertama : Anda tempatkan kode HTML dibawah ini kedalam Widget Text WordPress atau HTML/Javascript Blogspot. Dan jangan lupa Anda sisipkan dulu kode widget yang akan dibuat lengket!

<div id=”sticky-widget“>
Tempatkan kode widget yang akan dibuat sticky (lengket sidebar)
</div>

Kedua : Tempatkan juga kode Javascript dibawah ini kedalam file footer.php tepatnya diatas </body> atau bisa juga Anda tempatkan didalam file header.php di atas </head>. Sedangkan untuk pengguna Blogspot bisa langsung tempatkan kode Javascript diatas </body> atau </head> pada menu Template > Edit HTML.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<script type=”text/javascript” src=”https://googledrive.com/host/0B5oDbHPeegKrcm9HZnRIaHZDQjA”></script>
<script type=”text/javascript”>
if (screen.width >= 768) {
(function($) {
$.lockfixed(“#sticky-widget“,{offset: {top: 20, bottom: 500}});
})(jQuery);
}
</script>

Ok selesai sudah pembahasan Cara Membuat Sticky Widget Di WordPress baik yang menggunakan plugin dan tanpa plugin. Semoga artikel ini bisa membantu Anda yang sedang mencari-cari cara membuat sidebar fixed atau tetap tidak berubah tempat ketika mouse di scroll.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

7 comments

  1. sayang saya masih pake blogspot. jadi g bisa deh mas. mas ada cara ga buat blogspot. yang seperti ini.
    biar bisa ikut kemana – mana

    • Saya yakin mas sendiri tidak baca artikel diatas ya? Hmmmm coba deh mas simak lagi artikelnya. Terima kasih.

  2. gan klo misal mau bikin fixed widget yang dimana fixed setelan di scrol ke bawah kira2 60% baru fixed gimana gan..makasiih

  3. Cara yang kedua tidak work di theme saya. Apakah ada script lainya yang bisa lebih kompetabel pada theme wordpress seperti punya saya

  4. gan kalo bikin sticky pas di scroll ke bawah gmn?
    jadi nempelnya ke bagian bawah… sedang kalo scroll ke atas yg nempel widget lain
    kyk gambar ini nih…>>>>

    pas kebawah:
    Guest Post
    suka menulis?
    tuangkan idenya disini!

    pas ke atas= sosial widget

    soalnya ane liat cman sticky di atas aja optionnya…

Leave a Reply

Your email address will not be published. Required fields are marked *