Postingan

Menampilkan postingan dengan label Tutorial

CARA MEMBUAT BACK TO TOP SMOOTH MURNI CSS TANPA JAVASCRIPT

Gambar
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

CARA EMBED VIDEO YOUTUBE KE HALAMAN POSTINGAN BLOG

Gambar
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

CARA MENGHILANGKAN BLANK SPACE DI SEBELAH KANAN KONTEN TEMPLATE NOTABLE

Gambar
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

BEDANYA MENULIS CARA COMPOSE VIEW DENGAN CARA HTML VIEW DI BLOGSPOT

Gambar
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

Gambar
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

Gambar
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

Gambar
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

Gambar
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

APA ITU JSON?

Gambar
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

Cara membuat double navigasi menu ala editblogtema

Gambar
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

CARA MEMBUAT MENU NAVIGASI BLOGGER STICKY MENGGUNAKAN W3SCHOOL 2

Gambar
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

Cara memperbaiki heading h1 yang tidak terbaca mesin pencari setelah judul blog diganti gambar

Gambar
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

Label

adwords aibo ajax alexa algoritma alternative Am I Responsive amazon ambigu Amerika AMP Andorid Android Android 10 Angular animasi antivirus aplikasi apple ARM Art Of War artikel sabtu asesories audio autodidact avatar avatar penulis awesome awsome back to top backdoor backlink bahasa Bandar Lampung bank btn batam beautiful bedak beginning belajar belajar koding berita bing web master biografi blackberryOS blackhat blank space 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 cerai Cerita cerpen cewek chimpense chipset chrome chrome 76 Cina cinta clickjacking codeigniter codepen coding compose compose view condenser mic 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 duplikat e-commerce earn money edisi minggu edit editblogtema editor HTML ekonomi elektronik 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 flipaclip font font awsome footer footer link Footer navigasi forbes framework 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 gojek 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 hometown hotpink HTM5 html HTML view huawei hukum human Idulfitri Iklan ikon Imlek in memories index indie Indonesia Indonesia darurat corona indosat infinite color infinity war informasi instagram instan article 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 kebun raya kecantikan kecepatan blog mobile kehidupan kemanusiaan kesehatan keyakinan keyboard keyword khusus kiata G+ kinemaster klasik klik kode warna koding komentar komentar blog komputer konsipirasi konten konversi kopi korsel korut kota kota kelahiran kotak navigasi menu blog kotak pencarian kotlin kriminalitas kualitas kucing label lapangan kerja laptop lay out lay out version 3 theme layarlipat layout lazyload lelaki liburan life-style lifehack lingkungan logitech logo love Macbook Macbook Air machine learning MacOS magnifier maintenance makeover makmur manusia margasatwa masa depan masonry matahari matematika medsos mega menu mengganti tempa menu menu navigasi menu pencarian menulis merombak metafisika microfon Microsoft microsoft edge Minggu minify misteri mitos mobile modal modern modifikasi monetisi morality motivasi motivation mouse moz multimedia musik myths narasi nasehat terbaik navbar navigasi navigasi menu blog ngeblog nibbler notable office olahraga Omnibus online online editor operating sistem opini otodidak pagelist pagerank paginator Pandora panduan panduan mobile paradox parameter parasit parse pekerjaan pembatasan pemilu 2019 Pemilu Indonesia 17 April 2019 pemrograman pemula pendidikan pengalaman pengaturan pengornbanan pengusaha Penulis perang perang dagang Cina vs Amerika perang dunia ketiga perangdagang perceraian perihal perkawinan permalink perubahan pexel phablet PHP plagiat plagiator PlagScan play store podcast 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 rekomendasi related posts remaja resolusi responsinator responsive review robot robot.txt s-pen sains samsung sanggahan saran temaplate blogger saran template search secrets security sederhana sejarah seken selegram semrush SEO sepatu sepi share button sharing buttons I.O sidebar sidenav siginifikan silikon simple simpson singapore singularity sitelink sitemap smartphone snippet soho solusi somadmorroco spesial spoiler star wars statistik sticky sidebar sticky widget Strategi SEO streaming Student study study online style submenu subscriber success sudut cerita SVG SVG icon syimbian tab s2 tab s7 tabel tablet tabs2 tabs7plus tagging takdir takhyul talenta tataletak Teen teka teki teknik teknologi TELKOMSEL tema tema kesederhanaan tempat wisata template template premium template premium gratis template SOHO template versi ke-2 terbang terkemuka tes popularitas testimoni testmysite text theme Thucydides tiktok tip tips toggle tokoh tombol berbagi tombol pengalihan tombol reply komentar tops traffik trafic trafik translator travelling tribun tricks Trik triks troubleshooting Tutorial Tutorial Anissa tutorial css 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 wps X-Frame xiomi xml yandex youtber youtube youtuber z-index
Tampilkan selengkapnya