Blogger
Labels helps to define articles into different categories. Labels are
easy way to make clear navigation through whole blog. In this tutorial i
will explain you have to add brick style labels in your blog. which
helps to give attractive and stylish look to blog labels. This widget is
totally made from css3 and take less time to load. Before
implementation of this widget make sure that you have already added the
label list in page elements. If you are not using labels then simply add
label in layout and also change them into from list into cloud view
Steps To Use This widget
- Change Label List view Into Cloud View just by editing the label widget in layout.
- Then Go to Template section of your blog.
- Click on Edit HTML and then paste below code just above ]]></b:skin>
/*CSS3 Bricks Style Labels By www.SafeTricks.com/ */
#textwidget {
color: #666;
font-size: 0.925em;
font-style: italic;
line-height: 1.6em
}
a.tag {
color: #777;
font: 9px verdana;
text-transform: uppercase;
transition: border-color .218s;
background: #f4f4f4;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
border: solid 1px #ccc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin: 0 4px 4px 0;
padding: 3px 5px;
text-decoration: none
}
a.tag:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}
a.tag:active {
color: #000;
border-color: #444
}
.slides {
font-size: 85%;
line-height: 130%;
overflow: hidden;
padding: 0;
margin: 30px 0 10px;
border-bottom: 1px solid #000
}
/*CSS3 Bricks Style Labels By www.SafeTricks.com/ */
- Now Search for Label1 and click on counting to close widget and it will look like
<b:widget id='Label1' locked='false' title='Labels' type='Label'>...</b:widget>
- After finding above matching code Simply replace it from <b:widget> </b:widget> with below code
<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='textwidget'>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(
<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(
<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit' />
</div>
</div>
</b:includable></b:widget>
- After replacing save template settings and visit blog and see widget.
I hope you can easily able to implement this gadget to your blog
without any issue. Otherwise If you face any problem must ask me in
below comments.
PLEASE HELP US TO SPREAD OUR WORDS:
Blog
directory is a special type of directory or website where different
types of blog are submitted or listed for latest updates.In web
directory you can submit or link your blog for sharing your latest
update in open community type. Blog Directories are the best way to
promote your blog or get some traffic for your blog. If you have a blog
and good content but no traffic then directories are beneficial for you.
It is also helpful to you to increase search ranking and get some
visitors for your blog. It will produce quality back links which raise
the visibility of your blog.
Feedburner
is best subscription based service for Blog and websites. Feedburner
helps your regular readers to get latest updates. Feedburner also helps
to increase site regular visitors because when someone subscribe with
blog feed then they will get its all updates through email or also in
Google reader. Feedburner is Google service to provide custom Rss feed.
Many times while visiting any blog or site you may see Readers Chicklet
with number of readers or also see subscribe by email or follow by email
or similar type of box for getting latest updates via email. To start
this service you need to activate your site with Feedburner and then
your Feedburner id in subscription box you can increase your reader at
faster speed. If you don't have created your feed yet or don't know how
to create it then follow below given simple steps.
As
every knows Whatsapp is Fastest Growing Messenger for Mobile Phones.
Whatsapp is highly downloadable mobile application. Every person who use
internet on mobile always use Whatsapp, instead of doing sms from
number to everyone because sms needs to activate costly packs which
offers limited messages but Whatsapp allow to send unlimited messages
with better interface and inbuilt number of amazing features like
sharing images, videos, audios or other files as you want.
