Postingan

Menampilkan postingan dengan label blogger

Cara membuat Sidenav menu blogger murni CSS beranimasi

Gambar
Ini trik yang cantik! membuat halaman blog menjadi minimalis namun eyecatching, dan terasa intuitif karena ia akan menjadi tampak lebih 'hidup' dengan efek animasi. Karena tidak melibatkan javascript menu ini juga ringan, simpel dan baiklah kita dapat menyimpulkannya: Minimalis Beranimasi Murni CSS Mudah di terapkan ke dalam template blogger terbaru. DEMO Cara memasang: Masuk ke dasbor pengaturan blogger Cari kode Tema Pilih edit HTML 1. CSS Tentu saja kode CSSnya panjang karena harus membentuk sedikit efek animasi terutama buat menu hamburgernya. Jadi copy seluruh kode CSS berikut di bawah ini. Di halaman editor HTML template blogger cari kode </head> dan letakan kode CSS berikut di atasnya: <style>  .main p { font-size: 24px; text-align: center; margin: 50px;        z-index:999; } #container {   position: relative;   display: block;   width: 100%;   height: 100%;        z-index:999; } .nav-menu-button {   display: block;   position: fixed;   top: 0;   left:

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

Membuat navbar dengan vanilla script

Gambar
Pernah bekerja dengan vanilla script? Di banding dengan Javascript ia lebih muda dan tentunya lebih modern.  Jujur ketika membicarakan interest saya, saya sadar topik seperti ini kurang peminatnya alias kurang popular walaupun di zaman now yakni zamannya ibu ibu kita, tetapi zaman next, yaitu zaman generasi Z ke generasi Alpha di masa depan - dimana para ahli sepakat: TIDAK BISA KODING = BUTA HURUF. Terdengar sadis bagi sebagian orang yang masih hidup di zaman 'mak mak' kita, zamannya membaca text, tetapi hal itu memang menggambarkan seperti apa orientasi teknologi di masa depan. Bagi saya sudah cukup pusing untuk memahami mengapa beberapa situs besar mulai menggunakan VanillaScript dan apa bedanya dengan JavaScript, Angular dan Jquerry? Saya sedikit mulai terbiasa dengan JavaScript dan jadi panasaran, pasti kalian juga kalau berada diposisi yang sama dengan saya. Konon Vanilla Script mampu melipat-gandakan kecepatan, Oh my Gosh!  Setelah Web Assembly di klaim dan terbukti sang

Perkenalkan Essential redesain, template untuk blog tutorial

Gambar
Essential itu identik dengan contempo, bedanya hanya sedikit dan itupun hanya pada bagian pendeklarasian CSS untuk pengaturan class dan ID yang sama pada bagian HTML-nya. Buktinya apapun yang saya pasang ke Essential bakalan cocok ke template Contempo. Dan akan selalu menghasilkan efek yang identik atau serupa pula.  DEMO Essential lebih sederhana, tidak seperti contempo yang memiliki 5 varian yang hanya dibedakan dari warna latar image, dan tidak seperti contempo essential itu soliter,  ringan, dan tampak anggun dengan kesan introvertnya.  Dan kali ini kami memberikannya sedikit polesan langsung melalui pengaturan halaman editor HTMLnya, menjadikannya tampak elegan dan lebih stylish dengan menu yang lebih tampak  seperti sebuah situs professional.  Menu navigasi full dengan muatan menu yang lebih banyak untuk navigasi pengunjung. Gambar profile penulis di atas setiap postingan yang berguna apabila kelak halaman memiliki banyak konstributor. Halaman konten yang dapat memuat konten tuli

Cara memasang kode syntax highligther ke dalam postingan blogger

Gambar
Kode syntax highlighter di perlukan ketika halaman blog lebih banyak berisikan tutorial yang melibatkan postingan kode kode HTML, CSS, Javascript atau tutorial programming ke dalam  sebuah postingan. Jadi kode kode tersebut akan ditampilkan beda dengan teks biasa pada umumnya.  Kalau kita terbiasa melihat atau bahkan menggunakan suatu halaman editor HMTL online, tempat mengedit kode kode HTML seperti codepen maka kita akan mengerti mengapa itu jadi penting. Akan tetapi tidak sedikit para pengguna memilih menggunakan widget blockquote yang telah di modifikasi untuk menampilkan kode HTML ke dalam postingan karena mudah dan sederhana sekali cara penggunaannya. Contoh menggunakan blockquote yang telah di modifikasi: .highlight { color:white; background:black; line-height: 150%; } Kodenya adalah: @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";blockquote {margin: 20px 0; color: #666; border: 1px solid transparent; padding: 20px; backgro

The chronicle Javascript

Gambar
Javascript mampu membuat halaman blog menjadi jauh lebih keren, tampilan tombol reaktif, navigasi, lazyload. Dll.  Segala hal menjadi cantik dan itu tidak sepenuhnya dapat digantikan oleh trik trik CSS yang ada.  Dan javascript sangatlah powerful jika dipergunakan dengan benar.   Akan tetapi Javascript bisa berpotensi dan berubah menjadi anti SEO kalau kita kita menggunakannya dengan cara yang salah.  Berikut contoh kasus kasusnya: 1. Lazyload Gambar . Pemasangan lazyload pada gambar dapat mempercepat loading halaman, namun segera dengan signifikan mengurangi kemampuan mesin pencari dalam  merambati tag ALT pada gambar. Padahal gambar juga adalah konten yang sangat penting selain konten tulisan pada halaman blog.  Itu sangat nyata sementara pencarian gambar sangat penting bagi SEO halaman blog, dan mesin pencari membaca tag yang kita tulis pada bagian alt dan titel gambar,  lalu mereka mengangkut tag gambar gambar tersebut ke hadapan pembaca.  Melalui pemunculan gambar halaman blog kit

