EDITBLOGTEMA

Postingan

Menampilkan postingan dengan label gradasi warna

Cara membuat kode warna gradasi dengan CSS

Warna gradasi itu menarik dan diterapkan juga pada beberapa template premium buatan pihak ketiga. Yang paling terkenal adalah template template buatan Arlina Dezign, dan viomagz buatan Mas Sugeng dimana versi viomagz sebelumnya memiliki pengaturan gradasi pada navbarnya. Umumnya mereka menerapkan gradasi warna linier melalui pengaturan CSS. Kita tidak sedang membahas mereka, akan tetapi mempelajari atau paling tidak mengetahui teknik pembuatan gradasi warna ini. Apa itu gradasi warna? Yakni adalah transisi beberapa warna berbeda yang halus dari kanan ke kiri atau sebaliknya dan dari atas ke bawah atau sebaliknya. bisa juga melintang. Terdapat dua tipe gradasi warna CSS: Gradasi linier (ke kiri, ke kanan, ke, atas, ke bawah, melintang dan sebaliknya) Gradasi radial (terpusat di tengah) 1. Gradasi Linier Gradasi linier seperti telah kita jelaskan di atas adalah gradasi warna yang mentransisikan warna dari kiri ke kanan atau sebaliknya, dari atas ke bawah atau sebaliknya, melintang segala

Teruskan Baca »

TIPS MENDESAIN DARK MODE BLOGGER YANG BAIK

Ternyata membuat template itu bukan hanya sekedar memiliki pengatahuan dan menguasai kode HTML, itu sisi programingnya. Yang jelas pembuat template juga harus memiliki sisi personal sebagai desainer. Sehingga nantinya template yang kita buat akan terlihat menarik pandangan mata manusia. Sisi desain itu sendiri bagaimana membuat program berjalan menjadikan sebuah tema atau template memiliki User Interface (UI) yang baik dan memiliki sentuhan UX -memberikan atau merobah pengalaman pengguna (UX atau User Experience). Merobah pengalaman pengguna? Betapa menariknya itu dan tidak mudah juga melakukannya. Saya mengalami kesulitan ini justeru pada saat mencoba menerapkan dark mode toggle ke dalam salah satu template yang sedang saya kerjakan. Mengapa misalnya warna font (huruf) kok jadi terlalu terang pada saat pindah ke dark mode? Bukannya menjadikan mata menjadi nyaman malah jadi sakit. Karuan ini akan menjadi sebuah desain yang buruk. Akhirnya dari Google saya mendapatkan pelajaran: 1. Hi

Teruskan Baca »

Cara menambahkan warna tulisan di dalam HTML

HTML color style Menambahkan warna pada HTML adalah bagian dari pelajaran HTML Style karena kita dapat menambahkan kode warna CSS langsung ke dalam HTML tersebut, contoh: <!DOCTYPE html> <html> <body> I am normal Saya adalah merah Saya adalah biru</body> </html> Atau: <html lang="en"> <head> <meta charset="UTF-8"> <title>Kode Warna CSS</title> </head> <body> Warna Teks adalah merah </body> </html> Bagaimanapun, kita tidak perlu menerapkan ini pada saat menulis postingan atau pada saat menulis konten karena di atas halaman compose postingan telah tersedia tool warna yang dapat kita pergunakan untuk mengutip warna warna yang kita inginkan. tool warna pada dasbor compose blogge

Teruskan Baca »

BAGAIMANA CARA MEMBUAT GRADASI WARNA PADA BLOGGER

gradasi warna Warna gradasi yang di visualkan melalui halaman web adalah trik CSS yang mengagumkan. Kode warna itu sendiri adalah model perintah CSS yang membentuk HTML untuk memvisualisasikan dirinya di halaman web. Contohnya adalah bingkai atau batangan berwarna gradasi di kiri dan kanan halaman konten ini (hanya untuk konten ini, konten konten editblogtema yang lain NORMAL). Jika kalian melihat di kiri kanan ada batangan warna pada halaman konten ini, itulah yang saya maksud dengan efek gradasi. Cobalah scroll halaman ini keatas dan kebawah perhatikan bagaimana warna berubah bak pelangi. Khusus hanya pada halaman konten yang saya tulis ini. Namun pada tampilan layar kecil smartphone batangan warna tidak bisa ditampilan. Kalian hanya bisa melihat warna biru di bawah footer blog pada halaman ini. Membuat efek ini ternyata sederhana sekali: Dasar pembuatan efek gradasi CSS pada halaman HTML blogger adalah sebagai berikut: <!DOCTYPE html> <html> <head>

Teruskan Baca »

