Subscribe box widget cho blog (style 5 at KJ Magic)

Ở những bài trước mình đã giới thiệu một số style subscribe box widget trên blog Namkna. Bài viết này mình sẽ tiếp tục chia sẻ style một style nữa của subscribe box widget cho Blogger (các bạn xem hình trên). Sau đây là các bước thực hiện:

Bước 1: Tại trang quản trị, các bạn vào Bố cục, tạo một tiện ích HTML/JavaScript.

Bước 2: Dán đoạn code bên dưới vào phần nội dung widget:

<!--Subscribe box style 5 by kjmagic.blogspot.com-->
<link href="http://fonts.googleapis.com/css?family=Arial: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 type="text/css">
  #kjsocialsub {
    width:300px;
    height:350px;
    background:whitesmoke;
    border:1px solid #eaeaea;
    box-shadow:0 0 2px 2px #ccc;
  }
  .kjsocialsub-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;
  }
  #kjsocialsub-icons{
    padding-top: 8px;
    padding-left: 4px;
    padding-bottom: 15px;
    border-bottom: 2px dotted hsl(0, 0%, 27%);
  }

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

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

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

  ul.kjsocialsub-icons li:hover a span{
    -moz-transform: rotateY(180deg);
  
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  .kjsocialemailsub {
    font-size:14px;
    padding:5px;
    color:#444;
    font-family: Arial;
    font-family:bold;
  }
  .kjsocialemailsubname {
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbCKxAO1iw5D7MSaJrB_bPQe6WW5j1KrA8mBKyyoUYmE6Jfzd2AcqXhyphenhyphendqKLcFGA257GpIq68FUdf9h-qffFomC1dVebF5NnZvoVZAfGlUIze2lER_HthNXBN6KfnUBjZiq_RjApXMkpg/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;
  
  
  }
  .kjsocialemailsubemail {
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRJDFvbZqAWnL4MkK6ngVdWeKkTQMKRnT2Id8gf3qeanEQaxmMFozhppBdpQsSkmaxYPULZtyKP4hIjjU_Au1vt0-AwF0yQthA1rOQ7_AegO96XAb84ikRm9ckGZQR_M5UMGnKlqKRVYA/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;
  
  
  }
  .kjsocialemailsubname:hover,.kjsocialemailsubemail:hover {
    border:1px solid #bebebe;
    box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);
  }

  .kjsocialemailsubname:focus, .kjsocialemailsubemail: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;
  
  }

  .kjsocialemailsubbutton {
  
    -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;
  
  }
  .kjsocialemailsubbutton: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;
  }
  .kjsocialemailsubbutton:active {
    position:relative;
    top:1px;
  }

</style>

<div id='kjsocialsub'>
  <div class='kjsocialsub-title'>
    Get In Touch With Me
  </div>
  <div id='kjsocialsub-icons'>
    <ul class="kjsocialsub-icons">
      <li>
        <a href="http://www.facebook.com/kj.magician">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilV7LXEVE74KOEMOqYNRpz3bi1bCjDfg_c89-lOUdK4PCUvPXvcwqdDKx3Y5xlXFlE5Ok-5oFfPDWVmy6OvsEv9IQA0EfLl93PdvBVM1sFRcV3SsfEITaZYvBetSVt_4uGgUML5li6FQQ/s64/blueprint-social-03.png" title="Add to Facebook" />
        </a>
      </li>
      <li>
        <a href="https://plus.google.com/your-gplus-id">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsU5NOLfqDCKcEWJvcruQXb6wCT3M9EDaDqAcYHr-7mvXhTjc8KXTaFyAHYf7E4N02OW9zyY2XHhdht-ZyZlGVp3yUjF13M9p7gGNBIGnjfX8SnmarD2iTfUAy3y09Bn8HVenlk5IBDIc/s64/blueprint-social-04.png" title="Google plus" />
        </a>
      </li>
      <li>
        <a href="http://www.twitter.com/quocdoantrinh">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEN48Oaw78ykas0-nNdxrw08nsVZwsGcAFeh7zxZ7neEM0X3JcZs-5sXVzUKp9-tgwv7v14mnjSmurkioObbmUKXMi3TmYDb2YopJjIFs8_TMqqzVjFVpzyA4WlW6x0Xn84yPOMQ_UfGI/s64/blueprint-social-01.png" title="Add to Twitter" />
        </a>
      </li>
      <li>
        <a href="http://feeds.feedburner.com/KjMagic">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggCkrcLz8mQpvPrN9QZ6DQSbpmOA_AHV-6ouSpUpvJye_Mlb7myBmMlkmPl2tkodDXc5tXtXXg77BJVtpCIlGt80XMoLNwcsMghX1ta9PD1uX4lM23Ky8zsZcfnuB3jM1PQpz3AX4_QI/s64/blueprint-social-10.png" title="Add RSS Feed" />
        </a>
      </li>
    </ul>
  </div>
  <div class='kjsocialemailsub'>
    <p style='padding-top:5px;padding-bottom:10px;font-size: 14px;padding: 10px;font-family:Source Sans Pro;'>
      Đăng ký nhận tin mới hoàn toàn miễn phí qua Email của bạn.
    </p>
    <form action='http://feedburner.google.com/fb/a/mailverify?uri=KjMagic' class='kjsubsbox-form' method='post' target='_new'>
      <input class='kjsocialemailsubname' name='name' placeholder='Your Name' type='text'/>
      <input class='kjsocialemailsubemail' name='email' placeholder='Your Email Address' type='text'/>
      <input class='kjsocialemailsubbutton' type='submit' value='Sign Up!'/>
    </form>
  </div>
</div>
<!--/Subscribe box style 5 by kjmagic.blogspot.com-->

Thay những chỗ mình đánh dấu thành ID tương ứng của bạn.

Chúc các bạn thành công !

Xem thêm thủ thuật: kjmagic.blogspot.com