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.
Features of Desktop Style Social Share Widget :
1. Desktop Style / Type Social Share Buttons2. 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+F4. 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+F6. After Finding the code
<data:post.body/> paste the following code just below it.<b:if cond='data:blog.pageType == "item"'>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.
<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='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><strong>Facebook</strong></a>
</li>
<li class='desktop-twitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='desktop-stumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='desktop-digg'>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>Digg</strong></a>
</li>
<li class='desktop-delicious'>
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
</li>
<li class='desktop-linkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
</li>
<li class='desktop-reddit'>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>Reddit</strong></a>
</li>
<li class='desktop-technorati'>
<a expr:href='"http://technorati.com/faves?add=" + 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>
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.
