Konsep sidebar label blogger

by dafin defandaky

HTML

<div id="sidebar1" class="sidebar">
<div class="cat-number">Total: 257 Posting</div>
	<ul>
			<div class="blogger-wordpress">
<ul>
<li class="category-blogger-template"><a href="http://www.deluxetemplates.net/category/blogger-template" class="blogger" title="Blogger Templates">Blogger Label</a></li>
<li class="tag-three-columns-blogger-templates"><a href="http://www.deluxetemplates.net/tag/three-columns-blogger-templates" title="3 Columns Blogger Templates">jQuery</a></li>
</ul>
</div>
<div class="blogger-wordpress2">
<ul>
<li class="category-wordpress-theme"><a href="http://www.deluxetemplates.net/category/wordpress-theme" class="wordpress" title="Wordpress Themes">Wordpress Label</a></li>
<li class="tag-three-columns-wordpress-themes"><a href="http://www.deluxetemplates.net/tag/three-columns-wordpress-themes" title="3 Columns Wordpress Themes">Plugin</a></li>
</ul>
</div>
<div class="blogger-wordpress3">
<ul><li class="category-premium"><a href="http://www.deluxetemplates.net/category/premium" class="premium" title="Premium Templates/Themes">Permak</a></li>
<li class="tag-premium-blogger-templates"><a href="http://www.deluxetemplates.net/tag/premium-blogger-templates" class="premium1" title="Premium Blogger Templates">Blogger</a></li>
<li><a href="http://www.deluxetemplates.net/tag/premium-wordpress-themes" rel="nofollow" title="Premium Wordpress Themes">Wordpress</a></li></ul></div>
		</ul>
	
	</div>

CSS

#sidebar1 {
    background: none repeat scroll 0 0 #000000;
    float: left;
    margin-left: 0;
    width: 168px;
}
#sidebar2 {
    float: right;
    margin-right: 0;
    margin-top: 0;
    width: 274px;
}
.sidebar {
    float: left;
    font-size: 12px;
    padding: 0;
    width: 210px;
}
.sidebar ul {
    line-height: 18px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.sidebar li {
    margin-bottom: 12px;
    padding: 0;
}
.sidebar li ul {
    padding: 0;
}
.sidebar li li {
    border: medium none;
    border-radius: 0 0 0 0;
    margin: 0;
    padding: 3px 0;
}
.sidebar li h2 {
    background: url("http://www.deluxetemplates.net/wp-content/themes/newprivatetheme/images/img-all.png") repeat-x scroll left bottom transparent;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    height: 29px;
    margin: -7px -7px -5px;
    padding: 8px 8px 11px;
    text-shadow: 0 1px 0 #000000;
    text-transform: none;
}
.sidebar a {text-decoration:none;
}
.blogger-wordpress ul li {
    background: url("http://www.deluxetemplates.net/wp-content/themes/newprivatetheme/images/img-all.png") no-repeat scroll 0 -354px transparent;
    padding: 0;
    margin: 0;
}
.blogger-wordpress li {
}
.blogger-wordpress ul {
    border: medium none !important;
    margin: 0 0 12px;
    text-shadow: 0 1px 0 #000000;
}
li#text-3.widget {
    border: medium none !important;
}
.blogger-wordpress ul li a:hover {
    background: url("http://www.deluxetemplates.net/wp-content/themes/newprivatetheme/images/img-all.png") no-repeat scroll 0 -318px transparent;
    color: #DDDDDD;
}
a.wordpress {
    color: #EEEEEE !important;
    font-weight: bold;
}
a.blogger {
    color: #EEEEEE !important;
    font-weight: bold;
}
.blogger-wordpress ul li a {
    border-top: 1px solid #323232;
    color: #999999;
    display: block;
    float: none;
    margin-bottom: 1px;
    padding: 7px 8px 7px...