RSS Follow us on Google+ Follow us on Twitter! Follow us on Facebook! Follow us on Linkedin!

Attention

Permohonan maaf

Mohon maaf yang sedalam-dalamnya kepada seluruh pengunjung Blog AsalNy@mbung dikarenakan Blog masih dalam modifikasi jadi seluruh konten atau artikel belum tertata secara benar, baik tampilan maupun designnya, sekali lagi admin AsalNy@mbung Mohon maaf. dan terimaksih banyak sudah berkunjung, salam sukses selalu untuk sahabat blogger semuanya.

Home » » MetroStyle Cloud Label Or Categories List

MetroStyle Cloud Label Or Categories List

Written By Asal Nyambung on Friday, April 5, 2013 | 9:39 PM


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 this article :

0 comments:

Post a Comment

Terimakasih atas kunjungannya
Demi Perubahan Blog Ini Ke Arah Lebih Baik Saran Agan-Agan Sangat Bermanfaat, Terimakasih......!!!

 
Support : Kolom Tutorial™ | MPI. Al-Munfardiyyah
Copyright © 2013. Asal Ny@mbung - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger