Show Mobile Navigation
CSS
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Add a Biggy Simple and Professional Subscription Widget

Hemant Verma - 8:59 PM

What should I say about any widget be'coz all widgets are very awesome and very helpful for any blogger and there are thousands of widgets are available on internet where you can get the many kinds of professional widgets for blogging and many kinds of platforms like Wordpress, Blogger, Tumbler etc. but we deals on the blogger platform be'coz it's very easy and compatible for all kinds of HTML, JavaScript and CSS languages. We have a new a fresh Subscription widget for blogger with mouse hover effect.






Add Biggy Simple and Subscription Widget

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Layout
  • Add a HTML/JavaScript Gadget
  • Paste below code in it.




<style>
.rosyy{
color:#3e3e3e;
font-family: Impact, sans-serif;
font-size: 30px;
font-weight: normal;
line-height: 30px;
padding: 10px 0 0 10px;
text-shadow:0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}

.WG-91481wid {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIYiLHOJaDTVY3xjrq5PIKtiBuVN8_vOeQLtGxRvQduzw0eLVqLJFUjbB5W6W1ZcfraTGtjablz145iXX0Id2N9y7sRtxuBoUUD133w_qGbtgNHRko6MdrL1L0pc2XbWiOD6cDvFa9WlCO/s400/body.png);
margin: 20px;
border-radius: 10px 30px 10px 30px;
width: 728px;
height: 120px;
color: #fff;
font-size: 14px;
padding: 15px;
transition:border-radius .5s;
-webkit-transition:border-radius .5s;
-moz-transition:border-radius .5s;
}
.WG-91481wid:hover{
border-radius:30px 10px 30px 10px;
}
.WG-91481wid p {
width: 350px;
line-height: 21px;
}
.subsbox {
float: right;
}
#subbox {
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTa21R9gzR2fQPWCBHjCIs3uQ5AKyWm9Zh7L2_TxIhfK1Y0SrVO_5hvKHOsGwk2SPT91GukxGuk3bqt4r8rPJ2GnRvzUgPKERqlzaMefhe2NxzUCBFXiSMkdWrnDbqnoKKctFKSCN92GIU/s1600/subscribe-email.png) no-repeat right;
width: 200px;
padding: 10px;
color: #888;
border: 1px soiid #222222;
}
#subbutton {
background: #2aa4cf;
color: #fff;
border-radius: 5px 15px 5px 15px;
height: 40px;
border: 1px solid #292929;
text-transform: uppercase;
font-weight: bold;
transition:border-radius .5s;
-webkit-transition:border-radius .5s;
-moz-transition:border-radius .5s;
}
#subbutton:hover {
border-radius:15px 5px 15px 5px;
}

</style>  

<div class="WG-91481wid">
<div class="rosyy"><center>Get Daily Fresh Resepi Direct in Your Mail</center></div><br/>
<div class="subsbox">
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=WIdgetGenerators', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input id="subbox" name="email" onblur="if ( this.value == '' ) { this.value = 'Enter your email address...'; }" onfocus="if ( this.value == 'Enter your email address...') { this.value = ''; }" value="Enter your email address..." type="text">
<input name="uri" value="WidgetGenerators" type="hidden">
<input name="loc" value="en_US" type="hidden">
<input id="subbutton" value="Subscribe!" type="submit">
</form>
</div>
<font color="#434343"><p>We Will Send You Our Best Direct in Your Mail and You Get Instant Access on Our Every Article! Without Any Cost.</p></font>
</div>


  • Save Your Widget.


If Any Problem Comes, Ask in Comments



Customize Posting Background in HD

Hemant Verma - 8:37 PM

In the blogging backgrounds are usually having the white color but we can easily edit it and also can customize it with using simple CSS, In this tutorial you will get to know that how to customize the blogger's posting background easily with only one simple CSS language and this will be amazing and very funny be'coz it looks very awesome and also this is a HD background, so your visitors will love it when they see it. Also they will ask to you that how did you customize it and how this is shows in HD form, as you will see in the live demo now.




  • Login to Blogger > Dashborad
  • Click on Posting Menu and select Edit HTML
  • Paste below code in the HTML area.

 <style>

/* CSS Posting Background by www.widgetgenerators.com */

    table#vsTable {

    position: relative;

    z-index: 2;

    border: none;

    border-bottom: 2px solid #000;

    border-collapse: collapse;

    margin: 0 auto;

    border-right: 1px solid #505050;

    width: 100%;

    font-size: 12px;

    }

    table#vsTable td {

    padding: 10px 0;

    border-bottom: 1px solid #505050;

    border-right: 1px solid #505050;

    vertical-align: middle;

    text-align: center;

    background: #393939;

    color: #e7e7e7;

    }

    table#vsTable tr.second td {

    background: #333333;

    }

    table#vsTable tr td div {

    text-align: center;

    }

    table#vsTable tr td div.yes, table#vsTable tr td div.no, table#vsTable tr td div.partial {

    height: 16px;

    }

    table#vsTable tr td.cat div, table#vsTable tr td.title div {

    height: auto;

    }

    table#vsTable td.cat div {

    text-align: left;

    padding: 0 10px;

    }

    table#vsTable td.title {

    background: #393939;

    font-size: 16px;

    color: #fff;

    text-shadow: 1px 1px 0 #000;

    border: 1px solid #424242;

    border-bottom: 2px solid #202020;

    vertical-align: middle;

    text-align: center;

    }

    table#vsTable .cat, table#vsTable tr.second .cat {

    text-align: left;

    background: #333333;

    color: #fff;

    border-left: 1px solid #481b5b;

    }

    table#vsTable td.title.cat {

    background: none !important;

    border: none;

    border-bottom: 1px solid #481b5b;

    cursor: default !important;

    box-shadow: none;

    }

    table#vsTable td.title.cat div {

    display: none;

    }

    table#vsTable tr td.cat:hover {

    background: #404040;

    }

    table#vsTable tr td.title:hover {

    background: #404040;

    }

    table#vsTable div.yes {

    background: url(images/yes.png) no-repeat center center;

    }

    table#vsTable div.no {

    background: url(images/no.png) no-repeat center center;

    }

    table#vsTable div.partial {

    background: url(images/partial.png) no-repeat center center;

    }

    table#vsTable .title .editable input {

    color: #fff;

    text-shadow: 1px 1px 0 #000;

    }

    table#vsTable .cat .editable input {

    color: #fff;

    text-shadow: 1px 1px 0 #000;

    }

    table#vsTable .text .editable input {

    color: #fff;

    text-shadow: 1px 1px 0 #000;

    }

    table#vsTable .titleImage {

    padding: 0;

    margin: 0;

    border: none; 

    width: 90%;

    float: none;

    height: auto;

    }

    </style>

    <div dir="ltr" style="text-align: left;" trbidi="on">

    <!---CSS Widget by www.widgetgenerators.com ---!>

    <h2>

     </h2>

    <div id="tableWrapper" style="width: 100%;">

    <table id="vsTable"><tbody>

    <tr style="font-family: Verdana,sans-serif;"><td class="text" style="width: 50%;"><div class="">

    <table id="vsTable"><tbody>

    <tr><td class="title" style="width: 50%;"><div class="">

    <span style="font-size: x-large;"><b>Heading</b></span></div>

    </td></tr>


    </tbody></table>

    </div>

    </td></tr>

    <tr style="font-family: Verdana,sans-serif;"><td class="text" style="width: 50%;"><table id="vsTable"><tbody>

    <tr class="second"><td class="text" style="width: 50%;"><div class="">

    <span style="font-size: large;">Write Your Text Here</span>

    </td></tr>

    </tbody></table>

    </td></tr>

    </tbody></table>

    </div>

    </div>


Make Changes....!

  • Heading Replace it with your heading of content.
  • Write Your Text Here Replace it with your text.
  • If you don't want to add heading then delete these codes
    <tr style="font-family: Verdana,sans-serif;"><td class="text" style="width: 50%;"><div class=""><table id="vsTable"><tbody><tr><td class="title" style="width: 50%;"><div class=""><span style="font-size: x-large;"><b>Heading</b></span></div></td></tr>




