Add Awesome Floating Sharing Bar toBlogger Blog

Share your blog in popular social networking/bookmarking sites is very important to get good traffic and I think this is the easiest way for increase our blog/website traffic. This is indeed the most beautiful Social Network floating share widget featuring the top Social Network sites (Google Plus, Twitter and Facebook ). In this tutorial we'll create Floating Sharing button for your blog. With the 'Sharethis' button visitors will be able to share your content with their friends or community, and you know yourself what will happen. Share This is a very popular service offering multiple Social Bookmarking Widgets for blogs and websites.i have a Blogger Tips show you how to add the new ShareThis Floating Buttons to various position on your blog. You can see the buttons in question to the end of this Article and that position will be one of the options for your blog. In this part I going to show you  Floating Sharing buttons with Vertically Align at the right side of your blog.

ShareThis Tool Tutorials

Part 1: How To Add Share This Buttons With Horizontal Counters

Part 2: How To Add Share This Floating Right Buttons to your Blog

Part 3: How To Add Share This Navbar at the Top Your Blog.

Part 4: How To Add Share This Heart Style Sharing.

Preview Live Demo

Note:- Always Make a Backup of Your Template Before You Edit Your Template �( how to make a template backup)

1. Go To Your Blogger Dashboard>> Template>> Proceed.

2. Press CTRL+F and find the following Code in you template. (how to find code using search bar)

</head>

3. paste the below code before/above </head>.

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

4. Find The Following Code in your Template.

</body>

5. paste the below code befor/above </body>

<script type="text/javascript">stLight.options({publisher: "1cce35ce-6744-4bac-9fa5-8f17a67a6fa6"});</script>
<script>
var options={ "publisher": "1cce35ce-6744-4bac-9fa5-8f17a67a6fa6", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["googleplus", "facebook", "twitter", "stumbleupon", "linkedin", "pinterest", "email", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>

5. and click on preview button and check all things is ok. if ok press save button..! That�s is your done. Hope you like the tutorial and the floating share widget. We'd be glad to hear from you. if you have any trouble in this tutorial leave your comments below in comment box. thanks for reading our tutorials. also check out my previous post how to add sharethis buttons below post with counter.

More about → Add Awesome Floating Sharing Bar toBlogger Blog

How to invite author and add author box in blogger blog

In this post I am gonna show you how to manually add author box below post. The technique of having Multiple authors to manage a Blog is getting popular these days. Though this feature was already available in wordpress , recently Blogger too has enabled this feature. So now Blogger Users can have upto 100 multiple Authors or co-Authors for their blogs. in order to better serve them it is important to display some information about them in a polite manners. Here is I will show you two methods. in first method you can just add below post title Posted by. text by inviting guest author and in method two you can add manual Attractive banner below post with box and image hover effect.



See Live Demo Below..

Author - Ishtiaq Ahmad is the owner of Blogger Trcisk. Ishtiaq lives in Pakistan, has been blogging since 2009 and writing on Blogger Tricks since 2012.You can find him on Blogger Tricks

To create this type of Beautiful box for your guest authors you would need to play with some CSS and HTML Codes.

Are Second Option for Author Back link you can mostly on blogger blog. like this below post title.

How to Invite Authors on your blogger blog

How to add author box manually below post

In this step we need to edit your template so Remember always Make a Backup of Your Template Before You Edit Your Template (how to make a template backup.)

1. Go to your blogger Dashboard>> Template>> Proceed and click on expand widget box.

2. Find The following code in your template. (how to find code using search bar)

]]></b:skin>

3. paste the below code before/above ]]></b:skin>.

/* Start Author Link by http://bl0gger-tricks.blogspot.com */
#author-link {
font-family: Trebuchet MS, Arial, Verdana;
width:auto;
height: 100px;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-goog background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

