CARA MEMASANG MENU NAVIGASI BLOGGER MURNI CSS

AvatarOleh:
Menu ini cukup keren, dan ia hanya terdiri dari pengaturan CSS, tidak ada Javascript. Tanpa Javascript berarti ringan. Artinya ringan dan responsif. Menu open hamburgernya juga beranimasi. Saat di sentuh dan di klik akan berubah menjadi menu tutup (silang). Jadi tampak lebih intuitif, lebih hidup dan tidak monoton.

Saya merekomendasikan menu navigasi ini jika Kalian menginginkan menu navigasi yang beda, silahkan memasangnya. Bayangkan sebuah menu sederhana namun tampak premium Judul blog, menu dan tombol pencarian dalam satu batang bar, benar benar menghemat ruang.

Navigasi menu CSS responsif blogger
Bayangkan dengan menggunakan ini sebagai menu navigasi pada halaman blogger default (bawaan) pengunjung tidak mengenali template kalian lagi. Karena template blog tersebut akan jadi tampak premium: 

Lihat DEMO

Jadi setelah melihat demonya dapat di ambil kesimpulan: 
  1. Menu hamburger beranimasi
  2. Navbar menunya posisi 'fixed'
Keuntungan menggunakannya:
  1. Murni CSS sehingga ringan
  2. Mudah di pasang pada template varian terbaru layout versi ke tiga
Tampilan mobile: Bagi kalian yang kebetulan blogging pakai laptop, lihat tampilan 'live' mobilenya dibawah berikut dan klik hamburger menu (garis bersusun dua) untuk melihat menu:



Bagaimana keren, gak? Saya telah membuatnya berhari hari untuk memanipulasi CSS guna membuat dan memaksimalkan kecepatan dan membuat tampilan kerennya, silahkan di pergunakan jika minat.

Cara membuatnya:

1. Melalui dasbor pengaturan blogger
  1. Masuk kepngaturan blogger
  2. Pilih menu
  3. Pilih Edit HTML

2. Pasang CSS.

Pasang pengaturan CSS berikut di atas tag kode </head>:

