EDITBLOGTEMA

Halo Zen Z! Dulu sebelum zamannya perangkat mobile, konon para websider sangatlah umum menggunakan satu jenis desain web saja: Model desktop atau model laptop. Desain model itu pada zamannya tentu saja bukan masalah. Soalnya orang orang masih bekerja menggunakan layar lebar, mulai dari PC desktop hingga laptop, semua serba besar, berat dan tebal. Orang masih belum memegang smartphone dan tablet. Ia baru lahir belakangan. Seperti kata pepatah bahwa tidak ada yang abadi di dunia fana ini, semuanya akan berubah. Hal hal baru akan datang mempengaruhi atau menggantikan hal hal lama, apalagi jika hal tersebut terkait dengan kemajuan teknologi, dan desain website memang tidak bisa tidak pasti akan di pengaruhi oleh kemajuan teknologi. Perangkat mobile muncul, layarnya kecil, tapi perangkat tersebut perlahan lahan memiliki kemampuan komputer, dan mau tidak mau ia mula terlibat dengan dunia web. Ketika tidak semua orang memiliki sebuah PC desktop dan laptop dengan berbagai alasan teknis dan ala

Navbar model ini berbeda dengan navbar yang biasanya di pergunakan di blogger/blogspot. Biasanya pengguna menggunakan navigasi menu horisontal, vertikal atau yang lebih responsif. Namun kali ini saya ingin membagikan cara membuat menu navigasi  yang agak berbeda. Dan ini tentu saja tergantung selera pemilik sebuah situs blogger. DEMO Namun jangan salah, trik ini bisa membuat halaman blog menjadi lebih atraktif, beda dan penuh warna. Istilahnya 'eye catching' banget ya. Mungkin bagi yang ingin mencoba saya akan beberkan sumber kodenya: 1. CSS Kode CSSnya sedikit panjang, ya terang dong karena ia mengandung elemen elemen buat animasi dan kalau di dalam template di letakan di atas kode </head>:     <style>* { margin: 0; padding: 0; } body { background-color: rgb(0, 0, 255); z-index:2000} nav { position: fixed; } nav .back-circle { position: absolute; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);

