Memasang Fungsi Sticky Pada Widget Blogger

6/18/2015
Memasang Fungsi Sticky Pada Widget Blogger

Memasang Fungsi Sticky Pada Widget Blogger - Sebelum membahas tentang tips kali ini, Saya selaku admin Arlina Design mengucapan selamat menjalankan ibadah puasa bagi umat muslim yang menjalankannya, dan semoga ibadah kita diterima oleh Allah SWT.

Ok, pada kesempatan kali ini Saya akan berbagi tips tentang cara memasang fungsi sticky pada widget blogger, fungsi dari sticky pada widget ini berguna bagi sobat yang menginginkan sebuah widget pada blog agar bisa melayang mengikuti halaman saat digulirkan ke bawah dan akan kembali ke posisi semula saat halaman digulirkan ke atas.

Kita langsung saja ke cara penerapannya :


CARA 1

1. Buka Blogger > Klik Template > Edit HTML > Salin dan terapkan kode di bawah ini tepat sebelum </body>

Sebagai contoh widget yang akan dibuat sticky adalah widget dengan ID #HTML1

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("HTML1");
//]]>
</script>

Tentukan ID widget pada kode yang ditandai.

Baca juga : Beberapa Fungsi Tag Kondisional Pada Widget

2. Selanjutnya simpan kode di bawah ini sebelum ]]></b:skin> atau </style>

.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#HTML1 .widget-content {padding:0;margin:auto;}

Silakan atur kode di atas sesuai selera.

3. Simpan template dan lihat hasilnya.


CARA 2

1. Atau bisa juga menggunakan kode ini, sebagai contoh widget yang akan dibuat sticky adalah widget dengan ID #sidecontent

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
$(function() {
  var top = $('#sidecontent').offset().top - parseFloat($('#sidecontent').css('marginTop').replace(/auto/, 0));
  var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

  var maxY = footTop - $('#sidecontent').outerHeight();

  $(window).scroll(function(evt) {
    var y = $(this).scrollTop();
    if (y > top) {
      if (y < maxY) {
        $('#sidecontent').addClass('fixed').removeAttr('style');
      } else {
        $('#sidecontent').removeClass('fixed').css({
          position: 'absolute',
          top: (maxY - top) + 'px'
        });
      }
    } else {
      $('#sidecontent').removeClass('fixed');
    }
  });
});
//]]>
</script>

Tentukan ID widget pada kode yang ditandai.

2. Simpan kode di bawah ini sebelum ]]></b:skin> atau </style>

#sidecontent {
  width: 255px;
  height: 200px;
  margin: auto;
  background: #fc4f3f;
  position: absolute;
}
#sidecontent.fixed {
  position: fixed;
  top: 20px;
}

Tambahkan atribut position: absolute; pada widget dan atur posisi widget saat halaman digulirkan top: 20px;

3. Simpan template dan lihat hasilnya.

Pada widget


Pada menu horizontal


Pada widget dan menu horizontal


Untuk menonaktifkan fungsi sticky pada media query tertentu

#sidecontent@media only screen and (max-width:640px){
.makesticking{position:relative!important;z-index:initial}}

Penggunaan sticky ini bisa sobat pasang di widget atau konten apa saja sesuai kebutuhan.


Tambahan :

Penerapan fungsi sticky pada menu horizontal hanya dengan CSS

4. Tentukan class atau ID pada kode di bawah ini sesuai template yang sobat pakai

.arlinatop-wrapper{width:100%;max-width:970px;background:rgba(255,255,255,.98);z-index:99;position:fixed;overflow:hidden;margin:auto;border-bottom:1px solid #e6e6e6;-webkit-transform:translateZ(0)}


Cukup sekian mengenai cara Memasang Fungsi Sticky Pada Widget Blogger, selamat mencoba.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

16 comments

I want the advertising of which is smearing adsese

Balas

Saya mencoba memakai sticky widget dengan memakai CSS saja seperti cara terakhir yang mbak kasih , tapi malah menu pas kita scrol langsung kebawah tanpa menegani top browser kita . Ada yang harus saya tambahkan mbak ?

Balas

You need to log in to your adsense account

Balas

Atur kembali margin menu atau pindahkan markup menu di atas konten wrapper (bukan di dalam)

Balas

template saya udah ada sticky widget nya, nah bagaimana caranya untuk menghapus sticky widget itu mbak?

Balas

Bisa hapus script dan cssnya

Balas

mba, udah aku praktekin nih, nah yang aku sticky kan navigasi utama blog, udah nerhasil dan oke banget sesuai dengan yang saya harapkan x-) x-) thanks banget

tapi pas aku buka pake hape (jadi mobile view) menu utamanya jadi ngga bisa di klik, jadi ngga bisa muncul sub menunya sekarang,

yang salah di bagian mana ya? b-(
mungkin mba bisa ngasih pencerahan

Balas

Nonaktifkan sticky pada versi mobile

Balas

klo cara 2... jQuery nya di copy kan dimana min

Balas

Kak, cara mengnonaktifkan sticky versi mobile kodenya yang mana ya kak?

Balas

Bisa menambahkan kode ini pada media query tertentu, contoh :

@media only screen and (max-width:640px){
.makesticking{position:relative!important;z-index:initial}}

Balas

media only screen ditaruh mana min... sudah saya coba gagal

Balas

Di dalam css, sebelum </style>

Balas
This comment has been removed by the author.

kak supaya Supaya Stick nya masuk kedalam footer saat discroll ke bawah gimana ?

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.