#author-link:hover {
background: #FFF;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
-moz-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#author-link a {
font-family: Maven Pro,Arial,Verdana;
color: #016AFF;
}
#author-link a:hover {
font-family: Maven Pro,Arial,Verdana;
color: #333333;
}
#author-link img {
border:1px solid #9ED0DE;
-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out;
zoom: 1;  
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-transform:  rotate(+5deg);
-moz-transform: rotate(+5deg);
border-radius: 10px;
display:inline;
float:left;
margin:0 15px 0 0;
max-height:120px;
}

#author-link img:hover  {
zoom: 1;
-webkit-transform:  rotate(0deg);
-moz-transform: rotate(0deg);
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
} 
/* End Author Link by http://bl0gger-tricks.blogspot.com */

Note:- In author link CSS codes you can edit Box Width, Box Height, Font Color, Font Name, Font Size, and also Border radius. For Color editing check Color Code Generator Tools on our blog.

That�s it your done. click on save button.



4. Go to your blogger post editor by going Blogger Dashboard>> Click on pencil icon.

and paste the following code where u want to show blog author box.

<div id="author-link"><img  alt="Author" border="0" src="https://lh3.googleusercontent.com/-wr1HKQ4h3Io/AAAAAAAAAAI/AAAAAAAAAUg/72rRzBU6Z_A/s250-c-k/photo.jpg" 
style="float: left; margin-right: 5px; width: 100px; height: 100px; " />
<b>Author - </b>Ishtiaq Ahmad is the owner of Blogger Trcisk. 
Ishtiaq  lives in Pakistan, has been blogging since 2009 and writing on Blogger Tricks since 2012.
You can find him on <a href="http://bl0gger-tricks.blogspot.com"> Blogger Tricks <a/></div>

More Answers.

Change Image link with your author image, change blogger tricks link with your author website or blog link and also change the description text with Your Text. see video below for more info about how add author link below post and check result in our HTML EDITOR. if still have any trouble please leave comment a comment below in comment section. thanks for reading our post.

More about → How to invite author and add author box in blogger blog

Add Awesome Google style search to blogger blog

Google is the best search Engine in the world. Google update there home page in June 2011, New Google homepage with smaller logo and links moved to the top and bottom edges of the browser for a cleaner look, I think this look much better than older look. I'm sure you will have noticed the new Google design as covered in the post Evolving the Google design and experience on the official Google blog. when  see Google Style search box tutorial on http://www.Queness.com I am very happy and add this search bar on my blog. The new search bar has a more modern minimalist look with rounded corners and hover effect. you can create Google Style Search widgets with some HTML, CSS & JQuery Combination. in this tutorial I�ll also show you how to re-create Google style new search button with some simple CSS Codes. I edit this search button with Green color which compatible with my template style sheet. you can also edit button style with your template colors. so Read all steps and make a beautiful Search button. Special thanks for this tutorial goes to Awesome Queness.Com design blog again & again. You Can See Live Demo on this Blog.

Add Google Style Search Bar To Blogger

First we need to edit your blogger template so Always Make a Backup of Your Template Before You Edit Your Template (how to make a template backup.)



1. Go to your blogger Dashboard>> Template >> Proceed press CTRL+Fand  find the following Code. (how to find code using search bar)

]]></b:skin>

2. Paste following code before/above }}></b:skin.

/*Start Css For Google Style Search Box*/
/* div container containing the form */
#searchContainer {
margin:0px;
}

/* Style the search input field. */
#field {
float:left;
width:180px;
height:27px;
line-height:27px;
text-indent:10px;
font-family: Source Sans Pro, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}

/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:60px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMV1Tk2O7nFWDesPkl-VWBepfF4o2jax_mKRG-I2OsvPYyYhQUaiNX3Ew1-XDO_UM0GVguTr1P_QkYo7vxuezz-y299DXRa1aw2dSvJAmYfk1JOd4yvyBjdVob6p1AbC9HUXGpE7bMGYzn/s1600/iconsearch.png) no-repeat #088a4b center;
border: 1px solid green;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMV1Tk2O7nFWDesPkl-VWBepfF4o2jax_mKRG-I2OsvPYyYhQUaiNX3Ew1-XDO_UM0GVguTr1P_QkYo7vxuezz-y299DXRa1aw2dSvJAmYfk1JOd4yvyBjdVob6p1AbC9HUXGpE7bMGYzn/s1600/iconsearch.png) no-repeat center #088a4b;
border: 1px solid green;
}
/* Clear floats */
.fclear {clear:both}

Note:- In Search Bar Style Sheet you can edit Font Style, Form Width, Form Border, Font Color, Font Size, Search Button Color, Search Buttons Hover Effect and search Button Border, all these editing I highlighted in blue color you can change it which look is better for your blog design if your don�t want edit just leave it same. & paste before ]]></b:skin>.

3. find the following Code. (how to find code using search bar) 

</head>

4. and paste the following code before </head>.

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

5. click on preview and check your blog look if all thing is ok click on save and now time to add gadget on blogger sidebar.

6. Go to your blogger Dashboard>> Layout>> and click on add a gadget a new window is popup. in new window scroll down find HTML/JAVASCRIPT when you find this click on plus button and paste this code in your HTML/JAVASCRIPT Text Area

<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

& Click Save. your Done! and see your blog new search bar look. Thanks Again to Queness.

The next few months, look for a series of design improvements across all our Tutorials, Widgets, DropDown Menu, Sharing Buttons including Templates & Social Icons Sets. So Subscribe our blog and stay Connected..

if you have any trouble about this tutorial leave your comments and questions below in comment box. Thanks for our post.

More about → Add Awesome Google style search to blogger blog

Add Awesome Share this tool to your blogger blog

 

In this Series I am gonna show you how to add Share This floating sharing, sharethis buttons with counter, Share This Ornaments style sharing and Share This Navbar with Sharing Buttons. read full series and make your blog like Professionals. You might have noticed the 'Share This' button that appears below each of my posts. In today's tutorial we'll create this button for your blog. Why bother to use it? Well, with the 'Share this' button visitors will be able to share your content with their friends or community, and you know yourself what will happen. Share This is a very popular service offering multiple Social Bookmarking Widgets for blogs and websites.i have a Blogger Tips show you how to add the new Share This Counter Buttons to various positions on your blog. You can see the buttons in question to the end of this Article and that position will be one of the options for your blog. In this part I gonna show you  Sharing buttons with horizontal counters to publicly display the sharing activity for that piece of content.

ShareThis Tool Tutorials

Part 1: How To Add Share This Buttons With Horizontal Counters

Part 2: How To Add Share This Floating Right Buttons to your Blog

Part 3: How To Add Share This Navbar at the Top Your Blog.

Part 4: How To Add Share This Heart Style Sharing.

1. Go to ShareThis Website

2. Create a free account with working email address. you can also login with you facebook acount.

3. after creating account login with your email address. and click on get sharing tools.(screen shoot show below.)





4. in platforms options select ( A Website ).





5. after Select a website click on Step 2. and select horizontal Buttons and click next.







6. add your networks by drag and drop in selected services tab. (showing screen shoot below)







7. when you add all your network click on get code buttons and you can see this type window.

in step I suggest you select Multi Post option.







8. when you choose a style for your sharing button scroll down the window you can see generated SCRIPT & HTML code. In first step copy Sharethis Script which I highlighted in screen shoot  and paste before ending your </head>  section.







Note:- Always Make a Backup of Your Template Before You Edit Your Template �( how to make a template backup)



9. Go to your blogger Dashboar>> Template>> Proceed and on expand widget box.

Press CTRL+F and  Find  This Code �</head>�. (how to find code using search bar.)

and Paste Sharthis Buttons Script Before/Above �</head>�.



10. and now time to add buttons code to your template. you can add buttons below post title and Below Post.

For Below Post Title Find These lines (how to find code using search bar.)

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

and copy HTML Code Which I Highlighted in Screen Shoot Below.





and paste after/below �<div class='post-header-line-1'/>�

if you want to show buttons below post.then find this code.

<data:post.body/>

and paste copied buttons code after/below �<data:post.body/>�

click save!!!! and your done your job!!!!. in my next post I am showing you how to add floating right sharethis sharing tool. So do your like our posts subscribe me on facebook, Twitter, Google Plus or subscribe our RSS Email Updates.



if your have any trouble about this tutorial leave your comments bleow in comments box.  thanks for reading our post.

More about → Add Awesome Share this tool to your blogger blog

How To Create Blogger Static Page Neat & Clean

In This post I am going to explain you how to hide sidebar, footer and header on static page. I am working for this tip last 8 days and  I finally took the time to generalize this tips. Anyone can use the solution in this page, and you'll get what you want  I'm not going to repeat what this tutorial does. Or maybe I will. You get to hide your sidebars and use that space to widen your main posting area, on pages that you choose. You can apply this tweak both on your static pages and your post pages. I have already posted one article on this blog how to show widget only on home or post pages and static pages. when static pages first came out. Than again, Bloggers flexibility and permission to design your page as you like it is one of the main features for which so many people prefer this platform. with ths tip you can create a different Design for each of your static pages with adding few CSS Code Lines. The Adding Code in ths tutorial is to much easier and clear and result is very Beautiful like professional Blogger look. You can see Working Demo on this blog.

Live Demo

Adding this Beautiful Tweak to your blogger Static Pages is just in two steps. and you�re done.

First you need to check what is Tag used in your Template.

1. Go to your blogger Dashboard>> Pages >> and Create a New page. ( Create Blank Page Not a Send Readers to another web address)

and paste this code at the top of your static page, before the content and click preview. if all thing is ok write your content and click on publish.

<style type="text/css">
/*<![CDATA[*/
#footerwrapper,#sidebarwrapper{
height: 0; 
visibility; hidden !important; 
display:none !important;
}
.home-link {
display:none !important;
}
#credits {
display:none !important;
}
#contentwrapper{
float: Center; 
width: 100%; 
margin-left: 0; 
margin-right: 0; 
margin-top:20px; 
margin-bottom: -30px; 
padding-left: 0; 
padding-right: 0; 
background: #fbfbfb; 
color: #000000;
}
.post {
width: 95%; 
margin: 0 auto; 
padding: 0;
} 
.post h1 a {
 text-align: center; padding:5px;
}
/*]]>*/
</style>

What goes into the tags are CSS rules. It depends on what we are trying to change and differs between templates. In the code above, we

Remove  blog footer, post footer, feed links and sidebar. This is done in code line 2 to 8.
Widen the post area to fill up the spaces vacated by the sidebars. This is done in code line 5. If you want to do this too, find out what�s your header�s or header-wrapper�s width and apply it here.

Identifying and adding your own elements to the code

Your elements� Ids and classes maybe different from the ones given in the code above. You can find yours by going through your template code. To get an idea what to look for, here�s a sample code snippet, taken from Blogger Tricks�s Template.

#sidebarwrapper,#footerwrapper,#sidebarwrapper, #credits, .home-link {

          height: 0;>

          visibility;

          hidden !important;

          display:none !important;

        }

    

As you can see an element, be it a division, a section or a widget is assigned an ID and/or a class. To remove it from the Page. For an ID you need to add �#� prefix and for a class, add �.� as prefix.

Need Help��!�

I am showing in video below Which tags you need for hiding sidebar, header, menu, footer and footer credits. in this code I just add codes which is mostly used in blogger template if your template is with different ids search in your template. For example if you want to hide menu from static page your menu id look like this (#menu) I am not sure but mostly designer use this id for menu. if you cant find Please leave a comments or send me your template on my email address I will try to fix the code. which is compatible with your template. My Email Address is: Tricks.blogger@gmail.com. if this code is compatible with your template. your can change content area width, background Color. font style, font color, font size, if you know about playing with CSS Codes. I highlighted a few of them in blue,

Leave your Comments & Questions Below in Comment Box. Thanks for reading our post.

More about → How To Create Blogger Static Page Neat & Clean

How To Add Custom Fonts In Blogger (Video Tutorial)

In this post I am going to explain you how to add custom font style to blogger blog. Adding Custom Fonts to Blogger can improve the look and feel of your blog.

In your templates you can use any font you want, but these would be properly displayed only if the viewer has those fonts installed on his/her System.

Font embedding Techniques allows you to use any font on your Blog and these fonts will be viewable to the viewers even if they don�t have the font installed on their Systems. Adding custom fonts to WordPress works in the same way. You will add the first piece of code between the head tags in your header file (WordPress does not require that extra slash at the end) and the second piece of code goes into your stylesheet. You can see a list of available Fonts at the Google Font Directory.

How To Add Custom Fonts To Your Blogger Blog

Font Settings

Make Font Setting which your like.


By Default the Google API provides the Regular version of the Font. If you need specialised versions like  bold, italic or bold and italic,


Now to apply these fonts on your template, you can use these in your template CSS



For example you may use something like
You will have to add a back slash "/" at the end of link and before > Closing.. look like this "/>"

Now you can add custom font style to your blogger

1. First we change our blog Headings font.



1. Go to your blogger Dashboard>> Template>> Proceed>> press CTRL+F and search this code. (how to find code using search bar)



Search The Following Code in your blogger Template CSS Section.

h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:400;
    font-family: 'HERE IS YOUR CUSTOM FONT NAME', serif;

Note:- If you cant find code look like this just leave comments.. I will try help you about finding code.



2. and Second we change our blog paragraph font.



Search The Following Code in your blogger Template CSS Section.

body {
 background: #FFF;
 color: #000;
 font-family: "HERE IS YOUR CUSTOM FONT NAME", sans-serif;
 font-size: 14px;
 line-height: 1.6;
 margin: 0 auto;
 padding: 0;
}

3. Change Sidebar Widgets Heading Font.



Search The Following Code in your blogger Template CSS Section.

#sidebar h2 {
text-transform: capitalize;
border-bottom: 1px solid #D3D3D3;
color: #404040; 
font-family: "HERE IS YOUR CUSTOM FONT NAME",  sans-serif;  
font-size: 2em;  
line-height: 1;  
font-weight: bold;  
padding-bottom: 10px;  
margin-bottom: 10px; }

4. Change Your blog Header (Blog Name) Font.



Search The Following Code in your blogger Template CSS Section.

#header h1 {
 letter-spacing: 0;
 margin: 0;
 padding: 0;
 font-family: "HERE IS YOUR CUSTOM FONT NAME", sans-serif;
 font-variant: small-caps;
 text-transform: none;
 font-weight: bold;
 color: #088A4B;
 font-size: 70px;
 line-height: 1.2;
 text-shadow: 3px 3px 3px #aaa;
}

Your Blog Headings. Like H2, H3, H4, as your wish. if you have any trouble about this tutorial leave your comment or questions below in comment box. Thanks for Reading our post.

More about → How To Add Custom Fonts In Blogger (Video Tutorial)

Add Beautiful Social Sharing to Blogger Blog

In this post I am going to show you great tips on adding beautiful wood style social sharing icon in blogger blog. Special Thanks for these icons Land of Web. and make some change in these icons and add two more icons Reddit and Stumbleupon and make useful in blogger with hover effect. in few days we thinking sharing with you some icons. which all icons is my own creation so I post these as soon as possible. this tip is very easy and just 2 step for adding this tip, you need to add css and html code in your template I am showing video for doing this. if you face any problem with doing this. leave your comment below in comment sections thanks for reading so lets start Tutorial.

Add Beautiful Social Bookmarking Icons

Before Editing Make a Template Backup ( How to make a template backup )

1. Go to your blogger Dashboard>>Template>>Edit Template (do not click on expand widget box)

2. and find these lines..

]]></b:skin>

3. And paste this css code before ]]></b:skin>.

/*----Start BT Social Sharing CSS----*/

.fade img {

filter:Charlie(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

-moz-border-radius:5px;

-webkit-border-radius:5px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

}

.fade:hover img {

filter:Charlie(opacity=20);

-moz-opacity: 0.20;

opacity: 0.20;

-moz-border-radius:5px;

-webkit-border-radius:5px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

}

/*----end BT SocialSharing CSS----*/

4. click on save template.

5. and now click on expand widget box which available on top left corner at the blogger template window.

6. and find these lines.

<data:post.body/>

7. and paste this html code after <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<center><span style='color: #000000; font-size: 14px; font-family: Trebuchet MS;'><b>If You Enjoyed This Take 5 Second to Share it.</b></span><br/>

<a class='fade' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXTLodE0SK9CNaT-qcUkJOjQiRkqh5_bODL1TKEwWNCQWP0MaQd9lJpg0v3hdQjsCBmXjjYO91FK1j-_70MEQHjpMOeD2_n4vSs4rWfRX2utjisBRcI9WnDs2NeUksdFx-RcGM9nOxeiP_/s1600/technorati1.png ' width='64px'/></a>

<!-------DIGG-------->

<a class='fade' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_CV6FSC3RwUKSp7LMTEUmSjMwkkLXuCQljEqtqQm5YX5UKNKXTqj_9WDjEPtPrR_0bqN1YxwMyIubQZK4L1dIssNeplNStP-kqlJznWYCes7mvlymCInLKSYVFW9NIBPTqqwOmsJtiucb/s1600/Digg1.png ' width='80px'/></a>



<!------ Twitter ------>

<a class='fade' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjlYRjfNL4hUQ_NUhkNbwFRqHWi52tuXW-pNYqnPVsUCPEEXmkJnmmmQGnVazW1RI2vGKKjXqiQyD8Ievn4E69Qy338Wz99zLGT_Ad0FSpjdhcEse3nA_Ns6HxRNh3lxIPU0QPE-lruUx/s1600/Twitter1.png' width='100px'/></a>



<!------Facebook------>

<a class='fade' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirE2ypztUeFdpG6gmkHtptN9IAaLmiyw_9oUy-nCDGeeCz_7GyQ971d0OJJwLZap_OfoRIJE6fwhqDLUtIkGp5ZAvFPY013fwYa-gvLc6HoSi8SRQ-zj9-h4o5uN8K9hVa3kd7OQdsvI7Y/s1600/Facebook1.png ' width='100px'/></a>



<!------Reddit------>

<a class='fade' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZT_y6FouNvAjvtJQF2LiBhygB0m88c4Gsq1q4PWaEoDsyO48C-3n6x8veiwCMof4MZei4Q586fyBo701QmZifKgd_zoLbLV-PU_qNjqeS-GV1QCsrCipbl1Ft_RaqLhtx-hzjfqvgZkwD/s1600/Reddit1.png' width='80px'/></a>



<!------Stumble------>

<a class='fade' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj79yvTfXvJAE2QYL-GjwkEoTQGz9nOlFoMrEk1Kha7BoKwP-tbrR4aivFC7xP6ecydNcFrNZPts5w_9MaxxFLhRpZMy1OAuDvMs6ddTf5fWjnBCzWXtI7oUzKpY_pJicH-0255M6i3HhYN/s1600/Stumble1.png' width='64px'/></a>

</center>

</b:if>

and now click on save and see result your blog.

Note:- if you want to change text color, font and font size make change in these lines. yellow for text color green for text size and red for font style. and pick color from color code genrator tool.

<span style='color: #000000; font-size: 14px; font-family: Trebuchet MS;'>

if you have any problem leave your comment and question below.

More about → Add Beautiful Social Sharing to Blogger Blog