New Blog Online: August 2009

Home » Archives for August 2009

Download Underground Blogger Template

Template name : Underground Blogger Template

Type : New Blogger Template (XML),Top Navigation Bar,Search Box,2 Column, 1 Sidebar, Left Sidebar

Demo|Download

Instant Related Post Widget For Blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<data:post.body/>

4.Now Copy below code and paste it just after above code.

<!--Related Post javascripts start from here-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Posts :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>
<!--Related Post javascripts End here-->

5.Click on "Save Templates" and now you are done.

Download Grey Press Blogger Template

Template name : Grey Press Blogger Template

Type : 3 Column, 2 Sidebar, Right Sidebar, Search Box, feed Button

Demo|Download

Download Blogy Glass Blogger Template

Template name : Blogy Glass Blogger Template

Type : New Blogger Template (XML),2 Column, 1 Sidebar, Right Sidebar, Top Navigation Bar,About me section,beautiful header

Demo|Download

How To Add "Share On Twitter" Button to Wordpress

It is very simple.Copy below code and paste it on your single.php file, within the loop:

<a href="http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a>

Now you are done.It will look this:

How To Create Motion Tween: Flash Tutorials

This flash tutorial explains to you how to create motion tween in flash.Follow the steps below to create motion tween in flash.

Open a new flash file (Ctrl+N).

Select General panel and choose Type: Flash Document . Press OK.

If your timeline window is not open, press (Ctrl+Alt+T).

Now you can see a single Layer called "Layer1" in your timeline Window.

Select the first frame.Create a simple oval using Oval tool.

Now, select the arrow tool and select the oval.

Choose Convert to Symbol from the menu(or press F8). When the pop up appears name the shape shape 1, select "type:" Graphic and choose centered orientation
from Registration.

Note: You can create motion tween only on symbols.

Now your oval symbol is in frame1 of Layer1. Select frame 40 and press F6 to insert a new keyframe.

Now move your Symbol to any other position other than the present one.

Select any frame between, 2 to 39 and select Motion from the tween pop-up menu in the Property inspector.

Now your Layer will look something like the one shown below.

Now press (Ctrl+Enter) to view your motion tween.

Download Natural Health Blogger Template

Template name : Natural Health

Type : New Blogger Template (XML),3 Column,Navigation Bar,Search Box,Beautiful Header

Demo|Download

Template Installation

1.First Sign In to Blogger

2.Go to LAYOUT -- Edit HTML

3.If You need to back up your old templates, please do the back up first.

4.Upload The XML Files.

5.Click the Upload button.

6.Save your template.

How To Add Slide Show to Blogger Using Mootools

In this tutorial I am going to explain, how to create a simple slideshow using Mootools.If you like to add this slideshow to your website or blogger blog then follow the steps given below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Don't Click on "Expand Widget Templates"

3.Scroll down to where you see ]]></b:skin> tag:

4.Copy below code and paste it just before the ]]></b:skin> tag.

