EDITBLOGTEMA

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

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

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

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

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

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

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

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

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

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

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