Postingan

Menampilkan postingan dengan label footer

CARA MEMBUAT FOOTER SEDERHANA YANG ELEGAN UNTUK TEMPLATE BLOGGER VARIAN TERBARU DENGAN CSS

Gambar
Memang sudah masanya meninggalkan template lama. Itu sudah hampir menjadi masa lalu. Ya gayanya, ya struktur penulisannya ya versi layoutnya. Pokoknya semuanya memang berasal dari masa lalu. Karena sudah hukum alam yang lama lama menjadi usang, ketinggalan fitur dan model, untuk kemudian perlahan lahan di gantikan oleh yang baru. Contoh template klasik generasi pertama, blogger mana yang mau bunuh diri menggunakannya kembali? Kini seperti kita sudah maklum, Google melalui bloggernya telah menyediakan 5 varian template terbaru versi kedua dengan layout versi 3, yakni: Contempo Soho Emporio Notable Essential Mereka telah mengadopsi gaya kekinian. Mereka masuk syarat sebagai template mobile dan lulus pengujian bagian Web Core vitals di Google Master. Template versi lama, yakni versi kedua dengan layout versi 2: Simple Dynamic View Picture Window Awesome inc Watermark Ethereal Travel Mereka yang tujuh varian utama ini memang sudah jadul, tidak responsif dan tidak mobile friendly. Mereka su

Membuat ikon sosial plus back to top tanpa javascript

Gambar
Back to top K alian tahu, JavaScript dan ikon pihak ketiga juga ikon font awsome, bootstrap dan sebagainya itu sangat memperlambat loading halaman blog?, Sedangkan back to top kebanyakan memerlukan JavaScript untuk tindakannya ditambah dengan ikon panah menunjuk keatas dengan warna kesukaan kita menggunakan font awsome, lengkaplah sudah menjadi beban yang melukai halaman blog kita . Akan tetapi jika kalian hanya menginginkan sebuah tombol "back to top" tanpa "action" dan hanya membutuhkan panah menunjuk ke atas yang ketika di klik oleh pembaca akan mengembalikan konten ke awal baca, kalian bisa mencoba trik sederhana ini.Yang perlu kalian ketahui adalah disini: Jika kita hanya membutuhkan kecepatan blog mobile klasik (non AMP) maka kita harus menyederhanakannya diantaranya melalui cara:Menyederhanakan template. Jika perlu tidak memasang gadget/widget berlebihan, mengurangi penggunaan javascript dan mengganti ikon ikon pihak ketiga dengan ikon ikon SVG ala

Membuat widget footer 3 kolom pada template terbaru blogger

Gambar
kredit gambar: pexel P embuatan widget ini dapat diterapkan pada empat template terbaru blogger yang telah support layout versi 3. Seperti yang anda lihat template terbaru memang keren habis tapi lihat bagian kakinya (footer) sangat monoton, padahal banyak widget yang ingin kita tempatkan disana, tapi sayang kontainernya tidak ada. Jadi memang kita harus membuatnya dan jangan kuatir dengan bentuk layout footer default yang sempit pada saat dibuka melalui pengaturan, itu hanya tampilan saja, faktanya akan berbeda. 1. Cara membentuk widget text tiga kolom: Tambahkan CSS Masuk kepengaturan blogger Pilih tema/theme Pilih sesuaikan Pada blogger theme designer pilih lanjutan atau advance Scroll keatas menu yang segera muncul di sebelah kanannya scroll sampai ke menu paling bawah. Pilih atau klik Tambahkan CSS atau Add CSS. Pada kotak blanko CSS kosong yang muncul tambahkan kode berikut (copy dan pastekan) #footer-column-container { clear:both; } .footer-colu

Cara membuat footer stylish untuk template Blogger contempo, emporio, soho dan Notable

Gambar
T api baca dari awal ya, trik ini mungkin tidak efektif jika di gunakan buat template template yang lebih tua seperti PT. Keren Sekali, Jendela, Perjalanan, Sederhana dll. Memang bisa tapi kurang efektif. Demikian juga pada template template custom dan premium buatan pihak ketiga yang kalian beli di internet.  Saya katakan 'bisa' namun pengaturan CSSnya harus di rombak terlebih dahulu jika ingin menerapkannya ke template template selain empat template yang telah saya sebutkan di atas. Secara default footer ke empat template template seperti contempo,  soho,  emporio dan notable terlihat monoton, namun kita dapat menambahkan footer dengan gaya dan warna tertentu beserta widget atau gadget yang terinstegrasi didalamnya. Pembuatannya juga tidak sulit: Pertama tambahkan HTML Pilih tema Pilih edit HTML Pada halaman editor HTML blogger copy berikut: <div class='editblog'><div class='editblogsocial-icons'> <ul> <li class='social-faceboo

