11/24/16

Cara Membuat Gambar Responsive di Blogger dengan CSS dan Javascript

Halo sobat semua, kali ini saya akan membagikan tutorial Cara Membuat Gambar Responsive di Blogger dengan CSS dan Javascript. Mungkin masalah yang di alami oleh seorang blogger baru adalah setelah  menambahkan gambar ketika di posting ukuran gambarnya melebihi konten, sehingga Sidebar nya tertutup oleh gambar, atau juga ada dari anda mungkin malah mengecilkan ukurannya dengan memilih ukuran small/ medium/ large/ x-large supaya gambarnya tidak melebihi konten.

Hal ini juga pernah saya alami waktu pertama kali  mengenal Dunia Blogging. Tapi tenang anda sekarang bisa membuat foto yang anda masukan menjadi responsive meskipun kebesaran ukurannya, tapi setelah di posting fotonya akan menyesuikan ukurannya dengan sendiri.

Saya disini akan membagikan dua tutorial yang pertama menggunakan Kode CSS dan yang kedua menggunakan Kode Javascript. Mungkin anda bertanya apa sih bedanya menggunakan kode CSS dan Kode Javascript ? terlalu banyak menggunakan kode javascript di blog anda dapat membuat loading blog anda menjadi lama, dan para master-master blogger juga menghindari terlalu banyak menggunakan Kode Javascript, dan mereka lebih memilih menggunakan kode CSS, tapi CSS juga jika terlalu banyak terpasang akan membuat loading blog lama juga. Intinya menggunakan kode Javascript dan CSS sama kayak minum obat aja sama sesuai takarannya. he... he...he.  

Tanpa panjang lebar lagi berikut di bawah ini tutorialnya, silahkan sobat simak baik-baik.

1. Membuat Gambar Responsive dengan menggunakan Kode CSS
  • Pertama anda login dulu ke blogger.
  • Usahakan template anda di backup dulu.
  • Ketiga copy paste kode CSS di bawah ini dan simpan tepat di atas kode ']]></b:skin>'. gunakan (Ctrl + F) untuk memudahkan pencarian.
.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;
}

  • Untuk lebih jelas penyimpanan kodenya silahkan anda lihat gambar di bawah ini.
  • Jika sobat sudah yakin silahkan sobat klik Simpan.

Untuk membuktikannya silahkan anda uplod foto ukuran yang lebar, lalu pilih original, jika foto anda setelah di posting ukurannnya pas dengan konten maka kode yang anda masukan tadi berjalan.

Baca Juga : Cara Membuat Widget Blog Archive Otomatis Menutup dengan Javascript

2. Membuat Gambar Responsive dengan menggunakan Kode Javascript

  • Pertama anda tentunya login dulu ke blog anda.
  • Jangan lupa untuk mem-backup template anda.
  • Copy paste kode javascript dibawah ini dan simpan tepat diatas atau sebelum kode '</body>'. gunakan (Ctrl + F) untuk memudahkan pencarian.
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
  <script type='text/javascript'>
    //<![CDATA[
     $(document).ready(function() {
       $.fn.resizeImage = function() {
       $('.post-body').table_to_div();
         var postWidth = $('.post-body').width();
         var sAttribut = /\/s\B\d{2,4}/;
       
         $('.post-body').find('img').each(function(n, image){
           var thisHeight = $(this).height();
           var thisWidth = $(this).width();
    var thisRatio = thisWidth / thisHeight;
           var newWidth = postWidth;
           var newHeight = Math.round(newWidth / thisRatio); 
           var newDimension;
             if(thisWidth >= thisHeight) {
             newDimension = newWidth  
             }
             else {
             newDimension = newHeight
             };   
           var image = $(image);
           image.removeAttr("width height");
           image.css({
             "margin-left": "0",
             "padding":"0",
             "box-sizing": "border-box",
             "box-shadow": "0 0 0 rgba(0, 0, 0, 0)",
             "width": newWidth + "px",
             }); 
           image.parent().removeAttr("style");
           image.attr({src : image.attr('src').replace( sAttribut,'/' + 's' + newDimension )});
           image.attr('width',newWidth);
           });
        };
$.fn.table_to_div = function() {
    $(this).find('table').each(function(){
    $(this).find('a').unwrap().unwrap();
    $(this).find('.tr-caption').unwrap();
    $(this).replaceWith( $('table').html()
      .replace(/<tbody/gi, "<div class='separator' style='clear: both; text-align: center'")
      .replace(/<tr/gi, "<div style='text-align: center'")
      .replace(/<\/tr>/gi, "</div>")
      .replace(/<td/gi, "<div")
      .replace(/<\/td>/gi, "</div>")
      .replace(/<\/tbody/gi, "<\/div")
     );
  });
};
   $('body').resizeImage();
   $(window).resize(function() {
      $('body').resizeImage();
    });
 });
//]]>
</script>
  • Jika belum yakin kodenya terpasang dengan benar silahkan klik Pratinjau dan jika anda sudah yakin silahkan Simpan.

Untuk membuktikannya sama silahkan anda uplod foto ukuran yang lebar, lalu pilih original, jika foto anda setelah di posting ukurannnya pas dengan konten maka kode yang anda masukan tadi berjalan.
keteranga : kode warna merah di atas jika di blog anda sudah ada maka anda tidak usah mengggunakannya.

Semoga postingan kali ini bisa membantu anda. Jika anda kesulitan silahkan komentar dibawah.

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Silahkan berkomentar sesuai dengan topik.