Calipso Test Blog

Sekiranya bolg anda mengemukakan hasil ciptaan anda yang dilindungi oleh hakcipta berdaftar di sertakan di bawah satu skrip untuk digunakan sekiranya anda tidak mahu sebarang imej, gambar atau teks dalam blog anda disalin oleh orang lain.





Contoh skrip adalah seperti berikut. Salin skrip di http://panduanpemblog.blogspot.com/2009/09/halang-orang-copy-gambar-dengan-right.html:

<script language="JavaScript"> <!-- //Disable right mouse click Script //By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive //For full source code, visit http://www.dynamicdrive.com var message="Function Disabled!"; /////////////////////////////////// function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") // --> </script>

Setelah salin log masuk dalam papan pemuka blogger melalui Blogger in Draft.

Pilih Layout dan pilih Page Elements:


Pilih salah satu Add a Gadget:


Dalam window Configure Add a Gadget pilih HTML/JavaScript:


Berikutnya dalam window Configure HTML/JavaScript masukkan skrip di atas dalam ruangan yang disediakan (Title lebih baik dibiarkan kosong):


Imej, gambar teks dan lain-lain yang anda papar dalam blog anda sekarang tidak boleh disalin dengan mouse right click.

Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://panduanpemblog.blogspot.com/.

Salam hormat dari

Atas permintaan dari rakan kita Lana, kita sediakan satu panduan di sini bagaimana caranya untuk membesarkan imej apabila diklik di atasnya. Sila klik gambar berikut sebagai contoh apa yang dimaksudkan:


Sekiranya anda menggunakan fungsi 'Insert Image' blogger di bawah 'Compose' mode untuk memuat naik gambar ke dalam pos blog anda, atau gambar yang digunakan disimpan dalam hos luar yang lain, kod yang diberi adalah lebih kurang seperti berikut:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYxIBSMlqpFpa6OVkeeuVOfrd9beofW91srSvNRTerei7dzA1vjUpy4vo8-Q5GPwDDdjHg5gA5zznBVIV74BZ7HMjpKfpVAL4O3llbZ0clJj08eCgxjFR_M4CX0HL0O3sY8x_X32IBTpJn/s1600-h/aishwarya-rai-politician.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYxIBSMlqpFpa6OVkeeuVOfrd9beofW91srSvNRTerei7dzA1vjUpy4vo8-Q5GPwDDdjHg5gA5zznBVIV74BZ7HMjpKfpVAL4O3llbZ0clJj08eCgxjFR_M4CX0HL0O3sY8x_X32IBTpJn/s320/aishwarya-rai-politician.jpg" /></a>

Untuk menggunakan teknik image magnifier ini sila hapuskan (delete) pautan warna merah dalam contoh di atas. Yang perlu digunakan adalah tag <img ...> sahaja dengan beberapa tambahan class="magnify" data-magnifyby="3" ("4" atau "5" untuk imej yang lebih besar), gantikan 's320' menjadi 's800' seperti berikut:

<img border="0" class="magnify" data-magnifyby="3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYxIBSMlqpFpa6OVkeeuVOfrd9beofW91srSvNRTerei7dzA1vjUpy4vo8-Q5GPwDDdjHg5gA5zznBVIV74BZ7HMjpKfpVAL4O3llbZ0clJj08eCgxjFR_M4CX0HL0O3sY8x_X32IBTpJn/s800/aishwarya-rai-politician.jpg" />

class="magnify" - tag ini MESTI dimasukkan jika tidak magnify tidak akan berfungsi.
data-magnifyby="3" bermaksud gambar akan dibesarkan 3 kali ganda dari saiz asalnya,  boleh dijadikan "1.5", "2", "4" dan seterusnya.
data-magnifyduration="1000" adalah pilihan yang boleh dimasukkan untuk menentukan tempoh selama mana gambar itu dibesarkan dan selepas tempoh yang dinyatkan secara otomatik dia kembali ke saiz asalnya. Nilai "500" untuk tempoh masa setengah (1/2) saat, "1000" untuk 1 saat, "2000" untuk 2 saat dan seterusnya.

