iTechno Planet: Images

Showing posts with label Images. Show all posts

August 13, 2011

How To Add Back to Top Button for Blogger

How To Add Back to Top Button for Blogger

1.Login to your blogger dashboard and go to Desing --& 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.

<!--Back to top Start bloggertricksandtoolz.com--><a alt="Back to Top" style="display:scroll;position:fixed;bottom:25px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzMK4JJknB4zvTGxG2RTW8yiMX-gxnJEjz8-4-HcKsjpxBEXE3CPZCwckKSOnq-6JHy_rGJbVlUkrzSO6DYVSMrinQ4uhGF3CI5W9RHSeqUIBPWFNInt5UgGOeU15r-GTdL5zl8_Vefw/&#39;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_UjadZlSmtKYiCTb3pgPK3G9utkR9lM28CIEtfI_kL2ae8nqtp01s59ML8RSIDesw08KMPuU1OgosoOLUVh1cn3Npz0cLCbiAs4vZaiuhyY1gZ6j6Y-gsHgmFZ39QLFUzA6oaOO_G4Bs/s1600/B2T_Small.jpg" onmouseout="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDhyphenhyphenLsXQ81r-D99kT-dMyI8_iItETfYxLoM0_xe8MSPqbyoX46CUZ5xS7Ji9Rbs81ei2TbW_pnKB89p5g6G3b1JewmLYX1fgk9qIkIs8fWGTEJI-wIOUyRwHrSFGmBoI8fI96N6DcTrRQ/&#39;" /></a><!--BACK2TOP-IMAGE-STOPS--> 
<!--Back to top End bloggertricksandtoolz.com-->

Note: Change Back to Top Button name as you like

4.Now You are done.

Cheers

How To Create Float Image for your Blog

Hi dear visitor here is the cool hack for blogger. today We will make a float image that can be located in our blog. You can use it for advertising, Image, RSS, Link or else. Blogger who want to make space for advertise for her/him blog just follow this simple steps,and please share this post with your friends. thank you!

1.log in to your dashboard--> Design- -> Edit HTML

2.Click on "Expand Widget Template

3.Scroll down to where you see this

]]></b:skin>

4.Then put the below code above it

#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

Note: "bottom", "left" are its position.you can change it with "top", "bottom", "left", "right"

5.Now put the below code before </body> tag.

<div id="float_corner">
<a href="http://2009bloggertemplates.blogspot.com"><img src="http://i626.photobucket.com/albums/tt346/wam8387/sun.jpg" border="0" /></a>
</div>

Save Template and preview your blog.

How To Add Icons on Every Blogger Widget of Blogger

Hey guys! here is cool trick for your blog. it's very cool. you see my gadget names. you see i'm add a pic to gadget name..so this post gonna show you how to add icons to blogger widget name. this is cool trick, you can abstract your visitors free. please share this post with your friend..thank you.

now guys follow the simple steps below to do it:

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

.main .Blog {
border-bottom-width: 0;
}

4.After the above code , copy and paste the code below

sidebar .widget h2 {
background: yellow url('URL OF YOUR IMAGE') no-repeat left top;
margin-top:5px;
text-indent: 20px;
padding:7px;
}

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

Note : You must replace URL OF YOUR IMAGE with your image(Icon) URL.

You can change background colour and other values of above codes if you like.

Picture From" http://www.miraztutorials.com/50-free-hand-picked-icons-you-may-not-know-about/

How To Create SnapShots for blogger

hi! everyone. how day? Today i'm give you another cool gadget for your blog. This tutorial i'm gonna show you how to add blogger snapshot to blogger. This gadget works similer infolinks links ad. This dadget start over the mouse from links. So i hope you really like this new snapshot gadget! Please add your comments, Opinion and Anything here..Congrats for you! Niceday!

Follow the simple steps below to do it:

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

2.Scroll down to where you see this </body> tag

3.Now copy below code and paste it before above code

<script language="javascript" src="http://thumbnails.iwebtool.com/src.js?border=004891" type="text/javascript"></script>

Note: red code is a HEX color code.You can change it if you like.

4.Now save your template, You are done.

Credits : http://thumbnails.iwebtool.com/
Picture From : http://thumbnails.iwebtool.com/

