In Todays world of blogging , social bookmarking has a greater importance for getting traffic ,recognition and attention from other Bloggers .I think you might have seen those bookmarking icons below all posts on my Blogger blog . So if someone likes my article , it would be easy for them to add it to their favorite bookmarking website .

Now I will tell you how you can add Social bookmarking below Blogger posts .

Open up your Blogger templates‘ edit HTML and click on expand widget templates. Now find out this section <p><data:post.body/></p>
of code.After this line Just copy and paste this code .

&lt;p&gt;&lt;span style=&#39;font-weight: bold;font-size:12px;color:#444444;&#39;&gt;If You Liked This Post Do Share it with the World!&lt;/span&gt;&lt;/p&gt;<span class='bookmark'><br/><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' rel='external nofollow' target='_blank'><img alt='Digg' border='0' src='http://img14.imageshack.us/img14/8896/diggku9.png'/></a> <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' rel='external nofollow' target='_blank'><img alt='Technorati' border='0' hspace='12' src='http://img16.imageshack.us/img16/649/stumbleupondh6.png'/></a>

<a expr:href='&quot;http://technorati.com/faves?add=&quot;   data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' border='0' hspace='12' src='http://img17.imageshack.us/img17/8656/technoratils5.png'/></a>

<a expr:href='&quot;http://del.icio.us/post?url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' rel='external nofollow' target='_blank'><img alt='Del.icio.us' border='0' hspace='12' src='http://img9.imageshack.us/img9/9328/deliciousae3.png'/></a>

<a expr:href='&quot;http://reddit.com/submit?url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' rel='external nofollow' target='_blank'><img alt='Del.icio.us' border='0' hspace='12' src='http://img12.imageshack.us/img12/9793/redditsw2.png'/></a>

<a expr:href='&quot;http://twitthis.com/twit?url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' rel='external nofollow' target='_blank'><img alt='Del.icio.us' border='0' hspace='12' src='http://img19.imageshack.us/img19/2369/twitterpg5.png'/></a>

<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot;   data:post.title   &quot;&amp;u=&quot;   data:post.url' rel='external nofollow' target='_blank'><img alt='Del.icio.us' border='0' hspace='12' src='http://img12.imageshack.us/img12/8207/yahoowc3.png'/></a>

<br/></span>

If you have related posts widget in Blogger , it would be better if you can place this code just below that section .

Here I am using Digg , Twitter ,Stumbleupon , Yahoo! bookmark , Technorati and Delicous . Remember to change those social bookmarking links with yours .  Now if you want more social bookmarking sites in your Blogger template, fetch corresponding URLs , get come 24*24 PNG icons and add it just above the last (</span>) line .

My last article was on a method to create beautiful RSS or email subscription forms in Blogger . Now here is method by which you can add an email subscription form ,just below your Blogger posts .Offering Email subscription form below the post would increase your subscription count as it is easily notable .

Another interesting thing about this Blogger widget is that we can add some beautiful text asking users to write comments or whatsoever . Just head over to any of my post pages to see how it works . Now to add an email subscription form under Blogger posts , follow these steps carefully .Open up your Blogger templates’ edit HTML and search for  <p><data:post.body/></p> and paste the following code just after this line .

<div class='hint'>

&lt;div style=&#39;background-color: #EC8F11 ;color: #FFFFFF;&#39;&gt;&lt;b style=&#39;font-family:Verdana,sans-serif;&#39;&gt;&lt;span style=&#39;font-size:small;&#39;&gt;Did you enjoy this article?  subscribe to our ( 1500 subscribers can&#39;t be wrong ) &lt;a href=&#39;http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1771094&#39; style=&#39;color: rgb(243, 243, 243);&#39; target=&#39;_blank&#39;&gt;&lt;u&gt;&lt;blink&gt;RSS Feed&lt;/blink&gt;&lt;/u&gt;&lt;/a&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;

A comment would be really helpful for the Author to keep going and Post Better. &lt;strong&gt;So, Post a Comment to this topic and Share your Views to It. I really appreciate your Comments&lt;br/&gt;&lt;a href=&#39;#comment-form&#39;&gt;&lt;img border=&#39;0&#39; src=&#39;http://technotrixdebajyoti.googlepages.com/usrcomments.png&#39; style=&#39;margin: 0px; vertical-align: middle&#39;/&gt; Add a Reply / Comment&lt;/a&gt;&lt;/strong&gt;