Bisakah blockquote dimodifikasi menjadi kode sintaks highlighter?

Gambar
Pertanyaan itu terlintas di kepala saya pada saat ingin membuat kode sintaks highlighter otomatis di halaman blog. Artinya kita tidak perlu menambahkan kode baru, cukup dengan memodifikasi kode kode CSS blockquote. Namun blockquote pada dasarnya di desain hanya sekedar untuk menampilkan sorotan suatu 'kutipan' atau pernyataan yang umumnya pendek pendek. Sedangkan kode sintaks highlighter di buat untuk menampilkan kode kode HTML yang pada umumnya terdapat pada halaman halaman blog tutorial dan kadang kode kodenya sangat panjang. Menggunakan blockquote sangat sederhana, cukup sorot tulisan yang mau di jadikan kutipan, dan tekan tool dengan tanda di atas menu halaman. Sedangkan jika menggunakan kode sintaks highlighter yang sumber kodenya ada di internet, kita harus memasang CSS, eksternal link dan juga kadang javascript. Terus penulisannya harus melalui opsi 'HTML view' Alangkah baiknya ya jika blockquote bisa di modifikasi menjadi kode sintaks highlighter. Tapi, b

Cara menguji related posts ringan pada browser tampilan sederhana

Gambar
Zaman serba cepat, termasuk blogging dan website, harus cepat jikalau ingin tetap terjangkau oleh pengunjung. Mengapa kecepatan itu penting salah satunya dalah karena ia menjadi salah satu faktor penting yang menjadi sinyal kuat bagi mesin pencari dalam menemukan halaman kita. Nah di dalam Google Webmaster yakni bagian tool web inti atau web core vitals ia menjadi salah satu faktor penentu penting sebagai parameter tolok ukur perfomance halaman blog kita. Untuk mencapainya tidaklah serumit yang kita pikirkan, cukup menjadi sederhana, karena halaman yang sederhana itu ringan dan ringan itu cepat loading. Jikalau dulu kita berlomba lomba pasang widget sekarang bukan zamannya lagi, kalau dulu berlomba lomba merwarnai latar blog, sekarang sudah bukan masanya lagi. Jadilah normal dan sederhana. Cukup. Sederhana itu indah dan abadi. Sedangkan cantik itu pada akhirnya akan jadi jelek karena ia harus mengikuti trend dan selera manusia yang berubah dari waktu ke waktu. Salah satu topik yang kit

Template default Essentials re-desain

Gambar
Template ini essentials, kalau mau lihat aslinya sebelum di desain ulang cobain saja ke dasbor blogger, ia adalah varian ke lima dari varian template template terbaru blogger blogspot. Tempatnya paling bontot yakni sesudah template Notable. Lihat hasilnya: Tampilan homepage template essentials redesain DEMO Di atas adalah tampilan dinamis, sederhana dan kekinian template essentials yang mempertahankan ruang konten dominan dan lega dengan tampilan menu atau tombol pencarian beranimasi pada saat disentuh dengan mouse, namun pada tampilan mobile terpaksa kami sembunyikan karena pada layar seluler saya bingung mau meletakannya dimana. Mungkin nanti setelah saya redesain ulang  menggunakan tombol pencarian kaca pembesar seperti template viomagz baru akan saya tampilkan pada layar mobile. Sedangkan tampilan pada saat menu dibuka adalah 'full menu' dan Anda bisa menambahkan menu menu penting yang ingin di tampilkan pada tampilan layar penuh (disini sebenarnya saya ragu untuk meletakan

Cara membuat full menu professional dengan tombol hamburger untuk blog

Gambar
Navigasi menu selalu penting untuk blog, ia menambah nilai yang signifikan karena dapat meningkatkan trafik, dan membuat pengunjung bertahan lebih lama di halaman web. Dan untuk membuat sebuah menu navigasi atau navbar perlu di pertimbangkan dua hal: Kemudahan. Pengunjung mudah mengerti bagaimana menggunakannya Ke indahan. Secara visual enak dipandang mata Well, well itu semua subjektif, tetapi pada faktanya selalu ada bentuk desain yang disukai oleh lebih banyak pengunjung, bukan? Kali ini saya akan membagikan trik membuat menu navigasi dan saya menerapkannya lagi lagi ke dalam template Essentials. DEMO Cara ini akan menjadi opsi meletakan dan membuat menu tanpa batas dan membuatnya lebih fokus karena tampil penuh pada halaman. Jika ingin menampilkan menu tersebut cukup dengan menekan tombol menu hamburger. Langkah menerapkannya adalah: 1. Memasang ajax Masuk ke pengaturan blogger Pilih tema Pilih Edit HTML Anda di haruskan memasan link ajax supaya fungsi hamburger menu bekerja, dan m

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