Cara membuat Responsive Image untuk Blogger Template Blogspot

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Responsive Image Tricks For Blogger | Artikel ini adalah tips tentang cara mengubah semua gambar yang ada di blog menjadi responsive. Karena, pada beberapa template blog responsive sendiri terkadang image/gambar sering belum ikut tersentuh responsive desain. Apalagi template yang tidak responsive, sudah pasti itu.

Sehingga, gampar pendukung postingan yang ditampilkan pada gadget seperti Tab, Handphone, atau lainnya, sering terpotong atau tidak terlihat semua. Dan jelas hal ini sangat menggangu tampilan. Untuk itu, kita perlu sedikit memodifikasi template dengan melakukan beberapa editing code HTML pada blog.

Kita langsung saja ke pembahasan inti

Pertama, login blogger terus edit HTML.

Lalu cari kode :

]]></b:skin>

Dan tambahkan kode css dibawah ini diatasnya:

img {

display: block;

max-width:100%;

height:auto;

width:auto\9;}

Setelah itu cari kode:

</head>

dan tambahkan javascript dibawah ini diatas kode tersebut:

<script type='text/javascript'>

      /*<![CDATA[*/

    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>

setelah itu cari kode

</body>

dan tambahkan script dibawah ini di atasnya (ini digunakan untuk mengatasi terjadinya fallback jika javascript tidak support di peramban)

<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>

Demikian Cara membuat Responsive Image untuk Blogger Template Blogspot. Terimakasih atas kunjungannya dan semoga bermanfaat. 

Scourse : redaksiexpo2012.blogspot.co.id 
Authors : *2RI$1* TURISWAN

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Authors : *2RI$1* TURISWAN
Terimakasih Anda telah membaca tulisan / artikel di atas tentang :
Judul : Cara membuat Responsive Image untuk Blogger Template Blogspot
Rating : ★★★★★ 5 100% based on 999999 ratings. 10 user reviews.
Ditulis Oleh : Unknown
Semoga informasi mengenai Cara membuat Responsive Image untuk Blogger Template Blogspot bisa memberikan manfaat bagi Anda. Jangan lupa Komentar Anda sangat dibutuhkan, di bawah ini.

Subscribe Untuk Mendapatkan UPDATE Artikel Terbaru!

Enter your email address:

Like This Article :

Share This Article :

Authors : Unknown

Akun Media Sosial :