Salam, Pada posting kali ini, ingin saya menunjukkan kepada anda bagaimana cara menampilkan gambar yang berbeza setiap kali titikus anda melalui pada kawasan gambar tersebut. Ini bukanlah sesuatu yang luar biasa, tetapi mungkin ianya berguna jika anda ingin menambahkan fun kepada laman anda. Mungkin juga anda ingin membuat kejutan kepada pelawat anda, sesunguhnya bergantung kepada anda untuk menampilkan gayanya.
Jika anda ingin melihat contoh bagaimana ianya berfungsi, [KLIK DISINI].
Kaedah ini tidak terlalu menyukarkan diri anda, cuma dua langkah perlu dilakukan dalam dua situasi yang berbeza. Anda tidak perlu risau menggunakan peralatan ini, kerana ianya hanya berfungsi pada gambar yang anda tetapkan sahaja, dan tidak bertindak untuk keseluruhan gambar dilaman anda kecuali anda yang menentukan.
Sekarang mari kita lihat bagaimana dua kaedah ini:
Pertama anda harus menambahkan beberapa kod untuk template anda, untuk melakukan itu
Pergi ke bahagian "Layout, kemudian klik" Edit HTML ",
Sekarang cari kod ini, untuk mencari secara pantas anda boleh guna key CTRL+F, sungguh menjimatkan masa anda bukan?
Cari kod,
</ Body> (biasanya berada di bawah).
Salin kod dibawah ini, kemudian tampalkan sebelum atau diatas kod </body> yang saya katakan diatas.
<script type="text/javascript">
//<![CDATA[
function pat_getByClass(c){
ems=new Array();e=document.getElementsByTagName('*');pattern=new RegExp('(^|\\\\s)'+c+'(\\\\s|$)');
for(i=0,j=0;i<e.length;i++)if(pattern.test(e[i].className)){ems[j]=e[i];j++;}
return ems;
};
function ps_flipit(){
var c = pat_getByClass('flipit');
for(i=0;i<c.length;i++){
c[i].firstChild.onmouseover=function(){
this.style.display='none';
this.parentNode.lastChild.style.display='';
};
c[i].lastChild.onmouseout=function(){
this.style.display='none';
this.parentNode.firstChild.style.display='';
};
}
}
ps_flipit();
//]]>
</script>
Sekarang apa yang perlu anda lakukan adalah menyimpan datanya, klik tab save template.
Ini belum bermakna alatan ini telah berfungsi sepenuhnya, sepertinya sumber telah diaktifkan.. saya harap begitu.
Langkah Kedua:
Sekarang dan seterusnya, sementara posting sebarang artikel, bila-bila masa anda ingin menunjukkan kesan ini, baik upload gambar, dan link harus tertanam dengan betul seperti yang penerangan di bawah ini:
Salin kod dibawah. Nasihat saya anda menampalkan untuk sementara kod dibawah ini pada notepad. Ini amat berguna buat anda, dan anda boleh menyimpan notepad tersebut, tanpa perlu kembali kesini, tetapi sesungguh laman ini sentiasa menyambut penuh hormat kedatangan anda. :)
<div class="flipit"><a href="http://FIRST_IMAGE_TARGET_LINK_DISINI" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" style="display: none; "><img alt="" border="0" id="TITLE_PHOTO1" src="http://FIRST_IMAGE_TARGET_LINK_DISINI" style="cursor: pointer;"></a><a href="SECOND_IMAGE_TARGET_LINK_DISINI" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" style=""><img alt="" border="0" id="TITLE_PHOTO2" src="SECOND_IMAGE_TARGET_LINK_DISINI" style="cursor: pointer;"><br>
Anda lihat kod diatas, ada yang saya gunakan tulisan, Biru, Merah dan Hijau. First Image, dari mana-mana laman lain atau anda muat naik gambar tersebut, muat naik secara langsung dari blog juga anda. Biasanya kalau anda muat naik terus dari laman anda, blogspot contohnya, selalunya anda akan lihat file tersebut, contoh yang mungkin anda lihat seperti begini.:
http://2.bp.blogspot.com/_4fVBL4fjrFI/STU4vsTwNmI/AAAAAAAABNs/CbLhZ6lImOQ/s1600-h/Morn.jpg", jadi inilah url image link tersebut, jika itu gambar yang anda mahu guna. Anda boleh tampalkan pada First Image Target Link Disini. JIka anda ingin jadikan untuk yang kedua, tampalkan dibawahnya.
Muat naik gambar yang kedua, salin url image link.
Tetapi harus ingat, anda mesti menampal image link yang sama, bagi gambar pertama, begitu juga dengan gamabr yang kedua.
Sekarang anda lihat pula tulisan berwarna hijau, sebenarnya ini tidak menampakkan perubahan besar, tetapi ada baiknya anda menamakan Id bagi gambar tersebut. mungkin ini boleh digunakan sebagai keyword bagi laman anda.
Seperi contoh url image link yang berikan diatas, anda lihat tulisan yang berwarna oren , s1600. pastikan kesemuanya adalah sama, ianya bertindak selaku saiz gambar, adakalanya anda akan dapati s320.
Setelah siap semuanya, Sekarang anda boleh siarkan posting anda,
Selamat Mencuba dan semoga bergembira.
No comments:
Post a Comment