Cara Zoom Image Untuk Postingan Blogger

6:19:00 PM
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 {
  width100%;
  height: auto;
}

.new {
  width100%!important;
}

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

.separator:before {
  content"\f00e";
  font-family: FontAwesome;
  position: absolute;
  bottom4px;
  right0;
  font-size2em;
  backgroundrgba(255, 255, 255, .6);
  padding10px;
  color#444;
}

.separator.new:before {
  content"\f010";
  font-family: FontAwesome;
  position: absolute;
  bottom4px;
  right0;
  font-size2em;
  backgroundrgba(255, 255, 255, .6);
  padding10px;
  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.

Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Formulir Kontak

Name

Email *

Message *