Add Any Image To Sharing Widget/Create Your Own Sharing Widget

In my previous posts I have written the important of sharing your content on social networking/bookmarking sites.So no need written it again.See my previous posts about sharing widgets.


Add Floating Share Widget With Social networking birds                         




Add social networking/bookmarking sharing widget with hover effect


Add Any Share Botton to Floating Share Widget



Let's see How to add any image to sharing widget.
First open a any text editor (textpad) and paste below code on it

<div align='left'>
  <span class='post-icons'>



<!-- Stumbleupon Button Start, Remove Or leave -->
  <a expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumble This'><img alt='Stumble This' border='0' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Jnp1n8iyfClPpAIJ1LK-SEHKfpBwRaCbS5LPFPKfp-fw3jPFS77bIWcfNSN5JBA8yB0OKBnFDuWO-3pw8QVOdLd2ycdFSGWjdG9vnrNpTLTlYIPngbSvIX5f3antgyWhxUccEAbiydk/s200/stumbleupon.png'/></a>
  <!-- Stumbleupon Button End, Remove Or leave -->


<!-- Technorati Button Start, Remove Or leave -->
  <a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Fav This With Technorati'><img alt='Fav This With Technorati' border='0' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPIS4Xf8-RW33ooVaI9rlM55ZwKEJmyi5wSLmaX8cu9z4fUWLzSDVa0xtapdmbe63BBG_zqwi4I0UXAxXQcyYZdAdyPnX2KCt90Bt5c0dmHjAfdwLtVGJsykKmFNpieNNduT_Zq8AFLFU/s200/technorati.png'/></a>
  <!-- Technorati Button End, Remove Or leave -->


<!-- Delicious Button Start, Remove Or leave -->
  <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Del.icio.us'><img alt='Add To Del.icio.us' border='0' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg89SNHBBgpAfCbbWDGCcXmAqL6ZLmBbK49Veu1aQm2z-tbinQfzT00Su_ZlZxb4I4CHgkUFOd3qxYmn12Y9JeE6fmURF4PUJy_sv3omlXSCw5ygonAKmJIh6jLv2XcrR7-xOWM_OFGrDc/s200/delicious.png'/></a>
  <!-- Delicious Button End, Remove Or leave -->


<!-- Digg Button Start, Remove Or leave -->
  <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg This'><img alt='Digg This' border='0' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDNBRhxK8l708Tyumut8iPoF35FOIC2qMiTaw-j28iSxwM6WUcGF7hDKvfjBRUwrMjND2wQ1-eO-djYvj9HoiwMnrBRSD6c7FIF9LpD6TjjjKo1P6r_jW7sMdHDRG61oKOfams72VFRRU/s200/digg.png'/></a>
  <!-- Digg Button End, Remove Or leave -->


<!-- Reddit Button Start, Remove Or leave -->
  <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Reddit'><img alt='Add To Reddit' border='0' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4bOyfTJh3ivDmrnLts7t4zMSEPevkpVEBW3tWPFwe0lfGoaCXQaBI0Zc5UNtBAdBb_YRyeSXKQEZKJ9mhAYJwH74NJ55sAfZqwkP3Re6WgVTIMOCtfbFUKz6VFUa_zSU1ZzcDG1O3rVI/s200/reddit.png'/></a>
  <!-- Reddit Button End, Remove Or leave -->

 

<!-- FaceBook Button Start, Remove Or leave -->
  <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Facebook'><img alt='Add To Facebook' border='0' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnyh3WSQiLFynAGNEiaXw_S3NzNMWicmZODSS2nQINDc2Qu1K3GqzBYPMifB_XbJcJDs9xCeaqrL7Bv7-O95qLXiB-FU0P-XIwTIr_O-0YBDoyWfi3hZkgsS3YVhNTHT8xJ4lXdVxXiRs/s200/facebook.png'/></a>
  <!-- FaceBook Button End, Remove Or leave -->


<!-- Twitter Button Start, Remove Or leave -->
  <script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
  <script charset='utf-8' src='http://s.bit.ly/TweetAndTrack.js?v=1.01' type='text/javascript'/>
  <a expr:onclick='&quot;return TweetAndTrack.open(this, \&quot;&quot; + data:post.url + &quot;\&quot;);&quot;' href='#'>
  <span style='display:none;'>I&#39;m reading: <data:post.title/></span><img alt='Add To Yahoo' border='0' class='icon-action' src='http://www.cbc.ca/news/yourvoice/assets/images/yourvoice-twitter.png'/></a>
  <!-- Twitter Button End, Remove Or leave -->

</span>
  </div>

Now select a image that you want to add.
Then you have upload it to http://picasa.google.com/
                           or
Simply click on new post and upload your image to the post.Then right click on the image and click on copy image url.


Now replace the red color url with your image url.


You can easily find thousands of icons for those sites.


Let's see how to add it to your blog


Go  to design edit/html
Press ctrl+f and search for  <data:post.body/> tag.
Now copy the edited code on textpad and paste it below this code.
Save your template.There can be some problems with different templates.If you got something wrong ask it by a comment.


Are you like this??? Why don't you add +1 here






If you got something don't forget to leave a comment.

Posted in: Blogging