Postingan

Menampilkan postingan dengan label Tutorial

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

Cara merombak tampilan template blogger varian terbaru, triks tambahan bagian terakhir

Gambar
Ini adalah tutorial bagian ke lima alias penutup trik dasar merombak tampilan sekaligus meningkatkan performa empat varian template blogger terbaru. Empat varian terbaru template blogger (2017-sampai sekarang)  adalah: Contempo Soho Emporio Notable Sedangkan 7 varian template blogger lama  (2008-2017) adalah: Simple  Dinamic Picture window Awesome inc.  Watermark Ethereal Travel Perbedaan: Template versi baru responsif dan mobile friendly - template lama tidak, kecuali jika di desain ulang.  Template terbaru sudah mengusung gaya desain aliran tertentu misal: contempo beraliran indie, soho beraliran fancy,  emporio menganut aliran vegea,  dan notable mengikuti aliran desain bergaya rockpool.  4 varian Template terbaru sudah dilengkapi dengan ikon svg bawaan yang walau terbatas namun cepat tidak menghambat kecepatan loading halaman web. Misalnya menuIcon, shareIcon, closeIcon dll. Sedangkan template lama tidak.  Adapun kita akan membahas hal hal berikut satu persatu: a). IKON SVG BAWAAN

Labels

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

Follow by Email