Best Blogger Designs, Tips, Tricks, Tools and Basic to Advanced Training: February 2019

How To Add Comment Form Under Every Post

BestSellers February 27, 2019 0

Commenting is a very helpful feature for every bloggers,Because They can know what visitors think about their site.We can easily integrate comment form under every post with no extra effort.To do this follow these simple steps.

Now goto "Comment Form Placement" and Check "Embedded below post" Option.

Click on Save Settings.You have successfully embedded Comment form in your blog.

Note : Wait !!! If Above method doesn't work for your template continue with below steps.(including above step)

Go to Layout- -> Edit HTML.

Click on "Expand Widget Templates".

Scroll down to till you see below code:

<b:include data='post' name='comments'/>

Now copy and paste below code immediately below the above code:

<b:include data='post' name='comment-form'/>

Now save your template.You are done.

How To Hide Your Post Date,Time and Author

HTML

BestSellers February 27, 2019 0

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Template"

How To Hide Post Date

Scroll down to where you see this:-

<data:post.dateHeader/>

Now delete this code.

Save Template and preview your site.

How To Hide Post Time

Scroll down to where you see this:-

Now delete this code.

Save Template and preview your site.

How To Hide Post Author

Scroll down to where you see this:-

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Now delete this code.

Save Template and preview your site.

How To Add Search Box to Search in Your Website

HTML

BestSellers February 27, 2019 0

1.Login to your blogger account.Go Layout --> Add a Gadget --> Select “HTML/JavaScript”.

2.Copy below code and paste it.Click save and refresh your site.

