Add Wordpress Style Subscribe Box To Blogger

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Wordpress Style Subscribe Box ထည့္နည္း/သုံးနည္း ေလးပါ။ ဒီ Wordpress Style Subscribe Box ေလးကုိထည့္ျခင္းအားျဖင့္ မိမိဘေလာ့ဆုိဒ္ေလးပုိၿပီးၾကည့္လုိ႔ေကာင္းသြားမွာ အမုန္ပါပဲ။ ဘေလာ့ဆုိဒ္ေလးကုိ ျမင္ကြင္းလွလွေလးထားခ်င္သူေတြအတြက္ အရမ္းကုိအဆင္ေျပပါတယ္။ သုံးရတာလည္း လြယ္ပါတယ္။ ႀကဳိက္ၾကမယ္လုိ႔လည္း ေမွ်ာ္လင့္ပါတယ္။ ေအာက္မွာ Demo(နမူနာ) သြားၾကည့္လုိ႔ရေအာင္ Link နဲ႔ တကြ လုိအပ္တဲ့ Cond လည္းထားေပးပါတယ္။

၁။Sign In Blogger

၂။ Layout

၃။ Add a Gadget

၄။ HTML/JavaScript

၅။ ေအာက္က ေပးထာတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။

<style>  .Subscribe-MrThangMing h6 {    background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr6UViWy4BchTQp0oE2pe0b-pAsygUcJrbB3z4XKb2ALjB6fwEy0H68CUOHW8vqUsPeQtHpnOXriRL4brbq994HbEXL6U3NfCldxk6wxUpu8yI_KLH1d-Mz4sm5lJnVANfC-eHeK9oZQQ/s1600/NBT+Subscribe.png) no-repeat;    height:50px;    margin:0px 0 0px 0;    padding:0px 20px 0px 0px;    font-size:0px;    font-family:Sans-serif, Arial, Helvetica;    font-weight:bold;    text-transform:uppercase;    color:#ffffff;    text-shadow:0 1px 0 #fff;  }  ul.social {    list-style: none;    margin: 10px;    overflow: hidden;  }  .social li {    float: left;    background: none !important;    padding: 0 !important;    margin: 0 2px;  }  .social li a {    display: block;    width: 40px;    height: 40px;    background: url("http://4.bp.blogspot.com/-gANW8x7jzug/UGnr7YEermI/AAAAAAAABDY/pN1opxmSfwY/s1600/Subscribe+More+Blog+Tools+Social+Icons.png") no-repeat transparent;    text-indent: -99999em !important;    -webkit-transition: ease-in 0.15s all;    -moz-transition: ease-in 0.15s all;    -o-transition: ease-in 0.15s all;    -ms-transition: ease-in 0.15s all;    transition: ease-in 0.15s all;  }  .social li a:hover {    padding: 0 !important;  }  .social li.rssicon a {    background-position: 0 0;    border-right: 1px solid #e6e6e6;  }  .social li.twicon a {    background-position: -50px 0;    border-right: 1px solid #e6e6e6;  }  .social li.fbicon a {    background-position: -100px 0;    border-right: 1px solid #e6e6e6;  }  .social li.gicon a {    background-position: -150px 0;    border-right: 1px solid #e6e6e6;  }  .social li.yticon a {    background-position: -200px 0;  }  .social li.rssicon a:hover {    background-position: 0 -50px;    border-right: 1px solid #e6e6e6;  }  .social li.twicon a:hover {    background-position: -50px -50px;    border-right: 1px solid #e6e6e6;  }  .social li.fbicon a:hover {    background-position: -100px -50px;    border-right: 1px solid #e6e6e6;  }  .social li.gicon a:hover {    background-position: -150px -50px;    border-right: 1px solid #e6e6e6;  }  .social li.yticon a:hover {    background-position: -200px -50px;  }  .Subscribe-MrThangMing {    width: 300px;    float: left;  }  .Subscribe-MrThangMing .count {    color:#F17C18;    font-size: 14px;    font-weight: bold;    font-family: Helvetica, Arial;    height: 30px;    line-height: 30px;    vertical-align: middle;    width: 100%px;    padding: 0 0px 0 4px;    margin:0;  }  .Subscribe-MrThangMing .count span.bigcount {    color:#F17C18;    font-size: 24px;    font-family: Helvetica, Arial;    line-height: 39px;    vertical-align: middle;    margin:0px;    padding:10px 0px 0px 0;  }  .Subscribe-MrThangMing.subicons {    border-bottom: 1px solid #e6e6e6;    margin: 0px 0 0px 0;    float: left;    width: 100%px;    font-family: Helvetica, Arial;    font-size: 12px;  }  .Subscribe-MrThangMing .emailsub {    border-bottom: 0px solid #e6e6e6;    padding: 5px 0 0px 0;    float: left;    width: 100%;    font-family: Helvetica, Arial;  }  .Subscribe-MrThangMing .emailsub .emailicon {    background: url(http://1.bp.blogspot.com/-bv4Z3wxrQtc/UDReA7sQF8I/AAAAAAAAAxQ/CCeIAalllEc/s1600/Subscribe+More+Blog+Tools+Email.png) no-repeat 0 2px;    float: left;    padding: 0px 15px 10px 40px;    margin: 0 0 0 5px;    width: 300px;    line-height: 20px;    vertical-align: middle;    font-size: 14px;    color: #111;  }  .emailbutton {    background:#f7f8f9;    background:-webkit-gradient(linear, left top, left bottom, color-stop(#f7f8f9, 0), color-stop(#e9e9e9, 1));    background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);    background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);    background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);    background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9', endColorstr='#e9e9e9', GradientType=0);    border:1px solid #ddd;    -webkit-border-radius:4px;    -moz-border-radius:4px;    border-radius:4px;    padding:6px 12px;    margin:0;    -webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223, 223, 223, 0.4);    -moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223, 223, 223, 0.4);    box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223, 223, 223, 0.4);    color:#888;    text-shadow:0 1px 0 #fff;    line-height:1.2;    cursor:pointer;    font-size:13px;  }  .emailbutton:hover {    background:#f1f1f1;    background:-webkit-gradient(linear, left top, left bottom, color-stop(#f1f1f1, 0), color-stop(#e0e0e0, 1));    background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);    background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);    background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);    background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#e0e0e0', GradientType=0);    text-decoration:none !important;  }  .email {    clear:both;    width:100%;    margin:10px 0;  }  .emailform {    position:relative;    width:300px;    margin:0 auto;  }  .emailinput {    width:200px;    height:18px;    margin:0 auto;    padding:8px 40px 8px 10px;    border:1px solid #ddd;    -webkit-border-radius:4px;    -moz-border-radius:4px;    border-radius:4px;    font-family:georgia;    font-style:italic;    -webkit-box-shadow:1px 1px 2px #dfdfdf;    -moz-box-shadow:1px 1px 2px #dfdfdf;    box-shadow:1px 1px 2px #dfdfdf;    font-size:14px;    color:#666;  }  .emailbutton {    -webkit-border-top-right-radius:4px;    -webkit-border-bottom-right-radius:4px;    -moz-border-radius-topright:4px;    -moz-border-radius-bottomright:4px;    border-top-right-radius:4px;    border-bottom-right-radius:4px;    -webkit-border-top-left-radius:0px;    -webkit-border-bottom-left-radius:0px;    -moz-border-radius-topleft:0px;    -moz-border-radius-bottomleft:0px;    border-top-left-radius:0px;    border-bottom-left-radius:0px;    padding:9px;    position:absolute;    right:-2px;    top:0;    display:block;    line-height:16px;  }  .emailbutton {    padding:8px !important;  }  .emailform, .emailinput {    width:98% !important;    -webkit-box-sizing:border-box;    -moz-box-sizing:border-box;    box-sizing:border-box;    height:auto;  }  </style>  <br />

