Friday, November 14, 2014

Add Beautiful Sliding Tags in your Blog | Tutorial

6:05 PM    No comments

sliding tags for your blogger blog wordpress widget gadget tutorial

Add Beautiful Sliding Tags into your Blog | Tutorial

Today i am going to share 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


Demo For Sliding Label Tags For Blogger


You are here to watch Live Demo For Sliding Label Tags For Blogger, Hover your pointer to see them in action.

It has 3 different colors to choose from, Blue, Green and Red.

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/* ========================================================
                 Blogger Label Sliding Tags
               http://akkitrickx.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;

1
<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.


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

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

and replace it with this code

1
2
<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

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)