Postingan

Menampilkan postingan dengan label sticky sidebar

CARA STICKY SIDEBAR BLOG DENGAN ANIMASI KEREN

Gambar
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

Gambar
"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

Gambar
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

Gambar
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&

Label

adwords aibo ajax alexa algoritma alternative Am I Responsive amazon ambigu Amerika AMP Andorid Android Android 10 Angular animasi antivirus aplikasi apple ARM Art Of War artikel sabtu asesories audio autodidact avatar avatar penulis awesome awsome back to top backdoor backlink bahasa Bandar Lampung bank btn batam beautiful bedak beginning belajar belajar koding berita bing web master biografi blackberryOS blackhat blank space blockquote blog blogcomments blogger bloggerhelp blogging Blogging mobile bloging blogspeed blogspot bluetooth bootstrap border dash breadcrumb browser btn mobile bugs Buku business capital letter cara catatan catatan awal tahun Cek IMEI cerai Cerita cerpen cewek chimpense chipset chrome chrome 76 Cina cinta clickjacking codeigniter codepen coding compose compose view condenser mic contact form contempo contempo base contempo blackmagic contempo hibrida contempo hybrid converter coolest copy-paste copyright covid 19 covid_19 cowok CPC credit footer css CTR cuitan curhat cybercrime Dahlan Iskan dark mode dasbor data default Demo desain diblokir dirtylink disway DOM domain domain authority Donald Trump download download template terbaru dropdown duplikat e-commerce earn money edisi minggu edit editblogtema editor HTML ekonomi elektronik embed emoji emporio emporio hybrid english error essential expires header expires headers facebook fakta fanpage fast loading template fastloading template favicon featured posts feed burner firefox fitur fixed fixed sidebar flipaclip font font awsome footer footer link Footer navigasi forbes framework Free friendship fuchsia full stacks furure g-suite gadget gagdet galeri gambar gambar bergoncang gambar profile penulis gambar responsive game generasi Alpha Generasi Z geng motor genius gerhana girl gmail Gmetrix gojek good news google google chrome Google Domain google drive google font Google honemoon google Plus google search console google webmaster Googlewebmaster gradasi warna grafik gramedia gratis grid style GTmetrix h1 Habibie hack hacker halaman web hamburger menu hanya opini hapus hari bumi harimau heading headings heart secret hewan hoax hobi hometown hotpink HTM5 html HTML view huawei hukum human Idulfitri Iklan ikon Imlek in memories index indie Indonesia Indonesia darurat corona indosat infinite color infinity war informasi instagram instan article intel inteligensia internal link internasional internet internt interntet interntt intert iOS iPad iPadOS iPhone isu IT italia Jaime Ocabo java JavaScript jimdo jin Ping jingling Jokowi jQuery JSitor kaca pembesar kafe kalimantan kalkulus kamera kanonis kartun keamanan keamanan blogger kebijkan kebun raya kecantikan kecepatan blog mobile kehidupan kemanusiaan kesehatan keyakinan keyboard keyword khusus kiata G+ kinemaster klasik klik kode warna koding komentar komentar blog komputer konsipirasi konten konversi kopi korsel korut kota kota kelahiran kotak navigasi menu blog kotak pencarian kotlin kriminalitas kualitas kucing label lapangan kerja laptop lay out lay out version 3 theme layarlipat layout lazyload lelaki liburan life-style lifehack lingkungan logitech logo love Macbook Macbook Air machine learning MacOS magnifier maintenance makeover makmur manusia margasatwa masa depan masonry matahari matematika medsos mega menu mengganti tempa menu menu navigasi menu pencarian menulis merombak metafisika microfon Microsoft microsoft edge Minggu minify misteri mitos mobile modal modern modifikasi monetisi morality motivasi motivation mouse moz multimedia musik myths narasi nasehat terbaik navbar navigasi navigasi menu blog ngeblog nibbler notable office olahraga Omnibus online online editor operating sistem opini otodidak pagelist pagerank paginator Pandora panduan panduan mobile paradox parameter parasit parse pekerjaan pembatasan pemilu 2019 Pemilu Indonesia 17 April 2019 pemrograman pemula pendidikan pengalaman pengaturan pengornbanan pengusaha Penulis perang perang dagang Cina vs Amerika perang dunia ketiga perangdagang perceraian perihal perkawinan permalink perubahan pexel phablet PHP plagiat plagiator PlagScan play store podcast polemik politik ponsel popularitas popularposts portable powered by blogger Powerpoint prediksi premium privasi produk profesi profile programmer programming programming. prosesor pseudo-sains psikologi Python rahasia ramalan ranking faktor rawgit re-desain re-desain tema blogger React Reactions read more recentPosts redesain rekomendasi related posts remaja resolusi responsinator responsive review robot robot.txt s-pen sains samsung sanggahan saran temaplate blogger saran template search secrets security sederhana sejarah seken selegram semrush SEO sepatu sepi share button sharing buttons I.O sidebar sidenav siginifikan silikon simple simpson singapore singularity sitelink sitemap smartphone snippet soho solusi somadmorroco spesial spoiler star wars statistik sticky sidebar sticky widget Strategi SEO streaming Student study study online style submenu subscriber success sudut cerita SVG SVG icon syimbian tab s2 tab s7 tabel tablet tabs2 tabs7plus tagging takdir takhyul talenta tataletak Teen teka teki teknik teknologi TELKOMSEL tema tema kesederhanaan tempat wisata template template premium template premium gratis template SOHO template versi ke-2 terbang terkemuka tes popularitas testimoni testmysite text theme Thucydides tiktok tip tips toggle tokoh tombol berbagi tombol pengalihan tombol reply komentar tops traffik trafic trafik translator travelling tribun tricks Trik triks troubleshooting Tutorial Tutorial Anissa tutorial css tutorialKhusus twitter uang UAS unduh unik update urang utan ustazd Abdul Somad vanilla Script video viomagz viral virus corona vlogging vue w3-css w3school W3Shool wabah warna web web story WebAssembly webdesign WEBP website whatsapp widget wifi ID windows Windows Mobile wisata WIX wordpress wps X-Frame xiomi xml yandex youtber youtube youtuber z-index
Tampilkan selengkapnya