CARA MEROBAH NAVIGASI OLDER, NEWER DAN HOME PADA BAGIAN FOOTER BLOGGER

Gambar
Kalau sobat menggunakan template bawaan blogspot, coba perhatikan bagian navigasi paling bawah halaman blog, lebih kurang seperti gambar diatas. Tampak jadul dan membosankan, bkan? Mungkin ada terdapat beberapa tutorial yang sama atau bahkan berbeda, namun saya ingin memberikan cara yang sedikit kurang lebih berbeda dengan melibatkan font awsome untuk merobah tampilan bagian bawah navigasi homepage blogger anda. Tentu saja tampilan seperti ini pada akhirnya hanya menuruti imajinasi kami sendiri. Letaknya navigasi ini pada bagian bawah halaman blog dan terli Contoh sebelum: Contoh sesudah: Elemen dasarnya adalah HTML dan Awsome icon! Jadi semisal anda menggunakan tema default blogger, jangan lupa memasang kode link pemanggilnya. Terlebih dahulu masuk ke pengaturan Blogger > pilih pengaturan >  pilih Tema /Template .  Pilih editHTML , lalu kopi saja kode link awsome dibawah ini: <link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/fon

CARA MENAMBAHKAN LINK FOOTER UNTUK TEMPLAT BLOGSPOT DENGAN LINK WHATSAPP

Gambar
Sebenarnya ini bisa di terapkan ke dalam template blogspot yang lebih lama. Namun karena sebaiknya sobat menggunakan templat terbaru blogspot yang sudah dibuat otomatis responsive dan mobile, maka cara ini sangat baik diterapkan. 1. CSS Tidak ada JavaScript. Hanya elemen CSS yang kita butuhkan disini dengan syarat hanya 3 link saja yang saya sarankan itupun dengan judul link yang singkat seperti: privasi, perihal, dan kontak atau menurut selera sobat  karena layar hape yang kecil hanya bagus menampung panjang posisi inline sedemikian. Masuk ke pengaturan blogspot>>Tema>>Masuk ke opsi edit HTML, lalu cari kode: </head> dan letakan kode berikut tepat diatasnya: <style> body {   margin: 0;   font-family: Arial, Helvetica, sans-serif; } .navbar {   overflow: hidden;   background-color: #fff;   position: fixed;   bottom: 0;   width: 100%; } .navbar a {   float: left;   display: block;   color: #333;   text-align: center;   padding: 14px

CARA MUDAH MENAMBAHKAN FOOTER KE TEMPLATE CONTEMPO

Gambar
Kekurangan Contempo hampir setiap penggunanya setuju: Tidak memiliki footer atau ciri ciri footer yang dapat dimanfaatkan sebagai tempat untuk menempatkan widget atau Navigasi tambahan web blogger pada bagian paling bawah halamannya. Tetapi kita akan merobahnya menjadi lebih keren: Membuat sebuah footer yang "fixed" alias tetap akan terlihat beberapa saat pada saat halaman atau konten blog di scroll ke atas dan kebawah. Dan bagaimanapun saya telah mencari cara yang paling tepat menambahkan footer ke template contempo. Saya mengunjungi Google Help Discussion, tidak ada jawaban expert.  Akhirnya saya mencari triknya dengan cara mengutak atik CSS melalui tempat belajar pavorite saya yakni W3School ternyata sangat sederhana dan hasilnya terbilang cukup gemilang. Bagaimanapun pada dasarnya Contempo dan template klasik biasa itu sama saja. Baiklah jika sobat pengguna template contempo sobat bisa menggunakan trik ini, cara ini ini memiliki kelebihan lain yakni footer

MARI MEMBUAT FOOTER BLOGGER CONTEMPO DENGAN CSS

Gambar
Sobat tahukan kalau tema contempo bawaan blogger itu nyaris tidak memiliki footer yang menarik? Akan tetapi dengan CSS hasil ramuan ini, hal itu langsung berubah. Dan menariknya apa yang pernah menjadi perbincangan panas di diskusi Google Forum ternyata hanya membutuhkan pemecahan yang sangat sederhana. Aduh apa apan footernya beginian? MEMBUAT FOOTER UNTUK CONTEMPO DENGAN CSS Rahasianya adalah CSS! Perhatikan kode yang saya buat: <style> .footer { position: relative; left: 0; bottom: 0; width: 100%; height: 50px; background:-webkit-linear-gradient(right,#E6E6FA 0%,#5093C4 75%); color: black; text-align: center; } </style> Sangat sederhana bukan? Dimana meletakannya? Gampang sobat masuk ke pengaturan blogger >> pilih tema >> dan lalu pilih edit HTML,  cari kode </body> pada Tema Contempo letaknya selalu ditempat paling bawah halaman HTML, scroll saja halaman ke atas sampai habis! Letakan kode diatas tepat diatas </body> Lho bukankah i

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