Add Related Posts Widget With Thumbnails to Blogger

Displaying related posts is a smart way for keeping your site visitors around and with thumbnails it is even smarter!This widgets is one of most popular way to increase to show related post to blogger.After you will add this widget it will start above comment section.The related articles are chosen from other posts in that same category/label/tag.Related post widget help you to show visitor your past and previous stories.It also help to increase page and make readers engaged on reading your blog post.

Features

• Responsive Design
• Fast Loading And SEO Friendly.
• Shows Post of  same category/label/tag.
• Blog Post Title with Thumbnail.
• Easy to Install.

Add This Widget To Blogger

• Go To Blogger Dashboard
• Click On Template Tab
• Now Click On Edit HTML>>Proceed.
• Check the "Expand widgets template"
• Now Find ]]></b:skin>
• Paste Below Code Above ]]></b:skin>

#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}

• Now Find </head> And Paste Below Code Above it

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXOwCH51uowgWNBfUIazIEuW5qfxCjRdOb7QR3KyKCHvr4UYv1QkQXlb_zjLcOZ8-uL2tQrpQWYVi9BiFTWfxTYs4WY315zLre-BypKn0hzJrzZnJuH3JPOauRcJrNzHICzzXOV0SB58I/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
</b:if>

• Now Find  <div class='post-footer'>
• And just above it, copy and paste the below code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://lordhtml.blogspot.com'></a>
</b:if></b:if>

Finally After Adding Lot of code just click on Save Template button and preview this widget on your blog. 

customization

There is not lot of customization in this widget.If you want to manage no. of post display as related post in your blog then customize red color highlighted code.

Automatically Publish Blogger Posts To Facebook,Twitter And Other Social Sites

Social media plays an important role in improving any blog's SEO.That's why you may watch social media gadgets almost on every blog/website.If you have enough number of subscribers on social sites then just automatically publish your posts on social sites and get the traffic.Today I am giving a tutorial about automatically posting on facebook,twitter and some other social sites with using dlvr.it service which is free of cost.I am also using this service to publish my blogger posts facebook and twitter.The reason behind to choose dlvr.it is it is very easy to use and install.You can on-off auto publishing anytime and very easily.Lets see how to use it.

Automatically Publish Blogger Posts On Social Sites

• First go to dlvr.it
• Signup with giving your email address and choosing password.

• Now go to your inbox and confirm your email address first
• You will redirect to another page here you have to provide your feeds address in below format

http://feeds.feedburner.com/FEEDBURNER USERNAME HERE

• Click on twitter icon and you will redirect to twitter
• Give your twitter's profile's username and password and hit "Authorize App" button.Now your posts will automatically publish on twitter.

• Now click on facebook icon.

• You will redirect to facebook page.Log in to your facebook account from which you are managing your fanpage and select your fanpage.
• Customize your services as you wish and save your changes.

That's all about auto posting on social networking.If you know more services then share it using contact form below..

How To Show Off Follower Counts For RSS, Twitter and Facebook Followers

You have seen many mind blowing widgets on wordpress blogs but its now time to make Blogger a better place! Presenting to you just another beautiful and yet useful widget that displays the current number of your blog subscribers, twitter and facebook followers. This widget is based solely on pure CSS and HTML with no JavaScript involved therefore you just need to update the counts manually. At present I am learning programming too so as soon as I develop some good command in programming, I will automate all MBT widgets but at present bear with me as a designer only :p

Take a look on how the widget will look like on a blog with narrow sidebar (The screenshot above is taken on a blog with wide sidebar)

Follow the Steps Below To Add The Follower Counter To Your Blogger Blogs

1. Go To Blogger > Layout
2. Choose Add a Gadget or Add a Page element
3. Select HTML/JavaScript widget
4. Paste the code below inside it,

