How to create a favicon for your blog or website

Favicon is the unique icon you see when visiting a site  to the left corner of the address bar for most browser. It works somewhat like a badge or icon for your site or blog. Either you have  blog or website it is very easy to set up a favicon for your site. Follow the instructions below to know how.

For blogger users:

Blogger has a very simple way to get favicon, all you need it a square image.
Go to Layout>Favicon and upload your picture and save
If you don't know how to get your picture square, follow the steps below

For any other users

• Click on the link below to go to the tool

• Upload your picture there, and click create icon

• Then click download the icon and upload it to wherever you want.

• Right click on the image and click view image

• Copy the URL

• Now replace favicon.ico to the link you just copied and use it on the code below

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

• Insert the code into your section of your website

All done! The favicon might not appear imminently. It can take up to three days.

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

<style type="text/css">
.Buttontext {
    -moz-box-shadow:inset 0px -11px 0px -1px #caefab;
    -webkit-box-shadow:inset 0px -11px 0px -1px #caefab;
    box-shadow:inset 0px -11px 0px -1px #caefab;
    background-color:#77d42a;
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
    display:inline-block;
    color:#306108;
    font-family:arial;
    font-size:28px;
    font-weight:bold;
    padding:16px 24px;
    text-decoration:none;
    text-shadow:-1px 2px 0px #aade7c;
}.Buttontext:hover {
    background-color:#5cb811;
}.Buttontext:active {
    position:relative;
    top:1px;
}

</style>
<a href="#" class="Buttontext">Get this</a>

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 </head> 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!

<style type="text/css">body, a:hover {cursor: url(http://ani.cursors-4u.net/cursors/cur-11/cur1054.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2012/02/11/chrome-pointer.html" target="_blank" title="Chrome Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Chrome Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

<style type="text/css">body, a:hover {cursor: url(http://ani.cursors-4u.net/cursors/cur-11/cur1030.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2012/01/22/x-steel-link-select-2.html" target="_blank" title="X-Steel - Link Select 2"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="X-Steel - Link Select 2" style="position:absolute; top: 0px; right: 0px;" /></a>

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-10/cur955.ani), url(http://cur.cursors-4u.net/cursors/cur-10/cur955.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/12/26/batman-begins-background.html" target="_blank" title="Batman Begins Background"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Batman Begins Background" style="position:absolute; top: 0px; right: 0px;" /></a>

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 ]]></b:skin> 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

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 <li> to </li> 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

 <!-- Twitter Follower Box -->
<script type='text/javascript'>
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 295px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("tripsontricks");</script
type="text>
<!-- End Twitter Follower Box -->

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.