Blog မွာ subscription box ေလးထည့္မယ္
Posted in Blog Widget
No comments
Friday, July 19, 2013 By Kaung Htet Htun
Facebook, Twitter အကုန္ပါၿပီး၊ Subscribe ပါလုပ္လုိ႔ရမယ့္ widget ေလးထည့္ခ်င္တယ္ဆုိရင္ေတာ့
Blog Dashboard က Layout ကုိသြားပါ၊ Add a Gadget ကုိႏွိပ္ပါ၊ HTML/JavaScript ကုိႏွိပ္ပါ။ ၿပီးရင္
ေအာက္က ကုဒ္ေလးေတြ ကူးထည့္ေပးလုိက္ေနာ္။
<style>
.subscribebtrix {
.subscribebtrix {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#d3dde3));
background: -moz-linear-gradient(top, #f5f5f5, #d3dde3);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F5F5F5, endColorStr=#d3dde3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F5F5F5, endColorStr=#d3dde3);
display:inline-block; /* IE is so silly */
border: 0px solid #000000;
border-radius: 5px;
padding: 0px 10px 10px 10px;
width: 310px;
}
.subscribebtrix img {
border: none;
}
.tbimailbox {
width: 270px;
color: #666;
font: 16px 'Trebuchet Ms', Sans-Serif;
padding: 10px 15px;
border: 1px solid #D3D3D3;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button {
width: 300px;
border-top: 1px solid #96d1f8;
background: #0571e6;
background: -webkit-gradient(linear, left top, left bottom, from(#123d60), to(#0571e6));
background: -webkit-linear-gradient(top, #123d60, #0571e6);
background: -moz-linear-gradient(top, #123d60, #0571e6);
background: -ms-linear-gradient(top, #123d60, #0571e6);
background: -o-linear-gradient(top, #123d60, #0571e6);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#123d60, endColorStr=#0572e6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#123d60, endColorStr=#0572e6);
display:inline-block; /* IE is so silly */
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 16px;
font-family: "Verdana", sans-serif;
font-weight: bold;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
background: #123d60;
color: #ccc;
}
.button:active {
border-top-color: #123d60;
background: #123d60;
}
</style>
<br />
<div class='subscribebtrix'>
<div align='center' style='color: #333; font: 22px Verdana; font-weight: bold; margin: 0px 0px 15px 0px; padding: 10px 0 10px;'>
Stay Connected</div>
<br />
<br />
<center>
<div style='margin: -30px 0 20px 0;'>
<a href='http://www.facebook.com/bloggertrix' target='_blank' title='Join us on Facebook'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0VFml2h9ZKi3sOWSu8HBY0d62UF2zK6PnSyJHpzr9QhspSKRaJZlH0uWHTO8Cwa1uLKoTJ99SJlKTqyJJLyg9W-igIrS-W7y03FljZp21xydd-zbjvtDGvdhA8oDgAAOdlyGcSY34ncnL/s1600/facebookicon.png' /></a>
<a href='http://www.twitter.com/bloggertrix' rel='nofollow' target='_blank' title='Follow us on Twitter'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz2gU5drMhOcnCmn46xDtbuVLharKDsncvF12oEUyCnzBYKr0MHvLI8MOU9ADSMLKGXDVfTg8JH1AnUvbu6iP5cL-Fgb9dEaN6tmncIdjUTsnMgJReLlFHwmvsWTmOUsT5gOm1B8HTdQ5i/s1600/twitter.png' /></a>
<a href='https://plus.google.com/UserId' rel='nofollow' target='_blank' title='Follow us on Google+'><img alt='gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj34kVl9pT7q0R7dq-I4iN_gPvSBx8uvlTlNymd8cQkEmoYzHzUiGr9xB1Nk_39bHTl8k5QvHK15dF7rl5oknKfVhHw7l-RDJ_Jg6K1bqt5V4-bafhe3CavIsfdRqkkHCqmXYGUsvv2pUkN/s1600/google-plus-icon.png' /></a>
<a href='http://www.pinterest.com/bloggertrix' rel='nofollow' target='_blank' title='Follow us on Pinterest'><img alt='pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioS_dlN9OUXuMrRjlRoNkJ_ShXrC9my-drYH0Av-4UWWSCrZ4tIixI2abHQF4aElxkONb847-CZlKgPtelOjkAPsPs7k5vDJyKXFBkSjRlDClO0F-OAvydiZ6fJReJAGJXKunPUm3drEt3/s1600/pinteresticon.png' /></a>
<a href='http://feeds2.feedburner.com/bloggertrix' rel='nofollow' target='_blank' title='Subscribe to RSS'><img alt='rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGTXlcPk0vNKrqwdSzH6m7wRVR-5Az4zoxNYNG694XOt82j2Obz9AcjBiHS_tfRyba0HSBqyaO0bc2p4XAGm2IYHt8NjrqbFtXmHTMQkMe6zoElKJ_gcDU1keY1dAG9RmJPre16h7k8h6Q/s1600/rssicon.png' /></a>
</div>
</center>
<div align='center'>
<a href='http://feeds.feedburner.com/bloggertrix'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/bl0ggertricks?bg=123D60&fg=ffffff&anim=1' style='border: 0;' width='88' /></a></div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix", "popupwindow", "scrollbars=yes,width=550,height=520");return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='bloggertrix' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...' />
<input alt='' class='button' title='' type='submit' value='Subscribe' />
</form>
</div>
</div>
လုိခ်င္သေလာက္ အက်ယ္ကုိလည္း အနီေရာင္ျပထားတဲ့စာသားေတြေနရာမွာ ျပင္လုိ႔ရပါတယ္။ အျပာေရာင္ျပထားတဲ့ေနရာေတြမွာကေတာ့ ကုိယ့္ရဲ႕ Facebook, Twitter နဲ႔ Feed bruner လိပ္စာေတြကုိထည့္ရမွာပါ။
အားလံုး အဆင္ေျပၾကပါေစ။
Related posts
Share this post
0 ေယာက္ Comment ေပးသြားတယ္: