BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
Inspired by Material Design

Desktop Style Social Share Widget for Blogger

3 comments

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.

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.

3 comments :

  1. Thanks for spamming here bhai -_-

    ReplyDelete
  2. Everybody knows that buy youtube subscribers has been the largest and most used search engine for video results in the world.

    ReplyDelete

Powered by Blogger.