Simple Mouseover Effect Code For Images

Simple Mouseover Effect Code For Images

Code

<img alt="Image01" onmouseout="this.src='image 1'" onmouseover="this.src='image 2'" src="Image 2" />

Note: Replace image 1, Image 2 with your image url.

Look at the example below:

<img alt="Image01" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4sBVKuAL6jcqCIUiaga4fRllf2UWKUQlTrLn_MRXl1Y0fek33EddDPcMUHemmrX2HjCiNOEsA0CHbqg2iz_6O_MxLLBhRpaV8417f2SZGfI5kbsu-INPvje-PeqcOFd4NcLr0tqrbcoc/'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpuSKIWzJ69oQNDbPWh1GuF10TtaCWUVvwemEYFHyGBJB5UqMzFmDfGcsWSxR9TXjKBSjvr_rmdpWby2UTwdvhcqLlxwjHyECJweylE_4VPjMZrctimy1PF5OFTlPwGA7hBdxjLXXQ9s/'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4sBVKuAL6jcqCIUiaga4fRllf2UWKUQlTrLn_MRXl1Y0fek33EddDPcMUHemmrX2HjCiNOEsA0CHbqg2iz_6O_MxLLBhRpaV8417f2SZGfI5kbsu-INPvje-PeqcOFd4NcLr0tqrbcoc/" />

Result:

Simple Mouseover Effect Code For Images

Code

<img alt="Image01" onmouseout="this.src='image 1'" onmouseover="this.src='image 2'" src="Image 2" />

Note: Replace image 1, Image 2 with your image url.

Look at the example below:

<img alt="Image01" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4sBVKuAL6jcqCIUiaga4fRllf2UWKUQlTrLn_MRXl1Y0fek33EddDPcMUHemmrX2HjCiNOEsA0CHbqg2iz_6O_MxLLBhRpaV8417f2SZGfI5kbsu-INPvje-PeqcOFd4NcLr0tqrbcoc/'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpuSKIWzJ69oQNDbPWh1GuF10TtaCWUVvwemEYFHyGBJB5UqMzFmDfGcsWSxR9TXjKBSjvr_rmdpWby2UTwdvhcqLlxwjHyECJweylE_4VPjMZrctimy1PF5OFTlPwGA7hBdxjLXXQ9s/'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4sBVKuAL6jcqCIUiaga4fRllf2UWKUQlTrLn_MRXl1Y0fek33EddDPcMUHemmrX2HjCiNOEsA0CHbqg2iz_6O_MxLLBhRpaV8417f2SZGfI5kbsu-INPvje-PeqcOFd4NcLr0tqrbcoc/" />

Result:

How To Disable Right Click on Images

This is new version right clicking disabled.so right clicking is disabled only when attempting to save an image on the page. Great if you wish your visitors to be able to access the default right menu in general cases.i hope you like this..enjoy

How To Disable Right Click on Images

1.Login to your blogger Dashboard and go to Desing --> Page Elements.

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

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

<script language="JavaScript1.2">

var clickmessage="Right click disabled on images!"

function disableclick(e) {
if (document.all) {
if (event.button==2||event.button==3) {
if (event.srcElement.tagName=="IMG"){
alert(clickmessage);
return false;
}
}
}
else if (document.layers) {
if (e.which == 3) {
alert(clickmessage);
return false;
}
}
else if (document.getElementById){
if (e.which==3&&e.target.tagName=="IMG"){
alert(clickmessage)
return false
}
}
}

function associateimages(){
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown=disableclick;
}

if (document.all)
document.onmousedown=disableclick
else if (document.getElementById)
document.onmouseup=disableclick
else if (document.layers)
associateimages()
</script>

4.Now Save "Html java Script" your are done.

How To Add a Cool Fade Effect to Images on Your Blog

This effect you will see a fade effect when you move your mouse over an image.This is cool jquery effect..

how To Add a Cool Fade Effect to Images on Your Blog

1. Login to your blogger Dashboard--> Design- -> Edit HTML

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

