Create Stylish Mashable Style Subscription Widget

Today, i wanna share about how to create Another Stylish Mashable Style Subscription Widget. This tips i get from http://allbloggingtips.com which we can add some more cool features with more social profile likes like Pinterest, Facebook, Twitter, RSS. You can add Mashable Style Subscription Widget to your wordpress or blogger/blogspot blogs easily. Mashable Style Social Subscription Widget is an attractive subscription form that will further increase the number of your Email subscribers.



Features Of New Mashable Subscription Widget
1. Facebook Likebox
2. Recommend us on google+ button
3. Twitter Follow us Badge
4. Social Icons like RSS, Pinterest, Twitter and Google+
5. Feedburner Subscription Widget

Adding New Mashable Style Social Subscription Widget

You just need to place a code to your blog widget Follow following steps to add New Mashable Style Social Subscription Widget to WordPress and Blogger.

Adding To Blogger
1. Go to Design > Page Elements.
2. Click Add A Gadget.
3. In Add A Gadget window, select HTML/Javascript .
4. Copy the code below and paste it inside the content box.
5. Save the gadget.
6. Drag the gadget and reposition it under Blog Posts gadget.
7. Click Save button (top right hand corner).

Adding To WordPress
1. Go to Dashboard > Appearance > Widgets > Available Widgets.
2. Drag Text widget into a sidebar.
3. Paste in the code.
4. Save.

<style>
/* Social Widget */
#ABT-mashable-bar {

border: 0; background:#c8e993; border:1px solid #ccc;
margin-bottom: 10px; padding:8px;
margin: 0 auto;
width:270px;
}
.fb-likebox {
background: #fafafa;
padding: 10px 10px 0 10px;
border: 1px solid #D8E6EB;
margin-top: -2px;
height:80px;
}
.googleplus {
background: #F5FCFE;
border-top: 1px solid #FFF;
border-bottom: 1px solid #ebebeb;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-image: initial;
font-size: .90em;
font-family: "Arial","Helvetica",sans-serif;
color: #000;
padding: 9px 11px;
line-height: 1px;}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
display:inline-block;
margin: 9px 70px;}
.g-plusone { float: left;}
.twitter {
background: #EEF9FD;
padding: 10px;
border: 1px solid #C7DBE2;
border-top: 0;}
#mashable {
background: #EBEBEB;
border: 1px solid #CCC;
border-top: 1px solid white;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration:none;}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2; background: #d3e0ed;
border-image: initial;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background: #ff9b00;
background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
#other-social-bar {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 0px;
font-family: "Arial","Helvetica",sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:30px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}

#other-social-bar .other-follow {
float: left;
color:#1E598E;
overflow: hidden;
height:20px;
padding:7px;
width: 270px;}

#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;}
#other-social-bar .other-follow ul li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow ul li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}



#other-social-bar .other-follow li.my-pin {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipW19JmEJH3F3TQLIq0kdfs2d2xvrn81muH-iN8-hiD_eKSxwvagBacs21NmEOmdMmbNAGFJUUARsMIATOzgPT-8uQLyjV7Efgippp7Xoe9L79_tT3I9S-MRNCsPGPRL8PtpMwEPicWtIy/s1600/pinterest-16.png')

no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}




#other-social-bar .other-follow li.my-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGn3ardFY6uZUx6lvgNeZDW_GsXgNUS9_K0MFUKbX58ggPKpYP1kG956cqXcznmYUxWjLhY9Pvbpj84WZmb0ZVGfM_QxaNySI3P0UEhMS7CcUSOHLxxfqRcT3HfbzORCrFtssskMP02WE/s400/rss-16×16.png') no-

repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}



#other-social-bar .other-follow li.my-pin a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-

follow li.my-gplus a{
text-decoration:none;
}


#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-

social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}

#other-social-bar .other-follow li.my-linkedin {
background: url('http://madbaydesigns.com/shop/images/social_bookmarks/twitter.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}

#other-social-bar .other-follow li.my-gplus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL8P7Tgpjfm6PH_zKIkfFcSDz5g_Rk9PhAC9kxTWowR0oujiA_NWvnty63ayEhi7ufy3JcDqyTXwgGe9eN7NFuYWVPaBy3h7slNKTSt4zP5YWjJYVnQB3BrFWM63bDtQ4i2Qc8rhRySbw/s400/gplus-16x16.png) no-

repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}


</style>


<!--[if IE]>

<style>
#email-news-subscribe .email-box input.subscribe{
background: #FFCA00;
}
</style>

<![endif]-->


<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="ABT-mashable-bar" > <!-- Begin Widget --> <div

class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?

href=http://facebook.com/hikmah.ash&amp;send=false&amp;layout=standard&amp;

width=200px&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;
font&amp;height=100px&amp;appId=109246381361135422352" scrolling="no" frameborder="0" style="border:none;

overflow:hidden; "></iframe> </div> <div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div

class="g-plusone" data-size="medium"></div> <script type="text/javascript"

src="https://apis.google.com/js/plusone.js"></script> </div> <div class="twitter"> <!-- Twitter --> <iframe title=""

style="width: 300px; height: 20px;" class="twitter-follow-button"

src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;

align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;

lang=en&amp;link_color=&amp;screen_name=HikmahAsh&amp;show_count=&amp;

show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>


<div id="other-social-bar"> <!-- Other Social Bar -->




<ul class="other-follow">

<li class="my-rss"> <a rel="nofollow" title="Google Plus" rel="author" href="http://plus.google.com/109246381361135422352"

target="_blank">RSS</a> </li>

<li class="my-pin"> <a rel="nofollow" title="Pinterest" href="http://pinterest/sevenhsa" target="_blank">Pinterest</a> </li>

<li class="my-linkedin"> <a rel="nofollow" title="Twitter" rel="author" href="http://twitter.com/HikmahAsh"

target="_blank">Twitter</a>

</li> <li class="my-gplus"> <a rel="nofollow" title="G+" rel="author" href="http://plus.google.com/109246381361135422352"

target="_blank">G+</a> </li>


</ul>

</div>


<div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box">

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open

('http://feedburner.google.com/fb/a/mailverify?uri=SevenHsa', 'popupwindow', 'scrollbars=yes,width=550,height=520');return

true">
<input class="email" type="text" style="width: 120px; font-size: 12px;" id="email" name="email" value="Enter Your

Email here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)

this.value=this.defaultValue;" />
<input type="hidden" value="SevenHsa" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Subscribe" />
</form>

</div> </div>

<div id="mashable" style="background: #e3e3e3;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px

3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span

class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.allbloggingtips.com"

target="_blank" >Get This »</a></span></div></div>
<!-- End Widget --> </div> <!--end of social widget-->

After download and pasting code kindly Make these important changes:
    1. Replace HikmahAsh with your Facebook , Twitter, Google+ and Pinterest ID
    2. Replace http://feeds.feedburner.com/SevenHsa with your feedburner link.
    3. Replace Google+Profile Link with your Google Plus profile link

5. Hit save and you are all done!

NB  : if occured problem where  you can see facebook like. please replace HTML code  with this below update code :

<iframe style="border: none; overflow: hidden; width: 80px; height: 21px;" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fhikmah.ash&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" frameborder="0" scrolling="no" width="320" height="140"></iframe>


<a style="color: #3b5998; font-family: ubuntu; font-size: 18px; font-weight: bold; line-height: 20px;" href="http://www.facebook.com/hikmah.ash" rel="nofollow" target="_blank"> Like on Facebook </a>


Thanks for  http://allbloggingtips.com that share their tips. 

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...
Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Back To Top