&lt;form action=&#39;http://feeds.feedburner.com/techknowlcom&#39; id=&#39;subscribe&#39; method=&#39;post&#39; onsubmit=&#39;window.open(&#39;http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1771094&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true&#39; style=&#39;border:1px solid #fff;padding:0px;text-align:left;&#39; target=&#39;popupwindow&#39;&gt;&lt;strong&gt;Also, Make Sure you Sign-Up :  &lt;/strong&gt;&lt;input id=&#39;subbox&#39; name=&#39;email&#39; onblur=&#39;if (this.value == &quot;&quot;) {this.value = &quot;Enter your email address...&quot;;}&#39; onfocus=&#39;if (this.value == &quot;Enter your email address...&quot;) {this.value = &quot;&quot;;}&#39; style=&#39;width:170px&#39; type=&#39;text&#39; value=&#39;Enter your email address...&#39;/&gt;

&lt;input name=&#39;url&#39; type=&#39;hidden&#39; value=&#39;http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1771094&#39;/&gt;

&lt;input name=&#39;title&#39; type=&#39;hidden&#39; value=&#39;Subscribe To Feed&#39;/&gt;

&lt;input name=&#39;loc&#39; type=&#39;hidden&#39; value=&#39;en_US&#39;/&gt;

&lt;input id=&#39;subbutton&#39; type=&#39;submit&#39; value=&#39;GO&#39;/&gt;

&lt;/form&gt;&lt;br/&gt;

&lt;span style=&#39;color: rgb(204, 0, 0);&#39;&gt;(Don&#39;t forget to Activate the email subscription from your Inbox)&lt;/span&gt;

&lt;/p&gt;

</div>

Remember to change the feed URL ,texts and email subscription link with yours.  Now style your email subscription form by adding a CSS code just before ]]></b:skin> the style tag in your Blogger template .

.hint

{ border:1px solid #4ab7ff;

color:#191919;

background:#bfe5ff;

display:block;

font:400 11px/125% Verdana ;

width:94%;

margin:3px 0 0;

padding:6px 6px 6px 20px; }

Save your Blogger template and  preview email subscription form below your Blogger posts .

So what about the default Feedburner email subscription form in Blogger ?? It looks ugly right ?? . Now here you could use CSS to to create Beautiful email and RSS subscription form . An example of such a form is given here on my blog .

What you need is just to change the default code with this code .

<a href="http://feeds.feedburner.com/~e?ffid=2358889"><img alt="feedburner" style="border: 0pt none ; margin-top: 15px;" src="http://i44.tinypic.com/o945yf.jpg"/></a><p><strong><span style="color:#ID9EDD;">Subscribe for Email Updates</span></strong></p><form action="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2358889" http://www.feedburner.com/fb/a/emailverifysubmit?feedid="2358889" , popupwindow\ );return true target="popupwindow" id="subscribe" onsubmit="window.open(\" scrollbars="yes,width=550,height=520\" style="border:1px solid #fff;padding:0px;text-align:left;" method="post" \><img style="vertical-align:middle;border:0" src="http://i35.tinypic.com/ifv98i.jpg"/>&#160;<input ;} enter email onfocus="if (this.value == " value="Enter your email address..." address... type="text" id="subbox" onblur="if (this.value == " ) {this.value =  style="width:210px" your name="email"/><input value="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2358889" name="url" type="hidden"/><input value="Subscribe To Feed" name="title" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input id="subbutton" value="GO" type="submit"/></form><center><a href="http://feeds.feedburner.com/techknowl" target="_blank"><img border="0" width="88" src="http://feeds.feedburner.com/%7Efc/techknowl?bg=99CCFF&fg=444444&anim=0" height="26"/></a></center>

Replace the the email subscription URL, feed URL ,  feed count chiklet code with yours .You can find and replace the font color with this tool . Apply some creativity and design a good subscribe by RSS logo and change it with the tinypic image in the code .

Previously , I have written an article to use Yahoo smileys in Blogger posts . Now what you would do if you want to add Yahoo smileys in Comment section ??. Yes you can add Yahoo smileys in Blogger comments in Blogger comments using this simple Blogger trick .

Open your Blogger templates‘ edit HTML section and click on expand widget templates . Now press Cntrl+F and find out the following comment section in Blogger .

<p class='comment-footer'><b:if cond='data:post.embedCommentForm'><b:include data='post' name='comment-form'/><b:else/><b:if cond='data:post.allowComments'><h3><a expr:href='data:post.addCommentUrl'expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></h3></b:if></b:if></p></b:if>

Now replace the entire section with this code .After this there is one more step left to get smileys in Blogger comments .Just copy this JavaScript and paste it right before </body> .

<script src='http://bandofgirls.googlepages.com/smiley.js' type='text/javascript'/><noscript><a href="http://techknowl.com" target="_blank">Blogger Widgets</a></noscript>

Now refresh your comment section . you would see Yahoo smiley icons as shown below .

For adding a Smiley on Blogger comment , use the corresponding code right after each smileys, when you format the text . These smileys will not appear instantly , as there is a JavaScript to be executed and that is kept at the bottom portion of your Blogger template .

Anyone familiar with Revolution WordPress themes would know about the sliding featured content section in the home page . If not , have a look at the following screen shots .

Blog administrator can set random posts as featured content so that the user can access them easily. Apart from the user navigation , it makes the blog looking good with sliding graphics. This feature is still not available in many of the converted Revolution Blogger templates .
The sliding menu uses two JavaScripts which are available at jondesign.net . We have to incorporate these JavaScripts with necessary CSS codes to accomplish sliding featured content in Blogger .

1 .Copy the following JavaScript code just before </head> of your Blogger template . Gallery JavaScripts from  jondesign.net were uploaded to my Google pages account and linked with the script .

<script src="http://coloriteman.googlepages.com/mootoolsv111.js" type="text/javascript"/><script src="http://coloriteman.googlepages.com/jdgallery.js" type="text/javascript"/>

2. Now we have to add a CSS code for formatting the  Sliding Gallery with featured content .
Copy the following code and insert it before </style>(in Blogger ]]></b:skin>) tag of your template .
Download the CSS code .

3 . Next we have to decide the number of posts to be appeared  in the content Gallery , along with the design of sliding Gallery elements(photos) description and targeting links .
A maximum of 5 pics(450px *150px or reasonable) would be enough as otherwise leads to slower page loading .
After preparation  , we have  to build a similar Blogger widget as shown below . It depends on the number of sideshow elements , image URL, targeting URL ,  featured content header text etc . Here in this example , there’s only two featured gallery elements used .

<div id="myGallery">      <div class="imageElement">            <h3>Give your
featured
content header here</h3>

            <p>Give your small
featured
content description</p>            <a href="Targeting URL" class="open" title="Click here to read full story"></a>            <img src="Sideshow picture element uploaded URL" class="full"/>

            <img src="Sideshow picture element uploaded URL" class="thumbnail"/>     </div>     <div class="imageElement">            <h3>
Blogger Templates</h3>            <p>Get
Blogger templates for free here!</p>

            <a href="http://www.techknowl.com" class="open" title="Click here to read full story"></a>            <imgsrc="http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUU8cXExI/AAAAAAAAAcc/W37l9b00JNQ/blogger-templates_thumb%5B2%5D.png?imgmax=800"class="full"/>

            <imgsrc="http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUU8cXExI/AAAAAAAAAcc/W37l9b00JNQ/blogger-templates_thumb%5B2%5D.png?imgmax=800"class="thumbnail"/>     </div>        <script type="text/javascript">function startGallery() {var myGallery = new gallery($('myGallery'), {timed: true});}window.addEvent('domready', startGallery);</script>        </div></div>

The portion starting with <div class=”imageElement”> and ending with </div> is a single slide element .You can extend the number sliding pictures by adding more <div class=”imageElement”>…. </div>  elements . In the first case , I have given the positions where the images , links , descriptions etc. to be added . The second( <div class=”imageElement”> case gives an example . That is , Blogger templates stands and the header and get Blogger templates as description . You have upload your own images and replace the sideshow picture elements . At the end there is JavaScript for gallery call timing, which doesn’t need any change .You can download the above code here and make necessary changes adapting your template .

After successful creation of widget code, From the Layout &gt;select add Gadget &gt;Add HTML or JavaScript and paste the contents .Now drag the widget to the top of your blog post to make it visible over there .

A working example for a gallery with sliding featured content in Blogger is given here( Link removed :updated ) .

Any problem in Installation ?? Ask them in the comment section .

I think you have noticed a blue arrow pointing upward in the extreme right bottom of my blog. It is what i call as a go to top of page link .
If you have lot of posts in a label or achieve page , its essential that you provide an easy navigation to the top portion of the page without making your visitors to scroll a lot .

Here’s how you can do that ,
Open your Blogger template’s layout section and select edit HTML .
Move on to the bottom portion of your template and find out </body> .
Copy and paste the following HTML code above that section .

a href='#' style='display:scroll;position:fixed;bottom:5px;right:1px;' title='move on to top of page'><img src='http://img401.imageshack.us/img401/710/homepa2.gif'/></a>

Now save your template and preview the top of page link . Make necessary changes by editing the HTML code .