/* slideshow */
.sample{padding:20px 10px; margin:4px 0 25px 0; border:1px solid #e1e1e1}
#box2{
position:absolute;
}
#box2 span{
display:block;
float:left;
}
.buttons{text-align:center;padding:5px;}
.buttons span{color:#0080FF;padding:0 5px;cursor:pointer;font:10px Verdana}
.buttons span.active, .buttons span:hover{background:#0080FF;color:#fff}

.mask2{
position:relative;
width:240px;
height:180px;
overflow:hidden;
}

5.Scroll down to where you see </head> tag:

6.Copy below code and paste it just before the </head> tag.

<!-- mootools -->
<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/>

<!-- Slideshow -->
<script type='text/javascript'>
//<![CDATA[
var noobSlide=new Class({initialize:function(a){this.items=a.items;this.mode=a.mode||'horizontal';this.modes={horizontal:['left','width'],vertical:['top','height']};this.size=a.size||240;this.box=a.box.setStyle(this.modes[this.mode][1],(this.size*this.items.length)+'px');this.button_event=a.button_event||'click';this.handle_event=a.handle_event||'click';this.onWalk=a.onWalk||null;this.currentIndex=null;this.previousIndex=null;this.nextIndex=null;this.interval=a.interval||5000;this.autoPlay=a.autoPlay||false;this._play=null;this.handles=a.handles||null;if(this.handles){this.addHandleButtons(this.handles)}this.buttons={previous:[],next:[],play:[],playback:[],stop:[]};if(a.addButtons){for(var b in a.addButtons){this.addActionButtons(b,$type(a.addButtons[b])=='array'?a.addButtons[b]:[a.addButtons[b]])}}this.fx=new Fx.Tween(this.box,$extend((a.fxOptions||{duration:500,wait:false}),{property:this.modes[this.mode][0]}));this.walk((a.startItem||0),true,true)},addHandleButtons:function(a){for(var i=0;i<a.length;i++){a[i].addEvent(this.handle_event,this.walk.bind(this,[i,true]))}},addActionButtons:function(a,b){for(var i=0;i<b.length;i++){switch(a){case'previous':b[i].addEvent(this.button_event,this.previous.bind(this,[true]));break;case'next':b[i].addEvent(this.button_event,this.next.bind(this,[true]));break;case'play':b[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'next',false]));break;case'playback':b[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'previous',false]));break;case'stop':b[i].addEvent(this.button_event,this.stop.bind(this));break}this.buttons[a].push(b[i])}},previous:function(a){this.walk((this.currentIndex>0?this.currentIndex-1:this.items.length-1),a)},next:function(a){this.walk((this.currentIndex<this.items.length-1?this.currentIndex+1:0),a)},play:function(a,b,c){this.stop();if(!c){this[b](false)}this._play=this[b].periodical(a,this,[false])},stop:function(){$clear(this._play)},walk:function(a,b,c){if(a!=this.currentIndex){this.currentIndex=a;this.previousIndex=this.currentIndex+(this.currentIndex>0?-1:this.items.length-1);this.nextIndex=this.currentIndex+(this.currentIndex<this.items.length-1?1:1-this.items.length);if(b){this.stop()}if(c){this.fx.cancel().set((this.size*-this.currentIndex)+'px')}else{this.fx.start(this.size*-this.currentIndex)}if(b&&this.autoPlay){this.play(this.interval,'next',true)}if(this.onWalk){this.onWalk((this.items[this.currentIndex]||null),(this.handles&&this.handles[this.currentIndex]?this.handles[this.currentIndex]:null))}}}});

//]]>
</script>
<script type='text/javascript'>
window.addEvent(&#39;domready&#39;,function(){


//SAMPLE 2 (transition: Bounce.easeOut)
var nS2 = new noobSlide({
box: $(&#39;box2&#39;),
items: [0,1,2,3,4,5,6.7],
interval: 3000,
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut,
wait: false
},
addButtons: {
previous: $(&#39;prev1&#39;),
next: $(&#39;next1&#39;)
}
});


});
</script>

7.Now Click on "Save Templates"

8.Now go to Layout-->page elements and Click on 'Add a Gadget'.

9.Now Select 'HTML/Javascript' and add the code given below and click save.

<h2>SlideShow</h2>
<div class="sample">
<div class="mask2">
<div id="box2">
<span><img alt="Photo" src="YOUR-IMAGE-ADDRESS"/></span>
<span><img alt="Photo" src="YOUR-IMAGE-ADDRESS"/></span>
<span><img alt="Photo" src="YOUR-IMAGE-ADDRESS"/></span>
<span><img alt="Photo" src="YOUR-IMAGE-ADDRESS"/></span>
<span><img alt="Photo" src="YOUR-IMAGE-ADDRESS"/></span>
<span><img alt="Photo" src="YOUR-IMAGE-ADDRESS"/></span>
<span><img alt="Photo" src="YOUR-IMAGE-ADDRESS"/></span>
<span><img alt="Photo" src="YOUR-IMAGE-ADDRESS"/></span>
</div>
</div>
<p class="buttons">
<span id="prev1">&lt;&lt; Previous</span>
<span id="next1">Next &gt;&gt;</span>
</p>
</div>

Note : Replace 'YOUR-IMAGE-ADDRESS' with your images addresses.

It will look like this :

View Demo

How To Add Beautiful Page Peel Effect with jQuery

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Don't Click on "Expand Widget Templates"

3.Scroll down to where you see ]]></b:skin> tag:

4.Copy below code and paste it just before the ]]></b:skin> tag.

#pageflip {
position: relative;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
z-index: 50;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2nYUXZbMatVlDFVEN-oCEFWNVL8gKMuGF8YLgPwisZhVKIyFtxxqYpiN6XqGya9CmU546JqThqt3v-READzZUMOM_kPk8_NUQqR20YqFfSRA_7ntYPgFbg9Vsh8ZUbJrTdvNNafoLxURe/) no-repeat right top;
text-indent: -9999px;
}

Note : Please host 'subscribe.png' image yourself.

5.Scroll down to where you see </head> tag:

6.Copy below code and paste it just before the </head> tag.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Page Flip on hover

$(&quot;#pageflip&quot;).hover(function() {
 $(&quot;#pageflip img , .msg_block&quot;).stop()
  .animate({
   width: &#39;307px&#39;,
   height: &#39;319px&#39;
  }, 500);
 } , function() {
 $(&quot;#pageflip img&quot;).stop()
  .animate({
   width: &#39;50px&#39;,
   height: &#39;52px&#39;
  }, 220);
 $(&quot;.msg_block&quot;).stop()
  .animate({
   width: &#39;50px&#39;,
   height: &#39;50px&#39;
  }, 200);
});


});
</script>

6.Scroll down to where you see <body> tag:

7.Copy below code and paste it just after the <body> tag.

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/blogspot/WyNa'>
 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxjNruxpdFsi9Y5RtkWUQg4pXdzWFh4DRey-NsWNU7QUlIalXduKDCExjmXulq3BnZhtfxzwuixtGzoXGoPGal_hifHRq7rk3tzi5ScrcAw3mhHfyKCyFO5LVV-s-itcod7idEu5lMgKQ/'/>
 <span class='msg_block'>Subscribe via RSS</span>
</a>
</div>

Note : Please host 'page_flip.png' image yourself.

Replace 'http://feeds2.feedburner.com/blogspot/WyNa' with your feed address.

8.Click on "Save Templates" and now you are done.It will look like this :

When your mouse brings towards above icon it willlook like this :

How To Add jQuery Thumbnail Hover/Zoom Effect to blogger images

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyqCASiLbf2rQoMAgXs1xEBsYiBJG737S8kiaalf4D3gzVa-EXCnVD8YurlHG6sh3rZ8WybjBASC2c52U6_JYgyiGHFAkmP0S2asxlq72KPcVPxLPhkJGLd3GbJiMsED72Gm0aIWGnaaad/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Note : Please host 'thumb_bg.png' image yourself.

5.Scroll down to where you see </head> tag:

6.Copy below code and paste it just before the </head> tag.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
 .animate({
  marginTop: &#39;-110px&#39;,
  marginLeft: &#39;-110px&#39;,
  top: &#39;50%&#39;,
  left: &#39;50%&#39;,
  width: &#39;174px&#39;,
  height: &#39;174px&#39;,
  padding: &#39;20px&#39;
 }, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
 .animate({
  marginTop: &#39;0&#39;,
  marginLeft: &#39;0&#39;,
  top: &#39;0&#39;,
  left: &#39;0&#39;,
  width: &#39;100px&#39;,
  height: &#39;100px&#39;,
  padding: &#39;5px&#39;
 }, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

 var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
 $(&quot;#main_view img&quot;).attr({ src: mainImage });
 return false; 
});

});
</script>

7.Now Click on "Save Templates"

8.Now go to Layout-->page elements and Click on 'Add a Gadget'.

9.Now Select 'HTML/Javascript' and add the code given below and click save.

<ul class="thumb">
<li><a href="#"><img src="picture1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture4 Link" alt="" /></a></li>
<li><a href="#"><img src="picture5 Link" alt="" /></a></li>
</ul>

Note : Replace picture1 Link,picture2 Link,picture3 Link,picture4 Link,picture5 Link,..... with your images links.

How To Add jQuery Tooltips Effect To Blogger Links

Tooltips are small boxes that appear when you roll over an icon or Link that contains a brief text message identifying the object.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Don't click on "Expand Widget Templates"

3.Scroll down to where you see ]]></b:skin> tag:

4.Copy below code and paste it just before the ]]></b:skin> tag.

#easyTooltip{
padding:5px 10px;
border:1px solid #EF6D21;
background: #181C18;
color:#E0EFE0;
}

5.Scroll down to where you see </head> tag:

6.Copy below code and paste it just before the </head> tag.

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- begin Tooltips -->
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;a.tooltip&quot;).easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>
<!-- end tooltips -->

7.Now Click on "Save Templates"

8.Now when you add a 'Link' add it as below format.

<a class='tooltip' title='Your Link Title' href="Your URL">Link Name</a>

Look at the example below.

<a class='tooltip' title='Latest blogger tips' href="http://bloggertipandtrick.blogspot.com/">Blogger Tips</a>

It result will look like this :

How To Add jQuery 3D Tab View Widget to blogger

/* pageTabs
*/
.pageTabs {width: 760px; height:150px; margin: 10px auto 0;  font-size:11px;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 5px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
line-height: 2em;
color: #254588;
}
.tab_content img {
float: left;
margin: 10px 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
.tab_content p{
padding-bottom:10px;
}
/*

5.Scroll down to where you see </head> tag:

6.Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){$(&quot;.tab_content&quot;).hide();$(&quot;ul.tabs li:first&quot;).addClass(&quot;active&quot;).show();$(&quot;.tab_content:first&quot;).show();$(&quot;ul.tabs li&quot;).click(function(){$(&quot;ul.tabs li&quot;).removeClass(&quot;active&quot;);$(this).addClass(&quot;active&quot;);$(&quot;.tab_content&quot;).hide();var activeTab=$(this).find(&quot;a&quot;).attr(&quot;href&quot;);$(activeTab).fadeIn(1000)})});
</script>

7.Now Click on "Save Templates"

8.Now go to Layout-->page elements and Click on 'Add a Gadget'.

9.Now Select 'HTML/Javascript' and add the code given below and click save.

<ul class="tabs">
<li><a href="#tab1">TAB1</a></li>
<li><a href="#tab2">TAB2</a></li>
<li><a href="#tab3">TAB3</a></li>
<li><a href="#tab4">TAB4</a></li>
<li><a href="#tab5">TAB5</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
ENTER TAB 1 CONTENT
</div>

<div id="tab2" class="tab_content">
ENTER TAB 2 CONTENT
</div>

<div id="tab3" class="tab_content">
ENTER TAB 3 CONTENT
</div>

<div id="tab4" class="tab_content">
ENTER TAB 4 CONTENT
</div>

<div id="tab5" class="tab_content">
ENTER TAB 5 CONTENT
</div>

</div>

Now you are done.It will look like this :

How To Add 'Share on Facebook' to blogger posts

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<p><data:post.body/></p>

4.Copy below code and paste it immediately after the line <data:post.body/> .

<a expr:href='&quot;http://www.facebook.com/sharer.php?&amp;u=&quot; + data:post.url' target='_blank'>Share on Facebook</a>

5.Click on "Save Templates" and now you are done.

How To Add 'Twit this' Links to blogger posts

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<p><data:post.body/></p>

4.Copy below code and paste it immediately after the line <data:post.body/> .

<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'>Twit this</a>

5.Click on "Save Templates" and now you are done.

How To Add 'del.icio.us' Links to blogger posts

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<p><data:post.body/></p>

4.Copy below code and paste it immediately after the line <data:post.body/> .

<a expr:href='&quot;http://del.icio.us/post?v=4&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Share on Delicious</a>

5.Click on "Save Templates" and now you are done.

How To Add 'Share on Technorati' Links to blogger posts

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<p><data:post.body/></p>

4.Copy below code and paste it immediately after the line <data:post.body/> .

<a expr:href='&quot;http://technorati.com/signup/?f=favorites&amp;Url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Technorati</a>

5.Click on "Save Templates" and now you are done.

How To Add 'Digg it !!!' Links to your blogger posts

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<p><data:post.body/></p>

4.Copy below code and paste it immediately after the line <data:post.body/> .

<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Digg it !!!</a>

5.Click on "Save Templates" and now you are done.

How To Add 'StumbleUpon' Links to blogger posts

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<p><data:post.body/></p>

4.Copy below code and paste it immediately after the line <data:post.body/> .

<a expr:href='&quot;http://www.stumbleupon.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Stumble it !!!</a>

5.Click on "Save Templates" and now you are done.

How To Add 'Reddit' Links to your blogger posts

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<p><data:post.body/></p>

4.Copy below code and paste it immediately after the line <data:post.body/> .

<a expr:href='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Share on Reddit!!!</a>

5.Click on "Save Templates" and now you are done.

How To Create jQuery Content Slider in Blogger

/*
Slideshow style rules.
*/
#contentSlide {
border: 1px solid #000;
background:#212421;
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlTPJpS_axI/AAAAAAAABYA/JS60KVWJ9GQ/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KH99FgI/AAAAAAAABZM/e9gXvHjzltU/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KMpFpxI/AAAAAAAABZQ/a207Rx0XuiU/control_right.jpg) no-repeat 0 0;
}

.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421;
border: 1px solid #999;
}

5.Scroll down to where you see </head> tag:

6.Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=560;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>

7.Now Click on "Save Templates"

8.Now go to Layout-->page elements and Click on 'Add a Gadget'.

9.Now Select 'HTML/Javascript' and add the code given below and click save.

<!-- Slideshow HTML -->
<div id="contentSlide"><div id="slideshow">
<div id="slidesContainer">