<div style="display: none;">

Email Subscription box by<a href="http://www.mrthangming.blogspot.com/">Mr ThangMing</a>  </div>

<div class="Subscribe-MrThangMing">

<h6 class="title">

Subscribe Now!</h6>

<div class="count">

<span class="bigcount">  <a href="http://feeds.feedburner.com/blogspot/mrthangming"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/blogspot/mrthangming?bg=F17C18&amp;fg=444444&amp;anim=1" style="border: 0;" width="88" /></a>  </span> Learn Pro Tricks daily</div>

<div class="subicons">

<ul class="social">

<li class="rssicon">  <a href="http://feeds.feedburner.com/blogspot/mrthangming" rel="nofollow" target="_blank">Rss</a>        </li>

<li class="twicon">  <a href="http://twitter.com/johnthangming" rel="nofollow" target="_blank">Twitter</a>        </li>

<li class="fbicon">  <a href="http://facebook.com/tmblogtechnology" rel="nofollow" target="_blank">FaceBook</a>        </li>

<li class="gicon">  <a href="https://plus.google.com/108100949889665305918" rel="nofollow" target="_blank">Google+</a>        </li>

<li class="yticon">  <a href="http://youtube.com/user/mrthangming" rel="nofollow" target="_blank">YouTube</a>        </li>

