Langsung ke konten utama

Postingan

Menampilkan postingan dengan label sticky sidebar

CARA STICKY SIDEBAR BLOG DENGAN ANIMASI KEREN

Sticky alias lengket di terapkan untuk widget sidebar Saya sangat tertarik dengan beberapa teknik membuat sidebar pada blog menjadi "sticky" alias nampak lengket kaya sedikit ada karetnya, lihat saja percobaan yang saya terapkan pada template buatan saya ini. Template ini adalah template sederhana yang telah saya modifikasi penuh menjadi lebih responsive dan mobile friendly. 1.Jika menggunakan CSS Sobat bisa menggunakan CSS untuk membuat widget/gadget (misalnya popular posts)  pada sidebar blog menjadi "diam dan tetap berada ditempat" walau konten utama blog sedang discroll naik dan turun, contohnya: <style>#page-wrap { width: 600px; margin: 15px auto; position: relative; } #sidebar { width: 190px; position: fixed; margin-left: 410px; }</style> Letakan kode diatas </head> Kuncinya adalah pada aba aba pengaturan "fixed". Saya menggunakannya karena selama satu hari trik ini ringan alias tidak memberatkan loading tapi sayang fix

Cara membuat widget sidebar fixed blogger hanya dengan CSS

"Fixed" tentu saja berbeda dengan "Sticky", misalnya popular posts editblogtema sekarang ini menggunakan "Sticky" popular posts lengket di sidebar kanannya yakni pada saat konten atau postingan blog di scroll baik keatas maupun kebawah popular post mengikuti dan lalu berhenti pada batas tertentu. Sedangkan fixed berarti tetap berada di sidebar pada saat postingan atau konten blog di scroll baik keatas maupun kebawah. Tentu saja kedua teknik memiliki baik kekurangan maupun kelebihan masing masing, mari kita lihat: Sticky. Memiliki keuntungan karena popular post atau gadget mengikuti dan bisa berhenti pada titik tertentu. Jumlah gagdet popular post yang ditampilkan juga tidak terbatas mau berapa, seluruhnya bisa ditampilkan dengan cara di scroll. Kelemahan : Mengharuskan pemasangan JavaScript, sedangkan JavaScript cukup merugikan kecepatan loading blog. Tidak setiap template bisa bekerja dengan mudah  melalui hal tersebut. Fixed. Hanya memanfaatkan a

Trik membuat Tombol sidebar navigasi fixed di kiri atas blogger

Setelah membuat warna header menjadi memiliki kemampuan gonta ganti warna secara otomatis menurut ukuran layar, misalnya: Jika dibuka melalui hape warnanya jadi abu abu ketika dibuka melalui tablet dengan posisi potrait warnanya jadi biru Jika dibuka melalui tablet dengan posisi landscap (dimiringkan) maka warna header blognya akan berubah jadi kuning. Dibuka melalui laptop/PC warna header akan menjadi pink Saya menyadari kekurangannya, yakni tidak memiliki menu navigasi. Jangan kuatir kita dapat menyiasatinya dengan cara yang unik! Lagi lagi hanya membutuhkan elemen HTML CSS. Menu navigasi sidebar ini sangat responsive menggunakannya cukup hanya dengan menyentuhnya maka akan muncul sebuah menu dengan gerakan animasi full "opened" dan tentu saja hal ini akan sangat berguna bagi sebuah navigasi menu dengan style beda. Jangan lupa saya sudah menempatkan tombol modifikasi bawaan contempo pada ujung kanan header berwarna. Menu ini juga telah saya buat fixed Ca

CARA MEMBUAT STICKY WIDGET SIDEBAR TEMPLATE CONTEMPO

Sticky sidebar yang dimaksud adalah widget yang berada disamping kanan konten utama pada tampilan laptop sebuah website atau blog. Pada template template premium utama, sticky sidebar selalu disertakan. (Sebenarnya saya kurang menyukainya, kecuali apabila gagdet seperti itu mampu membooster kecepatan). Kita akan menerapkannya pada template contempo yang sudah di modifikasi menjadi ContempoHybrid. Percayalah jika sobat mendapatkan tema contempo yang telah memiliki sidebar kanan sobat dapat menerapkannya juga. Animasi sidebar sticky Template contempo itu dasarnya sama dengan template lain, namun beda dalam banyak hal: Pada template aslinya sidebar  tersembunyi oleh separator, CSS yang melimpah. Kesamaannya tetap bisa ditambahkan dengan kode kode HTML pihak ketiga. Misalnya trik untuk membuat sticky bar pada templaet contempo hybrid adalah sebagai berikut: Masuk ke pengaturan blog: Pilih Tema Pilih dan klik Edit HTML Pada halaman HTML yang telah terbuka cari kode: </body&

Copyright© EDITBLOGTEMA . All rights reserved.