Latest Updates: CracksTrick is now avilable as crackstrick.com

Stylish Design your Cloud Label and Categories Widget in 3D Style

4 comments
                                 
You Can Customized your blogger label so attractive by the using of CSS3 Widget. This widget is styled using CSS gradient color as background and box-shadow properties. If you have some knowledge about CSS3 then you will be able to Customized more attractive and impressive look as your style way. I am giving you 3 showcasing style by which you can customize your blogger cloud label. and note that you must have added cloud labels to your blog before you can customize it.


How to Add Labels Gadget In Blog:
  • Go to your blogger dashboard
  • Click on Design > Page elements > Add a Gadget (Old blogger interface)
  • Click on Layout > Add a Gadget (New blogger interface)
  • Choose Labels for the options provided in the pop-up window and set it as shown below.


How To Add Brick Style Labels Cloud In Blogger Using CSS:
  • Go To Blogger Dashboard > Design > Edit HTML > Expand Widget Templates (For New Interface Templates > Edit HTML) 
  • Backup Your Template Before Making Any Changes
  • Click (Ctrl + F) Search Give Below Code
  • ]]></b:skin>
Now choose any style that suit you from below options Copy The Code shown below and paste Before ]]></b:skin> Above it.

Style 1:

  • /*-----Custom Labels Cloud widget by www.crackstrick.blogspot----*/
    .label-size a {
        display: inline-block;
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
        padding: 4px 7px;
        font-family: 'Helvetica Neue', helvetica, sans-serif;
        font-size: 12px;
        line-height: 14px;
        height: 14px;
        vertical-align: middle;
        margin-bottom: 6px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        
        -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
        -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    }
    
    
    .label-size a {
        color: #996633;
        border: 1px solid #DDA13C;
         
        background: rgb(238,177,75);
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,  rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
        background: -webkit-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
        background: -o-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
        background: -ms-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
        background: linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 );
    }
    
    .label-size a:before  {
        content: '\2022';
        color: #FFFFFF;
        margin-right: 4px;
        font-size: 15px;
        line-height: 13px;
        height: 13px;
        vertical-align: text-top;
         
        text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
    }
    
    .label-size a:hover {
        text-decoration: none;
         
        background: rgb(240,183,86);
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,  rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
        background: -webkit-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
        background: -o-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
        background: -ms-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
        background: linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 );
    }
    /*-----Custom Labels Cloud widget by www.crackstrick.blogspot----*/

Style 2:
  • /*-----Custom Labels Cloud widget by www.crackstrick.blogspot----*/
    .label-size{
     margin:0;
     padding:0;
     position:relative;
     }
     .label-size a{
     float:left;
     height:24px;
     line-height:24px;
     position:relative;
     font-size:12px;
     margin-bottom: 9px;
     margin-left:20px;
     padding:0 10px 0 12px;
     background:#0089e0;
     color:#fff;
     text-decoration:none;
     -moz-border-radius-bottomright:4px;
     -webkit-border-bottom-right-radius:4px;
     border-bottom-right-radius:4px;
     -moz-border-radius-topright:4px;
     -webkit-border-top-right-radius:4px;
     border-top-right-radius:4px;
     }
    .label-size a:before{
     content:"";
     float:left;
     position:absolute;
     top:0;
     left:-12px;
     width:0;
     height:0;
     border-color:transparent #0089e0 transparent transparent;
     border-style:solid;
     border-width:12px 12px 12px 0; 
     }
    .label-size a:after{
     content:"";
     position:absolute;
     top:10px;
     left:0;
     float:left;
     width:4px;
     height:4px;
     -moz-border-radius:2px;
     -webkit-border-radius:2px;
     border-radius:2px;
     background:#fff;
     -moz-box-shadow:-1px -1px 2px #004977;
     -webkit-box-shadow:-1px -1px 2px #004977;
     box-shadow:-1px -1px 2px #004977;
     } 
    
    .label-size a:hover{background:#555;}
    .label-size a:hover:before{border-color:transparent #555 transparent transparent;}
    /*-----Custom Labels Cloud widget by www.crackstrick.blogspotc ----*/




Style 3: (Brick Style)
Screenshot: CSS Brick Style Label Cloud Widget For Blogger Blog
  • /*----Custom Labels Cloud widget by www.crackstrick.blogspot----*/
    .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;
    }
    /*----Custom Labels Cloud widget by www.crackstrick.blogspot----*/

4 comments:

  1. Thanks great post. I like it i shall refer this to my friends.
    My Blog is : Uniquetrick.blogspot.com

    ReplyDelete
  2. very useful & informative post. Please carry on

    ReplyDelete

Be sure to check back again because I do make every effort to reply to your comments here as soon as possible. Stay tuned with CracksTrick