Saturday 16 March 2013
Subscribe Widget With Beautiful Social Media Profile For Blogger
So, follow these steps to add subscriber box
with social media icons in blogger.
Live Demo
Add Subscribe Widget With Social Media to Blogger:
- Log in to your blogger account.
- 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnldkEDcdhfKVPwW5iXmyNUkeauyOyFhjhH4dM-YU5g9bg7eXe_UpPdd8CqvvMOwwg7ai3rg2sFZUv2t9F_1sjpAoZkobfmI1LP0snEqdrAY40EIA18_8kLWgm2aNZjpB3nk8kJA3qJRk/s1600/KH-rss-counter.jpg') no-repeat
}
ul#KHcounters #counter-rss a {
color:#cf6600
}
ul#KHcounters #counter-facebook {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJmq1LHxbQEGakkoZ7dEFC6pZdMrrE5ucsi0PahRWqrKyc3f688A7ofRBBWsqhXtTEYFHVbHsiuROz3sZLNtWPrBFfa66huxJsI4Ous021qs20AAvlFHzxk59HiflP1CyBaJlk1P0zpIY/s1600/KH-facebook-counter.jpg') no-repeat
}
ul#counters #counter-facebook a {
color:#3b4d8f
}
ul#KHcounters #counter-twitter {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5234Xrl9QAw9Vz1uGIIN08YYNseDaq47BZx_QkR6uvaEVMXNKDzxwDF9vZxpxDxNPO022SuBDhyphenhyphenp9bcA7uXBHoGRT-In-QaiORlI3Xr3uQGNZ9gxm9MSlbdTU_ezF6P47VyxT5ptpwTM/s1600/KH-twitter-counter.jpg') no-repeat
}
ul#KHcounters #counter-twitter a {
color:#276ab6
}
ul#KHcounters #counter-google {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirZKowfnlat_-qyKDzmsMQCspM81lm_nwoQI1kWJYkv8IoDca76BE2fGHVUV0BJTrnVLOirhTww69Lq4XL5-p9WhgK3im1ncGQR9XE7qsSKiABEJcqqn4zDXvczU4jAk3R_GE6KgmPsxI/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 
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.
|
|
|
|
Get Free Email Updates Daily! |
Follow us! 
|
Subscribe to:
Post Comments (Atom)
I'm 
7 Responses to “Subscribe Widget With Beautiful Social Media Profile For Blogger”
17 March 2013 at 03:37
Great Asghar Bro awesome widget i like it .....keep it up
...▄▀▄▀▄▀▄ ▀ProBloggerTricks▀▄▀▄▀▄▀▄...
17 March 2013 at 09:28
@ hafeez
thanks for your appreciation keep in touch always
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.
11 April 2013 at 22:01
@ nicey charie
thanks for your beautiful appreciation keep visiting for more widgets tips and tricks
15 April 2013 at 11:12
I already book-marked this your site. ^^
21 October 2020 at 07:17
Internet Business Income From Home
5 August 2022 at 21:49
03058909267
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