How To All Tools

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 == "item"'>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXOwCH51uowgWNBfUIazIEuW5qfxCjRdOb7QR3KyKCHvr4UYv1QkQXlb_zjLcOZ8-uL2tQrpQWYVi9BiFTWfxTYs4WY315zLre-BypKn0hzJrzZnJuH3JPOauRcJrNzHICzzXOV0SB58I/s1600/no_image.jpg";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</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.

This facebook comment box is an upgraded version of facebook comment form which enable admin to receive notification directly into there facebook account whenever comment is been drop on your blog/site and provide a reply option. facebook developers introduce this comment box around 2009, but having some little problem in the initial days of the development, but working perfectly well now.
In this tutorial it is not compulsory you disable your blogger comment box, you can use the both comment box to provide different options to your readers commenting on your blog.

Let's Get This Applied To Your Blog/Site

STEP 1= How to GET your Facebook App ID

Go to facebook developers page to get your App ID
Click "+Create New Application"
Click "Go to App" > "+Create New App"
A window will pop up enter your desired name and click "Continue" as shown below.

In the next window that appear, you will need to fill some box as shown in the image below.

Enter Blogspot.com to where the red arrow is pointing.
Enter your blog/site url to where the purple arrow is pointing, in this format http://www.howtoalltools.blogspot.com/
Copy your App ID from where the brown arrow is pointing and paste it into a notepad.
Click "Save Changes"

STEP 2= Adding Facebook Comment Box

Login to your blogger dashboard
Click on "Design" > "Edit HTML" please make sure you back up your template
Mark/Tick "Expand Widget Template"
Use ctrl F to find <html
Give a space after </html tag and paste the code below after it.

xmlns:fb='http://www.facebook.com/2008/fbml'

Note : Give space at both ends of the code above.
Example: ----***</html xmlns:fb='http://www.facebook.com/2008/fbml' ***---

Find the next code <body>, if you can find that, then find

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Paste the code below immediately after any of the code you find.

<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId : 'App ID',
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml : true // parse XFBML
    });
};
    (function() {
    var e = document.createElement('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>

Replace App ID with your application id which you copied in the first step.

Find the next code </head> and paste the code below Before/Above the </head> tag.

Replace How To All Tools with your blog title
Replace Blog logo url with your blog logo image url, this will appear next to your post title when you post is shared by readers.
Replace App ID with your application id, which you copied in the first step.
Replace http://www.facebook.com/Howtoalltools with your facebook profile url.
Now find the code below

Paste the code below immediately below/after the code above.

<b:if cond='data:blog.pageType == "item"'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='How To All Tools' href='http://www.howtoalltools.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Howtoalltools'>How To All Tools</a></b> Grab this Widget <b><a alt='How To All Tools' href='http://howtoalltools.blogspot.com/2012/01/facebook-comments-box-for-blogger-in.html' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>How To ALl Tools</a></b></div></div>
</b:if>

To specify the type of background you want, change light above to dark, if you want a dark scheme.
To change the comment box size, edit width='520'
To change the footer credits size, edit width:510px
The difference between the comment box and the footer box should not exceed or below 10px.
Click "SAVE TEMPLATE"

Below is the preview of the two type of comment box

LIGHT COMMENT BOX

DARK COMMENT BOX

STEP 3= How To Go About The Notification

The process seems to be long, don't worry we are almost there. To get notification you will need to add to some code your blog, and you will be receiving notification directly into your facebook account as shown below

Let's get this done

Login to your blogger dashboard
Click on "Design" > "Edit HTML"
Mark/Tick "Expand Widget Templates"
Use ctrl F to find <b:skin><![CDATA[/ and paste the code below directly Above/Before it.

Replace Facebook profile Id with your facebook profile id, read how to get facebook profile id for guidance on how to get that.
Replace "App ID" with your application id, which you copied in the first step.
Click "SAVE TEMPLATE"

STEP 4= How To Moderate And Reply To Comment

Go to http://developers.facebook.com/tools/comments
Click "settings", in the window that pop up, add your full facebook profile name as the "Moderators", you can also reply to comment directly from the page.
Click "Save"

If you want to hide the blogger default comment box

Go to "Settings" > "Comments" > Mark the hide button, that's all.
If you have any problem with this don't hesitate to ask, and we ready to render our full support for you, and please don't try to remove the footer credits, to show us appreciation in return.

Do you know you can receive all our great tutorials directly into your email, even if you are offline, so to enable this simply subscribe to this blog now, and share this with friends/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

Go To Blogger > Layout
Choose Add a Gadget or Add a Page element
Select HTML/JavaScript widget
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! :>

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>

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

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:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</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>

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 :)

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>

<b:if cond='data:blog.pageType == "item"'>
<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="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
</b:if>

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:

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

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

Add The Social Icons With Css Effects To Your Blog

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">  <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>   <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>   <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>   <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>   <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>   <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>  </div><br/>  <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> </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 Code here>, 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">  <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>   <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>   <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>   <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>   <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>   <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>  </div><br/>  <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> </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 Code here>, 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.

Generate Your Own Custom Hex Colors

How To All Tools
Hex Color Code Generator

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.

Popular Hex Colors

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

Content On this page can not be republished.

dding subscription box below your each post is another best way of increasing your blog subscribers. This widget comprises of a subscription box, RSS link, twitter link, facebook link, and google + link. It will appear at the bottom of your post and this is one of the best way to get your readers attention.

How To Add The Subscription Box

Go to your blogger dashboard
Click on "Design" > "Edit HTML" > Back up your template
Mark/Tick "Expand Widget Templates"
Use crtl F to find the code below

<div class='post-footer'>

Now paste the code below immediately Before the code above

<b:if cond='data:blog.pageType == "item"'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.RBstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJrYbQ97FO3F8F-OKxltgj31tVvNT0zS_9tdK62qSU-4aMclI126xsdB6Su25Xre9Z8UwPM_coSYgyPZKx-lrfgvhpUdXdeIA9Ebp9Ewd4XhaVs6UuhM_RCicFpDP1C2LgRrwwCNnKEbox/s400/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.RBsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>

<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>

<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=HowToAllToolsTopTutriolsToolsAndTips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='Realcombiz'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='RBstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>

<input alt='' class='RBsubmit' title='' type='submit' value='Submit'/>
</form>
</td>

<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=HowToAllToolsTopTutriolsToolsAndTips' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyE_twNF_lbzDlHYBsK-CDA5Z-vO5i3flfGzvahgEvw_M3-Ss_jYW4yoryWEHuyEgnKBHiDpBtsnUWNnogrdctoRMEUJUe983YGQA2FkldPq-Nq9pCv6u48iqF3-2KyOQKSuEb9NjwxVI/s1600/rss-30×43.png'/></a>

<a href='http://twitter.com/Howtoalltools' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1jZQZPTRgekApzK250fVGxTnTT8QeMcLDk0HNaYy2hJuzIOyBWIfPX1_aH0QPe0gL0Owq-mUk44nD-w2wyGCUW-brfsS3M9umFY9k2wwrLTmXTgCvessbSJvkQOpWSoqIUFWdaIrUsq0/s1600/twitter-30×43.png'/></a>

<a href='http://www.facebook.com/Howtoalltools' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeJGV3gUHhjh0rq1s3nZ1n625ynOItVQyCooIOiCtAM_3JBKkAHXs2F_Jn_mGZjEjelklUyUKeq7M923pin6nRW0PCZw4aXsSefue9JPh58HzajIPoGisE2ahN3WW2BTEY8kuTT2ZQuBA/s1600/facebook-30×43.png'/></a>

<a href='https://plus.google.com/u/0/114198260034907980206/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt3BzEhoFeipo-3yhh3L9WLi51_SRgObWFp3jtW4bfkqXdTQY7fbDyyqi5t6wnm8L3EQUJtd_7qzui7NpEQ7OxEoZXPHlYIcAuPDWmYoaWim9a7e79IStQnbyywymA5fAipVMxUEJuhQg/s1600/googleplus-30×43.png'/></a>

</td>
</tr>
</tbody></table>
<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://howtoalltools.blogspot.com/2013/02/add-stylish-subscription-box-with-share.html' style='text-decoration: none;' target='_blank'><font color='#ffffff' decoration='none'>[Get this widget]</font></a></span></div>
</div></div>
</center>
</b:if>

Replace http://feedburner.google.com/fb/a/mailverify?uri=HowToAllToolsTopTutriolsToolsAndTips with your your feedburner url
Replace http://twitter.com/Howtoalltools with your twitter profile url
Replace http://www.facebook.com/Howtoalltools with your facebook page url
Replace https://plus.google.com/u/0/114198260034907980206/ with your google + profile url
Click "SAVE TEMPLATE"

Hope you love this eye-catching subscription box? share your view about this. Don't forget to subscribe and share this post.

After a little break, i think i should come back with something unique, so i will will be sharing with how you can add a five different social media widget to your blog/site.
This widget comprises of facebook like box, twitter follower box, Google plus, Youtube and RSS feed subscribe box, and this widget will slide out smoothly when you place your cursor on any of the widget, due to the jQuery effect that is included.
Follow the simple procedure below on how you can use this five stylish widgets to spice up your blog/site.

How To Add The Widget To Your Blog

STEP 1

Login to your blogger dashboard
Click on "Design" > "Edit HTML" > back up your template
Use ctrl F to find </head> and paste the following code above/before </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready (
function(){jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },
function(){ jQuery("#facebook_right").stop(true,false).animate({right: -249}, 500); }); 
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -264}, 500); }); 
jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },
function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -323}, 500); }); 
jQuery("#youtube_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },
function(){ jQuery("#youtube_right").stop(true,false).animate({right: -303}, 500); }); 
jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },
function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); 
});
</script>

Click "SAVE TEMPLATE"

STEP 2

Go to "Design" > "Page Elements" > "Add a Gadget"
Choose "HTML/JavaScript" from the list of the gadget that appear in the pop-up window
Copy and paste the code below in the content box leaving the title box blank.

Replace howtoalltools with your facebook fan page username
Replace howtoalltools with your twitter username
Replace howtoalltools with your youtube username
Replace http://feedburner.google.com/fb/a/mailverify?uri=HowToAllToolsTopTutriolsToolsAndTips with your feedburner url
Replace HowToAllToolsTopTutriolsToolsAndTips with your feedburner username
Click "Save" when you are through with your editing

Add The V3 Complete Sexy Bookmarks Gadget To Your Blog

Add The V3 Complete Sexy Bookmarks Gadget To Your Blog

Step 1. In Your Blogger Dashboard Click Design > Edit Html > Tick The Expand Widget Templates Box

Step 2. Find the following piece of code in your blogs Html

</head>

Step 3. Copy and Paste the following code directly Above / Before </head>

-If you previously added jQuery to your blog you can remove the line in yellow.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'
type='text/javascript' />
<link href='http://bloggerblogwidgets.googlecode.com/svn/trunk/auto-hide-social-bookmarking-way2blogging.css'
rel='stylesheet' type='text/css' />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
var sexyBaseHeight = jQuery('.sexy-bookmarks').height();
var sexyFullHeight = jQuery('.sexy-bookmarks ul.socials').height();
if (sexyFullHeight > sexyBaseHeight) {
jQuery('.sexy-bookmarks-expand').hover(

function() {
jQuery(this).animate({
height: sexyFullHeight + 15 + 'px'
}, {
duration: 800,
queue: false
});
}, function() {
jQuery(this).animate({
height: sexyBaseHeight + 'px'
}, {
duration: 800,
queue: false
});
});
}
if (jQuery('.sexy-bookmarks-center')) {
var sexyFullWidth = jQuery('.sexy-bookmarks').width();
var sexyBookmarkWidth = jQuery('.sexy-bookmarks:first ul.socials li').width();
var sexyBookmarkCount = jQuery('.sexy-bookmarks:first ul.socials li').length;
var numPerRow = Math.floor(sexyFullWidth / sexyBookmarkWidth);
var sexyRowWidth = Math.min(numPerRow, sexyBookmarkCount) * sexyBookmarkWidth;
var sexyLeftMargin = (sexyFullWidth - sexyRowWidth) / 2;
jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin + 'px');
}
});
</script>

Step 4. Find the following piece of code in your blogs Html

<div class='post-footer'>

- If you cant find this use <data:post.body/>
instead.

Step 5. Copy and Paste the following code Directly Below / Under <div class='post-footer'>

