Friday, October 12, 2012

Add Beautiful Sliding Tags into your Blog | Tutorial

sliding tags for your blogger blog wordpress widget gadget tutorial
Add Beautiful Sliding Tags in your Blog | Tutorial
Today i am going to share sexy sliding tags for your blogger blog, originally posted a PSD by 365psd and coded by webinterfacelab, all credit goes to above mentioned owners, i just made a little contribution to make it work for blogger blog.


Demo





Click Here For Live Demo


Here we go...





Finally i have decided to make this tutorial for you guys, please feel free to post your comments.

Step:1 Go to Dashboard > Template > Edit HTML > Proceed > Tick Expand Widget Template and search for ]]></b:skin> and Paste this code just above it.

/* ========================================================
                 Blogger Label Sliding Tags
          http://premium-stuff-guru.blogspot.com
   ===================================================== */
.tags {
  zoom: 1;
}
.tags:before, .tags:after {
  content: "";
  display: table;
}
.tags:after {
  clear: both;
}
.tags li {
  position: relative;
  float: left;
  margin: 0 0 8px 12px;
}
.tags li:active {
  margin-top: 1px;
  margin-bottom: 7px;
}
.tags li:after {
  content: '';
  z-index: 3;
  position: absolute;
  top: 10px;
  right: -2px;
  width: 5px;
  height: 6px;
  opacity: .95;
  background: #eb6b22;
  border-radius: 3px 0 0 3px;
  -webkit-box-shadow: inset 1px 0 #99400e;
  box-shadow: inset 1px 0 #99400e;
}
.tags a, .tags span {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.tags a {
  height: 26px;
  line-height: 23px;
  padding: 0 9px 0 8px;
  font-size: 12px;
  color: #555;
  text-shadow: 0 1px #fff;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: #dadada #d2d2d2 #c5c5c5;
  border-radius: 3px 0 0 3px;
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #f0f0f0));
  background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -moz-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -ms-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: linear-gradient(top, #fcfcfc, #f0f0f0);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tags a:hover {
  text-decoration: none;
}
.tags a:hover span {
  padding: 0 7px 0 6px;
  max-width: 40px;
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.tags span {
  position: absolute;
  top: 1px;
  left: 100%;
  z-index: 2;
  overflow: hidden;
  max-width: 0;
  height: 24px;
  line-height: 21px;
  padding: 0 0 0 2px;
  opacity: .95;
  color: #fff;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  border: 1px solid;
  border-color: #d15813 #c85412 #bf5011;
  border-radius: 0 2px 2px 0;
  background-color: #eb6b22;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed7b39), color-stop(100%, #df5e14));
  background-image: -webkit-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -moz-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -ms-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -o-linear-gradient(top, #ed7b39, #df5e14);
  background-image: linear-gradient(top, #ed7b39, #df5e14);
  -webkit-transition-property: padding, max-width;
  -moz-transition-property: padding, max-width;
  -ms-transition-property: padding, max-width;
  -o-transition-property: padding, max-width;
  transition-property: padding, max-width;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -ms-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.green li:after {
  background: #65bb34;
  -webkit-box-shadow: inset 1px 0 #3a6b1e;
  box-shadow: inset 1px 0 #3a6b1e;
}
.green span {
  border-color: #549b2b #4f9329 #4b8b27;
  background-color: #65bb34;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #71ca3f), color-stop(100%, #5aa72e));
  background-image: -webkit-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: -moz-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: -ms-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: -o-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: linear-gradient(top, #71ca3f, #5aa72e);
}

.blue li:after {
  background: #56a3d5;
  -webkit-box-shadow: inset 1px 0 #276f9e;
  box-shadow: inset 1px 0 #276f9e;
}
.blue span {
  border-color: #3591cd #318cc7 #2f86be;
  background-color: #56a3d5;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6aaeda), color-stop(100%, #4298d0));
  background-image: -webkit-linear-gradient(top, #6aaeda, #4298d0);
  background-image: -moz-linear-gradient(top, #6aaeda, #4298d0);
  background-image: -ms-linear-gradient(top, #6aaeda, #4298d0);
  background-image: -o-linear-gradient(top, #6aaeda, #4298d0);
  background-image: linear-gradient(top, #6aaeda, #4298d0);
}

Step:2 Now we have to modify label widget code little bit to make it work, so find this code in your template;

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

once you found above code, just look for <ul> one or two lines down as shown in screenshot.

Add Beautiful Sliding Tags into your Blog | Tutorial

Once you found it, just replace it with <ul class='tags'>.
Now if you want green/red tags, just add green/red like this <ul class='tags green'>

Step 3: Now search for this code in your template

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

and replace it with this code

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>
 <span class='label-count' dir='ltr'>(<data:label.count/>)</span></a>

Done...! Save your template and see the sliding tags in action..:)

What do you say?




How do you find this tutorial, feel free to post your comments. Thanks

Do you want to contribute?





If you want to contribute for free, kindly click here


9 comments:

  1. please send me this trick
    Tejasthakar333@gmail.com

    thank you

    ReplyDelete
    Replies
    1. Dear tejas please follow the instructions to receive this tutorial via email. Please do like our FB page and Subscribe our RSS by email.

      Delete
  2. I have updated the post and posted full tutorial.

    ReplyDelete



  3. I cant able to find these lines on my site. please help me

    ReplyDelete
  4. Hi ! I would love to have this beautiful sliding tags widget on my blog, but after following your tutorial (that was very easy to understand), my categories remains unchanged... Can you please help me solve my problem ? Thank you in advance for your help / Blog link: http://scrapandtubes.blogspot.com

    ReplyDelete
  5. Your Blog Is Very Useful To Everyne
    Hello My Name Is FAIQ-UL-Hussain
    Soo Pleasee Visit My Website And Leave A Comment In All My Post Follow My Website And Like In Facebook http://facebook.com/smartboyfaiq
    And My Website
    http://smartboyfaiq.blogspot.com

    ReplyDelete

Social Profile

Total Pageviews

Follow by Email