Teknik atau hack ini dinamakan 'jQuery Image Magnify' menggunakan 'javascript' yang telah dicipta atau dibangunkan oleh tim dari Dynamicdrive.com. Script boleh juga diperolehi dari laman ini.

Tiga (3) fail javascript yang akan digunakan untuk teknik ini adalah:

1. magnify.cur (memerlukan hos luar)
2. jquery.magnifier.js (juga memerlukan hos luar)
3. satu script yang perlu dimsukkan ke dalam kod template (disertakan di bawah)

Fail-fail di atas memerlukan hos luaran untuk berfungsi jadi anda perlu membuka satu akaun percuma di http://ripway.com/ sebagai hos untuk menyimpan dan mengendalikan kedua-dua fail imej cursor 'magnify.cur' dan script 'jquery.magnifier.js'. Muat naik kedua fail ini dalam ripway.com dan catatkan pautannya. Oleh kerana kita menggunakan akaun percuma (tidak berbayar) sudah tentulah had bandwidth yang diberi adalah sangat minima, anda dinasihatkan membuka akaun sendiri elakkan dari menggunakan pautan milik orang lain untuk menghindarkan sebarang masalah lebihguna bandwidth kemudian nanti. Bandwidth untuk satu blog sendiri dengan akaun percuma adalah lebih dari mencukupi.

Bagaimana cara mendaftar dengan hos ripway.com sila baca panduan Daftar Untuk Akaun Percuma Hos Fail Javascript

Antara laman web yang dikenalpasti menyediakan khidmat hotlink percuma untuk fail javascript  adalah:

• Ripway
• Bosxtr
• Sigmirror
• Weebly

Atau sila maklumkan kami jika ada hos lain yang lebih baik, terjamin dan percuma. Hos percuma selalunya mensyaratkan mesti ada aktiviti dalam tempoh 30 hari untuk mengelakkan fail atau akaun dihapus.

1.  Fail imej Cursor 'magnify.cur'.



2. Fail Script 'jquery.magnifier.js'

