Welcome To "Softway RKO" !

What You Can Get in Softway RKO?

We provide the tutorials, guides, articles, tricks and tips about Blogger, Blogging, SEO Tips, Basic Tips For New Bloggers, Making Money Online, Widgets, Templates and many more resources. All this is just for free! You can Sign Up to get updated for Latest Posts.

Thursday, May 29, 2014

Filled Under:
,

Mashable Social Subscription Widget for Blogger

Posted By: on 6:16 PM

HTML tutorial

Click Below Ad for Leaning Blogging Tricks.

Next Blogger Tricks


In my previous post you're understand in  Add All in one Social Subscription Widget in Blogger This Mashable same as Previous widget so i no need to explain it Therefore

These 5 Widgets looking to install very hard but no these all 5 widgets install at once
In my older Post you're understand that Add Facebook Sliding Like box for Blogger/Blogspot  but this is old type widget old version. This widget also helps your to increase facebook like, make more twitter follower, more Google+ followers, more followers on pinterest and Email Subscriber in every day.
So, Put this widget in your blog/website from read this instructions. and this widget made by www.softwayrko.blogspot.com so, all credits goes to them.
What's New:-

  • Google+ user Id + Google Plus Page ID bar
  • RSS Feed Bar
  • Pin it Button
  • Facebook fans with thumbnail means Profile pictures
This Same as Previous widget but in this widget's color better than previous and its contain social button greater than Previous. To Add This Mashable style widget in your blog follow this instruction .
Mashable Social Subscription Widget for Blogger:-
  • Go To Blogger Dashboard>>Layout>>Add Gadget
  • Choose HTML/Java Script Gadget
  • Paste the following code in HTML/Java Script Gadget
<div class="widget HTML" id="HTML3">
<div class="widget-content">
<style>
    /* Social Widget */
    #HB-mashable-bar {
        border: 0;
        margin: 0 auto;
        width:300px;
        border: 1px solid #DDD;
    }
    .fb-likebox {
        background: #FFEFFF;
        padding: 10px 13px 0 -5px;
        border-right: 1px solid #D8E6EB;
        border-left: 1px solid #D8E6EB;
        border-bottom: 1px solid #D8E6EB;
        margin:0px;
        height:185px;
    }
    .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: 14px;
        position: absolute;
        display:inline-block;
        margin: 9px 70px;
        font-family: calibri;
        width: 280px;
    }
    .pinterest1 {
        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;
    }
    .pinterest1 span {
        color: #000;
        font-size: 14px;
        position: absolute;
        display:inline-block;
        margin: 9px 40px;
        font-family: calibri;
        width: 280px;
    }
    .g-plusone {
        float: left;
    }
    .gplus {
        background: #fff;
        padding: 0px;
        border: 0px solid #C7DBE2;
        margin-bottom:-13px;
    }
    .twitter {
        background: #EEF9FD;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;
    }
    .pterest {
        background: #F5FCFE;
        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:36px;
    }
    #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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6n0supppCBOQUbWf0g-3eboxxIgTodvJ7c7u5H_LvFoGoUtMrXIO-yYSbZrCAD2rmQZlEk36dxy5uNUu_Qoawv1FzY-7XLwXNEZS2s5lO0kVvWhljf9Rk643yvqMboSNiVEhjXCP-TP8/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-twitter 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-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover {
        text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJsrVDYrgIjlc3DWOzIdZEDC0Z7h_MECxBfxANNFICZ7sKltczCnZa_hzIg7FitxaeiCFhlnWbnLPWRN-L_TXkoMKD-FXBnf_-nVDZsrjbVzeW3M5ujCywOaXRS73UqNuaO-FYKkUyIok/s400/twitter%2527.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/AVvXsEiNS1Paruo1foTk_CrLOmuJV58L6DiUEdPEfUw8wFWHPedFZt0EIU3209nQJmLUleVLkoLtrGvY7wwBqPzUXwXgguoR-0Egyl9K-kLA8vfPrtDheRiViWTlhUHY1ph44kyjqmSRdPgijaE/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>
    <div id="HB-mashable-bar">
        <!--Begin Widget -->
        <div class="gplus">
            <link href="https://plus.google.com/111113545413563194890" rel="publisher">
            <script type="text/javascript">
                window.___gcfg = {
                    lang: 'en'
                };
                undefinedfunctionundefined) {
                    var po = document.createElementundefined "script");
                po.type = "text/javascript";
                po.async = true;
                po.src = "https://apis.google.com/js/plusone.js";
                var s = document.getElementsByTagNameundefined "script")[0];
                s.parentNode.insertBeforeundefinedpo, s);
                }) undefined);
            </script>
            <script type="text/javascript">
                var _gaq = _gaq || [];
                _gaq.pushundefined['_setAccount', 'UA-29131740-1']);
                _gaq.pushundefined['_trackPageview']);
                undefinedfunctionundefined) {
                    var ga = document.createElementundefined 'script');
                ga.type = 'text/javascript';
                ga.async = true;
                ga.src = undefined 'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagNameundefined 'script')[0];
                s.parentNode.insertBeforeundefinedga, s);
                }) undefined);
            </script>
            <!--Place this tag where you want the badge to render -->
            <div style="text-indent: 0px; margin: 0px; padding: 0px; background-color: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 300px; height: 106px; background-position: initial initial; background-repeat: initial initial;" id="___plus_0"><iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 300px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 106px;" tabindex="0" vspace="0" width="100%" id="I2_1401366956532" name="I2_1401366956532" src="https://apis.google.com/u/0/_/widget/render/badge?usegapi=1&amp;width=300&amp;height=131&amp;margin=0px&amp;theme=light&amp;hl=en-US&amp;origin=http%3A%2F%2Fwww.SoftwayRKO.com&amp;url=https%3A%2F%2Fplus.google.com%2Fu%2F0%2F111113545413563194890%2F&amp;gsrc=3p&amp;ic=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.Xh27AGpQ8ys.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Fz%3Dzcms%2Frs%3DAItRSTOjHu85ttPOX7Dcbu5iIjt894HaVw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&amp;id=I2_1401366956532&amp;parent=http%3A%2F%2Fwww.SoftwayRKO.com&amp;pfname=&amp;rpctoken=10345777" data-gapiattached="true" title="+Badge"></iframe></div>
        </div>
        <div class="fb-likebox">
            <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsoftwayrko&amp;width=292&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23FFEFFF&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:180px;" allowtransparency="true"></iframe>
        </div>
        <div class="googleplus">
            <!--Google -->
            <span>Recommend us on Google!</span>
            <div style="text-indent: 0px; margin: 0px; padding: 0px; background-color: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px; background-position: initial initial; background-repeat: initial initial;" id="___plusone_1"><iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" width="100%" id="I1_1401366956523" name="I1_1401366956523" src="https://apis.google.com/u/0/_/+1/fastbutton?usegapi=1&amp;size=medium&amp;hl=en-US&amp;origin=http%3A%2F%2Fwww.SoftwayRKO.com&amp;url=http%3A%2F%2Fwww.SoftwayRKO.com%2F2012%2F05%2Fupdate-mashable-style-widget-pinterest.html&amp;gsrc=3p&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.Xh27AGpQ8ys.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Fz%3Dzcms%2Frs%3DAItRSTOjHu85ttPOX7Dcbu5iIjt894HaVw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&amp;id=I1_1401366956523&amp;parent=http%3A%2F%2Fwww.SoftwayRKO.com&amp;pfname=&amp;rpctoken=31141121" data-gapiattached="true" title="+1"></iframe></div>
            <script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
        </div>
        <div class="pinterest1">
            <a href="javascript:void(run_pinmarklet1())"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWugWdg1fTSk2yl05BUOzmyrpJdHHnLqGjaR9ebf_eeJiIzSkcWaaXiKnM0BDy1fJpvhxZmmo7Gq8sdbiIyDRiPeB-7SrbqH2fwtNQ5Dyq-t467H2-MY0floef0_nJYwGOt8aMnjz6NI_V/s1600/pinmask2.png" style="margin:0;padding:0;border:none;"></a>
            <script type="text/javascript">
                function run_pinmarklet1() {
                    var e = document.createElement('script');
                    e.setAttribute('type', 'text/javascript');
                    e.setAttribute('charset', 'UTF-8');
                    e.setAttribute('src', 'http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random() * 99999999);
                    document.body.appendChild(e);
                }
            </script>
            <span>Pin It On Pinterest</span>
        </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=SoftwayRKO&amp;show_count=&amp;show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe>
        </div>
        <div class="pterest">
            <a href="http://pinterest.com/prajjwalzone/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest"></a>
        </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.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=blogspot/NedJM', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                    <input class="email" type="text" style="width: 150px;font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
                    <input type="hidden" value="hblogger" name="uri">
                    <input type="hidden" name="loc" 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 rel="nofollow" title="RSS" href="http://feeds.feedburner.com/hblogger" target="_blank">RSS Feed</a>
                </li>
                <li class="my-twitter">
                    <a rel="nofollow" title="twitter" href="http://twitter.com/SoftwayRKO" target="_blank">Twitter</a>
                </li>
                <li class="my-gplus">
                    <a rel="nofollow" title="Google Plus" href="https://plus.google.com/u/0/106527290580119996124" target="_blank">Google Plus</a>
                </li>
            </ul>
            <!--Don't remove credits otherwise your widget will not work -->
        </div>
        <div id="mashable" style="background: #EBEBEB;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://softwayrko.blogspot.com/2014/05/mashable-social-subscription-widget-for.html" target="_blank"> Get This Widget �</a>
            </span>
        </div>
    </div>
    <!--Don't remove credits otherwise your widget will not work -->
    <!--End Widget -->
    <!--end of social widget-->
</div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=8724377745572374082&amp;widgetType=HTML&amp;widgetId=HTML3&amp;action=editWidget&amp;sectionId=sidebarright" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML3&quot;));" target="configHTML3" title="Edit">
<img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18">
</a>
</span>
</span>
<div class="clear"></div>
</div>
Customization:-
  • Replace 111113545413563194890 with your Google+ Page ID
  • Replace softwayrko with your facebook page username
  • Replace SoftwayRKO with your twitter username
  • Replace http://feedburner.google.com/fb/a/mailverify?uri=blogspot/NedJM with your feedburner URL
  • Replace 106527290580119996124 with your Google+ ID
  • Finish
  • Congratulation you are successful in this turorial
Final Words
I hope this gadget put in your blog Thanks for You can put this widget on your blogger if you're getting errors or face some problem please write your problems in comment box and share this post with your friends on social networking sites
Thanks


Next
Newer Post
Previous
Older Post

Like the Post? Do share with your Friends.

0 blogger-facebook:

Comment here

Subscribe to: Post Comments (Atom)
 
  • Home
  • About Us
  • Contact Us
  • Sitemap
  • Privacy Policy

    • Back To Top

    Copyright © 2014 Softway RKO. All Rights Reserved | Designed by :
    Powered By : Blogger