Announcement:

This is a Testing Annocement. I don't have Much to Say. This is a Place for a Short Product Annocement

Sunday, 9 June 2013

How to Have A MetroStyle Cloud Label Or Categories List for blogger

How to Have A MetroStyle Cloud Label Or Categories List
So in one of our previously featured Blogger tutorials you learned how to add a social sharing widget which design is inspired by Windows 8’s Metro-style UI. This time, you’ll learn how to design your Categories or Labels list in a similar fashion.
Sidhnath Sinha of TricksHunt came up with the CSS design so credit goes to him.
Follow the steps below.
  • From your Blogger dashboard, go to Design and then Template.
  • Choose Edit HTML then click on Proceed.
  • Using Ctrl+F, look for ]]></b:skin> in your blog’s template code.
  • Copy/paste the following code below right above it.
 
/*--- TricksHunt.com Custom Label Cloud --- */
.Label a{
padding-left:10px;
background:#0090D5;
padding:0 10px;
color:#fff!important;
height:26px;
line-height:26px;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:1px;
margin-top:1px;
font-size:13px; }
.Label a:hover{
background:#69625A;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: px;
}     
TIP: To change the label color, simply replace #0090D5 with the corresponding HEX code of your preferred color. To change the color of the label upon mouseover or on hover, replace #69625A. You can also change 13px t adjust the font size.
  • Save your template.
  • Next, go to Layout, click on the Edit button of your Labels gadget.
NOTE: If you currently have no Labels gadget then just click on an Add a Gadget button and then scroll down the list of gadgets and select Label.
  • Now follow these Label gadget settings:
Title = Labels
Show = All Labels
Sorting = Alphabetically
Display = Cloud
  • Uncheck Show number of posts per label.
  • Save your gadget and you’re done.
View your blog to see the effect. Enjoy and have a good day!

Share it Please

Islamicvideoportal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

0 comments:

Post a Comment

Copyright @ 2013 All Tutorials and Information . Designed by Templateism | Love for The Globe Press