331A96E0-3037-43FC-8D93-543B900B11C9

😍 Loving this theme? Download

Please enter at least 3 characters.

Stylish Subscription Box For Blogger With Social Buttons | v.2

Add a simple email subscription box with social buttons to your blogger.
Stylish Subscription Box For Blogger With Social Buttons  | v.2
Stylish Subscription Box For Blogger With Social Buttons
Here we are presenting you the v.2 of "most stylish sidebar subscription box widget with social buttons" ever on this blog. Actually we wanted to design a different style of subscription box widget for this blog with all the major social profile buttons in it and here we began the process of designing it. We are willing to share this widget with you guys and we hope you like it. Let us begin the installation process which will take no more than 5 to 10 minutes.

Steps To Install Sidebar Subscription Box With Social Buttons For Blogger

Step 1) As usual :) Go to Blogger → Layout → And Add a New HTML widget.
Step 2) Now copy the CSS and HTML code given below and paste it inside newly added HTML box  after Completing Step 3) and hit save.
/*---------Widget By www.TwistBlogg.com Copyright 2019--------*/
<style>
#BonGi {
width: 285px;
background: #000000;
height: 344px;
}
.PBButton:hover{
background: #F8F806;
color: #000;
}
.PBButton {
background: #47FF00 url('');
float: left;
width: 108px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.83);
box-shadow: inset 0px 0px 30px #BF14D6;
height: 31px;
display: inline-block;
margin-top: -1px;
}
.PBEnter-mail {
border: 1px solid #000000;
margin-left: 5px !important;
float: left;
display: inline-block;
border-radius: 3px;
background: #F8F8F8;
box-shadow: inset 0px 0px 7px #AEB4AC;
color: #696868;
font: 9px "Lucida", sans-serif;
padding: 4px 5px;
margin-right: -3px;
width: 158px;
}
.p {
font-family: Lucida, Grande;
Font-size: 20px;
margin-top: 0px !important;
background: #414040;
box-shadow: inset 0px 0px 100px #1326B1;
text-shadow: -3px 2px 3px #000;
color: #FFF;
border-bottom: solid 4px #FFFFFF;
font-weight: bold;
text-align: center;
padding: 4px 4px;
margin-bottom: 10px;
}
#Twitter {
Float: left;
display: inline-block;
width: 277px;
font-weight: bold;
font-size: 15px;
margin-top: 10px;
text-shadow: 1px 1px 0px #F1F1F1;
color: #050077;
font-variant: small-caps;
box-shadow: inset 0px 0px 30px #E0E900;
padding: 4px 2px;
background: #F5FF00;
border: 2px solid #CED605;
}
#Facebook {
Float: left;
display: inline-block;
width: 277px;
margin-top: 1px;
font-size: 15px;
font-weight: bold;
text-shadow: 1px 1px 0px #F1F1F1;
color: #0E5A00;
padding: 4px 2px;
box-shadow: inset 0px 0px 30px #FFA41B;
font-variant: small-caps;
background: #FFC200;
border: 2px solid #F79E00;
}
#GoOgle {
Float: left;
display: inline-block;
width: 277px;
font-weight: bold;
font-size: 15px;
margin-top: 1px;
margin-right: 15px;
margin-bottom: 10px;
text-shadow: 1px 1px 0px #F1F1F1;
color: #0E5A00;
padding: 4px 2px;
box-shadow: inset 0px 0px 30px #FF8169;
font-variant: small-caps;
background: #FFFFFF;
border: 2px solid #F305E0;
}
</style>
<div id='BonGi'><div class='p'>
Subscribe For Free Future Updates Via Email</div>
<div class="emailbox"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TwistBlogg', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input class="PBEnter-mail" size="35" type="text" style="font-size: 15px;" id="email" name="email" value="Enter Your Email..." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="hidden" value="TwistBlogg" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="PBButton" name="commit" type="submit" value="Subscribe &#x2661" /></form></div>
<div id='Twitter'> <a href="https://twitter.com/twistblogg" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @TwistBlogg</a> </div><div id='Facebook'>Like Us On FaceBook <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FTwistBloggercom%2F740638259280667&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=124246297655999" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;position: absolute;margin-left: 35px;" allowtransparency="true"></iframe></div><div id='GoOgle'><span style="margin-right: 15px;">Join Us On Google Plus</span> <div class="g-plusone" data-size="medium"></div></div><div class="g-person" data-width="285" data-href="//plus.google.com/u/0/+invictushaxor" data-layout="landscape" data-rel="author"></div></div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Step 3) Modification Required : You Need To Change/Replace Some things highlighted in above Code like as Social Links and Feedburner Feed Address etc. with your own links so follow the steps as given below:
  • FeedBurner Address: Change our blog's Feed address with your blog's by replacing TwistBlogg highlighted text.
  • Tweeter Address: To change the twitter address just replace our Twitter username TwistBlogg with your's.
  • FaceBook Address: We got a weird facebook page address because we need to get more likes to change it to desired one so would you help us by liking? :) Anyway just replace 2Fpages%2FTwistBloggercom%2F740638259280667 with your facebook page address. (If you have the same kind of weird address then you need to change the "/" into % and you are fine to go).
  • Google+ Address: Now the only remaining address to change is Google plus profile address so this time replace +invictushaxor profile address with your's profile and all done.
  • JavaScripts: We have used two JavaScript codes in our code at the end of whole CODE  above where first highlighted in yellow text color is of Twitter and second one is for Google+ button. You need not to copy paste them if you are already using these codes in your template.

Final Words: We have explained each and every step above for the complete neat and clean installation but in case you are experiencing some problems, let us know via comments and sort them out for you. You can also play with CSS codes to change the colors, width, height, fonts etc. to make this widget more personal. Help us to grow Pals. Join us on social networks. Stay Safe and Happy Blogging!!

Share this post

Explore more articles by Satbir

2 comments

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. Hey there! Do you use Twitter? I'd like to follow you if that would be ok.
    I'm definitely enjoying your blog and look forward to
    new updates.
  2. Inoltre i blogger non sono webstar. Fashion blogger Roma.
Post a Comment