Stop PC Crashes with WinZip System Utilities

Enter your email address:

Showing posts with label SOCIAL MEDIA ICONS. Show all posts
Showing posts with label SOCIAL MEDIA ICONS. Show all posts

Monday, August 30, 2010

ADD OFFICIAL TWEET COUNT BUTTON

The much awaited Tweet count button now officially released by Twitter. This sharing option is now available in Button mode, Text mode, and direct URL mode. You may add this share count button to your website or blog to let people share content on Twitter without having to leave the page. This is an excellent way to promote strategic Twitter accounts at the same time while driving traffic to your website. This button is very attractive in its style and easy to use. Twitter offers a development or customization for its buttons. So, lets wait and see much more customized Tweet buttons in near future.

How to add Twitter Official share count buttons to your blog

  1. Login to your Blogger account
  2. Go to Design/Layout
  3. Go to Edit HTML
  4. check the box "Expand Widget Templates"
  5. Now, find any of this code in your  template. (Please make a backup copy of your template before doing any sort of editing)

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

OR

<div class='post-header'/>

Then immediately after the above given code, paste the code given below. You may select  any one of the Tweet Count button code of your choice. We have added the code for all the three different types of buttons.

Tweet Count  Button VERTICAL COUNT

TWEET COUNT BUTTON VERTICAL COUNT

<!--TWEETVERTICALCOUNT-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:2px;margin-top:-4px;'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><!--TWEETVERTICALCOUNT-CODESTOPS-->

Tweet Count  Button HORIZONTAL COUNT

tweet count button horizontal
<!--TWEETHORIZONTALCOUNT-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:2px;margin-top:-4px;'><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><!--TWEETHORIZONTALCOUNT-CODESTOPS-->

NO COUNT BUTTON

NO COUNT TWEET BUTTON
<!--TWEETCOUNT-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:2px;margin-top:-4px;'><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><!--TWEETCOUNT-CODESTOPS-->

Customization of code:

  • You can change the position of this button by changing the right to left or center.

After finishing the pasting of the code, check the preview of your blog to rearrange the position of the Count button.Feel free to ask me for further help.

More Buttons to Add:

ADD FLOATING SOCIAL MEDIA SHARE COUNT WIDGET IN YOUR BLOG

Our previous posts explained the ways to add share count buttons of various social media services like, Facebook, Reddit, ReTweet, Digg, Google Buzz, Google Wave, StumbleUpon etc. I have seen a new idea of keeping all these buttons as a single widget in many blogs. Here I am explaining a method to keep some of  these as a single widget that is floating near the post layout. You can select any other desired share count buttons of your choice and include in this widget. This submit & count button will display the submission count of URL of the displaying page.

How to Add Floating Social Media Share count buttons in your blog

FLOATING SOCIAL MEDIA SHARE COUNT BUTTON   (Look at this picture to see a sample on the left side of the post layout)

  1. Login to your Blogger account
  2. Go to Design/Layout
  3. Go to Page Elements
  4. Click on Add a Gadget
  5. Click on HTML/Javascript
  6. Copy the code given below in red colors and paste it in the box. (Please note that some part of the code is given in blue colors for easy identification while customizing. Please copy everything including this.).Save and drag it to under the “BlogPosts”. Then Save the Template. You may make some changes in the code for customizing it, according to steps given at the end of this post.

<!-- floating page sharer Start -->
<style>
#pageshare {position:fixed; bottom:80px; margin-left:610px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:transparent;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
</style>
<div title="Get this at businessvartha.blogspot.com">
<div id='pageshare'><div class='sbutton' id='su'><a href="http://businessvartha.blogspot.com/2010/08/add-floating-social-media-share-count.html
" target="_blank"><img src="http://i655.photobucket.com/albums/uu277/businessvartha/Picture2.png" border="0" alt="SHARE COUNT BUTTON" /></a>
</div><div class='sbutton'><a title="Post to Google Buzz" class="google-buzz-button" href="
http://www.google.com/buzz/post" data-button-style="normal-count"></a>
<script type="text/javascript" src="
http://www.google.com/buzz/api/button.js"></script>
</div><div class='sbutton' id='rt'><script type='text/javascript'>
tweetmeme_style = &#39;large&#39;;
</script>
<script src='
http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='sbutton'><script badgetype='square' src='
http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script>
</div>
<div class='sbutton' id='digg'><script src='
http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='su'><script type='text/javascript'>url=&quot;<data:post.url/>&quot;; </script><script src='
http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div></script></div><!-- floating page sharer End --></div></div>

 

Some changes to customize the above code:

1.  Position of the Share count Widget:

bottom:80px

You can change the position vertically by changing the “80px” to the height from the bottom of your choice.

margin-left:610px

