Pentingnya Meta Viewport Untuk Web Responsive

Viewport Brayen ID

Meta viewport, mungkin ini meta yang sedikit asing untuk para blogger yang jarang mengutak-atik meta tag, tetapi walaupun asing meta tag ini tentu sangat vital perannya dalam Web yang ingin tampil responsive.

Kenapa bisa begitu ?
Karena viewport ini meta salah satu fungsinya yang dapat menginstruksikan isi web untuk melakukan penyesuaian pada lebar perangkat yang sedang berjalan. Berikut isinya.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Inti dari meta ini adalah contentnya, jika kita melihat dalam content terdapat properti ;

Width=device-width

Properti ini memiliki perintah supaya elemen  web dapat menyesuaikan diri pada lebar perangkat, sehingga tidak akan terjadi yang namanya overflow atau scroll horizontal saat web terbuka menggunakan perangkat yang lebih kecil.

Don't Use Viewport

Initial-scale=1

Ini menentukan skala awal yang akan terlihat saat pertama kali web terbuka, yang artinya skala web tidak mengalami pembesaran atau 1:1.

Maximum-scale=1

Dengan ini kawan dapat membatasi zooming atau pembesaran pada blog kawan yang dilakukan oleh pengunjung.

Penggabungan Dengan Media Queries

Nah, jika anda sudah menggunakan Meta Viewport maka anda juga dapat menggunakan media queries sebagai penyesuaian elemen-elemennya supaya tidak berantakan pada saat web beradaptasi dengan ukuran perangkat. Untuk penggunaannya, saya sudah menulisnya di artikel berikut.
Diatas sudah saya jelaskan cara penggunaan media queries, jadi silahkan disimak.
Saya kira cukup disini, saya harap bermanfaat sekian dan terima kasih.

Membuat Dropdown Menu Responsive Dengan Effect Float

Menu

Wah panjang sekali ini judul, sebenarnya ini menu lebih menggunakan position Fixed dan bukan float :D, tetapi karena menu ini seperti melayang maka saya menggunakan kata float.

Kebetulan menu ini basicnya saya gak tau dari mana, yang pasti menunya ini saya dapat dari salah satu blog saya lupa namanya, maaf jika ada yang merasa pembuat menu ini bisa mengabarkan saya.
Pada dasarnya menu ini hanya berbentuk sebuah daftar menu (listed/li) yang di inline-block biasa dan posisinya statis yang artinya tidak bergerak. Nah, disini kita akan mencoba membuat menu ini dapat bergerak dalam posisi tertentu, yang artinya posisi awal menu berada bawah header namun setelah kita scroll kebawah dan kita melewati menu otomatis si menu bakal nempel diatas dan gak bakal lepas sampai kamu scroll lagi balik keatas. Silahkan klik link dibawah.


Coba di scroll saja ke bawah dan lihat menu yang dibawah header otomatis mengikuti.

Disini kita akan menggunakan sedikit jQuery, jadi pastikan kamu sudah memasang library jQuery, jika belum kamu bisa taruh kode dibawah ini diatas </head>


<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Namun jika sudah dipasang, abaikan saja.
Selanjutnya kita akan membuat CSSnya dulu. Salin CSS dibawah ini kedalam <style>...</style>
 

