Postingan

Menampilkan postingan dengan label gradasi warna

Cara membuat kode warna gradasi dengan CSS

Gambar
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

TIPS MENDESAIN DARK MODE BLOGGER YANG BAIK

Gambar
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

Cara menambahkan warna tulisan di dalam HTML

Gambar
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> <p>I am normal</p> <p style="color:red;">Saya adalah merah</p> <p style="color:blue;">Saya adalah biru</p></body> </html>  Atau: <html lang="en"> <head> <meta charset="UTF-8"> <title>Kode Warna CSS</title> </head> <body> <p><font color="#FF6347">Warna Teks adalah merah</font></p> </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 b

BAGAIMANA CARA MEMBUAT GRADASI WARNA PADA BLOGGER

Gambar
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>

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

Gambar
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:&#39;trebuchet MS&#39;;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:

TRIK CSS UNTUK MEWARNAI FOOTER ATRIBUSI TEMPLATE CONTEMPO DENGAN GRADASI

Gambar
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; Ko

CARA MEMBERI WARNA GRADASI PADA IKON AWSOME

Gambar
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

Cara membuat gradasi warna pada header blogger

Gambar
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

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 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