Today I am introducing the coding of very beautiful
attractive social/email subscription box. This is very easy to add in your
blog. You can place it anywhere I the blog either in side bar or footer. This
widget I especially coded for my new readers and newbie’s.
Importance Of This Social
Sharing Gadget
|
1- This gadget loads very quickly o any browsers
2- It is useable on wordpress also
3- It’s easy to use and can be place in blogger easily
4- It can be placed anywhere in blog sidebar or footer
5- It will increase you subscribers
6- It is attractive with hover effects
Why This Gadget Must Be Added In Blog
|
If you want to make your blog attractive and professional then you must add this gadget. This is totally created on the blogger techniques and is totally created by the HTML and CSS3.
This gadget doesn’t have any credit
links and totally 100% free. You must link back to us to share this gadget in
your blog.
How To Add Attractive Social Subscription Gadget In Blog
|
- 1- Now go to Blogger.com
- 2- Sign in > Go to Layout
- 3- Click on Add A Gadget
- 4- Select HTML/JavaScript
- 5- Copy the code given below and paste it in HTML/JavaScript box
<div id="subscribers"><div class="subscriptionboxtitle"><h4>Sign Up With In Seconds</h4><span style="color: white;">Sign Up With Our Newsletter And Get Daily Fresh Updates Straight In Your Inbox (We Hate Spam! We Promise)</span></div><div class="subscriptionsingup"><form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=operaorbis', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input id="subscriptionbox" name="email" onblur="if ( this.value == '' ) { this.value = 'Enter your email address.......'; }" onfocus="if ( this.value == 'Enter your email address.........') { this.value = ''; }" type="text" value="Enter your email address......." /><input name="uri" type="hidden" value="operaorbis" /><input name="loc" type="hidden" value="en_US" /><input id="subscribebutton" type="submit" value="Yes, I Want Daily Updates." /><br /><span style="color: white;"><span style="font-size: xx-small;">(</span><span style="font-size: xx-small;">Note:</span></span><span style="color: red; font-size: xx-small;"> </span><span style="color: white; font-size: xx-small;">When signing up you will initially receive a confirmation email requiring your approval to complete the Subscription.<Script Language='Javascript'><!--
document.write(unescape('%3C%61%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%72%6F%6C%65%3D%22%62%75%74%74%6F%6E%22%20%63%6C%61%73%73%3D%22%63%72%65%64%69%74%73%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%61%6C%6C%62%6C%6F%67%74%68%69%6E%67%73%2E%63%6F%6D%2F%22%3E%47%65%74%20%49%74%3C%2F%61%3E'));//--></Script></span><span style="color: white; font-size: x-small;">)</span></form></div><style>
.subscriptionsingup { padding: 20px;}
#subscriptionbox { padding: 10px 15px 10px 15px; width: 260px; text-shadow: none; font-size: 16px; color: #009999; margin-bottom: 7px;transition:background 400ms;}#subscriptionbox:focus{background:#ffcb00;}#subscribebutton { background: #000; border: none; font-weight: 700; color: #fff; width: 257px; padding: 15px; text-shadow: none; font-size: 15px; cursor: pointer; padding-right: 10px; margin-left: 2px;}
.thin { text-shadow: none; font-weight: 300;}
#subscribers { float: left; width: 296px; background: #009909; border: 4px solid #000; font-family:open sans;}
#whatyouget { background: #03628f; padding: 10px;}
ul.whatyougetwith li { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeeTJhlVEcQ5rhMTVfLlfaeY20kMUwU1qgswOef2PLXDUJTJXyyJeHEj5qgwiZKrtnUKIlGb3zTrsmfY_4zyBdId4cWsozCB0eJnFdEoC_qESDhY_Yp_eA_fcy0CqhTY682sEfvc5sCh4/s1600/checkmarkk.png) no-repeat; margin: 10px; padding-bottom: 10px; text-shadow: none; font-size: 14px; line-height: 20px; text-shadow: none; font-weight: 700; color: #fff; overflow: hidden; padding-left: 25px;}
.whatyougetwith ul { margin: 30px 30px 0 25px; padding: 0 0 0 25px;}
.subscriptionboxtitle { height: 110px; padding: 10px; background: #009909;}
.subscriptionboxtitle p { text-shadow: none; font-size: 14px; padding: 0px; margin: 0px; line-height: 20px; color: #fff; margin-top: 5px; text-align: center;}
.subscriptionboxtitle h4 { text-shadow: none; font-size: 23px; margin: 0px; padding: 0px; text-align: center; line-height: 25px; color: #fff; padding-top: 15px; padding-bottom: 10px;}
</style></div></div>
Customization
|
- 1- Change the PURPLE Color with your feed burner link
- 2- Change the ORANGE Color with your desire heading
- 3- Change the SKY Color with your Desired sign up message
- 4- Now Save the HTM/JavaScript box
- 5- Congratulations! You have completely added this gadget. You can place it anywhere in the blog by dragging HTML/JavaScript box.
Your Turn
|
Hope you have added this gadget very easily. If you have any
problem related to its addition then must contact me by commenting below. If
you like this please must share it to your friends. You can contact me for more
SEO tips/widgets/gadgets or other related blogging material. Stay in touch by
comment below.
Comment Policy : We are pleased to see your comment here. However, Please Keep in mind that all comments are moderated manually by humans according to our comment policy all. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and meaningful conversation.