If Any Problem Comes, Ask in Comments



Add a Metro Style Social Bookmarking Widget

Hemant Verma - 11:04 PM

Presently blogger has many kinds of widgets related with social bookmarking which contents the hover effect and many kinds of pro effects in it but today this widget has a very simple look but professional feel with a awesome bigger hover effect when you touch your mouse pointer at the text of the widget. It includes the Facebook, Twitter, Google Plus and RSS Feed widget and it widget named as Metro Style Widget. This widget is simply made by the short codes of CSS it doesn't include the JavaScript and No other kind of languages, so there will not face any problem in it.





Add Metro Style Social Bookmarking by Widget Generator

  • Login to Blogger > Dashboard 
  • Fill necessary blanks and Click on Generate button. 
  • After Generating the code, Finally Click on Add to Blogger button
  • Your Widget will add automatically.




    How to Hide Contact Form from Sidebar OR From Widgets

    Hemant Verma - 2:17 PM

    As we all know this, recently blogger launched their contact form and in last post you got how to customize blogger contact form but when we want to add this blogger contact form it always add on the home page and it's scripting is different than other widgets therefore we can't hide it permanently from home page and also from others pages, but by adding some CSS codes you can easily able to hide this Contact Form from whole blogger, also from home page and also from others pages.


    Add Hide Contact Form from Sidebar

    • Login to Blogger > Dashborad
    • Click on Drop Down Menu and select Template
    • Backup your Template before making any changes to your blog
    • Press Ctrl + F and search the code shown below.

    ]]></b:skin>


    • Paste below just before it.

    #ContactForm1
    {
    display: none ! important;
    }


    • Finally Save your template.
    • Say Bingo and You are done.
     

      If Any Problem Comes, Ask in Comments




      Add a Professional Roseic Style Blockquote in Blogger

      Hemant Verma - 12:02 PM

      We frequently use block quotes in the blogger and it's a very good feature given by blogger be'coz if we want to make our text different in the blogger post then we can use that blockquote. In the starting period of time when blogger introduced the blockquote feature then it's very simple looking but now in these days we can easily customize it according to us, so our team has a new and very professional looking blockquote style for you all, we named it as Roseic Style Blockquote.





      Add Roseic Style Blockquote

      • Login to Blogger > Dashborad
      • Click on Drop Down Menu and select Template
      • Backup your Template before making any changes to your blog
      • Now Click on Edit HTML > Proceed > Expand Widget Templates
      • Press Ctrl + F and search the code shown below.

       ]]></b:skin>


      • Paste below code before ]]></b:skin>

       .wg-blockq {
      border-left: 6px solid;
      border-radius: 20px 0px 20px 0px;
      box-shadow: 0pt 0pt 14px #ABABAB;
      padding: 8px 9px;
      }

      .rose-block {
      background: none repeat scroll 0 0 #FFFDF1;
      border: 2px solid #DAA926;
      border-radius: 20px 0px 20px 0px;
      padding: 7px 9px;
      }


      • Save your template.



      How to add it in post....?

      • Go to Post > HTML
      • Paste below code in it.

      <div class="wg-blockq"><div class="rose-block">Write Your Codes Here</div></div>


      • That's all with it.
      • Enjoy your new blockquote.



      Make Changes....!

      • Replace Write Your Codes Here it with your own code.



      If Any Problem Comes, Ask in Comments


      Add a Pure CSS Showing Counter Social Widget

      Hemant Verma - 3:44 PM

      Counter Widget is very important in today's blogging world be'coz it gives a very unique kind of look and feel to any blog. This widget is made purely by CSS so there will not come any kind of problem in the installing. Widget is made for three social network FB, Twitter, Google Plus, and this widget doesn't include any kind of JavaScript be'coz it should be compatible and well install.





      Add Counter Widget in Blogger

      • Login to Blogger > Dashborad
      • Click on Drop Down Menu and select Layout
      • Add a HTML/JavaScript Gadget
      • Paste below code in it.

       <style type="text/css">
      .container {
        margin: 0px auto;
        width: 300px;
        text-align: center;
      }

      .btn-sbm {
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0 5px;
        padding-top: 40px;
        width: 75px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        border-radius: 8px;
        -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
      }

      .btn-sbm:active {
        margin-top: 3px;
      }

      .btn-sbm:active .btn-sbm-action {
        padding-bottom: 3px;
        -webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
        box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
      }

      .btn-sbm:active .btn-sbm-action:after {
        bottom: 3px;
      }

      .btn-sbm-count {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        line-height: 40px;
        font-size: 19px;
        letter-spacing: -1px;
        color: #555;
        text-shadow: 0 1px white;
        background: #e6eff5;
        border-width: 1px 1px 0;
        border-style: solid;
        border-color: #c5c5c5 #bbb;
        border-radius: 8px 8px 0 0;
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
        background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
        background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
        -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
        box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
      }

      .btn-sbm-count:before, .btn-sbm-count:after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -6px;
        border: 6px solid transparent;
        border-top-color: #e6eff5;
      }

      .btn-sbm-count:before {
        margin-left: -7px;
        margin-top: 1px;
        border-width: 7px;
        border-top-color: rgba(0, 0, 0, 0.07);
      }

      .btn-sbm-action {
        display: block;
        position: relative;
        line-height: 32px;
        padding: 2px 0 6px;
        font-size: 14px;
        color: white;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
        border: solid rgba(0, 0, 0, 0.18);
        border-width: 0 1px;
        border-radius: 0 0 8px 8px;
      }

      .btn-sbm-action:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 6px;
        left: 0;
        right: 0;
        border-radius: 0 0 6px 6px;
        -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
        box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
      }

      .btn-sbm-tweet {
        background: #83cfe8;
        background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
        background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
        background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
        background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4);
        -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
        box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
      }

      .btn-sbm-tweet:after {
        -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
        box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
      }

      .btn-sbm-tweet + .btn-sbm-count {
        -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
        box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
      }

      .btn-sbm-like {
        background: #6480bd;
        background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
        background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
        background-image: -o-linear-gradient(top, #6480bd, #3c5894);
        background-image: linear-gradient(to bottom, #6480bd, #3c5894);
        -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
      }

      .btn-sbm-plus {
        background: #626262;
        background-image: -webkit-linear-gradient(top, #626262, #404040);
        background-image: -moz-linear-gradient(top, #626262, #404040);
        background-image: -o-linear-gradient(top, #626262, #404040);
        background-image: linear-gradient(to bottom, #626262, #404040);
        -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
      }

      </style>

      <br/>
      <div class="container">

           <a href="https://twitter.com/WidgetGenerator" rel="nofollow" target="_blank"rel="author"  title="Find us on twitter" class="btn-sbm">
            <span class="btn-sbm-action btn-sbm-tweet">Twitter</span>
            <span class="btn-sbm-count">150+</span>
          </a>

          <a href="http://www.facebook.com/WidgetGenerators" rel="nofollow" target="_blank" title="Find us on facebook" class="btn-sbm">
            <span class="btn-sbm-action btn-sbm-like">Facebook</span>
            <span class="btn-sbm-count">650+</span>
          </a>

          <a href="https://plus.google.com/101961392825834817673" class="btn-sbm" target="_blank" rel="author" title="Find us on Google+">
            <span class="btn-sbm-action btn-sbm-plus">Google+</span>
            <span class="btn-sbm-count">140+</span>
          </a><br/>
      </div><a style="float:right; color: #ffffff"href="http://widgetgenerators.blogspot.com/2013/02/add-showing-counter-social-widget.html">Get This</a>

      • Save your Widget and You are Done.


      Make  Changes....!

      • Replace it WidgetGenerator with your Twitter username.
      • Replace it WidgetGenerators with your Facebook username
      • Replace it 101961392825834817673 with your Google Plus id.


      Credit: SmartEarningMethods.blogspot.com




      If Any Problem Comes, Ask in Comments


      Add a 3D Push-Pop Button in Blogger

      Hemant Verma - 12:57 PM

      Buttons and others effects are very important in blogging and specially when our blog related with designing and blogging blog that's why looks and feels are very important in the blog. From lasts post our team provided the buttons for live demo and for other stuffs like icons and other some stuff and so today we have a 3D Push-Pop button we can add in the blogger post and it's very unique kind of widget and it have a 3D look and easily customizable and has a Push - Pop effect when you click on the button.




      Add Push-Pop Button in Blogger

      • Login to Blogger > Dashborad
      • Click on Drop Down Menu and select Template
      • Backup your Template before making any changes to your blog
      • Now Click on Edit HTML > Proceed > Expand Widget Templates
      • Press Ctrl + F and search the code shown below.

      </head>

      • Paste below code before </head>


      <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'></link>

      • Now again find below code

      ]]></b:skin>


      • Paste below code before ]]></b:skin>

      #wg-pushbutn a {
      position: relative;
      color: rgba(255,255,255,1);
      text-decoration: none;
      background-color: rgba(219,87,5,1);
      font-family: 'Yanone Kaffeesatz';
      font-weight: 700;
      font-size: 30px;
      display: block;
      padding: 4px;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
      -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
      -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
      box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
      margin: 10px auto;
      width: 200px;
      text-align: center;
      -webkit-transition: all .1s ease;
      -moz-transition: all .1s ease;
      -ms-transition: all .1s ease;
      -o-transition: all .1s ease;
      transition: all .1s ease;
      }
      #wg-pushbutn a:active {
      -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
      -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
      box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
      position: relative;
      top: 6px;
      }

      • Save Your Template.


      How to Add it in Post....?

      • Go to posting area > HTML
      • Now paste code in it.

      <div id="wg-pushbutn"><a href="#" target="_blank">Live Demo</a></div>



      Make Changes...!

      • Replace # it with your link.
      • Replace Live Demo it with your own text.




        If Any Problem Comes, Ask in Comments


        Add a Simple and Sober Social Subscription Widget

        Hemant Verma - 5:29 PM

        Finishing and hovering effect is very awesome in the CSS and when we create anything by using them then result always comes out very awesomely and very creative. We also do something like this with it and create one of the very awesome and simple and sober social subscription widget with RSS, Twitter and Facebook which can be fit in any kind of size and it is purely created by using CSS without any JavaScript OR jQuery. So it will work very awesomely like in live demo.





        Add Simple Subscription Widget

        • Login to Blogger > Dashborad
        • Click on Drop Down Menu and select Layout
        • Add a HTML/JavaScript Gadget
        • Paste below code in it.

         <style>
        /*  ---------www.widgetgenerators.blogspot.com----------- */
        .social-connect-widget{background:#FFFFFF;border:1px solid #E7E6DE;padding:5px; border-radius:5px; -moz-border-radius:5px;}
        .social-connect-widget:hover{border:1px solid #000000;background:#e5e3e3;
        -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
        -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
        box-shadow: 5px 5px 5px rgba(0,0,0,0.4);}
        .social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
        .social-connect-widget a:hover{text-decoration:none;color:#F77C04}
        .social-connect-widget img{vertical-align:middle;margin-right:5px;height:42px;width:42;}
        </style>
        <br/>
        <div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
        <a href="http://feeds.feedburner.com/WidgetGenerators"><img alt="RSS Feed" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEtIM38-7jSTT-bT4uf1RTZYmolwUuSR_gAWXl1uaVwQaKKMC8G0rc5L7KrF9v-zNk6RtLWWIVVep2k2OPt3Lf-q66mAoIe5DoYhUqrN5kQHDlFaKxgEHTCa5rz1LvQGexQ3eMvKelHuPa/s1600/Rss-icon.png" /></a><a href="http://feeds.feedburner.com/WidgetGenerators">Subscribe  RSS Feeds!</a>
        </div>
         <div class="social-connect-widget" style="margin-bottom:10px;">
        <a href="http://twitter.com/WidgetGenerator"><img alt="Follow Us on Twitter!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPTAvOSoTPM5JJMkuZJRY-6dMsi_eZ5oIu4jJHI-juBkRPmwj6ypayisPtQgnPvukKz6Ywqd02GwBXnqhdI9SnwVCbAw_A0AstdZWcFtT6NvWOnqdQlajqkqEpEdsQtkLSyrtEjXglYtC/s1600/Twitter-icon.png" title="Follow Us on Twitter!" /></a><a href="http://twitter.com/WidgetGenerator">Follow Us on Twitter</a>
        </div>
        <div class="social-connect-widget" style="margin-bottom:10px;">
        <a href="http://facebook.com/WidgetGenerators"><img alt="Be Our Fan!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFbTn9hH0TpIL-_UDR3Po9MFbBTskiNmNLU-p5QEkeRLh2CjQmzQFSYKkvdgQ-rTeh_PhbbBJfz6aLMd6uWATG_N1aWNkdOxJfk-SrebcD4GVNlUxnuGMvrlvXJD7K8n-saKHSz6Q_uQ5j/s1600/facebook-icon.png&#39; title=&#39;Be Our Fan" /></a><a href="http://facebook.com/WidgetGenerators">Follow us on Facebook </a>
        <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.widgetgenerators.blogspot.com/"></a>
        </div>

        • Now Save your Widget.


         Make Changes....!

        • Replace WidgetGenerators it with your RSS user name (2 times)
        • Replace WidgetGenerator it with your Twitter user name (2 times)
        • Replace WidgetGenerators it with your Facebook  user name (2 times)


        If Any Problem Comes, Ask in Comments


        Add a Pure Professional CSS Live Demo Button in Blogger

        Hemant Verma - 10:41 AM

        Buttons and Icons also very important for any blog be'coz they shows the specially of and good look of any blog, if your buttons is very good looking and give a feel of professionalism to any blog and if your buttons are good looking and different to others then it can be good for your blog. That's why our team introducing the new and pure CSS button for blogger. 





        Add Pure and Professional Button

        • Login to Blogger > Dashborad
        • Click on Drop Down Menu and select Template
        • Backup your Template before making any changes to your blog
        • Now Click on Edit HTML > Proceed > Expand Widget Templates
        • Press Ctrl + F and search the code shown below.

        </head>

        • Paste below code before </head>


        <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'></link>

        • Now again find below code

        ]]></b:skin>


        • Paste below code before ]]></b:skin>


        #wg-dbutton {
        border:2px solid black;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        background:#F8F8F8;
        box-shadow:3px 3px 3px #434343;
        width:130px;
        margin-bottom:5px;
        padding:5px;
        }

        #wg-dbutton a {
        color:#434343;
        background:#F8F8F8;
        display:inline-block;
        font-size:32px;
        font-family: 'Yanone Kaffeesatz';
        line-height:20px;
        text-decoration:none;
        -moz-border-radius:5px;
        -khtml-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        padding:8px 14px;
        }

        #wg-dbutton a:hover {
        color:#fff;
        text-shadow:0 1px 0 #000;
        background:#434343;
        text-decoration:none;
        }

        • Save Your Template


          How to Add it in Post....?

          • Go to posting area > HTML
          • Now paste code in it.

          <div id="wg-dbutton"><a href="#" target="_blank"><b>Live Demo</b></a></div>



          Make Changes...!

          • Replace # it with your link.


          If Any Problem Comes, Ask in Comments


          Add a Simple Professional Social Subscribing Widget

          Hemant Verma - 1:33 PM

          Blogging Widgets is most important for blogs and that's why we work on this field to provide the maximum widgets to visitors and subscribing widget is also more important for the growth of blog socially. We personally thinks that widget should be unique in look and feel be'coz visitors always see blog designing first and then they read the content of your blog. So, We are giving this simple but professional social Subscribing Widget for your blog and you can make your blog looking like a pro as we want.





          Add Simple Professional Widget

          • Login to Blogger > Dashborad
          • Click on Drop Down Menu and select Layout
          • Add a HTML/JavaScript Gadget
          • Paste below code in it.


              <style>

                  #wg-roseicsubs {
                      border: 0;
                      margin-bottom: 10px;
                      margin: 0 auto;
                          width:300px;
                  }
              
                  #email-news-subscribe .email-box{
                      padding: 5px 5px;
                      font-family: "Arial","Helvetica",sans-serif;
                     height:38px;}

                  #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,#666 0,#333 100%);
                      background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));
                  
                      font-family: "Arial","Helvetica",sans-serif;
                      border-radius:3px;
                      -moz-border-radius:3px;
                      -webkit-border-radius:3px;
                      border:1px solid #333;
                      color:white;
                    
                      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-image:-moz-linear-gradient(top,#333,#666);
                      background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
                      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
                  

                      -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
                      border-radius:3px;
                      -moz-border-radius:3px;
                      -webkit-border-radius:3px;
                      border:1px solid #333;
                      color:#FFFFFF;
                   }


                  #other-social-bar {
                      padding: 0px;
                      overflow: hidden;
                         height:37px;
                       margin-top:-8px;
                  }

                  #other-social-bar ul {list-style: none outside none; padding-left: 4px;}


                  #other-social-bar .other-follow {
                      float: left;
                      overflow: hidden;
                      padding:5px;
                      width: 270px;}

                  #other-social-bar .other-follow ul {
                      list-style: none outside none;
                      padding-left: 4px;}

                  #other-social-bar .other-follow li {
              
                      display:inline;
                      border:0;
                    }


                  #other-social-bar .other-follow li a {
                      font-size: 12px;
                      color:#666;
                      font-weight: bold; font-family:arial;
                      display:inline;
                      }
                  #other-social-bar .other-follow li.my-rss {
                      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimwlZB82kkzhvUAZXm2GiCMbXkaDKHHc6fpU6lfY8QAR6GgVL8P-aZySPl1B1TY7tOU_MsFo-Y0wWEhFC4uN8bmwadxMtldo8pVMgs29A6Yh0nOt3He2nx2DO6iBsTIB9P7ypWA_OfGjg/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/AVvXsEj0zuNbEd-3GeSyRFKw9CXHDocf_z3q0zkF5WqV70bD7UKoI4G8F7-5W5WsPxMPMf92kZS1mHGM_uI9Mub9yGF2FBSZI-x6DPbztKQLiVe_N6QDXPLaTv-kFV98Av_RkvUJXbcR8FIJxT4/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/AVvXsEg0YtAs22VZbj8cobM4kFVXQumtkiO2Vo8LKnk4bRHIKvG3h1k8FLZxZkEt8F1RZ9AdZCN6mqL_0YM6Z5Oh55cpqGZdiBewO0SXlMtJAK6k31SMsDaorMg5ip_L0Q8c61yguHPL-Az1pms/s400/gplus-16x16.png) no-repeat transparent;
                      line-height: 1;
                      width: 60px;
                      padding: 0px 3px 1px 20px;
                      margin-bottom:0px;}


              .emailicon {
                  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkAALmpFjYLXtf87g0zaI1qx3GR6tGz_izqOLX0SwJK32EhkpwgUM5jXPZwZuohlu7rbv_BnQxOlxxjYGW51uExiIJwBlnZA3VXvj43HqV5OSqm1umZV0-0U5Dib0POgtgAe08ux_6RKFe/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
                   padding: 0px 20px 0px 95px;
                  min-height:100px;
                  margin: 0px;
                  width: 183px;
                  line-height: 20px;
                  vertical-align: middle;
                  font-size: 14px;
                  color: rgb(51, 51, 51);

              }


              .emailicon p {
              color:#FF8604;
              font-size: 20px;
              font-weight: normal;
              font-family:  impact;
              padding:40 0px 10px 0px;
              margin:0;
              padding-top: 20px;
              line-height: 25px;
              text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;

              }

                  </style>

                  <!--[if IE]>
                  <style>
                  #email-news-subscribe .email-box input.subscribe{
                      background: #333;
                      }
                  </style>
                  <![endif]-->

              

              <div id="wg-roseicsubs" >

              

              <div class="emailicon"><p>Subscribe Us and Get Free Email Updates! </p></div>

              <div id="email-news-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=WidgetGenerators', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

              <input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" />

              

              <input type="hidden" value="WidgetGenerators" 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">

              <ul class="other-follow">
              <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/WidgetGenerators" target="_blank">RSS Feed</a> </li>

              <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="http://twitter.com/WidgetGenerator"  target="_blank">Twitter</a> </li>

              <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/101961392825834817673 target="_blank">Google Plus</a> </li>
              </ul>
              </div>

              </div>

          • Save Your Widget
           

          Make Changes....!

          • Replace WidgetGenerators it with your feedburnur user name (3 times)
          • Replace WidgetGenerator it with your twitter user name
          • Replace 101961392825834817673 it with your Google + user name



          If Any Problem Comes, Ask in Comments


          Add a Multi Color Social Bookmarking Widget

          Hemant Verma - 5:50 PM

          We also have an another Social Bookmarking Widget for blogger which has a unique feature with multicolor and black mouse hover effect when we touch widget by mouse pointer this widget is simply made by using the CSS and HTML and some images so this widget will not has any error in the installation and also it works very awesome in your own blog and it will give a unique rainbow effect to your bookmarking experience.This widget is very smooth and easily customizable so you easily use it as the sharing widget for your blog by using the sharing codes but we will publish it soon with same widget. I'll recommend you to add this widget in your blog be'coz it's a pure CSS widget.





          Add Multi Color Bookmarking Widget

          • Login to Blogger > Dashborad
          • Click on Drop Down Menu and select Layout
          • Add a HTML/JavaScript Gadget
          • Paste below code in it.
           <style type='text/css'>
          /*WIdget by www.widgetgenerators.blogspot.com*/
          .wg-roseicwidget {  width: 300px;  margin: -10px;  text-decoration: none; }
          .wg-roseicwidget ul {  margin: 0;  padding: 0;  text-decoration: none;}
          .wg-roseicwidget ul li {  list-style:none;   padding: 0; text-transform: none; text-decoration: none;}
          .wg-roseicwidget ul li a {   color: #fff;   display:block;  text-decoration: none;}
          .wg-roseicwidget ul li a:hover {  color: #c9c9c9;  background-color: #333;  text-decoration: none; }
          .wg-roseicwidget ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
          .wg-roseicwidget ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
          .wg-roseicwidget ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
          .wg-roseicwidget ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
          .wg-roseicwidget ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
          /*WIdget by www.widgetgenerators.blogspot.com*/
          </style>


          <div class="wg-roseicwidget">
          <ul>
          <li><a class="facebook" href="https://www.facebook.com/WidgetGenerators">Join Us on Facebook</a></li>
          <li><a class="rss" href="http://feeds.feedburner.com/WidgetGenerators">Subscribe to the RSS Feed</a></li>
          <li><a class="twitter" href="https://twitter.com/WidgetGenerator">Follow me on Twitter</a></li>

          <li><a class="google" href="https://plus.google.com/101961392825834817673">Join me on Google+</a></li>
          <li><a class="linkedin" href="#">Connect With Us on LinkedIn</a></li>

          </ul>
          </div>

          • Save your widget after below changes.


           Make Changes....!

          • Replace WidgetGenerators with your Facebook page user name.
          • Replace WidgetGenerators with your Feed burner user name.
          • Replace WidgetGenerator with your Twitter user name.
          • Replace 101961392825834817673 with your Google + id.
          • Replace # with your Linkedin user name.




          If Any Problem Comes, Ask in Comments


          Next Previous
          Editor's Choice

           



          Make Your Blog Like a Pro
          About | Contact | Affiliates | Privacy Policy | TOS