Pages

Wednesday, April 3, 2013

How to add social subscription like box in blogger

When you are providing useful information in your blog, then many times some readers will need to get the latest updates from your blog. For that purpose, you need an social Subscription Form in your blog, so that the interested visitors can easily get the latest updates.

To add social subscription like box to your blogger blog (blogspot) is very easy.This box contains twitter follow me,facebook like button for your facebook page,google+ button and email subscription box.Follow  these steps to add it in your blog.

 
Just follow the next steps:

1. Log in to Blogger, then go to Layout > click on "Add a Gadget" link:


2. From the pop-up window, scroll down and click on the "HTML/JavaScript" gadget:


 3. Paste the following code inside the empty box:

<style type="text/css">
/*<!CDATA[*/

#DBT-mashable{width:265px;margin:auto;padding:0;}

.DBT-googleplus {height: 57px;}

.DBT-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}

.DBT-gplusone {background-color: #8181F7;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}

.DBT-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}

.DBT-twitter {background-color: #8181F7;border: 1px solid #c7dbe2;border-top: 0;}

.DBT-twitter a.twitter-follow-button {display: block;}

.DBT-twitter iframe {margin: 9px 11px;}

.DBT-emailbox {background-color: #8181F7;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}

.DBT-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}

.DBT-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}

.DBT-emailbox input.emailu:focus {color: #333;}

.DBT-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}

.DBT-emailbox input.submitu:hover {text-decoration: none;}

.DBTYellow{border:1px solid #DBA329;text-shadow:1px 1px 0 #DBA329;background: #dddd2e;background: -moz-linear-gradient(top, #dddd2e 0%, #ffb515 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddd2e), color-stop(100%,#ffb515));background: -webkit-linear-gradient(top, #dddd2e 0%,#ffb515 100%);background: -o-linear-gradient(top, #dddd2e 0%,#ffb515 100%);background: -ms-linear-gradient(top, #dddd2e 0%,#ffb515 100%);background: linear-gradient(top, #dddd2e 0%,#ffb515 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddd2e', endColorstr='#ffb515',GradientType=0 );}

.DBTYellow:hover{background: #eaea3c;background: -moz-linear-gradient(top, #eaea3c 0%, #ffb515 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaea3c), color-stop(100%,#ffb515));background: -webkit-linear-gradient(top, #eaea3c 0%,#ffb515 100%);background: -o-linear-gradient(top, #eaea3c 0%,#ffb515 100%);background: -ms-linear-gradient(top, #eaea3c 0%,#ffb515 100%);background: linear-gradient(top, #eaea3c 0%,#ffb515 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaea3c', endColorstr='#ffb515',GradientType=0 );}.DBT-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}

.DBT-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}

/*]]>*/

</style>

    <div id="DBT-mashable">
    <div class="DBT-googleplus">
        <script type="text/javascript">
        /*<![CDATA[*/
        window.___gcfg = {lang: 'en'};
        (function(){
            var po = document.createElement("script");
            po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(po, s);
        })();
        /*]]>*/
        </script>
        <div class="g-plus" data-href="https://plus.google.com/111698402138554597511" data-width="265" data-height="69" data-theme="light"></div>
    </div>
    <div class="DBT-facebook">
        <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpinkusay&amp;send=false&amp;layout=standard&amp;width=245&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:245px; height:66px;" allowtransparency="true"></iframe>
    </div>
    <div class="DBT-gplusone">
        <script type="text/javascript">/*<![CDATA[*/
          (function() {
        var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
        po.src = "https://apis.google.com/js/plusone.js";
        var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
          })();/*]]>*/
        </script>
        <div class="g-plusone" data-size="medium" data-href="http://pinkusays.blogspot.in/"></div>
        <span>Recommend on Google</span>
    </div>
    <div class="DBT-twitter">
        <a href="https://twitter.com/pinkusay" class="twitter-follow-button" data-show-count="true">Follow @techinvent</a>
        <script type="text/javascript">/*<![CDATA[*/!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>
    </div>
    <div class="DBT-emailbox">
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=pinkusays', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
        <table width="100%">
            <tr>
            <td>
                <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
            </td>
            <td width="64px">
                <input class="submitu DBTYellow" type="submit" value="Subscribe"/>
            </td>
            </tr>
        </table>
        <input name="uri" type="hidden" value="pinkusays"/>
        <input name="loc" type="hidden" value="en_US"/>
        </form>
    </div>
    <div class="DBT-moresubs">
        <a href="http://techinvent.blogspot.in/2012/06/how-to-add-mashable-like-social.html/">Get this Gadget</a>
    </div>
    </div> 




Settings :

Replace highlighted text color with your ID

e.g 
 
  • Replace pinkusays with your feed title. It appears at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=pinkusays
  • https://twitter.com/pinkusays  with your twitter Id

4. Now Save your widget and check your blog. Enjoy!


Don't Miss These Killer Articles on Facebook:

3.How to Add Scrolling Recent Posts Widget For Blogger?
 

 
How to add social subscription like box in blogger
9out of 10 based on 10 ratings. 9 user reviews.
Posted by: Mayor Botaks Updated at: 11:30 AM

5 comments:

  1. Great post!!

    Earn while you enjoy time with your Family & Loved ones!
    Join us today visit http://www.unemployedpinoys.com

    Unemployed is Brave and a choice to be a Freeman.
    To get a form visit http://www.nheipersonalblog.tk/2014/03/online-work-data-encoder-job.html
    HAPPY WORKING AT HOME :)

    ReplyDelete
  2. http://www.neobux.com/?rh=6E61766565646B616D616C6961

    ReplyDelete
  3. www.clixsense.com/?4196569 
    Paying Since 2007 
    earn per click 0.02$ 
    per ref click 0.01$ 
    www.clixsense.com/?4196569 
    only make 1 ref and surf 30 extra ads daily mean earn 0.04$ 
    make 20$ and daily earn 1$+ 
    upgrade your accout from 17$ and daily earn 50$ by doing Tasks Surways Offers and CLixgrid 
    Daily 60 Chances of winning up to $10 for premium membership in clixgrid 
    Daily 30 Chances of winning up to $05 for Standard membership in clixgrid 
    www.clixsense.com/?4196569 

    ReplyDelete
  4. Great Post.
    Join the finest minds in consumer research. Share your unique opinion and get paid for doing online surveys for money. You can share your opinion and earn per survey by making Money Online Now!

    Online Survey Website
    Free Survey Website
    Survey Websites in Canada
    Survey Websites in India
    Earn Money from Home
    Free Online Surveys

    ReplyDelete