Spice Up Blogger Blog with CSS3 Brick/Box Style Label:Digital Tech Inspiration

In this tutorial we will show, how to customize blogger label and make them Bricks/Box style with CSS3. Most of your readers get attracted to this cool style and also like them. You have understood how these labels are playing a important role in keeping your visitor/readers stick to your blogger blog. Here, we educate you the hack of spicing up or adding flavours for stylising labels with brick styles or box style or tags cloud styles to blogger blogs. You can apply it to your blog by replacing some existing code with new code in your template. We will apply this hack using of pure CSS3.

I am also using these bricks/box style label on this blog, you can also see live demo by clicking the below button. Now let’s begin the tutorial.

LIVE DEMO

How To Add Brick Style to Your Blog Labels With CSS3 ?

Now go to Blogger Dashboard > Template
Click on Backup/Restore button for backup of your template
Click on Edit HTML
Hit Proceed button
Tick on Expand Widget Templates checkbox
Find below highlighted code (Ctrl + f)

]]></b:skin>

Now add below CSS3 code just above the pink highlighted code

/*CSS3 Bricks Style Labels By http://wikitechnol.blogspot.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 http://wikitechnol.blogspot.com/ */

Now find below highlighted code,

<b:widget id='Label1' locked='false'

find it until

</b:widget>

Replace code from <b:widget id='Label1' locked='false'.........
to

</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>

<b:if cond='data:display == "list"'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

</span>

<b:else/>

</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'>

<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

</span>

<b:else/>

</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>

</b:includable>

</b:widget>

Now take a Preview and Save template.

How to Add a Label Gadget?

o Now again go to Blogger Dashboard>Layout

o Click on Add a Gadget

o Search for a Label Gadget (like image below) and add

o You have to edit some settings to the Label Gadget (as image shown below)

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.