BT4U

Blogger trick 4 you about the blogger, seo services, adsense, softwares, tips and trick, games, widgets, hosting, make money, how to create a website.

Sunday, 8 December 2013

How To Add BluePrint Subscription Widget In Blogger

By on 11:06
How To Add BluePrint Subscription Widget In Blogger
Subscription widgets are significant for every blog to boost the subscribers and fans. There are tons of concepts for free that can be utilised by any person but here we're giving a expert widget to you all. This is the stylish conceive in which we've supplemented the name at the top, secondly it is having outstanding communal icons which can help in getting more communal fans. In third piece, there is a little message for subscription that what they will get after subscribing. In the last, it is having responsive subscription form with name, internet message and button area. Input fields are having stylish effect when somebody arrives to write or focus on it and it's button is furthermore fashioned.

 Why To Use This Widget?If you desire to make your blog even more responsive and stylish then use it. This can help you gaining communal followers along with email subscribers. This is build with untainted HTML and CSS3 and it furthermore works in nearly all browsers.


Credits:This widget is conceived by Blogger Trick 4 You so all the borrowing proceeds to us. Even this time we're not inquiring for any credit connection in the widget so this is hundred per hundred free. But if you're distributing this in your blog then you'll need to link back us. One thing I desire to notify you that delight respect the efforts of the designer.
Read More:You Can Also Love This Widgets
Installation
 1.Go To Blogger >> Layout >> Add a Gadget
 2.Choose "HTML/JavaScript"

 3.Paste The Following Code.

<link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />

<link href='//fonts.googleapis.com/css?family=Source Sans Pro:200,200italic,300,300italic,regular,italic,600,600italic,700,700italic,900,900italic&amp;subset=latin' rel='stylesheet' type='text/css'/>


<style>
  #byard-socialsub {
    width:300px;
    height:350px;
    background:whitesmoke;
    border:1px solid #eaeaea;
    box-shadow:0 0 2px 2px #ccc;
  }
  .byard-socialsub-title {
    font-size:20px;
    font-family: 'Oleo Script', cursive;
    background:hsl(198, 100%, 49%);
    padding:5px;
    border-bottom: 2px solid #444;
    color:white;
    text-align:center;
  }
  #byard-socialsub-icons{
    padding-top: 8px;
    padding-left: 4px;
    padding-bottom: 15px;
    border-bottom: 2px dotted hsl(0, 0%, 27%);
  }

  ul.byard-socialsub-icons{
    margin:0;
    padding:0;
    list-style:none;
    -webkit-perspective: 10000px;
  
    -moz-perspective: 10000px;
    -o-perspective: 10000px;
    perspective: 10000px;
  }

  ul.byard-socialsub-icons li{
    display: inline-block;
    width: 55px;
  
    height: 50px;
    margin-right: -px;
  
    background: none;
    font: bold 36px Arial;
  
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    padding-left:10px;
  }

  ul.byard-socialsub-icons 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.byard-socialsub-icons 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.byard-socialsub-icons li a img{
    border-width: 0;
  }

  ul.byard-socialsub-icons li:hover a{
    -moz-transform: rotateY(180deg);
  
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background: none;
  
  }

  ul.byard-socialsub-icons li:hover a span{
    -moz-transform: rotateY(180deg);
  
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  .byard-socialemailsub {
    font-size:14px;
    padding:5px;
    color:#444;
    font-family: Arial;
    font-family:bold;
  }
  .byard-socialemailsubname {
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQTidEmirGl_GCJcsqwyGRCLCwzLk6PnWN0xnaYU4eoWHr_AUbu3UOZuoeSdvnIUjVAX7PSXaq_T16PeDd8D_RFmuIXDKnjqHNyfv-Mo8kbOIMpSS-tpaqm-STXHsFcoN8WwfxdCYjh5Q/s320/name.png) no-repeat 7px 8px;
    border:1px solid #ddd;
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    color:hsla(0,0%,27%,0.69);
    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;
  
  
  }
  .byard-socialemailsubemail {
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguu1bLa4zhiqh7yCiFV1jFMRsw9fisNkdvnTXkRmPzM7slf9JCSWhVbVyK3-07-rD9CWcT23kZHv-STOzdI7Vjyzy4Vmu37pd7KSX0t_2WR8dEPpliX0gJms_9YpzKgEfiAlvagWZfxQ4/s320/email.png) no-repeat 7px 10px;
    border:1px solid #ddd;
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    color:hsla(0,0%,27%,0.69);
    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;
  
    -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;
  
  
  }
  .byard-socialemailsubname:hover,.byard-socialemailsubemail:hover {
    border:1px solid #bebebe;
    box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);
  }

  .byard-socialemailsubname:focus, .byard-socialemailsubemail:focus{
    border-color: hsl(198, 100%, 49%);
  
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);
  
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);
  
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);
  
    outline: 0 none;
  
  }

  .byard-socialemailsubbutton {
  
    -moz-box-shadow: 3px 4px 0px 0px #1564ad;
    -webkit-box-shadow: 3px 4px 0px 0px #1564ad;
    box-shadow: 3px 4px 0px 0px #1564ad;
  
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
    background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
  
    background-color:#79bbff;
  
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
  
    border:1px solid #337bc4;
  
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:17px;
    font-weight:bold;
    padding:8px 70px;
    text-decoration:none;
    margin-top:10px;
    margin-left:35px;
    text-shadow:0px 1px 0px #528ecc;
  
  }
  .byard-socialemailsubbutton:hover {
  
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
    background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
  
    background-color:#378de5;
  }
  .byard-socialemailsubbutton:active {
    position:relative;
    top:1px;
  }

