Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


Skillblogger

Download our app on Google Play Store

Monday, April 15, 2013

Design Your Posts With CSS Bubble Buttons

Perhaps each and every one of us wants to make his blog at best suit, Bloggers always trying to leave their mark to make the reader back again and again to browsing latest leaflets, in addition to the template that attracts the attention of the visitor, it does not hurt to add some buttons inside blogger posts.
There are three types of buttons, I advise you to use them in your blogs. For this lesson today we will see how to add the first kind of buttons, and i'll share the others in the next time.
This kind of buttons are called CSS3 BUBBLE Buttons.
As you see in the below image, as well as by clicking on the preview button, these CSS buttons affected hover the pointer which giving it a great impact.

Try this to see a live demo:

LINK TEXT HERE


Installation of css3 bubble buttons:

First Step: with CSS Part

  • Firstly go to Blogger.com ›› Dashboard  Template.
  • Make a backup for your template and save it in safe.
  • Find the code below using CTRL+F 
]]></b:skin>
Click to download the code and copy it then past it just above  ]]></b:skin>


Save your template and follow the second part.

Second Step: With HTML Part

After Adding CSS code to blogger template, now let's discover how to add HTML code to your posts,
when you want to add a button on your post, you have to select one of this sizes and past it in the HTML form as the picture below shown:

ADD HTML TO BLOGGER POSTS

Choose what you want from these below Buttons's codes, there is a different between them on the colors and sizes:
  • For the Big Button copy and past one of these codes:
<a href="ENTER YOUR LINK" class="button big blue">WRITE SOMETHING</a>
<a href="
ENTER YOUR LINK" class="button big green">WRITE SOMETHING</a>
<a href="
ENTER YOUR LINK" class="button big orange">WRITE SOMETHING</a>
<a href="
ENTER YOUR LINK" class="button big gray">WRITE SOMETHING</a>
  • For the Medium Button copy and past one of these codes:
<a href="ENTER YOUR LINK" class="button blue medium">WRITE SOMETHING</a>
<a href="ENTER YOUR LINK" class="
button green medium">WRITE SOMETHING</a>
<a href="ENTER YOUR LINK" class="
button orange medium">WRITE SOMETHING</a>
<a href="
ENTER YOUR LINK" class="button gray medium">WRITE SOMETHING</a>
  • For the Small Button copy and past one of these codes:
<a href="ENTER YOUR LINK" class="button small blue">WRITE SOMETHING</a>
<a href="
ENTER YOUR LINK" class="button small green">WRITE SOMETHING</a>
<a href="
ENTER YOUR LINK" class="button small orange">WRITE SOMETHING</a>
<a href="
ENTER YOUR LINK" class="button small gray">WRITE SOMETHING</a>
  • For the Small Rounded Button copy and past one of these codes:
<a href="ENTER YOUR LINK" class="button small blue rounded">WRITE SOMETHING</a>
<a href="
ENTER YOUR LINK" class="button small green rounded">WRITE SOMETHING</a>
<a href="
ENTER YOUR LINK" class="button small orange rounded">WRITE SOMETHING</a>
<a href="
ENTER YOUR LINK" class="button small gray rounded">WRITE SOMETHING</a>

Settings

  • Replace ENTER YOUR LINK by the link that you want to open when clicking on button.
  • Replace WRITE SOMETHING by the text that you want to appear on the button, e.g: DEMO or DOWNLOAD...

What's Next?

I think That is all for this tutorial, hope you like it. expect the next part of CSS Buttons.
If you added this buttons to your posts successfully , then be social and share this article with other bloggers.
If anything goes wrong, then be free to ask and leave your comment.
    Like the Post? Share with your Friends:-

    Team SB
    Posted By: Team SB

    0 comments :

    POST A COMMENT

    Download our app on Google Play Store

    Contact Us

    Name

    Email *

    Message *

     
    Copyright © . Skill Blogger . All Rights Reserved.
    Designed by :- Way2themes