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

  • Search Engine Optimization Toolkit UN USED CSS IN GOOGLE   Free SEO Toolkit Start with the free download, review your website, and make changes fast. The SEO Toolkit with its detailed analysis and search engine friendly suggestion…
  • SHARING WIDGET Add To Any For Blogger Share button for Blogger To place under every post in Blogger To place under every post in Bloggerhttps://codepen.io/sunnysingh/pen/OPxbgq<!DOCTYPE html><html lan…
  • IMAGE UPLOAD WITH JAVA WITH PHP CODE ------------------------------------------------------------------------------------------------------ CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE IN THIS FOLDER &nb…
  • IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------…
  • HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_U…
  • GOOGLE CUSTOM SEARCH BOX ------------------------------------------------------------------------------------------------------------------ GOOGLE CUSTOM SEARCH BOX -----------------------------------…
  • FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/fla…
  • CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------…
  • JS IMAGE SCROLLER -------------------------------------------------------------------------------------------------------------- JS IMAGE SCROLLER CODE image scroller https://amazingcarousel.com…
  • WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection htt…
  • ARROW BUTTON ------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE ---------------------------------------------…
  • SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More:  3:30 PDF HTML IMAGE CONVERTER HD…
  • SEO SCORE TOOLS SEO Audit Tool  Reasons to be a Professional Member 1. Generate more SEO leads from your website 2. Increase SEO sales with personalized audits 3. Get email notifications o…
  • Magento Hello World Module (Extension) -------------------------------------------------------------------------------------------------------------- READ MORE: http://inchoo.net/magento/programming-magento/magento-…
  • BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/s…
  • NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CT…
  • FLASH 8 DOWNLOAD DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKS&n…
  • RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD  </head> TAG AND PASTE BELOW CODE WHEN W…
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