Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

14
Tgl. 17 Agustus 2013

Cara Membuat Dan Menjadikan Widget Melayang Di Sidebar Ketika Dilakukan Scroll Pada Laman Blog

Beberapa waktu lalu, dalam artikel yang mengulas tentang dampak yang diakibatkan setelah mengganti template yang digunakan pada sebuah blog...

Contoh Widget Yang Tidak Berpindah Tempat Ketika Laman Blog Digulung Atau Discroll

Beberapa waktu lalu, dalam artikel yang mengulas tentang dampak yang diakibatkan setelah mengganti template yang digunakan pada sebuah blog ada yang bertanya lebih kurang demikian, “Gan cara bikin flash banner punya agan yang nyangkut ketika ke bawah itu gimana carannya gan?”. Pertanyaan tersebut, tidak lain dan tidak bukan sebenarnya adalah ditujukan untuk menanyakan tentang bagaimana cara yang digunakan untuk menjadikan widget yang terdapat pada sidebar berada pada posisi yang tetap (fixed) ketika diakukan scroll ke atas maupun ke bawah pada laman blog. Dalam hal ini widget yang dimaksud adalah seperti yang ditunjukkan dengan tanda anak panah pada gambar di atas.

Widget yang berada pada posisi tetap dan melayang di sidebar ketika dilakukan scroll seperti ini biasanya disebut pula sebagai sticky. Dimana dalam hal teknik pembuatannya sendiri sebenarnya telah banyak artikel yang memberikan uraian serta ulasan tentang hal tersebut. Akan tetapi untuk menjawab pertanyaan di atas, maka di sini saya akan memberikan uraian atas pertanyaan tersebut sesuai dengan gaya bahasa dan tulisan saya agar nantinya artikel ini tidak dianggap sebagai duplikasi konten atas artikel yang lainnya.

Baiklah, sekarang kita langsung pada pokok bahasan yang utama yaitu tentang cara membuat dan menjadikan widget melayang di sidebar ketika dilakukan scroll pada laman blog, yang mana langkah-langkah pembuatannya adalah sebagai berikut:

 

