Attractive Subscribe Section + Search Box For Blogger

အခုတခါတင္လိုက္တာကေတာ့ Subscribe Section နဲ႔ Search Box တြဲရက္ Widget ေလးျဖစ္ပါတယ္။

အေပၚကပုံစံေလးပါဘဲ၊ ႐ိုး႐ိုး႐ွင္း႐ွင္းေလးနဲ႔မို႔ ၾကည့္လို႔ ေကာင္းပါတယ္။

ႏွစ္သက္သေဘာက်ရင္ ေအာက္မွာ ျပဳလုပ္နည္းေလးဆက္ၾကည့္လိုက္ၾကပါအုန္း။

1. Blogger home Page ကိုသြားပါ။
2. Termplate ကို ကလစ္ပါ။
3. သင့္ Template ကို Backup အရင္လုပ္ပါ။
4. Expand widget Templates စာေ႐့ႇကအကြက္တြင္ အမွန္ျခစ္ေလးထည့္ေပးပါ။
5. ၿပီးရင္ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ကို႐ွာပါ။

</head>

6. ေတြ႔ၿပီဆိုရင္ ဒီ </head> ရဲ႕အေပၚမွာ ေအာက္က ကုဒ္ေတြကို ကူးၿပီး ထည့္ေပးလိုက္ပါ။

view plainprint?

1. <style>  
2. .subbox{width:305px;border:0 solid #141414;overflow:hidden}  
3. .addthis_toolbox{padding:15px 0 5px 0;text-align:center}  
4. .addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}  
5. .addthis_toolbox .custom_images a:hover img{opacity:1}  
6. .addthis_toolbox .custom_images a img{opacity:0.85}  
7. .rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}  
8. .rssbox:hover{border:1px solid #92aed1}  
9. .rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}  
10. .rssbox a:hover{color:#7c8a9b;text-decoration:underline}  
11. .emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}  
12. .emailsbox:hover{border:1px solid #92aed1}  
13. .emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}  
14. .emailsbox a:hover{color:#7c8a9b;text-decoration:underline}  
15. .twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}  
16. .twitterbox:hover{border:1px solid #92aed1}  
17. .twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}  
18. .twitterbox a:hover{color:#7c8a9b;text-decoration:underline}  
19. .facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}  
20. .facebookbox:hover{border:1px solid #92aed1}  
21. .facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}  
22. .facebookbox a:hover{color:#7c8a9b;text-decoration:underline}  
23. #search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}  
24. #search:hover{border:1px solid #92aed1}  
25. #search form{margin:0;padding:0}  
26. #search fieldset{margin:0;padding:0;border:none}  
27. #search p{margin:0;font-size:85%}  
28. #s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% "Tahoma",Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}  
29. input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}  
30. </style>  

<style>
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% "Tahoma",Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

Save your template ကိုႏွိပ္ပါ။

မွတ္ခ်က္။။ ဒီ widget ေလးကို သင္ထားမည့္ ေနရာႏွင့္ အံဝင္ဂြင္က်ျဖစ္ေစရန္ (width) အက်ယ္
မ်ားကို ခ်ိန္ဆ၍ေျပာင္းႏိုင္ပါသည္။

ေသခ်ာေအာင္ Notepad တြင္ အရင္ ကူးၿပီး ဘယ္ေနရာေတြမွာ ဘယ္လိုေျပာင္းလို႔ရသလဲဆိုတာ အရင္ေလ့လာေစခ်င္ပါတယ္။

• ေနာက္တစ္ဆင့္ မွာ Page Lay out ကိုသြားပါ။
• Add a Gadget ကိုကလစ္ပါ။
• Edit HTML/Java scrip ကို ေ႐ြးပါ။
• ေအာက္မွာေပးထားတဲ့ကုဒ္ေတြကို ကူးထည့္ေပးလိုက္ပါ။

<style type="text/css"><div class="subbox"> <div id='search' style='display:inline;'> <form action='/search' id='searchform' method='get'> <input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = "";}" type="text" value="Search..." /> <input id="searchsubmit" type="submit" value="Search" /> </form> </div> <table> <tr> <td><div class="rssbox"> <a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBPlJI93uizbodkwFQ_E_ZXuS1JyXULt1w-K3aaMtu9hRfQkHR3Qz_9rMnGwURnhQbrLWEuyQ31MuVqeoy6VDrWTTYVVc5vHkgcieRwvQkQGBUdYTywIGS6C2v32ygVoU2RnKF-c9siAgo/" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID</b></span>" target="_blank" rel="nofollow">RSS Feed</a> </div> </td> <td><div class="emailsbox"> <a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih5dtI08pD7rflwRqsAIBZeYM7aDutESbJE17-8ePIG0SxyPdfvXQTo14V4Gv2cCf2BYWgBKSyr9i1cP5NrN2baZz_KjsQmJuXIaZSuzX1WzNVswI8E0-PPXqgd92u0kSk3DrnKh4MCORx/" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a> </div> </td> </tr> <tr> <td><div class="twitterbox"> <a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvtt8XitmgK0rdqVsqZycOJHGkh-UYvnRHvjEjXyWq0xqsbLaYwFyC4Fa3b9CiAn1GzsqnE94HzAsnT1wwQI2JDYQr0K101o7WiAHxn5pBeTN5VBAnSHDpqbtkIpgioMnDFml-KeXLwls/" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a> </div> </td> <td><div class="facebookbox"> <a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWb92fX_iJEcGjPl7YgZp9dCdkzpABjQj1JEn6HMr7KpOaQMF319VaPdm17B-UJrIlCgmOjjgRLRUBls87lrSngt8vEOcGjaAFVVRsbpgfrrslZXmX_7-kwLEeo7E4v4mHEMnwemZHBPTL/" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a> </div> </td> </tr> </table> <p style="display:none;" align="center"> Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p> <div class='addthis_toolbox'> <div class='custom_images'> <a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUAOhdibCseZUNTB-YmLq-1GPtefaIANj3GEVqz4H5rwPTMfSiC-1eKwgfp1UGvCPgZpCA9Lfb_1DBs9TtM7MFhqej7aEe2J8qDNyrSDcDOhSy9W3sHdEBMIEBFGPGctZHb20y30KOCkw/' width='32'/></a> <a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiVlUdFbewooleeFISGA5TdimxwSrZZf36WMf60u0x3dJ0AcwiLG_D72ZL4-pEspKFdvGzsAqprGUfo6o_ImNxJK60MLYyCzKmwX7pdDGQGC7QOkNnHLPXSyqd4CKUwGfa9EdG_IJH8hg/' width='32'/></a> <a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix6VQjruiZ8eM4UDPyuERIt1f9ErSmsOE1jPqNJHX6KG-OisiQ0DY4PYiIUkBRV6mnRuAvj_xrh5BrLQLoVN8swmgQSv6xmLdqAjO8Z9mxWKwCcjkg2nP8ZnMu4viPtj6tOf_wsIvsnBY/' width='32'/></a> <a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAcYaEsOKPwTZUl1csBp1iunqXzimGRrJfR97knfGtA9nUBHeSABj62AAmTrGLXhBpuUVGKuJL3nkUXlkyP1qoHep0k_N4vIAnSmmEbkmULgcu-KthW9HjW7ajSXoHqAMtR543JZUz3mo/' width='32'/></a> <a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Vxmgvest-zSOE8H4wGA2hyUH-TsYpEtYqDdCStTbHFUAT5Q69h7CprB9jqSzxQ81abuu6DUHPsPTZ3Z_eEW-8X2vJjlzxbS9o1rvXOvPu0_vrUOrMgYjNg0vJNmHPcXRe3X311Gc-B4/' width='32'/></a> <a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixBP4wMdlFA4d13XsMAdsviaGL5l425qzm2NQWr3qzHgGdEP1fBLOW8-YzOGkFn7ad48TVEEvZhWoiHgXYAZdnxwbaLTD4Jv2_VMlhXCf8-73YHHRmzwsEFRczbKzvBUdbhcMv8xvV8pE/' width='32'/></a> <a class='addthis_button_more'><img alt='More' height='<span style="color: purple;">32</span>' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5A_2MauEwpesgB5MyXYK3tyMZA0lzPX8_cfokIAoajLINkNWuJ_mWrPLeQzU7XL6MbK75U35viJoVXXak9-VgVyV1HU8wBAlrOh89BO8dU8RcSKmfxxl_z4t6qqfwQDpcngR05KDm9hU/' width='32'/></a> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> </div> </div> </style>

မွတ္ခ်က္။။ Save မလုပ္ခင္မွာ ေအာက္ပါအတိုင္း ျပဳလုပ္ပါ။   FEEDBURNER-ID FEEDBURNER-ID ကို ၄ ခုျဖည့္ေပးရပါမယ္။ TWITTER-USERNAME TWITTER-USERNAME ကို ၂ ခုျဖည့္ေပးရပါမယ္။   FACEBOOK-USERNAME FACEBOOK-USERNAME ကို ၂ ခုျဖည့္ေပးရပါမယ္။ သင္ထားမည့္ေနရာႏွင့္ အံဝင္ရြင္က် ျဖစ္ေစရန္ Icon အ႐ြယ္အစားေျပာင္းႏိုင္သည္။  height='32'  width='32' မွတ္ခ်က္။။ အျမင့္ႏွင့္အက်ယ္ အ႐ြယ္အစားတူရပါမည္။

Posted in: ကုဒ္မ်ား,နည္းပညာ