screenshot.6

Hari ini aku nak tunjukkan bagaimana cara untuk kita membuat zoom effect untuk image didalam blog khususnya kepada mereka yang menggunakan platform blogger.Tujuan membuat zoom effect ini adalah kerana image yang akan dizoom itu akan kelihatan lebih menarik dan dapat menyerlahkan lagi penampilan didalam blog anda.Untuk melihat contoh zoom effect untuk image ini berfungsi anda boleh lihat disini

Bagaimana berminat tak untuk membuatnya didalam blog anda.Jika anda rasa berminat sila ikuti langkah-langkah untuk membuatnya dibawah.

langkah 1
Pergi ke layout->Edit Html.Kemudain cari kode ini
</b:skin>

Langkah 2
anda copy semua script dibawah ini dan pastekan di bawah
</b:skin>

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<script language='Javascript' type='text/javascript'>
var cssNode = document.createElement(&#39;link&#39;);
cssNode.type = &#39;text/css&#39;;cssNode.rel = &#39;stylesheet&#39;;
cssNode.href = &#39;http://h1.ripway.com/ane73/lightbox.css&#39;;
cssNode.media = &#39;screen&#39;;
cssNode.title = &#39;using lightbox 2 with GPC&#39;;
document.getElementsByTagName(&quot;head&quot;)
[0].appendChild(cssNode);
</script>

<script src='http://h1.ripway.com/ane73/prototype.js' type='text/javascript'/>

<script src='http://h1.ripway.com/ane73/scriptaculous.js?load=effects,builder' type='text/javascript'/>

<script src='http://h1.ripway.com/ane73/lightbox.js' type='text/javascript'/>
</b:if>

Langkah 3
anda perlu uploadkan image anda itu terlebih dahulu ke hosting yang menyimpan gambar contohnya photobucket.Kemudian anda copy link url image anda dan letakkan di tempat yang aku tandakan dengan warna merah dibawah.

<div style="text-align: center;"><a href="http://linkurlimageanda/" rel="lightbox"><img style="width: 110px; display: inline; height: 110px; margin-left: 0px; margin-right: 0px;" src="http://linkurlimageanda/" align="left" border="0" /></a> </div>

Langkah 4
Setelah siap anda letakkan link untuk image anda itu,anda copy semua kode tadi dan pastekan di posting area anda.Siap dan lihat hasilnya semoga anda berjaya membuatnya.







Reblog this post [with Zemanta]

Post a Comment

Sila tinggalkan komen ada dibawah ini dan yang berkenaan dengan post sahaja dan semua komen akan ditapis dahulu sebelum ditampilkan.