.menu {background: #4B304E;border-bottom:1px solid #2B304E;width: 100%;text-align:center;z-index: 9999}
.menu.nempel {position: fixed;top:0}
#menu1 {display: block;margin-top: 0;background: #aaa;}
.menu {display: block}
.menu li {text-align:left;display: inline-block;position: relative;z-index: 100;}
.menu li:first-child {margin-left: 0;}
.menu li a {font-weight: 400;text-decoration: none;padding: 10px 15px;display: block;color: #EC7263;transition: all 0.2s ease-in-out 0s;}
.menu li a:hover,.menu li:hover>a {color: #fff;background: #533557}
.menu ul {visibility: hidden;opacity: 0;margin: 0;padding: 0;width: 150px;position: absolute;left: 0px;background: #fff;box-shadow: 1px 1px 2px rgba(0,0,0,0.4);z-index: 99;transform: translate(0,-10px);transition: all 0.2s ease-out;}
.menu ul li {display: block;float: none;background: none;margin: 0;padding: 0;}
.menu ul li a {font-size: 12px;font-weight: normal;display: block;color: #666;background: #fff;}
.menu ul li a:hover,.menu ul li:hover>a {background: #eee;color:#666;}
.menu li:hover>ul {visibility: visible;opacity: 1;transform: translate(0,0);}
.menu ul ul {left: 149px;top: 0px;visibility: hidden;opacity: 0;transform: translate(0,-10px);transition: all .3s ease-out;}
.menu ul ul:after {left: -6px;top: 10%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(255, 255, 255, 0);border-right-color: #fff;border-width: 6px;margin-top: -6px;}
.menu li>ul ul:hover {visibiity: visible;opacity: 1;transform: translate(0,0);}
.responsive-menu {display: none;width: 100%;padding: 20px 15px;background: #ddd;color: #333;text-transform: uppercase;font-weight: 600;border-bottom: 1px solid #aaa;transition: .3s}
.responsive-menu:hover {background: #eee;color: #333;text-decoration: none;}

Kode yang bertanda merah (.menu.nempel) tidak akan berfungsi sebelum kita menaruhkan jQuerynya. Sebelum kita menaruh jQuerynya, kita taruh dulu HTML berikut.


<nav class='menu1' id='menu1' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
  <a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-bars'/> Menu</a>    
    <ul class='menu'>
      <li><a href='/'>HOME</a></li> 
      <li><a href='http://id-mufcnews.blogspot.co.id/p/blog-page_16.html'>STATIC PAGE</a></li>
      <li><a href='http://id-mufcnews.blogspot.co.id/404'>ERROR 404</a></li>
      <li><a href='#'>HOSTING</a>
        <ul class='sub-menu'>
   <li><a href='#'>250 mb</a></li>
   <li><a href='#'>Bundling</a>
     <ul>
              <li><a href='#'>Website + 1000mb</a></li>
              <li><a href='#'>Website + 1500mb</a></li>
              <li><a href='#'>Website + Unlimited + .com</a></li>
            </ul>
          </li>
       </ul>
     </li>
     <li><a href='#'>OTHER</a>
 <ul class='sub-menu'>
   <li><a href='#'>Contact Us</a></li>
   <li><a href='#'>Affiliate</a></li>
   <li><a href='#'>Job</a></li>
 </ul>
     </li>
   </ul>
</nav> 

Dimana kode diatas ditaruh ? Sebenarnya peletakan beberapa baris kode seperti yang diatas tidaklah mutlak asalkan tetap berada didalam <body>...</body> itu tergantung anda ingin menaruhnya dimana, jika anda ingin menaruhnya diatas header bisa taruh diatas <header>, tapi kalau mau menaruhnya dibawah header bisa ditaruh dibawah </header>, cukup logis bukan ?

Kemudian kita akan menaruh jQuery yang isinya sebagai berikut diatas </body>.


 <script>
  $(window).scroll(function(){
    var jarak=$(this).scrollTop();

  if (jarak > $('.menu1').offset().top -1) {
    $('.menu').addClass('nempel');
  }
  if (jarak < $('.menu1').offset().top -1) {
    $('.menu').removeClass('nempel');
  }
});
$(document).ready(function(){ 
 var touch  = $('#resp-menu');
 var menu  = $('.menu');
 
 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
 
 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
 
});
</script>

Untuk kode yang merah itu berfungsi untuk menambah dan menghapus class, itulah yang akan otomatis menambah class .menu menjadi .menu.nempel, nah diatas tadi kita sudah membuat sebuah class dalam CSS yang berisi .menu.nempel {position:fixed;...} , nah sudah jelas jika sebuah elemen diberi property position dan diberi value fixed otomatis elemen tidak lagi berada/terkurung didalam sebuah container namun dia posisiya lebih fleksibel karena dia sekarang posisinya mengikuti posisi window, kemanapun anda scrolling (kebawah/keatas) elemen tersebut akan ikut, begitu sederhananya. Namun kita sudah memasang sebuah perintah dalam kondisi tertentu dalam baris kode
  if (jarak > $('.menu1').offset().top -1) {
    $('.menu').addClass('nempel');
  }
  if (jarak < $('.menu1').offset().top -1) {
    $('.menu').removeClass('nempel');
  }
Jika kita membacanya secara bahasa manusia isinya bisa berarti
Aku        : jQuery, jika jarak berada lebih dari (melewati) .menu1 (pembungkus menu) maka jalankanlah fungsi berikut
jQuery    : Apa fungsinya ?
Aku        : Tambahkan .nempel pada .menu (menjadi .menu.nempel)
Nah diatas adalah perintah pertama, kemudian kita tambah lagi dibawahnya perintah hilangkan class supaya dia kembali keposisi semula.
Aku : jQuery, jika jarak berada kurang dari (sebelum/diatas) .menu1 hilangkanlah .nempel (menjadi .menu saja)

Sebagai informasi, sebelumnya kita sudah membuat variabel jarak yang berisi "Seberapa jauh jarak kita scroll ke bawah dari atas yang didefinisikan dalam bentuk angka". Sebenarnya kita dapat melihat angka tersebut melalui console log, namun kita tidak penting untuk tau karena yang jalankan fungsi adalah jQuery :D.
$(window).scroll(function(){
    var jarak=$(this).scrollTop();
$(this) sama saja dengan selector yang dimaksud, atau dalam kasus ini $(this)=$(window).

Sebenarnya $('.menu1').offset().top -1 itu menghasilkan sebuah angka (namun kita hanya bisa melihatnya dengan console log), yang artinya seberapa jauh jarak dari atas ke .menu1, karena kita menggunakan offset().top-1 maka artinya menjadi "seberapa jauh jarak dari atas ke .menu1 dikurangi 1". (seandainya jaraknya adalah 300, maka akan dikurangi menjadi 299), saya harap dapat dipahami karena saya bukan expert jQuery jadi mohon dikoreksi jika salah.

Responsive Menu

Untuk kode orange itu adalah kode yang membuat si menu tadi menjadi responsive tepatnya saat ukuran window browser 767px, saat itu dia akan menjalankan #resp-menu dan mengubah menu yang inline-block tadi kedalam sebuah toggle. Toggle itu yang 4 nomor itu loh =D. Dalam jQuery toggle itu fungsinya memunculkan dan menyembunyikan elemen tertentu. Yang artinya menu akan disembunyikan dan akan dimunculkan jika ditekan tombol togglenya.

Selesai, sekali lagi saya juga masih proses belajar jquery ini :D, jadi penjelasan saya masih kelas pemula, jika ada yang salah tolong dikoreksi.
Sekian dan terima kasih.

Saya lupa menu responsive ini menggunakan font awesome, satu aja sih :D tapi dipasang aja font awesomenya gan

Membuat Blog 100% Responsive Dengan Media Queries

CSS

Jaman sekarang kebutuhan akan informasi semakin meningkat, terutama informasi dari media-media online seperti website/blog, tapi apa jadinya jika informasi yang bagus tidak diimbangi media (website/blog) yang mendukung, tentu tidak akan seimbang. Dulu mungkin desain web yang Responsive belumlah menjadi prioritas sebuah web seperti jaman sekarang, karena dulu web lebih diprioritaskan untuk pengguna PC karena dulu mengakses sebuah website menggunakan seluler sangatlah susah karena fiturnya yang terbatas. Namun sekarang hal tersebut tertepiskan, karena pengakses informasi online bukan hanya dari pengguna PC melainkan juga pengguna seluler, bahkan pengakses yang berasal dari seluler melampaui pengakses dari PC, oleh karena itu web yang Responsive sekarang menjadi prioritas.

Namun bagaimanakah kita dapat membuat sebuah blog tampil Responsive ?
Nah ini dia, didalam CSS3 kita dapat menjumpai yang namanya Media Queries, seperti yang saya pahami Media Queries ini bekerja layaknya sebuah tag kondosional namun sedikit berbeda, jika didalam tag kondisional kita mengaturnya dengan perintah kondisi (contohnya "static_page"), jika media queries membuat membuat sebuah CSS bekerja pada saat Window/Browser dalam ukuran (lebar/tinggi) tertentu. Itu menurut saya, mungkin para expert CSS ada tanggapan atau pengertian lain boleh di koreksi.


Oke setelah membahas sedikit tentang apa itu Media Queries, kita berpindah ke cara penerapannya.
Kamu dapat memasukan kode berikut kedalam <style>...</style>. Media Queries ini sudah lengkap sesuai ukuran yang tersedia di responsinator.com .
@media screen and (max-width:1024px) {
CSS
}
@media screen and (max-width:940px) {
CSS
}
@media screen and (max-width:820px) {
CSS
}
@media screen and (max-width:768px) {
CSS
}
@media screen and (max-width:600px) {
CSS
}
@media screen and (max-width:568px) {
CSS
}
@media screen and (max-width:414px){
CSS
}
Lihat max-width diatas, itu memiliki arti "Jalankan perintah ini pada saat lebar window dalam ukuran maksimal berikut", itu secara sederhananya. Misalnya kamu ingin membuat ukuran area artikel blogmu tampil penuh pada ukuran maksimal 414px, kamu bisa memasukan kode berikut.

@media screen and (max-width:414px){
#main-wrapper {width:100%}
}
Nah coba saja kamu kecilkan window browsermu pada ukuran kurang dari 414px maka otomatis ukuran postmu akan penuh dan mengikuti ukuran window browser.
Ingat ! usahakan untuk tidak menggunakan ukuran dengan satuan pixel (px) tetapi gunakanlah ukuran (%) supaya ukurannya dapat menyesuaikan diri secara otomatis.

Kamu dapat melihat contoh dibawah ini untuk cara penggunaan media queries.

@media screen and (max-width:1024px) {
.post-outer {width:23%}
.post-outer:nth-child(4n+4) {margin-right:0}
}
@media screen and (max-width:940px) {
.post-outer {width:45%}
.post-outer:nth-child(4n+4) {margin-right:25px}
}
@media screen and (max-width:820px) {
.post-outer {width:44.3%;margin-left:10px}
.post-outer:nth-child(2n+4) {margin-right:0}
}
@media screen and (max-width:768px) {
.post-outer {width:45.7%;margin-left:15px;margin-right:10px}
.post-outer:nth-child(2n+4) {margin-right:0}
.post-title {padding-top:7px}
}
@media screen and (max-width:600px) {
.post-outer {width:44.3%;margin-left:15px;margin-right:10px}
.post-outer:nth-child(2n+4) {margin-right:0}
}
@media screen and (max-width:568px) {
.post-outer {width:45%;margin-left:10px}
.post-outer:nth-child(2n+2) {margin-right:0}
}
@media screen and (max-width:414px){
.post-outer {width:90%}
.post-outer:nth-child(4n+4) {margin-right:25px}
.post-outer {margin-left:15px}
.navigasi,.navigasi span,.navigasi a{font-size:10px}
.navigasi .pages {display:none}
}

Jika masih ada pertanyaan, boleh tulis dibawah.