Langsung ke konten utama

Postingan

CARA MENGHILANGKAN BLANK SPACE DI SEBELAH KANAN KONTEN TEMPLATE NOTABLE

Tanpa merusak struktur bawaan template, kita dapat merombak bagian tampilan post-body salah satu template terbaru blogger yang bernama Notable dengan mudah. Apaan sih itu maksudnya? maksudnya begini, secara default (bawaan template) ruang konten template notable itu tampak tidak seimbang antara kini dan kanannya jika di buka melalui PC laptop atau layar 10 inchi ke atas. Kalau tidak di rombak pada tampilan laptop atau layar perangkat 10 inchi keatas maka kita akan temukan banyak ruang kosong di bagian kanan layar. Atau lebih populer dengan istilah blank space. Pertanyaannya untuk apa ada Blank space? Banyak mata pengguna menangkapnya sebagai 'mubazir' saja. Tampilan sebelum dan sesudah di 'perbaiki' tampak sebagai berikut:  Memperbaikinya cukup mudah. Masuk ke pengaturan dasbor blogger Pilih Tema Pilih edit HTML Di dalam halaman editor HTML blogger cari kode atau pengaturan CSS berikut (kode asli (bawaan)nya: body.item-view .Blog .post-body-container{ padding-$endSide:

BEDANYA MENULIS CARA COMPOSE VIEW DENGAN CARA HTML VIEW DI BLOGSPOT

Pada umumnya secara normal para blogger menulis atau membuat konten tulisan sembari menyisipkan konten gambar atau video di blogger blogspot melalui mode "compose view". Namun begitu bagi blogger lanjutan, terutama yang menulis konten konten tutorial sesekali harus menulis melalui mode "HTML view" juga.  perlu di ingat penulisan mode HTML view sering dilakukan bagi mereka yang sudah terbiasa dengan kode kode HTML. Penulisan mode HTML view ini tidaklah terlalu penting bagi para blogger dengan niche niche penulisan blog gado, traveling, blog style, dll. Ia biasanya dilakukan oleh blog blog tutorial yang menyajikan konten konten tutorial terkait bahasa bahasa markup, front end di website. Apa perbedaan keduanya? 1. Compose View Secara bawaan (default) ketika membuka dasbor dan membuat postingan dengan mengklik tombol paling atas yang bernama "New Post" atau "Postingan baru". Melalui cara inilah seorang penulis di blog menggunakan tool yang ada untuk

CARA MINIFY KODE CSS YANG BENAR DI DALAM TEMPLATE BLOGGER

Kita dapat menggunakan tool online untuk keperluan meminimalkan ukuran CSS di dalam template, salah satunya yang terbaik adalah CSS minifier. Gunanya 'meminify' CSS di dalam template blogger adalah agar template menjadi lebih ringan dan loadingnya menjadi lebih cepat. Namun tidak semua kode CSS dapat di minify karena tergantung dimana dia diletakan di dalam template.  Silahkan kunjungi: https://cssminifier.com/ Cara menggunakannya cukup mudah tinggal copy kode CSS yang ingin di minify lalu pastekan ke kolom sebelah kiri (input) dan klik 'minify' maka kolom sebelah kanan (output) akan menampilkan hasil kode CSS yang telah di minify. 1. Apakah semua kode CSS dapat di minify?  Jadi terlebih dahulu akan saya jelaskan duduk perkaranya. Jika kalian mencoba minify kode CSS tertentu, template kalian tetap akan bekerja andaikata sekalipun cara inputnya salah. Akan tetapi awas, tampilan template jadi rusak. Itu dikarenakan CSS membentuk seperti apa HTML akan ditampilkan di halama

Alternatif Navigasi menu murni CSS dengan dropdown

CSS itu ringan, dan karena itu ia tidak melukai kecepatan loading sebuah blog. Salah atu kendala menambahkan menu navigasi adalah ia selalu melibatkan Javascript jika ingin fiturnya terlihat lengkap dan menawan. Atau dengan cara memasang navigasi menu menggunakan bootstrap dengan mengorbankan kecepatan loading akibat harus meng'embed' link eksternal pemanggil material dan elemen elemen library-nya. Tetapi sebenarnya hal tersebut sedikit teratasi melalui trik CSS sederhana dengan cara pemasangan yang juga sangat sederhana, tidak ada javascript, tidak harus melukai performa halaman dengan link eksternal.  CSS bisa membuat segala sesuatu tampil menjadi sangat cantik atau sangat sederhana. Dan pemasangan ke blog sangat sederhana. Masuk pengaturan/dasbor blog Pilih tema Pilih Edit HTML Di dalam halaman editor HTML blogger cari kode </head> dan letakan kode CSS berikut tepat di atasnya:     <style> /* mulai menu dropdown */ .my-menu ul { display: none; position: abso

Cara membuat navigasi sticky untuk blogger

Navigasi sticky ini akan selalu tampil pada bagian atas halaman blog meskipun konten maupun homepage (beranda) halaman di scroll naik turun. Dan satu hal lagi ketika Judul ikut bersembunyi di bagian atas karena halaman di scroll (digulir) ke atas, navigasi menu bertahan pada batas tampilan paling atas. Demo: See the Pen NWbbJjL by Sufyan Yaan ( @sufyan-yaan ) on CodePen . Cara penerapan: Masuk ke pengaturan blogger (dasbor blogspot), masuk ke tataletak dan sembunyikan atau kalau tidak ada opsi sembunyikan hapus saja bagian widget header. seperti ini: Dari komputer Anda: Dari web. Tempelkan URL gambar di bawah. Penempatan Di balik judul dan keterangan Selain judul dan keterangan Tempatkan keterangan setelah gambar Susutkan agar sesuai Gambar akan disusutkan selebar 257 piksel. Simpan   Batal   Hapus Lalu sesudah melakukan langkah di atas masuk kembali ke pengaturan blogger, kali ini pilih menu tema, lalu pilih edit HTML. 1. Tambahkan CSS Nah setelah masuk ke dalam halaman editor

Javascript adalah superman Website

A pa yang dapat di kita buat dengan JavaScript? Salah satunyanya: Seperti CSS JavaScript bisa merubah nilai Atribut HTML Pada contoh berikut kita tunjukkan bagaimana JavaScript merubah nilai Atribut dari sumber suatu image (gambar) Berikut trik Javascript yang dimaksudkan dengan penjelasan di atas: 'nyalakan lampu' dan 'matikan lampu' dengan cara menekan tombol kanan dan kiri. Nyalakan lampu     Matikan Lampu Sumber kodenya: <center>  //hanya untuk re-position// <button onclick="document.getElementById('myImage').src= 'https://1.bp.blogspot.com/-GsTEApA_NUc/Xd5WU8emH4I/AAAAAAAApkQ/6N17ZmTWjG0AuSv3XcwU2Lb0IOc3_Rd-ACEwYBhgL/s1600/bulb-close-up-electricity-energy-577514.jpg'"> Nyalakan lampu </button> <img id="myImage" src= "https://1.bp.blogspot.com/-GsTEApA_NUc/Xd5WU8emH4I/AAAAAAAApkQ/6N17ZmTWjG0AuSv3XcwU2Lb0IOc3_Rd-ACEwYBhgL/s1600/bulb-close-up-electricity-energy-577514.jpg" style="width: 100px;&quo