CSS button generator

There are many old timey Button generator out there but with new css you can make some awesome buttons. To save your time you can use generators. One of the best and easy to use button generator can create awesome css buttons like the image below.

The css will be already generated for you to copy paste. You can very use these codes in your website or blogs very easily. An example of the code is shown below

Get this

If your still confused about how to use your generated button, You can check out step by step tutorial here.


And now to give you the magic link:

http://www.cssbuttongenerator.com/

How to get your google plus badge

Google plus is a very good tool for SEO master and the latest hit in the world of Social network. To increase the visibility of your site online easily Google plus is the number one place. You can catch more attention of your visitor through Your Google plus widget which can be easily added to your blog and website. We have already posted several tutorials on Google plus which you might want to check out

• How to create Google plus page
• Get Google plus id
• Get customized Google plus widget

And now you will learn about another cool Google plus widget by Google developer -Google plus badge. If you don't want to mess with coding, use the other widget instead.


Before you do anything first, back up your template.

Get Google Developer Google Plus badge

1. Go to this link
2. Paste your Google plus id in the box
3. You will see the preview, choose your badge style
4. Customize more by clicking on advance section
5. Once done, copy the first part of the code and find paste it before it
6. Now copy the second part of the code
7. Add the code under content under content in HTML/Java script gadget
8. Your done!

Google plus is Google's new creation in the world of social networking. For it's user Google search result get personalized depending on what their circle +1. For small business and to socialize it is extremely important to have all your Google plus tool set up. We already posted a article on how to create Google plus page and today you will learn about very fast and easy way to get your custom Google plus widget for your blog or site without having any experience on coding.

Get your custom Google plus widget

1. Go to http://widgetsplus.com
2. Click on Get Widget
3. Scroll and paste your Google plus id
    (if you don't know your id click on the link)
4. Go through different settings to customize
    (to make anything transparent, leave it blank)
5. Once done click Get Code on the top
    (you will see the demo on the right and the code)
6. Copy the code and use it on your blog/site.
    (see tutorial for blogger below)

How to Add Google plus widget to your blogger blog

1. Go to blogger.com
2. Click on design for the blog you want the gadget on
3. Click Add a gadget>HTML/Java script
4. Paste the code under content
5. Save. Your done!

Google plus is Google's new creation in the world of social networking. For it's user Google search result get personalized depending on what their circle +1. For small business and to socialize it is extremely important to have all your Google plus tool set up. We already posted a article on how to create Google plus page and today you will learn about very fast and easy way to get your custom Google plus widget for your blog or site without having any experience on coding.

Get your custom Google plus widget

1. Go to http://widgetsplus.com
2. Click on Get Widget
3. Scroll and paste your Google plus id
    (if you don't know your id click on the link)
4. Go through different settings to customize
    (to make anything transparent, leave it blank)
5. Once done click Get Code on the top
    (you will see the demo on the right and the code)
6. Copy the code and use it on your blog/site.
    (see tutorial for blogger below)

How to Add Google plus widget to your blogger blog

1. Go to blogger.com
2. Click on design for the blog you want the gadget on
3. Click Add a gadget>HTML/Java script
4. Paste the code under content
5. Save. Your done!

Get a custom Cursor For your blog

Blogging is petty fun way to connect to other people with same interest. For blogging we like to change the template as personal as we can. Even if your purpose of blogging is not personal uniqueness is always necessary and it makes you feel good. There are literally billions of free cursors you can use out there and you can make one yourself to use it as a cursor in your blog. You can choose one of the cursors from below or go to the source for more.

Demo: Look at your cursor!

Popular cursors to choose from

How to install:

• Go to blogger dashboard>Design>Page element>Add a Gadget>HTML/Java script

• Paste the code under content and save

• Your done!

The images are hosted on http://www.cursors-4u.net where you can find many more with codes to add it to your blog or site. You can find many professional as well as personal cursors there. You can also make one from the example of the code or wait for the next tutorial on how to create your own cursor very easily.

Blogger Ads Converter

For Google AdSense, Adbrite, Chitika or another code you can't use the code directly in your template. You need to convert it to HTML in order to use it to your blog. Use the simple tool below to convert your code to HTML.

Simple CSS menu with hover effect

If you don't like the classic blogger menus you can choose to use simple and cool menu with a hoover effect. The menu will show text and a link to your pages. It is very simple easy and will fit for most of the blogs. So let's get started with this.

First we have to add the CSS. 

• Go to Blogger Dashboard>Design> Edit HTML

• Backup your template 

• Press CTRL+F and find ]]> and paste the following code above it.

    ul#navlist {

        display: inline;

        list-style: none;

    }

    ul#navlist li {

        float: left;

        width: 60px;

        height:60px;

    }

    ul#navlist li a {

        width: 50px;

        height:50px;

        padding:5px;

        display:block;

    color:#fff;

        text-decoration: none;

        font-size:7pt;

        font-family:arial;

        line-height:50px;

        text-align:center;

    border-right:1px solid #fff;

        border-left:1px solid #fff;

        border-top: 5px solid #fff;

        border-bottom: 5px solid #fff;

        background: #003663;

    }

    ul#navlist li a:hover {

        border-top: 5px solid #004a80;

        border-bottom: 5px solid #004a80;

        background:#004a80;

        font-size:9pt;

        font-weight:bold;

    }

Once you have done that save your template.
Now, click on the button below and select your blog and add the code

One

Two

Three

Four

Five

Six

" />

Go to Blogger>Design>Page Element and edit "Custom Menu" and do the following changes

• Change "one" "two"  "three" and so on with the text you want to show up inside the menu
• You can delete a line
• to
if you don't need them all

• Change "#" without quote to the link corresponding to the text you choose for the menu

Optional:

• You can drag the box inside the page element to choose where you want the menu to show up.

• You can change it's color by customizing the CSS by changing the value of color hex #XXXXX

Credit:
The credit for the codes goes to CSSHowto.com
                                                                                                        

Twitter Follower Box for blogger

Twitter doesn't have any current widget to show off your twitter fans like Facebook like box/ follower box. Well now you can with a customized twitter follower box. You can use this like a normal widget in your blog very much like the Facebook widget. You can follow simple steps to get your twitter follower box below.

                                Click For Live Demo

How to get twitter follower box for blogger

 

1. Go to blogger
2. Click on design>Page element
3. Click add  HTML/JavaScript where you want your widget to be
4. Under Content paste the following code

 

type="text/javascript">fanbox_init("tripsontricks");type="text>

And replace tripsontricks with your twitter username 

5. Hit save and view your blog


If your widget doesn't fit

Click on the widget to edit and CTRL+F to find "height" and change the value to lower and higher as you need. You can do the same with "Height" to fit your need.


Credit
The creator of this widget is Mark Carey. He created the original code for the the twitter follower box. You can go to the link and follow him to get the origin code.