Cara Menambahkan Widget ke Blogger dalam 10 Langkah dan Membuat Sticky Sidebar Blog: Widget Tetap Muncul Mengikuti Scroll

Cara Menambahkan Widget ke Blogger dalam 10 Langkah dan Membuat Sticky Sidebar Blog: Widget Tetap Muncul Mengikuti Scroll

Kadang-kadang, bagus untuk membumbui blog Anda dengan menambahkan konten tambahan di samping postingan blog Anda. Salah satu cara untuk melakukan ini adalah dengan menambahkan widget ke menu Anda.

Jika Anda menggunakan Blogger untuk blog Anda, petunjuk ini akan memandu Anda melalui penambahan widget ke blog Anda.

Kesulitan: Mudah
Waktu Yang Dibutuhkan: 5 menit

Langkah 1-10: Menambahkan Widget ke Blogger

Temukan widget yang ingin Anda tambahkan ke blog Anda dan salin kode widget ke papan klip. Masuk ke akun Blogger Anda, buka panel kontrol blog, dan klik pada tab template. Klik tautan Add Page Element di bagian atas sidebar Anda (menu). Ini akan memunculkan halaman Choose New Element.

Temukan entri untuk HTML/Javascript dan klik tombol Tambahkan ke Blog. Ini akan memunculkan halaman baru yang memungkinkan Anda untuk menambahkan beberapa HTML atau Javascript ke sidebar Anda. Ketik judul apa pun yang Anda ingin berikan blokir yang akan berisi widget. Anda juga dapat membiarkan judul kosong.

Tempel kode widget ke dalam kotak teks yang berlabel konten. Klik tombol Simpan Perubahan. Secara default, Blogger menempatkan elemen baru di bagian atas sidebar. Jika Anda mengarahkan mouse ke elemen baru, penunjuk akan berubah menjadi empat panah yang mengarah ke atas, bawah, kiri dan kanan.

Sementara penunjuk mouse memiliki panah tersebut, Anda dapat menahan tombol mouse untuk menyeret elemen ke atas atau ke bawah dalam daftar, dan kemudian lepaskan tombol untuk meletakkannya di sana. Klik pada tombol Lihat Blog di samping tab Anda untuk melihat widget yang baru ditambahkan.

Membuat Sticky Sidebar Blog: Widget Tetap Muncul Mengikuti Scroll

Tips blogging kali ini berupa desain blog, yaitu Cara Membuat Sticky Sidebar Blog: Widget Tetap Muncul Mengikuti Scroll. Saya bagikan setelah dipasang di blog ini.

Apa itu Sticky Sidebar? Disebut juga Fixed Sidebar, Floating Sidebar, atau sticky sidebar adalah salah widget di bagian kanan blog Blogger yang tetap muncul saat halaman dicroll atau digeser ke atas. Scroll dan pehatiakan widget label yang tetap muncul!

Fungsi sticky sidebar antara lain mengisi kekosongan bagian samping halaman, jika postingannya panjang banget. Dengan begitu, selain bagus, juga menyajikan elemen atau tautan konten blog kita yang lain ke pembaca.

Cara Membuat Sticky Sidebar Blog

  1. Masuk ke kode HTML di dashbloard Blogger Anda, klik Theme (Tema) > klik panah ke bawah, lalu pilih Edit HTML.
  2. Pasang Kode CSS: Simpan kode berikut ini di atas kode ]]>`` <b:skin>`
#Label1 {
 width: 100%;
 max-width: 320px;
}
@media only screen and (min-width: 260px) and (max-width: 989px) {
 #Label1 {
 display: none!important;
 }
}
  1. Pasang Kode JavaScript: Simpan kode berikut ini di atas kode </body> <script type='text/javascript'>
//<![CDATA[
$(function() {
 if ($('#Label1').length) {
 var el = $('#Label1');
 var stickyTop = $('#Label1').offset().top;
 var stickyHeight = $('#Label1').height();
 $(window).scroll(function() {
 var limit = $('#footer-wrapper').offset().top - stickyHeight - 20;
 var windowTop = $(window).scrollTop();
 if (stickyTop < windowTop) {
 el.css({ position: 'fixed', top: 20 });
 } else {
 el.css('position', 'static');
 }
 if (limit < windowTop) {
 var diff = limit - windowTop;
 el.css({ top: diff });
 }
 });
 }
});//]]></script>
  1. Simpan perubahan dan coba melihat widget sticky sidebar Anda.

Anda dapat memilih widget lain, misalnya PopularPost1, untuk menampilkan widget Posting Terpopuler. Cara lain membuat sticky sidebar bisa dilihat di W3 School. Sekian.