Note:Remember to replace "YOUR BLOG URL" and "NAME OF YOUR BLOG" with your
details.
If you want to change the size of your search box than just change the value 20 to 35(any
value you like to get a bigger search box.
You can also change the “Search” button to say, “Hit” or “Go” or "Enter" or "Read more",
by changing the Value in the above html code.

3.You can see search box like below one.

Blogger Tips And Tricks

You can also remove the button "search" from the above search box and place an image for better look. The html code will be:

You can see search box like below one.

How To Add Round Image Corners Generator to blogger

HTML

BestSellers February 27, 2019 0

This is a very useful and simple tool.Try it if you want to create Round Image Corners to your images.

1.Login to blogger dashboard-->Layout > Page Elements

2.Click on 'Add a Gadget'.

3.Select 'HTML/Javascript' and add the code given below and click save.

<form action="http://www.roundpic.com" method="post" enctype="multipart/form-data" target="blank"><input value="1048576" name="MAX_FILE_SIZE" type="hidden"><table><tbody><tr><td class="title"><b>Image:</b></td><td class="input"><input name="file" type="file"></td></tr><tr><td class="title">or <b>URL:</b></td><td class="input"><input value="http://" name="url" type="text"></td></tr><tr><br /><td colspan="2" class="submit"><button onclick="getLoader();" type="submit">Round it!</button></td></tr></tbody></table></form>

Now you are done.Look at the below.

How To Add Google Index Pages Checker

Webmasters

BestSellers February 27, 2019 0

1.Login to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

It will look like this.

Note : To check google index pages ,Enter URL with http:// after the word site:

How to Embed Adsense add unit in Left or Right corner of post content

Website Monetisation

BestSellers February 27, 2019 0

This will explain How to Embed Adsense add unit in Left or Right corner of post content.

Generate Parsed code for adsense code because we cannot put adsense code directly in the xml.So parse it using AdParser.

After parsing,your ad code Should look like this.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:-

<div class='post-header-line-1'/>

4.To place ad Top left corner of your post ,Paste the below code, below of above line.

<div style=”display:block;float:left;margin: 0px 10px 0px 0px;”>
Your Adsense Parsed code
</div>

Attention : We can't put "<div style=”display:block;float:left;margin: 0px 10px 0px 0px;”>" and "</div>" directly in the xml.So we must generate Parsed code for these code using AdParser.

So Final Code you have to copy below the line "<div class='post-header-line-1'/>" ,look like this.

If you Want To place ad Top Right corner of your post,Replace "left" with "right".

5.Click on "Save Templates" and Refresh your site.

How To Add Yahoo Search Box to blogger

HTML

BestSellers February 25, 2019 0

How To Add Yahoo Search Box to blogger

1.Login to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

Note : Remember to replace YOUR-BLOG-URL with your real blog URL.

Look at below.

How To Add Feedburner FeedFlare below your Blog Post

HTML

BestSellers February 25, 2019 0

How To Add Feedburner FeedFlare below your Blog Post

If you want to add the FeedFlare to your blog follow the instruction below.

1. Login to your Feedburner account.

2. Click on the Feed Title.

3. Click on Optimize Tab.

4. Click on FeedFlare.

5. Check on the services you want to display in your Feed or on your Site.

6.There is a FeedFlare Preview/Ordering below the list of services. This lets you see how FeedFlare will appear in your feed and/or on your site. Just Click and Drag the links on the location that you want.

7.Click on "Activate".Now You will get this message.

8.Now in this window Before the Save button, there is a "Get the HTML code to put FeedFlare on your site". Choose the Blogging Platform as "Blogger"

9. A pop-up window will appear and it contains the instructions on how you embed the Feed burner FeedFlare on your blog.Just follow the instructions.Now wait about 20 minutes and refresh your site.Look at the example below.

How To Add Feed Link Button Before All Labels in Blogger

HTML

BestSellers February 25, 2019 0

How To Add Feed Link Button Before All Labels in Blogger

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this code:

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

4.Now replace above code with below code.

<b:loop values='data:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

5.Now save your template and you are done.It will look like this.

Beautiful CSS Search Box For Blogspot Blogs

HTML

BestSellers February 25, 2019 0

Beautiful CSS Search Box For Blogspot Blogs

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

Attractive Subscribe Section + Search Box For Blogger

HTML

BestSellers February 25, 2019 0

Attractive Subscribe Section + Search Box For Blogger

In this article,I am going to explain how to add more attractive Subscribe Section + Search Box to your blogger blog.This subscribe section is included Feedburner feed and Email subscriptions boxes,Twitter and Facebook boxes for your Twitter and Facebook profiles and Social networking buttons(Digg,Twitter,Facebook,Stumbleupon,Delicious) to share your articles among social networks.These social network buttons are powered by www.addthis.com.Above the subscribe section,Search box is included.You don't want to change anything in the search box code.To add this widget to your blogger sidebar without doing any modification,sidebar width must be at least 305 px. You can add this Subscribe Section + Search Box into your blog within few seconds and very easy to configure.If you like to add this widget to your blog or a website,then follow the steps given below.

1.Login to your blogger dashboard --> Design --> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

Save your template.

4.Now go to Design --> Page Elements and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://2.bp.blogspot.com/_4HKUHirY_2U/TKgvwDojM1I/AAAAAAAADgU/tBRpYkXIVho/rss.png"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://1.bp.blogspot.com/_4HKUHirY_2U/TKgvv1xjnUI/AAAAAAAADgE/XnHFsRwk1Js/email.png"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://2.bp.blogspot.com/_4HKUHirY_2U/TKgvvhhVo_I/AAAAAAAADf8/IE38PfZs7sE/twitter.png"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://2.bp.blogspot.com/_4HKUHirY_2U/TKgvv-pobaI/AAAAAAAADgM/1wAlSk8_1yY/facebook.png"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="https://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9fsSTv4I/AAAAAAAAB90/lJxosSNM6jE/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='http://4.bp.blogspot.com/_4HKUHirY_2U/TIb9MH_zqNI/AAAAAAAAB9E/PahHr5GN6dI/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9NTh41aI/AAAAAAAAB9U/2RkBR3wbLBY/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='http://4.bp.blogspot.com/_4HKUHirY_2U/TIb9M5a4BZI/AAAAAAAAB9M/xoWTjnPVepc/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='http://1.bp.blogspot.com/_4HKUHirY_2U/TIb9e_Kpo-I/AAAAAAAAB9s/1WqjOIz3B_A/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9eJ5RTWI/AAAAAAAAB9c/tYvdT6xgaLw/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIb9egD8XSI/AAAAAAAAB9k/rZY5eofO2SY/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

NOTE : Remember to Replace,

FEEDBURNER-ID with your real Feedburner ID.(4 times).
TWITTER-USERNAME with your real Twitter username.
FACEBOOK-USERNAME with your real Facebook username.

You are done.

How To Open Links in New Window or New Tab

HTML

BestSellers February 25, 2019 0

How To Open Links in New Window or New Tab

Any webmaster don't like visitors to leave their site always.So,if we use links to open in new window,our problem will be solved.

We used targe="blank" to open the link in new page.

We can also use target="new" instead of target="_blank".Both are same.

For Text Links
____________________________________
<a href="website URL" target="_blank">website name</a>
____________________________________

See the example below.

<a href="http://howtoblogacademy.blogspot.com" target="_blank">Blogger Templates</a>

It see like this.

Blogger Templates

For Image Links
________________________________________
<a href="website URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description"></a>
________________________________________

See the example below.

It see like this.

Note:If you want You can change width,height,border value,etc... of above codes.

How To Add Background Sound to Blogger

HTML

BestSellers February 25, 2019 0

How To Add Background Sound to Blogger

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see <head> tag.

3.Copy below code and paste it just after <head> tag:

<bgsound src="YOUR-AUDIO-FILE-LINK" loop="-1"/>

Replace "YOUR-AUDIO-FILE-LINK" with your real audio file link.

4.Now save your template and you are done.

Note: This tip works only in internet explorer.

How to Add Skype Link or Button to Your Website

HTML

BestSellers February 25, 2019 0

How to Add Skype Link or Button to Your Website

Do you want to include a link into your website for users to connect with your Skype profile? When an user click on your Skype link, he will be asked to launch his Skype application and he can automatically view your profile, leave a voice mail, send a file, add to contacts, chat with you or can get a call.

To add a Skype link follow this syntax:

skype:profile_name?action

Types of actions are:

chat : to chat
call :to call
voicemail : to leave a voice mail
sendfile : to send a file
add : to add to contacts
userinfo : to view profile

For example, my Skype username is onlineinstitute

Chat Link:

<a href='skype:lasantha.wam?chat'>Chat with Me</a>

Call Link:

<a href='skype:lasantha.wam?call'>Call Me</a>

Leave a Voice Mail:

<a href='skype:lasantha.wam?voicemail'>Leave a Voice Mail</a>

Send a File:

<a href='skype:lasantha.wam?sendfile'>Send a File</a>

Add to Contacts:

<a href='skype:lasantha.wam?add'>Add to Contacts</a>

View Profile:

<a href='skype:lasantha.wam?userinfo'>View Profile</a>

If you want to add a Skype image/button link instead of a text link, just replace the anchor text with <img src='YOUR_IMAGE_URL'/>.

For example:

<a href='skype:lasantha.wam?chat'><img src='YOUR_IMAGE_URL'/></a>

How To Get Know When Googlebot Last Visit

seo

BestSellers February 25, 2019 0

How To Get Know When Googlebot Last Visit

Googlebot is the web crawling bot program (spider) used by Google, which discovers new and updated documents from the web to build a searchable index for the Google search engine.

If you want to display when the last time google bot visit to your site , add your site/blog url going to www.gbotvisit.com and click on "Check Google Bot last visit" button.

Now copy and paste the code provided by gbotvisit.com into your blog/website.

If you are using Blogger, add it to "HTML/JavaScript" box. Final result will look like this.

Google bot last visit powered by Gbotvisit

This image is updated every day.

How To Reduce Bounce Rate Of Your Blog / Website

Basic Blogging Tutorials

BestSellers February 25, 2019 0

How To Reduce Bounce Rate Of Your Blog / Website

Bounce rate is very important factor of your website. It is playing very crucial role with your web site traffic and income. We can explain bounce rate like this. Rate of when visitors came in your website and immediately click back button on your browser.

ZERO BOUNCE WordPress Plugin

This is actually very disadvantage point to your website. It is loss of traffic! Loss of traffic means loss of your sales or income. So, you need to more attention about your bounce rate.

These days bounce rate is major factor to go higher ranking in search engine. So, people are trying to reduce their bounce rate many ways.

If your run WordPress website, I have great news for you to reduce bounce rate and increase your income. It is a WordPress plugin called " ZERO BOUNCE WordPress Plugin " that has great ability to reduce your bounce rate and increase your income. According to their observation 50% -70% your valuable traffic leave your website without spend time in your website. You can redirect them to coupons, discounts, Amazon, and other offers pages. The point is get more sales from that loosing traffic.

ZERO BOUNCE WordPress Plugin

How To Add Featured Post Content Slider to Blogger

HTML

BestSellers February 25, 2019 0

How To Add Featured Post Content Slider to Blogger

This is very smart featured post content slider for your blogger blog or any other site.You can easily add or remove slides to this slider. Also it is very easy to configure. To add this content slider to your web site or blogger blog, follow the steps given below. You can see the demo of this widget HERE.

How To Add Beautiful Subscribe Widget to Blogger

seo

BestSellers February 25, 2019 0

How To Add Beautiful Subscribe Widget to Blogger

Do you like to add a good looking social subscribe widget to your blog? Then simply follow the steps given below.

1.Login to your blogger account and go to "Edit HTML".

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<style type='text/css'>
@import url(https://fonts.googleapis.com/css?family=Lora:400,700);

#subscribe-btt {
    margin: 0;
    padding: 10px;
    background: #eee;
    border: 3px solid #e8e8e8;
}

#subscribe-btt:hover {
    background: #e9e9e9;
    border: 3px solid #ddd;
}

