BGadgetTimEs

Dengan kata lain gagal di bangku sekolah bukan berarti telah gagal segalanya. Pertanyaannya mengapa sering kita mendengar orang tidak sekolah alias gagal ketika mengenyam pendidikan malah sukses ketika terjun ke dunia dan nyata? Ada beberapa model dari mereka yang gagal di bangku sekolah tapi secara meyakinkan sukses di dalam kehidupan selanjutnya.  1. Tidak mampu mengikuti mata pelajaran tapi sukses di dunia nyata. Mungkin bagi kebanyakan orang mereka tampak bodoh. Dan jika Anda mengalami kesulitan memahami mata pelajaran di bangku sekolah, janganlah terburu buru menghakimi diri sendiri. Apalagi jika Anda masih belum menggali potensi diri Anda sendiri.  Mungkin, faktor minat, tekanan dan hal hal di luar kesadaran kitalah yang menjadi penyebabnya. Termasuk dukungan keluarga. Pada prinsipnya kita harus menemukan penyebabnya.  Jika Anda adalah orang tua dan memiliki anak model begini, jangan buru buru menganggap anak Anda bodoh cobalah mencari cara untuk memotivasi anak And...

Saya bukan desainer, karena saya masih terlalu mentah dan terlalu dini dalam pengatahuan itu. Tapi saya selalu berusaha menjadi 'pemerhati' yang kalau menurut pengertian saya berarti selalu tertarik dan memperhatikan desain desain halaman web besar yang tidak luput dari pengamatan saya selama ini. Jika ada artikel Coding, web desain pasti akan saya buka dan saya baca. Dan dari semua itu dan selama itu pula saya dapat menarik beberapa kesimpulan. 1. LOGO Logo tidak dapat di abaikan karena termasuk hal penting dalam dunia desain. Sebuah LOGO dapat menjadi hal yang paling berdampak psikologis dan melekat dalam ingatan manusia. Walaupun tidak semata mata sebagai jimat bagi sebuah produk secara keseluruhan termasuk halaman web, namun LOGO kemudian menjadi abadi di ingat oleh pengunjung. Editblogtema tidak atau belum memiliki LOGO, namun namanya mungkin telah di ingat oleh sebagian besar pengunjungnya yang sedikit itu.  LOGO yang paling berharga itu adalah logo Apple ia mempresentasi...

