Blogger Simple Label widget with Drift Effect

label widget

Label widget is good for blog navigation. But blogger default label is not so attractive. For this reason many blogger coding to make some variation on it. I have designed this label widget with hover effect. Which will make little attractive to visitors. This label widget would be simple and clean style on normal mode but when you will mouse over on widget then it will change color. Added a black pipe on the right side of the each label. Hope you would like this label widget. Previously I have designed many label widget but has choose orange color as trendy style. And this widget has created with pure CSS coding. So to install this widget simply follow the simple steps from below.


Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Widget" then select "Label" Widget (Select Cloud Style).


bloggerspice.com


Step 4 Now click on -> Template -> Edit HTML-> Unfold code  

Step 5 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 6 Paste the below code  Before/above ]]></b:skin>

/* Simple Label Widget by www.bloggerspice.com */
.Label li {
background: none repeat scroll 0 0 #EEEEEE;
border: 0 none;
color: #666666;
margin: 0 1px 1px 0;
padding: 0;
text-decoration: none;
}
.label-size a {
background: none repeat scroll 0 0 #EEEEEE;
border-bottom: 0 none;
border-image: none;
border-left: 0 none;
border-top: 0 none;
color: #666666;
float: left;
font-size: 12px;
margin: 0 5px 5px 0;
padding: 10px;
text-decoration: none;
}
.label-size a:hover {
background-color: #fd4326;
color: #fff;
text-decoration: none;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
border-right: 5px solid #333333;
}


If you need any help then feel free to contact with me. I will get back  to you as soon as possible. 

26 Comments

  1. I'm no longer sure the place you're getting your info, however great topic.
    I needs to spend a while learning much more or understanding more.
    Thanks for wonderful information I used to be searching for this information for
    my mission.
  2. Hey there! This is my 1st comment here so I just wanted to give
    a quick shout out and say I truly enjoy reading through your posts.
    Can you suggest any other blogs/websites/forums that deal with the same topics?
    Thanks a lot!
  3. Thanks for sharing such a fastidious thought,
    piece of writing is fastidious, thats why i have read it
    entirely
  4. I'm not sure where you are getting your information, but good topic.
    I needs to spend some time learning more or understanding more.
    Thanks for great information I was looking for this info for my mission.
  5. Good way of explaining, and nice piece of writing to obtain information regarding
    my presentation subject matter, which i am going to convey in academy.
  6. Greetings! Very helpful advice in this particular post!
    It's the little changes that produce the most significant changes.
    Thanks a lot for sharing!
  7. If you want to obtain a good deal from this post then you have to apply these methods to your won webpage.
  8. I am sure this post has touched all the internet viewers, its really really nice post
    on building up new website.
  9. Hi to every , because I am actually eager of reading this weblog's post to be updated
    daily. It consists of fastidious information.
  10. Very quickly this web site will be famous amid all blogging and site-building visitors,
    due to it's pleasant articles or reviews
  11. What i don't realize is in reality how you're now not actually much more smartly-liked than you may be now.
    You're very intelligent. You realize therefore considerably
    in the case of this topic, made me individually believe it
    from numerous various angles. Its like men and women don't seem to be fascinated except it's one thing to do with Woman gaga!
    Your personal stuffs great. At all times take care of it up!
  12. Ridiculous story there. What occurred after? Good luck!
  13. I think that everything composed was actually very logical.
    However, think on this, suppose you composed a catchier post title?
    I mean, I don't wish to tell you how to run your website, however suppose you added something to possibly get
    a person's attention? I mean "Blogger Simple Label widget with Drift Effect" is a little vanilla.
    You could peek at Yahoo's front page and see how they create post titles to grab viewers to click.
    You might add a video or a picture or two to get people excited
    about everything've got to say. In my opinion, it would make your posts a little bit more
    interesting.
  14. Hello! I know this is kinda off topic but I was wondering which blog platform are you using for this website?
    I'm getting fed up of Wordpress because I've had problems with
    hackers and I'm looking at alternatives for another platform.
    I would be fantastic if you could point me in the direction of
    a good platform.
  15. I am curious to find out what blog platform you're working with?

    I'm having some small security problems with my latest blog and I would
    like to find something more secure. Do you have any solutions?
  16. I've learn some just right stuff here. Definitely worth bookmarking for revisiting.
    I surprise how so much effort you put to create this sort of excellent informative web
    site.
  17. Hello there! This post couldn't be written any
    better! Reading through this post reminds me of my old
    room mate! He always kept talking about this. I will forward this write-up to
    him. Pretty sure he will have a good read. Thank you for sharing!
  18. What's up it's me, I am also visiting this site daily, this site
    is truly fastidious and the users are genuinely sharing fastidious thoughts.
  19. Its like you read my mind! You appear to know a lot about this,
    like you wrote the book in it or something. I think that you can do with some pics to drive the message home
    a bit, but other than that, this is fantastic blog.

    A great read. I\'ll certainly be back.
  20. That is a really good tip especially to those fresh to the blogosphere.
    Brief but very precise info… Thanks for sharing this one.

    A must read article!
  21. Very good info. Lucky me I discovered your website by chance
    (stumbleupon). I've saved it for later!
    • BloggerSpice
      Thank you. :dn
  22. bookmarked!!, I like your site!
    • BloggerSpice
      Thank you :up
  23. This paragraph provides clear idea designed for the new visitors of
    blogging, that in fact how to do blogging and site-building.
    • BloggerSpice
      Thanks for dropping your comment here. :)
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up