<div class="slide">
<h2>Free Domain Name</h2>
<p><a href="http://tinyurl.com/nlqnby"><img alt="Free Domain Name" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij36at09TrSNWo7iunCz2LfaygBQ8BwvQluLmI-d4oX05CYD3l3XE-tAKhCSVgTcDO0hgC0QBpLa-FW8krEQ9x9lqpzUIO7goNvG7PRNkuaiWxpG2gxIFthhEPcfIKrnJRyFZ1AFrjlnc/" height="145"/></a>CO.CC has become the world's #1 choice for free domains by providing innovative, competitively-priced products, delivering the highest quality customer service, and by always appreciating and listening to its customers!</p>
</div>

<div class="slide">
<h2>Free Web Hosting</h2>
<p><a href="http://www.000webhost.com/173265.html"><img alt="Free Web Hosting" width="215" src="http://www.000webhost.com/images/banners/120x120/banner1.gif" height="145"/></a>000webhost.com ($0.00 webhost), is an industry leader in providing top class free web hosting services without advertising! There are no hidden costs, no adverts, and no restrictive terms. Lighting fast speeds, maximum reliability and fanatical user support are just a few of the features you'll receive with our service.</p>
</div>

<div class="slide">
<h2>Make Money on Twitter</h2>
<p><a href="http://revtwt.com/index.php?id=18676"><img alt="Make Money on Twitter" width="215" src="http://revtwt.com/images/TwtAd_referral02.jpg" height="145"/></a>You enjoy tweeting with your friends, but wouldn't it be great to make a little extra cash on the side while you post on Twitter? RevTwt has the solution: we give you links to post on your Twitter account, and you earn money each time someone clicks on your link!</p>
</div>

<div class="slide">
<h2>Monitize Your Blog</h2>
<p><a href="http://www.bidvertiser.com/bdv/bidvertiser/bdv_ref.dbm?Ref_Option=pub&Ref_PID=232687"><img alt="Monitize Your Blog" width="215" src="http://www.bidvertiser.com/BidVertiser/images/Referral/p/ref_125x125_yellow_pbl.gif" height="145"/></a>
Pay per click advertising - online advertising directly on sites of your choice, internet marketing solution for online advertisers.</p>
</div>

<div class="slide">
<h2>Upload And Earn</h2>
<p><a href="http://www.ziddu.com/register.php?referralid=%28y%5DtNG;Z%7EQ%7C"><img alt="Upload And Earn" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM-uqRHsNE3_1Zkt82xkbxwx6lApMIFkeT_Urmn1mNs7WJbAthCSV37ce1efYWDWgdUAuM6RXOFwv-RUvizyWVzbWRGShMdPQV3CdTmAEFvXebhiBeYPtforDCB5i_XqyTo-cRl6iWpe0/" height="145"/></a>Ziddu is a complete Free file hosting system which offers services like Free Web Hosting, Image hosting & Free Web Space. Ziddu users can play,watch,share ...
</p>
</div>

</div>
</div></div>
<!-- Slideshow HTML -->

Note : Remember to replace blue colour code with your content.

Now you are done.It will look like this :

How To Add jQuery Text/Font Size Resizer to blogger

/* resizeFont
*/
#resizeFont{
text-align:right;
margin-right:10px;
}

5.Scroll down to where you see </head> tag:

6.Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- begin ResizeFont -->
<script type='text/javascript'>
$(function(){
$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#content-wrapper&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;large&#39;) {
finalNum *= 1.1;
}
else if (this.id == &#39;small&#39;){
finalNum /=1.1;
}
else if (this.id == &#39;reset&#39;){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

7.Now Click on "Save Templates"

8.Now go to Layout-->page elements and Click on 'Add a Gadget'.

9.Now Select 'HTML/Javascript' and add the code given below and click save.

<div id='resizeFont'>
<input id='large' type='button' value='A+'/>
<input id='reset' type='button' value='A'/>
<input id='small' type='button' value='A-'/>
</div>

Now you are done.

Demo For This Tutorial

How To Add jQuery Slide Show to blogger

/* s3Slider jQuery plugin */
#s3slider {
border:5px solid #000;
width:250px; /* important to be same as image width */
height:190px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
margin: 0px; padding:0px;
width:250px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
text-indent: 0px; /* reset blogger */
font: 10px Arial, Helvetica, sans-serif;
padding: 10px 13px;
margin: 0;
width:225px; /* need edit to be same as image width or wider */
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: block; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

5.Scroll down to where you see </head> tag:

6.Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- begin s3Slider jQuery plugin -->
<script src='http://choenblogspot.googlecode.com/files/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

7.Now Click on "Save Templates"

8.Now go to Layout-->page elements and click on 'add a gadget'.

9.Now select html/java script.Add the code given below and click save.

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://www.000webhost.com/173265.html" target="_blank" rel="nofollow"><img border="0" alt="Free Website Hosting" width="250" src="http://www.000webhost.com/images/banners/120x120/banner1.gif" height="190"/></a>
<span>Free Website Hosting</span>
</li>
<li class="s3sliderImage">
<a href="http://tinyurl.com/nlqnby" target="_blank" rel="nofollow"><img border="0" alt="Free Domain name" width="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij36at09TrSNWo7iunCz2LfaygBQ8BwvQluLmI-d4oX05CYD3l3XE-tAKhCSVgTcDO0hgC0QBpLa-FW8krEQ9x9lqpzUIO7goNvG7PRNkuaiWxpG2gxIFthhEPcfIKrnJRyFZ1AFrjlnc/" height="190"/></a>
<span>Get Free Domain</span>
</li>
<li class="s3sliderImage">
<a href="http://revtwt.com/index.php?id=18676" target="_blank" rel="nofollow"><img width="250" height="190" src="http://revtwt.com/images/TwtAd_referral02.jpg"/></a>
<span>Earn money from twitter</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Note : Remember to replace blue colour code with your content.

Now you are done.

How To Add jQuery Social Bookmarks icons to blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see ]]></b:skin> tag:

4.Copy below code and paste it just before the ]]></b:skin> tag.

/* SosialBookmark
*/

#sharebox{
height:48px;
width:400px;
margin:0;
padding:5px 0;
}

ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;}
ul.sharebox li a { margin:0 0 0 -24px; display:block;}
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}

5.Scroll down to where you see </head> tag:

6.Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
(function($){
$.fn.sharebox = function(){
var element = this;

$(element).find(&quot;li&quot;).each(function(i){
$(this).css(&quot;z-index&quot;, 10- i);
if (i&gt;0)
$(this).css(&quot;left&quot;, i * 24 + 100);
});

}
})(jQuery);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#sharebox&quot;).sharebox();
});
</script>

7.Scroll down to where you see <data:post.body/> .

8.Copy below code and paste it just after the <data:post.body/> .

<ul class='sharebox' id='sharebox'>

<li><img alt='Share this' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmkuLMrwEhI/AAAAAAAABm8/SF6x9UfvEJA/s800/sharethis.png'/></li>

<li><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Digg' src='http://lh5.ggpht.com/_dfnTVAxeWMI/Smktud4qk8I/AAAAAAAABmk/z5vZVjTmD7k/s800/digg_48.png'/></a></li>

<li><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuLCBTubI/AAAAAAAABm4/KwVHDJnT-EQ/s800/sumbleupon_48.png'/></a></li>

<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmktubnHpoI/AAAAAAAABmg/b31Po_kEbnc/s800/delicious_48.png'/></a></li>

<li><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuK1y0_cI/AAAAAAAABm0/C8EExNM-xjE/s800/technorati_48.png'/></a></li>

<li><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='http://lh3.ggpht.com/_dfnTVAxeWMI/Smkturrni-I/AAAAAAAABmw/AbGticB0wAs/s800/reddit_48.png'/></a></li>

</ul>

9.Click on "Save Templates" and now you are done.It will look like this.

How To Create jQuery Draggable Image in blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Don't click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag:

4.Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://jqueryui.com/latest/ui/ui.core.js' type='text/javascript'/>

<script src='http://jqueryui.com/latest/ui/ui.draggable.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.draggable&quot;).draggable();
});
</script>

5.Now Click on "Save Templates"

6.Now go to Layout-->page elements and Click on 'Add a Gadget'.

7.Now Select 'HTML/Javascript' and add the code given below and click save.

<div class='draggable' id='rssicon'>
<a href='http://bloggertipandtrick.blogspot.com/feeds/posts/default'><img alt='rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD7GCFBFBGkDZ_8AUtPcmmgnGMW9qzCtz7_N_27lBXDfF3Z4Btu02UycPvoT0lHDYohWdJlJGRYS72UtR_TqnV3-hDGQ8q2HIvmT_g2mqkJ1sBRCs59B3a91dYmDF9zLH8F9cKkhWssw4/'/></a>
</div>

Note : Remember to replace blue colour code with your content.

Now you are done.refresh your site.Now you can drag your image.

Demo

How To Add Background Sound to Blogger

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see <head> tag.

3.Copy below code and paste it just after <head> tag:

<bgsound src="YOUR-AUDIO-FILE-LINK" loop="-1"/>

Replace "YOUR-AUDIO-FILE-LINK" with your real audio file link.

4.Now save your template and you are done.

Note: This tip works only in internet explorer.

Download Amoeba Blogger Template

Template name : Amoeba

Type : New Blogger Template (XML),4 Columns,Fixed width,Green,Left sidebar,Right sidebar

