EDITBLOGTEMA

Trik ini telah kami terapkan ke dalam beberapa template blogger editblogtema dan hanya dengan menggunakan teknik SVG dan CSS. Trik ini sangat mudah jika di terapkan ke dalam template contempo dan template Essential, meskipun ia juga dapat di terapkan ke dalam template template bawaan varian terbaru blogger. 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>body { margin:0; } h1 { font-family: 'Londrina Solid', cursive; fon

Jika sebelumnya aku telah memberikan trik bagaimana membuat header bergelombang dan beranimasi, kali ini tanpa di mintapun akan kuberikan trik membuat footer bergelombang dan beranimasi yang dapat di terapkan terhadap template template terbaru blogger blogspot. Klik DEMO Prinsip kerjanya adalah sama: Memanfaatkan dan memanipulasi kode kode CSS/SVG agar kita dapat membentuk, membungkus, melapis dan memberikan efek warna beranimasi ke bagian bagian elemen template yang ingin kita 'make over' tampilannya. Dan jangan kuatir, sama saja dengan trik membuat header bergelombang dan beranimasi, kita akan menggunakan trik CSS dan SVG, tidak ada Javascript yang dilibatkan. Dan template yang aku pilih tetap saja Essential dan atau Contempo karena keduanya identik. 1. Langkah pertama  Masuk ke pengaturan blogger  Pilih tema Pilih edit HTML Di halaman edditor HTML cari kode </head> dan letakan kode CSS berikut di atasnya: <style>:root { --color: # 4973ff ; } footer { font

Teknik ini sedikit berbeda dengan apa yang di tampilkan pada template editblogtema. Template editblogtema menggunakan pengaturan CSS yang berbeda dan lazimnya di pergunakan untuk memanipulasi pengaturan SVG ke dalam atau menjadi header. Sedangkan triks yang akan saya sampaikan sekarang ini sebenarnya lebih kepada untuk menu navigasi pada bagian header template blog. Contoh tampilan: DEMO Teknik saya ambil dari sumber kode template Wordpress. Tentu saja lebih mudah di terapkan ke dalam template wordpress sebagai bagian dari plugin tema WP, untuk menerapkannya ke templat blogger blogspot saya seperti montir harus membongkar pasang bagian kode CSSnya terlebih dahulu he he he...dan untungnya itu hanya tentang CSS dan kode kode SVG standard saja. Jika tidak mending bikin template WP deh. Mari kita terapkan ke dalam template contempo. 1. Langkah pertama menerapkannya adalah: Masuk ke pengaturan dasbor blogger Pilih tataletak  Temukan widget header REMOVE (buang) itu Lho kok buang widget hea

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 men

notable, salah satu template bawaan blogger terbaru Banyak juga para blogger menggunakan icon icon cantik untuk mempercantik tampilan antar muka blog mereka, terutama pada bagian navigasi menu. Ikon paling populer dan banyak variasinya adalah jika menggnakan ikon ikon dari font awesome.  Namun sayang font awesome mensyaratkan pemasangan link eksternal ke dalam template, hal yang sangat merugikan kecepatan loading blog hingga 20%. Sungguh tidak sepadan membayar harga kecantikan yang tidak banyak manfaatnya dengan mengorbankan kecepatan di era blogging modern ini. Padahal sebuah blog yang lambat akan sangat merugikan karena mesin pencari lebih mengutamakan blog yang cepat ketimbang blog yang cantik.   Ternyata ikon yang dipergunakan oleh blogger secara default adalah proyek Google itu sendiri bentuknya adalah ikon SVG, kalau font awsome memiliki berton ton ikon, blogger secara default paling memiliki ikon hamburger menu yang kita pakai buat menutup dan membuka menu itu lho. Trus ikon p

Jam analog SVG adalah singkatan dari Scalable Vector Graphics . Dan ia mendefinisikan grafik berbasis vektor dalam bentuk format XML, jadi sebenarnya SVG adalah tentang desain web. Atau sesuatu di dunia website terkait desain grafis. Nah dengan SVG kita dapat mendesain suatu bentuk grafis dengan sumber library yang melimpah, dengannya juga kita dapat membuat game game sederhana. Namun sekali ini saya mencoba memberikan gambaran bagaimana cara membuat jam dinding sederhana menggunakan SVG. Lihat Jam dibawah ini bukanlah dibuat dengan gambar biasa melainkan sebundel kode kode SVG: Jika kalian ingin menerapkannya ke dalam bentuk konten, maka kalian harus menuliskan kode grafis SVG berikut melalui opsi penulisan "HTML" bukan Compose: <canvas id="canvas" width="250" height="250" style="background-color:#f0f0f0"> </canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canva