Add All In One Social Media Widget By Mashable On Blogger


    Happy Midweek friend. Welcome today on The eTech Journal. Our Article Today will be On how to add all in one social media blogger widget.

    This Widget Lets you put all your social media profile on one widget. It is powered by Mashable.

    Adding This Widget wont take you more than 10 Minutes. Its soo easy to add. Just follow the steps below.

    See the Photo Below For Demo



    Step 1.
    Goto your blogger Dashboard

    Step 2.
    Locate the Blog You Want To Add this widget to > Locate Layout > Add Gadget > HTML/JAVASCRIPT, Then Add The Below Code to it...

    <style>
    /* Social Widget */
    #Etech-mashable-bar {
    border: 0;
    margin-bottom: 10px;
    margin: 0 auto;
    width:300px;
    }
    .fb-likebox {
    background: #fff;
    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;
    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:37px;
    }
    #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:5px;
    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-rss {
    background: url('http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/s400/rss-16x16.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 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://4.bp.blogspot.com/-ht4UMG88lvM/TwHZFFgc-1I/AAAAAAAAFvs/BBmINSJhUsk/s400/linkedin-16x16.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(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/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="Etech-mashable-bar">
    <!-- Begin Widget -->
    <div class="fb-likebox">
    <!-- Facebook --> <iframe frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=http://facebook.com/etechjournal&send=false&layout=standard& width=200px&show_faces=true&action=like&colorscheme=light&

    font&height=100px&appId=234513819928295" style="border: none; overflow: hidden;"></iframe> </div>
    <div class="googleplus">
    <!-- Google --> Recommend us
    <div class="g-plusone" data-size="medium">
    </div>
    <script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script> </div>
    <div class="twitter">
    <!-- Twitter --> <iframe class="twitter-follow-button" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&

    align=&button=blue&id=twitter_tweet_button_0&

    lang=en&link_color=&screen_name=don4mula&show_count=&

    show_screen_name=&text_color=" style="height: 20px; width: 300px;" title=""></iframe> </div>
    <div id="email-news-subscribe">
    <!-- Email Subscribe -->
    <div class="email-box" style="background: #EDF4FF;">

    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=etecvilla', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input class="email" id="email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="font-size: 12px; width: 150px;" type="text" value="Enter Your Email here.." />
    <input name="uri" type="hidden" value="etecvilla" />
    <input name="loc" type="hidden" value="en_US" />
    <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form>

    </div>
    </div>
    <div id="other-social-bar">
    <!-- Other Social Bar -->
    <ul class="other-follow">
    <li class="my-rss"> <a href="http://feeds.feedburner.com/etecvilla" rel="nofollow" target="_blank" title="RSS">RSS Feed</a> </li>
    <li class="my-linkedin"> <a href="#" rel="author" target="_blank" title="linkedin">linkedin</a> </li>
    <li class="my-gplus"> <a href="https://plus.google.com/u/0/107825977061205403033" rel="author" target="_blank" title="Google Plus">Google Plus</a> </li>
    </ul>
    </div>
    <div arial="" helvetica="" id="mashable" sans-serif="" style="background: #EBEBEB; border-image: initial; border-top: 1px solid white; border: 1px solid #CCC; font-size: 10px; padding: 1px 8px 1px 3px; text-align: right;">
    <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.etechvilla.com/2013/08/add-all-in-one-social-media-widget-by.html">Social Network Widget</a></span></div>
    </div>

    <!-- End Widget --> </div>
    <!--end of Etech social widget-->

    After Pasting The above code in the Gadget Box, Edit The Texts in Black Background To Your own details. Save It. And View Your Blog.




    #Conclusion: Over To You Boss!!! What do you think About this Post?? Do you have further clearifications? Feedbacks? Suggestions? Or Inquiry? Why Not Use The comment Box To Communicate With Us? We will be Happy If you Do.