Here i am going to share a new widget name categories or label widget blogger. This gadget is necessary for most every blogger blog because it makes blogger style and looks like categories. . We use label widget as a category widget and its very easy to use, You just have to do some css codes that i already give this to you hear and you have to just add them to blogger blog.
Categories widget looks like this
- Go to your blogger dashboard
- Click the Layout section of blogger blog that you want to add categories.
- Click on Add a Widget, A new window appear and click on Label widget by scrolling down.
- See the below image and Click on save after the same setting you did that show in picture.
- Now Go to blogger select your Template section of blogger
- Click on Edit HTML like in the box
- And and find this code ]]></b:skin>
- And just above this just add this code.
- .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #6BB5FF; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }
- Remember you have to paste the code on above the ]]></b:skin>
- Save Template
