5 in 1 Mashable Multi Search, Facebook,Twitter, Googleplus, Subscribe widget For blogger

5 in 1 Mashable Multi Search, Facebook,Twitter, Googleplus, Subscribe widget For blogger

As it is our main aim to provide our readers cool widgets for their blogs but as I was busy in my exams since start of December. So today I finally show up with a cool multi widget for bloggers.
Mashable sharing widgets are pretty hot these days and no doubt that they are one of the hottest looking and well equipped social box that really boost the subscription rates.
There are couple of Mashable style sharing widgets floating around the web, and i really wanted to come up with cool version.
We have already shared a lot of subscriber and sharing widget but this widget is a multi widget contains Search bar, Twitter follower counter, Facebook likes counter, Google + badge and Subscribe box.
So here are some easy steps to place Mashable multi widget in your blog.
Don't miss :Cool Flying Twitter Bird Gadget For Blogger 

How to Add Facebook Share Button in Blogger posts

How to add Multi widget in Blogger 

1.Go to blogger dashboard > layout > Add a gadget > Html/javascript
2.Paste the code below in Html/javascript box
// Bloggiks Mashable Sharing Widget


#search {


#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;

#search input[type="text"]:focus {
    width: 200px;


    /* Social Widget */
    #bloggiks-mashable-bar {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
    .fb-likebox {
        background: #fff;
        padding: 10px 10px 0 10px;
        border: 1px solid #D8E6EB;
        margin-top: -2px;
    .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;
        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;
    #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;
    #email-news-subscribe .email-box input.email{
        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:1px solid #cc7c00;
        text-shadow:#d08d00 1px 1px 0;
        padding:7px 14px;
        border-image: initial;}
    #email-news-subscribe .email-box input.subscribe:hover{
        background: #ff9b00;
        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
        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%);
        border:1px solid #cc7c00;
        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;
        overflow: hidden;
        border: 1px solid #B6D0DA;
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}
    #other-social-bar .other-follow {
        float: center;
        overflow: hidden;
        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;
        text-shadow: 1px 1px white;}  
    #other-social-bar .other-follow ul li a {
        font-size: 12px;
        font-weight: bold;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li {
        font-size: 12px;
        font-weight: bold;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li a {
        font-size: 12px;
        font-weight: bold;
        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;

    #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{

    #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{

    #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;
    #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;


    <!--[if IE]>

    #email-news-subscribe .email-box input.subscribe{
        background: #FFCA00;



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

<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />

<g:plus href="https://plus.google.com/115845002736229122234" rel="publisher" width="300" height="69" theme="light"></g:plus>

<div class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/bloggiks&amp;send=false&amp;layout=standard&amp; width='50'px&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="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;



    show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </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=bloggiks', '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="bloggiks" name="uri" />
            <input type="hidden" name="loc" value="en_US" />
            <input class="subscribe" name="commit" type="submit" value="Subscribe" />  

    </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/bloggiks" target="_blank">RSS Feed</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="https://plus.google.com/107489234195718225165/posts" 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;"> </div></div>

    <!-- End Widget --> </div> <!--end of social widget-->
2. Change the text with red and yellow in the above code with your twitter, Facebook, Google plus profile and Rss feed's link.

From editors desk

Hope you will find this widget helpful.If you got any errors or have any problem in placing the widget then let us know and also share your views with us.
Stay tunned to Bloggiks because on new year we are planing to release some cool and unique widgets.Subscribe to get free updates directly in your inbox.

Get free daily email updates!

Follow us!

About Author:

Waleed is a certified SEO Consultant, Pro Blogger and an addicted Web Developer


Follow him @ Bloggiks |Mobi2Android | Facebook | Google Plus

1 comment:


About Me

My Photo

A Pro Blogger
Waleed khan is a young Blogger and Web Security Consultant.He is a SEO Consultant & Web Developer.


Recent Post

Recent Comments

Powered by:

Bloggiks © 2012. All Rights Reserved | Contact | About | Discliamer