February 2013 ~ Blogger Tricks & Tips

Sunday, February 10, 2013

Sitemap Generator for Blogger

Blogger sitemap generator is great tool for creating sitemaps for your blogger blogs in just a single click. It very easy to generate a sitemap of your blog by using our sitemap generator tool.You can use the final sitemap for submission to search engine and get traffic to your blog.

See also : How to Submit Sitemap to Bing and Yahoo without Errors
How to Submit Sitemap to Google Webmaster Tools

Sitemap Generator Tool

Saturday, February 9, 2013

iFrame Generator Tool for Blog/website

5:04 PM Harikesh 3 comments

This iFrame Generator helps you to instantly create customized iFrames for your website/blog. Fill in the fields below and within seconds you will receive the HTML code for your custom iFrame, simply edit values below and click the "Generate iFrame" button.

Thursday, February 7, 2013

How To Add Floating Share Buttons On Blogger Blog

6:32 PM Harikesh 21 comments

This widget has been created by Nitin .Integrating share buttons widget on your blog is a great way to get free traffic from social bookmarking website such as Twitter, Facebook, Google Plus, Digg and others. Share buttons make it easier for your blog readers and visitors to share posts they find interesting on your blog on social book marking site which will in turn increase your social engagement and page views.

Today, I want to teach you how to add a floating sharing widget for blogger blogs. This floating sharing gadget contains the best social buttons like Facebook Share/Like, Google +1 and Twitter button. This widget has been tested to be compatible with all major browsers.

How To Add Floating Share Buttons On The Sidebar Of Blogger Blog.

Using Widget Generator

Below is a widget generator form that you can easily use to add it to your blogger blog with a click.

1. Firstly, you need to select the type of vertical bar in the generator form
2. Customize the widget to your preferred color
3. Click on the Generate button
4. Finally add it to your blogger blog by clicking on the Add to Blogger button.

Add it Manually

1. Log in to your blogger account and click on Design
2. Click on Add A Gadget on the sidebar.
3. Select HTML/Java Script
4. Paste the code below into the box and save.

