How To Use Zocial Icon Fonts In Blogger?

Web-designing techniques is consistently improving from past few years. It's because of the popularity that freelance market has received in past 5-6 years.

Friends you know that 2-3 years back when peoples were scratching the newly launched CSS3, designers were using the old design techniques of using images, sprite images. But now everything has changed alot compared to past. Designers hate to use bitmap image files and prefer to use icon sets created using pure css3.

Why to use icon fonts?
It's a simple question that may strike your mind at the moment. But answer to this is very simple. Icon fonts are nothing but they are the shapes, designed by using pure css. That's why they don't eat much of your loading bytes and download more fast as compared to image files.

So let's start our lesson on how to use icon fonts in blogger sites?

Some Basic Steps

Easy to Use

Using icons fonts is not very tough task it's very simple now, all you need is to link the stylesheet of icon fonts in your blogger template and then start using it.

Let me simplify this more for you

• Open Blogger Template → Html Editor → search <b:skin> on top
• Add below given url just above it. (I've used zocial icon set for e.g.)

<link href:'http://weloveiconfonts.com/api/?family=zocial' rel='stylesheet'/> 

• Now add below code in your stylesheet just before ]]></b:skin> 

[class*="zocial-"]:before { font-family: 'zocial', sans-serif; }

Calling the Icons
After adding the stylesheets of icons, save your template and then you're ready to use icons.
You can call the icons only if you provide correct class name for icon. Like we're using zocial icon set which has complete set of all the social media icons.

So for e.g. we want to use facebook icon then we'll create a element like

<span class='zocial-facebook'></span>
or you can also write it like
<div class='zocial-facebook'></div>
or
<i class='zocial-facebook'></i>

you can use any tag name span, div, i, abbr, a etc. but important thing is the class name as I've mentioned earlier in few paragraphs above. If class name is wrong icon will not appear.

Play & Learn fast

Final Words

Tell me How can I help you? Though this article is lengthy one but I am sure that I've not bored you in this article. I've used all the very details so that every class of leaner either be it pro-developer or be it beginner both can learn it easily.

Do not forget to leave your comments below telling me how much you liked playing and learning in this article.

Below is the list of all zocial icons with their class name just by side of the icon.

List of Zocial Icons Sets

• zocial-acrobat
• zocial-amazon
• zocial-android
• zocial-angellist
• zocial-aol
• zocial-appnet
• zocial-appstore
• zocial-bitbucket
• zocial-bitcoin
• zocial-blogger
• zocial-buffer
• zocial-cal
• zocial-call
• zocial-cart
• zocial-chrome
• zocial-cloudstore
• zocial-creativecommons
• zocial-delicious
• zocial-digg
• zocial-disqus
• zocial-dribbble
• zocial-dropbox
• zocial-drupal
• zocial-dwolla
• zocial-email
• zocial-eventasaurus
• zocial-eventbrite
• zocial-eventful
• zocial-evernote
• zocial-facebook
• zocial-fivehundredpx
• zocial-flattr
• zocial-flickr
• zocial-forrst
• zocial-foursquare
• zocial-github
• zocial-gmail
• zocial-google
• zocial-googleplay
• zocial-googleplus
• zocial-gowalla
• zocial-grooveshark
• zocial-guest
• zocial-html5
• zocial-ie
• zocial-instagram
• zocial-instapaper
• zocial-intensedebate
• zocial-itunes
• zocial-klout
• zocial-lanyrd
• zocial-lastfm
• zocial-linkedin
• zocial-macstore
• zocial-meetup
• zocial-myspace
• zocial-ninetyninedesigns
• zocial-openid
• zocial-opentable
• zocial-paypal
• zocial-pinboard
• zocial-pinterest
• zocial-plancast
• zocial-plurk
• zocial-pocket
• zocial-podcast
• zocial-posterous
• zocial-print
• zocial-quora
• zocial-reddit
• zocial-rss
• zocial-scribd
• zocial-skype
• zocial-smashing
• zocial-songkick
• zocial-soundcloud
• zocial-spotify
• zocial-statusnet
• zocial-steam
• zocial-stripe
• zocial-stumbleupon
• zocial-tumblr
• zocial-twitter
• zocial-viadeo
• zocial-vimeo
• zocial-vk
• zocial-weibo
• zocial-wikipedia
• zocial-windows
• zocial-wordpress
• zocial-xing
• zocial-yahoo
• zocial-yelp
• zocial-youtube

Continue Reading(...)

by Unknown 1/05/2014 5 comments

Easy Way To Enable Google+ Comment In Blogger

From past one year blogger is consistently updating and optimizing itself. Introducing Google+ comment for bloggers is also the part of that series. Google+ is the place where you can reach out to a large number of audiences who are eager to explore new and much newer things, so directly bloggers on blogspot platform are benefited by using Google+ comment system instead of using default blogger comment system.

But there's is one problem out there specially in custom blogger templates, i.e. after enabling Google+ comment system you will not see blogger comment system loading below the pages. It's because custom templates are not well integrated to blogger's control panel.

Screenshot

But there's a way to fix this error in your template. To fix it follow below given instructions thoroughly:

• Before tweaking the template Google+ comment should be activated as shown in screenshot.
• Open Blogger Dashboard → Template →  Html Editor
• Open Blog1 from widget list menu
• Search (by pressing Ctrl+F) <b:includable id='comment=form' var='post'> 
• Expand it and add below given code just below it.

<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>

• After saving your template you can see Google+comment is working on your site.

Continue Reading(...)

by Unknown 11/19/2013 Leave a Comment

Finally I Got a Way To Use Disqus and Google+ Comment Together

In previous posts I have talked about the pros of using disqus comment system in sites/blogs, but what if you are able to use both disqus and google+ comment system together in your blogger sites. Yes you can use both of them in your site together at a time.

Pros Of Using Both

While counting the pros of using disqus comment system I've also talked about the impact of social medias on your contents and comments. Elaborating it again I will say that disqus increases the visibility of your contents and comments as it is integrated with top social networking sites like facebook, twitter and linkedin, but when you start using disqus along with google+ comment system, you are adding one more social networking giant to your list which will surely increases your content's and comment's visibility to more big audience.

How To Install Both

• First You'll need to install disqus in your blogger blog/site.
• Then open your Blogger Dashboard → Template → Html editor
• Now go to Blog1 from widget list menu
• And search for  <b:includable id='comment_picker' var='post'> 

Screenshot

• Select the whole piece of code as shown in screenshot and replace it with below given code.

<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.forceIframeComments'>
<b:include data='post' name='iframe_comments'/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
<b:else/>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='threaded_comments'/>
</b:if>
</b:if>
</b:if>
</b:includable>

• Now Search for <b:includable id='threaded_comments' var='post'> 
• Select the complete code from <b:includable...> to </b:includable> 
• And replace it with the below given code.

<b:includable id='threaded_comments' var='post'>
<div id='comment-header'>
  <img class='comment-on' id='comments-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVfsdJxXfYyrawrfdp8Hy8FjDyX-BpYjoGk35m2avn_WYJZUTVrAh3Xpwjke9Naa947zeHY0-1zL_C1DOmD5njSVEphr7rj4vhxtdXpPi2sN_z3zZSMUcWSd46IxErAo2i2NfpZ5ZilA/s50/disqus-social-icon-blue-transparent.png' title='view Blogger comments'/>
  <div class='choice'>Comment With Your Choice</div>
<image id='comments-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90FCBoXebtBpZDyyI-JdEng8PK0gr8gKfXIiSUzZgRgFBphw2DAW-Ro6Nwzq0S9ZxrpVd66v_2nYqiZFCnTUWnpqICn3iucFTBPWZJVGKHU-l7HGnnNb2RkYQmWR-p6MzPcuMP2-8tTGZ/s50/plus_off.png' title='view Google+ comments'/>
</div>
<div id='comment-zone'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>

    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>

      </b:if>
    </p>

    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
  <div id='gcontainer'><div id='gcomments'/></div>
<script src='http://apis.google.com/js/plusone.js'/>
<script>
gapi.comments.render('gcomments', {
    href: window.location,
    width: '750',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});
$('#comments-norm').click(function(){
 // switch to normal comments displaying
 $('#gcontainer').css('display','none');
 $('#comments').css('display','block');
 $('#comments-norm').addClass('comment-on');
 $('#comments-gplus').removeClass('comment-on');
 $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVfsdJxXfYyrawrfdp8Hy8FjDyX-BpYjoGk35m2avn_WYJZUTVrAh3Xpwjke9Naa947zeHY0-1zL_C1DOmD5njSVEphr7rj4vhxtdXpPi2sN_z3zZSMUcWSd46IxErAo2i2NfpZ5ZilA/s50/disqus-social-icon-blue-transparent.png');
 $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90FCBoXebtBpZDyyI-JdEng8PK0gr8gKfXIiSUzZgRgFBphw2DAW-Ro6Nwzq0S9ZxrpVd66v_2nYqiZFCnTUWnpqICn3iucFTBPWZJVGKHU-l7HGnnNb2RkYQmWR-p6MzPcuMP2-8tTGZ/s50/plus_off.png');
});
$('#comments-gplus').click(function(){
 // switch to google plus comments displaying
 $('#comments').css('display','none');
 $('#gcontainer').css('display','block');
 $('#comments-norm').removeClass('comment-on');
 $('#comments-gplus').addClass('comment-on');
 $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9amt4xPK-vwGdLCCDwXAUOvcnzm4Eer9IXGzE5qiEwVOMGbjEx_DoFO3Ig6RLcbgFoWvG2lT2KabEZ5umt6Iz7K2fUtAIKoh2vS5wPiIlacGjM2DtDfQg_4xp7ed7C-REU7m8zOmUMQ/s50/disqus-social-icon-dark-transparent.png');
 $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIytwJVobQU7_JuJ5qLVSkx0Q-GhLh-a1ZZk1r_QyK_bRmJMsfbXJRqeZXunD8D3auEV3Czoip9Sj_jErcwnSLblXq2Vi_Q9BQw1pvotYnbH_IyiHMGOvs7Ooi-rG17AFnl0pJ8nh9zebx/s50/plus_on.png');
});
$('#comments-norm').hover(
 // switch to normal comments displaying
 function(){
  if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVfsdJxXfYyrawrfdp8Hy8FjDyX-BpYjoGk35m2avn_WYJZUTVrAh3Xpwjke9Naa947zeHY0-1zL_C1DOmD5njSVEphr7rj4vhxtdXpPi2sN_z3zZSMUcWSd46IxErAo2i2NfpZ5ZilA/s50/disqus-social-icon-blue-transparent.png');} 
 },  function(){
  if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9amt4xPK-vwGdLCCDwXAUOvcnzm4Eer9IXGzE5qiEwVOMGbjEx_DoFO3Ig6RLcbgFoWvG2lT2KabEZ5umt6Iz7K2fUtAIKoh2vS5wPiIlacGjM2DtDfQg_4xp7ed7C-REU7m8zOmUMQ/s50/disqus-social-icon-dark-transparent.png');} 
 }
);
$('#comments-gplus').hover(
 // switch to gplus comments displaying
 function(){
  if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIytwJVobQU7_JuJ5qLVSkx0Q-GhLh-a1ZZk1r_QyK_bRmJMsfbXJRqeZXunD8D3auEV3Czoip9Sj_jErcwnSLblXq2Vi_Q9BQw1pvotYnbH_IyiHMGOvs7Ooi-rG17AFnl0pJ8nh9zebx/s50/plus_on.png');} 
 },  function(){
  if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90FCBoXebtBpZDyyI-JdEng8PK0gr8gKfXIiSUzZgRgFBphw2DAW-Ro6Nwzq0S9ZxrpVd66v_2nYqiZFCnTUWnpqICn3iucFTBPWZJVGKHU-l7HGnnNb2RkYQmWR-p6MzPcuMP2-8tTGZ/s50/plus_off.png');} 
 }

);</script>
</div>
</b:includable>

• After replacing the code save the template and you're done.

Congratulations! From now onwards instead of Blogger comment system disqus comments will come into action. I would like to thank David Kutcher of BlogXpertise for the providing source code and here I've done minor tweaking only. So this widget is made by me with the support of Blogxpertise.

If you liked this tutorial then please share this post with your friends so that they may also learn and start availing the features of Google+ and Disqus. Stay tuned with us for more tuts :)

Continue Reading(...)

by Unknown 11/18/2013 5 comments

4 Simple Steps To Install Disqus In Blogger

In previous posts I've counted the pros of using disqus in your sites. Today I'm going to elaborate some steps for beginners so that they would be able to install disqus in their blogger sites very easily and quickly. Let us see how to install it in your blogger blogs.

Step#1

• You need to sign-up and create a account in disqus using your e-mail id.

Step#2

• After sign-up quickly sign-in with your registered e-mail id and then click on Add Disqus To Your Site (as shown in the image below)

Step#3

• After that you'll be landed on the page,where you need to create your site's profile, which you will be using as a disqus profile while commenting.

Screenshot

Step#4

• After filing the required fields click Finish Registration. 
• Now select the platform and add the widget code in your blogger site. 
• After saving the widget view the pages of your site, you will find disqus loading instead of default blogger comment system.

Continue Reading(...)

by Unknown 11/18/2013 Leave a Comment

Simple Trick To Remove Bloggers Attribution Widget

Attributing means showing honour or respect to someone who has helped you in some manner. For the sites and blogs hosted on blogger platform, default widget of attribution is provided by blogger itself for it's users through which they can pay a attribution to blogger. In some of the templates this widget is installed by default.

But there is a group of some peoples also who don't like this powered by blogger attribution link. And since this widget is locked so, only possible way to remove it is by the Html Editor of your Blogger's Dashboard. Below we will learn to remove it using Html Editor

Step#1

• Open Blogger Dashboard → Template → Html Editor
• Now click on Widgets selection box and select Attribution  widget

• After opening the Attribution Widget you will land to the widget section of your template.

• Select the complete code of the widget as shown below

• Now delete this code form you template and save the template.

Congratulations you have successfully removed Powered by Blogger Attribution Widget.

Continue Reading(...)

by Unknown 11/07/2013 1 comment

Embed Twitter To Blogger and Engage Your Visitors

In previous posts we have shared how to embed Google+ posts in Blogger. Today we will be learning to embed tweets into blogger. Embedding any twits is not a difficult task anymore. After the work of the developers of social media giants, embedding posts is a fun to do. You can do it just in few simple steps. You can embed any tweets in your blogger posts and turn it into a multimedia playground that engages your audience and traffic. Tweets including images, videos, texts quotes after being embedded can add more appeal to your blogger posts.

1. How to embed Google+ Posts in Blogger
2. Embed Your Tweets In Blogger Posts

http://t.co/1M84Z26KXt pic.twitter.com/Zi2ErzMPd1
— Template Trackers (@Temptrackers) October 23, 2013

In embedding tweets you are not restricted, you can embed any tweets to your blogger posts. If you have observed then on hovering over the tweets you will see a series of option below.

On clicking on the option Embed Tweet a pop-up window will open having some junk of codes. You have to copy them and paste them in your blogger posts using HTML option and then preview the posts.

Copy the highlighted code and paste it the HTML editor of your Blogger posts and you're done.

Final Words

Sometimes it happens that you're reviewing some topic relating it to some recognized person or firm, then embedding the feedback of the company or person can earn loyalty of your readers to you. You can engage the traffic into your blog by embedding tweets. You can promote something that is on twitter.

We hope that this tutorial taught you to embed #tweets in easy manner. Let us know that we really helped you with our tutorial and share us voice with your friends too.

Continue Reading(...)

by Unknown 10/23/2013 Leave a Comment

How To Make Css Sprite Images?

"You are aware of the word Sprite, and first thing that strikes your mind  after hearing this word is the Sprite i.e. soft drink from the Coca cola firm. But sorry we are not talking about any drinks here. We are talking about designing trends."  

Let's check that out

A sprite image is a collection of images put into a single image . It is mainly used in developing any website/blog. Reason behind using such technique is to reduce the load time taken by website, because if there will be many images on your website/blog then it will take time to load or may be some of the images will not load also.

Below is an example of the sprite image

Image Source- Css Tricks

Before jumping on how to use sprite images we must first learn how to create this images using Photoshop?

Step#1 Working In Photoshop

First choose the image of your choice and open all of them in Photoshop and resize them by

• Select the Image to be resized.
• Open Image option from menu
• Image Size
• Now enter the desired size of image and OK the changes.

We have chosen three images together as shown below

Now we will add some effects in this sprite image

• After selecting the image layer we duplicated it ( by pressing Ctrl+J)
• Then placed the duplicate image just on the top of the parent image.

• Now we added some effects on the duplicated image from Image→Adjustments→Channel Mixer
• We have changed the color here bu using color mixer you can also turn it into Black & White image using Desaturate option (press Ctrl+ Shift+U) or any other option of your choice.
• Now the output we got was like this

So now our work in Photoshop gets over here. Moving to the next step we will see that how can we use this sprite image in our blog/website development.

Before jumping on to next step I want you to visit this demo here. You can see that image gets colored on hovering the mouse.

Que. But the question is how to create this?
Ans.You can create this using sprite image.

 In step#1  we have already created a sprite image out of three different images.

  

Step#2 Working with Codes

In this step we will be learning how to imply sprite images in your web/blog designs.

Html

<div class='sprite'>
<div class='sprite-container'>
  <ul class='lists'>
  <li class='dont_blog'><a href='#'></a></li>
  <li class='Lorem_ipsum'><a href='#'></a></li>
  <li class='design_matters'><a href='#'></a></li>
  </ul></div>
</div>

Now Let's Animate it using Css properties.
Now we are going to style the parent element of sprite image container.

Css

.sprite{width:100%;

  padding:0 10px;
}
.sprite-container{
  display:block;
  width:1000px;
  height:200px;
  overflow:hidden;
}

.lists, .lists li{list-style:none;
float:left;}

<div class='sprite'> is set to to 100% width which is auto resizable.

Well we are going to apply the styles directly on the list class so even if you don not style the <div class='sprite-container'> then also it will not mess up with your work.

<ul class='lists'> and lists are styled list-style:none & float:left
list-style is set to none which define the lists to have no list-style, that means now we can make the lists to float to left horizontally.

Now styling the different lists class

Css

.dont_blog{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rsuLBIBJquxQ-2YYDToKnrYfTKUeFKelcjZQ8Z00xluYZ7yVwIEi8-u8dSSoE__BZZUhcFpPB3-ZlNt77Nrp_j4mIn7DfO-HtxdDVNLcOTsdKUgSePQNkW0GCtAD8vEYWQn0d6-zJA/s1600/Untitled-5.jpg) repeat-x 0px -120px;

  height:120px;
  width:272px;
}
.dont_blog:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rsuLBIBJquxQ-2YYDToKnrYfTKUeFKelcjZQ8Z00xluYZ7yVwIEi8-u8dSSoE__BZZUhcFpPB3-ZlNt77Nrp_j4mIn7DfO-HtxdDVNLcOTsdKUgSePQNkW0GCtAD8vEYWQn0d6-zJA/s1600/Untitled-5.jpg) repeat-x 0px 0px ;
}

.Lorem_ipsum{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rsuLBIBJquxQ-2YYDToKnrYfTKUeFKelcjZQ8Z00xluYZ7yVwIEi8-u8dSSoE__BZZUhcFpPB3-ZlNt77Nrp_j4mIn7DfO-HtxdDVNLcOTsdKUgSePQNkW0GCtAD8vEYWQn0d6-zJA/s1600/Untitled-5.jpg) repeat-x -272px -120px;
  width:290px;
  height:120px;
  float:left;
}
.Lorem_ipsum:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rsuLBIBJquxQ-2YYDToKnrYfTKUeFKelcjZQ8Z00xluYZ7yVwIEi8-u8dSSoE__BZZUhcFpPB3-ZlNt77Nrp_j4mIn7DfO-HtxdDVNLcOTsdKUgSePQNkW0GCtAD8vEYWQn0d6-zJA/s1600/Untitled-5.jpg) repeat-x -272px 0px;

}
.design_matters{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rsuLBIBJquxQ-2YYDToKnrYfTKUeFKelcjZQ8Z00xluYZ7yVwIEi8-u8dSSoE__BZZUhcFpPB3-ZlNt77Nrp_j4mIn7DfO-HtxdDVNLcOTsdKUgSePQNkW0GCtAD8vEYWQn0d6-zJA/s1600/Untitled-5.jpg) repeat-x -560px -122px;
  width:260px;
  height:120px;
}
.design_matters:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rsuLBIBJquxQ-2YYDToKnrYfTKUeFKelcjZQ8Z00xluYZ7yVwIEi8-u8dSSoE__BZZUhcFpPB3-ZlNt77Nrp_j4mIn7DfO-HtxdDVNLcOTsdKUgSePQNkW0GCtAD8vEYWQn0d6-zJA/s1600/Untitled-5.jpg) -560px 0px;
}

Step#3 Play With The Codes

This is the fun part of this tutorial, try it and learn it. We are not going explain anything now. We will just provide a demo link of ours and you have to play with it by changing the codes and watching the effects happening live. But before playing you must know the below given things

# You Need To Know This?

We are using a Css pseudo element i.e. hover and we have defined it with background position property along with hover.

This will change the position of sprite image on hovering the mouse over the image and you will see the color of image being changed.

# Where Is The Background Position Property in Code?

Here is a small piece of code from above

Css

.Lorem_ipsum {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rsuLBIBJquxQ-2YYDToKnrYfTKUeFKelcjZQ8Z00xluYZ7yVwIEi8-u8dSSoE__BZZUhcFpPB3-ZlNt77Nrp_j4mIn7DfO-HtxdDVNLcOTsdKUgSePQNkW0GCtAD8vEYWQn0d6-zJA/s1600/Untitled-5.jpg);
background-position-x: -272px;
background-position-y: -120px;
background-repeat-x: repeat;
background-repeat-y: no-repeat;
width: 290px;
height: 120px;
}

Above is the extended version of the Css code given here below

Css

.Lorem_ipsum{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rsuLBIBJquxQ-2YYDToKnrYfTKUeFKelcjZQ8Z00xluYZ7yVwIEi8-u8dSSoE__BZZUhcFpPB3-ZlNt77Nrp_j4mIn7DfO-HtxdDVNLcOTsdKUgSePQNkW0GCtAD8vEYWQn0d6-zJA/s1600/Untitled-5.jpg) repeat-x -272px -120px;

  width:290px;
  height:120px;
  float:left;
}

Observe both the codes above and imply which makes you comfortable while working with the code.

#Start Playing

Now you must start playing with the code and start creating your own sprite images. Use your creative mind and make out new things from it. All the best

Demo

Continue Reading(...)

by Unknown 10/10/2013 7 comments