situs nonton bioskop online streaming film gratis sub indonesia situs poker online poker88 agen poker terpercaya
  1. bioskop online
  2. poker online
  3. poker88
  4. dewapoker
  5. 18dewa
  6. tunaspoker
  7. bigpoker88
  8. singapoker
  9. domino88
  10. 18dewapoker
  11. idn poker88
  12. big poker88
  13. bandar poker
  14. poker369
  15. slot online
  16. Tunas poker
  17. poker99
  18. Idn Poker
  19. 18Dewa

12/15/2018

Membuat Widget Blog Melayang Dengan 2 Cara

12/15/2018

Membuat Widget Blog Melayang Ketika di Scroll - Materi ini sebetulnya sudah banyak sekali tersebar dan mungkin saya termasuk terlambat dalam menulis artikel ini, tetapi untuk melengkapi konten blog yang belum dilengkapi materi ini dan juga saya menawarkan dua alternatif atau dua cara untuk membuat widget blog melayang ketika di scroll, jadi siapa tau menjadi solusi buat Agan yang sudah muter muter keliling blog mencari cara membuat widget melayang tapi belum berhasil mudah mudahan di sini akan berhasil. Nah langsung aja ke pokok pembahasannya ya..



Manfaat Widget Melayang (Sticky) Di Sidebar Blog

Sebuah widget yang dimodifikasi sehingga melayang (sticky) saat di scroll dalam sebuah blog memang bermanfaat untuk mengisi ruang kosong dalam blog tersebut sehingga blog terlihat berisi, apalagi jika kebetulan blog tersebut memiliki postingan yang cukup panjang. Selain itu Sticky widget atau widget melayang akan memudahakan pengunjung dalam menelusuri konten didalam blog tanpa harus scroll balik ke bagian atas.

Mengetahui Identitas (ID) HTML Widget

Penting untuk diketahui sebelum membuat widget nya menjadi melayang adalah kita harus tau bahwa setiap widget HTML/Javascript yang kita buat, masing masing memiliki ID HTML. Nah ID HTML ini lah yang akan kita gunakan dalam script sehingga membuat widgetnya menjadi melayang. Lalu bagaimana cara mengetahui ID HTML Widget? Simak langkah-langkahnya dibawah ini:
  • Silahkan masuk ke Blogger >> Tatal letak (layout)
  • Cobalah membuka widget HTML/Javascript yang sudah ada dengan cara klik edit
  • Dalam contoh kasus ini saya akan membuka widget Recent post yang sudah ada
  • Buatlah tampilan layarnya menjadi full
  • Di Address bar paling ujung sebelah kanan kita akan melihat tulisan Widget ID seperti contoh gambar dibawah ini

Widget id Recent post saya adalah HTML96, itulah caranya mengetahui widget ID HTML/Javascript. Silahkan ingat widget ID HTML milik agan yang akan dibuat sticky atau melayang.

Membuat Widget Melayang (Sticky) Dengan 2 Cara

Setelah kita tentukan widget mana yang akan dibuat melayang dan kita ketahui ID nya, selanjutnya adalah membuat tampilan widgetnya melayang saat halaman di scroll kebawah sehingga ruang kosong didalam blog menjadi terisi dan blog terlihat padat.

Yang dimaksud dengan 2 cara disini adalah kita akan menggunakan 2 script yang berbeda, silahkan pilih mana yang menurut Agan berhasil

Cara 1

1. Buka dashboard blogger kemudian pilih Tema (Theme) >> Edit HTML
2. Dengan menggunakan Ctrl+F cari kode ]]></b:skin>
3. Simpan kode dibawah ini tepat diatas kode]]></b:skin>

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

4. Kemudian tambahkan script dibawah ini tepat diatas kode </body>

<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("HTML96");
//]]>
</script>


Cara 2

1. Lakukan langkah 1 s.d 3 di Cara 1
2. Copy kode dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML4').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML4').addClass('sticky');
} else {
$('#HTML4').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>

Itulah dua cara untuk membuat widget di sidebar blog menjadi melayang (sticky), oh iya jangan lupa untuk mengganti widget id HTML96 diatas dengan widget id milik Agan masing-masing. Semoga berhasil dan terimakasih.