</ul>

</div>

<br style="clear: both;" />

<div style="border-bottom: 1px solid #e6e6e6; margin: 8px 5px 0px 0px; padding-bottom: 5px; width: 300px;">

<!-- Place this tag where you want the +1 button to render. -->      <br />

<div class="g-plusone" data-annotation="inline" data-href="www.mrthangming.blogspot.com" data-size="medium" data-width="280">

</div>

<!-- Place this tag after the last +1 button tag. -->      <script type="text/javascript">      (function () {        var po = document.createElement('script');        po.type = 'text/javascript';        po.async = true;        po.src = 'https://apis.google.com/js/plusone.js';        var s = document.getElementsByTagName('script')[0];        s.parentNode.insertBefore(po, s);      })();      </script>    </div>

<div style="border-bottom: 1px solid #e6e6e6; margin: 8px 5px 0px 0px; padding-bottom: 5px; width: 300px;">

<iframe allowtransparency="true" class="twitter-follow-button" data-twttr-rendered="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1351358237637&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=johnthangming&amp;show_count=true&amp;show_screen_name=true&amp;size=m" style="height: 20px; width: 266px;" title="Twitter Follow Button"></iframe>      <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>    </div>

<div class="emailsub">

<div class="emailicon">

<div style="color: #111111; font-family: Helvetica, Arial; font-size: 13px; font-weight: normal; margin: 0; padding: 0; width: 240px;">

Receive Quality Tutorials Straight in your Inbox by submitting your Email ID below.</div>

</div>

<div class="email">

<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/mrthangming', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input name="uri" type="hidden" value="blogspot/mrthangming" />          <input name="loc" type="hidden" value="en_US" />          <input class="emailinput" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />          <input class="emailbutton" title="" type="submit" value="Submit" />        </form>

၆။ ထည့္ၿပီးရင္ Save Button ေလးကုိ နုိပ္ေပးလုိက္ပါ။

မွတ္ခ်က္။    ။ (၁) http://feeds.feedburner.com/blogspot/mrthangming /

(၂) http://feeds.feedburner.com/blogspot/mrthangming /

(၃) http://twitter.com/johnthangming  /

(၄) http://facebook.com/tmblogtechnology /

(၅) https://plus.google.com/108100949889665305918 /

 (၆) http://youtube.com/user/mrthangming /

(၇) http://feedburner.google.com/fb/a/mailverify?uri=blogspot/mrthangming

အေပၚက ျပထားတဲ့ ေနရာေတြမွာ မိမိ သုံးတဲ့ ID အမည္ နဲ႔ ေျပာင္းေပးဖုိ႔ မေမ့ၾကပါနဲ႔။