Sweet CSS3 Bon Bon Buttons For Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Saturday, 5 May 2012

Sweet CSS3 Bon Bon Buttons For Blogger


Cascading Style Sheet (CSS) is a heart of every web designer.We can't imagine that,what can a professional web designer create with using CSS3.Just watched another magic CSS3 - the Bon Bon buttons,in the first view I really impressed from that buttons.And I shocked when I know that these buttons are created with using pure CSS3.The biggest advantage of these buttons is they are made from pure CSS3  that means no any load on your website/blog.Also you can implement these buttons in your blog very easily,just follow my below steps carefully to add these sweet CSS3 buttons to your blog.

Demo


How To Add Bon Bon Buttons To Blogger Blog?

  1. Go to Blogger Dashboard > Design > Edit HTML.
  2. As always download a copy of your template.
  3. Now search for below code in your template (Tip - Use CTRL+F function)

</head>

Add below code just above/before of above code.

<link rel="stylesheet" type="text/css" href="http://helperblogger.ucoz.com/css/bon-bon-buttons.css"/>

Now save your template and you are done.Lets see how to use them in your posts...

How To Use These Buttons In Posts?


While creating post click on Edit HTML tab in your post editor.

Now use below code to use these buttons in your posts

<a href="YOUR LINK HERE" class="button">YOUR TEXT HERE</a>

Now replace YOUR LINK HERE with your link and YOUR TEXT HERE with your text.

This is for the only one type of button you can know more about these buttons here.

3 comments:

  1. Your template designer(Prayag) has already putted the button code in your template and they are matching with my code that's why you are getting this error.If you want to use these buttons then you have to remove your old codes.

    ReplyDelete
  2. if i want just use one of this how i can get here link?

    ReplyDelete
  3. use below code

    <a href="YOUR LINK HERE" class="button">YOUR TEXT HERE</a>

    replace YOUR LINK HERE with your link and replace YOR TEXT HERE with the text which you want to appear on button.

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM