Hi friends ,in this post I am sharing how to use css sprites in blogger.Css sprites are used to decrease website load time by combining multiple images into a single image.Because when you upload multiple each time request is made for each images cause more loading time.But when you are using css sprites the request is one time only for an image.
Copy and paste the below code in blogger post or page.And it is a simple concept I have used just one image and put in a class.Then I have chosen id for different images and just made changes in background-position.If need also use margin to make it perfect.
<style>
.sp {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsFXUXzYmBZgwHZaHPzcRYlFqT4ZsKXwYIQnVdNL-_XzZ-nvplWs1fEGKptvTeAE9IFbqRQuCTqrAF1f9bUp-nNl8WZ0t_wgD3lLuX5olKDITysakPUmVYUBmeErYCGG_pv6TiFfbjacMB/s1600/Untitled-1.png);
background-color: transparent;
background-repeat: no-repeat;
}
#sp1 {
height:102px;
width:197px;
margin-bottom:5px;
margin-left:-110px;
background-position:110px ;
}
#sp2 {
height:104px;
width:94px;
margin-bottom:5px;
background-position:-90px ;
}
#sp3 {
height:104px;
width:96px;
margin-bottom:5px;
background-position:-183px;
}
#sp4 {
height:104px;
width:90px;
margin-bottom:5px;
background-position:-280px;
}</style>
<div><a href="http://google.com/" target= "blank" ><div class="sp" id="sp1"></div></a></div>
<div><a href="http://yahoo.com" target= "blank" ><div class="sp" id="sp2"></div></a></div>
<div><a href="http://facebook.com" target= "blank" ><div class="sp" id="sp3"></div></a></div>
<div><a href="http://bing.com" target= "blank" ><div class="sp" id="sp4"></div></a></div>
In next posts we update more with the css sprites.
Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.
0 comments :
Post a Comment