,Sejarah jam gadang, danau singkarak, danau maninjau, hotel, tujuan wisata sumatera barat,daftar,jam gadang, fort de kock,West Sumatra, Sumatera Barat, Tourism

How To Install Jquery Image Protector on Blogspot

Posted By admin Sunday, March 27, 2011

Hotlinking or often called inline linking, leeching, piggy-backing, direct linking, offsite image grabs, bandwidth theft is a way of taking pictures of a site to then be displayed again on other sites using the links and the same image file. Simply put, someone else took the pictures from our site directly using the links from the same hosting without uploading again. This is detrimental to the tenant hosting because they will lose a lot of bandwidth even over quota while the tenant pays is hosting. While the hosting providers can not do anything on them the hotlingking.

Why you should protect your image? could be because they want to maintain the authenticity of the source, if we are the owner or the image maker. Keeping images from digital image processing the hands of ignorant, if the picture is the result of his own or a family photo shoot. Avoid hotlinking which could result in personal hosting we lost a lot of bandwidth. Hotlinking is very detrimental for bloggers who use their own hosting, for blogspot users do not be afraid to hotlinking.

jQuery Image Protector installed on Blogger
Step 1
Login to Blogger
Step 2
Go to "Design - Edit HTML"
Step 3
Find the code below:

</ Head>

Step 4
Enter (copy and paste) the code below the above code in step 3:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.protectImage = function (settings) {
settings = jQuery.extend ({
image: 'http://lh3.ggpht.com/_xcD4JK_dIjU/TQukGToihnI/AAAAAAAAEqo/58_UsBfwHdo/s800/blank.gif',
zIndex: 10
}, Settings);
this.each return (function () {
var position = $ (this). position ();
var height = $ (this). height ();
var width = $ (this). width ();
$ ('<img />'). Attr ({
width: width,
height: height,
src: settings.image
}). Css ({
top: position.top,
left: position.left,
position: 'absolute',
zIndex: settings.zIndex
}). AppendTo ('body')
$ (Window). Bind ('load', function () {
$ ('Img.protect'). ProtectImage (). Parents ('a'). RemoveAttr ('href');
</ Script>

Step 5
Save the template and read the next steps ...

Insert jQuery code in the image Image Protector
After the plugin jQuery Image Protector be integrated with the template, then the next step to install the code protector on the image to be protected.
Step 6
Upload a picture in the article or on your blog and Transfer mode to editor mode "Edit HTML"
Step 7
Paste the code below:

class = "protect"

In the image code as below:

<img src="1.jpg"/>

Thus becomes:

<img class="protect" src="1.jpg"/>

For example:
Before you insert the code:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="1.jpg">
<Img style = "display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; cursor: hand; width: 400px; height: 222px;" src = "http://myimage.jpg "border =" 0 "alt =" "id =" BLOGGER_PHOTO_ID_XXX "/>
</ A>

Once inserted the code:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="1.jpg">
<Img class = "protect" style = "display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; cursor: hand; width: 400px; height: 222px;" src = "http:// myimage.jpg "border =" 0 "alt =" "id =" BLOGGER_PHOTO_ID_XXX "/>
</ A>

Step 8
Publish your articles and please check with right click "View Image", right click "Save Image as ..." or click the image and drag in new tab

Related Post

Follow by Email