The horizontal position of the widget can be controlled by changing the value from 610 to desired value. It is better to fix the Gadget near so close to the post layout .

2. Background color of the Widget

In the above code, back ground color is given as transparent that can be changed to #CCCCCC or any color code as given in the table below.

COLOR CODE FULL

3. Adding more Social Media Buttons

If you want to add more social media buttons in the widget, simply subscribe my Feed and email me. I will send you the whole pack of code. Contact me using the contact form given in the header.

More Additives for your blog:

Sunday, August 1, 2010

ADD REDDIT SHARE COUNT BUTTON IN YOUR BLOG POSTS

We are continuously bringing out the codes for different social media share count buttons such as, Google Wave Buttons, Retweet Buttons, Stumble Upon Buttons, Google Buzz buttons, Digg Buttons and Facebook share buttons. (Scroll down to get the code of all these social media share count buttons) In this post, we are bringing you the code of Reddit Share count buttons. Reddit is a source for what is new and popular on the web. Voting on favorite reddit will lift good posts up in the front page and thereby providing more traffic to your blog or website.

How to add Reddit share count buttons to your blog


Log in to Blogger Account, go to Layout, Edit HTML and check the box "Expand Widget Templates". Now, find any of this code in your  template. (Please make a backup copy of your template before doing any sort of editing)

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

OR

<div class='post-header'/>

  
Then immediately after the above given code, paste the code given below. You may select any one of the below given Reddit share count button. Then copy and paste the code given there.

Reddit  Button Large

REDDIT BUTTON

<!--REDDITBUTTONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:2px;margin-top:-4px;'><script src='http://reddit.com/static/button/button2.js' type='text/javascript'/></div><!--REDDITBUTTONCOUNTER-CODESTOPS-->

 

Reddit  Button Small

REDDIT BUTTON SMALL

<!--REDDITBUTTONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:2px;margin-top:-4px;'><script src='http://reddit.com/static/button/button1.js' type='text/javascript'/></div><!--REDDITBUTTONCOUNTER-CODESTOPS-->

 

Reddit Button Compact

REDDIT BUTTON COMPACT

<!--REDDITBUTTONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:2px;margin-top:-4px;'><script src='http://reddit.com/static/button/button3.js' type='text/javascript'/></div><!--REDDITBUTTONCOUNTER-CODESTOPS-->

Customization of code:

  • You can change the position of this button by changing the right to left or center.

After finishing the pasting of the code, check the preview of your blog. In the preview you can see whether the position of the Counter button is correct or not. Any problems? feel free to ask me..

More Buttons to Add:

Thursday, July 22, 2010

ADD STUMBLEUPON SHARE COUNT BUTTON IN YOUR BLOG POSTS

Stumbleupon is another website where we can share our blog posts or the posts which we like with our friends. Stumblers are considered to be a major arm in discovering and sharing great websites. Stumbleupon button or Stumble it buttons are very helpful for a blogger to provide an option for an easy one click submission of posts to share with others. Stumble It buttons are available in many sizes. Here in this post, I would like to share some of the popular, cool Stumble It share count buttons for your blog. If you feel that the post is useful, don't hesitate, Stumble It. 

How to Add Stumble It count buttons to your blog posts

STEP A
Log in to Blogger Account, go to Layout -> Edit HTML and check the box "Expand Widget Templates". Now, find any of this code in your  template. (Please make a backup copy of your template before doing any sort of editing)

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

OR

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

 

STEP B
Then immediately after the above given code, copy and paste the code given below. You may select the code of any one of the two StumbleUpon Counters. If you want code of more smaller StumbleUpon counter, then please comment here.

Something to edit:

  • Change the position of this button by changing the right to left or center.

 

Large StumbleUpon counter

stumbleupon counter button large

<!--STUMBLEUPONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><script type='text/javascript'>url=&quot;<data:post.url/>&quot;; </script><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div><!--STUMBLEUPONCOUNTER-CODESTOPS-->

 

Small StumbleUpon counter

stumbleupon counter button large

<!--STUMBLEUPONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><script type='text/javascript'>url=&quot;<data:post.url/>&quot;; </script><script src='http://www.stumbleupon.com/hostedbadge.php?s=2'/></div><!--STUMBLEUPONCOUNTER-CODESTOPS-->

After pasting the code, just look to preview the blog and check whether the button appearing on the correct place. If you feel any trouble, ask me.

More Buttons to Add:

ADD RETWEET COUNT BUTTON IN YOUR BLOG IN YOUR BLOG POSTS

Another count button that help to know how many readers retweet your post and publish that number automatically near your post. This is one of the best  button to prompt your readers to share your post using tweetmeme buttons. This buttons are available in two size, one is compact or small and other is large. Both buttons will display how many retweets happened to particular posts. While clicking on this button, readers of your blog post will be taken to a Tweet submission page automatically. 

