You might have seen a roll over Image effect in many professional and commercial blogs. By roll over I mean that when you hover your mouse cursor on the Image, the image border colour and style/appearance changes. Well using some simple CSS you can add some amazing effects to your Blog Images. Without wasting any time lets jump straight to the steps to be followed.
This tutorial uses a simple pattern for adding codes i.e First you will need to add a CSS code just above ]]></b:skin> and then you will need to add a small HTML code like class="xyz" to the image code inside your posts. That’s it! :>
First and Foremost See them in action!
How To Add the Top 10 Amazing Image Mouse Hover Effects To Blogger?
To do this follow these steps,
- Go to Blogger > Layout > Edit HTML
- Search for ]]></b:skin>
- And now paste any of your preferred CSS: code just above ]]></b:skin>
Now whenever you write a post, simply upload an image in your blogger Editor and then switch to the Edit HTML mode and search for this code <img and paste the HTML: code of your preferred Image effect just after <img as shown below,
Number #1
CSS:
.simple1 {
padding:5px;
border:1px solid #ccc;
}
.simple1:hover {
padding:5px;
background-color:#ccc;
}
HTML:
class="simple1"
Number #2
CSS:
.simple2 {
padding:5px;
background-color:#ccc;
border:1px solid #ddd;
}
.simple2:hover {
padding:5px;
background-color:#eee;
border:1px solid #666;
}
HTML:
class="simple2"
Number #3
CSS:
.black-white {
padding:5px;
border:1px solid #ccc;
}
.black-white:hover {
padding:5px;
background-color:#fff;
border:10px solid #000;
}
HTML:
class="black-white"
Number #4
CSS:
.dashed {
padding:5px;
border:1px solid #ccc;
}
.dashed:hover {
padding:5px;
background-color:#fff;
border:2px dashed #000;
}
HTML:
class="dashed"
Number #5
CSS:
.top-bottom {
padding-top:5px;
padding-bottom:5px;
border-top:3px solid #ddd;
border-bottom:3px solid #ddd;
}
.top-bottom:hover {
background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
}
HTML:
class="top-bottom"
Number #6
CSS:
.curtain {
padding-top:10px;
padding-bottom:10px;
border-top:2px solid #ddd;
background-color:#000;
border-bottom:2px solid #ddd;
}
.curtain:hover {
background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
}
HTML:
class="curtain"
Number #7
CSS:
.red {
padding:5px;
border:1px solid #ccc;
}
.red:hover {
padding:5px;
background-color:#E71305;
border:10px solid #ddd;
}
HTML:
class="red"
Number #8
CSS:
.Fadein{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
HTML:
class="Fadein"
Number #9
CSS:
.Fadein2{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:2px solid #000;}
.Fadein2:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:2px solid #000;
}
HTML:
class="Fadein2"
Number #10
CSS:
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #7AA1C3;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: white;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 5px;
}
HTML: For knowing how to apply this popping effect in detail read this post –> Image Pop-up Effect
<a class="thumbnail" href=""><img src="Add Image URL Here" width="100px" height="100px" border="0px" /><span><img src="Add Image URL Here" /><br /> Image Description here </span></a>
You can enjoy playing with these codes using MBT HTML Editor. I hope you will find this tutorial pretty useful in further enhancing your cool blogging experience :>>
Adobe Photoshop is a blessing to designers across the globe. It is the wizard box for creating amazing 2D art effects. This graphic software has several functions and is really advanced but yet easy to use. As bloggers most of us love to share images in our posts but we love it even more if our images appear outstanding. Now to give beautiful effects to your images you just need to give a try to today’s tutorial where we will learn the following great methods of editing images.
) as marked above. Now simply start dragging your mouse cursor over the region that you want to crop/cut. Like this,
After the release of 
I was waiting for this day so that I could show it with prove that how can one easily flow the Google Page Rank Juice to all internal pages. That means that if your homepage has a PR-2 or more you can undoubtedly make most of your internal pages a PR-2 or more ranked pages. You know that most of my pages are either PR-1, PR-2 or PR-3. Only Few authorities have linked to my internal pages but yet you can see that most of my internal pages have the same PR as that of the homepage. If you think this technique of spreading the PR evenly in all internal posts or pages is hectic or may require plenty of hard work then be sure that you have mistaken yourself :>
You might have seen a three column widget at the bottom section of many commercial and professional blogs. Where you can add whatever stuff you like. Take my footer widget as an example. I have added widgets that further keeps the reader busy. This Footer widget contains three columns where each column can accommodate as many widgets as you can add! In order to add such a widget to the bottom section of your blogs and also customize the look and feel of it then lets start learning today’s tutorial.
Just to inform you all that for the flexibility and ease of Blogger Template customization, I have published two extremely useful tools that will help you get the hexadecimal color value Or RGB value for any colour you want. These tools are advanced integrated versions of colour pickers used in graphic software like Photoshop. I am more happy than you are because now I don’t need to open Photoshop each time for picking my desired color or eat my brain in finding matching colours :>
Navigation menu or tab menu is the heart of every web page or blog. It provides the path way to all important pages of the website. To create a Navigation menu you must have good knowledge of CSS and HTML. But since more and more designers are sharing their tutorials online, coding has become far easier. I have brought to you a total of 30 High class navigation menus along with their CSS and HTML Codes from across the web. You just need to copy and paste the codes and that’s it!
