Selasa, 01 Januari 2013

cara merubah tampilan label di blogger

label cloud widget

How it works

Each label link is nested inside a span tag followed by a class named label-size. If the font-size is not specified the widget changes font-size of each label according to its post-count. Therefore showing big and small clouds. Introducing custom styles would over-ride the exiting styles thus changing the entire look. 

Turn Random Cloud display into Blocks

The code below can be customized in several ways to create exciting label designs. You can also add background images to them.
Follow these easy steps:
  1. Go to Blogger > Settings> Layouts
  2. Click add a gadget and choose Labels                     
  3. Inside the settings make sure to choose the cloud display. You may set other options as per your requirement. See the screenshot below as example 
labels settings

Please choose to display at most 25 labels. Too much labels on homepage look awkward. Showcase your best categories only.

       4.    Now save the widget and go to settings > Template
       5.    Backup your template
       6.    Click Edit html > Proceed  and search for this

        7.   Just above it paste the following CSS code:
/*-----Custom Labels Cloud widget by*/
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;

.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;
text-decoration: none;
.label-size a:hover  {
text-decoration: none;

          8.  Save your template
         9.    All done!

Sumber :

 "Watch your thoughts; they become words. Watch your words; they become actions. Watch your actions; they become habits. Watch your habits; they become character. Watch your character; it becomes your destiny." LaoTzu
Share this article

0 komentar:

Posting Komentar

Copyright © 2014 Clickme More • All Rights Reserved.
Clickme More | Template Design by BTDesigner • Powered by Blogger
back to top