Audrino

Today I'm going to show you how to add an amazing mouseover effect for Blogger images using only CSS, in which moving your mouse over an image from different directions (from above, from below, etc) will cause an overlay transitioned in from the same vector. This trick will change not only the images appearance when moving mouse over them, but will also allow you to add inside a text with a description. You can see the effect on this image below: try moving your mouse from the left, right, and above. hover right hover top hover left hover bottom Adding Hover Effect From Different Directions on Blogger Images First thing to do is to add the CSS style to our Template: Step 1. From Blogger Dashboard , go to Template and press the Edit HTML button Step 2. Search for the </head> tag - to find it, click anywhere inside the code area, press CTRL + F keys and type it in the search box. Step 3. After you found it, add the following style just above it:  <style> ...

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. There are several ways to do this, like adding a new widget section to the blog header but now, we'll do it using an unordered list that uses icons of Facebook, Twitter, Google+ and blog feed, and as a bonus, the icons will rotate when you hover over them. You can see a demo in this test blog. Adding Social Media Icons to Blogger Header Step 1. From your Blogger dashboard, go to Template and click on the Edit HTML button: Step 2. To expand the style, click on the small arrow on the left of <b:skin>...</b:skin> ( screenshot 1 ), then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag ( screenshot 2 ) and add this code just above it:  /* Social icons for Blogger ----------------------------------------------- */ #social-icons { margin-...

The navigation links are those that appear at the bottom of the page that says "Older Posts", "Newer Posts" and "Home" and help us to move through the blog posts. This tutorial will show you how to change the word "Older Posts" and "Newer Posts" for post titles and make these to appear in a box "fading" when you scroll down the page. You can see it in action on this demo blog - when you scroll down, the navigation links will appear showing the post titles for the older/newer entries. This way to display the navigation links will be seen only in individual entries, while those on the homepage and other parts of the blog will still be displayed as usual. How to Add Navigation Box with Newer & Older Posts on Blogger Step 1. From your Blogger Dashboard, go to Template > Edit HTML , click anywhere inside the code area and search - using CTRL + F - for this line: <b:include name='nextprev'/> Screenshot: Step 2...

Just a few days ago, Blogger introduced a new contact form widget that you can add to your blog easily. At the moment, it is very basic because, at least for now, does not allow sending files or anything other than plain text. The contact form for Blogger has the following features: Field for the user name Field for email Field for the message (textarea) Submit Button The design is simple and the text colors inherit the section where you add it. At the moment, this widget has no configuration options and is not available for dynamic views. How to Add Contact Form to Blogger To add it to your blog, just select the Layout tab, then click on "Add a gadget" in the section you want to show - for example, in the sidebar. Then, select the More gadgets tab and add the Contact Form gadget. Styling Contact Form Since the background is transparent, the form will blend well aesthetically speaking, but nevertheless it is easy to modify using Style Sheets (CSS) to the appropriate select...