Cara Membuat Gambar Menjadi Responsive Di Blog

Selamat pagi sobat, mumpung lagi ada waktu luang saya akan membagi sebuah tutorial yaitu Cara Membuat Gambar Menjadi Responsive Di Blog. Mungkin para blogger sudah tidak asing lagi dengann kata Responsive. Sebelum masuk ke tutorial saya jelaskan sedikit apa itu responsive. Responsive yaitu sebuah tampilan yang menyesuaikan layar atau resolusi dari berbagai perangkat atau perangkat yang sedang kita gunakan. Responsive tidak langsung otomatis sob, kita mesti atur dulu panjang atau lebarnya sebuah postingan,header,footer dll.

Berikut Tutorialnya :

• Masuk Ke Dasbor Blog Sobat,
• Klik Menu Template,
• Klik Menu Edit Template,
• Masukan Kode CSS Dibawah Ini Diatas kode </style>

img {
display: block;
max-width:100%;
height:auto;
width:auto\9;}

• Jika sudah tambahkan kode dibawah ini tepat diatas kode </head>

<script>
    var cwResImg = function () {
  var cwBpArry = [1382, 992, 768, 480], //Image breakpoint arrays
      currIndex,
      cwResImgVal = Math.max(screen.width,screen.height),
      hdpi = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1,
      rwdImgId = "rwdimg-"+Math.floor(Math.random()*1000),
      tpl='<img src="{src}" alt="{alt}" title="{title}" id="{rwdImgId}" {attributes}>';

  cwBpArry.push(cwResImgVal);
  cwBpArry.sort(function(a,b){return a-b});

  if(Array.prototype.indexOf){
      currIndex = cwBpArry.indexOf(cwResImgVal) + 1;
  }else{
      for(var i in cwBpArry){
          if(cwBpArry[i] === cwResImgVal){
              currIndex = parseInt(i)+1;
          }
      }        
  }

  cwBpArry[currIndex] = cwBpArry[currIndex] || cwBpArry[currIndex-1];

  var imgWid = Math.max.apply(Math, cwBpArry) <= cwBpArry[currIndex] ? cwBpArry[currIndex-2] : cwBpArry[currIndex];

  return {
      imgWid : imgWid,
      hdpi: hdpi,
      id:rwdImgId,
      rwdImg:function(arg){
          
          var src = arg.src || arguments[0] || '',
              src = src.replace(/\/s\d*\//, '/s'+imgWid * hdpi+'/'), //picasa image size replacing (s340 to device width)
              title = arg.title || arg.alt || arguments[1] || '',
              alt = arg.alt || arg.title || arguments[2] || arguments[1] || '',
              attributes = arg.attr || arguments[3] || '',
              img = tpl.replace('{src}',src).replace('{title}',title).replace('{alt}',alt).replace('{rwdImgId}',rwdImgId).replace('{attributes}',attributes);
              document.write(img)
      }
  };
}()
</script>

• Dan ini tambahan untuk mengatasi fallback kalau browser tidak mendukung java script diatas tadi. Kode dibawah ini taruh tempat diatas </body>

<noscript>
  <img src="http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s720/Webpagetest-IE8-Octopress-Default-waterfall.png" alt="Responsive images test"/>
</noscript>
<script>
  cwResImg.rwdImg("http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png", 'Responsive images text script');

  ---or----

  cwResImg.rwdImg({src:'http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png', alt:'Responsive images text script', title:'Responsive images text script'});
</script>

• Jika sudah, Simpan template dan lihat hasilnya ^_^

Untuk Melihat Responsive pada gambar Sobat perkecil atau perbesar Pada layar browser

Semoga Bermanfaat

^_^

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post