We have been moved to http://www.bloganol.com/

Showing posts with label image hacks. Show all posts
Showing posts with label image hacks. Show all posts

Posted by Deineshd on Friday, July 18, 2008 · 3 comments

Previously we already written a post about Creating CSS popup Image viewer in blogger.This is just the upgraded form of that post.We have make some good changes in that post.If you Like to see the demo then click here.

To setup popup Image viewer in your blog First of all copy the following CSS Code and paste it between <head> and </head> Tags of your Template.
<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 263px;
left:282px; /*position where enlarged image should offset horizontally */

}

</style>




Second step is to paste the following Code into your blog Posts.
<a class="thumbnail" href="#">
<img src="http://www.t2tibet.com/Images/mount-everest.jpg"
border="0" height="66" width="100" /><span>
<img src="http://www.t2tibet.com/Images/mount-everest.jpg" /></span></a>



Replace the Image Url above with your image Url and see your work done.
Read more

Posted by Deineshd on Friday, June 06, 2008 · 1 comments

Sometimes using blog header may not look your blog cool and you may like to use a cool header image in place of boring default header.If so then bloganol brings you the cool blogger hacks that removes blog header and you can use a cool header images instead of blog header.

First of all goto Blogger Edit Html Page and Search for the following line of code.
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Now replace the above code with the following code in your template.
#header-wrapper {
width:800px;
margin:0 auto 10px;
border:1px solid $bordercolor;
display:none;
}
The above code hides your blog header.Now to use a cool image in place of header search for the following code in your template.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bloganol Demo Blog (Header)' type='Header'/>
</b:section>
</div>
Now paste the following code just after the above code.

<a href="URL_OF_UR_BLOG"><img src="URL_OF_THE_IMAGE" alt="Home" /></a>
Now see the demo below.

Before









After

Read more

Posted by Deineshd on Tuesday, May 20, 2008 · 0 comments

In the previous hack we have learned to create popup Image viewer in blogger . Now we are learning to change opacity of the image on mouse hover and applying a border to any image link when we hover the image . the credit of this hack directly goes to dynamicdrive.Now see the following demos that gives you clear view of this hack.

Demo:Hover the image with your mouse pointer.

Opacity Highlight




Border Highlight



How was demo?Good.Now lets start the installation of this hack . First thing is to Copy the following CSS code to the head section of your blog.
<style type="text/css">

.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

.toggleopacity img{
border: 1px solid #ccc;
}

.toggleborder:hover img{
border: 1px solid navy;
}

.toggleborder:hover{
color: red; /* Dummy definition to overcome IE bug */
}

</style>
Now second and Last step Copy the following code and Paste it to your Blog post or Sidebar adding a new Html Page.
<a class="toggleopacity" href="http://www.bloganol.blogspot.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS8ZWV2TEmbt9CmOMecb0kafoaNoTK37w0myfANx0NNDiV479itBqLBUYPYXOmHCPS6fjB8nBARHedhPJCzpHE2ZZYsJAAIM1MQtmF7qn35LlxQK1g78bIuFv3eKwsON343mNQCKvufEA/s400/cooltext89264568.png" border="0" />
</a>

<a class="toggleborder" href="http://bloganol.blogspot.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX4ePypbcWhZ13Y9xdwZoK7jpMqOJdJ6HfK8VZZwsPfNPLCfxwxMsaRdWk_Y6YVYP9WfFgMoKGw53-qUi_8JyO61qQTrz85LKXorGx_g0_5TJA4kLei9E35HNr7FbQAPzHK6KjlutBIgs/s1600-r/bloganol.jpg" border="0" />
</a>
In the above code the firt part defines the Opacity Effect and The second Part Defines the Border effect . You can change the link and Image url of own own.

If you got any problem ,not satisfied or Liked this posts then please leave a comment on this page. you single comments gives 1 million Calorie of Energy to do good works.
Read more

Posted by Deineshd on Tuesday, May 20, 2008 · 6 comments

The image is small in the webpage but seen bigger when you hower the image.Isn't it interesting?Yes.Bloganol brings you the greatest image hack.This popup image viewer is good for those blogger who like to place more images in their blog posts but wants less area to be occupied and wants image seen clear.

Demo: Hover the following thumbnail Images with your Mouse Pointer.If it doesn't work then visit this demo page link.


Simply beautiful.
So real, it's unreal. Or is it?
Installation of this widget is not so hard. First of all copy the following CSS code to the head section of your blog.

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

And the second and Last step is to copy the following html codes and paste it to your blog either while posting or in your sidebar adding a new page Element.

<a class="thumbnail" href="#thumb"><img src="Image Url" width="100px" height="66px" border="0" /><span><img src="Image Url" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="Image Url" width="100px" height="66px" border="0" /><span><img src="Image Url" /><br />So real, it's unreal. Or is it?</span></a>


In the above code replace Image Url with your Image Url .

If you got any problem , not satisfied or liked this post then please leave a comment on this post.
Read more
Subscribe to: Posts (Atom)