Posts

Showing posts from July, 2021

Inilah dia template contempo redesain dengan tampilan sidebar di kanan halamannya

Image
halo gen Z! Untuk blog personal jujur saja Aku tidak terlalu menyukai tampilan sidebar. Halaman blog dengan tampilan postingan lega sepertinya lebih bagus untuk kebutuhan blogging minimalis, cepat loading dan maksimal. Sedangkan untuk menampilkan iklan dapat di atur melalui lapak lapak yang tersedia baik kanan, kiri, atas dan bawah halaman. Bahkan tentu saja dapat di letakan dengan mudah di tengah tengah postingan. Yang penting tidak mengganggu pembaca. Jika target kita adalah manusia. Maafkan jika aku membahasnya sedikit saja ya... Akan tetapi hal itu tentunya subjektif. Tergantung selera masing masing orang juga. Karena sebenarnya halaman dengan sidebar itu adalah desain klasik semasa internet belum di akses melalui perangkat mobile. Lalu bisakah template dengan sidebar dilipat atau disembunyikan di tampilkan pada ukuran layar tertentu menggunakan @media query? Apalagi jika sidebarnya di pindahkah dan ditampilkan ke kanan. Contohnya template contempo dan Essential? Tentu saja bisa....

Sekilas mengenal desain web responsif versus desain web adaptif

Image
Halo Zen Z! Dulu sebelum zamannya perangkat mobile, konon para websider sangatlah umum menggunakan satu jenis desain web saja: Model desktop atau model laptop. Desain model itu pada zamannya tentu saja bukan masalah. Soalnya orang orang masih bekerja menggunakan layar lebar, mulai dari PC desktop hingga laptop, semua serba besar, berat dan tebal. Orang masih belum memegang smartphone dan tablet. Ia baru lahir belakangan. Seperti kata pepatah bahwa tidak ada yang abadi di dunia fana ini, semuanya akan berubah. Hal hal baru akan datang mempengaruhi atau menggantikan hal hal lama, apalagi jika hal tersebut terkait dengan kemajuan teknologi, dan desain website memang tidak bisa tidak pasti akan di pengaruhi oleh kemajuan teknologi. Perangkat mobile muncul, layarnya kecil, tapi perangkat tersebut perlahan lahan memiliki kemampuan komputer, dan mau tidak mau ia mula terlibat dengan dunia web. Ketika tidak semua orang memiliki sebuah PC desktop dan laptop dengan berbagai alasan teknis dan ala...

CARA MENGHAPUS DESKRIPSI DI BAWAH JUDUL BLOG TEMPLATE CONTEMPO

Image
Sebenarnya berlaku untuk hampir semua template. Sejauh ini ada dua cara yang dapat kita lakukan untuk itu.  1. Melalui pengaturan dasbor blogger biasa: Masuk ke dasbor blogger Pilih layout atau tataletak Klik widget header pada ikon pensilnya Kosongkan bagian deskripsi di bawah judul blog atau hapus yang telah ada Lihat gambar: Cara ini akhir akhir ini ada saja blogger pemula yang kesulitan menemukannya akibat antarmuka pengaturan dasbor blogger telah berubah.  2. Cara kedua sembunyikan parmanent melalui halaman editor HTML Cara ini juga di nilai sulit karena selama ini mecari kata kunci 'description' di dalam timbunan kode kode HTML adalah sulit. Kecuali jika kalian memiliki triknya.  Masuk ke halaman pengaturan blogger Pilih tema Pilih edit HTML Di halaman editor HMTL blog klik kursor mouse lalu tekan CTRL+F pada keyboard laptop (atau tablet jika menggunakan keyboard bluetooth), ketikan ='description' lalu enter beberapa kali sampai ketemu kode berikut: <p> ...

CARA EMBED VIDEO YOUTUBE SUPAYA UKURANNYA FIT KE HALAMAN POSTINGAN BLOGGER

Image
Halo Zen G,... Perhatikan video aku di atas, ia fit di halaman ini menurutku bukan hanya responsif, tapi juga 'adaptive' melalui pengaturan embed yang akan segera aku jelaskan melalui postingan ini. Seperti yang kalian lihat halaman blog ini adalah halaman full tanpa tampilan sidebar. Tampilan blog personal seperti ini adalah tampilan terbaru jika dibanding dengan tampilan model klasik yang masih menampilkan sidebar di kanan halaman postingannya. Agar video dapat tampil fit alias full dan 'pas' ukuran dan posisinya di halaman postingan blog maka ada beberapa cara yang sering di anjurkan oleh para master atau para pelaku blogger senior. Misalnya menambahkan pengaturan CSS dan menambahkan script Js ke dalam template blog. Tetapi cara tersebut memilki banyak kelemahan terutama ketika struktur dasar template berubah langsung melalui sumber kodenya. Atau melalui update Google terhadap seluruh halaman web yang sedang mereka kelola. Contohnya cara pemasangan Javascript untuk m...

DOWNLOAD ORIGINAL CONTEMPO THE ULTIMATE REDESIGN

Image
Desainnya tetap mengikuti gaya bebas 'INDIE' template contempo si sulung dari varian template yang di kembangkan oleh blogger dengan layout versi ke 3. Template ini masih bergaya header bergelombang dengan animasi, namun cara 'oprek' kode kodenya berbeda. Bedanya template redesain sebelumnya warna svg-nya kami tulis melalui pengaturan CSS nya, sedangkan yang sekarang di tulis langsung ke dalam HTML/XML nya.  Well, itu tidak akan terasa bagi pengguna, hanya sekedar informasi saja. DEMO || DOWNLOAD Ok jika ingin mendownload silahkan di download saja melalui link di bawah gambar. Perlu dicatat contempo ini masih memiliki seluruh struktur bawaannya asli alias original. Hanya saja antar mukanya memang tampak berubah. Header berikut judul masih memakai header bawaan yang kami bungkus dengan kode kode svg wave. Hamburger menu pembuka sidebar bawaan kami ganti dengan Hamburger menu yang lebih gesit dan simpel dengan efek toggle 'buka dan tutup'. Footernya ikutan bergelo...

DOWNLOAD TEMPLATE CONTEMPO UNIK REDESAIN

Image
Ini adalah contempo dengan struktur asli dan terbaik dari tradisinya: CSS style. Ia tetap original ibarat terbuat tanah liat ia kami jadikan dalam bentuk baru samasekali. Namun materialnya sama: Contempo dengan gaya indie atau Essential 'strm'. Lihat warna khasnya yang cokelat tua. DEMO || DOWNLOAD 1. Basis contempo dan Essential. Ia tetap dapat di kustomisasi melalui pengaturan dasbor blogger. Namun untuk headernya kami belum membuat pengelompokan otomatis karena ini baru permulaan. Kalian tetap bisa mengganti Judul, merubah warna dan mengganti jenis fontnya melalui pengaturan dasbor blogger, semuanya tetap tertaut dengan rapi. Kecuali warna bergelombang yang beranimasi itu terpaksa untuk sementara harus dilakukan manual dan itu mudah. Kami meletakan kode pengaturnya di atas kode </head> seperti ini: .header { position:relative; text-align:center; background: linear-gradient(60deg, rgba(0, 0, 255) 0%, rgba(0, 255, 255) 100%); color:white; } Itu adalah kombinasi...

CARA MEMBUAT HAMBURGER MENU YANG BENAR UNTUK TEMPLATE BLOGGER MODERN

Image
Menu klasik (baca desain menu navigasi blog lama) adalah menu yang tampil di header dalam bentuk inline, horisontal hingga dropdown - dan sebagian disembunyikan hanya pada tampilan mobile. Namun oleh karena trend bahasa web yakni CSS yang semakin maju, hingga memungkinkan untuk membuat menu halaman web kemudian di buat minimalis, dan minimalis menjadi SEO. Tanpa javascript! Banyak alasan mengapa halaman web modern tampak lebih minimalis antarmukanya tapi ini bukanlah pendapat seseorang, akan tetapi melihat kepada trend dari evolusi kemunculan halaman halaman webblog personal dengan tampilan minimalis namun dengan fitur yang lengkap. Juga karena makin kesininya CSS ternyata menjadi semakin powerful. Menu template zaman sekarang sangat minimalis kebanyakan hanya menampilkan sebua tombol namun jangan salah, satu tombol berisikan menu yang sangat lengkap! Dan tombol yang paling populer adalah: Menu Hamburger! 1. Apakah menu hamburger itu? Menu hamburger adalah ikon menu tiga garis berlapis...

