Apa itu Responsive sajian dan bagaimana cara menciptakan sajian responsive sederhana di blogger ?
Pada dasarnya blogger sudah menyediakan widget menu yang mana kalau kita memakai widget sajian tersebut dan lalu mengaktifkan template blogger versi Seluler maka sajian tersebut akan menjadi sebuah menu responsive.
Responsive sajian yakni sebuah sajian navigasi yang ada pada sebuah blog contohnya blog blogger yang mana lebar sajian tersebut akan menyesuaikan ruang di mana sajian tersebut ditampilkan, contohnya blog dilihat pada handphone maka sajian tersebut akan sesuai lebarnya bahkan kadang dengan tampilan berbeda menyerupai sajian pada template Seluler blogger.
Pada tutorial ini saya akan menuliskan sebuah tutorial blogger yaitu bagaimana cara menciptakan menu responsive sederhana di blogger tanpa dropdown sajian / multy level sajian dan bukan floating sajian ya, namun kalau nantinya ingin dijadikan floating menu juga sanggup kok dengan menambahkan aba-aba css atau script untuk menjadikannya sebagai floating menu.
Berikut langkah demi langkah cara menciptakan sajian responsive sederhana di blogger dengan gampang dan cepat :
Sekilas informasi :
Ada, tapi ini agak sulit dan saya juga tidak sanggup menuliskannya secara pas / pasti, caranya yaitu lewat edit HTML Template, yang artinya kita harus menyisipkan aba-aba html dan aba-aba css responsive sajian tersebut pada template yang kita gunakan.
Untuk membuat sajian responsive di blogger dengan cara ini silakan teman menuju ke halaman Template pada Dasbor blogger, sesudah itu Backup / Cadangkan dahulu template yang teman gunakan sebagai jaga - jaga.
Jika proses backup sudah selesai silakan klik tombol Edit HTML yang berada di bawah tampilan template yang teman gunakan.
Cari aba-aba
Selanjutnya pasang aba-aba HTML menu responsive yang sudah saya sediakan di atas pada posisi yang teman inginkan (harus di antara
Sebagai citra saja, bisanya aba-aba html sajian diletakkan tidak jauh dari aba-aba ini
Semoga cara menciptakan sajian responsive sederhana di blogger sanggup dipahami dan ada manfaatnya.
Pada dasarnya blogger sudah menyediakan widget menu yang mana kalau kita memakai widget sajian tersebut dan lalu mengaktifkan template blogger versi Seluler maka sajian tersebut akan menjadi sebuah menu responsive.
Responsive sajian yakni sebuah sajian navigasi yang ada pada sebuah blog contohnya blog blogger yang mana lebar sajian tersebut akan menyesuaikan ruang di mana sajian tersebut ditampilkan, contohnya blog dilihat pada handphone maka sajian tersebut akan sesuai lebarnya bahkan kadang dengan tampilan berbeda menyerupai sajian pada template Seluler blogger.
Pada tutorial ini saya akan menuliskan sebuah tutorial blogger yaitu bagaimana cara menciptakan menu responsive sederhana di blogger tanpa dropdown sajian / multy level sajian dan bukan floating sajian ya, namun kalau nantinya ingin dijadikan floating menu juga sanggup kok dengan menambahkan aba-aba css atau script untuk menjadikannya sebagai floating menu.
Cara Membuat Responsive Menu Sederhana Di Blogger Tanpa Script / jQuery
Ada banyak cara menciptakan menu responsive sederhana di blogger, selain itu ada banyak script / jQuery yang sanggup dipakai untuk menciptakan sajian responsive, namun di sini saya akan menuliskan cara menciptakan sajian responsive sederhana di blogger tanpa script / jQuery, dan mungkin pada kesempatan lain saya akan membahas yang lainnya.Cara Membuat Menu Responsive Sederhana Di Blogger Paling Praktis & Tanpa Resiko
Di sini saya akan memulai dengan menuliskan cara menciptakan sajian responsive sederhana di blogger yang berdasarkan saya paling mudah, yaitu dengan cara memakai ruang widget untuk blog yang sudah disediakan blogger.Berikut langkah demi langkah cara menciptakan sajian responsive sederhana di blogger dengan gampang dan cepat :
- Masuk ke Dasbor blogger
- Klik / buka halaman Tata Letak blogger
- Klik Tambahkan Gadget / Add A Gadget
- Pilih Gadget HTML/JavaScript pada posisi di mana teman ingin menampilkan sajian tersebut (pada umumnya pada widget lebar yang berada di bawah header)
- Masukkan aba-aba html dan css menu responsive yang sudah saya sediakan pada potongan Konten / Content
- Klik Simpan / Save
Sekilas informasi :
- Setiap template blogger mempunyai struktur tata letak widget yang berbeda - beda, sebagian template blogger mungkin tidak menyediakan ruang widget / gadget lebar di bawah header, yang mungkin ini disebabkan template tersebut sudah menyediakan sajian navigasi yang harus kita edit lewat Edit HTML Template.
- Apabila teman sudah memakai template blogger yang responsive mungkin tidak memerlukan responsive sajian sederhana ini lagi, lantaran pada umumnya template blogger yang beredar sudah tersedia sajian responsive juga, yang harus dilakukan hanya mengedit sajian yang sudah disediakan itu saja.
Kode CSS menu responsive sederhana
<!--- Kode CSS Menu Responsive Sederhana ---> <style type="text/css"> body{font-family:"Roboto",sans-serif!important;font-size: 100%;margin:0px;padding:0px;} /*Navmenu*/ #nav { background:#252525; } #nav ul { margin:0; padding:0; } #nav li { list-style:none; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; margin:0; padding:0; } #nav li a { display:block; text-decoration:none; color:white; padding:1em; } #nav li a:hover { color:white; background:#191919; } .show-menu { background: #71a4fa; text-decoration: none; color: #fff; text-align: left; padding: 10px 5px; display: none; } .show-menu b{ font-size:30px; } .show-menu span{ margin-right: 1em; float:right; } #nav input[type=checkbox]{ display: none; } #nav input[type=checkbox]:checked #menus { display: block; } /*css-styles-responsive*/ @media screen and (max-width:768px){ #nav ul { position: static; display: none; } #nav li { border-bottom: 1px solid #333; } #nav ul li, #nav li a { width: 100%; } #nav li a{ display:block; height:auto;line-height:normal; } #nav li a { text-align:left; } .show-menu { display:block!important; line-height:30px; } .show-menu:hover { cursor:pointer; } label { margin:0!important; } } </style>Kode HTML menu responsive sederhana
<!--- Kode HTML Menu Responsive Sederhana ---> <nav id='nav'> <label class='show-menu' for='show-menu'><b>☰</b> <span>Show Menu</span></label> <input autocomplete='off' id='show-menu' role='button' type='checkbox'/> <ul id='menus'> <li><a href='/'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Archive</a></li> <li><a href='#'>Comments</a></li> </ul> </nav>- Pada aba-aba HTML menu responsive sederhana di atas terdapat aba-aba #, silakan ganti aba-aba # tersebut dengan tautan / url yang teman inginkan.
- Pada aba-aba sajian juga terdapat goresan pena About, Archiv, dan Comments, silakan ganti goresan pena tersebut dengan nama sajian yang teman inginkan
- Satu aba-aba sajian akan diawali dengan aba-aba
<li>dan di akhiri dengan aba-aba</li>atau menyerupai ini<li><a href='#'>Nama Menu</a></li>, jadi apabila teman ingin menambahkan lagi sajian tersebut maka caranya yakni menambahkan aba-aba<li><a href='#'>Nama Menu</a></li>sebelum aba-aba</ul>(intinya harus berada di antara aba-aba<ul>dan</ul>)
Alternatif Cara Membuat Menu Responsive Sederhana Di Blogger
Adakah cara lain yang sanggup dilakukan untuk menciptakan menu responsive sederhana di atas ?Ada, tapi ini agak sulit dan saya juga tidak sanggup menuliskannya secara pas / pasti, caranya yaitu lewat edit HTML Template, yang artinya kita harus menyisipkan aba-aba html dan aba-aba css responsive sajian tersebut pada template yang kita gunakan.
Untuk membuat sajian responsive di blogger dengan cara ini silakan teman menuju ke halaman Template pada Dasbor blogger, sesudah itu Backup / Cadangkan dahulu template yang teman gunakan sebagai jaga - jaga.
Jika proses backup sudah selesai silakan klik tombol Edit HTML yang berada di bawah tampilan template yang teman gunakan.
Cari aba-aba
</head> lalu letakkan seluruh aba-aba CSS resvosive sajian yang sudah saya sediakan di atas sempurna di atas aba-aba </head>, atau pada posisi lain juga boleh.Selanjutnya pasang aba-aba HTML menu responsive yang sudah saya sediakan di atas pada posisi yang teman inginkan (harus di antara
<body> dan </body>), untuk posisi yang pasnya saya tidak sanggup memberi tahu secara pasti, lantaran setiap template blogger mempunyai struktur yang berbeda - beda.Sebagai citra saja, bisanya aba-aba html sajian diletakkan tidak jauh dari aba-aba ini
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Judul Blog (Header)' type='Header'> ............................................................. </b:widget> </b:section>Semoga cara menciptakan sajian responsive sederhana di blogger sanggup dipahami dan ada manfaatnya.