Jika kalian menggunakan 5 varian terbaru template blogger dan ingin merombak style font Judul sama sekali berbeda dari bawaan (default) nya lagi lagi kami menawarkan opsi pengaturan CSSnya. Perubahan ini tidak akan mengurangi kecepatan loading halaman. Tentu saja kita secara default kita dapat memilih style font kustom melalui pengaturan dasbor blogger, kita dapat smemilih font yang tersedia dari font Arial hingga font Unifraktur Maguntia dan tentu saja dapat memilih warnanya. Akan tetapi hanya sebatas perubahan pada jenis font dan warna itu saja. Nah melalui pengaturan CSS Judul  halaman editblogtema menjadi tampak beda. Caranya adalah: Masuk ke pengaturan blogger Pilih Tema Pilih edit HTML Pada halaman editor HTML blogger, cari kode </head> dan letakan kode CSS berikut tepat di atasnya: <style>  h1{   font-family: &#39;Calibri&#39;, Calibri;   font-weight: 800;   font-size: 7vw;   line-height: 1;   color: #f0f0f0;   text-alig...

Siapa bilang tampilan blogger blogspot itu membosankan? Justeru jika kita sedikit kreatif, ia memiliki opsi yang kaya, simple, dan ringan.  Salah satunya adalah tampilan navbar pada header blog. Mengapa selama ini saya fokus kepada tampilan header? Karena boleh dikatakan, ia adalah 'The firs impression' atau pemberi kesan pertama. Nah jika kesan pertama bagus, maka kesan terakhir 'The last impression' akan mengikuti. Tergantung bagaimana kita mempertahankannya. Dan pada header tertanam struktur headings dan secara kasat mata padanya ada judul dan deskripsi blog. Jadi mari kita bereksprimen dengan CSS. Ini adalah tentang navigasi menu blog yang responsif terhadap halaman blog dan dapat di buka melalui layar seluler dengan mudah. 1. HTML Pertama kita harus memasang HTML terlebih dahulu dan itu tampak sederhana: Masuk ke pengaturan atau dasbor blogger ( saya cobakan ke essential dan contempo) Pilih Tema Pilih Edit HTML pada halaman editor HMTL cari kode </header> dan...

Disamping Javascript, hari ini CSS menjadi semakin menarik dan semakin memikat. Bahkan beberapa template CSS tampak memiliki tampilan sangat baik dan bagus, dan bukan hanya itu, CSS nyaris tidak terlalu memberatkan loading atau kecepatan suatu halaman. Ada banyak elemen elemen menarik di buat dengan CSS dan itu bekerja dengan baik di sisi SEO, mesin pencari tidak kesulitan menemukan konten di balik bungkusan CSS. Dengan CSS kita dapat membuat hover sebuah tombol reaksi seperti tombol buka dan tutup. Atau membuat warna latar, atau membuat menu gulir, fixed dan dropdown tanpa melibatkan java script sekalipun.  Contoh menu navigasi dropdown CSS tanpa Javascript: See the Pen CSS Menu by Sufyan Yaan ( @sufyan-yaan ) on CodePen . Perhatikan kode CSSnya: body {background: #222326; font-family: 'Lato', sans-serif;} #primary_nav_wrap ul { left: 0px; top: 0px; list-style:none; position: fixed; background: #121314; color: white; margin:0; padding:0 display: inline-table; width...

Essential itu identik dengan contempo, bedanya hanya sedikit dan itupun hanya pada bagian pendeklarasian CSS untuk pengaturan class dan ID yang sama pada bagian HTML-nya. Buktinya apapun yang saya pasang ke Essential bakalan cocok ke template Contempo dan demikian juga sebalinya. Dan akan selalu menghasilkan efek yang identik atau serupa pula.  DEMO Click here DOWNLOAD Click here Essential lebih sederhana, tidak seperti contempo yang memiliki 5 varian yang hanya dibedakan dari warna latar image, dan tidak seperti contempo essential itu soliter,  ringan, dan tampak anggun dengan kesan introvertnya.  Dan kali ini kami memberikannya sedikit polesan langsung melalui pengaturan halaman editor HTMLnya, menjadikannya tampak elegan dan lebih stylish dengan menu yang lebih tampak  seperti sebuah situs professional.  Menu navigasi full dengan muatan menu yang lebih banyak untuk navigasi pengunjung. Gambar profile penulis di atas setiap postingan ya...

Kode syntax highlighter di perlukan ketika halaman blog lebih banyak berisikan tutorial yang melibatkan postingan kode kode HTML, CSS, Javascript atau tutorial programming ke dalam  sebuah postingan. Jadi kode kode tersebut akan ditampilkan beda dengan teks biasa pada umumnya.  Kalau kita terbiasa melihat atau bahkan menggunakan suatu halaman editor HMTL online, tempat mengedit kode kode HTML seperti codepen maka kita akan mengerti mengapa itu jadi penting. Akan tetapi tidak sedikit para pengguna memilih menggunakan widget blockquote yang telah di modifikasi untuk menampilkan kode HTML ke dalam postingan karena mudah dan sederhana sekali cara penggunaannya. Contoh menggunakan blockquote yang telah di modifikasi: .highlight { color:white; background:black; line-height: 150%; } Kodenya adalah: @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";blockquote {margin: 20px 0; color: #666; border: 1px solid transparent; padding: 20px; backgro...

Javascript mampu membuat halaman blog menjadi jauh lebih keren, tampilan tombol reaktif, navigasi, lazyload. Dll.  Segala hal menjadi cantik dan itu tidak sepenuhnya dapat digantikan oleh trik trik CSS yang ada.  Dan javascript sangatlah powerful jika dipergunakan dengan benar.   Akan tetapi Javascript bisa berpotensi dan berubah menjadi anti SEO kalau kita kita menggunakannya dengan cara yang salah.  Berikut contoh kasus kasusnya: 1. Lazyload Gambar . Pemasangan lazyload pada gambar dapat mempercepat loading halaman, namun segera dengan signifikan mengurangi kemampuan mesin pencari dalam  merambati tag ALT pada gambar. Padahal gambar juga adalah konten yang sangat penting selain konten tulisan pada halaman blog.  Itu sangat nyata sementara pencarian gambar sangat penting bagi SEO halaman blog, dan mesin pencari membaca tag yang kita tulis pada bagian alt dan titel gambar,  lalu mereka mengangkut tag gambar gambar tersebut ke hadapan pembaca....

Pertanyaan itu terlintas di kepala saya pada saat ingin membuat kode sintaks highlighter otomatis di halaman blog. Artinya kita tidak perlu menambahkan kode baru, cukup dengan memodifikasi kode kode CSS blockquote. Namun blockquote pada dasarnya di desain hanya sekedar untuk menampilkan sorotan suatu 'kutipan' atau pernyataan yang umumnya pendek pendek. Sedangkan kode sintaks highlighter di buat untuk menampilkan kode kode HTML yang pada umumnya terdapat pada halaman halaman blog tutorial dan kadang kode kodenya sangat panjang. Menggunakan blockquote sangat sederhana, cukup sorot tulisan yang mau di jadikan kutipan, dan tekan tool dengan tanda di atas menu halaman. Sedangkan jika menggunakan kode sintaks highlighter yang sumber kodenya ada di internet, kita harus memasang CSS, eksternal link dan juga kadang javascript. Terus penulisannya harus melalui opsi 'HTML view' Alangkah baiknya ya jika blockquote bisa di modifikasi menjadi kode sintaks highlighter. Tapi, b...

Mengapa kami harus membuat tombol menu pencari model ini tidak lain adalah karena mempertimbangkan ruang tersedia pada header blog terlalu kecil terutama ketika halaman blog di buka melalui seluler (mobile). Dengan cara ini pengguna dapat menyentuh ujung panah untuk menarik keluar kolom pencarian dan ketika kolom di klik kolom tersebut otomatis akan melebar untuk mengetik kata kunci pencarian. Perhatikan gambar: Saat ini kami sedang menggunakannya untuk template essentials re-desain. 1. CSS: Masuk ke pengaturan blogger, pilih tema, lalu pilih edit HTML. Di dalam halaman editor HTML blogger cari kode </head> dan copy lalu letakan kode berikut tepat di atasnya: <style>#nbc-searchexpandbox1{ padding:10px;} #nbc-searchexpandsubmit1{ border:1px solid #CC0000; background: #CC0000; padding:5px; color:#ffffff; font:14px verdana; z-index:999;} #nbc-searchexpandinput1{ -moz-border-radius: 0px; -khtml-border-radius: 0px; -webkit-border-radius: 0px; border:1px solid #fff; background:#...