Tuesday 5 November 2013

Filled Under:

How To Add Flat Style Feedburner Subscription Box For Blogger

Posted By: Aman - 15:04

With the introduction of windows 8 , metro style has been on a role.The simplicity and the color branding really looks cool.Even iPhone IOS 7 has been introduced with new flat style user interface.The demand for flat style is increasing.Hence we decided to make a flat UI style box.The output was really awesome.We hope you like it too.

    Procedure 

    • Go to blogger 
    • Navigate to blogger > Layout > Add a Gadget > Html and Javascript 
    • Paste this code below it 
    <div id='ypg-socialsub'>
        <div class="strip">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYgeODkNBOy09N7rlvin7NwVFxh-abweEC0pNY8jx8jx4LeYA7VUiWsoz4mYVMZxpEHHzwN66IXwAf1j-mX_YGYWdSOj2TjRwG2pP4i1tHen3lokvRl-Mxhpy-YGVlpvSbb5aTAi4QLEY/s1600/strip.png"  height="5" width="100%"/>
    </div>
      <div class='ypg-socialsub-title'>
        Sign Up In Seconds
      </div>
    <div class='ypg-socialemailsub'>
     
        <form action='http://feedburner.google.com/fb/a/mailverify?uri=pcgenieland' class='ypg-subsbox-form' method='post' target='_new'>
          <input class='ypg-socialemailsubname' name='name' placeholder='Your Name' type='text'/>
          <input class='ypg-socialemailsubemail' name='email' placeholder='Your Email Address' type='text'/>
            <br/> <br/>
          <input class='social89button' type='submit' value='Sign Me Up!'/>
        </form>
      </div>
        <br/>
        <div id="flipboard_btrix">
    <div class="text5">
       <font size="2"> <font color="#bdc3c7"> .or you can connect through our social sites </font></font>
            </div>
    <br />
            <center>
    <ul class="flipboard_btrix">
    <li><a href="http://www.pinteresr/shipsocker"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2My7QIzS0Ba9HSXoiSvHtRVTM8gVUqere8910zRrLMrQ7vePyP2iHPsRHBrZB2aVZ_b_NYj7GvZIJmWIBNAgQJly9K2D-Tj1DlViuEl34U0QZhQMdozJMswkr8wTxi9QXxRoJIdyxfxZJ/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
    <li><a href="http://www.facebook.com/genieland"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAKCPmqGIgVfGfcVoePOKk4TT6DxQVsFF4wqxErVB8nch8FMpQ8uNMLMZkSGIoTDEausAFaMTs1SJ_aWzjrH1NCwsmZ07CsyU2SSUHNwxtZkrjk8sn1NJKK051HtfVIhpAxuysuCPs3_8i/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
    <li><a href="https://plus.google.com/https://plus.google.com/103247805386384887313"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqOB8rLh3e6crF2IttTuz-v3nqIt1QnvThuKY7lqbrX1D4eg4EwX2RjRQxJnM_UAq5JsJoPt_9RCo11nu0qRsMMm42SHEvu3R8gDBypMR4iavB6rYBrzvXczFTi6pqu-rhWzT44I0os5PB/s1600/btrix_google+.png" title="Google plus" /></a></li>
    <li><a href="http://www.twitter/shipsocker"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi57nXQcSDmUK-X1_WgraUEoNHsjzqI_0HoJO7cYZnFwE3ZYziZAfNbElIqjzLiPLoY4C_6yjFP7QcUzxLv4jstG7dW55FPHnBA7T_UmiCMXnGkLfjqRvJtQ2JZyCVA9D9nuPUW90nfe6ks/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
    <li><a href="http://feeds2.feedburner.pcgenieland"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir7-l_GhWD3bWIzzuydNaQLzKYOQNu2fVv9w3KBlHEl2OfiMJTM19PrrVynIOg9wI5O88H9rjIKUvESswygDfQ-Vk13anr6P6B9ch80R0ZeOd26ivjTgt4GSYDx87-tOCjIwSvosPhDd8F/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li>
    </ul>
            </center>
        </div>
    </div>

    <style>
     .strip{
        margin-top:-12px;
        width:100%;
        margin-bottom:-6px;
     }
    #ypg-socialsub {
        width:300px;
        padding-bottom:10px;
        background:#f9f9f9;
        border:1px solid #eaeaea;
        -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
      }
      .ypg-socialsub-title {
           font-family: Verdana;
        font-size:25px;
        background:#16a085;
        padding-top:10px;
        padding-bottom:14px;
        color:#fff;
        text-align:center;
        margin-bottom:5px;
      }

      .ypg-socialemailsub {
        font-size:14px;
        padding:5px;
        color:#444;
        font-family: Arial;
        font-family:bold;
      }
      .ypg-socialemailsubname {
        background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfAtpgblNm3TW11DwD_JyFD8R054bawXU-reaW8i4EIETWP6WQaDmyZo1DBhl2zp1Fusv9ZMPBkSTAJPilwvsUKraYz1hvjY_uupPmLqqF_kran3aZjHW7ICDP2iTVLlPCIGM_Wt4ON_8/s320/name.png) no-repeat 7px 8px;
        border:2px solid #dbdad9;
        font-family:Arial,sans-serif;
        font-size:13px;
        font-weight:bold;
        color:#dbdad9;
        width:225px;
        height:25px;
        padding:5px 15px 5px 28px;
        margin-left:10px;
        display:inline-block;
        transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

        -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

        -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

        -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
      moz-box-shadow: 1px 1px 3px 0 #ddd;
    -webkit-box-shadow: 1px 1px 3px 0 #ddd;
    box-shadow: 1px 1px 3px 0 #ddd;

      }
      .ypg-socialemailsubemail {
        background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijaX4fClHOSPf8l7j1_hJhp874qHmcctIDxc03tHKTb_lLlVY0X3X8hxU8V0I3unjqz-fPo59PhPUNOxUH3Kuct1ee7RQy5Bm_c0SZlZBGn2DaaoNOUlxPF0vNeV85mTAmQ6xgjSgrECE/s320/email.png) no-repeat 7px 10px;
        border:2px solid #ddd;
        font-family:Arial,sans-serif;
        font-size:13px;
        font-weight:bold;
        color:#ddd;
        width:225px;
        height:25px;
        margin-top:10px;
        padding:5px 15px 5px 28px;
        margin-left:10px;
        display:inline-block;
        transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
         -moz-box-shadow: 1px 1px 3px 0 #ddd;
    -webkit-box-shadow: 1px 1px 3px 0 #ddd;
    box-shadow: 1px 1px 3px 0 #ddd;

        -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

        -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

        -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;


      }
      .ypg-socialemailsubname:hover,.byard-socialemailsubemail:hover {
        border:2px solid #bebebe;
        box-shadow:0.5px 1.5px 2px #ddd;
         moz-box-shadow: 1px 1px 3px 0 #ddd;
    -webkit-box-shadow: 1px 1px 3px 0 #ddd;
    box-shadow: 1px 1px 3px 0 #ddd;
      }

      .social89button {
          box-shadow:none;
       background:#e74c3c;
        color:#ffffff;
        font-family:arial;
        font-size:20px;
        font-weight:bold;
        padding:10px 0px;
        text-decoration:none;
        margin-top:15px;
        margin-left:6px;
      width:280px;
    border-radius: 8px;
      }
      .ypg-socialemailsubbutton:hover {
      opacity:0.9;
      }
      .ypg-socialemailsubbutton:active {
        position:relative;
        top:1px;
      }
    .text5{
        margin-top:8px;
        color:#ddd !important;
        font-size:12px;
        padding-right:2px;
        padding-left:2px;
        font-family:verdana;
    }
    #flipboard_btrix{ width:300px;}
    ul.flipboard_btrix{
    margin:0;
    padding:0;
    list-style:none;
    -webkit-perspective: 10000px;
    -moz-perspective: 10000px;
    -o-perspective: 10000px;
    perspective: 10000px;
    }
    ul.flipboard_btrix li{
    display: inline-block;
    width: 55px;
    height: 50px;
    margin-right: -px;
    background: white;
    font: bold 36px Arial;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    }
    ul.flipboard_btrix li a{
    display:block;
    width: 100%;
    height: 100%;
    color: black;
    text-decoration: none;
    outline: none;
    -webkit-transition:all 300ms ease-out 0.1s;
    -moz-transition:all 300ms ease-out 0.1s;
    -o-transition:all 300ms ease-out 0.1s;
    transition:all 300ms ease-out 0.1s;
    }
    ul.flipboard_btrix li a span{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 5px;
    display:block;
    width: 100%;
    height: 100%;
    -webkit-transition:all 300ms ease-out 0.1s;
    -moz-transition:all 300ms ease-out 0.1s;
    -o-transition:all 300ms ease-out 0.1s;
    transition:all 300ms ease-out 0.1s;
    }
    ul.flipboard_btrix li a img{
    border-width: 0;
    }
    ul.flipboard_btrix li:hover a{
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }
    ul.flipboard_btrix li:hover a span{
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }
    form#btrix-searchform {
        display: block;
        padding: 7px 16px;
        margin: 0;
    }
    form#btrix-searchform #s {
        padding-left: 24px !important;
        padding: 7.5px;
        margin: 0;
        width: 198px;
        font-size: 16px;
        font-family: georgia;
        font-style: italic;
        color: #666666;
        vertical-align: top;
        border: none;
        background: transparent;
    }
    </style>

    • Edit the highlighted links to your desire.
    • Save the gadget and the layout

    Written by

    We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

    1 comments:

    Subscribe to: Post Comments (Atom)

    © 2013 iPRESS. All rights resevered. Designed by Templateism