Postingan

Menampilkan postingan dengan label triks

CARA MEMBUAT HAMBURGER MENU YANG BENAR UNTUK TEMPLATE BLOGGER MODERN

Gambar
Menu klasik (baca desain menu navigasi blog lama) adalah menu yang tampil di header dalam bentuk inline, horisontal hingga dropdown - dan sebagian disembunyikan hanya pada tampilan mobile. Namun oleh karena trend bahasa web yakni CSS yang semakin maju, hingga memungkinkan untuk membuat menu halaman web kemudian di buat minimalis, dan minimalis menjadi SEO. Tanpa javascript! Banyak alasan mengapa halaman web modern tampak lebih minimalis antarmukanya tapi ini bukanlah pendapat seseorang, akan tetapi melihat kepada trend dari evolusi kemunculan halaman halaman webblog personal dengan tampilan minimalis namun dengan fitur yang lengkap. Juga karena makin kesininya CSS ternyata menjadi semakin powerful. Menu template zaman sekarang sangat minimalis kebanyakan hanya menampilkan sebua tombol namun jangan salah, satu tombol berisikan menu yang sangat lengkap! Dan tombol yang paling populer adalah: Menu Hamburger! 1. Apakah menu hamburger itu? Menu hamburger adalah ikon menu tiga garis berlapis

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 MEMBUAT FOOTER BLOG BERGELOMBANG DAN BERANIMASI

Gambar
Jika sebelumnya aku telah memberikan trik bagaimana membuat header bergelombang dan beranimasi, kali ini tanpa di mintapun akan kuberikan trik membuat footer bergelombang dan beranimasi yang dapat di terapkan terhadap template template terbaru blogger blogspot. Klik DEMO Prinsip kerjanya adalah sama: Memanfaatkan dan memanipulasi kode kode CSS/SVG agar kita dapat membentuk, membungkus, melapis dan memberikan efek warna beranimasi ke bagian bagian elemen template yang ingin kita 'make over' tampilannya. Dan jangan kuatir, sama saja dengan trik membuat header bergelombang dan beranimasi, kita akan menggunakan trik CSS dan SVG, tidak ada Javascript yang dilibatkan. Dan template yang aku pilih tetap saja Essential dan atau Contempo karena keduanya identik. 1. Langkah pertama  Masuk ke pengaturan blogger  Pilih tema Pilih edit HTML Di halaman edditor HTML cari kode </head> dan letakan kode CSS berikut di atasnya: <style>:root { --color: # 4973ff ; } footer { font

CARA MEMBUAT HEADER TEMPLATE BLOG BERGELOMBANG DAN BERANIMASI

Gambar
Teknik ini sedikit berbeda dengan apa yang di tampilkan pada template editblogtema. Template editblogtema menggunakan pengaturan CSS yang berbeda dan lazimnya di pergunakan untuk memanipulasi pengaturan SVG ke dalam atau menjadi header. Sedangkan triks yang akan saya sampaikan sekarang ini sebenarnya lebih kepada untuk menu navigasi pada bagian header template blog. Contoh tampilan: DEMO Teknik saya ambil dari sumber kode template Wordpress. Tentu saja lebih mudah di terapkan ke dalam template wordpress sebagai bagian dari plugin tema WP, untuk menerapkannya ke templat blogger blogspot saya seperti montir harus membongkar pasang bagian kode CSSnya terlebih dahulu he he he...dan untungnya itu hanya tentang CSS dan kode kode SVG standard saja. Jika tidak mending bikin template WP deh. Mari kita terapkan ke dalam template contempo. 1. Langkah pertama menerapkannya adalah: Masuk ke pengaturan dasbor blogger Pilih tataletak  Temukan widget header REMOVE (buang) itu Lho kok buang widget hea

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.  Aku menyukai tampilan halaman untuk memuat konten yang 'full' tanpa sidebar - karena sidebarnya tersembunyi - seperti umumnya template template website modern masa kini. Aku tergoda untuk memasang breadcrumb ke template berbasis layout ke 3 karena membaca artikel dari Bung Frenky, aku me

DOWNLOAD TEMPLATE DENGAN HEADER BERGELOMBANG

Gambar
Karena kebanyakan tinggal di rumah, kesempatan utak atik halaman HTML blogger dan menghasilkan sebuah template berbasis essential yang aku modifikasi alias rombak sedemikian rupa. Oh ya meskipun Fitur utamanya adalah tampilan pada headernya yang bergelombang dan beranimasi namun aku tambahkan hal hal berikut: Template blogger Essential DEMO Breadcrumb data terstruktur valid (tersembunyi untuk tujuan minimalis) Related Posts sederhana dan ringan Tombol berbagi Script kotak pencarian sitelink Auto meta tag Navigasi responsif sederhana dengan efek paralax mengikuti gaya headernya yang juga paralax. Sekali lagi terbukti bagian header template itu ibarat wajah manusia yakni hal pertama yang dilihat orang, begitu bagian tersebut di rombak nyaris bagian lain terlupakan dari dan orang jadi pangling melihatnya. Kalau soal merubah header editblogtema memang ahlinya he he he... 1. Efek palallax... Mau tahu apa itu efek paralaks? Di jelaskan dulu ya...Paralaks, atau lebih tepatnya paralaks gerak 

CARA MENGHAPUS KREDIT GAMBAR LATAR PADA TEMPLATE BAWAAN BLOGGER

Gambar
Para pengguna template blogger default bawaan Jika ingin menghapus kredit footer 'Powered By blogger' pada template terbaru seperti contempo, emporio, soho dan notable kami sudah mempostingnya melalui postingan di tahun 2018 awal blog ini di bangun, tulisan itu berjudul: CARA MENGHAPUS POWERED BY BLOGGER PADA TEMPLATE CONTEMPO  dkk Sekarang kita akan menghapus kredit bawaan gambar template tersebut. Tempat link kredit itu sama dengan 'Powered by blogger' yakni di bagian footer template. Dan ini berlaku pada semua gambar bawaan dengan nama nama berbeda secara default akan ada tertulis kredit atas nama 'Michael Elkan' namun jika gambar latar kita robah melalui dasbor blogger, nama akan berganti dengan nama kredit lain Berikut gambarnya: Caranya: Masuk ke pengaturan blogger  Pilih Tema Piilih edit HTML Di dalam halaman editor HTML cari kode berikut: <Variable name="body.background" description="Background"  dan di bawahnya lagi cari: Credit:

Cara membuat label menjadi HIDE dan UNHIDE pada template viomagz

Gambar
Viomagz buatan Mas Sugeng adalah template buatan pihak ketiga yang paling banyak dipergunakan, harus diakui itu adalah template yang hebat. Akan tetapi harus di akui juga beberapa versi lamanya masih menggunakan layout yang sudah ketinggalan zaman, layout versi kedua. Namun itu bukan poin penting. Satu widget pada template template lawas yang apabila di tampilkan akan memenuhi tampilan ruang tataletak template blog menurut saya adalah: widget Label . Terutama jika kita ingin menampilkan semua label tanpa harus menampilkannya secara keseluruhan kita butuh tombol 'hide and unhide' seperti layaknya yang terdapat pada template template terbaru dengan layout versi ketiga dan hide unhide itu di sisi blogger (blogspot) sudah menjadi standar di zaman now. Saya tidak dapat memasang dan membiarkan widget label dan lalu label labelnya memenuhi sidebar template viomagz misalnya, atau meletakannya di bagian footer dan semua label tersebut tampil memenuhinya terutama jika kalian telah memili

Mau template viomagz? Rubah Template Kalian seperti viomagz!

Gambar
Walaupun templatenya bisa banget di pergunakan, tapi ini hanya untuk pembelajaran membiasakan diri dengan kode kode HTML blogger blogspot ya...Saya akan mengajak kalian meniru template template ternama dengan sama baiknya dengan aslinya, sesuai dengan judul di atas kita membuat template viomagz yang legendaris itu. DEMO   Click here   DOWNLOAD   Click here Caranya, harus saya jelaskan terlebih dahulu sebagai berikut: Masuk ke pengaturan atau dasbor blogger. Pilih Tema, (terserah apakah templatenya contempo, soho, emporio) Pilih Edit HTML Nah kalau sudah masuk ke halaman editor HTML blogger kalian harus cari dua tag berikut: Tag <head> hingga ke tag penutupnya </head> Tag <body> hingga ke tag penutupnya </body> Klik mata panah di awal kode tag <head> dan body tersebut, contoh: Pada kode di atas jika kalian klik angka urutan 4 dengan mata panah menghadap ke bawah maka kode kode di dalam tag <head> akan menjadi tampak singkat sekali, padahal kode terseb

TRIK BARU MENGHAPUS JAVASCRIPT YANG TIDAK DIPERGUNAKAN PADA TEMPLATE TEMPLATE TERBARU BLOGGER

Gambar
Pernah mengukur kecepatan halaman blog menggunakan matrik Google PageSpeed? Ya pernah dong.  Saya gagal fokus pada bagian LCP (Largest Contenful Paint) karena itu adalah salah satu biang kerok lambatnya halaman berpacu di jaringan web, sangat melukai performa kecepatan. Pada pengukuran akan menghasilkan data sebagai berikut: Tentu saja saya tidak akan mempermasalahkannya jika ia tidak di gunakan sebagai sinyal bagi mesin pencari di Google console Webmaster. Terutama pada bagian data web inti ini bisa mencerminkan kegagalan mengoptimalkan halaman sebuah web termasuk halaman blog. Lalu apa biang keroknya? Setelah klik disana terdapat salah satu datanya: Jika ingin halaman jadi wuss dan ringan kita harus menghapus javascript yang tidak dipergunakan dari dalam template. Malangnya kemanapun mencarinya di halaman editor HTMLblogger Javascript itu tidak di temukan. Walaupun sudah tekan CTRL+ALT. dan memasukan kata kunci, tidak ada. Javascript itu adalah: …widgets/53698643-widgets.js Para blog

CARA MEMASANG TOMBOL MENU SOSIAL DI BAGIAN HEADER TEMPLATE BLOGSPOT NOTABLE

Gambar
Trik ini saya modifikasi bagian CSSnya di sesuaikan dengan kebutuhan template baru yang lebih modern. Menu sosial adalah sekelompok ikon yang kita butuhkan agar halaman web terhubung ke media sosial milik kita sendiri sehingga blog memiliki sumber trafik organik yang tinggi. Demikian harapannya. Tapi itu memang bisa berguna, karena akan menyintas jalan dari halaman web ke halaman medsos milik kita seperti Facebook, IG, Twitter, Pinterest dll. Cara pemasangannya adalah sebagai berikut: (note: credit pic: Freepik) 1. Masuk kepengaturan atau dasbor blogger Pilih tema Pilih (cari) tombol edit HTML 2. Tambahkan CSS Pada halaman editor HTML blogspot cari kode </head> dan letakan kode CSS berikut ke atas kode tersebut. <style>#social-icons { margin-top:-30px; width:100%; clear:both; z-index: 999; position: fixedrelative;} .social-media-icons { display:table} .social-media-icons ul { text-align:right; padding:5px 5px 0 0 list-style-image:none; list-style-position:outside; list-styl

Cara membuat Navbar responsif murni CSS dengan multi menu dropdown untuk blogger

Gambar
Ini adalah alternatif sebuah navigasi menu ringan yang kami temukan diantara berton ton sumber kode CSS dan dapat di terapkan ke blogger blogspot dengan amat mudah. Sebut saja ia adalah navbar murni CSS dengan kemampuan multi menu dropdown. DEMO No need Javascript, really? Sure! Kita tahu kok kecepatan loading blog sudah begitu pentingnya, dan ia menjadi sedemikian penting sehingga menjadi parameter dan sinyal bagi mesin pencari. dan setiap material design yang saya pilih akan selalu yang paling simple, paling ringan dan paling cocok untuk di pasang ke halaman blog. Mari kita lihat sumber kodenya dan buktikan bahwa itu hanya CSS: Namun jika ingin memasangnya ke dalam template blogger (kami cobakan ke essential) kalian harus masuk ke pengaturan blogger (blogspot), pilih menu dan lalu pilih edit HTML. 1. Pasang CSS Letakan CSS berikut di atas kode </head>:     < style > nav {   margin: 0;   padding: 0;   background-color: # fff ; } #logo {       font-color:white;   display: b

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