Langsung ke konten utama

Postingan

MEMBUAT NAVIGASI MENU DI DALAM GAMBAR PADA BLOG

Selamat hari minggu. Dalam kesempatan waktu luang ini saya ingin berbagi trik menjadikan template blog bawaan (default) menjadi sangat terlihat atraktif, orang orang akan menyangka itu adalah template premium. Template yang bisa kalian jadikan sebagai "kelinci percobaan" adalah template bawaan blogger sederhana (simple) yang lama hingga template yang terbaru seperti contempo, emporio dengan sedikit perbedaan cara penerapan. Baca juga: CARA MEMBUAT NAVIGASI MENU BLOGGER YANG RESPONSIF DENGAN MENU DROPDOWN   Penemplatannya pada bagian header (kepala blog) akan mampu menyita perhatian pengunjung pada pandangan pertama mereka berkunjung. Cara penerapan nya: 1. CSS Karena semua template blog dengan platform blogger adalah berbasis HTML, pada halaman editorial HTML blog CSS selalu diletakankan di bawah XML atau sebelum HTML (ini berbeda dengan template Wordpress yang berbasis inti Php) kalian harus masuk ke pengaturan blogger. Pilih theme Lalu akan muncul menu baru blogger c

CARA MEMBUAT NAVIGASI MENU BLOGGER YANG RESPONSIF DENGAN MENU DROPDOWN

M ungkin admin blog ini pernah menjelaskan trik membuat menu navigasi blog responif dengan dropdown, namun saya membaca komentar bahwa beberapa pembaca "gagal" menerapkannya. Percayalah, kode kode, material dan elemen yang saya ajukan disini adalah kode kode dasar HTML, CSS dan JavaScript. Jadi jika di terapkan dengan benar ke dalam template blogger sangat kecil kemungkinan gagal. Karena: HTML ya HTML CSS ya CSS Javascript ya Javascript. dropdown navbar Baca juga: MEMBUAT NAVIGASI MENU DI DALAM GAMBAR PADA BLOG CARA MEMBUAT TOMBOL DROPDOWN MENU TUNGGAL DI BLOGGER  Basis pembuatan template blogger bawaan baik yang layout versi ke 2 maupun yang sudah layout versi ke 3 seperti Contempo, Soho, Emporio dan Notable adalah HTML! Jadi mengapa harus gagal? Coba perhatikan contoh (DEMO) dari menu navigasi yang saya buat di bawah ini, silahkan sentuh atau di klik: Home News Contact Dropdown Link 1 Link 2

CARA MEMBUAT EFEK HOVER DENGAN W3-CSS

CSS memiliki banyak kemampuan efek visual yang sangat menarik. Mempelajari CSS berarti mempelajari teknik desain web yang akan menghasilkan sebuah pekerjaan yang sangat atraktif. Contoh di bawah adalah hasil trik W3-CSS yang saya pelajari dari situs w3school: Silahkan sentuhkan jari agak lama jika menggunakan ponsel atau cursor mouse jika menggunakan laptop ke gambar gambar berikut di bawah untuk melihat efek W3-HOVER. Note: class w3-hover-sepia tidak support browser lama, jadi jika kalian menggunakan browser tua tidak akan terlihat efeknya. w3-hover-opacity - Gambar normal: w3-hover-grayscale (kalau disentuh jadi abu abu): w3-hover-sepia (kalau disentuh jadi warna sepia): w3-hover-opacity w3-hover-grayscale w3-hover-sepia Jika Kalian tertarik menulis tidak melulu melalui penulisan blogger opsi "compose" tetapi menulis melalui opsi "html" kalian bisa mencoba menerapkan kode berikut ke dalam halama

MENGENAL KODE WARNA CSS