3. 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(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

4.Click on Save template You are done.

Cheers..!

How To Add Cool Jquery Image Slide Show to Blogger

How To Add Cool Jquery Image Slide Show to Blogger

1.Login to your blogger Dashboard and go to Desing --> Page Elements.

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
   $('#MBT-slider').s3Slider({ 
      timeOut: 3000 
   }); 
}); 
</script>
<style>
#MBT-slider { 
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */ 
   height: 335px; 
   position: relative; 
   overflow: hidden; 
   margin-left: 0; 
}
#MBT-sliderContent { 
   width: 590px; 
   position: absolute; 
   top: 0; 
   margin-left: 0; 
}
.MBT-sliderImage { 
   float: left; 
   position: relative; 
   display: none;  top: 0; 
   border:1px solid #ddd;
}
.MBT-sliderImage span { 
position: absolute; 
    font: 10px/15px sans-serif,Arial, Helvetica; 
    padding: 10px 10px; 
    background-color: #000; 
    color: #fff; 
    filter:'alpha(opacity=70)'; 
    -moz-opacity: .5; 
    -khtml-opacity: .5; 
    opacity: .5; 
    text-align:justify; 
}
.MBT-sliderImage span a {
text-decoration:underline; 
color:#FE6602; 
}
.clear { 
   clear: both; 
}
.top { 
    top: 0; 
    left: 0; 
    width: 570px !important; 
    height: 70px; 
} 
.bottom { 
    bottom: 0; 
    left: 0; 
    width: 570px !important; 
    height:90px; 
} 
.left { 
    left: 0; 
    top: 0; 
    width: 110px !important; 
    height: 335px; 
} 
.right { 
    right: 0; 
    bottom: 0; 
    width: 80px !important; 
    height: 319px; 
}
</style> 

<div id="MBT-slider"> 
<ul id="MBT-sliderContent">
<li class="MBT-sliderImage"> 
<img src="Slide-X-Image-Address" /> 
<span class="right"><h3>Title-of-pic-X</h3>Slide X Description [...] </span> 
</li>
<li class="MBT-sliderImage"> 
<img src="Slide-X-Image-Address 2" /> 
<span class="left"><h3>Title-of-pic-X 2</h3>Slide X Description [...] </span> 
</li>

<li class="MBT-sliderImage"> 
<img src="Slide-X-Image-Address 3" /> 
<span class="top"><h3>Title-of-pic-X 3</h3>Slide X Description [...] </span>
</li> 
<li class="MBT-sliderImage"> 
<img src="Slide-X-Image-Address 4" /> 
<span class="bottom"><h3>Title-of-pic-X 4</h3>Slide X Description [...] </span> 
</li>

<li class="MBT-sliderImage"> 
<img src="Slide-X-Image-Address 5" /> 
<span class="bottom"><h3>Title-of-pic-X 5</h3>Slide X Description [...] </span>
</li> 
<div class="clear MBT-sliderImage"></div> 
</ul> 
</div>
<br/>

Note: Replace Title-of-pic-X , Slide X Description [...] , Slide-X-Image-Address with your content.

Example:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() {
   $('#s3slider').s3Slider({
      timeOut: 3000
   });
}); 
</script> 
 
 
 
<style> 
 
 
#s3slider {
   width: 590px; /* Keep it 20px greater than Image size */
   height: 335px; 
   position: relative; 
   overflow: hidden; 
   margin-left: 0; 
  
}
 
#s3sliderContent {
   width: 590px; 
   position: absolute; 
   top: 0; 
   margin-left: 0; 
}
 
.s3sliderImage {
   float: left; 
   position: relative; 
   display: none;  top: 0; 
   border:1px solid #ddd;
 
}
 
.s3sliderImage span {
position: absolute;
 font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
 filter:'alpha(opacity=70)';
 -moz-opacity: .5;
 -khtml-opacity: .5;
 opacity: .5;
       text-align:justify;
}
 
.s3sliderImage span a {
 
text-decoration:underline;
color:#FE6602;
}
 
.clear {
   clear: both;
} 
 
 
.top {
 top: 0;
 left: 0;
        width: 570px !important;
 height: 70px;
}
.bottom {
 bottom: 0;
        left: 0;
        width: 570px !important;
 height:90px;
}
.left {
    left: 0;
 top: 0;
 width: 110px !important;
 height: 335px;
}
.right {
 right: 0;
 bottom: 0;
 width: 80px !important;
 height: 319px;
        
}
 
 
 
 
 
