Style လွလွ နဲ႔ Subscribe Box ထည့္နည္း....

အထက္ေဖာ္ျပပါပံုအတိုင္း Style လွလွ နဲ႔ လုပ္ခ်င္သူေတြ အတြက္....

1. Blog-->Dashboard-->Layout-->ADD HTML/Javascript မွ တစ္ခု ထည့္ပါ...
2. ေအာက္က ေပးထားတဲ႔ Code ေတြကို ကူးထည့္ေပးလိုက္ပါ 

<style>
    #bp-social {
    width: 300px;     }
    .bp-iconset{
    padding: 5px;
    }
    .bp-iconset img:hover{
    opacity:0.8
    }
   .fb{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    text-align: center;
   }
    .facebook{
   text-align: center;
   padding-top: 10px;
   width:80%;
    }
    .twitter{
    padding-top: 10px;
    text-align: center;
    }
   .addthis_counter{
   float: left;
   height: 60px;
   padding-left: 60px;
   }
   .email-subscribe-emailbox form {
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;border: 0;
    }
    .email-subscribe-emailbox input.emailu {
    float:left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border: 0;
    color: #999;
    padding: 7px 10px 8px;
    width: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 13px;
    border: 1px solid #ccc;  
    }
    .email-subscribe-emailbox input.emailu:focus {
    color: #333;
    }
    .email-subscribe-emailbox input.submitu {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: black;
    padding: 7px 14px;
    font-weight: bold;
    font-size: 12px;
    float: right;
    cursor: pointer;
    }
    .email-subscribe-emailbox input.submitu:hover {
    text-decoration: none;
    }
</style>
    <div id="bp-social">
    <div class="bp-iconset">
    <center>
    <a style="margin-right: 10px;" href="Facebook Page URL" target="_blank" rel="nofollow">
    <img src="http://1.bp.blogspot.com/-RBXNfK74zvY/UShPFuz772I/AAAAAAAABJI/2o8a-aW2sXg/s1600/facebook.png" width='50px' height='65px' title='Facebook'/></a>
    <a style="margin-right: 10px;" href="Twitter Page URL" target="_blank" rel="nofollow">
    <img src="http://4.bp.blogspot.com/--1dhSYSma0U/UShPIEpWuaI/AAAAAAAABJg/7Z21-Dxd9hk/s1600/twitter.png" width='50px' height='65px' title='Twitter'/></a>
    <a style="margin-right: 10px;" rel="me" href="Google Plus Page URL" target="_blank">
    <img src="http://4.bp.blogspot.com/-QR7nfuLf5Mg/UShPF93ZMEI/AAAAAAAABJQ/dKU8o_bXARM/s1600/googleplus.png" width='50px' height='65px' title='Google Plus'/></a>
    <a style="margin-right: 10px;" href="Pinterest Page URL" target="_blank">
    <img src="http://2.bp.blogspot.com/-EvVlJ3Ok5CA/UShPFERe9XI/AAAAAAAABJA/cDSOYCV8b5A/s1600/pinterest.png" width='50px' height='65px' title='Pinterest'/></a>
     </center>
    <center>
   <a style="margin-right: 10px;" href="RSS Feed Page URL" target="_blank" rel="nofollow">
    <img src="http://3.bp.blogspot.com/--uaHlkY0Mfw/UShPGSXHnHI/AAAAAAAABJY/2dfO0mbd7B8/s1600/rss.png" width='50px' height='65px' title='RSS Feed'/></a>
    <a style="margin-right: 10px;" rel="me" href="Flickr Page URL" target="_blank">
    <img src="http://1.bp.blogspot.com/-amQyN7wrZpM/UShPKT3x99I/AAAAAAAABJw/RF4FMWMRbPQ/s1600/flickr.png" width='50px' height='65px' title='Flickr'/></a>
    <a style="margin-right: 10px;" href="Linkedin Page URL" target="_blank">
    <img src="http://1.bp.blogspot.com/-PILNWP18QDI/UShPLnR7tNI/AAAAAAAABKA/11o00SzwtzA/s1600/linkedin.png" width='50px' height='65px' title='Linkedin'/></a>
    <a style="margin-right: 10px;" href="Youtube Page URL" target="_blank" rel="nofollow">
    <img src="http://1.bp.blogspot.com/-N53-izFc2_8/UShPJvC8BFI/AAAAAAAABJo/0Aye3Equ5n8/s1600/youtube.png" width='50px' height='65px' title='Youtube'/></a>
    </center>
<div class="fb">
    <div class="facebook">
<a class="addthis_counter"></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FTipsNTricksForBloggerLovers&amp;send=false&amp;layout=box_count&amp;width=50&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=90&amp;appId=271817639530563" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:60px;" allowtransparency="true"></iframe>
<div class="g-plusone" data-size="tall"></div>
<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>
    <div class="twitter">
    <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=ProTipsNTricks&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button">
    </iframe>
    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    </div>
     <div class="email-subscribe-emailbox">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerprofessional', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
    <table width="100%">
    <tr>
    <td>
    <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
    </td>
    <td width="70px">
    <input class="submitu TZDefault" type="submit" value="Subscribe"/>
    </td>
    </tr>
    </table>
    <input name="uri" type="hidden" value="bloggerprofessional"/>
    <input name="loc" type="hidden" value="en_US"/>
    </form>
    </div>
    </div>
    </div>

အဆင္ေျပပါၿပီ လွလွေလးေတြနဲ႔ လန္းႏိုင္ၾကပါေစ....

naungkhantthu@gmail.com

Posted in: Blogger, Tips And Tricks