HTML CSS color codes Sering di sebut juga dengan kode warna HTML itu terjadi karena orang menafsirkan kode warna tersebut pada saat di terapkan ke dalam HTML.  Padahal sejatinya kode warna CSS dan HTML sama saja hanya berbeda dalam penerapannya dan sebenarnya pewarnaan CSS mengikuti matode matode berikut: Kode Warna Hex  (Hexadecimal) Kode Warna RGB Kode Warna RGBA Kode Warna HSL Kode Warna HSLA  Dll Contoh cara penerapannya: <style> #p1 {background-color:#ff0000;} #p2 {background-color:#00ff00;} #p3 {background-color:#0000ff;} #p4 {background-color:#ffff00;} #p5 {background-color:#ff00ff;} Contoh kode warna dengan hanya menuliskannya dengan sintaks biasa: #p6 {background-color:indigo;}  Dan cara penulisan kode warna RGB: #p7 {background-color:rgb(249, 0, 255);} </style> Kode diatas jika di tuliskan ke dalam blogger dengan opsi HTML (bukan compose) Secara visual akan terlihat sebagai berikut: Warna dengan kode HEX: Red Green Blue

CARA MEMBUAT FORM TESTIMONIAL DI BLOG

testimoni itu bagian dari strategi bisnis Banyak situs bisnis membuat form testimoni untuk meyakinkan pelanggan bahwa situs mereka berharga dan dapat dipercayai sebagai tempat bertransaksi. Persoalannya seberapa menarik form tersebut dibuat, saya selalu menyarankan kesederhaan. Namun pembuatannya tidak jauh jauh dari elemen elemen HTML, contoh berikut dapat kalian terapkan, tinggal memodifikasi link eksternalnya: <style> .container { border: 2px solid #ccc; background-color: #eee; border-radius: 5px; padding: 16px; margin: 16px 0 } .container::after { content: ""; clear: both; display: table; } .container img { float: left; margin-right: 20px; border-radius: 50%; } .container span { font-size: 20px; margin-right: 15px; } @media (max-width: 500px) { .container { text-align: center; } .container img { margin: auto; float: none; display: block; } } </style> </head> <body> <h2>Testimonials</h2> <di

CARA MEMBUAT JAM ANALOG CANTIK DENGAN GRAFIK SVG

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

CARA MEMBUAT INDIKATOR SKILL DI HALAMAN BLOGGER

skill internet Indikator ini dapat diterapkan untuk sekedar mempresentasikan skill personal atau keahlian masing masing anggota dalam suatu organisasi di halaman blog, contoh skill indicator berikut ini: Adelina Sofyan's Skills: HTML 90% CSS 80% JavaScript 99% PHP 60% Indikator di atas dengan gamblang menjelaskan sejumlah keahlian yang dikuasai oleh konstributor sebuah halaman web berikut prosentasi penguasaannya. Kegunaan lain adalah biasanya dengan mempresentasikan skill kita, orang akan lebih mudah memberi penilaian untuk merekrut kita dalam mengerjakan proyek proyek tertentu di internet. Tentu saja itu hanya dasar. Dan penerapanya lagi lagi sebagai penulis kalian harus mahir bukan hanya menggunakan opsi penulisan melalui opsi "compose" namun juga opsi "HTML" dan itu tentu saja mudah di lakukan karena memang telah tersedia di dasbor blogger. Yang kita perlukan hanyalah menerapkan HTML dan CSS ke dalam ops

TRIK MEMBUAT MODAL DENGAN GAMBAR

Membuat  modal dengan gambar tidak berbeda dengan membuat modal "lightbox" pada tutorial saya sebelumnya, ini dapat kita terapkan untuk presentasi pada halaman blog agar gambar lebih atraktif, lebih detail di sesuaikan dengan kebutuhan. Pada contoh di bawah ini, kita menggunakan CSS untuk menciptakan suatu modal (layaknya sebuah kotak dialog) yang tersembunyi secara default. Lalu kita menggunakan JavaScript untuk memicu modal dan menampilkan gambar di dalam modal pada saat ia di klik/pencet. Dan juga kita menggunakan nilai daripada gambar yakini atribut "alt" sebagai text tangkapan (caption) di dalam modal Klik gambar di bawah untuk membuka MODAL, dan setelah itu tutup tanda "X" untuk menutup MODAL × Baca: CARA MEMBUAT MODAL PADA HALAMAN BLOGGER Untuk menerapkannya masuk ke dasbor blogger tempat biasanya menulis konten blog, pada saat menuliskan postingan tetap menggunakan opsi penulisan pada "compose" namun pa

CARA MEMBUAT MODAL PADA HALAMAN BLOGGER

contoh tampilan modal Kalian jangan berfikir saya ini sebagai ahli keuangan ya...modal yang saya maksudkan tidak jauh dari beberapa rumpun kode kode HTML, CSS dan bahkan JavaScript yang di terapkan untuk menghasilkan sebuah "lightbox" dapat dimanfaatkan menarik atau mengalihkan perhatian pembaca terhadap sesuatu "pesan" yang ingin kita sampaikan dengan cara mengajak pembaca mengklik sebuah tombol dan jika mereka mengklik karena ingin tahu, maka pesanpun akan "tersampaikan" Contohnya cobalah klik tombol Modal dibawah ini: Buka Modal × Halo selamat datang di halaman blog editblogtema dan Saya Anissa mengajak kalian membaca halaman ini..halaman tempat kita belajar HTML, CSS, dan JavaScript untuk blogger ...Halaman yang akan bercerita apa adanya perihal koding dasar, teknologi, paradox dan kehidupan di sekitar kita... Cara penerapannya sama dengan tutorial yang saya berikan pada artikel artikel saya yang t

CARA MEMBUAT FORM RESPONSIF MELALUI METODE PENULISAN HTML BLOGGER

form ilustration Terkadang kita harus membuat form isian untuk untuk kebutuhan blogging khusus, misalnya dengan tujuan meminta orang mendaftarkan diri mereka bergabung dengan komunitas bisnis kita. Percayalah kepada saya, kalian membutuhkan sebuah bentuk form untuk itu. Namun tidak mudah membuatnya di halaman blogger karena blogger bukan stylesheet seperti aplikasi perkantoran Microsoft Office Excel. Form yang saya buat ini sangat responsif, namun tombol "submit" belum saya aktifkan karena tujuannya hanya untuk memberikan contoh dan cara membuat suatu form, submit baru berfungsi jika kita telah menambahkan kode PHPnya, itu akan saya jelaskan pada tutorial yang berbeda. Perhatikan bentuk form responsif yang telah saya buat di bawah ini: First Name Last Name Pilih salah satu Kota: Batam Tanjung Pinang Jawa

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

CARA MENULIS POSTINGAN BLOGGER MENGGUNAKAN OPSI COMPOSE DAN HTML

ilustrasi Menulis dan ngoding Lazimnya pada saat kalian ingin menulis artikel, postingan atau konten pada blog kalian harus masuk ke dasbor pengaturan blogger dan memilih "Compose". Sebenarnya kalian juga pasti sudah tahu jika Blogger memiliki dua cara dalam menulis konten, yakni: Cara Compose: Cara HTML: Pada umumnya blogger menulis artikel atau konten-kontennya langsung di opsi "compose" mereka menulis kata kata, kalimat dan memasukan gambar atau video melalui Compose dan setelah semuanya selesai lalu mempublikasikannya. Contoh penulisan biasa "Compose": compose dan HTML3 Kalian akan umumnya sama seperti blogger kebanyakan menulis artikel dan konten melalui cara diatas (gambar compose HTML3)  dengan cara: Menuliskan Judul Menulis konten, menambahkan gambar Menambahkan label Menambahkan keterangan tag Mengedit dan mempublikasikan Artikel, Konten atau Postingan kalian Sedangkan penulisan melalui HTML adalah sebagai berikut:

APA YANG DAPAT KITA LAKUKAN TANPA JAVASCRIPT?

Ilustrasi menu dropdown blogger Javascript identik dengan "action" kadang untuk membuat suatu elemen di dalam template menjadi responsif, kita harus menanamkan script, yakni JavaScript. Template tampak hidup dan indah, tapi...berat! Kebanyakan Template-template HTML modern memiliki ciri ciri: Kompatibel dengan HTML5. Kompatibel dengan CSS3 Lebih banyak CSS Hanya menggunakan sedikit JavaScript Tentu saja penggunaan JavaScript tidak bisa dihindarkan, ia masih berkembang dan tidak menutup kemungkinan akan menjadi sebuah bahasa yang dinamis dan ringan di masa depan, tentu saja jika ia masih hidup sampai nanti. Namun jika kita hanya ingin menggunakan CSS? Inilah yang dapat kita lakukan. 2. Membuat menu dropdown murni CSS.  Perhatikan tombol berikut dan coba sentuh: SENTUH TOMBOL DROPDOWN WARNA MERAH DIBAWAH INI. Dropdown Link 1 Link 2 Link 3 Kemudian perhatikan kode CSS pembuatannya berikut, dibawah ini: <style> .dro

CARA MEMANFAATKAN TOOL CSS DAN HTML DI DALAM TEMPLATE BLOGGER

Murni CSS Kalian sering mendengar bahasa program web dan akrab dengan CSS, HTML dan JavaScript? Jika demikian kalian beruntung karena telah Ngeblog karena Template Blogger itu adalah template berbasis HTML. Template blogger berbeda dengan template Wordpress yang di tulis berbasis PHP namun walaupun demikian template Wordpress juga dibentuk oleh HTML, JavaScript dan CSS. Bukan hanya sekedar menulis postingan tapi memahami bagaimana sebuah platform blogger berjalan secara teknis terutama template nya adalah sangat menarik dan berguna. Ada tiga hal yang akan kita kupas perihal templat blogger yakni: Tool CSS, Tool HTML dan opsi Edit HTML. Gunakan Tool CSS di  Blogger Theme Designer Tidak banyak yang memanfaatkan CSS dan meletakannya dengan benar di dalam template blogger, biasanya kita akan langsung masuk ke halaman editor HTML dan mencari kode ]]></b:skin>  atau </style> dan meletakan kode CSS diatasnya. Contoh: Masuk ke pengaturan blogger Pilih Tema Pada p