Pertama, buka editor template dan kemudian sisipkan script berikut ini di atas </body>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function() {
function isScrolledTo(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemTop &lt;= docViewTop));
}
var catcher = $(&#39;#catcher&#39;);
var sticky = $(&#39;#sticky&#39;);
$(window).scroll(function() {
if(isScrolledTo(sticky)) {
sticky.css(&#39;position&#39;,&#39;fixed&#39;);
sticky.css(&#39;top&#39;,&#39;37px&#39;);
}
var stopHeight = catcher.offset().top + catcher.height();
if ( stopHeight &gt; sticky.offset().top) {
sticky.css(&#39;position&#39;,&#39;relative&#39;);
sticky.css(&#39;top&#39;,&#39;auto&#39;);
}
});
});
</script>

 

Kedua, tambahkan ID catcher dan sticky untuk rangkaian kode widget yang terdapat pada sidebar. Dalam hal ini catcher digunakan untuk menandai widget yang ikut berpindah ketika dilakukan scroll dan sticky digunakan untuk menandai widget yang nantinya berada pada posisi tetap ketika dilakukan scroll pada laman. Dimana untuk mempermudah pemahaman dan pengerjaannya, maka perhatikan contoh penempatan kedua ID tersebut dalam rangkaian kode widget yang terdapat pada sidebar di bawah ini.

<aside>

<div id='catcher'>
<b:section class='sidebar' id='sidebar-1' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Artikel Populer' type='PopularPosts'>...</b:widget>
<b:widget id='PlusBadge1' locked='false' title='Google+ Badge' type='PlusBadge'>...</b:widget>
<b:widget id='HTML4' locked='false' mobile='yes' title='Postingan Acak' type='HTML'>...</b:widget>
<b:widget id='FollowByEmail1' locked='false' title='Ikuti Lewat Email' type='FollowByEmail'>...</b:widget>
</b:section>
</div>

<div id='sticky'>
<b:section class='sidebar' id='sidebar-2' showaddelement='yes'>
<b:widget id='PlusOne1' locked='false' title='+1 Button' type='PlusOne'>...</b:widget>
<b:widget id='HTML7' locked='false' mobile='yes' title='' type='HTML'>...</b:widget>
</b:section>
</div>

<div style='clear: both'/>
</aside>

Berdasarkan contoh penempatan catcher dan sticky pada rangkaian kode di atas maka dapat jabarkan sebagai berikut:

Widget yang terdapat dalam area catcher, dalam hal ini adalah widget Artikel Populer (PopularPosts1), Google + Badge (PlusBadge1), Postingan Acak (HTML4), dan Ikuti Lewat Email (FollowByEmail1), merupakan widget yang nantinya akan ikut berpindah tempat ketika dilakukan scroll pada laman.

Sementara itu widget yang terdapat dalam area sticky, dalam hal ini adalah widget PlusOne1 dan HTML7 merupakan widget yang nantinya akan berada pada posisi yang tetap (fixed) ketika dilakukan scroll pada laman.

 

Ketiga, tambahkan CSS berikut ini dalam area skin.

#catcher, #sticky{height:auto;}
#sticky{width:302px;}

Keterangan:

Jika ukuran lebar sticky (dalam hal ini adalah width:302px;) pada CSS di atas belum sesuai dengan ukuran lebar sidebar blog yang Anda kelola, maka silakan dilakukan perubahan seperlunya sesuai dengan ukuran lebar yang sesuai.

 

Keempat, lakukan pratinjau dan kemudian apabila hasilnya telah sesuai dengan yang diharapkan maka simpanlah template Anda.

 

Nah, tidak sulit bukan? Apabila tertarik untuk mengimplementasikan teknik di atas, maka tidak ada salahnya bila mencoba menerapkannya pada blog yang Anda kelola. Akan tetapi satu hal yang perlu diingat sebelum Anda mengimplementasikannya adalah, bahwasanya teknik tersebut tidaklah berlaku pada template standar (bawaan) Blogger dan hanya berlaku pada custom template saja. Sehingga jika Anda menerapkan teknik tersebut pada template bawaan yang telah disediakan oleh Blogger, maka bisa jadi hasilnya tidaklah sesuai dengan yang semestinya.

Semoga berguna, bermanfaat, dan bila dalam penerapannya terjadi kendala atau kesulitan, maka Anda dapat mengajukan pertanyaan terkait dengan kesulitan serta kendala yang Anda alami tersebut dengan cara mengeposkan komentar dalam artikel ini.

Salam.

Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 14 komentar pada artikel ini ▶
Anonim
17/08/13 05.02 O

mantap gan.. widget kyk gini namanya widget sticky bukan ?? kunbal yah?? Thankss

17/08/13 09.30 O

@sahabatkudhen.comBetul sekali Sob. Widget seperti itu biasanya juga disebut sebagai sticky.

Anonim
17/08/13 14.32 O

Ayah, mau nanya ,
Saya punya 2 section sidebar, yaitu class=sidebar dan class=sidebar1.
Di template sudah saya sebut dua section-widget tersebut.(pada skin/css).

Kenapa ya Yah, kalau saya add-widget dari lay-out, hasilnya selalu berada di section class=sidebar1 terus.

Saya pindahin dengan EDit template, tapi bali lagi, balik lagi.

Saya ingin di sidebar-widget punya 2 section, degan gaya/css yg berbeda Yah. tolongin ya Ayah Mela.Matur-nuwun sanget saderengipun.


Nah selanjutnya, pertanyaan relevan.
Kalau saya bisa punya 2 kelompok(section)sidebar, Haruskah disebut/ditulis semua id widget yang mau diCatcher, selain yang mau saya Sticky.

Kalau pengertian "section" saya salah, mohon penjelasan.

17/08/13 21.06 O

iya gan ini sticky posts
keren,,,

18/08/13 01.12 O

Aduh, saya masih pake template bawaan blogger.

18/08/13 04.46 O

Ajiib. . . . . .ente mang Master, , , blog sekolah ane 75%nya penerapan ilmu ente bang, ,, sisanya eksperiment gonta ganti sdkt2 dan letaknya, , , makasih bang sangat membantu :)

Anonim
18/08/13 08.22 O

wah... ada script baru lagi ni,,
thank's sob. :)

18/08/13 23.55 O

@marlonalamo.comSobat marlonalamo, terkait dengan pertanyaan pertama dalam hal ini adalah tentang add widget yang hasilnya selalu di sidebar1, jujur saja saya sendiri juga belum pernah mengalami kasus yang seperti itu. Sehingga untuk pertanyaan yang ini dengan sangat terpaksa saya sendiri juga belum dapat memberikan uraian jawaban sebagai solusi atas permasalahan tersebut.


Sedangkan untuk pertanyaan yang kedua, dalam hal ini agar widget yang terdapat pada sidebar memiliki gaya yang berbeda, saya rasa dapat ditata melalui ID atau class untuk bagian yang dimaksud. Sebagai contoh misalnya adalah rangkaian kode yang terdapat pada langkah kedua di atas.

Nah, pada rangkaian kode tersebut kan terdapat 2 (dua) buah section yang berbeda. Akan tetapi karena dalam pengaturan CSS-nya memakai class yang sama, maka secara otomatis gaya widget yang dihasilkan pun menjadi sama.

Lantas bagaimana agar gaya widget yang terdapat pada section pertama dan kedua memiliki gaya desain yang berbeda? Gunakan saja class yang berbeda untuk kedua section itu atau gunakan saja ID yang dipakai pada masing-masing section dalam pembuatan CSS-nya sehingga antara section pertama dan kedua dapat kita tata dengan CSS yang bebeda pula.


Kemudian terkait dengan catcher, kalau misalnya terdapat 2 (dua) buah section yang berbeda maka secara otomatis semua widget yang terdapat pada salah satu section yang di-catcher sudah masuk di dalamnya. Hal ini disebabkan karena widget berada di dalam section dan section sendiri berada di dalam catcher.

Beda halnya kalau misalnya terdapat 3 (tiga) buah section atau lebih pada sidebar. Untuk kasus yang seperti ini maka tidak semua section harus berada dalam catcher karena bisa jadi section yang ingin di sticky merupakan section yang berada di bagian tengah.


Lebih kurang demikian dan semoga dapat membantu.
CMIIW

18/08/13 23.58 O

@Bmaster AditamaYoi, betul sekali Sob.

19/08/13 00.06 O

@Feri Yunus MadaoBerdasarkan percobaan yang saya lakukan, untuk template bawaan Blogger memang belum bisa Sob. Akan tetapi saya rasa bukan tidak mungkin bila ada cara lain yang dapat digunakan untuk membuat sticky seperti ini pada template bawaan Blogger.

19/08/13 00.22 O

@Habirau NegaraHwaduh Sob, agak berlebihan rasanya kalau saya disebut sebagai master. Sebab saya sendiri sebenarnya juga masih dalam taraf belajar kok. :)

Akan tetapi bila ternyata yang saya sampaikan dalam tiap artikel dapat diambil guna dan manfaatnya, maka saya turut senang dan gembira akan hal tersebut.

19/08/13 00.25 O

@Ijang CahyanaOke, sama-sama Sob. :)

22/03/14 02.34 O

Keren sob lebih simple dalam penerapannya, sudah saya coba dan berhasil.
Terima kasih sudah berbagi...!

22/03/14 11.09 O

@Adjat SudradjatSama-sama Sob. Saya turut senang dan bersyukur bila dalam penerapannya Sobat tidak mengalami kendala atau kesulitan sama sekali. :)

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog