• Tutorials
  • Blogger Themes
  • Blogger SEO
  • Blogger Widgets
  • Internet
  • Mobile Phones
  • Gadgets
BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
  • Home
  • Blogger
  • SEO
  • Themes
  • Internet
  • Widgets
  • Gadgets
  • About
  • search
    close

Desktop Style Social Share Widget for Blogger

 Rohitkumar  01:19  2 comments
Tweet
Desktop Style Social Share Widget for Blogger
Since few days I have been busy in developing some Social Share Widgets for Blogger Blogs, Now its time to Unleash them. After spending couple of hours I have made very cool and awesome widgets that your can check out in Social Share Widgets Page.
In last post I had posted about Adding "Cute Social Bookmarking Widget for Blogger" This is really awesome, extra-smooth and fancy Social Share Widget you can try it out too.
As we know Social Share Widgets are highly preferred to get high traffic from Social Networks. If you have attractive and professional blogger share widget with a quality blog post then the blog reader [He or She] would like to share your blogger posts from this widget. That's best way to drive heavy traffic to your blog from different Social Networks.
Demo Desktop Style Social Share Widget for Blogger
Today I'm posting new Desktop Style Social Share Widget for Blogger, as its name is Desktop , I have added Desktop customized Social Share Buttons which gives professional and attractive look to this widget. You can also checkout Live Demo of this widget.

Live Demo

Features of Desktop Style Social Share Widget :

1. Desktop Style / Type Social Share Buttons
2. Highly Customized with CSS Codings.
3. Easy to Install.
4. Doesn't affect Blog Page loading Time. [Blog Loading Speed]
5. Professional and Attractive.

How To Install This Widget?

Its really easy to install this widget, just follow these easy steps.
1. Go to Blogger > Dashboard > Template.
2. Click Edit HTML.
3. Then find this code ]]></b:skin> by pressing CTRL+F
4. After finding the code ]]></b:skin> paste the following code just above it.
ul.desktop-social { list-style:none; margin:15px auto;display:inline-block; }
ul.desktop-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.desktop-social li a { display:block; width:53px; height:60px; padding-right:10px; position:relative; text-decoration:none; }
ul.desktop-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.desktop-social li.desktop-facebook { background-image:url("http://picoolio.net/images/2013/09/17/Facebook-icon.png"); }
ul.desktop-social li.desktop-twitter { background-image:url("http://picoolio.net/images/2013/09/17/Twitter-icon.png"); }
ul.desktop-social li.desktop-stumbleupon { background-image:url("http://picoolio.net/images/2013/09/17/StumbleUpon-icon.png"); }
ul.desktop-social li.desktop-digg { background-image:url("http://picoolio.net/images/2013/09/17/Digg-icon.png"); }
ul.desktop-social li.desktop-delicious { background-image:url("http://picoolio.net/images/2013/09/17/Delicious-icon.png"); }
ul.desktop-social li.desktop-linkedin { background-image:url("http://picoolio.net/images/2013/09/17/Linkedin-icon.png"); }
ul.desktop-social li.desktop-reddit { background-image:url("http://picoolio.net/images/2013/09/17/Reddit-icon.png"); }
ul.desktop-social li.desktop-technorati { background-image:url("http://picoolio.net/images/2013/09/17/Technorati-icon.png"); }
#desktop-cssanime:hover li { opacity:0.2; }
#desktop-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#desktop-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#desktop-cssanime li:hover { opacity:1; }
#desktop-cssanime li:hover a strong { opacity:1; top:-10px; }
5. Now find the code <data:post.body/> by pressing CTRL+F
6. After Finding the code <data:post.body/> paste the following code just below it.
<b:if cond='data:blog.pageType == "item"'>
<div style="text-align: center;">
<span style="color: black; font-family: Trebuchet MS; font-size: 14px;"><b>If You Enjoyed This Take 5 Second to Share it.</b></span>
<a href="http://techethix.blogspot.com/" rel="dofollow"></a>
<ul class='desktop-social' id='desktop-cssanime'>
<li class='desktop-facebook'>
<a 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'><strong>Facebook</strong></a>
</li>
<li class='desktop-twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='desktop-stumbleupon'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='desktop-digg'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Digg</strong></a>
</li>
<li class='desktop-delicious'>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
</li>
<li class='desktop-linkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
</li>
<li class='desktop-reddit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Reddit</strong></a>
</li>
<li class='desktop-technorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>
</li>
</ul>
<br />
<div style="text-align: right;">
<span style="font-family: Times, Times New Roman, serif; font-size: 10px;"><a href="http://gg.gg/desktopstyle" rel="nofollow" target="_blank" title="Get This Widget">@</a></span></div>
</div>
</b:if>
7. That's it ! You are done. now go to your blog and check it ! I hope you must have liked and willing to install this widget on your blogger blog.
Note : This widget is totally made by Us [TechEthix Property] Kindly don't remove the attribution link from this widget. If you removed it there could be copyright avoilation complaint against you. So don't edit anything in above widget, Just install it as it is Free To Install on your blog.
If you have any problem or difficulty regarding this widget, just drop your comment here or feel free to contact me or can also say "Thanks" or your opinion in comments. Stay Connected.

    Sharing is Caring!

  • Facebook
  • Twitter
  • Google+
  • StumbleUpon
  • linkedIn
  • StumbleUpon

Rohitkumar A

Posted In blogger, css, Social Share Widgets
Subscribe Now

Get Latest Posts Directly Into You Inbox

 2 comments :

  1. Rohitkumar A20 September 2013 at 22:24

    Thanks for spamming here bhai -_-

    ReplyDelete
    Replies
      Reply
  2. Unknown3 January 2016 at 10:37

    demo not working for any widget

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Newer Post Older Post Home
Do you like my work?

Buy Me a Coffee!

Popular Posts

  • How to add Custom Fonts in Blogger or Any Website
  • How to use full ISP bandwidth to speed up downloading
  • MaterialMix : A Free Material Design Blogger Template
  • Download Materiality Blogger Template
  • Resume Lite - One Page Resume Blogger Template
  • Best Social Media Widget for Blogger | 2017
Email Newsletter

Get Latest Posts Directly Into You Inbox

Labels

Android blogger browser Buy computer css drop down menu Gadgets Google how to internet Laptops Mobile Phone phone responsive reviews SEO smartphone Social Media Social Share Widgets subscription box Template tool trick widget Wireless youtube
Powered by Blogger.

Popular Posts

  • High PR Forums That Can Bring You High Traffic
  • Sensational v2.0 Responsive Blogger Template
  • Materiality - Material Design Blogger Template
  • MaterialMix : A Free Material Design Blogger Template
  • BloggerHero Free Premium Blogger Template
  • [Fixed] Facebook Share Thumbnail Is not Showing on Blogger

Contact Form

Name

Email *

Message *

  • Home
  • About
  • Contact
  • Sitemap
  • Services
  • Request
  • Privacy Polciy

© 2013 BloggerHero.com. All Rights Reserved. Designed with Love for Everyone!