<style>
.rss-mbt {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh19WdS_UzTabZAP08LgPcbXrgsEOsQgt1MDClxOwS-61PVJD0NnZ8KKcSb6PTkR6T-P5EwowGgW9PRFOUnM1H-86fkMHEgkul6cd9bgLvmsjsHKZDMPrbtojM1Sjvh98OPwuTWND8eoGM/s800/RSS1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}
.twitter-mbt {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4vu6tT_T2qqzr64O2BipxPlTU2mc5C9XijxTCMohu5wWIDhOvy4SsNqerIFEmZy60F9ERZNrGVsJ54re1dYH3NcbVt43h9Uu3eNLCvMjxL0BMREXy4CYhO-FxjwNLKXrzrPZb-rn9dRM/s800/TWITTER1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}
.facebook-mbt {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8n1zk_WFEZq53T6-53CMTNls1hSCAmGFkNU5ZUnZDU3_9wuMCm9-DZinjH8JmZ0RpmRQ_oZhIbmHT-lZyJ7BFDrhMuyW8tKAUEBGXrcn2UQ_qMwC4ttMytMhPaI5ewFJDKX9DDLwSPUc/s800/FACEBOOK1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}
.follower-rss, .follower-twitter, .follower-facebook {
    font-family: Georgia,  sans-serif, Times;
    font-size: 1.1em;
        font-style:italic;
        color:#289728;
}
.follower-rss span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#FFB93C;    
}
.follower-twitter span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#6DB6E6;    
}
.follower-facebook span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#3889BA;    
}
</style>
<div class="rss-mbt">
<div class="follower-rss"> <span>515</span> loyal readers
</div>
<a href="ADD-RSS-FEED-URL-HERE" rel="nofollow">RSS feed</a>
| <a href="ADD-RSS-EMAIL-FEED-URL-HERE" target="_blank" rel="nofollow">E-mail</a>
</div>
<div class="twitter-mbt"><div class="follower-twitter"><span>1058</span> followers</div>                           
<a href="ADD-YOUR-TWITTER-URL-HERE" target="_blank" rel="nofollow" title="I definitely follow you back">Follow us on Twitter!</a>
</div>                       
<div class="facebook-mbt">                       
<div class="follower-facebook"><span>260</span> followers                            </div>                           
<a href="ADD-YOUR-FACEBOOK-URL-HERE" target="_blank" rel="nofollow">Join us on Facebook!</a>
</div>

NOTE:- Make sure to replace the bolded text with the required details (links of your Feedburner, twitter and facebook accounts) and replace the bolded numbers with your current follower counts. For example replace 515  with your current number of Subscribers, replace  1058 with the number of your twitter followers and replace 260 with the number of your facebook followers

     5.    Save and you are done! Now view your blog to see a stunning widget hanging on your sidebar :D

Customization:

I hope it was not difficult to add :). You can replace the images used in this widget with the image links of your choice.

 Kindly let me know how useful do you find this new stylized widget. I would be more than happy to help you with any query you may have. Take good care of your selves and of your dearest ones. Enjoy! :>

How To Add Related Posts Widget To Blogger with Thumbnails

Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Steps adding the Related Posts Widget to Blogger/Blogspot

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML;

Step 2. Check the "Expand widgets template" box;

Step 3. Search (CTRL + F) for this piece of code:

</head>

Step 4. And Copy the below code and paste after </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXOwCH51uowgWNBfUIazIEuW5qfxCjRdOb7QR3KyKCHvr4UYv1QkQXlb_zjLcOZ8-uL2tQrpQWYVi9BiFTWfxTYs4WY315zLre-BypKn0hzJrzZnJuH3JPOauRcJrNzHICzzXOV0SB58I/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Note:
- to change the default picture, replace the URL in blue with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in violet if you want the related posts to be displayed in homepage too

Step 5. Now find the following code:

    <div class='post-footer'>

Step 6. And just above it, copy and paste the below code:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqCvdG8LvF7cqPd3V9l7V9cf9ytrpirKcXbT0EikAVa9i1_HDU9eGeBrqf1aKzP8K4i5VznokX38LKzXa8pCTsf_hYUgGWsrzXMxZIVWfTXEFEG9NINkBIBA-ylG0fd2QgSIl4b2ULg2IZ/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Note:
- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in violet.

Step 7. Save the Template

Enjoy :)

How to Add Simple Related Posts or Related Articles List Widget For Blogger

In the last tutorial, i've been talking about the Related Posts widget that shows related posts along with thumbnails just at the end of your blog articles. Some of the users, however, would prefer a simpler and cleaner displaying of their related posts so that it would show just the posts titles. So let's begin adding it!

How to add Related Posts Widget to Blogger

Step 1. Go to Template >> Edit HTML and tick the "Expand Widget Templates" checkbox

Step 2. Find the below tag

</head>

Step 3. And Copy the below code and paste after </head>

<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #555555;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}

#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->

Note:
- if you want to change the size and color of 'Related Posts' title, change the bolded values (17 for the font size and black for the color)

-to change the related post title color, replace the value in red;
-to change the background color on mouseover, replace the color value in blue;

Step 4. Now find (CTRL + F) the below line:

    <div class='post-footer'>

Step 5. Just above it, paste the code below:

<!-- Related Posts Code Start-->
<!--Remove-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End-->

Note: In order to change the number of maximum related posts being displayed for each label, search for the code max-results=5 and change the number "5" to any desired number.

Step 6. Now Save your Template

Enjoy!!!

How To Allow Your Blog To Index On Search Engine

    We will be very happy when our blog's name/address comes on search engines or search result. I know ,how much happy was that,Really amazing :) .
    But most Blog's didn't find's on search results.When we search any topics,most of the results were from Registered domains .
Don't you ever thing why it so ?
 It s due to lack of Search engine Optimization works,(Don't bother about it right now) , ere we do the first step of SEO of blog.

If you getting started with blogger you must allow your blog to show up in search Results.Here we go,

• Login to Blogger with your email id and Password; And go to your blog.
• Now,Go to Settings >> basic  on left sidebar of your blogger, 

  Check out "Let search engines find your blog ? " Make this as 'YES' .

• . And click on 'Save Changes' .

Now onwards, Search engines will index your blog on their search results.Remember it is no a instant process it will take its own time to index in search results.

Nest step of SEO work is nothing but adding your blog into Google Webmaster Tool.

How To Know Online Users through Google Analytics

Google analytics has introduced beta Real time web-tool which provides you all the details of online visitors of your website/blog.It includes Location he comes,pageviews,keyword that visitor used,top referrals , active pages and more than you need.

 There exist many web tools to find Online users of your blog/website.But i recommend you to use this feature because it gives you more than others and customizable gadgets make you more easy

How To Delete Blog In New Blogger Interface

Deletion of blog was quite simple in New Blogger Interface.Let you know how was deletion of blog in Old Blogger Interface.Simply go to settings and Delete blog.

Let me guide you how do I delete blogger blog in new Blogger interface.

• Login to blogger with Email ID and Password.Then Choose your blog from the list(If you own two  or more blog in one account).
• Now go to 'Settings', after Click on 'Other' ion left sidebar.

• Now Click on 'Delete blog' on Top .

• Then new warning box will appear,If you need Backup of your blog, you can download from here itself .Then Click on 'Delete blog' Button. 

• Now your Blog get deleted .

Note: Deleted bog can restore within 90 days before they removed forever .

How to Add 3D Social Icons With Rotate Spin Effect To Wordpress And Blogger

This week we gave away a freebie set of 3D Social Icons with names, the social icons set was very popular with almost 500 downloads in 3 days ! At the time of writing I am using these Icons here on How To All Tools.I have added a few effects to the icons.The main effect and I have received a lot of comments and Emails on this is Css rotate.With the Css rotate when you place your cursor over each icon they spin 360 degrees, they then spin back 360 when the cursor is removed (Cool eh).I also have a slight opacity hover effect on the icons.So in this post I will show you how to add the icons to your blog, linked to your social profiles and feeds.

Live Demo

Here are the icons is full working order, see what happens when you place your cursor over them ; don't be afraid to click them and follow us.

Add The Social Icons With Css Effects To Your Blog

OK so I have two tutorials, one for Blogger and one for Wordprtess.

Wordpress Tutorial

1) In Your Wordpress Dashboard Click 'Apperance' > 'Widgets' > Add A text Widget to your sidebar and paste the below code.

