Membuat Sticky Widget Di Template Evomagz Baru

 

Setelah beberapa waktu lalu mas Sugeng mengeluarkan update terbaru untuk template blogger Evomagz, saya sangat tertarik untuk membeli dan menambah koleksi menjadi yang ketiga dari empat template yang tersedia.

Evomagz versi 6.1 dibanderol dengan harga 215 ribu rupiah namun seperti biasa saya dapatkan diskon sehingga harganya jadi dibawah 200 ribuan.

Yang membuat saya memutuskan meminang template ini karena memiliki desain yang sangat beda dibanding Linkmagz, Viotoko dan Viomagz, selain itu juga karena saya sering membuat blog untuk beberapa client pribadi jadi sudah sepantasnya menambah koleksi sebagai variasi tentunya.

Desain, Update dan Kebijakan

Desain, update dan kebijakan merupakan faktor luar biasa dari semua template milik mas sugeng menurut saya pribadi. 

1. Desain tampilan sederhana namun didalamnya telah memuat banyak fitur yang sangat dibutuhkan, terutama bagi yang ingin memonetisasi halaman sebagai publisher adsense atau lainnya. Karena template-template ini sangat cepat loadnya, sudah disediakan widget penempatan iklan dan yang terpenting sangat di sukai google, terbukti hanya 2 bulan website saya sudah diterima program adsense pada pengajuan pertama.
   
2. Update yang selalu gratis ketika ada perubahan-perubahan fitur disisi blogger, serta fitur baru atau perbaikan yang ditambahkan pada semua produk mas Sugeng. Biasanya produk serupa hanya memberikan update dalam waktu terbatas atau bahkan tidak ada update sama sekali hmmm sayang ya...
   
3. Kebijakan pengguna, nah ini yang luar biasa lagi yang diberikan oleh mas Sugeng, anda dapat menggunakan template ini  pada seluruh domain yang anda punya termasuk client anda selama template tidak dijual kembali sebagai produk tunggal alias jual bebas.

saya tidak akan membahas lagi permasalahan lebih dalam fitur dan kelebihan template-template tersebut yang mana jika berminat bisa langsung di cek di halaman sugeng.id dan pilih yang mana kamu taksir.  

Sticky Widget Side Bar

Ok, salah satu fitur yang saya suka di template Linkmagz adalah adanya sticky widget side bar, yaitu widget yang bisa melayang ketika kita scrolling kebawah, sehingga sisi kanan halaman (Desktop Mode) selalu ada widget yang penting untuk selalu bisa dilihat oleh pengunjung, selain itu terkesan rapi karena saat scrolling panjang kebawah halaman kanan akan kosong jika tidak ada widgetnya.

Nah di template Evomagz fitur ini belum disematkan sehingga saya mencoba untuk memasangnya secara manual, jika kalian menginginkan dapat mengikuti tips yang saya bagikan dibawah.

 

1. Masuk menu layout di dashboard blogger
2. Pilih widget kanan yang ingin di sticky, usahakan posisi widget adalah yang paling kanan bawah agar tidak overlap saat scrolling. Buka widget dan dapatkan ID nya di bagian akhir url seperti contoh "https://www.blogger.com/rearrange?blogID=6537926254265&action=editWidget&sectionId=sidebar&widgetType=null&widgetId=PopularPosts1" nah PopularPost1 ini adalah ID nya.
3. Pasang atau masukkan script berikut tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#PopularPosts1').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
    var el = $('#PopularPosts1');
    var stickyTop = $('#PopularPosts1').offset().top;
    var stickyHeight = $('#PopularPosts1').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer"
      var windowTop = $(window).scrollTop();
        var lebar = $(window).width();
      if ((stickyTop < windowTop)&&(lebar > 759)) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Ingat sesuaikan ID PopularPost1 dengan ID widget kalian. Kemudian terakhir pasang atau masukkan script CSS berikut ini tepat diatas atau sebelum  kode ]]></b:skin> 

#PopularPosts1{width:100%;max-width:276px;margin:0;}
@media only screen and (max-width:768px){
#PopularPosts1{width:100%;max-width:100%}}

Selesai sudah pemasangan sticky widget kita, kode CSS diatas dapat diatur lebarnya widget yang diinginkan, sedangkan kode @media only screen and (max-width:768px){ fungsinya untuk melebarkan 100% pada tampilan mobile atau Handphone, jadi widget kita sudah megadopsi fungsi responsive.

 

Untuk demo atau contoh hasilnya dapat di cek di link smkpb yang merupakan halaman yang sudah dipindahkan ke hosting baru.

Nah tidak terlalu sulit ya, terus bagaimana kalau widget yang di sticky 2 atau lebih? wah terus terang belom saya coba so ditunggu aja informasi tips mendatang ya, semoga artikel ini bermanfaat bye-bye.

Template Mas Sugeng