Multi Hover Effect On Blogger Images Using Pure CSS

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 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: 

Step 4. Save the Template

Now we are going to add the HTML that is nothing but a DIV where we included four SPAN tags with texts and an image:

Step 5. Choose Posts, create a New Post, click on the HTML tab (1) and paste this code inside the empty box:

  hover right
  hover top
  hover left
  hover bottom
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihNPglLyYDJ_DLQrJ8z0ljuhEpJkXM2H6hyEzMF-BvwxAGTJPAyhFccs2LagmTo67UV9Q-FJ391y-FvF9YF4kRI852iLk5mZ8PPfGyX1dOAYb-8RB6VP1NyKOZy1FL3pGLJXoqWJNCVS0/s1600/flowers">

Add your own text/description to "hover right", "hover top", "hover left" and "hover bottom" (2) and replace the url in blue with the image URL (3) where you want to apply the effect.
Important! Do not click on the Compose tab, otherwise the changes will be lost.

Step 6. After you finished editing your post, click Publish (4)

And that's it... enjoy! :)

3 Reasons Why Honesty Matters In Your Blog

Guest Post - Our host is Nicolas D’Alleva, in this post Nicolas takes a no holds barred look at being an honest blogger.See How To Become a guest author on Spice Up Your Blog.

As internet use becomes increasingly more ubiquitous, so do our suspicions about the things we see, read, and hear online. Just like your seventh grade social studies teacher told you, people can write and put whatever they want on the internet (so, STOP citing Wikipedia in your term paper).

Internet users are skeptical of what they see online, and bloggers need to respond accordingly. A little honesty can go a long way in increasing your following, not to mention that there are already hundreds of other bloggers claiming to be Morgan Freeman (yes, other people know how to use PhotoShop too).

So, leave the aliases and the pseudonyms at the door, and start writing from the heart. Here are three reasons why it will make people want to read what you’re writing.

1. People can tell when you’re full of it

Click Here To View Full Post >>

