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/AVvXsEjcObIAzvJG9GorIn_dOiMB_W2A1rbg2p742yOS0QWfJNH75Dfgg1g9LRhTXt5VILFAJMBVwHgETaR2hAfdBL9i3_AOyavygP3Kagdg2CRJEa4k7EPXN0lS8yDsiMlPzr9AzkKTv9Llh14/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/AVvXsEjP7D6dXOK0yTI-IJA6I7MGmtSQypWHip3S0HOD3fRPBBCiyYkMEV7BzXJIQV_w1FRGN-WWolh0JNmP2YPxksNsTmkGQIhXCh8QA5yz4UgqvBQ7Ol85pabSLzo28h0rfsYdYI9i8TBpPV0/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/AVvXsEjzjNJHqeRYa0GHI_QXIoJ0kXo5m1dGZsyj0gByQlrCAzod3a-uOgS5tYH8zDFXpaBzYG2r3zdgF_PdzVlQ_73mQaI7zZ6aio8UG9iZqG8-3KLbfGC8NwNUIozf56XaFeOp_yQdKwUS0tM/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/AVvXsEjLGHoheKVYHbXKKmGe9-wLLA6tu0KJ23nXTalOmOjT1gN9IZ68m5CU6tr3k_sP0ef84c_7g13-IAVUwUG6b9CgjPGPwCBWwnWDBhe4wkXo6sbNKlRCZUKdTC0rzGZHCWuKBX4Tb_Hm26E/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/AVvXsEic2K_IKhIFWsIxPTc17Gs7pYMYHr2CbkZuqv7PvCIcDYdx4NOXw77eeUM6lf9EjoxcYVtzv3yP_dJI-Qp5gmb_E_u6GMKVHRlQu8rQKsUu4IMgKqJa50TKPPq6Up23EjRdnw4YZR5nlM0/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/AVvXsEhBrdDhirJB4b1Edljpz018C5tQJwtARlYjmzttzwI3841c7kyU9ECWDX3ppxTc28OCOQxhNNKJGeL2BmOmAmL8pRYPsAvbgqtdRDF7CGxtRZj6fNfJp1xLdFTRp3hXnM6ccONc9EVm7gc/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/AVvXsEjztPZ_pgM_cV9-46AE_6K0rHCq_wiIqncBvAhRqPXbdHpVua7pk_o1DzUrDpOVrnIeP2sHgbNbzGVl0WfPbRiCKgpslvMzVwWaLYIqjZeZ10fUE3U5j5pslJ-IasdG2myqPHXEMir814M/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://every1posts.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 1 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
Thanks You For FeddBack! :)