Beautiful Brick Box Label Widget For Blogger

Beautiful Brick Box Label Widget For Blogger

Every Blogger use label to tag its post to and Navigate readers or visitors to all post of that category.So Today,i will share Beautiful Brick Box Label Widget For Blogger with you people to help you for driving more traffic.This beautiful widget attract visitors towards your blog.

Lets Start...

Beautiful Brick Box Label Widget For Blogger

Step 1
Go To Your Blogger Layout
Select Add Widget
Add Label Widget
And Save Setting As You See In Below Picture

You May Also Like:Beautiful Dynamic Social Bar For Blogger

Step 2
Go To Your Blogger Template
First BackUp Your Template
Now Edit Template
And Search
]]></b:skin>
And Paste Below CSS Code Above It

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

Step 3
Now Find This Code <b:widget id='Label1' locked='false'
Till
 </b:widget>
Now Replace It 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='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>                <b:if cond='data:display == &quot;list&quot;'>                    <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='&quot;label-size label-size-&quot; + 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>

You May Also Like:Hot Scrolling Marquee Recent Post Widget For Blogger Blogs

Save Your Template And You All Done

Note:
If you find any problem regarding 'Beautiful Brick Box Label Widget For Blogger' feel free to comment below.