#subscribe-btt h2.mysocialurl {
    border: 0;
    margin: 0 0 8px 0;
    padding: 0 0 0 56px;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    font-family: Lora;
}

#subscribe-btt h2.my-twitter {
    background: url(http://1.bp.blogspot.com/-YMZoxe6YeAU/VjLfx48cbzI/AAAAAAAANS4/-xMF6d-h6pI/s1600/twitter.png) no-repeat top left;
}

#subscribe-btt h2.my-facebook {
    background: url(http://3.bp.blogspot.com/-x3I2mVz4dz0/VjLfvv-E4lI/AAAAAAAANSU/mtI8MA00knA/s1600/facebook.png) no-repeat top left;
}

#subscribe-btt h2.my-googleplus {
    background: url(http://4.bp.blogspot.com/-ZgHjLWTv3hg/VjLfvhnsveI/AAAAAAAANSY/d-so__lf_MU/s1600/google_plus.png) no-repeat top left;
}

#subscribe-btt h2.my-pinterest {
    background: url(http://3.bp.blogspot.com/-QsPPcMl7rrw/VjLfxLofDUI/AAAAAAAANSs/1v1y-fB5pEQ/s1600/pinterest.png) no-repeat top left;
}

#subscribe-btt h2.my-instagram {
    background: url(http://2.bp.blogspot.com/-y1lyKz1gpew/VjLfviE7bHI/AAAAAAAANSk/bK4YGPwJfpI/s1600/instagram.png) no-repeat top left;
}

