அழகிய Subscribe கெட்ஜட், Search Box ஒன்றை நமது Blogஇல் சேர்ப்போம்.

நாம் இம்முறை நமது Blog ஐ அழகுபடுத்தும் ஒரு புது கெட்ஜட் பற்றி பார்ப்போம். ஆம், நமது Blogஐ பிரயோசனமான ஒரு அழகிய Subscribe மற்றும் Search Box இனை இனைப்பதன் மூலம் அழகுபடுத்துவது எப்படி என்று பார்ப்போம். இந்த கெட்ஜட்டை உங்கள் Blog இலும் சேர்க்கக் விரும்பினால் கீழ் வருமாறு செய்யுங்கள்.

• முதலில் Blogger இல் Dashboard >>Design>>Edit HTML என்பதற்கு செல்லுங்கள். தவறாமல் Expand Widget Templates இனை தெரிவு செய்யுங்கள்.
• பின்னர் Ctrl + F கீ களை ஒரே நேரத்தில் பிரஸ் செய்து HTML Box இல் </head>  எனும்  இடத்தை கண்டுபிடியுங்கள், பின்னர் </head> இற்குக் கீழாக நாம் இங்கே கீழே தரப்பட்டுள்ள் HTML Code ஐ Copy செய்து Paste செய்யுங்கள்.

<style type="text/css">
.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% &quot;Tahoma&quot;,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>

• இப்போது Template ஐ save செய்துகொள்ளுங்கள்.
• இனி Add a Gadget >> “HTML/ Java Script” மூலம் “HTML/ Java Script” Box ஒன்றை பெற்று அதில் கீழே உள்ள HTML Code ஐ Copy செய்து Paste செய்யுங்கள்.

<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 == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" 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="http://lh4.ggpht.com/_RduEq9ylLDc/TKneyoREhiI/AAAAAAAABqM/AO7ON2do3ho/s128/www.saamgeadaviya.blogspot%20%286%29.png" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" 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="http://lh4.ggpht.com/_RduEq9ylLDc/TKney1z3xDI/AAAAAAAABqY/XMm4NoXyVUo/s128/www.saamgeadaviya.blogspot%20%289%29.png" 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 ID" target="_blank" rel="nofollow"><img src="http://lh4.ggpht.com/_RduEq9ylLDc/TKneyysD19I/AAAAAAAABqU/yRNFfYq1gxw/s128/www.saamgeadaviya.blogspot%20%288%29.png" 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="http://lh3.ggpht.com/_RduEq9ylLDc/TKnepl0j6uI/AAAAAAAABqE/IE014QDgbW8/s128/www.saamgeadaviya.blogspot%20%284%29.png" 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://saamgeadaviya.blogspot.com/" 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='http://lh4.ggpht.com/_RduEq9ylLDc/TKneyysD19I/AAAAAAAABqU/yRNFfYq1gxw/s128/www.saamgeadaviya.blogspot%20%288%29.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='http://lh5.ggpht.com/_RduEq9ylLDc/TKnepg-tICI/AAAAAAAABp8/UIkIPJ0WkOA/s128/www.saamgeadaviya.blogspot%20%282%29.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://lh3.ggpht.com/_RduEq9ylLDc/TKnepl0j6uI/AAAAAAAABqE/IE014QDgbW8/s128/www.saamgeadaviya.blogspot%20%284%29.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='http://lh4.ggpht.com/_RduEq9ylLDc/TKnephgwqmI/AAAAAAAABqA/aKoYGSPLoQA/s128/www.saamgeadaviya.blogspot%20%283%29.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='http://lh4.ggpht.com/_RduEq9ylLDc/TKneytKQkvI/AAAAAAAABqQ/1BReYt8edbg/www.saamgeadaviya.blogspot%20%287%29.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='http://lh4.ggpht.com/_RduEq9ylLDc/TKnep8lDgbI/AAAAAAAABqI/nRTCZ_LBNTM/s128/www.saamgeadaviya.blogspot%20%285%29.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='http://lh3.ggpht.com/_RduEq9ylLDc/TKnepaeApsI/AAAAAAAABp4/PhmFfS5P-1Q/www.saamgeadaviya.blogspot%20%281%29.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

இப்போது Template ஐ save செய்துகொள்ளுங்கள்.

---

முக்கியமாக: FEEDBURNER-ID எனுமிடத்தில் உங்கள் FEEDBURNER-ID ஐ கொடுங்கள் TWITTER ID எனுமிடத்தில் உங்கள்  TWITTER ID ஐ கொடுங்கள் FACEBOOK-USERNAME எனுமிடத்தில் உங்கள்  FACEBOOK-USERNAME ஐ கொடுங்கள்