BGadgetTimEs

Ini hanya buat percobaan, namun cara ini terbilang ringan dan ringkas. Hanya menampilkan tombol profile namun jika tombol " PERIHAL SAYA " tersebut di klik akan memunculkan profile pemilik blogger dengan ukuran yang hampir memenuhi ukuran halaman. Sebenarnya saya ingin melengkapinya dengan link Php, misalnya dibawah profile ada form yang dapat dimanfatkan untuk chatting atau koresponden, akan tetapi saya masih menunggu beberapa masukan dari teman teman. Kita langsung saja kepada cara pemasangannya: 1. TAMBAHKAN CSS Langkah pertama masuk ke pengaturan blogspot: Masuk kepengaturan blogspot Pilih Tema atau "theme" Dibagian bawah Live on blog atau "langsung di blog" ada dua pilihan: Customize atau Sesuaikan dan Edit HTML Pilih Edit HTML Cari kode </head> letakan kode CSS berikut tepat diatasnya: <style> body {font-family: Arial, Helvetica, sans-serif;} /* Full-width input fields */ input[type=text], input[type=password] { wid...

Saya pernah menulis bahwa gadget FOLLOWER itu sangat memberatkan loading dan menyita kecepatan halaman blog, dan itu benar adanya. Tetapi tanpa gadget follower bagi sementara blogger seperti ada yang kurang jadi saya berusaha mencari cara agar link follower tetap terpasang namun menjadi super ringan! Saya jadi teringat trik yang saya pakai untuk menghubungkan sebuah link langsung ke WA atau SMS melalui link Blogspot menggunakan Php. Dan walaupun caranya tidak sama persis, namun trik ini dapat bekerja dengan baik! Lihat gambar dan perhatikan bagian footer pada tampilan mobile, perhatikan bagian bawah kanan layar hape telah ada menu footer " 👫 Follow Us". Hasilnya? Jauh lebih ringan dan Jauh lebih enteng daripada widget Follower bawaan, hampir tidak terlihat mengurangi loading blog. Begitu sobat klik Follow Us tersebut akan muncul layar notifikasi kecil sbb: 1. LANGKAH PERTAMA GUNAKAN BLANKO WIDGET JAVASCRIPT/HTML Masuk kepengaturan blogspot Pilih Tataletak atau ...

Saya punya alasan: Saya ingin tema yang mudah saya atur dan saya ingat, sederhana dan nanti akan saya modifikasi lagi dan lagi. Gagdet Header atau h1 pada template bawaan bahkan secara default dapat di bongkar-pasang melalui pengaturan blogger blogspot melalui "tambahkan gadget". Sebaiknya di pasang karena mesin pencari dapat membaca struktur blog sobat dengan baik. Susunan Header yang baik itu tentu saja normalnya dalah: Heading1 <1>: dimana Judul blog ditempatkan dan terpampang jelas diatas halaman blog Heading2 <h2>: tag ini digunakan pada judul artikel blog (jika berada pada homepage) dan akan berubah menjadi <h1> pada halaman posting.  Heading3 <h3>: tag ini digunakan pada sub-judul atau penjelasan dari judul artikel atau posting, dan bisa juga digunakan pada judul widget misalnya popular post pada sidebar. <h4> : tag ini umumnya  dan bisa digunakan untuk judul artikel terkait, komentar atau bisa juga digunakan pada judul widget....

1. FONT AWSOME Font awsome, bayangkan bagaimana cantiknya tampilan halaman blog sobat ketika menerapkannya. Font ini telah diperbaharui menjadi font awsome 5 yang lebih  kompatibel dan tentu saja lebih valid HTML 5. Kalau sudah urusan validitas, para pemilik situs akan berusaha patuh kepada aturan. Walaupun misalnya jenis font awsome yang lebih lama tetap bekerja dengan baik di dalam template halaman sebuah blog. Anda perhatikan baik baik, apakah template kita memiliki font font yang berbentuk rupa sebagai ikon ini, perhatikan menu navigasi, apakah selain tulisan  menu navigasi terdapat juga ikon di belakangnya? Font awsome juga sering dipakai sebagai ikon tombol share dan follower karena mampu menampilkan gambar kecil yang angat cantik untuk mewakili apa yang sedang kita kemukakan dan memiliki hampir semua ikon berbentuk LOGO media media sosial besar seperti facebook, twitter, Instagram, simbol blogger, wordpress dan berton ton simbol lainnya. Tentu saja pada tema tem...

Disamping tombol menu pencarian bawaan blogspot, banyak terdapat tombol pencarian buatan pihak ketiga edit blogtema juga tidak mau ketinggalan karena terlanjur kadung ingin membuat template dari nol dengan segala komponen dan elemennya hasil buatan sendiri. Baiklah kita langsung saja ke topik. Tombol pencarian ini saya buat animasi menggunakan kode aba aba CSS, sangat enteng dan berguna untuk meringankan beban loading halaman blogspot. Untuk memasangnya sobat perlu masuk ke pengaturan blogspot: Langkah pertama: masukan kode CSS Masuk kepengaturan blogspot Pilih Tema Pilih Edit HTML Pada halaman editor HTML blogspot cari kode </head> dan setelah ketemu copy kode dibawah ini lalu pastekan tepat diatasnya. <style> input[type=text] { width: 100%; box-sizing: border-box; border: 3px double transparent; border-radius: 30px; font-size: 22px; background-color: transparent; background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px ...

Font awsome membutuhkan loa ding karena menggunakan link eksternal untuk mengambil karakter, simbol atau ikon ikon dari ruang simpan library mereka. Sedangkan karakter emoticon yang saya maksud sudah terintegrasi didalam tool dan pengaturan blogspot. Ini dapat kita manfaatkan untuk memangkas beban yang dapat mengurangi kecepatan halaman blog akibat penggunaan font awsome. Karakter karakter ini dapat di copy paste bahkan ke dalam HTML dan dibaca dengan cara membaca karakter huruf atau font yang biasa kita pergunakan sehari hari. MANFAATKAN TOOL EMOJI BLOGGER. Sebaiknya sobat membuka opsi page atau halaman pada pengaturan blogger dan membuat entri baru untuk menyimpan beberapa simbol yang akan sobat pilih nanti. Tanpa banyak yang menyadari, karakter font huruf yang tersedia di blogspot pada saat penulisan artikel dapat berupa ujud pengganti font awsome. Dan hampir semua browser browser utama dan modern sudah support kepada karakter huruf atau font jenis ini. Karakter font bis...

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;  ...

Banyak yang panasaran bertanya melalui inbox saya, gimana caranya dan sulitkah membuat menu navigasi agar tetap berada diatas header halaman blog pada saat di scroll? Dan mengapa editblogtema tidak membuat template blogspot yang dipakainya sendiri seperti demikian? Apakah itu memberatkan loading blog? Ada lagi yang cuma memberikan komentar lihat tuh kaya viomagz, mantap, kan? . Mulanya saya hanya jawab pakai emot smile, tapi ternyata jumlah request semakin banyak. Saya akhirnya mengalah untuk membuat tutorialnya. Baiklah saya jawab pertanyaan yang terlintas pada pertanyaan melalui inbox terlebih dahulu: Membuat menu fix dan header fix itu sangat sederhana, hanya melalui CSS dengan menambahkan perintah position: fixed; dan aba aba z-index. Mengapa harus pakai z-index? Nanti saya jelaskan. Apakah Menu Navigasi Fix memberatkan loading? Navigasi menu fix tidak mungkin memberatkan loading karena itu hanya berupa elemen HTML internal di dalam template blogger. Baca juga ...

Back To Top adalah tombol yang dapat di pencet atau di klik untuk mengembalikan halaman sebuah blog kembali ke atas, biasanya akan muncul di bawah sebelah kanan halaman apabila halaman di scroll  ke bawah. Selama ini saya membuatnya menggunakan elemen HTML+CSS+JavaScript+link eksternal dan memanfaatkan link awsome untuk menampilkan ikon panah menunjuk keatas atau ikon "chevron up". Tetapi bagaimana jika saya tidak ingin lagi menggunakan link gambar atau image, dan membuang link awsome dari template halaman web kita? Pasti tampilan Back To Top yang telah saya buat itu hilang namun masih meninggalkan kode kode yang tidak lagi dapat dibaca oleh template saya. Tujuan saya membuang link-link Awsome dan menghindari terlalu banyak link eksternal untuk image adalah agar template buatan saya menjadi lebih simple, fast loading dan bersih. Lalu bagaimana saya mengganti tombol back to top? MENGGUNAKAN ELEMEN HTML CSS Jangan kuatir, manfaatkan saja elemen dasar HTML terutama CSS...

Setelah membersihkan template dan meyederhanakannya Saya melakukan pengujian ke situs GTMetrix dan sewaktu melakukan pengujian kecepatan loading template blogspot di GMetrix pada bagian YSlow saya temukan satu list dengan sederet items yang di tandai sebagai high priority tidak dapat mencapai 100 karena persoalan 'expires header' saya sama sekali tidak tahu caranya bagaimana menambahkan expires header ke dalam template. Template editblogtema walau dengan beban sedemikian berat masih dapat menyandang kecepatan maksimum dengan nilai skor: 100. Jadi kecepatan template memang berpengaruh terhadap kecepatan halaman loading blog. Namun ganjalan pada bagian YSlow cukup membuat panasaran, bagaimana ya blognya Igniel dapat menerapkan expires header sehingga YSlownya dapat skor 100 juga. Saya sudah baca triknya tapi ternyata tidak dapat diterapkan dengan mudah ke dalam jenis template editblogtema. Sampai saat ini kami memang masih sedang mencoba memperbaikinya sambil mencari cari inf...

Updated: Apa yang baru? FITUR FITUR BARU: Template disederhanakan Tentu saja lebih SEO friendly UI dan UX baru: Responsive dan Mobile banget Lebih gesit, bersih dan lebih ringan dan menjadi supercepat Menu Navigasi lebih responsive   dan stylish dengan warna gradasi. Dibuat dan dikembangkan berdasarkan tutorial W3school  Tombol pencarian di perbaharui, lebih responisve, lebih alami dengan "search input" warna biru akan muncul dibawah (sebelumnya diatas, banyak yang komplin) Kecepatan semakin di tingkatkan antara lain dengan membuang link link sampah dari tombol share pihak ketiga, kode kode CSS dan JavaScript bawaan yang tidak terpakai dan menambahkannya dengan tombol berbagi addtoany yang lebih ringan. Silahkan cek di  Gmetrix  atau Silahkan cek halaman demo di tes kecepatan Google PageSpeed Perbaikan pada tampilan Tablet khusus navigasi pada menu dropdown yang terlalu rapat ke kanan sehingga menyulitkan tindakan penampil. Memperbaiki posisi snippet d...

Jika sobat ingin membuat template contempo menjadi beda sobat dapat mengetikan pencarian pada kotak pencarian di dalam blog ini. Kali ini saya akan berbagi trik merekayasa CSS agar footer atribusi blog template contempo jadi berwarna solid atau gradasi Walaupun baru dibuat oleh Google 2 tahun lalu dan masih bersatus sebagai template default blogspot terbaru namun tampilan contempo mulai redup ditengah tengah bermunculannya desain desain "unik" tema buatan pihak ketiga. Sebenarnya beberapa trik sudah cukup untuk menyulap contempo menjadi beda, misalnya menampilkan sidebar, membuat menu navigasi, merobah warna background, merobah tampilan footer, dst. MEMBERI WARNA PADA ATRIBUSI FOOTER Masuk kepengaturan (dasbor) blogger Pilih Theme Pilih edit HTML Pada halaman editor HTML cari kode CSS berikut: .widget.Attribution {   margin-top: 1em;   text-align: center; } Jika sudah ketemu tambahkan dibawahnya kode: height:40px; Background-color: blue; Kode tersebut ...