Postingan

Menampilkan postingan dengan label css

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

Alternatif Navigasi menu murni CSS dengan dropdown

Gambar
CSS itu ringan, dan karena itu ia tidak melukai kecepatan loading sebuah blog. Salah atu kendala menambahkan menu navigasi adalah ia selalu melibatkan Javascript jika ingin fiturnya terlihat lengkap dan menawan. Atau dengan cara memasang navigasi menu menggunakan bootstrap dengan mengorbankan kecepatan loading akibat harus meng'embed' link eksternal pemanggil material dan elemen elemen library-nya. Tetapi sebenarnya hal tersebut sedikit teratasi melalui trik CSS sederhana dengan cara pemasangan yang juga sangat sederhana, tidak ada javascript, tidak harus melukai performa halaman dengan link eksternal.  CSS bisa membuat segala sesuatu tampil menjadi sangat cantik atau sangat sederhana. Dan pemasangan ke blog sangat sederhana. Masuk pengaturan/dasbor blog Pilih tema Pilih Edit HTML Di dalam halaman editor HTML blogger cari kode </head> dan letakan kode CSS berikut tepat di atasnya:     <style> /* mulai menu dropdown */ .my-menu ul { display: none; position: abso

Cara merubah judul blog menjadi tulisan stroke murni CSS

Gambar
Ada yang mengatakan itu stroke text, ada pula yang mengatakan sebagai font stroke. Boleh juga dikatakan sebagai huruf model atau gaya stroke. Perhatikan Judul blog ini walau tidak terlihat garis pinggirnya, itu bukan image atau gambar, itu adalah text biasa atau jenis umum font yang kemudian dibentuk melalui CSS dan menampilkan huruf yang tulisan yang menyerupai logo dalam bentuk tulisan stroke. Demikian juga dengan huruf dan lingkaran berlatar merah itu, murni di bentuk menggunakan CSS, bukan gambar. Oleh karena ia adalah font maka ia dapat dibaca oleh google bot, tidak seperti sebuah gambar yang memerlukan 'title dan alt-tag' agar di kenali (di identifikasi) oleh mesin pencari dan oleh karena itu judul dalam bentuk tulisan akan tetap menjadikan heading blog terstruktur dengan baik. Nilai heading (mulai dari H1) akan merosot ketika Kalian mengganti judul blog dalam bentuk tulisan menjadi image. Sekali lagi itu terjadi karena sampai saat ini mesin hanya bisa membaca text namun

Bisakah blockquote dimodifikasi menjadi kode sintaks highlighter?

Gambar
Pertanyaan itu terlintas di kepala saya pada saat ingin membuat kode sintaks highlighter otomatis di halaman blog. Artinya kita tidak perlu menambahkan kode baru, cukup dengan memodifikasi kode kode CSS blockquote. Namun blockquote pada dasarnya di desain hanya sekedar untuk menampilkan sorotan suatu 'kutipan' atau pernyataan yang umumnya pendek pendek. Sedangkan kode sintaks highlighter di buat untuk menampilkan kode kode HTML yang pada umumnya terdapat pada halaman halaman blog tutorial dan kadang kode kodenya sangat panjang. Menggunakan blockquote sangat sederhana, cukup sorot tulisan yang mau di jadikan kutipan, dan tekan tool dengan tanda di atas menu halaman. Sedangkan jika menggunakan kode sintaks highlighter yang sumber kodenya ada di internet, kita harus memasang CSS, eksternal link dan juga kadang javascript. Terus penulisannya harus melalui opsi 'HTML view' Alangkah baiknya ya jika blockquote bisa di modifikasi menjadi kode sintaks highlighter. Tapi, b

Bermain animasi objek berguncang dengan CSS

Gambar
Saya suka CSS karena dalam beberapa hal ia dapat menggantikan Javascript jika sang 'JS' tidak di perlu perlukan amat dan CSS selalu menjadi pilhan ringan ketika ia di buat untuk memanipulasi tombol 'react' zonanya wilayah JS. Terlebih lagi CSS dapat menggambar dan bahkan melukiskan banyak hal visual, contohnya dengan CSS kita dapat membuat image bintang, dengan CSS kita dapat membuat sebuah objek seperti gelas, ilustrasi hewan, benar benar murni CSS tanpa perlu insert dan embed URL gambar ke dalam bagian HTML-nya. Namun disini kita akan membahas bagaimana cara membuat efek guncangan pada suatu objek menggunakan CSS? Baik coba sentuh objek di bawah ini dengan cursor mouse atau dengan sentuh dengan lembut menggunakan jari: Objek svg di atas menggunakan 'perintah' atau 'pengaturan' CSS sebagai berikut: svg :hover { animation: shake 0.5s; animation-iteration-count: infinite; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 1

Dasar membuat game HTML sederhana menggunakan Javascript

Gambar
Dulu programmer web membuat game menggunakan flash, namun flash kemudian mati sebelum saya sempat mempelajarinya. Itu zaman sudah lewat hari ini zamannya HTML5. Jadi saya mencoba mengutak atik mata pelajaran dasar HTML dan mulai belajar membuat game. DEMO Pernah kan kalian mendengar game sederhana bernama Flappy Bird? Juga sebelum sempat saya memainkannya, game tersebut sudah tidak populer lagi. Namun karena sempat menjadi sangat terkenal, saya juga berfikir gimana kalau membuat game tersebut menggunakan HTML? Ya hanya bisa melalui HTML dan Saya sendiri tidak tahu bagaimana mengkonversikannya ke platform Android he he he... Ternyata juga bisa. Artinya jika kalian bisa menggunakan HTML untuk buat tombol tombol animasi, berarti sekurang kurangnya kalian juga bisa membuat game menggunakan HTML. Walau harus memahami perintah dan logikanya. Perhatikan Javascript berikut: <body onload="startGame()"> <script> var myGamePiece; var myObstacles = []; var myScore; funct

Triks membuat header blog bergelombang menggunakan CSS dan SVG

Gambar
D an trend desain halaman web dari waktu ke waktu telah berubah, yang paling revolusioner adalah desain responsif peralihan dari dominasi desain web desktop menjadi desain mobile.  Lalu beberapa jenis template kemudian memiliki ciri ciri desain khas, diantaranya dengan latar header bergelombang (wave header design) diantarnya bahkan dengan pola pola yang acak dan chaos, benar gak sih istilah itu? Maklum saya masih harus banyak banyak belajar. 1. Trik CSS Trik CSS adalah yang paling sederhana dan ringan, ya CSS generasi ke 3, namun jika Anda telah menguasai trik SVG, tentu saja itu lebih baik secara estitika. Untuk membuat pengaturan CSS kita hanya perlu mengejas pengaturan nilai nilai (angka) nya agar setiap sisi pembatas tampak rapi. Bagaimana cara membuatnya? Disini saya akan membahasnya secara terpisah, di mulai dari trik rekayasa CSS terlebih dahulu, kemudian di susul dengan trik menggunakan SVG. Kita dapat meyiasati pembuatannya dengan trik CSS ini, menyulam dan mengayamnya

Cara membuat menu blogger responsif dilengkapi dengan tombol dropdown

Gambar
S ebenarnya dengan atau tanpa menu navigasi sebuah halaman blog akan berjalan normal dan baik baik saja. Akan tetapi menu navigasi telah diangap secara signifikan dapat membantu menavigasi pengunjung untuk dengan lebih mudah menemukan dan mengeksplorasi konten konten penting yang ingin kita tonjolkan.  Dan tentu saja sedikit banyaknya akan menambah nilai bagus bagi halaman yang menggunakannya, terutama sebuah halaman blog yang sudah besar, kompleks dan memiliki lebih banyak konten konten berguna.  Salah satu menu navigasi yang dapat Anda buat adalah menu navigasi yang dapat diterapkan ke dalam template blog berikut ini. Kelebihan menu navbar kustom ini: Tampak premium dan minimalis Responsif dan sudah barang tentu mobile friendly Memiliki dropdown sehingga dapat menambahkan daftar menu tanpa baras Sumber Kodenya adalah sebagai berikut: See the Pen poEYWdj by Sufyan Yaan ( @sufyan-yaan ) on CodePen . Cara menerapkannya ke dalam template: 1 . Klik tombol HTML di dalam kolom code

Labels

adwords aibo ajax alexa algoritma alternative Am I Responsive amazon ambigu Amerika AMP Andorid Android Android 10 Angular animasi apple ARM Art Of War artikel sabtu asesories autodidact avatar avatar penulis awesome awsome back to top backdoor backlink bahasa bank btn batam beautiful beginning belajar belajar koding berita bing web master biografi blackberryOS blackhat 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 Cerita cerpen cewek chimpense chipset chrome chrome 76 Cina cinta clickjacking codepen coding compose 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 earn money edisi minggu edit editblogtema editor HTML ekonomi elektronik Elle Darby 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 font font awsome footer footer link Footer navigasi forbes 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 gong xi fa cai 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 hotpink HTM5 html huawei hukum human Idulfitri Iklan ikon Imlek in memories indie Indonesia Indonesia darurat corona indosat infinite color infinity war informasi instagram 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 kecepatan blog mobile kehidupan kemanusiaan kesehatan keyakinan keyboard keyword kiata G+ klasik klik kode warna koding komentar komentar blog komputer konsipirasi konten konversi kopi kota kotak navigasi menu blog kotak pencarian kotlin kriminalitas kualitas kucing label laptop lay out lay out version 3 theme layarlipat layout lazyload lifehack lingkungan logitech logo love Macbook Macbook Air machine learning MacOS magnifier maintenance makmur manusia margasatwa masa depan masonry matahari matematika medsos mega menu mengganti tempa menu menu navigasi menu pencarian menulis merombak metafisika Microsoft microsoft edge Minggu minify misteri mitos mobile modal modern modifikasi monetisi morality motivasi motivation moz myths nasehat terbaik navbar navigasi navigasi menu blog ngeblog nibbler notable office Omnibus online online editor operating sistem opini otodidak pagelist pagerank paginator Pandora panduan panduan mobile paradox parameter parasit parse pembatasan pemilu 2019 Pemilu Indonesia 17 April 2019 pemrograman pemula pendidikan pengalaman pengaturan pengusaha Penulis perang dagang Cina vs Amerika perang dunia ketiga perangdagang perceraian perihal perubahan pexel phablet PHP plagiat plagiator PlagScan play store 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 related posts remaja resolusi responsinator responsive review robot robot.txt sains samsung sanggahan saran temaplate blogger saran template search secrets security sederhana sejarah seken selegram semrush SEO share button sharing buttons I.O sidebar sidenav siginifikan silikon simple simpson singularity sitelink sitemap smartphone snippet soho solusi somadmorroco spesial spoiler star wars sticky sidebar sticky widget Strategi SEO Student study study online style submenu subscriber success sudut cerita SVG SVG icon syimbian tab s2 tabel tablet tabs2 tagging takdir takhyul talenta tataletak Teen teka teki teknik teknologi TELKOMSEL tema tema kesederhanaan template template premium template premium gratis template SOHO template versi ke-2 terkemuka tes popularitas testimoni testmysite text theme Thucydides tip tips toggle tokoh tombol berbagi tombol pengalihan tombol reply komentar tops traffik trafic trafik translator tribun tricks Trik triks troubleshooting Tutorial Tutorial Anissa 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 X-Frame xiomi xml yandex youtube youtuber z-index
Tampilkan selengkapnya

Follow by Email