Postingan

Menampilkan postingan dengan label css

Cara membuat hamburger menu dengan toggle menutup murni CSS

Gambar
hai Zen Z! Model model desain template web tidak dapat ditinggalkan begitu saja. Selama dakade tentunya para desainer telah bekerja keras untuk membuat tampilan dan antarmuka halaman web yang dapat di pergunakan dengan sama baiknya di berbagai ukuran layar perangkat. Sehingga muncul istilah desain responsif dan desain adaptif. Keduanya merujuk pada penggunaan halaman di layar desktop dan mobile. Bisa di pergunakan di layar dengan ukuran besar seperti PC desktop dan laptop, bisa di akses dengan mudah dan nyaman melalui layar tablet dan hape. Baca:  Sekilas mengenal desain web responsif versus desain web adaptif Contoh menu yang responsif adalah ketika ia dibuka pada beberapa layar berbeda: Pada PC desktop, laptop, tablet dan hape mobile. Pada PC layar besar menu tersebut tampak horisontal, sedangkan pada layar kecil seperti hape ia menjadi berbentuk menu hamburger yang dapat di klik untuk memunculkan menu menu.  Sedangkan pada desain adaptif menu akan terlihat sama baik pada saat di buk

Sekilas mengenal desain web responsif versus desain web adaptif

Gambar
Halo Zen Z! Dulu sebelum zamannya perangkat mobile, konon para websider sangatlah umum menggunakan satu jenis desain web saja: Model desktop atau model laptop. Desain model itu pada zamannya tentu saja bukan masalah. Soalnya orang orang masih bekerja menggunakan layar lebar, mulai dari PC desktop hingga laptop, semua serba besar, berat dan tebal. Orang masih belum memegang smartphone dan tablet. Ia baru lahir belakangan. Seperti kata pepatah bahwa tidak ada yang abadi di dunia fana ini, semuanya akan berubah. Hal hal baru akan datang mempengaruhi atau menggantikan hal hal lama, apalagi jika hal tersebut terkait dengan kemajuan teknologi, dan desain website memang tidak bisa tidak pasti akan di pengaruhi oleh kemajuan teknologi. Perangkat mobile muncul, layarnya kecil, tapi perangkat tersebut perlahan lahan memiliki kemampuan komputer, dan mau tidak mau ia mula terlibat dengan dunia web. Ketika tidak semua orang memiliki sebuah PC desktop dan laptop dengan berbagai alasan teknis dan ala

CARA MEMBUAT HAMBURGER MENU YANG BENAR UNTUK TEMPLATE BLOGGER MODERN

Gambar
Menu klasik (baca desain menu navigasi blog lama) adalah menu yang tampil di header dalam bentuk inline, horisontal hingga dropdown - dan sebagian disembunyikan hanya pada tampilan mobile. Namun oleh karena trend bahasa web yakni CSS yang semakin maju, hingga memungkinkan untuk membuat menu halaman web kemudian di buat minimalis, dan minimalis menjadi SEO. Tanpa javascript! Banyak alasan mengapa halaman web modern tampak lebih minimalis antarmukanya tapi ini bukanlah pendapat seseorang, akan tetapi melihat kepada trend dari evolusi kemunculan halaman halaman webblog personal dengan tampilan minimalis namun dengan fitur yang lengkap. Juga karena makin kesininya CSS ternyata menjadi semakin powerful. Menu template zaman sekarang sangat minimalis kebanyakan hanya menampilkan sebua tombol namun jangan salah, satu tombol berisikan menu yang sangat lengkap! Dan tombol yang paling populer adalah: Menu Hamburger! 1. Apakah menu hamburger itu? Menu hamburger adalah ikon menu tiga garis berlapis

CARA MEMBUAT BACK TO TOP SMOOTH MURNI CSS TANPA JAVASCRIPT