Add Retweet count buttons to your blog posts

STEP A
Log in to Blogger Account, go to Layout -> Edit HTML and check the box "Expand Widget Templates". Now, find any of this code in your  template. (Please make a backup copy of your template before doing any sort of editing)

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

OR

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

 

STEP B
Then immediately after the above given code, copy and paste the code given below. You may select the code of any one of the two Retweet Counters.

Something to edit:

  • You may change the position of this button by changing the right to left or center.

 

Small Retweet counter

 RETWEET COUNTER SMALL

<!--RETWEETCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><script type='text/javascript'>
tweetmeme_style = &#39;compact&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div><!--RETWEETCOUNTER-CODESTOPS-->

 

Large Retweet counter

 RETWEET COUNT BUTTON LARGE

<!--RETWEETCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><script type='text/javascript'>
tweetmeme_style = &#39;large&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div><!--RETWEETCOUNTER-CODESTOPS-->

 

Once you finish adding the code, click on preview to check whether the counter button is appearing on right place. Then save the template. If you feel any trouble, please comment and ask here.

 

More Buttons to Add:

ADD FACEBOOK SHARE COUNT BUTTON IN YOUR BLOG POSTS

Many bloggers email me asking about how to add social media icons sharing buttons which shows the total number of  sharing occurred for a specific post. This will help you and your readers to assess how many readers shared and what is the potential of an advertisement based on a post in your blog. I will explain one by one in my future posts about how to add a share count button for, Facebook, Retweet, Digg, StumbleUpon and Google Buzz.

Read this post and share it in Facebook ……

How to add Facebook share count buttons to your blog

STEP A
Log in to Blogger Account, go to Layout -> Edit HTML and check the box "Expand Widget Templates". Now, find any of this code in your  template. (Please make a backup copy of your template before doing any editing)

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

OR

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

 

STEP B
Then immediately after the above given code, paste the code given below. You may select any one of the two Share count button, copy and paste the code given after the image

Box Counter

FACEBOOK SHARE COUNT BUTTON LARGE

<!--FACEBOOKBOXCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><a name='fb_share' type='box_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div><!--FACEBOOKBUTTONCOUNTER-CODESTOPS-->

 

Small Button counter

FACEBOOK SHARE COUNT BUTTON SMALL 

<!--FACEBOOKBUTTONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><!--FACEBOOKBUTTONCOUNTER-CODESTOPS-->

Something to remember:

  • You may change the position of this button by changing the right to left or center.

After pasting the code, check the preview of blog to see the position of counter  button. Then Save the template. If you feel any issues, please ask by commenting here.

Happy Sharing…..

More Buttons to Add:

ADD GOOGLE BUZZ SHARE COUNT BUTTON IN YOUR BLOG POSTS

Google Buzz helps net riders to share interesting articles, videos, posts and images with one button click. Google now announced official Buzz button that shows the total number of Buzz on specific posts in your blog or website. Here in this post, I would like to share the code of two Google Buzz share count buttons, Small and Large buttons. Whenever a visitor click on this button, it will automatically pick the URL of your post for quick sharing through Buzz. If you like this post, buzz it now…

How to add Google Buzz share count buttons to your blog

STEP A
Log in to Blogger Account, go to Layout -> Edit HTML and check the box "Expand Widget Templates". Now, find any of this code in your  template. (Please make a backup copy of your template before doing any sort of editing)

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

OR

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

 

STEP B
Then immediately after the above given code, copy and paste the code given below. You may select the code of any one of the two Google Buzz Counters.

 

Small Buzz counter

GOOGLE BUZZ SMALL COUNTER

<!--GOOGLEBUZZCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-locale="en_IN"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></div><!--GOOGLEBUZZCOUNTER-CODESTOPS-->

 

Large Buzz counter

GOOGLE BUZZ LARGE COUNTER

<!--GOOGLEBUZZCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-locale="en_IN"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></div><!--GOOGLEBUZZCOUNTER-CODESTOPS-->

Something to edit:

  • You may change the position of this button by changing the right to left or center.

Once you finish pasting the code, then click on preview to see where the button appears. If is is in correct position as you desired, then save the template. Still got some problems? ..Ask me…

More Buttons to Add:

ADD DIGG THIS SHARE COUNT BUTTON IN YOUR BLOG POSTS

As you know Digg is one of the major content sharing website in internet.  After our Facebook Share count button, we would like to present the code of  Digg this share count buttons for a blog post. Digg This button is of three types, Compact, Medium and Large. We recommend our readers to add the Medium button as we did in our blog. You may select the one button of your choice as described below. If you love this post, please don’t forget to Digg This.. Happy Digging…

How to add Digg This share count buttons to your blog

STEP A
Log in to Blogger Account, go to Layout -> Edit HTML and check the box "Expand Widget Templates". Now, find any of this code in your  template. (Please make a backup copy of your template before doing any sort of editing)

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

OR

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

 

STEP B
Then immediately after the above given code, paste the code given below. You may select any one of the three Digg This count button, copy and paste the code given there.

Compact Digg This Button

 DIGG THIS COMPACT BUTTON

<!--DIGGTHISBUTTONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script><a class="DiggThisButton DiggCompact"></a></div><!--DIGGTHISBUTTONCOUNTER-CODESTOPS-->

 

Medium Digg This Button

 DIGG THIS MEDIUM BUTTON

<!--DIGGTHISBUTTONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script><a class="DiggThisButton DiggMedium"></a></div><!--DIGGTHISBUTTONCOUNTER-CODESTOPS-->

 

Large Digg This Button

 DIGG THIS LARGE BUTTON

<!--DIGGTHISBUTTONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script><a class="DiggThisButton DiggLarge"></a></div><!--DIGGTHISBUTTONCOUNTER-CODESTOPS-->

Something to remember:

  • You may change the position of this button by changing the right to left or center.

Check the preview of your blog, when you finish the pasting of the code. In the preview you can see whether the position of the Counter button is correct or not. Any problems? feel free to ask me..

More Buttons to Add:

Thursday, February 11, 2010

FREE SOCIAL MEDIA ICON SETS

Many bloggers asked me about how to change the traditional icons in a blog. As you know the traditional icons include Feed icon, Social media icons  like Twitter, Facebook, Blogged, Technorati etc. Adding different style of icons always invite the attraction of visitors. I have seen many blogs who are using new styles of free icons and buttons. You can see some of those buttons I am using in the right sidebar top of this blog.This post will tell you how to add new icon to your blog and also offering some free stylish social media icons down to this post.  Download Links Checked on 10/02/2010 

How to change a feed  icon or any icon in a blog.

Step A

Find a new stylish social media icon of  your choice. I have given some free sets of icons for all of my readers.Just scroll down to the end of the post to get that. These icon sets are in different sizes and given as PNG icons. Once you download the free icon set, simply select the correct size that you wish to use.

Open an account in any of photo sharing  websites like Picassaweb, Flickr, or Photobucket. Then upload the selected PNG or JPEG icon file to your account. Once you upload, then copy the URL linked to the icon or picture  you have uploaded. You will get this URL in your album near to the picture you have uploaded.

Step B

Here I will describe you, how I replaced my old Feed Address icon with a new Feed icon. As said in Step A, I upload a desired button of my choice into an album created by me in photobucket website.Then I copied the URL of that PNG file. Now look to the code given below. You can see the URL of my feed address given in Red letters and URL of my new Feed icon in Maroon letters.

Here you had to make two changes. First of all, change the Feed address (or what ever social media address you want) given in Red letters to your Feed address. Then change Maroon colored URL given below with the URL of your new PNG icon that you copied from Step A

<a href="http://feeds2.feedburner.com/blogspot/oZxX" target="_blank"><img border="0" alt="Photobucket" src="http://i655.photobucket.com/albums/uu277/businessvartha/rss-32x32.png" /></a>

After making these changes, copy the full code and Login to your blogger account, Click on Layout, Page Elements, and then on “Add a Gadget”. Select “HTML/JavaScript” and paste the copied code into it. Save. Now you can see, a new icon will appear on your blog, which upon clicking will take to the desired social media website.

Like as described above, you may upload, link and place new icons for any social media websites you have joined. Now grab some free stylish social media icons.

FREE STYLISH SOCIAL MEDIA ICONS

Lontar Icon Social Site Edition

Stylish social media icons: License –Freeware- Click on picture to download PNGimage

Chococons

Chocolate styled icons: License –Freeware- Click on picture to download PNGimage

Social Balls

Ball styled icons: License –Freeware- Click on picture to download PNGimage

Hand-Drawn Social Media Icons

Handwritten social media icons: Freeware- Click on picture to download PNGimage

Webset icons

Beautiful icon sets, You must link back to graphicriver.net/free-icons, page if using these icons in a commercial project. Click on below icons to downloadimage

Heart Social Media Icons

Excellent heart shaped social media icons, Click on below icons to downloadimage

Cheers Free Social Media Icons

You can use the set for all of your projects for free and without any restrictions. However, it’s forbidden to sell them. Click on below icons to downloadimage

The Leaves fall

Excellent leaves fall icon sets for bloggers. Prohibited to sell.Free to use. Click on below icons to downloadimage

Any doubt, please feel free to ask us

Happy Blogging.

Blog Widget by LinkWithin