Widget Code

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp80vW4FA6aiz6ELm2vXHtAwPT88gvTbj23IDomxuFCmag78BRccogz13gmeEh9XeMVbC9iYyM9cVkrZlQy24pMBIEJPO05bAd3P9vVo7MP2Eb7J_HxJmnPCv2qgN0JCuSlvgKKbf_U1P4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2chRsY2eIcI2LXigCsDgDS9SYhkSDWGehFK2RnVoPtONOnkiowol8TGRCXLtlpnmzL7z6Kda4E4vvoNK9DtnJnVGbuZ7Y2STOmQ_xOcnrAfXhJYKgimypeVl7LWS7v4YP5IwAlv-AnXtK/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTVPfDV_QPSpctdbbcJMLinoAMcgBbbwL5o5b2SNoD5m2l6RiuxKvvMrUTyWW7dI6WCkJj2IjM7Sgn2xxXfSsUUbPNnWUPZ5_PM7H0BtuV1wNcPbWLbQBHhR7dQUt8TwXKVOd7Z8t3VMyK/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgefw8O15loOgeRx3s5sBOLya3ow7dCmRj-aWqCQ633apRAMpoe0O40TN6zdLya1yX2JbqIGQrNzx_tXuI-2x24uUC9YN6_MCK1aNC3TwLVoqhcGlRgCG9Ax-UvBMSsbWsQRac04JhMEDEw/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLh27oseSFP1Wv8T5oKGs70vYFX3ZCyP0bXgRjyMfrFGzBEoO0Ltd5nT3-iepy9yvAsT2OZm7MecMnNLVz3q4mJH_51orbpyR8RzgjBr25OpBmFbB0j39qJU5SURyMspKkgumCuunC9p46/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEignM8OJYteD5Ai_1z2u58Bz05h5k5Un9vbVAxHueUQsczb2sdSjdXOMuGKeInvR-86tfQ9jdQ5XiSFgO76-g92qE0eCvZ-Kv8mZnM6WvBxbmDRkArIlGkz32lv9shG_aV2uBcr4b0fOW7X/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="Howtoalltools.blogspot.com" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

Important - Replace the yellow sections with your social profiles and feed URLs.

Note - If your familiar with Wordpress you can off course add the Css to your theme stylesheet.

Remove some of the icons - I have the code for each icon between tags like this <!--Start Rss Icon-->Code here<!--End Rss Icon-->>, to remove an icon remove the code between the tags.So for pinterest you will remove the code between the Start Pinterest and End Pinterest tags etc...

Blogger Tutorial

1) In the new Blogger dashboard click the drop down menu for your blog > Choose 'Layout' > Click 'Add A Gadget' > Choose 'Html Javascript' > Paste Below Code.
 Widget Code

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp80vW4FA6aiz6ELm2vXHtAwPT88gvTbj23IDomxuFCmag78BRccogz13gmeEh9XeMVbC9iYyM9cVkrZlQy24pMBIEJPO05bAd3P9vVo7MP2Eb7J_HxJmnPCv2qgN0JCuSlvgKKbf_U1P4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2chRsY2eIcI2LXigCsDgDS9SYhkSDWGehFK2RnVoPtONOnkiowol8TGRCXLtlpnmzL7z6Kda4E4vvoNK9DtnJnVGbuZ7Y2STOmQ_xOcnrAfXhJYKgimypeVl7LWS7v4YP5IwAlv-AnXtK/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTVPfDV_QPSpctdbbcJMLinoAMcgBbbwL5o5b2SNoD5m2l6RiuxKvvMrUTyWW7dI6WCkJj2IjM7Sgn2xxXfSsUUbPNnWUPZ5_PM7H0BtuV1wNcPbWLbQBHhR7dQUt8TwXKVOd7Z8t3VMyK/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgefw8O15loOgeRx3s5sBOLya3ow7dCmRj-aWqCQ633apRAMpoe0O40TN6zdLya1yX2JbqIGQrNzx_tXuI-2x24uUC9YN6_MCK1aNC3TwLVoqhcGlRgCG9Ax-UvBMSsbWsQRac04JhMEDEw/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLh27oseSFP1Wv8T5oKGs70vYFX3ZCyP0bXgRjyMfrFGzBEoO0Ltd5nT3-iepy9yvAsT2OZm7MecMnNLVz3q4mJH_51orbpyR8RzgjBr25OpBmFbB0j39qJU5SURyMspKkgumCuunC9p46/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEignM8OJYteD5Ai_1z2u58Bz05h5k5Un9vbVAxHueUQsczb2sdSjdXOMuGKeInvR-86tfQ9jdQ5XiSFgO76-g92qE0eCvZ-Kv8mZnM6WvBxbmDRkArIlGkz32lv9shG_aV2uBcr4b0fOW7X/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="Howtoalltools.blogspot.com" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

Important - Replace the yellow sections with your social profiles and feed URLs.

Remove some of the icons - I have the code for each icon between tags like this <!--Start Rss Icon-->Code here<!--End Rss Icon-->>, to remove an icon remove the code between the tags.So for pinterest you will remove the code between the Start Pinterest and End Pinterest tags etc...

That's it you have a very cool subscribe section on your blog.

Drop Your Comments And Questions Below.