Postingan

Menampilkan postingan dengan label footer

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

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