Showing posts with label Images. Show all posts
Showing posts with label Images. Show all posts

September 24, 2010

TinyPic Is Down Forever - Code 010394

*UPDATE: The problem has been solved. See the bottom of this post for Tinypic's explanation on the issue. Now the image links have started working again and you may upload new images too.

Tinypic Image Unavailable CODE 010394Tinypic Image Unavailable CODE 010394: Without a warning, on September 23, 2010 Tinypic has completely stopped its services for all International users (non-US). This not only restrict the users to upload new images to Tinypic, but also to link/use the images that are already uploaded by them.
A few months back, Tinypic stopped new-user sign-ups, but something like this was completely unexpected.
But don't worry, as we do have a temporary & a permanent fix to this problem, keep reading...
Read More

February 2, 2010

Image Zoom [JQZoom] For Blogger Blogs

Here's a creative and innovative way to display large pictures in limited area:
that's JQzoom !



Purpose of this hack:
While the smaller thumbnail image is displayed in your post, the corresponding larger image is displayed inside a floating window only when the reader hovers his/her mouse cursor over the thumbnail-image. The image displaying-style inside the floating-window is exactly like that of a view through a magnifying lens or that of a microscopic view.

To get a clear idea of the hack,
check out the Live Demo... (in a Blogger blog).
And another standalone DEMO

Now follow these instructions to add this hack to your Blogger/BlogSpot blog:
Read More

August 24, 2009

Content Copied or Stolen? - Protect Your Blog !

I asked God for a bike, but I know God doesn't work that way. So I stole a bike and asked for forgiveness.
It does hurt a lot to see our own content on some other blog without a link/attribution to the original author. This is called plagiarism or simply content theft.
The content of a blog is supposed to be shared with others, so there's no point in hiding it. But once you publish an article it is almost impossible to protect the images/content from the content thieves.
The previous article on BloggerStop will help you in protecting your images displayed on your blog (at least your images will be safe from the novice sploggers). Protecting the text/content is not so easy. But we must try our best to resist it.
First of all, you should copyright whatever you publish on your blog. This is not limited to having a copyright symbol on your blog, but you should properly register your blog and blog-posts. For this purpose I found MyFreeCopyRight as the best free copyrighting service. It gives a unique copyright number to you, and registers each and every blog-post you publish (with date and time of publishing).
MyFreeCopyright Logo Image

If the blog, where your content is being copied, is a .Blog*Spot.com (Blogger) blog, then you must report it to the Blogger Team via this page: Report spam blogs to Blogger.

Google has already updated it's algorithm to find the source of articles and to remove duplicate content from its index. So if an article from your blog is copied, then according to Google, in Google search results your blog will still appear above the plagiarized article. But being a computer algorithm exceptions are also possible.

Read these two articles from BlogHerald and VirtualHosting on fighting plagiarism:
1. Reporting Blog Content Thieves
2. 100 Tips to Defeat Content Thieves

And if the sploggers (spam blog authors) are still not responding to you, then give them some free publicity by adding a "non-linked content thieves widget in your blog".

Image credits: PerpTurkey
Read More

Protect Your Images From Being Copied

The usual way of displaying images in a blog post/widget is very easy but these images can be stolen or copied easily too. Even a novice user can simply right click on an image to save it on to his computer, which is eventually passed on to others and finally appears in some other blog, website or magazine.


Most common reasons/ways of stealing images:
1. From Google Image Search
2. By Right Click -> "Save Image As..."
3. By Copying image address from "Page Source"

Methods To Protect Your Images:

Methods you should not use:
1. Watermarks spoil the overall look of the images, so I will not suggest you to use big watermarks over the images, unless you are selling the images from your blog/site (where only a thumbnail of the image is shown with a watermark on it) [Like This One].

2. Disabling right click is one of the 'infamous' methods as the pop-ups doesn't look nice.

Methods You Should Use:
METHOD #1
By using JavaScript encryption you can not only protect your images, but many other html widgets too: Read more about html encryption here.
Because of this encryption, nobody can find your image address from the page source.

METHOD #2
The other famous method to protect you images from getting stolen is to use CSS instead of pure HTML. Although even in this case, images can be easily stolen (by taking screenshots and editing them), but because of the lengthy process most of the content thieves will definitely drop the plan of taking pictures from your blog. This technique will also protect your images from getting indexed and shown in Google image search results.

So instead of using a code like this;
<a href="http://bloggerstop.net"><img src="http://i49.tinypic.com/19p9ad.jpg"/></a>

Use this code:
<div style="background:url(http://i49.tinypic.com/19p9ad.jpg);width:300px;height:200px;">
<img src="http://i49.tinypic.com/ol2tg.png" width="300" height="200"/><span style="float:left;color:white;margin-top:-200px;"> © Your_Blog</span></div>

Try saving the image below (protected by the CSS method):


© Your_Blog

NOTE: Remember to change the width and height attributes according to the image you are using (at four places in the code above). Also the margin-top attribute should be equal to the height of the image.

The above image is immune against these methods:
1. Right click and "Save Image As..." or "View Background Image"; because the original image is being used as a background image (by CSS) and on top of it another TRANSPARENT image is being used [code highlighted in BLUE], so if anyone tries to save this image (or copy the image address) he will be surprised to see a blank image instead of the one he actually wanted.

2. The image will not be indexed by Google, so it will NOT appear in Google Image Search.

But, of course you can get it from the page source. (so read the next method)

METHOD #1 + Method #2 = Best Protection Method
So presently try a combination of the CSS method and HTML encryption described above, to show & protect your images on the web.

So finally, after HTML encryption of the code from METHOD #2, we get this code:
<Script Language='Javascript'>
<!--
document.write(unescape('%3C%63%65%6E%74%65%72%3E%0A%3C%64%69%76%20%73%74%79%6C%65%3D%22%62%61%63%6B%67%72%6F%75%6E%64%3A%75%72%6C%28%68%74%74%70%3A%2F%2F%69%34%39%2E%74%69%6E%79%70%69%63%2E%63%6F%6D%2F%31%39%70%39%61%64%2E%6A%70%67%29%3B%77%69%64%74%68%3A%33%30%30%70%78%3B%68%65%69%67%68%74%3A%32%30%30%70%78%3B%22%3E%0A%3C%69%6D%67%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%69%34%39%2E%74%69%6E%79%70%69%63%2E%63%6F%6D%2F%6F%6C%32%74%67%2E%70%6E%67%22%20%77%69%64%74%68%3D%22%33%30%30%22%20%68%65%69%67%68%74%3D%22%32%30%30%22%2F%3E%0A%3C%73%70%61%6E%20%73%74%79%6C%65%3D%22%66%6C%6F%61%74%3A%20%6C%65%66%74%3B%20%6D%61%72%67%69%6E%2D%74%6F%70%3A%20%2D%32%30%30%70%78%3B%22%3E%20%A9%20%59%6F%75%72%5F%42%6C%6F%67%3C%2F%73%70%61%6E%3E%0A%3C%2F%64%69%76%3E%0A%3C%2F%63%65%6E%74%65%72%3E'));
//-->
</Script>

Now this code has all the benefits of METHOD #2 and moreover the image address is also not visible in the Page Source.

Prevent your images from appearing in Search Engine Image search (or simply Google Image Search):
Use this meta tag in the <head> region of your template:
<meta name="robots" content="noimageindex"></meta>


Finally, read some more tricks to "protect your images" and "why you CANNOT protect your images" !!!

Image credits: OCAL-Coredump
Read More

August 23, 2009

Style Your Images Using Simple CSS


We know that images are necessary for blogs to make the posts attractive. But rather than simply adding images in your blog, you can easily add borders/shadow effects to all the images in your blog.
Here are some examples to dress-up your images:

First of all, what to change?

While linking/embedding images in your posts/articles you use the tag - img, for example:
<a href="http://bloggerstop.net"><img src="http://i40.tinypic.com/mihsgg.jpg"/></a>
So find a code similar to this in your blog's template (Dashboard -> Layout -> Edit HTML):
.post img {
margin: 5px;
...
...
...
padding: 3px;
}

If the code is missing in your blog, then add it yourself before the </head> tag like this:
<style type="text/css">
.post img {
border: 0px;
}
</style>

Now you have to modify the above code, depending on the image-style you want (described below).

1. Single border [EXAMPLE]
<style type="text/css">
.post img {
border: 1px solid red;
}
</style>

2. Single border with hover effect [EXAMPLE]
<style type="text/css">
.post img {
border: 5px solid gray;
}
.post img:hover {
border: 5px solid black;
}
</style>

3. Single border - dotted - Stamp-Style [EXAMPLE]
With Black hover effect
<style type="text/css">
.post img {
border: 3px dotted gray;
}
.post img:hover {
border: 3px dotted black;
}
</style>

4. Double Border [EXAMPLE]
<style type="text/css">
.post img {
border: 5px solid gray;
padding: 5px; /*Inner border size*/
background: #d5d5d5; /*Inner border color*/</style>

}
</style>

5. Double border - Hover effect [EXAMPLE]
<style type="text/css">
.post img {
border: 5px solid gray;
padding: 5px; /*Inner border size*/
background: #d5d5d5; /*Inner border color*/

}
.post img:hover {
border: 5px solid black;
padding: 5px; /*Inner border size*/
background: #gray; /*Inner border color*/

}
</style>

6. Special Border 1 (Shadow Effect) [EXAMPLE]
<style type="text/css">
.post img {
background: url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
border: 0px;

}
</style>