<b:if cond='data:blog.pageType == "item"'>
<div id='post-width-w2b' style='width:550px;'>
<div class='sexy-bookmarks-bg-sexy sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center '>
<ul class='socials'>
<li class='sexy-twitter'>
<a class='external' expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'/>
</li>
<li class='sexy-facebook'>
<a class='external' expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'/>
</li>
<li class='sexy-linkedin'>
<a class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'/>
</li>
<li class='sexy-stumbleupon'>
<a class='external' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'/>
</li>
<li class='sexy-delicious'>
<a class='external' expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'/>
</li>
<li class='sexy-digg'>
<a class='external' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'/>
</li>
<li class='sexy-googlebuzz'>
<a class='external' expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on Google Buzz'/>
</li>
<li class='sexy-blogger'>
<a class='external' expr:href='"http://www.blogger.com/blog_this.pyra?t&u=" + data:post.url + "&n=" + data:post.title + "&pli=1"' rel='nofollow' title='Blog this on Blogger'/>
</li>
<li class='sexy-yahoomail'>
<a class='external' expr:href='"http://compose.mail.yahoo.com/?Subject= " + data:post.title + "&body=Link:"+ data:post.url' rel='nofollow' title='Email this via Yahoo! Mail'/>
</li>
<li class='sexy-gmail'>
<a class='external' expr:href='"https://mail.google.com/mail/?ui=2&view=cm&fs=1&tf=1&su=" + data:post.title + "&body=Link:" + data:post.url' rel='nofollow' title='Email this via Gmail'/>
</li>
<li class='sexy-googlebookmarks'>
<a class='external' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Add this to Google Bookmarks'/>
</li>
<li class='sexy-googlereader'>
<a class='external' expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcUrl=" + data:post.url + "&srcTitle=" + data:post.title + "&snippet="' rel='nofollow' title='Add this to Google Reader'/>
</li>
<li class='sexy-comfeed'>
<a class='external' expr:href='data:blog.homepageUrl + "feeds/" + data:post.id + "/comments/default?alt=rss"' rel='nofollow' title='Subscribe to the comments for this post?'/>
</li>
<li class='sexy-orkut'>
<a class='external' expr:href='"http://promote.orkut.com/preview?nt=orkut.com&tt=" + data:post.title + "&du=" + data:post.url + "&cn="' rel='nofollow' title='Promote this on Orkut'/>
</li>
<li class='sexy-designbump'>
<a class='external' expr:href='"http://designbump.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&body="' rel='nofollow' title='Bump this on DesignBump'/>
</li>
<li class='sexy-reddit'>
<a class='external' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'/>
</li>
<li class='sexy-designfloat'>
<a class='external' expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this to DesignFloat'/>
</li>
<li class='sexy-friendfeed'>
<a class='external' expr:href='"http://www.friendfeed.com/share?title=" + data:post.title + "&link=" + data:post.url ' rel='nofollow' title='Share this on FriendFeed'/>
</li>
<li class='sexy-dzone'>
<a class='external' expr:href='"http://www.dzone.com/links/add.html?url=" + data:post.url + "&title=" + data:post.title + "&description="' rel='nofollow' title='Add this to DZone'/>
</li>
<li class='sexy-webblend'>
<a class='external' expr:href='"http://thewebblend.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&body="' rel='nofollow' title='Blend this!'/>
</li>
<li class='sexy-propeller'>
<a class='external' expr:href='"http://www.propeller.com/submit/?url=" + data:post.url ' rel='nofollow' title='Submit this story to Propeller'/>
</li>
<li class='sexy-tumblr'>
<a class='external' expr:href='"http://www.tumblr.com/share?v=3&u=" + data:post.url + "&t=" + data:post.title ' rel='nofollow' title='Share this on Tumblr'/>
</li>
<li class='sexy-squidoo'>
<a class='external' expr:href='"http://www.squidoo.com/lensmaster/bookmark?" + data:post.url ' rel='nofollow' title='Add to a lense on Squidoo'/>
</li>
<li class='sexy-posterous'>
<a class='external' expr:href='"http://posterous.com/share?linkto=" + data:post.url + "&title=" + data:post.title + "&selection="' rel='nofollow' title='Post this to Posterous'/>
</li>
<li class='sexy-technorati'>
<a class='external' expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'/>
</li>
<li class='sexy-hotmail'>
<a class='external' expr:href='"http://mail.live.com/?rru=compose?subject=" + data:post.title + "&body=Link: " + data:post.url ' rel='nofollow' title='Email this via Hotmail'/>
</li>
<li class='sexy-bebo'>
<a class='external' expr:href='"http://www.bebo.com/c/share?Url=" + data:post.url + "&Title=" + data:post.title ' rel='nofollow' title='Share this on Bebo'/>
</li>
<li class='sexy-blinklist'>
<a class='external' expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=" + data:post.url + "&Title=" + data:post.title ' rel='nofollow' title='Share this on Blinklist'/>
</li>
<li class='sexy-blogengage'>
<a class='external' expr:href='"http://www.blogengage.com/submit.php?url=" + data:post.url ' rel='nofollow' title='Engage with this article!'/>
</li>
<li class='sexy-blogmarks'>
<a class='external' expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Mark this on BlogMarks'/>
</li>
<li class='sexy-boxnet'>
<a class='external' expr:href='"https://www.box.net/api/1.0/import?url=" + data:post.url + "&name=" + data:post.title + "&description=&import_as=link"' rel='nofollow' title='Add this link to Box.net'/>
</li>
<li class='sexy-current'>
<a class='external' expr:href='"http://current.com/clipper.htm?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Post this to Current'/>
</li>
<li class='sexy-diigo'>
<a class='external' expr:href='"http://www.diigo.com/post?url=" + data:post.url + "&title=" + data:post.title + "&desc="' rel='nofollow' title='Post this on Diigo'/>
</li>
<li class='sexy-ekudos'>
<a class='external' expr:href='"http://www.ekudos.nl/artikel/nieuw?url=" + data:post.url + "&title=" + data:post.title + "&desc="' rel='nofollow' title='Submit this to eKudos'/>
</li>
<li class='sexy-evernote'>
<a class='external' expr:href='"http://www.evernote.com/clip.action?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Clip this to Evernote'/>
</li>
<li class='sexy-hackernews'>
<a class='external' expr:href='"http://news.ycombinator.com/submitlink?u=" + data:post.url + "&t=" + data:post.title ' rel='nofollow' title='Submit this to Hacker News'/>
</li>
<li class='sexy-hyves'>
<a class='external' expr:href='"http://www.hyves.nl/profilemanage/add/tips/?name=" + data:post.title + "&text=Text about this site+-+" + data:post.url + "&rating=5"' rel='nofollow' title='Share this on Hyves'/>
</li>
<li class='sexy-identica'>
<a class='external' expr:href='"http://identi.ca//index.php?action=newnotice&status_textarea=Reading:" + data:post.title + "+-+from+" + data:post.url ' rel='nofollow' title='Post this to Identica'/>
</li>
<li class='sexy-jumptags'>
<a class='external' expr:href='"http://www.jumptags.com/add/?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this link to JumpTags'/>
</li>
<li class='sexy-mail'>
<a class='external' expr:href='"mailto:?subject=%22" + data:post.title + "%22&body=Link: " + data:post.url + " (sent via Way2blogging) "' rel='nofollow' title='Email this to a friend?'/>
</li>
<li class='sexy-meneame'>
<a class='external' expr:href='"http://meneame.net/submit.php?url=" + data:post.url ' rel='nofollow' title='Submit this to Meneame'/>
</li>
<li class='sexy-misterwong'>
<a class='external' expr:href='"http://www.mister-wong.com/addurl/?bm_url=" + data:post.url + "&bm_description=" + data:post.title + "&plugin=sexybookmarks"' rel='nofollow' title='Add this to Mister Wong'/>
</li>
<li class='sexy-mylinkvault'>
<a class='external' expr:href='"http://www.mylinkvault.com/link-page.php?u=" + data:post.url + "&n=" + data:post.title ' rel='nofollow' title='Store this link on MyLinkVault'/>
</li>
<li class='sexy-myspace'>
<a class='external' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "&t=" + data:post.title ' rel='nofollow' title='Post this to MySpace'/>
</li>
<li class='sexy-netvibes'>
<a class='external' expr:href='"http://www.netvibes.com/share?title=" + data:post.title + "&url=" + data:post.url ' rel='nofollow' title='Submit this to Netvibes'/>
</li>
<li class='sexy-netvouz'>
<a class='external' expr:href='"http://www.netvouz.com/action/submitBookmark?url=" + data:post.url + "&title=" + data:post.title + "&popup=no"' rel='nofollow' title='Submit this to Netvouz'/>
</li>
<li class='sexy-newsvine'>
<a class='external' expr:href='"http://www.newsvine.com/_tools/seed&save?u=" + data:post.url + "&h=" + data:post.title ' rel='nofollow' title='Seed this on Newsvine'/>
</li>
<li class='sexy-ning'>
<a class='external' expr:href='"http://bookmarks.ning.com/addItem.php?url=" + data:post.url + "&T=" + data:post.title ' rel='nofollow' title='Add this to Ning'/>
</li>
<li class='sexy-pingfm'>
<a class='external' expr:href='"http://ping.fm/ref/?link=" + data:post.url + "&title=" + data:post.title + "&body="' rel='nofollow' title='Ping this on Ping.fm'/>
</li>
<li class='sexy-plaxo'>
<a class='external' expr:href='"http://www.plaxo.com/?share_link=" + data:post.url ' rel='nofollow' title='Share this on Plaxo'/>
</li>
<li class='sexy-plurk'>
<a class='external' expr:href='"http://www.plurk.com/m?content=9+beautiful+web+forms+for+free+download+-+" + data:post.url + "&qualifier=shares"' rel='nofollow' title='Share this on Plurk'/>
</li>
<li class='sexy-printfriendly'>
<a class='external' expr:href='"http://www.printfriendly.com/print?url=" + data:post.url ' rel='nofollow' title='Send this page to Print Friendly'/>
</li>
<li class='sexy-slashdot'>
<a class='external' expr:href='"http://slashdot.org/bookmark.pl?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this to SlashDot'/>
</li>
<li class='sexy-sphinn'>
<a class='external' expr:href='"http://sphinn.com/index.php?c=post&m=submit&link=" + data:post.url ' rel='nofollow' title='Sphinn this on Sphinn'/>
</li>
<li class='sexy-techmeme'>
<a class='external' expr:href='"http://twitter.com/home/?status=Tip+@Techmeme+" + data:post.url + "--" + data:post.title + "&source=Way2blogging"' rel='nofollow' title='Tip this to TechMeme'/>
</li>
<li class='sexy-tipd'>
<a class='external' expr:href='"http://tipd.com/submit.php?url=" + data:post.url ' rel='nofollow' title='Share this on Tipd'/>
</li>
<li class='sexy-way2blogging'>
<a class='external' href='http://way2blogging.blogspot.com' rel='follow' title='Grab this Widget'/>
</li>
<li class='sexy-way2blogging'>
<a class='external' href='http://www.spiceupyourblog.com' rel='follow' title='Social Bookmarking Gadgets'/>
</li>
</ul>
<div class='sexy-link'>
Widget for blogger by <a href='http://howtoalltools.blogspot.com/2012/10/new-and-complete-animated-sexy-social.html' rel='follow' title='Grab this Widget'>How To All Tools</a>
</div>
</div>
</div>
</b:if>