Gambar
Javascript dapat membuat back to top bergerak halus pada saat tombol yang biasanya berada di bagian bawah kanan footer blog tersebut - pada saat di sentuh atau di pencet atau di tekan. Tombol juga hanya akan muncul setelah scrolling  pada ketinggian tertentu. Itulah fungsi Javascript. Akan tetapi Javascript juga tidak dapat dihindari selalu memotong kecepatan loading sebuah halaman. Sementara CSS sudah semakin sakti dan bahkan dapat menggantikan beberapa fitur yang biasanya kita buat menggunakan Javascript. Ada trik CSS untuk membuat back to top menjadi tetap smooth meskipun tanpa menggunanakan Javascript sebagai elemennya. Baik mari kita mulai membuatnya: 1. CSS Dengan memanipulasi fitur animasi gerak yang kita kenali sebabai 'transition', kita dapat mengatur kecepatan gerakan tombol Back to top pada saat meng'scroll' halaman menuju ke atas.  Masuk ke dasbor blogger ke pengaturannya. Pilih tema Pilih Edit HTML Setelah berada di halaman editor HTML blogger, cari kode &l

CARA MEMBUAT HEADER BLOG BERGELOMBANG DAN BERANIMASI DENGAN CSS

Gambar
Ternyata CSS cukup sakti dan jika Kalian memiliki sedikit kreatifitas ia akan menjadi alat seni yang indah dan menakjubkan. Dalam kesempatan kali ini saya akan berbagi bagaimana caranya menerapkan header bergelombang sederhana dan beranimasi ke halaman template blog terbaru, baiklah kita mulai. Kita akan melakukan percobaan terhadap template essential karena ia adalah varian kelima dan paling mirip dengan contempo. Artinya bisa diterapkan ke essential berarti bisa juga diterapkan ke template contempo bahkan bisa juga ke soho, emporio dan notable.  Ini hanya percobaan dasar yang saya ambil dari beberapa referensi milik Daniel Österman yang saya modifikasi. Mudah dan hanya dibutuhkan pengaturan CSS. 1. LANGKAH PERTAMA Ok, masuk ke pengaturan blogger blogspot Pilih Tema Pilih Edit HTML Di dalam editor HTML blogger blogspot cari kode </head> dan letakan kode CSS berikut di atasnya:    <style>@import url(//fonts.googleapis.com/css?family=Lato:300:400); body {   margin:0; } h1 {

CARA MEMBUAT FOOTER SEDERHANA YANG ELEGAN UNTUK TEMPLATE BLOGGER VARIAN TERBARU DENGAN CSS

Gambar
Memang sudah masanya meninggalkan template lama. Itu sudah hampir menjadi masa lalu. Ya gayanya, ya struktur penulisannya ya versi layoutnya. Pokoknya semuanya memang berasal dari masa lalu. Karena sudah hukum alam yang lama lama menjadi usang, ketinggalan fitur dan model, untuk kemudian perlahan lahan di gantikan oleh yang baru. Contoh template klasik generasi pertama, blogger mana yang mau bunuh diri menggunakannya kembali? Kini seperti kita sudah maklum, Google melalui bloggernya telah menyediakan 5 varian template terbaru versi kedua dengan layout versi 3, yakni: Contempo Soho Emporio Notable Essential Mereka telah mengadopsi gaya kekinian. Mereka masuk syarat sebagai template mobile dan lulus pengujian bagian Web Core vitals di Google Master. Template versi lama, yakni versi kedua dengan layout versi 2: Simple Dynamic View Picture Window Awesome inc Watermark Ethereal Travel Mereka yang tujuh varian utama ini memang sudah jadul, tidak responsif dan tidak mobile friendly. Mereka su

TAHUKAH KAMU BEDANYA MENU NAVIGASI BLOG STICKY DENGAN FIXED DAN DIBUAT MURNI DENGAN CSS?

Gambar
Mengurangi penggunaan javascript adalah keputusan bijaksana di dalam kegiatan di dunia web yang menggunakan template web sebagai komponen  medianya. Dan hanya dengan menggunakan CSS kita dapat membuat efek efek yang sangat hidup untuk halaman web atau blog kita. Terimakasih kepada CSS terutama pada pengaturan dan sintaks elemen: .position:fixed Perbedaan fixed dengan sticky adalah: Fixed navigasi menu atau elemen tetap berada di suatu posisi, atau dalam contoh tetap berada di atas header pada saat elemen body di scroll naik dan turun. Sedangkan sticky adalah: Sticky navigasi menu atau sticky elemen yang mana menu baru berhenti pada posisi yang telah di tentukan pada saat pengguliaran menu ke atas selesai. 1. FIXED MENU Fixed menu berarti navbar atau menu tetap berada diatas pada saat elemen halaman di scroll naik dan turun. Kita melihat contoh bagaimana membentuk elemen fixed dengan pengaturan CSS berikut: . navbar { overflow: hidden; background-color: #333; position : fixed ; /

Cara merombak tampilan awal kolom komentar untuk template terbaru blogspot murni CSS

Gambar
Ingat varian terbaru template blogger terbaru adalah: contempo, emporio, soho, notable dan essential. Setiap varian induk masing masing memiliki 5 anak variasi yang dibedakan dengan warna. Kecuali essential, dia adalah template dasar, tanpa di ikuti oleh varian lain. Ia yatim piatu. Trik merombak tampilan awal antar muka kolom komentar dari keempat template default terbaru adalah, lagi lagi hanya dengan mengandalkan pengaturan CSS. Trik ini murni hanya dengan CSS. Jadi tidak memberatkan loading, namun ia dapat menampilkan efek animasi warna pada saat di sentuh. Kodenya adalah:  <style type='text/css'> . comment-form iframe { background:# ffffff ; no-repeat bottom right; border:7px double # CCCCFF ; padding:5px; font:normal 12pt &quot;ms sans serif&quot;, Arial; color:# 7EB2AC ; width: 100 %; } . comment-form iframe :hover{ background:transparent; border:7px solid # FFCCFF ; };no-repeat bottom right; border:7px solid # FFCCFF ; } .comment-form a{ color:#7EB2AC;<

Belajar CSS bagaimana menentukan ukuran lebar dan tinggi elemen

Gambar
Karena ini jelas keterkaitannya dengan pembuatan, pengeditan dan kustomisasi template blogger, maka saya ingin membuat ruang pelajaran CSS. Terlebih dahulu saya ingin kembali menjelaskan apa itu CSS.  CSS adalah bahasa yang kita gunakan untuk mendesain dokumen HTML. CSS inilah yang membentuk tampilan bagaimana elemen HTML harus akan terlihat di halaman yang di buka oleh pembaca, pengunjung atau pengguna. Jadi jelas HTML tanpa CSS akan tampak sangat membosankan: Tidak ada bentuk lurus, lengkung, bundar. Tidak ada warna merah, kuning, hijau, jingga, indigo hingga pelangi yang berwarna warni. Tanpa CSS semua halaman web yang dimiliki oleh semua orang akan tampak sama, monoton dan ugly. Tidak ada gerakan animasi yang berpendar pendar. Dan tidak seperti HTML, walaupun ia adalah inti dari WEB, HTML bukanlah murni bahasa pemrograman, HTML hanyalah bahasa markup, sedangkan CSS bersama Javascript yang juga sering kita pergunakan di dalam membuat atau mengedit template  adalah bahasa front end,

Cara membuat tombol DEMO dan DOWNLOAD stylish di blogger

Gambar
Tombol ini berguna buat halaman blog yang ingin mendemokan hasil tutorial. Tombol ini juga termasuk sederhana dan walaupun demikian ia tampak cantik atraktif karena ia juga memiliki efek animasi.  Namun hanya di buat dengan material svg dan dengan CSS. Tentu saja tombol ini telah kami modifikasi.  OK, Langsung cara pemasangan: Masuk ke pengaturan blogger Pilih Tema Pilih Edit HTMl Letakan kode CSS berikut di atas kode </head>: <style>#btn-cakep {margin: 10px auto; text-align: center;} #btn-cakep br {display: none;} .btn-cakep1, .btn-cakep2, .btn-cakep3 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background: #fff;border: 2px solid #FF00FF;margin: 10px;transition: .5s} .btn-cakep2 {border: 2px solid #FF00FF;} .btn-cakep3 {border: 2px solid #9900FF;} .btn-cakep1:hover {background-color: #CC00FF;} .btn-cakep2:hover {background-color: #3f51b5;} .btn-cakep3:hover {background-color: #d83500;} .btn-cakep1:hove

CSS vs JS, mana yang menjadi semakin berperan di dunia web blogging

Gambar
Apa itu CSS? Mengapa ia terlihat semakin penting? Karena ketika saya belajar tiga bahasa web ini, yakni HTML/XML, CSS dan Javascript, saya melhat yang paling banyak terlibat dalam urusan desain adalah CSS.  Oh ya perlu di ingatkan lagi, HTML bukan bahasa pemrograman ia hanya bahasa markup untuk membangun sebuah halaman website. Kalau bahas CSS biasanya kita mendapatkan penjelasan begini: CSS adalah singkatan dari 'Cascading Style Sheets' CSS menjelaskan bagaimana elemen HTML akan ditampilkan di layar, kertas, atau di media lain. CSS membentuk HTML bagaimana cantiknya ia seperti yang kita lihat di layar monitor apapun. Dengan CSS kita melihat hitam, putih, merah, jingga dan warna warni tampilan HTML di layar monitor. Dengan CSS kita melihat bulatan, lingkaran, persegi, animasi hingga berbagai jenis tampilan font. CSS menghemat banyak pekerjaan. Itu dapat mengontrol tata letak beberapa halaman web sekaligus Stylesheet eksternal disimpan dalam file CSS Walaupun HTML adalah int

Lanjutan cara membuat sidenav blog murni CSS dengan hamburger menu beranimasi

Gambar
Satu lagi cara memasang menu hamburger untuk blog dengan efek animasi namun murni css. Keren? Ya keren dong. Lagipula responsif, animatif (benar gak istilah ini ya), intuitif dan ringan. Hanya buat alternatif bagi yang menginginkan tampilan blog pada header tampak lebih baik. Klik gambar di bawah 2x untuk melihat DEMOnya. Speks: Murni CSS Ringan Hamburger Animasi Cara memasang:  Masuk ke pengaturan atau dasbor blogger Pilih tema Pilih edit HTML: 1. CSS Di dalam halaman editor HTML cari kode </head> dan letakan kode CSS berikut ke atasnya:    <style>body {   margin: 0;   padding: 0;   background: #333;   color: #fff;   font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, sans-serif;     overflow-x: hidden;  } a {   text-decoration: none;   color: #fff;     transition: color 0.3s ease; } a:hover {   color: tomato; } #menuToggle {   display: block;   position: absolute;   top: 50px;   right: 50px;     z-index: 1;     -webkit-user-select: none;   user-selec

CARA MINIFY KODE CSS YANG BENAR DI DALAM TEMPLATE BLOGGER

Gambar
Kita dapat menggunakan tool online untuk keperluan meminimalkan ukuran CSS di dalam template, salah satunya yang terbaik adalah CSS minifier. Gunanya 'meminify' CSS di dalam template blogger adalah agar template menjadi lebih ringan dan loadingnya menjadi lebih cepat. Namun tidak semua kode CSS dapat di minify karena tergantung dimana dia diletakan di dalam template.  Silahkan kunjungi: https://cssminifier.com/ Cara menggunakannya cukup mudah tinggal copy kode CSS yang ingin di minify lalu pastekan ke kolom sebelah kiri (input) dan klik 'minify' maka kolom sebelah kanan (output) akan menampilkan hasil kode CSS yang telah di minify. 1. Apakah semua kode CSS dapat di minify?  Jadi terlebih dahulu akan saya jelaskan duduk perkaranya. Jika kalian mencoba minify kode CSS tertentu, template kalian tetap akan bekerja andaikata sekalipun cara inputnya salah. Akan tetapi awas, tampilan template jadi rusak. Itu dikarenakan CSS membentuk seperti apa HTML akan ditampilkan di halama

Label

adsense 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 description 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 future 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 IOT 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 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