7. Special Border 2 (Framed at top-right corner) [EXAMPLE]
<style type="text/css">
.post img {
background: url(http://i26.tinypic.com/2u5ufz8.jpg) no-repeat top left;
padding: 20px 10px 5px 35px;
border: 0px;

}
</style>
Read More

August 5, 2009

Upload and Create Background Images For Your Blog

Whether it's a blog, website or a profile page, if it's a web page and it's online, then background image is a must for the page. And searching for background patterns is definitely not easy, first you have to find images matching the foreground colors and then you have to check for the image's copyrights. And trying to create your own background images using (Adobe)Photoshop or any other tool is definitely boring and takes a lot of time.
So here's a great tool where you have to simply upload any image (use any image captured on your own digital camera or mobile-camera) and drag a small window over the image and voila! your pattern is ready, like this:



The small scenery shown with a red border at the bottom of the image is what I uploaded, and further the red square inside that small image is the area selected and finally the red arrows show the pattern that is formed by that small selected area.

Give this tool a try and create beautiful background images yourself within minutes:

Read More

April 10, 2009

Say Cheese !

You would have taken hundreds of pictures of your relatives, friends and whatever you like around you. So how can you leave your blog out of your album ;)

Here's BloggerStop.Net in full length:

Click To Enlarge

Of course taking a simple screenshot (using PRTSCN) cannot show you the whole blog from top to bottom like the one shown above, so you may use this simple free software to capture any web site (or web page) :
Simply enter the address of any website or web page in the software, and within a few seconds you will be able to save the image/screenshot of that page, right on to your desktop.
Read More

April 4, 2009

Add Bricked Wall Background To Your Blog

You may use any of these bricked-walls pictures as background images for your blog. Remember to use repeat tag for these images...




Click on the images, to enlarge and save.

Read - How to add a background image in Blogger Blogs
Read More

March 23, 2009

Change Opacity - Image Hover Effect

This is one of the most common and popular image hover effects, you would have seen on many blogs, including a number of pro-blogs too. Simply hover your mouse cursor on these images:


The hack is very simple, a small CSS code changes the opacity level of the images, whenever you place the mouse cursor over these images.

To add this effect to the images in your blog, follow these steps;
Read More

February 7, 2009

70+ Background Images For Blogs and Websites

If you want to know why and how can you add a background image to your blog, first read this post: Add a background image to your blog.

Here are some of the sample images:


Download from these links:



Credits: Created by Crazy Alice, from Simply-Alice.
Read More

January 11, 2009

Create LightBox Effect Image Display In Blogger

To know what a LightBox effect is, click on the image below (click on it, once the page loads completely):


You may have seen this effect earlier in other websites, but on a blogger blog, you may be seeing this for the first time.

So if are impressed with the hack, and want to apply this to your blog too, then follow these steps:

STEP 1:
Download these two files from Ziddu:

1. lytebox.js
2. lytebox.css

Download Link

And then upload these two files to www.MDN.fm (You need to register first)
NOTE: Edit and Save the properties of the folder at your mydatanest account as "hidden" and NOT as "private."
After uploading the files, copy the DIRECT LINKS to these files.

STEP 2:
Log in to Blogger, go to Layout -> Edit HTML tab
Now find this in the template:
</head>

And immediately ABOVE it, paste this code
<!--LIGHTBOX-IMAGES-STARTS--><link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/lyteboxbloggerstop.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/lytebox.js"></script><!--LIGHTBOX-IMAGES-STOPS-->
You may freely use the code AS IT IS in your template, but I would appreciate if you replace the CODE in RED with the DIRECT LINKS you got from STEP 1.

Now once this is done, whenever you want to add this effect to any image, then simply add the red code along with the usual code used for linking an image:
<a href="http://TARGET_ADDRESS_OF_THE_IMAGE.jpg" rel="lytebox"><img src="http://SOURCE_ADDRESS_OF_THE_IMAGE.jpg"></a>

NOTE: This NOTE is very important if, you want to use this hack on images uploaded on Blogger.

In blogger, when you normally upload any image, you see two links in the HTML Code, viz.

href="http://2.bp.blogspot.com/_4fVBL4fjrFI/SWo4lfysmZI/AAAAAAAAB5U/JPCHdBcMh2s/s1600-h/clear_water_island.png"

and

src="http://2.bp.blogspot.com/_4fVBL4fjrFI/SWo4lfysmZI/AAAAAAAAB5U/JPCHdBcMh2s/s320/clear_water_island.png"

So if you want to use this hack , then IT IS VERY IMPORTANT to edit the first link (href). Modify it like this:

change s1600-h to this s1600 in the link, and then publish the post.

Credits: Markus F. Hay from Dolem.com. LyteBox was originally derived from the Lightbox class (v2.02) that was written by Lokesh Dhakar. For more information please visit HuddleTogether

Read More

January 1, 2009

Add Shadow Effects To Images And Create 3D-Boxes [DVD cases] Online

Here is a bunch of tools from WebMaster Office, the first one is a tool that automatically adds a border of variable width, and then adds a shadow effect at the edges. Like this :
Here's the Tool:

Shadow Effect

You may also see these two similar tools:
DropShadowz
PicShadow

And another tool from the same website, can help yoiu to create 3D-Boxes and CD/DVD cases, like these:
3D Box 3D DVD Case

Here's the tool for creating 3D boxes and DVD cases: 3D-Pack
Read More

December 21, 2008

Go Creative with Food

Try something new like this:


Painted Eggs:
Read More
Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy