Cara Zoom Image Untuk Postingan Blogger

loading...

Cara Zoom Image Postingan di Blogger - Selamat sore para pecinta blog, mudah-mudahan kabar baik semua. Kemarin saya jalan-jalan ke blog kompiajaib saya menemukan sebuah artikel untuk membuat gambar di postingan dengan efek zoom dan saya terapkan di blog saya, hasilnya memuaskan. Jadi saya buat saja artikelnya mengenai Zoom Image di postingan blogger. Oke langsung saja biar gak lama karena mau malam hari.

Membuat Zoom Image di Postingan Blogger

Oke yang pertama-tama simapan kode CSS dibawah ini tepat di atas kode </head> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/*<![CDATA[*/
.separator img {
  width: 100%;
  height: auto;
}

.new {
  width: 100%!important;
}

.separator {
  width: 50%;
  position: relative;
  transition: all 100ms ease-in-out;
  cursor: pointer;
}

.separator:before {
  content: "\f00e";
  font-family: FontAwesome;
  position: absolute;
  bottom: 4px;
  right: 0;
  font-size: 2em;
  background: rgba(255, 255, 255, .6);
  padding: 10px;
  color: #444;
}

.separator.new:before {
  content: "\f010";
  font-family: FontAwesome;
  position: absolute;
  bottom: 4px;
  right: 0;
  font-size: 2em;
  background: rgba(255, 255, 255, .6);
  padding: 10px;
  color: #444;
}
/*]]>*/
</style>
</b:if>

Kemudian silahkan copy javascript di bawah ini tepat di atas </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function resizeThumbsmall(e){for(var r=document.querySelectorAll(".separator img"),t=0;t<r.length;t++)r[t].src=r[t].src.replace(/\/s200/,"/s"+e),r[t].width=e,r[t].height=e}function resizeThumbmedium(e){for(var r=document.querySelectorAll(".separator img"),t=0;t<r.length;t++)r[t].src=r[t].src.replace(/\/s320/,"/s"+e),r[t].width=e,r[t].height=e}function resizeThumblarge(e){for(var r=document.querySelectorAll(".separator img"),t=0;t<r.length;t++)r[t].src=r[t].src.replace(/\/s400/,"/s"+e),r[t].width=e,r[t].height=e}function resizeThumbextralarge(e){for(varr=document.querySelectorAll(".separator img"),t=0;t<r.length;t++)r[t].src=r[t].src.replace(/\/s640/,"/s"+e),r[t].width=e,r[t].height=e}$(".separator a > img").unwrap(),$(".separator").each(function(){$(this).click(function(){$(this).toggleClass("new")})}),resizeThumbsmall("1600"),resizeThumbmedium("1600"),resizeThumblarge("1600"),resizeThumbextralarge("1600");
//]]>
</script>
</b:if>

Dan satu lagi pastikan di blog sobat harus sudah ada jquery library dan font awesome.

Baca Juga : Membuat Pesan Messenger Facebook di Blog

Nah itu lah cara buat Zoom Image di postingan blogger.