<style>body { margin: 0; font-family: Helvetica, sans-serif; font-size:14px; background-color: #ffff; } a { color: #000; } /* header */ .header { background-color: #fff; box-shadow: 1px 1px 2px 0 transparent; position: fixed; width: 100%; z-index: 999; margin-bottom: 95px; } .header ul { margin: 0; padding: 0; list-style: none; overflow: hidden; background-color: #fff; } .header li a { display: block; padding: 20px 10px; border-right: 1px solid #f4f4f4; text-decoration: none; } .header li a:hover, .header .menu-btn:hover { background-color: #f4f4f4; } .header .logo { display: block; float: left; font-size: 2em; padding: 9px 9px; text-decoration: none; } /* menu */ .header .menu { clear: both; max-height: 0; transition: max-height .2s ease-out; } /* menu icon */ .header .menu-icon { cursor: pointer; display: inline-block; float: right; padding: 25px 25px; position: relative; user-select: none; } .header .menu-icon .navicon { background: #333; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px; } .header .menu-icon .navicon:before, .header .menu-icon .navicon:after { background: #333; content: &#39;&#39;; display: block; height: 100%; position: relative; transition: all .2s ease-out; width: auto; } .header .menu-icon .navicon:before { top: 15; } .header .menu-icon .navicon:after { top: 7.5px; } /* menu btn */ .header .menu-btn { display: none; } .header .menu-btn:checked ~ .menu { max-height: 340px; } .header .menu-btn:checked ~ .menu-icon .navicon { background: transparent; } .header .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); } .header .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg); } .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0; } /* 48em = 800px */ @media (min-width: 48em) { .header li { float: left; } .header li a { padding: 13px 10px; } .header .menu { clear: none; float: right; max-height: none; } .header .menu-icon { display: none; } } #nbc-searchexpandbox1 {background:transparent; padding:5px;hover:red; } #nbc-searchexpandsubmit1 { border:5px solid transparent; background: transparent; padding:5px; color:#333; font:14px verdana; z-index:999; } #nbc-searchexpandinput1 { -moz-border-radius: 0px; -khtml-border-radius: 0px; -webkit-border-radius: 0px; border:5px solid #ddd; background:#fff; padding:1px; color:#ddd; font:14px verdana; transition: width 2s; -webkit-transition: width 2s; /* Safari */ -o-transition: width 2s; /* Opera*/ -moz-transition: width 2s; /* firefox*/ width:45px; } #nbc-searchexpandinput1:hover { width:240px; } #search { margin-top: -11px; background-color: #fff; z-index:999; } .fa-search { color: #555; }
</style>


Catatan: Jika ingin merobah warna latar silahakan ganti kode warnanya:

.header {
  background-color: #fff;

Robah saja #fff; (warna latar putih dengan warna pavorite kalian, misalnya tusils saja red, blue dst.


3. Pasang HTML

Selanjutnya pasang kode HTML berikut dan letakan di bawah kode </head>:
<header class='header'> <a class='logo' href='/'><img scr='https://1.bp.blogspot.com/-GeG6M5macpw/YCdlprrhEEI/AAAAAAAAHNs/-nT4IqW81-o5JZnYV9ZgQgDuTV43q_7NQCLcBGAsYHQ/s103/20210213_123311.png'/><data:blog.title/></a> <input class='menu-btn' id='menu-btn' type='checkbox'/> <label class='menu-icon' for='menu-btn'><span class='navicon'/></label> <ul class='menu'> <li><a href='#work'>Perihal</a></li> <li><a href='#about'>Privasi</a></li> <li><a href='#careers'>Blog</a></li> <li><a href='#contact'>Kontak</a></li> <li><a href='#' id='search'><div id='nbc-searchexpand1'> <form action='/search/max-results=8' id='nbc-searchexpandbox1' method='get'> <input id='nbc-searchexpandinput1' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this site...&quot;;}' onfocus='if (this.value == &quot;Cari...&quot;) {this.value = &quot;&quot;}' type='text' value='Cari...'/> </form> </div></a></li>
</ul></header>
Untuk menambah menu tinggal kopi paste saja format menu yang telah ada dan pastekan ke bawahnya, contoh:

<li><a href='#perihal'>Perihal</a></li>
<li><a href='#privasi'>Privasi</a></li>
<li><a href='#blog'>Blog</a></li>

Copy kode warna merah dan pastekan ke bawah menu lainnya, lalu robah judul menu dan tambahkan URL atau link sesuai dengan judul menu

Tentu saja Kalian bisa memasang menu navigasi menggunakan bootstrap. akan tetapi itu sangat merugikan kecepatan. Silahkan periksa di Web Core Vitals di Google Webmaster. Mengapa itu terjadi tidak lain adalah karena kita harus memasang link eksternal ke librari online pada saat menggunakan materialnya.

Catatan:

Jika menggunakan batang navigasi ini (navbar) mungkin kalian harus menyembunyikan widget header karena ia akan tampak tertimpa. Tapi jangan kuatir hal ini tidak akan mempengaruhi nilai heading h1 halaman blog. Atau jadikan ukuran font Judul blog bawaan hanya tinggal 1px; saja. Biarkan ia berada di balik navbar tersebut.

Perhatikan hasil pengujian Nibbler berikut di bawah. Nilai 10 (10.0) adalah nilai tertinggi.

  Server behaviour10.0

Yes404 page

YesCompression

  • This website handles missing pages correctly by sending a 404 HTTP status code.
  • This website was served with GZIP encoding. This is very good because it reduces the loading time of a web page.
  • This website follows the best practice of using a permanent (HTTP 301) redirect from http://www.adelinasite.blogspot.com to http://adelinasite.blogspot.com. This is ideal.

   Headings10.0  



       Mobile10.0

    Mobile screenshot of adelinasite.blogspot.comTablet screenshot of adelinasite.blogspot.com
    • All of this website appears to be optimised for viewing on a mobile phone or a tablet.
    Sumber Artikel telah di tayangkan di : 

    https://www.editblogtema.com/2021/04/cara-memasang-menu-navigasi-blogger.html

    Blog tutorial editblogtema.

    0 Response to "CARA MEMASANG MENU NAVIGASI BLOGGER MURNI CSS"

    Post a Comment

    Labels

    Abadi account action addicted adobe photoshop fix adobe photoshop mix adobe photoshop touch adsense agama AI akal alam Albert Einstein alexander the great. Allien Amerika AMP anak Androd android angkasa angkasa luar animal animal planet animasi antithieft aplikasi hebat Appe apple Apple Face ID Artifical Intelligent artificial inteligent artikel artis asesories asus atheis autoCAD autodidact awas Ayu Ting Ting badai bahasa bahasa. bakteri bank btn batam BBM beginning benar bencana berbagi berita berjalan berlari bijaksana bing bisnis kecil black hole Blackberry blackberry Messenger blog blogger blogger logo blogger moblie blogging bluetooth keyboard bluetooth mouse bocor bot BPJS btn mobile buku bully buruh burung langka business camera cat cellphone ceramah cerita charles Darwin chat China cinta classic Cloud cloud drive contempo contempohybrid coolest covid 19 CSS curhat custom ROM cybercrime Darwin dasbor Deep mind Demo desain Design dewa dilema docomo dollar amerika download DPR RI drama Drive DSLR dunia earn money editblogtema Education ekonomi Email emas endorse enggang English entertainment error essential etika evolusi Facebook fakta fanpage favicon feature fiksi fiksi sains filem filsafat finansial fisika flashdisk Florence Nightingle Florida food. forbes freckles Free friendship fun futuristik G+ Gadget Gagdet Galaxy Mega 6.3 Galaxy note 10.1 2014 edition gambir serawak game gaya hidup genetika Genius GENOM girl global gojek gold Google google adsense Google Rewards Opinion google%20drive google+ grafis Hack hacker handphone hantu hapeseken hari tua harimau harun yahya harvey heart secret hebat help me hewan hiburan hoax Hobit. hollywood horor HTML http://justdelete.me Huawei P20 pro hubungan hujatan hukum human humanbeing humor Hutan Lindung ICBM iis sugianto ilmuwan immortality impian Indosat infinity war iniJawabannya! insiden insipirasi intelligent Internasional internet invansion investment iOS iOS 11 iOS 8 iPad iPad Air ipad pro iphone iPhone 6 iPhone Case iPhone X iPhone Xs iphone. iPhoneX islam Israel isu sara jailbreak Jaime Sanjuan Ocabo Jalan Tikus janji Javascript Jenius Jerusalem jitu Job Jokowi Jokowi aja bekerja keras jokowi aja kreatif Jonru Ginting judi kamera kamera hape kantor Kaskus keabadian keadilan keamanan Kebenaran kecanduan kecantikan kecelakaan kecerdasan buatan kehidupan keluarga kemajuan kemanan kemiskinan kemudahan hidup kenyamanan kertas keruntuhan kesetiaan keyakinan keyboard external PC keyboard fisik tablet keyboard fisik tambahan keywords khairil anwar khotbah kiamat kisah klasik kode koding koes plus komedi komputer Konsipirasi konten kotak pandora kreatif kriminal krisis kristen kucing kuyang lagu lampung lapangan kerja laptop leisure Lenovo Life lifehack lingkungan listrik logika logitech LOGO loneliness Lotgitech lowongan luar lucu MacBook madonna magis make up malam minggu Malaysia manipulatif manusia masa depan masa lalu mati tertawa media medis medsos membela diri mencari uang menggambar mengintip rahasia menu navigasi menulis meretas Messenger Micorosft Office Microsoft microsoft office microsoft%20office milk lover miras mitos mobile modal motivasi motivation motivation. movie Muhammad murai batu musik myths naluri NASA navigasi blogspot template network new news ngeblog Nokia X notable nuklir nyanyian nyata obat kuat Office office%20365 old time job online operating system oppo organisme original Otodidak pademi paginator pahlawan pamali Pandora panduan paradox password PC pegawai negeri pekerja pekerjaan pemrograman pemula pencipta pendidikan pengarang penghasilan pension pensiun penulis perang perbankan perekamLayar perkawinan phablet phising PHK phone phone camera photographi phtography pilihan hidup pilosofi Play Store politik ponsel postingan potografer powered by blogger prabowo subianto prediksi teknologi premium pria pribadi prilaku privasi produktivitas programming promosi prostitusi psikologi Puasa publisher Puisi qoute Raffi Ahmad rahasia ramadhan rano karno rasialis relativitas reliji remaja renungan responsive review rhoma irama riba Robot ROM. stock ROM ruang waktu rumah sakit Rusia Safir screen sahabat sains salah Samsung samsung galaxy foldable Samsung Galaxy note 2014 Samsung S8 samsung tabS2 screenRecorder scy-fi SECRET secrets sejarah seken selebritis medsos self learning self-confident semesta sentinel SEO simalangkama simple singularity smarphone smartohone smartphone Smartwatch social song sony sosial spam spoiler Spy Stephen Hawking steve job strategi streaming struktur success sukses suku terasing supernatural tablet tablet 7" TabletAndroid takhyul taktik tantangan target technic Technology teknik teknologi teknologi hoax telkomsel tema template tenaga kerja teori terbaik theme thomas alpha edison tiktok Time traveller tips toko online Tokoh tourism town tragedi tricks trik triks troubleshooting Tutorial Tutorial. tweeter twiteer uang UFO ultrabook unggas langka United States universe usaha video viral virtual vivo waktu website widget Windows 8 Windows PC wisata women WORDPRESS xiomi xml xperia Yahoo yahudi youtber youtube

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel