Thursday, 26 January 2017

Top CSS Image Hover Effect For Blogspot Bloggers

Posted by Mohammed Rafi

Image Hover Effects For Blogspot Bloggers

"Looking for top image hover effects for your blogs?.here are  the top image hover effects you should use in your blog"

top hover for blogspot bloggers

Image Hover Effects

Hover effects mean the change which occurs when you mouse over them.Image hover means changes in images will occur when you mouse over them.

We already know the importance of images in blogs.Images speak a thousand words.so, we should be very careful while handling them.A good editing alone is not enough, we should use it in a correct way and correct manner.

Hover effects will add a professional look to your blog.it makes your posts more beautiful.

Read this:welcome readers to blogspot builder

 How to apply CSS image hover effects to your blog

  • Go to blogger dashboard
  • Go to template and Click Edit HTML
  • Find  ]]></b:skin> or simply </b:skin>
  • Place the below code above it


  Lens CSS image hover effects

This is the best CSS image hover effects.It is suitable for travel bloggers.

When you hover over the image a black colored lens like structured focus the image.You can change the lens color by changing CSS color code.

To experience lens hover effect hover over below image


focus CSS effect


.post-body img{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover{
border: 70px solid #000;
border-radius: 50%;
}




Opacity image hover effects

Opacity is the best and professional image hover effects.Most of the top blogs use this image hover effect.I use this effects in my blogs.

Out of all these effects we see here opacity is the best.Mostly I prefer this to many of my friends

whenever you hover over the image opacity will increase

To experience opacity effect hover through below image


opacity CSS image hover

.post-body img{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover{
opacity:0.7;
filter:alpha(opacity=50);
}




Tilt CSS image hover effect 

Tilt is the basic and simple image hover effect.when you hover over the image will tilt slightly.

To experience tilt effect hover through below image.


tilt CSS image

.post-body img{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.post-body img:hover{
 -webkit-transition: rotate(-10deg);
-moz-transition: rotate(-10deg);
-o-transition: rotate(-10deg);
-ms-transition: rotate(-10deg);
transform: rotate(-10deg);
}




Blur CSS image hover effects

Blur CSS image hover effects is well-known image hover effects.

As the name itself tell blur effect will occur when you hover over it.

To experience Blur effect hover through below image.


BLUR CSS


.post-body img{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover{
-webkit-filter: blur(5px);
}



Conclusion

This Post will help you to add CSS image hover effects to your blog.Please share your experience with this hover effects in comment section.If any problem persists let us know, we are ready to help you.subscribe our blog for further updates.


Read More

Wednesday, 4 January 2017

How to add navigation menu bar in blogspot blogger within 5 minutes

Posted by Mohammed Rafi

Adding Navigation Menu Bar in blogger

Want to add Navigation Menu bar in your Blogspot blogger?

 Do you know the benefit of adding Navigation Menu bar?

Let me tell you the benefits of adding navigation bar

 Adding navigation menu bar to your blog gives a professional and elegant look.it will increase your visitors and reduce bounce rate of your blog.Adding menu bar gives an authority to your blog.

If your websites don't have a clear design and easy menu bar it will take away your readers and they will never come back to your site.

Menu bar drives a huge amount of traffic if you use it correctly.Adding menu bar to your default blogger template is easy to do, as it doesn't require any HTML knowledge.





How to add navigation menu bar 

menu bar for blogger
  • To add Navigation Menu Bar to your blog go to
  • Layout
  • Choose Add a gadget in Cross Column
  • Choose pages 
  • Tick the check boxes of the pages which you want to display in navigation menu bar
  • Now click save

 Adding Label tabs in navigation menu bar blogger

Consider I post about two niche one is blogging tips and another one is about Android.How I should differentiate these two niche?.For that, you need label the post of these two niches in two different categories


eg.I need to label all the post about blogging tips under blogging category and post about android under the android label.And it is easy to display these two in navigation menu bar which I will tell you below


add label in navigation bar
  • To add label in navigation menu bar
  • Go to Layout
  • Choose Add a gadget in Cross Column
  • Choose Pages 
  • Click add external link
  • In Title box types type the title you want to display
  • Under URL type http://your address.your domain/search/label/label name
  • Click Save.

Things to do with Navigation Menu

 We already discussed how to add navigation bar on your blog?.Now I will tell you what are the things we should with this navigation bar


Contact Us Page
Adding Contact Us Page on navigation bar gives your readers to easily contact you.As we see lots of top blogs add Contact Us page in their navigation bar because it looks more professional when you add Contact Us page.

When you apply for AdSense your blog should contain Contact Us page it will increase your chance for approval.



About Us Page  
"A wonderful blog should have wonderful About us page".Whenever a reader inspired by your word the first thing he does is visiting your About Us page.


You shouldn't disappoint your readers without posting about us page.An impressive about page will increase your audience.


 About Us page is a basic foundation for your sites.it allows your reader to know about you and your achievements.


 
Label Tabs

Label tabs mean the tabs you categorized using the label.I already explained to you how to categorized a label tab.it provides or it gives life to your old post.

The things I most admire with label tab is that it help us to provide a better experience for readers.adding label tabs in navigation provides best web design


Privacy Policy

Adding Privacy Policy pages is not necessary but most of the people told me that adding privacy policy in your blog helps during Adsense approval.

If you add Privacy Policy pages in navigation bar your readers believe that you aren't a beginner.

Sitemap

Sitemap is nothing but a map of your site as it name implies.sitemap has always been a part of best web design practices.sitemaps helps in classifying your site contents and helps your readers easily understand your site.it also helps in SEO.

 Conclusion
Readers loves beautiful web design and a quality content so try to produce quality content along with a good blog design

Share your opinion on adding navigation bar or tell us about any navigation widget you use in comment section.Feel free to comment

Love this post?Don't Forget to share it!
Read More

Sunday, 1 January 2017

Welcome Readers of Blogspot Builders

Posted by Mohammed Rafi
Credits:Flickr
Hi readers, This is Mohammed Rafi from Blogspot Builder.I thought that before posting about my niche it would be better to start with a description post.
Read More