EDITBLOGTEMA

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

Jika kita memiliki channel youtube dan halaman blog sekaligus  dan memiliki topik yang sama. Tentunya kita ingin agar video youtube kita dapat ditampilkan dengan baik, rapi dan apik ke halaman blog kita, bukan? Dan tentunya video tersebut dapat melengkapi postingan blog, misalnya blog tutorial. Pengunjung akan lebih dimanjakan dengan kemudahan penjabaran melalui tulisan sekaligus demo melalui tutorial dalam bentuk visual gambar bergerak di video Youtube. Dan agar halaman blog seolah lebih terintegrasi dengan halaman Youtube, meng'embed' video akan membuat tampilannya terlihat lebih baik. akan kami jelaskan. Apa beda menyisipkan (insert) dengan 'embed' video youtube? Berikut ini perbedaan cara Sisip video versus embed video secara teknisnya. 1. Insert (sisipkan) Video Menyisipkan video dari Youtube sangatlah mudah, cukup melalui dasbor dapat langsung dilakukan pada saat penulisan postingan melalui laptop, tablet, ipad atau hape dan pada saat sekarang dapat dilakukan lang

Gambar template default Notable blogspot - source: Google 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 yang menggunakan template notable Pilih Tema Pilih edit HTML Di dalam halaman editor HTML blogger cari kode atau pengaturan CSS b

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

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

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

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

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

sumber gambar: jsonview.com J ika Anda tertarik mempelajari Javascript pada akhirnya sulit mengabaikan JSON karena JSON itu sendiri adalah Javascript dalam bentuk dan fungsi yang berbeda. Namun sebagai blogger dan tertarik pada dunia pengatahuan HTML mau tidak mau Anda harusnya paling sedikit memahaminya. JSON adalah singkatan dari: JavaScript Object Notion  Ia adalah sintaks untuk menyimpan dan bertukar data Bentuknya adalah teks namun di tulis dengan notasi objek JavaScript Mengapa menggunakan JSON? Karena format JSON hanya teks, maka dengan mudah dapat dikirim dari dan ke server, dan digunakan sebagai format data oleh bahasa pemrograman apa pun. JavaScript memiliki fungsi bawaan untuk mengonversi string, yang ditulis dalam format JSON, menjadi objek JavaScript asli: JSON.parse() Jadi, jika Anda menerima data dari server, dalam format JSON, Anda dapat menggunakannya seperti objek JavaScript lainnya. JSON memiliki 4 kegunaan: 1 . Bertukar Data Saat bertukar data antara browser dan ser

Menurut saya ini adalah menu navigasi blog yang terbaik yang dapat di terapkan ke halaman blogspot, templatenya jadi ada rasa Wordpress dan teknik pembuatannya terbilang mudah dan mendasar sekali. Khasiatnya juga telah kami buktikan. Halaman Blog terasa menjadi lebih optimal. Mudah diterapkan ke template template bawaan Blogger dari versi lama hingga template varian terbaru blogspot. Tampilan menu navigasi ala editblogtema Itu juga alasannya mengapa kami menggunakannya sekarang. Kami telah berkali kali merobah tampilan antarmuka halaman blog, dengan tujuan mengoptimalkan halaman ini di halaman website, akhirnya kami menemukan sebuah cara - atau lebih tepatnya trik yang dapat di terapkan dengan mudah ke setiap model template bawaan blogger - blogspot. Yakni menu navigasi yang sedang kami pergunakan sekarang ini. Baiklah saya akan mencobakannya ke template contempo yang sebelumnya: Saya buang headernya Saya buang tombol pencarian bawaanya. Jangan kuatir, Keduanya dapat dilakukan melalui

Blogging sambil belajar koding otodidak. Halo teman teman blogger, khususnya pemula yang pingin sekali blogging sambil belajar koding. Wow belajar koding gratis dan bisa praktik langsung melalui blogging. Pada kesempatan ini saya tetap mengangkat situs w3scool sebagai latarnya. Mengapa? Karena w3school adalah laman tutorial pertama yang membuat saya jadi 'melek koding' sejak dini. Dan terutama karena situs ini sangat cocok diterapkan ke dalam template template berbasis HTML. Mengapa ia cocok banget sama template blogger? Alasanya begini teman teman: Melalui laman ini saya rasa kita dapat belajar CSS dari dasar Melalui laman ini kita dapat belajar HTML dari dasar Melalui laman ini kita dapat belajar Javascript dari dasar Bahkan belajar PHP (hypertext) Dan bukan hanya itu, bukan hanya web programming, melaluinya kita dapat belajar C, C#, C+, Python, Java, Bootstrap dll. Yang sering online dan minat teknologi web maupun aplikasi sudah pasti tahu.  BACA: Studi online gratis w3schoo

Kami mencoba berbagai trik mudah bagaimana caranya menentukan sebuah deklarasi h1 agar terbaca dengan mudah dan jelas pada saat di telusur oleh mesin pencari, walaupun tanpa h1 pun tidak akan melukai halaman sebuah web, namun menurut John Mueller, webmaster ahli Google H1 dapat memberikan sebuah sinyal yang kuat kepada sistem pencarian di internet oleh mesin pencari. H1 tidak akan terbaca ketika halaman blog kalian robah menjadi image atau gambar, penyebabnya masih dikarenakan mesin penelusur tidak dapat membaca dan mengenali image atau gambar, mereka hanya membaca text. Mungkin di butuhkan beberapa tahun ke depan sampai machine learning mengajarkan mereka dan mereka dapat belajar lebih mudah karena peningkatan kecerdasan buatan. Banyak trik cukup membingungkan terutama pada saat bagaimana sebagai pemula saya pernah menerapkannya dan gagal. Akhirnya saya mencobakan trik kami sendiri (trik editblogtema).  Masuk ke pengaturan baru dasbor blogger: Pilih tema Klik titik tiga bersusun di ka