Saturday, 13 July 2013

SHARING WIDGET Add To Any For Blogger

Share button for Blogger

To place under every post in Blogger

To place under every post in Blogger




<!DOCTYPE html>
<html lang="en" >

<head>

<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


<title>CodePen - Share Buttons Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
body {
padding: 10px 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 10px 10px 10px 0;
color: #222;
font-family: "Helvetica Neue", Arial, sans-serif;
}
p {
color: black;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.heading-sizes {
margin-top: 30px;
}
.divider {
height: 5px;
}
@font-face {
font-family: 'share-buttons';
src: url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.eot?gpra60');
src: url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.eot?#iefixgpra60') format('embedded-opentype'), url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.woff?gpra60') format('woff'), url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.ttf?gpra60') format('truetype'), url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.svg?gpra60#share-buttons') format('svg');
font-weight: normal;
font-style: normal;
}
.share-btn-icon {
font-family: 'share-buttons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.share-btn-email .share-btn-icon:before {
content: "\e945";
}
.share-btn-more .share-btn-icon:before {
content: "\ea82";
}
.share-btn-googleplus .share-btn-icon:before {
content: "\ea88";
}
.share-btn-facebook .share-btn-icon:before {
content: "\ea8c";
}
.share-btn-twitter .share-btn-icon:before {
content: "\ea91";
}
.share-btn-github .share-btn-icon:before {
content: "\eab4";
}
.share-btn-tumblr .share-btn-icon:before {
content: "\eabb";
}
.share-btn-reddit .share-btn-icon:before {
content: "\eac7";
}
.share-btn-linkedin .share-btn-icon:before {
content: "\eac8";
}
.share-btn-delicious .share-btn-icon:before {
content: "\eacc";
}
.share-btn-stumbleupon .share-btn-icon:before {
content: "\eace";
}
.share-btn-pinterest .share-btn-icon:before {
content: "\ead0";
}
.share-btn,
.share-btn * {
box-sizing: border-box;
}
.share-btn,
.share-btn *,
.share-btn *:before,
.share-btn *:after {
box-sizing: border-box;
}
.share-btn {
position: relative;
display: inline-block;
height: 24px;
margin: 0;
padding: 2px 8px;
line-height: 1.53;
letter-spacing: 0.04em;
vertical-align: top;
font-size: 12px;
font-weight: bold;
font-family: "Helvetica Neue", Arial, sans-serif;
color: #111;
background: #e0e0e0;
border: 1px solid #c7c7c7;
border-radius: 2px;
text-decoration: none;
transition: all 0.2s ease;
}
.share-btn:hover,
.share-btn:focus {
background: #d3d3d3;
border-color: #bababa;
text-decoration: none;
color: #111;
}
.share-btn:active {
background: #c7c7c7;
border-color: #adadad;
text-decoration: none;
color: #111;
}
.share-btn.share-btn-sm {
height: 20px;
font-size: 10px;
padding: 0 8px;
line-height: 1.6;
}
.share-btn.share-btn-lg {
height: 28px;
font-size: 16px;
line-height: 1.4;
}
.share-btn .share-btn-text-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.share-btn.share-btn-branded {
color: #fff;
}
.share-btn.share-btn-branded.share-btn-twitter {
background: #55acee;
border-color: #3ea1ec;
}
.share-btn.share-btn-branded.share-btn-twitter:hover,
.share-btn.share-btn-branded.share-btn-twitter:focus {
background: #3ea1ec;
border-color: #2795e9;
}
.share-btn.share-btn-branded.share-btn-twitter:active {
background: #2795e9;
border-color: #1689e0;
}
.share-btn.share-btn-branded.share-btn-facebook {
background: #3b5998;
border-color: #344e86;
}
.share-btn.share-btn-branded.share-btn-facebook:hover,
.share-btn.share-btn-branded.share-btn-facebook:focus {
background: #344e86;
border-color: #2d4373;
}
.share-btn.share-btn-branded.share-btn-facebook:active {
background: #2d4373;
border-color: #263961;
}
.share-btn.share-btn-branded.share-btn-googleplus {
background: #dd4b39;
color: #fff;
border-color: #d73925;
}
.share-btn.share-btn-branded.share-btn-googleplus:hover,
.share-btn.share-btn-branded.share-btn-googleplus:focus {
background: #d73925;
border-color: #c23321;
}
.share-btn.share-btn-branded.share-btn-googleplus:active {
background: #c23321;
border-color: #ac2d1e;
}
.share-btn.share-btn-branded.share-btn-tumblr {
background: #35465c;
color: #fff;
border-color: #2c3a4c;
}
.share-btn.share-btn-branded.share-btn-tumblr:hover,
.share-btn.share-btn-branded.share-btn-tumblr:focus {
background: #2c3a4c;
border-color: #222d3c;
}
.share-btn.share-btn-branded.share-btn-tumblr:active {
background: #222d3c;
border-color: #19212b;
}
.share-btn.share-btn-branded.share-btn-reddit {
background: #ff4500;
color: #fff;
border-color: #e63e00;
}
.share-btn.share-btn-branded.share-btn-reddit:hover,
.share-btn.share-btn-branded.share-btn-reddit:focus {
background: #e63e00;
border-color: #cc3700;
}
.share-btn.share-btn-branded.share-btn-reddit:active {
background: #cc3700;
border-color: #b33000;
}
.share-btn.share-btn-branded.share-btn-linkedin {
background: #0976b4;
color: #fff;
border-color: #08669c;
}
.share-btn.share-btn-branded.share-btn-linkedin:hover,
.share-btn.share-btn-branded.share-btn-linkedin:focus {
background: #08669c;
border-color: #075683;
}
.share-btn.share-btn-branded.share-btn-linkedin:active {
background: #075683;
border-color: #05466b;
}
.share-btn.share-btn-branded.share-btn-delicious {
background: #3399ff;
color: #fff;
border-color: #198cff;
}
.share-btn.share-btn-branded.share-btn-delicious:hover,
.share-btn.share-btn-branded.share-btn-delicious:focus {
background: #198cff;
border-color: #007fff;
}
.share-btn.share-btn-branded.share-btn-delicious:active {
background: #007fff;
border-color: #0073e5;
}
.share-btn.share-btn-branded.share-btn-stumbleupon {
background: #eb4924;
color: #fff;
border-color: #e13b15;
}
.share-btn.share-btn-branded.share-btn-stumbleupon:hover,
.share-btn.share-btn-branded.share-btn-stumbleupon:focus {
background: #e13b15;
border-color: #ca3412;
}
.share-btn.share-btn-branded.share-btn-stumbleupon:active {
background: #ca3412;
border-color: #b22e10;
}
.share-btn.share-btn-branded.share-btn-pinterest {
background: #cc2127;
color: #fff;
border-color: #b61d23;
}
.share-btn.share-btn-branded.share-btn-pinterest:hover,
.share-btn.share-btn-branded.share-btn-pinterest:focus {
background: #b61d23;
border-color: #a01a1f;
}
.share-btn.share-btn-branded.share-btn-pinterest:active {
background: #a01a1f;
border-color: #8a161a;
}
.share-btn.share-btn-inverse {
color: #eeeeee;
background: #1f1f1f;
border-color: #050505;
}
.share-btn.share-btn-inverse:hover,
.share-btn.share-btn-inverse:focus {
background: #121212;
border-color: #000000;
color: #eeeeee;
}
.share-btn.share-btn-inverse:active {
background: #050505;
border-color: #000000;
color: #eeeeee;
}
.share-btn.share-btn-twitter .share-btn-icon,
.share-btn.share-btn-googleplus .share-btn-icon,
.share-btn.share-btn-tumblr .share-btn-icon,
.share-btn.share-btn-linkedin .share-btn-icon,
.share-btn.share-btn-pinterest .share-btn-icon,
.share-btn.share-btn-stumbleupon .share-btn-icon,
.share-btn.share-btn-delicious .share-btn-icon,
.share-btn.share-btn-more .share-btn-icon {
position: relative;
top: 1px;
}
@-moz-document url-prefix() {
.share-btn.share-btn-twitter .share-btn-icon,
.share-btn.share-btn-googleplus .share-btn-icon,
.share-btn.share-btn-tumblr .share-btn-icon,
.share-btn.share-btn-linkedin .share-btn-icon,
.share-btn.share-btn-pinterest .share-btn-icon,
.share-btn.share-btn-stumbleupon .share-btn-icon,
.share-btn.share-btn-delicious .share-btn-icon,
.share-btn.share-btn-more .share-btn-icon {
top: 0;
}
}
.share-btn.share-btn-more.share-btn-lg .share-btn-icon {
top: 2px;
}
.share-btn .share-btn-text {
padding-left: 2px;
}
</style>

<script>
window.console = window.console || function(t) {};
</script>

<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>


</head>

<body translate="no" >
<!-- Feel free to copy and paste the markup below -->

<h2>Icon Only</h2>

<!-- Icon-only Branded Twitter button -->
<a class="share-btn share-btn-branded share-btn-twitter"
href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
title="Share on Twitter">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Twitter</span>
</a>

<!-- Icon-only Branded Facebook button -->
<a class="share-btn share-btn-branded share-btn-facebook"
href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Facebook">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Facebook</span>
</a>

<!-- Icon-only Branded Google+ button -->
<a class="share-btn share-btn-branded share-btn-googleplus"
href="https://plus.google.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Google+">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Google+</span>
</a>

<!-- Icon-only Branded Reddit button -->
<a class="share-btn share-btn-branded share-btn-reddit" href="https://www.reddit.com/submit?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq" title="Share on Reddit+">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Reddit</span>
</a>

<!-- Icon-only Branded Tumblr button -->
<a class="share-btn share-btn-branded share-btn-tumblr"
href="https://www.tumblr.com/share/link?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Tumblr">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Tumblr</span>
</a>

<!-- Icon-only Branded LinkedIn button -->
<a class="share-btn share-btn-branded share-btn-linkedin"
href="https://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on LinkedIn">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">LinkedIn</span>
</a>

<!-- Icon-only Branded Pinterest button -->
<a class="share-btn share-btn-branded share-btn-pinterest"
href="https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Pinterest">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Pinterest</span>
</a>

<!-- Icon-only Branded StumbleUpon button -->
<a class="share-btn share-btn-branded share-btn-stumbleupon"
href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on StumbleUpon">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">StumbleUpon</span>
</a>

<!-- Icon-only Branded Delicious button -->
<a class="share-btn share-btn-branded share-btn-delicious"
href="https://delicious.com/save?v=5&noui&jump=close&url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Delicious">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Delicious</span>
</a>

<!-- Icon-only Email button -->
<a class="share-btn share-btn-email" href="/cdn-cgi/l/email-protection#a996dadccbc3cccadd94fac1c8dbcc89ebdcddddc6c7da89edccc4c68fcbc6cdd094c1ddddd98c9ae88c9bef8c9befcac6cdccd9ccc787c0c68c9befdadcc7c7d0dac0c7cec18c9befd9ccc78c9befe6f9d1cbced8" title="Share via Email">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Email</span>
</a>

<!-- Icon-only More/share button -->
<a class="share-btn share-btn-more"
href="https://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="More share options">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">More</span>
</a>

<h2>Brand Colors</h2>

<!-- Branded Twitter button -->
<a class="share-btn share-btn-branded share-btn-twitter"
href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
title="Share on Twitter">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Twitter</span>
</a>

<!-- Branded Facebook button -->
<a class="share-btn share-btn-branded share-btn-facebook"
href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Facebook">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Facebook</span>
</a>

<!-- Branded Google+ button -->
<a class="share-btn share-btn-branded share-btn-googleplus"
href="https://plus.google.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Google+">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Google+</span>
</a>

<!-- Branded Reddit button -->
<a class="share-btn share-btn-branded share-btn-reddit" href="https://www.reddit.com/submit?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq" title="Share on Reddit+">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Reddit</span>
</a>

<!-- Branded Tumblr button -->
<a class="share-btn share-btn-branded share-btn-tumblr"
href="https://www.tumblr.com/share/link?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Tumblr">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Tumblr</span>
</a>

<!-- Divider only used for demo, don't copy this -->
<div class="divider" role="presentation"></div>

<!-- Branded LinkedIn button -->
<a class="share-btn share-btn-branded share-btn-linkedin"
href="https://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on LinkedIn">
<span class="share-btn-icon"></span>
<span class="share-btn-text">LinkedIn</span>
</a>

<!-- Branded Pinterest button -->
<a class="share-btn share-btn-branded share-btn-pinterest"
href="https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Pinterest">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Pinterest</span>
</a>

<!-- Branded StumbleUpon button -->
<a class="share-btn share-btn-branded share-btn-stumbleupon"
href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on StumbleUpon">
<span class="share-btn-icon"></span>
<span class="share-btn-text">StumbleUpon</span>
</a>

<!-- Branded Delicious button -->
<a class="share-btn share-btn-branded share-btn-delicious"
href="https://delicious.com/save?v=5&noui&jump=close&url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Delicious">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Delicious</span>
</a>

<h2>Default</h2>

<!-- Medium Twitter button -->
<a class="share-btn share-btn-twitter"
href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
title="Share on Twitter">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Twitter</span>
</a>

<!-- Medium Facebook button -->
<a class="share-btn share-btn-facebook"
href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Facebook">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Facebook</span>
</a>

<!-- Medium Email button -->
<a class="share-btn share-btn-email" href="/cdn-cgi/l/email-protection#7e410d0b1c141b1d0a432d161f0c1b5e3c0b0a0a11100d5e3a1b1311581c111a0743160a0a0e5b4d3f5b4c385b4c381d111a1b0e1b105017115b4c380d0b1010070d171019165b4c380e1b105b4c38312e061c190f" title="Share via Email">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Email</span>
</a>

<!-- Medium More/share button -->
<a class="share-btn share-btn-more"
href="https://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="More share options">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">More</span>
</a>

<h2>Inverse</h2>

<a class="share-btn share-btn-inverse share-btn-twitter"
href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
title="Share on Twitter">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Twitter</span>
</a>

<a class="share-btn share-btn-inverse share-btn-facebook"
href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Facebook">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Facebook</span>
</a>

<a class="share-btn share-btn-inverse share-btn-email" href="/cdn-cgi/l/email-protection#56692523343c3335226b053e37243376142322223938257612333b39703439322f6b3e22222673651773641073641035393233263338783f39736410252338382f253f38313e73641026333873641019062e343127" title="Share via Email">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Email</span>
</a>

<a class="share-btn share-btn-inverse share-btn-more"
href="https://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="More share options">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">More</span>
</a>

<h2 class="heading-sizes">Sizes</h2>

<h3>Small</h3>

<!-- Small Twitter button -->
<a class="share-btn share-btn-sm share-btn-twitter"
href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
title="Share on Twitter">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Twitter</span>
</a>

<!-- Small Facebook button -->
<a class="share-btn share-btn-sm share-btn-facebook"
href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Facebook">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Facebook</span>
</a>

<!-- Small Email button -->
<a class="share-btn share-btn-sm share-btn-email" href="/cdn-cgi/l/email-protection#36094543545c5355420b655e57445316744342425958451672535b59105459524f0b5e42424613057713047013047055595253465358185f59130470454358584f455f58515e13047046535813047079664e545147" title="Share via Email">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Email</span>
</a>

<!-- Small More/share button -->
<a class="share-btn share-btn-sm share-btn-more"
href="https://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="More share options">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">More</span>
</a>

<h3>Medium (default)</h3>

<!-- Medium Twitter button -->
<a class="share-btn share-btn-twitter"
href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
title="Share on Twitter">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Twitter</span>
</a>

<!-- Medium Facebook button -->
<a class="share-btn share-btn-facebook"
href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Facebook">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Facebook</span>
</a>

<!-- Medium Email button -->
<a class="share-btn share-btn-email" href="/cdn-cgi/l/email-protection#fec18d8b9c949b9d8ac3ad969f8c9bdebc8b8a8a91908ddeba9b9391d89c919a87c3968a8a8edbcdbfdbccb8dbccb89d919a9b8e9b90d09791dbccb88d8b9090878d97909996dbccb88e9b90dbccb8b1ae869c998f" title="Share via Email">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Email</span>
</a>

<!-- Medium More/share button -->
<a class="share-btn share-btn-more"
href="https://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="More share options">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">More</span>
</a>

<h3>Large</h3>

<!-- Large Twitter button -->
<a class="share-btn share-btn-lg share-btn-twitter"
href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
title="Share on Twitter">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Twitter</span>
</a>

<!-- Large Facebook button -->
<a class="share-btn share-btn-lg share-btn-facebook"
href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Facebook">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Facebook</span>
</a>

<!-- Large Email button -->
<a class="share-btn share-btn-lg share-btn-email" href="/cdn-cgi/l/email-protection#3a05494f58505f594e0769525b485f1a784f4e4e5554491a7e5f57551c58555e4307524e4e4a1f097b1f087c1f087c59555e5f4a5f541453551f087c494f5454434953545d521f087c4a5f541f087c756a42585d4b" title="Share via Email">
<span class="share-btn-icon"></span>
<span class="share-btn-text">Email</span>
</a>

<!-- Large More/share button -->
<a class="share-btn share-btn-lg share-btn-more"
href="https://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="More share options">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">More</span>
</a>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

<script id="rendered-js" >
(function () {

var shareButtons = document.querySelectorAll(".share-btn");

if (shareButtons) {
[].forEach.call(shareButtons, function (button) {
button.addEventListener("click", function (event) {
var width = 650,
height = 450;

event.preventDefault();

window.open(this.href, 'Share Dialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=' + width + ',height=' + height + ',top=' + (screen.height / 2 - height / 2) + ',left=' + (screen.width / 2 - width / 2));
});
});
}

})();
//# sourceURL=pen.js
</script>


</body>

</html>


Click the following button to install AddToAny for Blogger. After clicking, you'll be taken to Blogger. Simply login (if not already logged in), select your blog, click ADD WIDGET, then click SAVE. This widget, specially optimized for Blogger, installs the share button below each blog post.




Click the following button to install AddToAny for Blogger. After clicking, you'll be taken to Blogger. Simply login (if not already logged in), select your blog, click ADD WIDGET, then click SAVE. This widget, specially optimized for Blogger, installs the share button below each blog post.


To place under every post in Blogger (manual installation)

The recommended install method is to click the Install Blogger Widget button above. The following install method is more advanced but may be a more ideal solution for some blogs.
  • Go to Layout > Edit HTML
  • Checkmark Expand Widget Templates
  • In the template code, search for <data:post.body/> using your browser's find feature (commonly in Edit > Find)
  • Right after that line, paste the following code:
    • <!-- AddToAny BEGIN -->
      <br/><a class='a2a_dd' href='http://www.addtoany.com/share_save'><img alt='Share/Bookmark' border='0' src='http://static.addtoany.com/buttons/share_save_171_16.png' width='171' height='16'/></a><p class='a2a_linkname_escape' style='display:none'><data:post.title/></p><script type='text/javascript'>var a2a_config = a2a_config || {};a2a_config.linkname_escape=1;a2a_config.linkurl="<data:post.url/>";</script><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'></script>
      <!-- AddToAny END -->
  • Save the template
Read More:
http://www.addtoany.com/buttons/
http://www.addtoany.com/buttons/for/blogger


Related Post for SHARING WIDGET Add To Any For Blogger

  • HTML SYNTAX HIGHLIGHTER ----------------------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------ā€¦
  • FLICKITY JS CSS SLIDER ----------------------------------------------------------------------------------------------------------------------- ReadMore: https://flickity.metafizzy.co/ NEED 1 CSS FILā€¦
  • LABEL WIDGET RAINBOW/MULTI COLOUR STYLE ------------------------------------------------------------------------------------------------- FIRST ADD LABEL WIDGET AND SET LIST OPTION REPLACE YOUR B SKIN TAG WITH BELOā€¦
  • RADIO BUTTON SLIDER TO KEY FRAME SLIDER ------------------------------------------------------------------------------------------------------------ Read More: https://codepen.io/macbobbitt_/pen/jmEBL https://codepeā€¦
  • SEARCH YOUR VIDEO IN GOOGLE ----------------------------------------------------------------------------------------------- 1) CLICK SEAACH TOOLS TAB 2) CLICK 24 HOUR PAST OPTION ------------------------ā€¦
  • FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/flaā€¦
  • WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection httā€¦
  • FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON ----------------------------------------------------------------------------------------------------------- ReadMore: http://codepen.io/desandro/pen/bNLGNZ view-source:http://sā€¦
  • BODY JS FILE LINK IN MAGENTO ------------------------------------------------------------------------------------------------------------- SEARCH IN GOOGLE file content software https://www.google.co.uk/sā€¦
  • CONVERT FILE PATH TO A URL LINK -------------------------------------------------------------------------------------------------------- ANY LIST TO SCROLLER CODE: http://accordionslider.com/ http://anroots.ā€¦
  • FIREBUG LITE USE OFFLINE ------------------------------------------------------------------------------------------------------------- 1)GET CSS CODE BY COPY CSS SELECTOR OR GOOGLE INSPECT 2) OR GET CSSā€¦
  • INTENSO MAGENTO QUICK VIEW BUTTON ----------------------------------------------------------------------------------------------------------------  6:01 REMOVE QUICK VIEW BUTTON IN MAGEā€¦
Posted by on Saturday, 13 July 2013 at 09:58
Labels:

0 comments:

Post a Comment

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets