Langsung ke konten utama

Postingan

Menampilkan postingan dengan label footer

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

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

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

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

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

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

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

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

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

Copyright© EDITBLOGTEMA . All rights reserved.