Mengurangi penggunaan javascript adalah keputusan bijaksana di dalam kegiatan di dunia web yang menggunakan template web sebagai komponen  medianya. Dan hanya dengan menggunakan CSS kita dapat membuat efek efek yang sangat hidup untuk halaman web atau blog kita. Terimakasih kepada CSS terutama pada pengaturan dan sintaks elemen: .position:fixed Perbedaan fixed dengan sticky adalah: Fixed navigasi menu atau elemen tetap berada di suatu posisi, atau dalam contoh tetap berada di atas header pada saat elemen body di scroll naik dan turun. Sedangkan sticky adalah: Sticky navigasi menu atau sticky elemen yang mana menu baru berhenti pada posisi yang telah di tentukan pada saat pengguliaran menu ke atas selesai. 1. FIXED MENU Fixed menu berarti navbar atau menu tetap berada diatas pada saat elemen halaman di scroll naik dan turun. Kita melihat contoh bagaimana membentuk elemen fixed dengan pengaturan CSS berikut: . navbar { overflow: hidden; background-color: #333; position : fixed ; /

Mengapa ia demikian sangat populer kini? Kita tidak bahas makanan ya, setidaknya blog ini tidak memiliki niche kuliner, jadi tidak ada hubungan sama dengan toko penjual Hamburger yang lezat. Kita sedang membicarakan aplikasi. Saya menulis ini karena setiap sesuatu memiliki kisah mereka masing masing yang mungkin ingin kalian ketahui. Sejarah. Di desain oleh Norm Cook untuk pertama kali pada tahun 1981, dia ini seorang pemimpin bagian desain grafis di perusahaan Xerox Star, pencetus komputer personal pertama di dunia. Desain tiga garis ini sangat simpel akan tetapi pada waktu itu teknologi perangkat hanya support 16x16 piksel jadi sangat buram. Maka itu dibuat tiga garis agak tebal biar terlihat jelas. Dan tiga garis ini yang paling 'real deal'. Akhirnya dipergunakan hingga kini. Seiring waktu penggunaan seluler yang minim lebar layar ternyata membutuhkan hamburger menu guna menampilkan menu menu konten, misalnya situs Twitter dan Apple termasuk situs besar pertama yang mengguna

Satu lagi cara memasang menu hamburger untuk blog dengan efek animasi namun murni css. Keren? Ya keren dong. Lagipula responsif, animatif (benar gak istilah ini ya), intuitif dan ringan. Hanya buat alternatif bagi yang menginginkan tampilan blog pada header tampak lebih baik. Klik gambar di bawah 2x untuk melihat DEMOnya. Speks: Murni CSS Ringan Hamburger Animasi Cara memasang:  Masuk ke pengaturan atau dasbor blogger Pilih tema Pilih edit HTML: 1. CSS Di dalam halaman editor HTML cari kode </head> dan letakan kode CSS berikut ke atasnya:    <style>body {   margin: 0;   padding: 0;   background: #333;   color: #fff;   font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, sans-serif;     overflow-x: hidden;  } a {   text-decoration: none;   color: #fff;     transition: color 0.3s ease; } a:hover {   color: tomato; } #menuToggle {   display: block;   position: absolute;   top: 50px;   right: 50px;     z-index: 1;     -webkit-user-select: none;   user-selec

Ini trik yang cantik! membuat halaman blog menjadi minimalis namun eyecatching, dan terasa intuitif karena ia akan menjadi tampak lebih 'hidup' dengan efek animasi. Karena tidak melibatkan javascript menu ini juga ringan, simpel dan baiklah kita dapat menyimpulkannya: Minimalis Beranimasi Murni CSS Mudah di terapkan ke dalam template blogger terbaru. DEMO Cara memasang: Masuk ke dasbor pengaturan blogger Cari kode Tema Pilih edit HTML 1. CSS Tentu saja kode CSSnya panjang karena harus membentuk sedikit efek animasi terutama buat menu hamburgernya. Jadi copy seluruh kode CSS berikut di bawah ini. Di halaman editor HTML template blogger cari kode </head> dan letakan kode CSS berikut di atasnya: <style>  .main p { font-size: 24px; text-align: center; margin: 50px;        z-index:999; } #container {   position: relative;   display: block;   width: 100%;   height: 100%;        z-index:999; } .nav-menu-button {   display: block;   position: fixed;   top: 0;   left:

Ini adalah alternatif sebuah navigasi menu ringan yang kami temukan diantara berton ton sumber kode CSS dan dapat di terapkan ke blogger blogspot dengan amat mudah. Sebut saja ia adalah navbar murni CSS dengan kemampuan multi menu dropdown. DEMO No need Javascript, really? Sure! Kita tahu kok kecepatan loading blog sudah begitu pentingnya, dan ia menjadi sedemikian penting sehingga menjadi parameter dan sinyal bagi mesin pencari. dan setiap material design yang saya pilih akan selalu yang paling simple, paling ringan dan paling cocok untuk di pasang ke halaman blog. Mari kita lihat sumber kodenya dan buktikan bahwa itu hanya CSS: Namun jika ingin memasangnya ke dalam template blogger (kami cobakan ke essential) kalian harus masuk ke pengaturan blogger (blogspot), pilih menu dan lalu pilih edit HTML. 1. Pasang CSS Letakan CSS berikut di atas kode </head>:     < style > nav {   margin: 0;   padding: 0;   background-color: # fff ; } #logo {       font-color:white;   display: b

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

Sebenarnya saya ingin mengupas cara membuat berbagai menu navigasi keren dengan animasi yang dapat diterapkan ke dalam template blogger blogspot. Akan tetapi menyadari keterbatasan saya yang tidak suka menulis panjang lebar alias cepat bosan, maka saya memutuskan untuk memberikan contoh salah satu menu yang unik dan keren buat blog menggunakan CSS dan tentu saja kalian harus tahu juga fungsi dan peranan JQuerry dalam hal ini. Mari kita mulai dari pengertian JQuerry: jQuery adalah perpustakaan JavaScript ringan, mottonya:"tulis lebih sedikit, lakukan lebih banyak". DEMO Tujuan jQuery adalah untuk mempermudah penggunaan JavaScript di situs web Anda. jQuery mengambil banyak tugas umum yang membutuhkan banyak baris kode kode JavaScript untuk diselesaikan, dan membungkusnya menjadi metode yang dapat kita panggil dengan satu baris kode.  Ho ho ho, artinya kita tidak perlu menulis cukup hanya dengan 'memanggil' dan perintah yang kita butuhkan meluncur dari ruang perpustakaan