#subscribe-btt h2.my-linkedin {
    background: url(http://3.bp.blogspot.com/-g8Svw7M45HQ/VjLfwfBFNEI/AAAAAAAANSc/6kG75VOZyiM/s1600/linkedin.png) no-repeat top left;
}

#subscribe-btt h2.my-youtube {
    background: url(http://2.bp.blogspot.com/-B2Mt0Xr7s1Q/VjLfx4_kfqI/AAAAAAAANS8/5xcxmsRniRc/s1600/youtube.png) no-repeat top left;
}

#subscribe-btt h2.my-rss {
    background: url(http://2.bp.blogspot.com/-OTpOGowrvfg/VjLfxSHIbhI/AAAAAAAANS0/VnHf1jK_WLk/s1600/rss.png) no-repeat top left;
}

#subscribe-btt h2.my-email {
    background: url(http://1.bp.blogspot.com/-F3CIjKLAcrU/VjLfw_yOCdI/AAAAAAAANSo/vqPj9oNwe6c/s1600/mail.png) no-repeat top left;
}

#subscribe-btt .mysocialurl a {
    color: #252e28;
    text-decoration: none;
}

#subscribe-btt .mysocialurl a:hover {
    color: #000000;
    text-decoration: underline;
}
</style>

4.Now go to "Layout" and click on "Add a Gadget".

5.Select "HTML/JavaScript" and add the code given below and click "Save".

<div id="subscribe-btt">

<h2 class="mysocialurl my-twitter"><a href="YOUR-TWITTER-URL">FOLLOW ME ON TWITTER</a></h2>

<h2 class="mysocialurl my-facebook"><a href="YOUR-FACEBOOK-URL">FOLLOW ME ON FACEBOOK</a></h2>

<h2 class="mysocialurl my-googleplus"><a href="YOUR-GOOGLE-PLUS-URL">FOLLOW ME ON GOOGLE PLUS</a></h2>

<h2 class="mysocialurl my-pinterest"><a href="YOUR-PINTEREST-URL">FOLLOW ME ON PINTEREST</a></h2>

<h2 class="mysocialurl my-instagram"><a href="YOUR-INSTAGRAM-URL">FOLLOW ME ON INSTAGRAM</a></h2>

<h2 class="mysocialurl my-linkedin"><a href="YOUR-LINKEDIN-URL">FOLLOW ME ON LINKEDIN</a></h2>

<h2 class="mysocialurl my-youtube"><a href="YOUR-YOUTUBE-URL">FOLLOW ME ON YOUTUBE</a></h2>

<h2 class="mysocialurl my-rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>

<h2 class="mysocialurl my-email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>

</div>

NOTE : In above code, replace pink colored codes with your social profile URLs.

Final result will look like this:

Image:
or URL:

Hot

Sponsor

Tags

Extra Ads

Post Top Ad

How To Add Yahoo Search Box to blogger

How To Add Feedburner FeedFlare below your Blog Post

How To Add Feed Link Button Before All Labels in Blogger

Beautiful CSS Search Box For Blogspot Blogs

Attractive Subscribe Section + Search Box For Blogger

How To Open Links in New Window or New Tab

How To Add Background Sound to Blogger

How to Add Skype Link or Button to Your Website

How To Get Know When Googlebot Last Visit

How To Reduce Bounce Rate Of Your Blog / Website

How To Add Featured Post Content Slider to Blogger

How To Add Beautiful Subscribe Widget to Blogger

Post Top Ad

Social

Recent

Popular

Comments

Archive

Sponsor

Make Money Blogging

Tags

About Us

Free Traffic

Labels

Contact Form