Postingan

Menampilkan postingan dengan label navigasi menu blog

MENU HAMBURGER DARIMANA ITU BERASAL?

Gambar
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

Lanjutan cara membuat sidenav blog murni CSS dengan hamburger menu beranimasi

Gambar
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

Cara membuat Sidenav menu blogger murni CSS beranimasi

Gambar
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:

Cara membuat Navbar responsif murni CSS dengan multi menu dropdown untuk blogger

Gambar
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

Cara membuat navigasi blog murni CSS dengan hamburger menu beranimasi

Gambar
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

Cara membuat hamburger menu dan dan dropdown menu murni CSS

Gambar
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

Cara membuat menu blog super keren dengan animasi

Gambar
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

Cara membuat menu navigasi blog minimalis dan lengkap dengan CSS

Gambar
T rik ini dapat diterapkan pada template bawaan sederhana yang lebih lama jika Anda tidak ingin membuat menu navigasi dengan memanfaatkan widget halaman yang monoton. Sudah barang tentu jelas sekali template blog harus di modifikasi agar menjadi lebih simpel, responsif dan mobile, caranya sudah pernah di posting pada blog ini, cuma saya lupa kapan he he he... Saya membuatkan demonya melalui CodePen karena melalui cara ini lebih praktis dan simpel untuk menerapkannya Anda cukup mengkopi dan mempastekan kode kodenya. Perhatikan Demo Codepen yang telah saya buat berikut: See the Pen Navigasi menu sederhana by Sufyan Yaan ( @sufyan-yaan ) on CodePen . Untuk menerapkannya: Klik tombol ' HTML ' lalu copy kode di dalamnya dan pastekan ke bagian HTML di halaman editor HTML blog, biasanya di bagian bawah tag penutup </head> atau di bawah tag < body > Klik tombol ' CSS ' lalu copy kode di dalamnya dan pastekan ke bagian HTML blog, biasanya di atas kode ]]>&

Cara membuat double navigasi menu ala editblogtema

Gambar
Menurut saya ini adalah menu navigasi blog yang terbaik yang dapat di terapkan ke halaman blogspot, templatenya jadi ada rasa Wordpress dan teknik pembuatannya terbilang mudah dan mendasar sekali. Khasiatnya juga telah kami buktikan. Halaman Blog terasa menjadi lebih optimal. Mudah diterapkan ke template template bawaan Blogger dari versi lama hingga template varian terbaru blogspot. Tampilan menu navigasi ala editblogtema Itu juga alasannya mengapa kami menggunakannya sekarang. Kami telah berkali kali merobah tampilan antarmuka halaman blog, dengan tujuan mengoptimalkan halaman ini di halaman website, akhirnya kami menemukan sebuah cara - atau lebih tepatnya trik yang dapat di terapkan dengan mudah ke setiap model template bawaan blogger - blogspot. Yakni menu navigasi yang sedang kami pergunakan sekarang ini. Baiklah saya akan mencobakannya ke template contempo yang sebelumnya: Saya buang headernya Saya buang tombol pencarian bawaanya. Jangan kuatir, Keduanya dapat dilakukan melalui

FUNGSI VITAL NAVBAR DI HALAMAN BLOGGER

Gambar
Manfaat menu navigasi, atau navbar, atau navigasi bagi sebuah halaman website atau blog menurut para pakar diantaranya adalah: Mempercepat Untuk Mendapatkan Sitelink. Dengan memiliki menu navigasi maka blog/web semakin cepat mendapatkan sitelink karena sebagian dari beberapa sitelinknya memang berasal dari menu navigasi. Dinilai Sebagai Web/Blog Profesional.. Mengapa dinilai sebagai profesional ? . Karena kita telah menyusun rapih artikel artikel kita dan telah mengatur sekat antara post 1 dan post lainya serta kita telah mengatur web kita menjadi lebih user friendly karena halaman web/blog telah memiliki fasilitas untuk pengguna menjelajahi blog kita dan dengan mudah mengunggah daya tarik pengunjung. Dinilai Baik dari Google. Dinilai baik oleh google karena kita telah memanjakan visitor dan google tau itu . Maka itu blog dengan menu navigasi yang baik akan mendapatkan nilai lebih. Lebih mengoptimalkan SEO dan mengurangi rasio pentalan (efek bounching). Karena sangat mungkin pengunjung

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 parameter 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