Postingan

Merobah style font Judul template blog versi terbaru menggunakan CSS stroke

Gambar
Jika kalian menggunakan 5 varian terbaru template blogger dan ingin merombak style font Judul sama sekali berbeda dari bawaan (default) nya lagi lagi kami menawarkan opsi pengaturan CSSnya. Perubahan ini tidak akan mengurangi kecepatan loading halaman. Tentu saja kita secara default kita dapat memilih style font kustom melalui pengaturan dasbor blogger, kita dapat smemilih font yang tersedia dari font Arial hingga font Unifraktur Maguntia dan tentu saja dapat memilih warnanya. Akan tetapi hanya sebatas perubahan pada jenis font dan warna itu saja. Nah melalui pengaturan CSS Judul  halaman editblogtema menjadi tampak beda. Caranya adalah: Masuk ke pengaturan blogger Pilih Tema Pilih edit HTML Pada halaman editor HTML blogger, cari kode </head> dan letakan kode CSS berikut tepat di atasnya: <style>  h1{   font-family: &#39;Calibri&#39;, Calibri;   font-weight: 800;   font-size: 7vw;   line-height: 1;   color: #f0f0f0;   text-align: center;   -webkit-text-stroke: 2px #

Cara membuat navigasi blog murni CSS dengan hamburger menu beranimasi

Gambar
Siapa bilang tampilan blogger blogspot itu membosankan? Justeru jika kita sedikit kreatif, ia memiliki opsi yang kaya, simple, dan ringan.  Salah satunya adalah tampilan navbar pada header blog. Mengapa selama ini saya fokus kepada tampilan header? Karena boleh dikatakan, ia adalah 'The firs impression' atau pemberi kesan pertama. Nah jika kesan pertama bagus, maka kesan terakhir 'The last impression' akan mengikuti. Tergantung bagaimana kita mempertahankannya. Dan pada header tertanam struktur headings dan secara kasat mata padanya ada judul dan deskripsi blog. Jadi mari kita bereksprimen dengan CSS. Ini adalah tentang navigasi menu blog yang responsif terhadap halaman blog dan dapat di buka melalui layar seluler dengan mudah. 1. HTML Pertama kita harus memasang HTML terlebih dahulu dan itu tampak sederhana: Masuk ke pengaturan atau dasbor blogger ( saya cobakan ke essential dan contempo) Pilih Tema Pilih Edit HTML pada halaman editor HMTL cari kode </header> dan

Cara membuat hamburger menu dan dan dropdown menu murni CSS

Gambar
Disamping Javascript, hari ini CSS menjadi semakin menarik dan semakin memikat. Bahkan beberapa template CSS tampak memiliki tampilan sangat baik dan bagus, dan bukan hanya itu, CSS nyaris tidak terlalu memberatkan loading atau kecepatan suatu halaman. Ada banyak elemen elemen menarik di buat dengan CSS dan itu bekerja dengan baik di sisi SEO, mesin pencari tidak kesulitan menemukan konten di balik bungkusan CSS. Dengan CSS kita dapat membuat hover sebuah tombol reaksi seperti tombol buka dan tutup. Atau membuat warna latar, atau membuat menu gulir, fixed dan dropdown tanpa melibatkan java script sekalipun.  Contoh menu navigasi dropdown CSS tanpa Javascript: See the Pen CSS Menu by Sufyan Yaan ( @sufyan-yaan ) on CodePen . Perhatikan kode CSSnya: body {background: #222326; font-family: 'Lato', sans-serif;} #primary_nav_wrap ul { left: 0px; top: 0px; list-style:none; position: fixed; background: #121314; color: white; margin:0; padding:0 display: inline-table; width

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

Sama sekali tidak ribet begini cara memasang breadcrumb valid HTML ke template terbaru blogger

Gambar
Essential adalah varian tunggal dari salah satu template terbaru blogger  yang strukturnya identik atau mirip dengan contempo, akan tetapi jika di teliti terdapat beberapa perbedaan pada sedikit pengaturan, pendeklarasian dan markupnya. Kita akan membahasnya pada kesempatan berbeda pada kesempatan memposting artikel yang berbeda. Kali ini kita hanya membahas cara memasang breadcrumb ke dalam templatenya. Dan jika ia berhasil pada template essentials, maka ia juga berlaku untuk template contempo. Percayalah, kami telah mengujinya.  DEMO Kita tahu template template default ini di buat berbasis layout versi ke 3 yang sangat baik strukturnya dan di buat seolah untuk di modifikasi oleh penggunanya.  Saya menyukai tampilan halaman untuk memuat konten yang 'full' tanpa sidebar - karena sidebarnya tersembunyi - seperti umumnya template template website modern masa kini. Saya tergoda untuk memasang breadcrumb ke template berbasis layout ke 3 karena membaca artikel dari Bung Frenky, saya

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

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