You have a blog and if your blog is with out collaboration of social media sites, then may be your blog worth is nothing in online world. In this post I will tell you how to add social sharing buttons with Email subscribe widget and facebook page like icon. If you add this widget in your blog, your viewers can easily share/like and subscribe your every post. This widget can help you a lot to popular you in social media sites.
Recommended: Add Attractive Email Subscription Widget in Blogger
Recommended: Add Attractive Email Subscription Widget in Blogger
Instructions to Add Widget in Blogger:
1- Go to blogger Dash Board → Template → Edit HTML
2- After it Find the shown code below by pressing Ctrl+F (Click anywhere in code then press Ctrl+F)
2- After it Find the shown code below by pressing Ctrl+F (Click anywhere in code then press Ctrl+F)
<data:post.body/>
3- Now Copy code shown below and paste just after ( <data:post.body/> )
it.<b:if cond='data:blog.pageType == "item"'>
<style>
p#socialicons img { -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out;} p#socialicons img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}
.emailbutton{background:#f7f8f9;background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);color:#888;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;}
.emailbutton:hover{background:#f1f1f1;background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );text-decoration:none !important;}
.email{clear:both;width:100%;margin:10px 0;}.emailform{position:relative;width:300px;margin:0 auto;}
.emailinput{width:200px;height:18px;margin:0 auto;padding:8px 40px 8px 10px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;font-family:georgia;font-style:italic;-webkit-box-shadow:1px 1px 2px #dfdfdf;-moz-box-shadow:1px 1px 2px #dfdfdf;box-shadow:1px 1px 2px #dfdfdf;font-size:14px;color:#666;}
.emailbutton{-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-border-top-left-radius:0px;-webkit-border-bottom-left-radius:0px;-moz-border-radius-topleft:0px;-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;padding:9px;position:absolute;right:-2px;top:0;display:block;line-height:16px;}
.emailbutton{padding:8px !important;}
.emailform, .emailinput{width:98% !important;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:auto;}
</style>
<center>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div><p id='socialicons'>
<a expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP_UHmNp-wTffAvNmTTwTvIVnJpYCQk7_gNlkKraf6eVCG9xPAepFTYuMSOqN_CexRAbgBsSL7BjJ90lL1cDaMnSA1W1at1trBYhwGu0ZG0sAdVB7BZd0JQHwf-KwwGaYwzILEv7QHbtU/h120/pctoolstips.blogspot.com.png'/></a>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh087d3bwKF-Oqr-oQiXTrompXgKxIaUd-86LSAsCAWG63nZybXagoytjURHLtI0c7F5Il1Eqls-C-W4uM49ZldnWFPNtA3kIIcYzQQbNed09M-E5Sny4IVe-Rvi0NkrPis9q4GnCpED9s/h120/pctoolstips.blogspot.com.png'/></a>
<a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYe6-4FurpSokYUAgTdyDIzDXi6DrYWsPWgcA35fl6W9u7uGDZQrQXVs-rcU2vJiN2LNeru1ZQ1OPZpK2jqy6vzSCSv-Fsm2LBs-6y080nNvFUrxrD2qhU3A2NpufGCDG7nDEsJKPXabE/h120/pctoolstips.blogspot.com.png'/></a>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidS_P33TVdBLiY4Goq5aqAMIPrGS85KxVm3CeehHnQLqDW5tFgUv8khKc9SPyNiLzuQbCSpCeYQaQ6bvemsCbOSSlQ2v1rdRAX6B5fod2AHb87_I3UERwkHG5fU4lSJ3nT415LRo-Ew9U/h120/pctoolstips.blogspot.com.png'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkt4vX95FK9TEY07xNiCpFvzccmmQlkjh5lEz6MCa_3PNrqxUP0W0f_Dgod9AqkpAIGsaVDyj7SA6kTz4cBOb3l8v4jQ7ALqDk0WCfm4Qna8KYrW-azqxmoaXf9EnvfyChGi4c0miPsU0/h120/pctoolstips.blogspot.com.png'/></a>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFnnVA4inBAlWjtxdcvRmE4-fU019zKAQVhYQ3FjCzw_HHNh5GlXCHKcTdz0-MNtYzBUZBLZ_3RwgQMm0AwP2kszq1fwm8ClyK-2jV9eHG4nbdZTQwdMfOTV-zWbciWlzeJyk42qhFYdo/h120/pctoolstips.blogspot.com.png'/></a>
<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz8e4OOh1E6gerUPOedtV-TqqblhHwOlSFPWbb0xUVv26lYX7lHtR4kfsZCL-gx-ikQFWkL3ppcMdTVevxmQFKttmYVuvvfjVQSrdfUFaiQRzy9j5FpaHyXLpjWkKxsUt7sEXSatmswJU/h120/pctoolstips.blogspot.com.png'/></a></p>
<div style='margin:5px 0px 10px 0px; padding:10px; width:590px;float:none; '>
<div style='float:left; width:272px; border-right:1px solid #ddd;'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=
URL HERE
&width=292&colorscheme=light&show_faces=false&border_color&stream=false&header=false&height=62' style='border:none; overflow:hidden; width:292px; height:62px;'/>
</div>
<div style='margin:15px 15px 0px 0px; padding:0px; float:right; width:260px;'>
<iframe allowtransparency='true' class='twitter-follow-button' frameborder='0' scrolling='no' src='http://platform.twitter.com/widgets/follow_button.html#_&id=twitter-widget-0&lang=en&screen_name=
USERNAME2
&show_count=true&show_screen_name=true&size=l' style='width: 266px; height: 32px;' title='Twitter Follow Button'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</div>
<div class="email">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=
USERNAME1
', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">
<input type="hidden" value="
USERNAME1
" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailinput" />
<input type="submit" class="emailbutton" value="SignUp" title='' /></form></div><div dir="ltr" style="text-align: Right;" trbidi="on"><a href="
http://makemoneyonline72.blogspot.com/2015/01/add-social-sharing-icons-with-email.html" target="_blank" ><span style="font-size: xx-small;">Get This</span></a></div>
</center></b:if>
Customize this Widget
4- Replace USERNAME1 with your Feed Burner user name {by pressing Ctrl+F}
5- Replace URL HERE with you Facebook fan page URL
6- Replace USERNAME2 with you Twitter user name.
7- Save Targeted widget and Enjoy.
Note: If this widget doesn't appear after paste Code, then find next [
<data:post.body/>
] code and paste widget code just after it. In case of me I was find this code for 4 time then paste widget code, So Widget will be show below every post.
I hope you enjoyed this featured post. And I'm sure It's working for you. If you have any question and query please ask me in comment section and remember don't forget to share this post with your friends in social media sites.
Post a Comment Facebook Disqus