How To Add Social Media Icons to Blogger Header

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 ... (screenshot 1), then click anywhere inside the code area to search (using CTRL + F) for the ]]> tag (screenshot 2) and add this code just above it:

 /* Social icons for Blogger
----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

Screenshot 1:

Screenshot 2:

Step 3. Now search for this line

Step 4. And just above it, add this code:

• 



• 



• 



• 

Customization

- Change what's in red with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog.
- To change the icons, just replace the urls in blue with the ones of your images.
- You can add more icons if you want, you just have to add before

Fading Box With Newer/Older Posts Links and Titles for Blogger

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:

Screenshot:

Step 2. REPLACE the code above with this one:

Other posts published:

Note: you can change the "Other posts published" title with your own

Step 3. Now add just above the following code:

Note that this gadget uses jQuery, so try to have only one version.

Customization:

- There are three URLs in blue, the first is the paper background image for the box, the other two are the icons that correspond to the arrows. You can replace these with your own.
- In green you can see where to change the text colors.
- The red number is the distance in pixels that activates the gadget, this means that the box will appear when you scroll down the 100px. You can use a higher value if your posts are usually long and therefore the "height" of the scroll is greater.
Step 4. Now, Save the Template and that's it!

You can also change the "Older Posts" and "Newer Posts" links with posts titles or images.

New Blogger Widget: Contact form - Change Style & Install in a Static Page

Just a few days ago, Blogger introduced a new widget. It is about a contact form that you can add to your blog easily. It is very basic, because - at least for now, does not permit incorporating files or send 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

Screenshot

 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

As the background is transparent, the form will integrate well, aesthetically speaking, but nevertheless it is easy to modify using Style Sheets (CSS) to the appropriate selectors. Here's an example:

/* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

This is how it will look like after applying the style:

To add this style, go to Template > Edit HTML, click on the sideways arrow next to ... and paste the code just above ]]> (press CTRL + F to find it):

How To Add Contact Form In A Static Page

First step is to add the Contact Form gadget (Layout) and second, to edit the template (Template > Edit HTML) to remove most of the gadget. You have to search for the id "ContactForm", expand the widget by clicking on the black arrow on the left (same with the includable) and then delete the part that I have colored in red (see below):

Part to be removed:

 
   
 
   

 
 

   

     

       

       
       

       
       

        *
       

       
       

        *
       

        <br />        <p/><br />        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/><br />        <p/><br />        <div style='text-align: center; max-width: 222px; width: 100%'><br />          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/><br />          <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/><br />        </div><br />      </form><br />    </div><br />  </div><br />  <b:include name='quickedit'/></span><br /></b:includable><br />  </b:widget> </blockquote><br />After you have saved the template, go to <b>Pages</b> and paste the following code into a new blank page with the title you want:<br /><br /><blockquote class="tr_bq"> <div class='widget ContactForm' id='ContactForm1'><br />  <div class='contact-form-widget'><br />    <div class='form'><br />      <form name='contact-form'><br />        <p>Name</p><br />        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/><br />        <p>E-mail *</p><br />        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/><br />        <p>Message *</p><br />        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'>
       
       

       

     

   

 

The Future Of SEO And The Application Of Guest Blogging

Guest Post - Our host is Chris Gunn, Chris takes an interesting look at were SEO may be heading in the future.See How To Become a guest author on Spice Up Your Blog.

The SEO world has been very shaky lately as those who have dedicated their livelihoods on the development of websites and blogs have seen a shift in Google’s algorithms on the horizon. There is definitely a legitimate change coming, but is it truly worth all the hype? Does Google really want to eliminate all forms of link building, even the honorable, fair whitehat approaches? What about the people who want to have a successful site and truly follow the rules? There’s been too much doom and gloom on SEO, and it’s time to tame it down. Below is Matt Cutts’ most recent vlog “What should we expect in the next few months in terms of SEO for Google?

CHILL OUT

Click Here To View Full Post >>

5 Strong Techniques For Successful Blog Writing

Guest Post - Our host is Kevin Demlon, Kevin has some well explained tips for bloggers of all levels.See How To Become a guest author on Spice Up Your Blog.

Although it was coined in 1999, the term “blog” did not enter the dictionary until 2004, when it was Merriam-Webster’s Word of the Year. The dictionary defined it as “an online personal journal with reflections, comments, and often hyperlinks provided by the writer.” Since that time, blogging has become a legitimate and sometimes profitable profession for some scribblers. But like most professions, few bloggers ever achieve wealth or even fame. Most write for a small number of faithful readers who share their interests. There are of course exceptions to this rule.

When the Huffington Post, a news blogging website, was sold to America Online (AOL) for $315 in February of 2011, it sent shockwaves through the blogosphere. Suddenly, everybody and their mother thought they could strike it rich by simply starting their own blogs. As you might expect, most of them fell flat on their proverbial faces. How do we know?
Click Here To View Full Post >>

Google+ Authorship: Where You Become The Link

Guest Post - Our host is Shannon Williams.

You may have noticed the last time that you searched any newsworthy topic on Google—whether it be a recap of the Academy Awards or new developments on the latest iProduct—that some of the search results have a small picture of a smiling individual beside them.



That picture is likely the result of what is known as Author Rank. Sites with regularly updated content can add a specialized link onto each author’s name (a link that connects with the individual’s Google+ account), so Google crawlers recognize that this person wrote the content for the page. The more that author publishes, the higher their Author Rank.
Click Here To View Full Post >>

How to Write Breathtaking Blog Posts with your Readers in Mind

Guest Post - Our host is Emmanuel Obarhua.

The only way you can make your articles unique and mind boggling is to make a difference in how you write; your writing is the most essential part of blogging. It propounds how good you are, it brings paid writing opportunities, it reputes your blog and a million more... I guess you must have heard the blogosphere’s number 1 adage; “Content is king”. This cannot be attained by the length of an article, instead it either spoil the whole thing or delay the way you update your blog as you only want to write lengthy posts.

Click Here To View Full Post >>

Load Posts With Infinite Scroll On Blogger Blogs

In this tutorial we have a new way for posts to be viewed on your blogs homepage, namely infinite scroll.Infinite scroll has been a popular trend in web design for some time and now you can have it on your blogger blogs.On Blogger we have on the home page by default 'Previous' and 'Next' buttons to load a new page of posts.Now this tutorial takes another step with adding Infinite Scroll to Blogger blogs.

This is user friendly and will cut down on load time.So I have the demo and a quick add button for you to add it to your blog in seconds.
Click Here To View Full Post >>

Stuck on a Blog Topic ? Use These Exercises to Get the Ideas Flowing

Writing can be a fabulous avocation, but all writers at times face the inevitable writer’s block. It can be extremely frustrating to feel as though you are fresh out of ideas, especially as a blog writer who is under pressure on a daily basis to write original content.

Here we provide some ideas in for how to get those ideas flowing when you simply feel fresh out.
Click Here To View Full Post >>