<style> /*-------Floating Sharing Widget------------*/ #floatdiv {
position:fixed; bottom:15%; margin-left:-70px; z-index:10; float:left; padding-bottom:2px; } #justNairasidebar {
        background:#fff;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:60px;
        margin:0 0 0 5px; } .fb_share_count_top {width:52px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style>

<div id="floatdiv"> <div id="justnairasidebar">
    <table cellpadding="1px" cellspacing="0">

    <tr>
    <td style="padding:5px 0px 0px 0;"> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0 2px 0;">
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </td>
    </tr>
    <tr>
    <td style=" padding:5px 0px 0px 0px;"> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script> <g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td> <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://blogg-tricks.blogspot.com/2013/02/how-to-add-floating-share-buttons-on.html">Get Widgets</a></p>
    </td>
    </tr>
    </table> </div> </div>

Customization

You can change the background colour of the floating widget to the colour that suits you. To do this, locate background:#fff; in the code above and change the Hex code(#fff) to your preferred colour. Use our online Colour Generator to select a colour.

The widget is align to the left side at default, so if you wish to move it towards the right side or you want to shift it more to the left side, locate margin-left:-70px; in the code above and decrease the numeric value to move it to the right and increase the numeric value to shift it more to the left side.

Tuesday, February 5, 2013

Meta Tag Generator Tool For Blogger

3:52 PM Harikesh 1 comment

Meta description and meta keywords are the most popular html tags which are still recommended despite many arguments by several expert Search engine Optimizers. The first thing that every blogger must do after creating a log is to optimize his template by submitting it to search engines and by adding important meta tags inside the template. To make your job easy I have created a simple Meta Tag Generator Tool below which will help you create important tags within seconds with no SEO knowledge required at all!

Follow these tips for writing best blog description and for choosing the most relevant keywords for your blog.

Meta Description:

Describe your blog in max 150 letters. The Character Counter tool can help you. For example I have chosen the following words for describing my blog,

A Blog about Blogger Tricks, Blogger Templates, Widgets, SEO, Make Money Online, CSS and HTML Tricks etc.

You can choose a similar format to describe your blog with most relevant words.

Note:- I have enclosed the meta description inside a dynamic HTML tag in order to avoid duplicate content issue. Confused? Let me explain. If Meta description appears for all pages in your blog then search engine robots would think that all your pages are having same description. Since robots deal each page as a separate website therefore your blog could get penalized for using same meta description over and over again. To avoid this I have added two pieces of code before and after meta description so that it may appear to robots at homepage only. Following are the two codes added to the tool by default,

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<META NAME="Description" CONTENT="Your Blog description">
</b:if>

Meta Keywords:

Choose words that describe the core topics of your blog. Keywords are high traffic targeted words that define your blog content. Most people use dozens of most competitive keywords but doing this is unnecessary and further effects your search engine listing. Choose few but smart keywords that may reflect the overall content of your blog. Google keyword Tool can immensely help you in choosing the right keywords. The best tip is to use similar keywords as used by your competitors. You can press Ctrl + U to open the source file of your competitor while you are on his blog. Through source file you can easily see what keywords and description your competitor is using.

Write a maximum of three words per keyword and separate each keyword using a comma. See my keywords as an example,

Blogger tricks,blogger tips, SEO guide, make money online, blogger widgets, css html tricks

Meta Author:

This is not a very important tag but still everyone likes to attach his name to his website so why should you left behind! :p Simply write your full name and avoid using nicknames or special symbols.

If you don't want to add your name then simply leave the blank empty in the tool below.

Meta Robot:

Sometimes you don't want search engine robots to crawl and index your blog so you can simply tell the robots that don't crawl the data of the blog using the No follow tag or No index tag. By default blogger tags all blogs as ALL

If you don't want to be bothered with this tag then simply leave the blank empty in the tool below.

Meta Tag Generator

Hex Color Code Chart & Generator

3:51 PM Harikesh 2 comments

Generate Your Own Custom Hex Colors

1. Drag the black bar on the "Hue" selector to generate the desired base color.
2. Next double click inside the Brightness/Saturation grid to activate the cursor. Drag it until the desired brightness is achieved.
The "Swatch" bar shows you the final color result.
3. The hex color code is generated at the bottom of the grid in the "Hex" box. Simply copy and paste the code into your page.

Next...Choose a Color Scheme!

Once you have your hex color value from the chart above, copy and paste it (without the #) into the form below the color wheel and it will generate a matching color scheme for your website.
This is a great tool to use if you're trying to come up with cohesive colors for your navigation, background, hyperlinks, etc.
Remember, it's best to choose 3-4 colors max and use them consistently throughout your website. It will make it look more cohesive.

Popular Hex Colors

#FFFFFF
#000000
#C0C0C0
#808080
#FF0000
#F0A804
#FFFF00
#008000
#0000FF
#800080

HTML Editor

3:50 PM Harikesh No comments

Instant Ad Code Parser + HTML Encoder

3:48 PM Harikesh 1 comment

Hi friends, start using my instant adsense parser tool. This will give your ad code instantly and amazingly fast. Once you enter html the parsed code will be generated and that code when added to a post will be displayed as code not formed.This tool can also be used to parse AdSense code as it needs to be parsed before being added to templates.

Steps for getting parsed code

Go to google.com/adsense.
Create a new ad unit and copy its code.
Paste that code in the first column given below.
Parsed code will be shown in the second column shown below.

Why Adsense Parser ?

Adsense parser has only one use if its name is Adsense parser. If its name is Adsense parser, its using making the Google Adsense ad codes converted to Encoded HTML codes for adding in your blogger template.

We can give it one more name. Do you know what ? The Instant HTML Encoder

You can encode HTML tags instantly.

Enter/paste text to HTML Escape:

Replace newline with <br/>
Replace < > "
Replace space with  
Escape special characters (& and non latin chars)

HTML Escaped result:

Count Characters In Post Titles & Meta Description

3:46 PM Harikesh No comments

To count the number of your Characters you can use the Tool below. This tool counts the number of letters as well as spaces.Enter the text you want to count in the text box and press the Count Them button to count the number of characters.

RGB Color Codes Chart

3:43 PM Harikesh 18 comments

RGB color table

HTML / CSS Name	Hex Code #RRGGBB	Decimal Code (R,G,B)
Black	#000000	(0,0,0)
White	#FFFFFF	(255,255,255)
Red	#FF0000	(255,0,0)
Lime	#00FF00	(0,255,0)
Blue	#0000FF	(0,0,255)
Yellow	#FFFF00	(255,255,0)
Cyan / Aqua	#00FFFF	(0,255,255)
Magenta / Fuchsia	#FF00FF	(255,0,255)
Silver	#C0C0C0	(192,192,192)
Gray	#808080	(128,128,128)
Maroon	#800000	(128,0,0)
Olive	#808000	(128,128,0)
Green	#008000	(0,128,0)
Purple	#800080	(128,0,128)
Teal	#008080	(0,128,128)
Navy	#000080	(0,0,128)

Color Name	Hex Code #RRGGBB	Decimal Code R,G,B
maroon	#800000	(128,0,0)
dark red	#8B0000	(139,0,0)
brown	#A52A2A	(165,42,42)
firebrick	#B22222	(178,34,34)
crimson	#DC143C	(220,20,60)
red	#FF0000	(255,0,0)
tomato	#FF6347	(255,99,71)
coral	#FF7F50	(255,127,80)
indian red	#CD5C5C	(205,92,92)
light coral	#F08080	(240,128,128)
dark salmon	#E9967A	(233,150,122)
salmon	#FA8072	(250,128,114)
light salmon	#FFA07A	(255,160,122)
orange red	#FF4500	(255,69,0)
dark orange	#FF8C00	(255,140,0)
orange	#FFA500	(255,165,0)
gold	#FFD700	(255,215,0)
dark golden rod	#B8860B	(184,134,11)
golden rod	#DAA520	(218,165,32)
pale golden rod	#EEE8AA	(238,232,170)
dark khaki	#BDB76B	(189,183,107)
khaki	#F0E68C	(240,230,140)
olive	#808000	(128,128,0)
yellow	#FFFF00	(255,255,0)
yellow green	#9ACD32	(154,205,50)
dark olive green	#556B2F	(85,107,47)
olive drab	#6B8E23	(107,142,35)
lawn green	#7CFC00	(124,252,0)
chart reuse	#7FFF00	(127,255,0)
green yellow	#ADFF2F	(173,255,47)
dark green	#006400	(0,100,0)
green	#008000	(0,128,0)
forest green	#228B22	(34,139,34)
lime	#00FF00	(0,255,0)
lime green	#32CD32	(50,205,50)
light green	#90EE90	(144,238,144)
pale green	#98FB98	(152,251,152)
dark sea green	#8FBC8F	(143,188,143)
medium spring green	#00FA9A	(0,250,154)
spring green	#00FF7F	(0,255,127)
sea green	#2E8B57	(46,139,87)
medium aqua marine	#66CDAA	(102,205,170)
medium sea green	#3CB371	(60,179,113)
light sea green	#20B2AA	(32,178,170)
dark slate gray	#2F4F4F	(47,79,79)
teal	#008080	(0,128,128)
dark cyan	#008B8B	(0,139,139)
aqua	#00FFFF	(0,255,255)
cyan	#00FFFF	(0,255,255)
light cyan	#E0FFFF	(224,255,255)
dark turquoise	#00CED1	(0,206,209)
turquoise	#40E0D0	(64,224,208)
medium turquoise	#48D1CC	(72,209,204)
pale turquoise	#AFEEEE	(175,238,238)
aqua marine	#7FFFD4	(127,255,212)
powder blue	#B0E0E6	(176,224,230)
cadet blue	#5F9EA0	(95,158,160)
steel blue	#4682B4	(70,130,180)
corn flower blue	#6495ED	(100,149,237)
deep sky blue	#00BFFF	(0,191,255)
dodger blue	#1E90FF	(30,144,255)
light blue	#ADD8E6	(173,216,230)
sky blue	#87CEEB	(135,206,235)
light sky blue	#87CEFA	(135,206,250)
midnight blue	#191970	(25,25,112)
navy	#000080	(0,0,128)
dark blue	#00008B	(0,0,139)
medium blue	#0000CD	(0,0,205)
blue	#0000FF	(0,0,255)
royal blue	#4169E1	(65,105,225)
blue violet	#8A2BE2	(138,43,226)
indigo	#4B0082	(75,0,130)
dark slate blue	#483D8B	(72,61,139)
slate blue	#6A5ACD	(106,90,205)
medium slate blue	#7B68EE	(123,104,238)
medium purple	#9370DB	(147,112,219)
dark magenta	#8B008B	(139,0,139)
dark violet	#9400D3	(148,0,211)
dark orchid	#9932CC	(153,50,204)
medium orchid	#BA55D3	(186,85,211)
purple	#800080	(128,0,128)
thistle	#D8BFD8	(216,191,216)
plum	#DDA0DD	(221,160,221)
violet	#EE82EE	(238,130,238)
magenta / fuchsia	#FF00FF	(255,0,255)
orchid	#DA70D6	(218,112,214)
medium violet red	#C71585	(199,21,133)
pale violet red	#DB7093	(219,112,147)
deep pink	#FF1493	(255,20,147)
hot pink	#FF69B4	(255,105,180)
light pink	#FFB6C1	(255,182,193)
pink	#FFC0CB	(255,192,203)
antique white	#FAEBD7	(250,235,215)
beige	#F5F5DC	(245,245,220)
bisque	#FFE4C4	(255,228,196)
blanched almond	#FFEBCD	(255,235,205)
wheat	#F5DEB3	(245,222,179)
corn silk	#FFF8DC	(255,248,220)
lemon chiffon	#FFFACD	(255,250,205)
light golden rod yellow	#FAFAD2	(250,250,210)
light yellow	#FFFFE0	(255,255,224)
saddle brown	#8B4513	(139,69,19)
sienna	#A0522D	(160,82,45)
chocolate	#D2691E	(210,105,30)
peru	#CD853F	(205,133,63)
sandy brown	#F4A460	(244,164,96)
burly wood	#DEB887	(222,184,135)
tan	#D2B48C	(210,180,140)
rosy brown	#BC8F8F	(188,143,143)
moccasin	#FFE4B5	(255,228,181)
navajo white	#FFDEAD	(255,222,173)
peach puff	#FFDAB9	(255,218,185)
misty rose	#FFE4E1	(255,228,225)
lavender blush	#FFF0F5	(255,240,245)
linen	#FAF0E6	(250,240,230)
old lace	#FDF5E6	(253,245,230)
papaya whip	#FFEFD5	(255,239,213)
sea shell	#FFF5EE	(255,245,238)
mint cream	#F5FFFA	(245,255,250)
slate gray	#708090	(112,128,144)
light slate gray	#778899	(119,136,153)
light steel blue	#B0C4DE	(176,196,222)
lavender	#E6E6FA	(230,230,250)
floral white	#FFFAF0	(255,250,240)
alice blue	#F0F8FF	(240,248,255)
ghost white	#F8F8FF	(248,248,255)
honeydew	#F0FFF0	(240,255,240)
ivory	#FFFFF0	(255,255,240)
azure	#F0FFFF	(240,255,255)
snow	#FFFAFA	(255,250,250)
black	#000000	(0,0,0)
dim gray / dim grey	#696969	(105,105,105)
gray / grey	#808080	(128,128,128)
dark gray / dark grey	#A9A9A9	(169,169,169)
silver	#C0C0C0	(192,192,192)
light gray / light grey	#D3D3D3	(211,211,211)
gainsboro	#DCDCDC	(220,220,220)
white smoke	#F5F5F5	(245,245,245)
white	#FFFFFF	(255,255,255)

Menu

Blogger Tricks & Tips