The Options

The line in red at the top sets the gadget to only be displayed on full posts pages not on the home page.To display the gadget on your home page also remove the line in red and Important if you look the the bottom of the code you will see </b:if> in red, this is the closing tag so remove this also.

The width is highlighted in blue at 550px and can be changed to suit your blog.

Change The Arrow Message

To change the arrow message simple change the line highlighted in yellow above with one of the lines below.Currently the message is Sharing Is Sexy.

Sharing Is Sexy Bookmark Arrow Message

sexy-bookmarks-bg-sexy

Sharing Is Caring Hearts Bookmark Arrow Message

sexy-bookmarks-bg-caring

Sharing Is Caring Bookmark Arrow Message

sexy-bookmarks-bg-caring-old

sexy-bookmarks-bg-love

sexy-bookmarks-bg-wealth

sexy-bookmarks-bg-enjoy

Share The Knowledge Bookmark Arrow Message

sexy-bookmarks-bg-knowledge

sexy-bookmarks-bg-german

How about a different message every day ?

Your Done this ...! Always comment and like us.....

إعلانات

Software Request

Contact us

Softwares

Games

Friday, 22 March 2013

Add Related Posts Widget With Thumbnails to Blogger

Features

Add This Widget To Blogger

customization

Saturday, 16 March 2013

Facebook Comments Box For Blogger

Friday, 15 February 2013

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

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

Customization:

How To Add Related Posts Widget To Blogger with Thumbnails

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

Thursday, 14 February 2013

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

Live Demo

Add The Social Icons With Css Effects To Your Blog

Wordpress Tutorial

Blogger Tutorial

Tuesday, 12 February 2013

Hex Color Code Generator

Generate Your Own Custom Hex Colors

Popular Hex Colors

Add Stylish Subscription Box With Share Buttons Below Post

Add Facebook, Twitter, Google +, Youtube, RSS Feed Slide/Pop Out Widget To Your Blog/Site

Thursday, 18 October 2012

New And Complete Animated Sexy Social Bookmarks V3 For Blogger

Add The V3 Complete Sexy Bookmarks Gadget To Your Blog

Categories

إحصائيات