Cara Membuat Sticky Widget (CSS dan HTML) di Blog - Teknolime

Breaking

Home Top Ad

Cara Membuat Sticky Widget (CSS dan HTML) di Blog

Cara membuat Sticky Widget di blog

Cara Membuat Sticky Widget di Blog - CSS memang merupakan salah satu hal penting bagi para Web Designer dan juga Blogger, untuk memperindah tampilan dari Blog/Website mereka masing-masing. Yaps, bisa dibilang CSS itu adalah 'perlengkapan Make Up' untuk para wanita, agar terlihat lebih cantik.

Dan pada kesempatan kali ini, saya ingin membagikan sedikit Tutorial, tentang bagaimana cara membuat Sticky Widget, atau Sticky CSS untuk para Blogger. Sebetulnya bisa dibilang ini memang sebuah Kode CSS yang harusnya diletakkan di atas Kode yang sesuai.

Namun saya akhirnya menemukan cara singkat, untuk bisa membuat Sticky CSS atau Sticky HTML di Blogger, dengan melakukan perombakan, dan menambahkan Kode CSS langsung kedalam Kode HTML, sehingga lebih ringkas dan menyatu dengan Element HTML tersebut.


Cara Membuat Sticky CSS di Blog

Masuk ke Blogger kalian, lalu pilih Menu Tema/Theme, kemudian pilih Edit HTML, dan masukkan kode ini diatas ]]><b:skin> atau </style> (coba salah satu ya)
 
.stickybar{
position: sticky;
top: 0px;
left: 0px;
z-index: 999;
width: 100%;
}

Memanggil perintah Sticky CSS di Blog

Untuk bisa menggunakan atau melihat hasil Implementasi dari Coding diatas, kalian bisa menggunakannya untuk beberapa Widget, termasuk Widget yang memang dari HTML Editor (bukan dari Add Widget). Contohnya Seperti ini :

<div class="stickybar">
<div id="contoh">
.......... isi dari div id contoh ..........
</div>
</div>

Hasil Sticky CSS di Blog



Nah, jika diatas tadi kita sudah bisa membuat Sticky Code dengan menggunakan Kode CSS, sekarang kita akan mencoba membuat nya dengan langsung menggabungkan Code CSS, didalam HTML nya.

Cara Membuat Sticky HTML di Blog

Masuk ke Blogger > Tema / Theme > Edit HTML dan cari dimana kode Sticky HTML ini ingin ditaruh. Hampir sama dengan menggunakan Sticky CSS diatas, namun kita akan menggunakan fitur pencarian dengan menekan tombol CTRL + F dan mencari pada bagian mana ingin kita taruh.

Memanggil perintah Sticky HTML

<div id="stickybar" style="position: sticky;top: 0px;left: 0px;z-index: 999;width: 100%;">
Perhatikan kode diatas, apakah ada perbedaan dengan yang menggunakan CSS? Sebetulnya sama saja. Namun pada metode Sticky HTML, saya menggabungkan semua Element CSS yang ada ke dalam HTML.

Kode : div id="stickybar" bisa kalian ganti sesuai dengan keinginan kalian. Misal : div id="stickymantap". Karena kita tidak harus mengikuti kode div id dari CSS tersebut.

Contoh Sticky HTML



Kedua Metode ini, baik CSS ataupun HTML sebetulnya sama saja. Tidak memiliki perbedaan yang Signifikan. Hanya saja jika menggunakan metode Sticky HTML, kalian hanya perlu memasukkan semua Element dari Sticky CSS, dan menjadi satu tag dengan HTML yang sama.

Kesimpulan

Metode ini memiliki beberapa fungsi yang sama. Hanya saja :
  • Jika menggunakan Sticky CSS : kalian harus menggunakan <div class="contoh"></div>
  • Jika menggunakan Sticky HTML : kalian harus menggunakan <div id="...." style="... isi element dari Sticky CSS;"></div>
    Kalian bisa menggunakan salah satu Metode Sticky ini untuk memperindah tampilan Web/Blog kalian. Bisa untuk Tagline, Navbar, Menu Navigasi, dan lain-lain.

    Akhir Kata

    Penulis mohon maaf apabila ada kesalahan dari segi penulisan atau bahkan penjabaran Tutorial. Semoga kita bisa saling belajar dan menjadi lebih baik lagi. Terima kasih.