Membuat Efek Zoom Gambar Dengan Jquery

Ada banyak cara untuk membuat tampilan gambar di blog kita menjadi lebih menarik, agar tidak standar2 saja :) . Salah satu caranya dengan efek zooming yang akan saya bahas kali ini dengan menggunakan Jquery. Cara kerjanya adalah jika ada seorang pengunjung blog kawan2 melakukan klik (baik itu klik kiri ataupun klik kanan) pada gambar yang ada di blog kita, maka gambar tersebut akan ditampilkan tetap pada halaman tersebut tapi dengan efek membesar dengan lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan dengan efek mengecil dengan lembut. Hal ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali. Seperti contoh, silahkan kawan2 klik gambar dibawah ini :

Langsung kita praktekan step by step nya :


1. Log in ke blogger kawan2.
2. Disini saya preaktekan dengan blogger tampilan baru, klik "setting" lalu "Template".

3. Klik "Edit HTML", pilih "Procced" untuk masuk ke lembar HTML.
4. Ada baiknya untuk backup HTML anda terlebih dahulu.
5. Centang "Expand Widget Templates".
6. Cari kode berikut ]]></b:skin> ,bisa dengan : ctrl + F.
7. Masukan kode dibawah ini, sebelum kode ]]></b:skin> :

div.jquery-image-zoom {

line-height: 0;

font-size: 0;

z-index: 10;

border: 5px solid #fff;

margin: -5px;

-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

}

div.jquery-image-zoom a {

background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;

display: block;

width: 25px;

height: 25px;

position: absolute;

left: -17px;

top: -17px;

/* IE-users are prolly used to close-link in right-hand corner */

*left: auto;

*right: -17px;

text-decoration: none;

text-indent: -100000px;

outline: 0;

z-index: 11;

}

div.jquery-image-zoom a:hover {

background-position: left -25px;

}

div.jquery-image-zoom img,

div.jquery-image-zoom embed,

div.jquery-image-zoom object,

div.jquery-image-zoom div {

width: 100%;

height: 100%;

margin: 0;

}

 
 8. Cari kode berikut </head> ,bisa dengan : ctrl + F.
 9. Masukan kode dibawah ini, diatas kode </head> :

<script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/jquery.min.js'/>

<script type="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/imageZoom.min.js"/>

<script type="text/javascript">

jQuery(document.body).imageZoom();

</script>

 10. Klik "Save Template".

Sekian tips dari saya semoga membantu kawan2.
Selamat berbloging ria.

readmore »»  

Cara Membuat Readmore di Blogger

Karena saya ingin mempunyai blog yang ringkas, maka saya tidak ingin di home terlihat postingan saya memanjang hingga selesai 1 halaman, terihat berantakan, maka saya siasati dengan readmore.

Caranya mudah, jika anda sudah terbiasa "bermain2" dengan HTML yang ada di blogger, langsung saja kita lakukan :

1. Log in ke blogger kawan2.
2. Disini saya prektekan dengan blogger tampilan baru, klik "setting" lalu "Template".

3. Klik "Edit HTML", pilih "Procced" untuk masuk ke lembar HTML.
4. Centang "Expand Widget Templates".
5. Cari kode </head> bisa dengan : ctrl + F.
6. Lalu masukkan code di bawah ini tepat di atas  </head> :

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

7. Kemudian sobat  cari kode <data:post.body/>, Ganti kode <data:post.body/>  dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

</b:if>

 8. Klik "Save Template", maka postingan anda secara otomatis akan diringkas serta tentu saja ada readmore...

Sekian tips dari saya semoga membantu kawan2.

readmore »»