</style>

<div id='byard-socialsub'>
  <div class='byard-socialsub-title'>
    Get In Touch With Us
  </div>
  <div id='byard-socialsub-icons'>
    <ul class="byard-socialsub-icons">
      <li>
        <a href="http://www.facebook.com/softwareandgame">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ptBi9KMQpdNfimfY78sNa6Hq6KKDWLf0tHyi205dxRO0bNjX72AI93QDNVlaBq4JhvekBZd5xPjV7JVTVd0m_Dv2omxMLGRdPePusPq-MbfgTyyIyvxWgpYxc_iSZNuexC4l2J4L3Tc/s64/blueprint-social-03.png" title="Add to Facebook" />
        </a>
      </li>
      <li>
        <a href="https://plus.google.com/101996924620264617682">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwuBCBc830fgJHWzA44ApVAjRAbHwk0F57UnU99kXhsL20__fxOqqs8wi1vqssAjNOgZ9I3h03oRaOqH02jJN5TrfpiRvfo5jLjUtVehxY_Ah5L3GadBxG6MvKYoCbnbDtIFyMwRUs-sY/s64/blueprint-social-04.png" title="Google plus" />
        </a>
      </li>
      <li>
        <a href="http://www.twitter.com/AWAISAFZAL0313">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB_F22q3hu02UdlnYcbjsOUMdOphTNaJazz3dAbUIFMULUTzyYdnDTuz35d4C9bB2dvHEQWfSWOo2Xltwaslb4besyxTpJoWMgR2XIRFWMgyMq0bf8ft78VFJxgPV22Gb6CVnocuSWjwI/s64/blueprint-social-01.png" title="Add to Twitter" />
        </a>
      </li>
      <li>
        <a href="http://feeds2.feedburner.com/Bt4u">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNum5p2fre3OQ2ZK_vNz1m_JVlo4ZZ4bxMR5jRIWnkDaNqhSjXHDReICkmjvMjYNGAjyxcRA7kcP5wmggn-lHL-ZA0KhBCVpGgYywjeC7qjIKj8ogt5CbocztwUjPMSBzYjsBg2FdChlA/s64/blueprint-social-10.png" title="Add RSS Feed" />
        </a>
      </li>
    </ul>
  </div>
  <div class='byard-socialemailsub'>
    <p style='padding-top:5px;padding-bottom:10px;font-size: 14px;padding: 10px;font-family:Source Sans Pro;'>
      Sign Up For Free To Get Blogging Tips, Blogger Resources, Search Engine Optimization Tips, Templates and Widgets Straight In Inbox.
    </p>
    <form action='http://feedburner.google.com/fb/a/mailverify?uri=Bt4u' class='byard-subsbox-form' method='post' target='_new'>
      <input class='byard-socialemailsubname' name='name' placeholder='Your Name' type='text'/>
      <input class='byard-socialemailsubemail' name='email' placeholder='Your Email Address' type='text'/>
      <input class='byard-socialemailsubbutton' type='submit' value='Sign Up!'/>
    </form>
  </div>
</div>


  4.Replace Highlighted Links With Yours
 5.Replace Sign Up Message With Yours
 6.Replace Bt4u With Your Feedburner Name.

    Finally, Click "Save" Button.
    Read More:You Can Also Love This Widgets 
    Share It With Your Friends!
Thanks alot For visiting Our Website! Kindly Bookmark and Share it With you Friends.

Technorati Digg This Facebook Twitter Stumble Stumble

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)