Powered by Blogger.
Showing posts with label widget for blogger.. Show all posts
Showing posts with label widget for blogger.. Show all posts

Saturday, 22 June 2013

Floating Social Widget For Blogger

Published on: 13:27 by Unknown - No comments
Why Social widget is necessary now are days? the answer is quite simple, Social widget is necessary to get more viewers. Today i will share quite simple steps to setup a social widget for your blogger, Given below is an example:

This is how it looks :)

STEP 1:

Go to blogger -> layout then add a gadget, click on HTML/JavaScript:

after that place the following code

<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:03px;top:300px;"><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a><a class="addthis_button_tweet" tw:count="vertical"></a><a class="addthis_button_google_plusone" g:plusone:size="tall"></a><a class="addthis_counter"></a></div><script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-516ff8e04b04378b"></script><!-- AddThis Button END -->
   <!-- AddThis Button BEGIN -->

STEP 2: 

After that save it ;)

 if you have any confusion, drop a comment will respond you soon.

Perfect Social Widget For Blogger

Published on: 12:51 by Unknown - No comments
Do running a blog and want to socialize it? Then this post will definitely work for you.
Well this widget will help you to put your blog's FACEBOOK,TWITTER, GOOGLE + and FEED BURNER pages.

STEP 1:

Go to your blogger->layout, then add a gadget as shown below,

STEP 2:

After that a new window will open, now choose HTML/JavaScript,

click on the + button and add the following code,

<style>
    /* Social Widget */
    #UT-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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqlNveDS2WvbTfFpF3jC2al1_QZisOvtAw4JNHLaoo-Dg0qIxJ-fgXTrj6lrLv_Nbx3XFS27ncfmf8tinbRxpsu0j2itAGPL0-3I6Mo1M68BYOVtC7QOT3d1vbQGS__xelqmiR5M6jyVc/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOPIEnwp9CGlBq8ZcVy-WWBzMPY8GG0U9Z4FtZyRfx776gHFNzr8vagAgNpzViS60pgKjy1ENIWOAXjIL4Hi2oeNxWsNyASrCd98AEdLThaYrSr6Kum2Zxl2hAB5ULLX7-zKW2ePYe4ac/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha8FQcS3A8WGQWwBWX2DWiqqSYhRlHWJkHsTyGU-IPWmJFtAEKFogwCPL6XqRUquqFZq2hDt2UUKB_KzhNuzFL5ypFg4yIXiiWX_I_KbIbxdCv_2_GBxC_7opp7xxf_GkuKPQMCJw8tM4/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="UT-mashable-bar" > <!-- Begin Widget --> <div class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/puttech12&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=234513819928295" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </div> <div class="googleplus"> <!-- Google --> <span>Recommend us</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=puttech&amp;show_count=&amp;

    show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></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" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=puttech', '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=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />      
            <input type="hidden" value="puttech" 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/AllTheTechReviewsNews" target="_blank">RSS Feed</a> </li> <li class="my-linkedin"> <a rel="nofollow" title="linkedin" rel="author" href="#" target="_blank">linkedin</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="https://plus.google.com/u/0/102111280721002623355" target="_blank">Google Plus</a> </li> </ul> </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://puttech.blogspot.com">Social Network Widget</a></span></div></div>

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

STEP 4: 

Now click on save button, that it :)


Feel free to ask any thing about it in the comment box, we loved to help you.

Subscribe to: Posts (Atom)