Cara Membuat Gambar Menjadi Responsive Di Blog

Assalamualaikum sahabat blogger, kali ini saya ingin berbagi tentang tutorial blog yaitu  cara membuat gamabar menjadi responsive di Blog. ah bosen juga ya posting tentang android jadi hari ahad ini (ingat hari ahad ya bukan minggu. minggu kan nama dewa jadi so sahabat saya yang baik hati kita ganti deh nyebutnya hari ini adalah hari ahad bukan hari minggu). sebelumnya ada cerita tentang sahabat saya yang punya tekad dan semngat juang dalam mempelajari dunia web. akhirnya dia belajar untuk pemula dulu yaitu dunia blogging. eh akhirnya dia tanya kenapa ya gambar ini besar pas dibuka di hp gak kecil mengikuti layar dr hp terus saya jawab donk gambar sahabat belum responsive jadi nanti cukup ditambah beberapa kode atau script saja di template sibat.

ok deh bosen juga dengar cerita gue, yang ngetiknya aja bosen apalagi sahabat yang dengerinnya tambah bosen kayaknya cuma ane yakin deh sobat gak bosen donk untuk selalu belajar dan haus terhadap akan ilmu

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 silahkan nikmati hasilnya

Untuk Melihat Responsive pada gambar Sobat perkecil atau perbesar Pada layar browser atau sahabat bisa juga ceknya lewat smartphone sahabat atau tablet. 

Thanks Sahabat

Muhammad Antariksa

Blogger Indonesia sejak 2014, Saat ini masih aktif no main adsense

Share this post