Author: Themes Cook

How To Add this template to your blog ?

1.After download the Zip File, you must extract it with software extractor such as Winzip software or other software.

2.Now Log in to your dashboard--> layout- -> Edit HTML

3. Click on "choose" and upload your xml file.Confirm and save for the new template.That's it.

Note : Before Upload your new template,Don't forget to backup your old template and your widgets.

Download Here !!! Download Template

How To Add Scrolling Text to Title Bar

1.Login to your blogger dashboard and go to Layout --> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<script language=javascript>
var rev = "fwd";
function titlebar(val)
{
var msg  = "YOUR-TEXT-HERE";
var res = " ";
var speed = 100;
var pos = val;

msg = "   |--- "+msg+" ---|";
var le = msg.length;
if(rev == "fwd"){
 if(pos < le){
 pos = pos+1;
 scroll = msg.substr(0,pos);
 document.title = scroll;
 timer = window.setTimeout("titlebar("+pos+")",speed);
 }
 else{
 rev = "bwd";
 timer = window.setTimeout("titlebar("+pos+")",speed);
 }
}
else{
 if(pos > 0){
 pos = pos-1;
 var ale = le-pos;
 scrol = msg.substr(ale,le);
 document.title = scrol;
 timer = window.setTimeout("titlebar("+pos+")",speed);
 }
 else{
 rev = "fwd";
 timer = window.setTimeout("titlebar("+pos+")",speed);
 }
}
}

titlebar(0);
</script>

Now you are done.

How To Display HTML Elements/Text only on blogger homepage

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Now Add your HTML Code or Text As the Example below.

<b:if cond='data:blog.pageType != "item"'>

ENTER-YOUR- HTML CODE/TEXT-HERE

</b:if>

3.Now save your template and you are done.Your new HTML Elements/Text will only display on homepage.

To Stay Updated With Our Site Subscribe To RSS Feed !!!

How To Add Yahoo Smileys Emotions to your Comments

1.Login to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this :

<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>

4.Now replace above code with below code.

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

5.Now Download Smiley.js ( As a zipped file ) and host Smiley.js yourself using free js hosting service provider like HotLinkFiles.com or 110mb.com.

6.Now Scroll down to where you see </body> tag in your template.

7.Copy below code and paste it just before the </body> tag .

<script src='smiley.js' type='text/javascript'/><noscript><a href="http://bloggertipandtrick.blogspot.com/" target="_blank">Blogger Tips And Tricks</a></noscript>

Note: Replace smiley.js with your direct hosting link of smiley.js .

8.Now save your template and you are done.It will look like this.

How To Add Save to del.icio.us button with Hit counts to blogger

1.Login to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to till you see this :

<div class='post-header-line-1'/>

4.Now add below code just after the line <div class='post-header-line-1'/> .

<div class='save-delicious'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihgpQZ73-ESBNGQXWiZ-xyBihsGHfMwjcZMFSu42CvItK4JnrviiC4EEaIGB_3qZJKJRKXMMjKg69utV0ryi_yvRaQNDiId05ij_7gFzHC3LC4ngy-C0yo5oHVXiUKLgvYzBgAjkARAws/'/>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' style='text-transform:none; border:none; text-decoration:underline' target='_blank'> Save to del.icio.us</a> with other <b id='http://bloggertipandtrick.blogspot.com-delicious'>0</b> happy readers
<script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (!urlinfo.total_posts) return;
document.getElementById(&quot;http://bloggertipandtrick.blogspot.com-delicious&quot;).innerHTML = urlinfo.total_posts;
}
</script>
<script src='http://badges.del.icio.us/feeds/json/url/data?url=http://bloggertipandtrick.blogspot.com&amp;callback=displayURL'/>
</div>

Note : Remember to replace http://bloggertipandtrick.blogspot.com with your blog url.

5.Now find ]]></b:skin> tag in your template.

6.Now add below code just above ]]></b:skin> tag.

.save-delicious{float:right; line-height:25px; border:none; background:url() left no-repeat; padding:0 10px 0 20px; font-size:11px;}

.save-delicious a:link, .save-delicious a:visited{border:none; text-transform:none;}

.save-delicious b{color:#000; font-weight:bold;}

7.Now save your template and you are done.It will look like this.

How to Host your Template Images in Blogger (Unlimited Bandwitdh)..?

This post explains how to host your template or any other images in blogger without any bandwidth limitations:-

If you are a regular reader of Blogger Tricks, you probably know that previously I h

ad many problems hosting my template images. A year back, I used photobucket to host my template images.. but, the problem with photobucket and many other free image hosts is their bandwidth limitations. Once, you exceed a specific amount of bandwidth, your images won't show, instead.. an irritating ' bandwidth exceeded' image shows. Next, after that I tried to create.. like a new photobucket account per each template.. but, that also exceeded in a matter a couple of weeks.

Not only me, my other blogger template designers are also struggling to find a reliable, free image host with unmetered bandwidth.

I tried to upload the images to blogger and copy the image url from the status bar and use it in templates.. but it didn't worked. But, recently I came to know that we can actually host the images( large) in blogger and hotlink,use them in templates, forums,etc.

Here is the trick..

As usual, create a new post in blogger and upload your template images to that post... but don't publish it... keep it as a draft.
Once you completed uploading all the images, Open each image in a new window.

Once, the image is loaded in the new window, what I previously did was to copy the image location from the status bar and paste/hotlink it in templates. But, it didn't worked!

Now, the trick is, many people don't know that the url which we copy from the status bar is not exactly the direct link to that image file... that's why we can't hotlink to that image.

So, what we have to do to hotlink to that image is Right Click on the image and ' Copy Image location'. (for firefox users). For Internet explorer users, Right click on the image and go to Properties and then copy the image url from there.

Example:
For the above picture, status bar shows...


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp2I1cOvOezrFEdtqrtcDlXM5Ftblys2QOKgh4uloxkMlP9i9ilPlecUZBbTbSsW6H_e4_VhyphenhyphenisoXXMyV9sQXk_bQ6hckIYN5nL1biJEiKFXFtaZff9q9DG0-XN3PwAr00247CG2xr1I0c/-h/2008-05-28_124414.jpg

which don't work.

And the Real image url we get after right clicking and copying image location is..


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp2I1cOvOezrFEdtqrtcDlXM5Ftblys2QOKgh4uloxkMlP9i9ilPlecUZBbTbSsW6H_e4_VhyphenhyphenisoXXMyV9sQXk_bQ6hckIYN5nL1biJEiKFXFtaZff9q9DG0-XN3PwAr00247CG2xr1I0c/s1600/2008-05-28_124414.jpg

Which works and we can do whatever we want.. with unlimited bandwidth :D
Hope this trick will be useful to many people who are searching for unlimited bandwidth image hosts.

� Blogger Tricks

How To Move Blogger Blog To Another Email Address

1.Login to Blogger Dashboard.

2.Click on "Settings" on your dashboard

3.Now click "Permissions" tab.

3.Under Blog Authors click on the "ADD AUTHOR" button.

4.Enter the email address of the person you wish to invite or that of your second email account and click on "Invite".

5.Go to your Gmail account and check Blogger email [invitation]. Click link and activate it, you will log in blogger.

6.Now log again with your previous(old) gmail account that you made invitation, go to Blogger Dashboard-->Settings-->permission and click give admin permission.

7.Now your blog can be managed by 2 email account, you can delete one (old) if you want.

Now you are done.

New Blog Online

Blog Archive

Download Underground Blogger Template

Instant Related Post Widget For Blogger

Download Grey Press Blogger Template

Download Blogy Glass Blogger Template

How To Add "Share On Twitter" Button to Wordpress

How To Create Motion Tween: Flash Tutorials

Download Natural Health Blogger Template

How To Add Slide Show to Blogger Using Mootools

How To Add Beautiful Page Peel Effect with jQuery

How To Add jQuery Thumbnail Hover/Zoom Effect to blogger images

How To Add jQuery Tooltips Effect To Blogger Links

How To Add jQuery 3D Tab View Widget to blogger

How To Add 'Share on Facebook' to blogger posts

How To Add 'Twit this' Links to blogger posts

How To Add 'del.icio.us' Links to blogger posts

How To Add 'Share on Technorati' Links to blogger posts

How To Add 'Digg it !!!' Links to your blogger posts

How To Add 'StumbleUpon' Links to blogger posts

How To Add 'Reddit' Links to your blogger posts

How To Create jQuery Content Slider in Blogger

How To Add jQuery Text/Font Size Resizer to blogger

How To Add jQuery Slide Show to blogger

How To Add jQuery Social Bookmarks icons to blogger

How To Create jQuery Draggable Image in blogger

How To Add Background Sound to Blogger

Download Amoeba Blogger Template

How To Add Scrolling Text to Title Bar

How To Display HTML Elements/Text only on blogger homepage

How To Add Yahoo Smileys Emotions to your Comments

How To Add Save to del.icio.us button with Hit counts to blogger

How to Host your Template Images in Blogger (Unlimited Bandwitdh)..?

How To Move Blogger Blog To Another Email Address

Popular Posts