/* jQuery Image Magnify script v1.0 * Last updated: July 13th, 2009. This notice must stay intact for usage * Author: Dynamic Drive at http://www.dynamicdrive.com/ * Visit http://www.dynamicdrive.com/ for full source code */ jQuery.noConflict() jQuery.imageMagnifier={ dsettings: { magnifyby: 3, //default increase factor of enlarged image duration: 500, //default duration of animation, in millisec imgopacity: 0.2 //opacify of original image when enlarged image overlays it }, cursorcss: 'url(alamat-pautan-hos), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image zIndexcounter: 100, imgshells: [], refreshoffsets:function($window, $target, warpshell){ var $offsets=$target.offset() var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()} warpshell.attrs.x=$offsets.left //update x position of original image relative to page warpshell.attrs.y=$offsets.top warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2 warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2 if (warpshell.newattrs.x winattrs.x+winattrs.w){//no space to the right? warpshell.newattrs.x=winattrs.x+5 } if (warpshell.newattrs.y

cursorcss: 'url(alamat-pautan-hos), -moz-zoom-in', //Value for CSS's 'cursor'

cursorcss: 'url( http://h1.ripway.com/ibnunurdin/magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor'

3. Script yang perlu dimasukkan ke dalam template blog anda.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> </script> <script src="pautan-hos-jquery-script" type="text/javascript"> /*********************************************** * jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script>

<script src="pautan-hos-jquery-script" type="text/javascript">

<script src=" http://h1.ripway.com/ibnunurdin/jquery.magnifier.js" type="text/javascript">

Diharap penjelasan diatas boleh dan mudah difahami sebagai panduan.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://panduanpemblog.blogspot.com/

Sekiranya blog anda adalah blog yang banyak menyiarkan gambar-gambar atau imej-imej, membuka gambar-gambar dengan teknik lightbox image viewer ini amat sesuai untuk menjimatkan ruangan.

Tunggu sehingga blog selesai loading sepenuhnya klik pada gambar thumbnail berikut:





Gambar-gambar asal yang besar boleh dijadikan berukuran kecil saiz thumbnail untuk disimpan dalam komputer anda dan untuk dipaparkan dalam blog pos sebagai pautan kepada gambar-gambar asal yang berukuran lebih besar. Sila ikut panduan Menjadikan Gambar Berukuran Thumbnail Online.

Cara membuatnya:

1. Lima (5) buah fail yang digunakan adalah Overlay.png, Loading.gif, Close.gif untuk fail imej, Lightbox.css untuk CSS dan Lightbox.js adalah fail Javascript seperti berikut:

#lightbox{ background-color:#eee; padding: 10px; border-bottom: 2px solid #666; border-right: 2px solid #666; } #lightboxDetails{ font-size: 0.8em; padding-top: 0.4em; } #lightboxCaption{ float: left; } #keyboardMsg{ float: right; } #closeButton{ top: 5px; right: 5px; } #lightbox img{ border: none; clear: both;} #overlay img{ border: none; } #overlay{ background-image: url(overlay.png); } * html #overlay{ background-color: #333; back\ground-color: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale"); }

/* Lightbox JS: Fullsize Image Overlays by Lokesh Dhakar - http://www.huddletogether.com For more information on this script, visit: http://huddletogether.com/projects/lightbox/ Script featured on Dynamic Drive code library Jan 24th, 06': http://www.dynamicdrive.com Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ (basically, do anything you want, just leave my name and link) Table of Contents ----------------- Configuration Functions - getPageScroll() - getPageSize() - pause() - getKey() - listenKey() - showLightbox() - hideLightbox() - initLightbox() - addLoadEvent() Function Calls - addLoadEvent(initLightbox) */ // // Configuration // // If you would like to use a custom loading image or close button reference them in the next two lines. var loadingImage = 'loading.gif'; var closeButton = 'close.gif'; // // getPageScroll() // Returns array with x,y page scroll values. // Core code from - quirksmode.org // function getPageScroll(){ var yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict yScroll = document.documentElement.scrollTop; } else if (document.body) {// all other Explorers yScroll = document.body.scrollTop; } arrayPageScroll = new Array('',yScroll) return arrayPageScroll; } // // getPageSize() // Returns array with page width, height and window width, height // Core code from - quirksmode.org // Edit for Firefox by pHaez // function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) return arrayPageSize; } // // pause(numberMillis) // Pauses code execution for specified time. Uses busy code, not good. // Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602 // function pause(numberMillis) { var now = new Date(); var exitTime = now.getTime() numberMillis; while (true) { now = new Date(); if (now.getTime() > exitTime) return; } } // // getKey(key) // Gets keycode. If 'x' is pressed then it hides the lightbox. // function getKey(e){ if (e == null) { // ie keycode = event.keyCode; } else { // mozilla keycode = e.which; } key = String.fromCharCode(keycode).toLowerCase(); if(key == 'x'){ hideLightbox(); } } // // listenKey() // function listenKey () { document.onkeypress = getKey; } // // showLightbox() // Preloads images. Pleaces new image in lightbox then centers and displays. // function showLightbox(objLink) { // prep objects var objOverlay = document.getElementById('overlay'); var objLightbox = document.getElementById('lightbox'); var objCaption = document.getElementById('lightboxCaption'); var objImage = document.getElementById('lightboxImage'); var objLoadingImage = document.getElementById('loadingImage'); var objLightboxDetails = document.getElementById('lightboxDetails'); var arrayPageSize = getPageSize(); var arrayPageScroll = getPageScroll(); // center loadingImage if it exists if (objLoadingImage) { objLoadingImage.style.top = (arrayPageScroll[1] ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) 'px'); objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) 'px'); objLoadingImage.style.display = 'block'; } // set height of Overlay to take up whole page and show objOverlay.style.height = (arrayPageSize[1] 'px'); objOverlay.style.display = 'block'; // preload image imgPreload = new Image(); imgPreload.onload=function(){ objImage.src = objLink.href; // center lightbox and make sure that the top and left values are not negative // and the image placed outside the viewport var lightboxTop = arrayPageScroll[1] ((arrayPageSize[3] - 35 - imgPreload.height) / 2); var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2); objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop "px"; objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft "px"; objLightboxDetails.style.width = imgPreload.width 'px'; if(objLink.getAttribute('title')){ objCaption.style.display = 'block'; //objCaption.style.width = imgPreload.width 'px'; objCaption.innerHTML = objLink.getAttribute('title'); } else { objCaption.style.display = 'none'; } // A small pause between the image loading and displaying is required with IE, // this prevents the previous image displaying for a short burst causing flicker. if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } if (objLoadingImage) { objLoadingImage.style.display = 'none'; } objLightbox.style.display = 'block'; // After image is loaded, update the overlay height as the new image might have // increased the overall page height. arrayPageSize = getPageSize(); objOverlay.style.height = (arrayPageSize[1] 'px'); // Check for 'x' keypress listenKey(); return false; } imgPreload.src = objLink.href; } // // hideLightbox() // function hideLightbox() { // get objects objOverlay = document.getElementById('overlay'); objLightbox = document.getElementById('lightbox'); // hide lightbox and overlay objOverlay.style.display = 'none'; objLightbox.style.display = 'none'; // disable keypress listener document.onkeypress = ''; } // // initLightbox() // Function runs on window load, going through link tags looking for rel="lightbox". // These links receive onclick events that enable the lightbox display for their targets. // The function also inserts html markup at the top of the page which will be used as a // container for the overlay pattern and the inline image. // function initLightbox() { if (!document.getElementsByTagName){ return; } var anchors = document.getElementsByTagName("a"); // loop through all anchor tags for (var i=0; i<anchors.length; i ){ var anchor = anchors[i]; if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){ anchor.onclick = function () {showLightbox(this); return false;} } } // the rest of this code inserts html at the top of the page that looks like this: // // <div id="overlay"> // <a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a> // </div> // <div id="lightbox"> // <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image"> // <img id="closeButton" /> // <img id="lightboxImage" /> // </a> // <div id="lightboxDetails"> // <div id="lightboxCaption"></div> // <div id="keyboardMsg"></div> // </div> // </div> var objBody = document.getElementsByTagName("body").item(0); // create overlay div and hardcode some functional styles (aesthetic styles are in CSS file) var objOverlay = document.createElement("div"); objOverlay.setAttribute('id','overlay'); objOverlay.onclick = function () {hideLightbox(); return false;} objOverlay.style.display = 'none'; objOverlay.style.position = 'absolute'; objOverlay.style.top = '0'; objOverlay.style.left = '0'; objOverlay.style.zIndex = '90'; objOverlay.style.width = '100%'; objBody.insertBefore(objOverlay, objBody.firstChild); var arrayPageSize = getPageSize(); var arrayPageScroll = getPageScroll(); // preload and create loader image var imgPreloader = new Image(); // if loader image found, create link to hide lightbox and create loadingimage imgPreloader.onload=function(){ var objLoadingImageLink = document.createElement("a"); objLoadingImageLink.setAttribute('href','#'); objLoadingImageLink.onclick = function () {hideLightbox(); return false;} objOverlay.appendChild(objLoadingImageLink); var objLoadingImage = document.createElement("img"); objLoadingImage.src = loadingImage; objLoadingImage.setAttribute('id','loadingImage'); objLoadingImage.style.position = 'absolute'; objLoadingImage.style.zIndex = '150'; objLoadingImageLink.appendChild(objLoadingImage); imgPreloader.onload=function(){}; // clear onLoad, as IE will flip out w/animated gifs return false; } imgPreloader.src = loadingImage; // create lightbox div, same note about styles as above var objLightbox = document.createElement("div"); objLightbox.setAttribute('id','lightbox'); objLightbox.style.display = 'none'; objLightbox.style.position = 'absolute'; objLightbox.style.zIndex = '100'; objBody.insertBefore(objLightbox, objOverlay.nextSibling); // create link var objLink = document.createElement("a"); objLink.setAttribute('href','#'); objLink.setAttribute('title','Click to close'); objLink.onclick = function () {hideLightbox(); return false;} objLightbox.appendChild(objLink); // preload and create close button image var imgPreloadCloseButton = new Image(); // if close button image found, imgPreloadCloseButton.onload=function(){ var objCloseButton = document.createElement("img"); objCloseButton.src = closeButton; objCloseButton.setAttribute('id','closeButton'); objCloseButton.style.position = 'absolute'; objCloseButton.style.zIndex = '200'; objLink.appendChild(objCloseButton); return false; } imgPreloadCloseButton.src = closeButton; // create image var objImage = document.createElement("img"); objImage.setAttribute('id','lightboxImage'); objLink.appendChild(objImage); // create details div, a container for the caption and keyboard message var objLightboxDetails = document.createElement("div"); objLightboxDetails.setAttribute('id','lightboxDetails'); objLightbox.appendChild(objLightboxDetails); // create caption var objCaption = document.createElement("div"); objCaption.setAttribute('id','lightboxCaption'); objCaption.style.display = 'none'; objLightboxDetails.appendChild(objCaption); // create keyboard message var objKeyboardMsg = document.createElement("div"); objKeyboardMsg.setAttribute('id','keyboardMsg'); objKeyboardMsg.innerHTML = 'press <kbd>x</kbd> to close'; objLightboxDetails.appendChild(objKeyboardMsg); } // // addLoadEvent() // Adds event to window.onload without overwriting currently assigned onload functions. // Function found at Simon Willison's weblog - http://simon.incutio.com/ // function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function'){ window.onload = func; } else { window.onload = function(){ oldonload(); func(); } } } addLoadEvent(initLightbox); // run initLightbox onLoad

var loadingImage = 'http://alamat-URL-Hos/...../loading.gif'; var closeButton = 'http://alamat-URL-Hos/...../close.gif';

2. Hostkan fail-fail Overlay.png, Loading.gif dan Close.gif dalam hos Photobucket, ImageShack atau Flickr. Catatkan alamat URL pautannya.

3. Hoskan fail-fail Lightbox.css dan Lightbox.js dan hos Sigmirror.com atau Ripway.com. Catatkan alamat URL pautannya.

4. Kesemua fail-fail di atas boleh dimuat turun dari laman sesawang Dynamic Drive

5. Di bawah adalah kod untuk perlu di masukkan kedalam kod template blog anda:

<link href="http://Alamat-URL-Hos/...../lightbox.css" media="screen" rel="stylesheet" type="text/css"></link>

<script src="http://Alamat-URL-Hos/...../lightbox.js" type="text/javascript"> </script>

6. Kod untuk gambar-gambar yang akan dimasukkan ke dalam blog pos adalah di mana gambar-gamber berkenaan akan dipaparkan seperti berikut:

<a href="http://Alamat-URL/Gambar-Ukuran-Besar.jpg" rel="lightbox" ><img src="http://Alamat-URL/Gambar-Thumbnail.jpg" /></a>

<a href="http://alamat-URL/Gambar-Ukuran-Besar.jpg" rel="lightbox" title="Keterangan Di Bawah Gambar"><img src="http://Alamat-URL/Gambar-Thumbnail.jpg" /></a>

<a href="http://alamat-URL/Gambar-Ukuran-Besar.jpg" rel="lightbox" title="Keterangan Gambar">Tajuk Gambar</a>

Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://panduanpemblog.blogspot.com/.

Salam hormat dari

Panduan untuk daftar dengan Sigmirror sebagai hos fail javascript.

Berbanding ripway.com, sigmirror menawarkan khidmat muatnaik naik pelbagai jenis fail dengan had maksima 5GB, 10MB had maksima untuk satu fail, 7GB bandwidth. Kandungan pornografi tidak dibenarkan.

Alamat URL ialah - http://www.sigmirror.com/.

Klik Register:


Masukkan maklumat yang dikehendaki:


Jika berjaya daftar skrin berikut akan dibuka. Semak petimasuk email anda kerana satu email akan dihantar kepada anda tanda pengesahan:


Email pengesahan:


Akaun di activate:


Log masuk sigmirror:


Klik upload untuk muat naik fail javascript atau fail lain:


Dapatkan fail dari komputer anda untuk dimuatnaik:


Pautan hotlink kepada fail berkenaan telah disediakan;


Log keluar dari sigmirror:


Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://panduanpemblog.blogspot.com/

Salam hormat dari,