</style> 
<center> 
 <div id="s3slider"> 
<ul id="s3sliderContent"> 
 
<li class="s3sliderImage"> 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1soU5dlKqwMEYEY4qa7M6Pb72c3oLCsfHEOr-Avn9d5r9WErmMSKEbeo1vu-Yq1-dsNs7_n37hFHQqQ1U0IoMOQ1XGhb8W4WT3sU5Oi5P4n1cts062BzHJAtF9w_MSWGABUKFULP0gq52/s800/TimonFinger.jpg" /> 
<span class="left"><h3>From Left</h3>You can add Description here. To know How to create this slideshow<br/><a href="http://www.mybloggertricks.com/2010/12/how-to-create-stunning-slideshows-in.html">Click Here</a></span> 
</li> 
 
<li class="s3sliderImage"> 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5weEsW1rhZVPaHxLtXY60_gxrWp7gjJQcQBQIJUXRgKEGhJ9oaLJlC_SQbxzKBb14z-OC11itNFnrGczfV0PJfFi6ySO115LgJsYIjzpGl8MYMfXlFKs_QVXlcav0dTEZFUUhEvfnExgo/s800/MtLionKing.jpg" /> 
<span class="right"><h3>From Right</h3>You can add Description here. To know How to create this slideshow<br/><a href="http://www.mybloggertricks.com/2010/12/how-to-create-stunning-slideshows-in.html">Click Here</a></span> 
</li> 
                        <li class="s3sliderImage"> 
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTjx8Eh_0PjFi9lcfNC7MYpOxwD5aVHnCl89a1d7thyphenhyphenWCQf87NJYK-c1NfoW4MTIwRdTwZyDV4qnoD4M4m7DiQx4f_mTZPGP6n_Qw7u-hXnYo1BdCbBVG_fZmctRsJjPvXWd2YpSsEP9JP/s800/The-Lion-King-Montage.jpg" /> 
                            <span class="top"><h3>From Top</h3>You can add Description here. To know How to create this slideshow<br/><a href="http://www.mybloggertricks.com/2010/12/how-to-create-stunning-slideshows-in.html">Click Here</a></span> 
 
                        </li> 
                        <li class="s3sliderImage"> 
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZrEQveVpnQKWlirsqUh9HewEwZzJn9XcDrymkpOnsE_ZRJYByELrtB941S6W7aqp-t-EHoRfVsC1qmBo57KbYr1ynN55ISC70dcgltzirNmhh1kL6EK29sqJEqaL_oIl87USlJSDtijDY/s800/Timon.jpg" /> 
                            <span class="bottom"><h3>From Bottom</h3>You can add Description here. To know How to create this slideshow<br/><a href="http://www.mybloggertricks.com/2010/12/how-to-create-stunning-slideshows-in.html">Click Here</a></span> 
                        </li> 
                        <li class="s3sliderImage"> 
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOyMvy01nDAdGkpbZzTKYnylJBqkkzViDagdOocbxf888-LJXbkblbSbQauH0mazx2fOKbFL1qrWJVEluoqpY72ICE_mDssDNr_eXS5pWM3PcTPjPdkkwJSwYz5i6VWrJ8BUkqAvIAzc57/s800/up_m.jpg" /> 
                            <span class="bottom"><h3>Woohoo Kewl na? =p</h3>Create One like 1... 2... 3...! :D <a href="http://www.mybloggertricks.com/2010/12/how-to-create-stunning-slideshows-in.html">Click Here</a></span> 
 
                        </li> 
                        <div class="clear s3sliderImage"></div> 
                    </ul> 
                </div>
<br/>

4.Now Save "Html java Script" your are done

How To Create Expandable Post Summaries

How To Create Expandable Post Summaries

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

2.Click on "Expand Widget Templates"

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

4.Copy and Paste below code immediately before </head> tag.

<script language='javascript' src='http://pwam.googlecode.com/files/jquery-1.2.3.pack.js' type='text/javascript'/>

<script language='javascript' src='http://pwam.googlecode.com/files/jquery.expander.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {

$(&#39;.excerpt&#39;).expander({
slicePoint: 280, // default is 100
expandText: &#39;[...]&#39;, // default is &#39;read more...&#39;
});

});
</script>

5.Again, Scroll down to where you see this.

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

6.Replace above code with the following code.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

7.Click on "Save Templates" You are done.

How To Add Opacity Effects to Your Blog Images

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this </head> Tag

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

<style type='text/css'>
a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

5.Click on Save Your Template.

6.Now go blogger dashboard and go to Desing --& Page Elements.

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

8.Select 'HTML/Javascript' and add the one of code given below

<a class="opacity" href="http://btricks-tools.blogspot.com/"><img src="Add Image URL Here" /></a>

Note: Replace Add Image URL Here with your image url.

Now Save your HTMLJava Script you are done.

Cheers.

How To Add a Border To Images in Blogger

How To Add a Border To Images in Blogger

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

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

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

img {
border: 15px solid #000;
background: #000;
filter:alpha(opacity=60);
opacity:0.6;
padding: 1px;
}

Now click on Save Template.

You are Done.

How To Fix PNG Transparency Problem in Internet Explorer

How To Fix PNG Transparency Problem in Internet Explorer

1.Login to your Blogger dashboard --> Design --> Edit HTML.

2.Scroll down to where you see the </head> tag of your template.

3.Now copy below code and paste it just before the </head> tag.

<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
      for(var i=0; i<document.images.length; i++)
      {
         var img = document.images[i]
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText 
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src='" + img.src + "', sizingMethod='scale');"></span>" 
            img.outerHTML = strNewHTML
            i = i-1
         }
      }
   }    
}
window.attachEvent("onload", correctPNG);
</script>

4.Now Click "Save Template" and you are done.

August 12, 2011

How To open Image Link in New Window

How To open Image Link in New Window

1.Login to your blogger Dashboard and go to Desing --> Page Elements.

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

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

<a href="Your Web Site Url" target="_blank"><img src="Your Image Url" alt="Your Text" title="Your Title" width="110" height="55" border="0"/></a>

Note: Replace "Your Web Site Url"-"Your Image Url"-"Your Text""Your Title" "width="110" height="55" - border="0" with your content..

Example:

<a href="http://btricks-tools.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHtbFxFMYHVMBNirjTNKE_DBtx1XHkitJCnK0YS6UME_PNYM7f3FGQojzX_C08gJT5CQGo2YMKU_cVIUg2DH-iNmnCY-ny-yKveS96XUZmw-hDXVKRLa8DA_m4YUQzXCQ2LbZM-6kyFV4/" alt="Tips n Tricks" title="Tips n Tricks" width="125" height="125" border="0"/></a>

Result:

4.Now Save your " Html Javascript " you are done.

Cheers.!

How To Add Icon Image Before Blogger Post Title

How To Add Icon Image Before Blogger Post Title

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

4.Now copy below code

<img src="YOUR-IMAGE-URL" style="border-width: 0px;" />

Note : Remember to replace YOUR-IMAGE-URL with your real image url.

5.Now paste it between <a expr:href='data:post.url'> and <data:post.title/>.

6.Now save your template and you are done.

Cheers.!

How to Add New Year Banner Widget for Your Blog

How to Add New Year Banner Widget for Your Blog

1.Login to your blogger dashboard and go to Desing --& 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.

<div id="sspeakerbanner">
<img src="http://1.bp.blogspot.com/_u4rBCfM4eII/TSV97bTYqFI/AAAAAAAAA9c/5yapSE2_EtU/s1600/rthnybanner.png" />
</div><style>
#sspeakerbanner{
position:absolute;
right:0px;
top:0px;
}
</style>

Now you are Done..

How To Add Reflection Effect to Your Blogger Images

How To Add Reflection Effect to Your Blogger Images

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

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

3.Copy below code and paste it just After ]]></b:skin> tag

<script src='http://bloggertrickandtoolz.googlecode.com/files/reflection.js' type='text/javascript'/>

4.Click on Save Template

Note: Now Add below code Your Blogger Post and Replace your image URL.

<img src="Your Image URL HERE" class="reflect"/>

Now Refresh your blog and you are done..

Cheers..!