Subscribe for FREE Updates.

Saturday, 16 March 2013

Widgets

Subscribe Widget With Beautiful Social Media Profile For Blogger

Subscribe Widget box
A few days ago I published a tutorial about how can you add facebook page like box in your blogger or website to increase your fans like but now I am going to tell you about how you can add a Subscriber box with social media icon into your website or blogger blog without difficulty. This is a great widget for blogger blog and websites which is used to promote your fan page and definitely increase your like and also increase your subscriber. 
So, follow these steps to add subscriber box 
with social media icons in blogger.


                                                                        Live Demo

Add Subscribe Widget With Social Media to Blogger:

  •  Click on blog title in which you want to add This Subscriber box.
  •  Go to layout and then click on Add a Gadget.
  •  Select Html/JavaScript and paste the below code in it. 


<style> 
 #KHsocialcounters{ 
 width:300px; 
 padding: 0 0 40px 0; 
 border: 1px solid #CCC;} 
 ul#KHcounters { 
   list-style: none; 
   margin:0px; 
   overflow: hidden; 
   width:300px; 
   padding:10px 0 40px 0; 
    margin:10px 0 -60px 12px; 
 } 
 ul#KHcounters li { 
   float:left; 
   margin:0px 0px 5px 0px; 
   width:auto; 
   padding:0px; 
   -webkit-transition: all .2s ease-in-out; 
   -moz-transition: all .2s ease-in-out; 
   transition: all .2s ease-in-out;} 
 ul#KHcounters li a { 
   display: block; 
   height: 50px; 
   margin-right: 0px; 
   padding-top: 75px; 
   text-align: center; 
   text-decoration: none; 
   width: 70px; 
   text-shadow: 1px 1px 0 rgba(255,255,255,0.5); 
   font-weight: bold; 
 } 
 ul#KHcounters li:hover { 
   opacity:0.6
 } 
 ul#KHcounters li:last-child a{ 
   margin-right:0px; 
 } 
 ul#KHcounters #counter-rss { 
background:url('http://4.bp.blogspot.com/-tZm91wOFsAI/UUR4OwqDXCI/AAAAAAAABFI/QzKgZZY3oMk/s1600/KH-rss-counter.jpg') no-repeat 
 } 
 ul#KHcounters #counter-rss a { 
   color:#cf6600 
 } 
 ul#KHcounters #counter-facebook { 
background:url('http://3.bp.blogspot.com/-N7rBMd-2XI0/UUR4OtuyG8I/AAAAAAAABFA/G3mCk9m__OI/s1600/KH-facebook-counter.jpg') no-repeat 
 } 
 ul#counters #counter-facebook a { 
  color:#3b4d8f 
 } 
 ul#KHcounters #counter-twitter { 
background:url('http://2.bp.blogspot.com/-QzPTqAvqcRI/UUR4PkOK0mI/AAAAAAAABFU/UTBIgUSxOnk/s1600/KH-twitter-counter.jpg') no-repeat 
 } 
 ul#KHcounters #counter-twitter a { 
   color:#276ab6 
 }
ul#KHcounters #counter-google { 
background:url('http://2.bp.blogspot.com/-Xo5oyOxNOk4/UUSWfx1HgbI/AAAAAAAABF8/gFj7AzoUQi4/s1600/KH-google-counter.jpg') no-repeat 
 } 
 ul#KHcounters #counter-google a { 
   color:red 
 }   
 .textwidget {width: 300px;margin-top: -50px;} 
input[type="submit"]{color:white;border:0px;text-transform:uppercase;font-size:11px;padding:13px;float:left;font-weight:bold;background-color:#2DA1EB;margin-left:100px;cursor: pointer;margin-top: 10px;} 
 </style> 
 <center> 
 <br /> 
 <div id="KHsocialcounters"> 
 <ul id="KHcounters"> 
 <li class="first-item" id="counter-rss"> 
 <a href="http://feeds.feedburner.com/kutebkhana">100+</a></li> 
 <li id="counter-facebook"> 
 <a href="http://www.facebook.com/kutebkhana">250+</a></li> 
 <li id="counter-twitter"> 
 <a href="https://twitter.com/shakeelasghar">300+</a></li> 
<li id="counter-google"> 
 <a href="https://plus.google.com/u/0/116054827022382240041">300+</a></li> 
 </ul> 
 <div class="KHtextwidget"> 
<formaction="http://feedburner.google.com/fb/a/mailverify"method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=kutebkhana', 'popupwindow', 
'scrollbars=yes,width=350,height=520');return true" style=" padding: 3px; text-align: center;" target="popupwindow"> 
 <h3>For Latest news And Updates Sign Up</h3><br /> 
 <input name="email" style="width: 180px;" type="text" /><br /> 
 <input name="uri" type="hidden" value="kutebkhana" /><input name="loc" type="hidden" value="en_US" /><input type="submit" value="Sign Up" /></form></div><a href="http://kutebkhana.blogspot.com/2013/03/subscribe-widget-with-beautiful-social.html" style="margin-right: -50px;margin-top: 
100px;font-size: 10px;">Grab This</a> 
 </div></center>




Customization!

  • Replace "kutebkhana" "kutebkhana" "shakeelasghar"and "116054827022382240041" with your own feed, facebook, twitter, and google plus ID.
  •   Change 100+ 250+ 300+ 300+ according to your like and subscriber and then save the gadget.


You Are  Done!

Enjoy keep visiting!

Note: After a week manually change Facebook like twitter follower, and subscriber.

if you have any question and any problems feel free write a comments.

Shakeel Asghar ADMIN
Posted By: Shakeel Asghar

Shakeel Asghar is the owner and founder of kutebkhana.blogspot.com. I love to blogging, Design Blogger template, Web Developing and Designing.i like to learn and share tips with you.

Do you Like this story..?

Get Free Email Updates Daily!

Follow us!

5 Responses to “Subscribe Widget With Beautiful Social Media Profile For Blogger”

Hafeez Khan said...
17 March 2013 at 03:37

Great Asghar Bro awesome widget i like it .....keep it up

...▄▀▄▀▄▀▄ ▀ProBloggerTricks▀▄▀▄▀▄▀▄...


shakeel asghar said...
17 March 2013 at 09:28

@ hafeez
thanks for your appreciation keep in touch always


Nicey Charie said...
11 April 2013 at 11:11

Nice codes. This is a must use widget plug-in to all blogger users. So they can get Facebook fans easily just like the buy facebook fans that I've been using. This two makes a good combination.


shakeel asghar said...
11 April 2013 at 22:01

@ nicey charie
thanks for your beautiful appreciation keep visiting for more widgets tips and tricks


Nicey Charie said...
15 April 2013 at 11:12

I already book-marked this your site. ^^


Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. If you have a problem check first the comments, maybe you will find the solution there.


Regards,
Shakeel Asghar

Are you Awesome? Legend has it that Awesome people can and will share this post!
Subscribe Widget With Beautiful Social Media Profile For Blogger