CARA MEMBUAT BACK TO TOP SMOOTH MURNI CSS TANPA JAVASCRIPT

Image
Javascript dapat membuat back to top bergerak halus pada saat tombol yang biasanya berada di bagian bawah kanan footer blog tersebut - pada saat di sentuh atau di pencet atau di tekan. Tombol juga hanya akan muncul setelah scrolling  pada ketinggian tertentu. Itulah fungsi Javascript. Akan tetapi Javascript juga tidak dapat dihindari selalu memotong kecepatan loading sebuah halaman. Sementara CSS sudah semakin sakti dan bahkan dapat menggantikan beberapa fitur yang biasanya kita buat menggunakan Javascript. Ada trik CSS untuk membuat back to top menjadi tetap smooth meskipun tanpa menggunanakan Javascript sebagai elemennya. Baik mari kita mulai membuatnya: 1. CSS Dengan memanipulasi fitur animasi gerak yang kita kenali sebabai 'transition', kita dapat mengatur kecepatan gerakan tombol Back to top pada saat meng'scroll' halaman menuju ke atas.  Masuk ke dasbor blogger ke pengaturannya. Pilih tema Pilih Edit HTML Setelah berada di halaman editor HTML blogger, cari kode ...

CARA MEMBUAT FOOTER BLOG BERGELOMBANG DAN BERANIMASI

Image
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 { fon...

CARA MEMBUAT HEADER TEMPLATE BLOG VARIAN TERBARU BERGELOMBANG DAN BERANIMASI

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

Sama sekali tidak ribet begini cara memasang breadcrumb valid HTML ke template terbaru blogger

Image
Essential adalah varian tunggal dari salah satu template terbaru blogger  yang strukturnya identik atau mirip dengan contempo, akan tetapi jika di teliti terdapat beberapa perbedaan pada sedikit pengaturan, pendeklarasian dan markupnya. Kita akan membahasnya pada kesempatan berbeda pada kesempatan memposting artikel yang berbeda. Kali ini kita hanya membahas cara memasang breadcrumb ke dalam templatenya. Dan jika ia berhasil pada template essentials, maka ia juga berlaku untuk template contempo. Percayalah, kami telah mengujinya.  DEMO Kita tahu template template default ini di buat berbasis layout versi ke 3 yang sangat baik strukturnya dan di buat seolah untuk di modifikasi oleh penggunanya.  Aku menyukai tampilan halaman untuk memuat konten yang 'full' tanpa sidebar - karena sidebarnya tersembunyi - seperti umumnya template template website modern masa kini. Aku tergoda untuk memasang breadcrumb ke template berbasis layout ke 3 karena membaca artikel dari Bung Frenky, ...

KARTU INTERNET SELULER APA YANG PALING CEPAT DI INDONESIA ATAU DI KOTA KOTA BESARNYA?

Image
Kalian yang punya gadget atau piranti seluler dengan koneksi jaringan internet tentu menginginkan jaringan internet cepat sebagai kelengkapan wajib di zaman sekarang ini. Berdasarkan hasil survey di berbagai kota besar perusahaan jaringan internet ber-flat 'merah' alias milik BUMN yang di kelola oleh negara adalah jaringan terluas yang menjangkau hingga jauh ke pelosok dan daerah pedalaman tanah air.  Tidak dapat juga di pungkiri telkomsel bahkan dapat menjangkau secara global alias internasional. Tentunya kita mengerti mengapa hal itu bisa terjadi, tidak lain dan tidak bukan karena mereka inilah pemilik satelite komunikasi Indonesia yang berada ribuan mil jauhnya di luar angkasa sana. Mereka menguasai modal dan insfrastruktur yang cukup dan tidak usah pusing dengan 'modal pertama'. Akan tetapi di Indonesia kita memiliki 5 pemain utama jaringan penyedia jaringan internet kelima jaringan tersebut adalah: Indosat Smartfren XL Telkomsel 3 Nah dari kelima pemain ini manakah...