Cara membuat tabel perbandingan di halaman blog

ilustrasi tabel perbandingan Pada tutorial sebelumnya saya memposting "cara membuat tabel yang benar pada postingan blog" sebenarnya kalian tidak akan pernah kesulitan membuat tabel apapun jika digunakan untuk kehidupan sehari hari dan bukan untuk blog atau halaman website. Tinggal buka MS office, atau jenis Open Office lainnya menggunakan stylesheet, exel atau apaun namanya seperti layaknya yang bapak bapak kita lakukan pada saat mereka bekerja di kantor. Tapi hal tersebut tidak akan mudah dilakukan pada halaman blog, kecuali jika kalian mau mengambil risiko meng-copy-pastekannya dari situs lain dengan risiko kerusakan format halaman blog. Pada halaman blog saat ingin membuat atau mempresentasikan sesuatu dengan table data kalian harus membuatnya melalui opsi HTML: Ketika kalian masuk ke dasbor blogger untuk membuat postingan baru, disana kan ada dua pilihan "compose" dan HTML seperti gambar berikut: compose dan HTML pada dasbor blogger gambar diat

BAGAIMANA MEMBUAT TABEL YANG BENAR DI DALAM KONTEN BLOGGER?

tabel untuk konten blog Ketika kalian masuk ke dasbor blogger untuk membuat postingan baru, disana kan ada dua pilihan "compose" dan HTML seperti gambar berikut: compose dan HTML pada dasbor blogger Pada gambar diatas jika seandainya kita membuat postingan normal cukup pilih 'compose' saja sedangkan jika membuat konten atau postingan khusus mau tidak mau kita harus memilih opsi HTML. Pada tutorial kali ini kalian harus menggunakan kedua opsi itu sekaligus karena konten atau postingan sedang membutuhkannya yakni misalnya jika suatu postingan harus menyertakan tabel, dan beberapa fitur yang tidak terdapat pada tool blogger di dasbor mau tidak mau kita harus membuatnya sendiri melalui editor HTML. Contohnya tabel berikut di bawah ini: Pelanggan saya Nama Negara Alfreds Futterkiste Germany Berglunds snabbkop Sweden Island Trading UK Koniglich Essen Germany Laughing Bacch