Cara memasang tombol Toggle "dark mode" khusus ke navigasi template blogger

Trik ini adalah untuk membuat blog menjadi memiliki opsi "Dark Mode". Baiklah mari kita mulai memasangnya: Temukan kode deklarasi pembuatan navigasi menu template sobat terlebih dahulu, misalnya pada template buatan editblogtema kode navigasinya adalah sebagai berikut: <style> #editblogmenu {width:100%;margin:0 auto;height:50px;position: fixed; z-index:99; background:#3366FF;} #editblogmenu ul, #editblogmenu li{margin:0;padding:0;list-style:none;} #editblogmenu ul{height:45px} #editblogmenu li{float:left;display:inline;position:relative;font-family:'trebuchet MS';font-size:16px; ...dst...dst... </style> Perhatikan kode yang saya sorot warna kuning itu akan kita jadikan sebagai penghubung ke tombol pengalih (toggle) yang akan kita buat dan tentu saja setiap template memiliki kode, sintaks dan deklarasi kode kode yang berbeda dalam pembuatan menu navigasinya, sobat tinggal menemukannya saja nanti. Jadi masuk kepengaturan blog:

Teruskan Baca »

TRIK CSS UNTUK MEWARNAI FOOTER ATRIBUSI TEMPLATE CONTEMPO DENGAN GRADASI

Jika sobat ingin membuat template contempo menjadi beda sobat dapat mengetikan pencarian pada kotak pencarian di dalam blog ini. Kali ini saya akan berbagi trik merekayasa CSS agar footer atribusi blog template contempo jadi berwarna solid atau gradasi Walaupun baru dibuat oleh Google 2 tahun lalu dan masih bersatus sebagai template default blogspot terbaru namun tampilan contempo mulai redup ditengah tengah bermunculannya desain desain "unik" tema buatan pihak ketiga. Sebenarnya beberapa trik sudah cukup untuk menyulap contempo menjadi beda, misalnya menampilkan sidebar, membuat menu navigasi, merobah warna background, merobah tampilan footer, dst. MEMBERI WARNA PADA ATRIBUSI FOOTER Masuk kepengaturan (dasbor) blogger Pilih Theme Pilih edit HTML Pada halaman editor HTML cari kode CSS berikut: .widget.Attribution { margin-top: 1em; text-align: center; } Jika sudah ketemu tambahkan dibawahnya kode: height:40px; Background-color: blue; Kode tersebut

Teruskan Baca »

CARA MEMBERI WARNA GRADASI PADA IKON AWSOME

Jika sebelumnya saya sudah membahas perihal cara penggunaaan font awsome terbaru yakni font awsome5 yakni untuk mempercantik font menu navigasi sebuah blog, sekarang saya akan menjelaskan sebuah trik yang juga sangat bermanfaat untuk lebih mempercantik desain sebuah templat blogger yaitu membuat font awsome tersebut menjadi berwarna warni tanpa harus merugikan loading blog. Semua ikon fa fa awsome bisa di perkaya dengan warna dengan menambahkan sedikit trik pada kodenya dengan kode tambahan: gradient-icon baiklah mari kita mulai penjelasannya: MEMPERCANTIK IKON AWSOME DENGAN STYLE WARNA GRADASI Pernah memperhatikan template template yang didesain untuk wordpress blog? Atau pernah melihat karya karya envanto yang sangat "mobile" namun dengan loading cepat tanpa kehilangan keindahannya?. Disinilah peranan dan sentuhan seorang desainer dan seorang programmer sekaligus diperlukan dalam pembuatan sebuah template yang indah, gegas, dan cepat. Bukan hanya template

Teruskan Baca »

Cara membuat gradasi warna pada header blogger

Para desainer tema blogger mempunyai gaya dan style dalam mendesain template blogger. Misalnya Mas Sugeng dengan header menu navigasi gradasi warna, ArlinaDesign dengan gradasi animasi. Beberapa trik dapat kita intip melalui inspect elemen, walau beberapa situs berhasil menyembunyikan inspect elemen beberapa jenis browser, namun trik untuk menampilkan inspect elemen semakin bagus. Melalui itu kita dapat mengetahui bagaimana cara mereka mendesain template mereka. Paling tidak kita dapat meniru beberapa style yang kita inginkan. Atau mendekati gaya gaya itulah. 1. HEADER DENGAN DUA WARNA BERBEDA (Style Pemula) Membuat warna header blog bawaan menjadi dua warna secara sederhana adalah mudah misalnya untuk tema sederhana tinggal masuk ke pengaturan blog pilih TEMA lalu masuk ke "Edit HTML" cari kode dibawah ini: .header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none; } Dengan cara meneka

Teruskan Baca »