GifCam-The Easiest Way to Capture Screen Video In .GIF Format or to Create Animated GIFs..

                          GifCam is easy and fun animated gif making app.GifCam has a nice idea where the app works like a camera that stays on top of all windows so you can move it and resize it to record your desired area.
                        Quickly make an animated GIF of anything. GifCam is a free, portable app for Windows that provides you with a simple frame. Re size and position it, then hit record – everything that happens within that frame will be recorded. It’s the easiest way to create your own GIF of just about anything — from desktop demonstrations to clips from any video, online or off. If you love creating GIFs, but wish the process was quicker, you need to check this app out.
                          The animated GIF just might be older than you – it’s been around since 1987, and really took off in the early days of the web. It declined at the end of the 90′s, and to some it’s an obsolete way to show animations online – but you wouldn’t know that to look at the web today. Animated GIFs are everywhere. From the endless scrolling of Tumblr to reaction shots on Reddit, GIFs are probably seen by more humans today than any point in their history.

How to Make GIFs in Easy Way..

• GifCam looks like any other window – except you can see through it. Think of the window as the frame of your virtual video camera – one you can resize and move however you like.

• You can use this to record just about anything. Your favorite YouTube video. Or To preview the Animated Demo of your Work ..Like below I am Previewing the "Animated Metro UI Drop Down Menu" created by Me..which is my Previous Post of this Blog..

• Just Download this GifCam Software From Link which is given at the End of this post and Run the App...
• Then Adjust the Size of Recording Area by Resizing the Window of APP..
• Then Click on "Rec" .which will start Recording the frames..
• As your Recording is done!! Click on Stop..
• Then Click on Save..
• That's it  ..Done!!!

Note:

• You can Get More Information and Tips also can Download this APP  @ GifCam | BahraniApps Blog
• This App is Very Useful For Bloggers also Facebook Users  to Upload Gif instead of Video's :P ..

I hope you have found this post helpful..

Don't forget to Subscribe , Comment and Share this post..

With Regard's ,

Manjunath.G..

.:MJN Tech:.

Read Article

How to add CSS3 Gradient Buttons With Shiny Spinning Effect of Different Colour to Your Post..

                       Many Of you may have Searched before or Searching Now for Download or Demo or Whatever Buttons to use in your Blogger post or Website post.. In my Before Post I have Shared My Own Widget Created for the First time Using CSS3..  So  Today I am Going to share A Beautiful CSS3 Gradient Buttons With Shiny Spinning Effect With Multicolor Buttons..

Live Demo

                        So are you happy or curious to add this Awesome  CSS3 Gradient Buttons With Shiny Spinning Effect to you Blog or Website post?? Then Let's begin.. Now I will Explain How to add this to your Blogger Post..Just follow Simple Steps Mentioned Below..

How to add CSS3 Gradient Buttons :

• First Go to Blogger and Go to Your Blogger Dashboard..
• Now Go to Template Section Which is in Left Side of your Blogger Dashboard..
• Before Clicking On Edit HTML Backup your Template by Clicking "Backup/Restore" which is in Right side Top of your Blogger Dashboard.. 
• Now click on "Download Template" so that if any problem persist after editing template you can restore it..
• After Backup of your Template now click on "Edit HTML"..
• Now find "]]></b:skin>" by clicking "Ctrl+F" in your Blogger Template Codes..
• Now place Below Set of CSS Code above "]]></b:skin>"..

/*****************************************************************************************************************
   Start of  Css3 Gradient Shiny Spinning Effect Button by .:MJN Tech:.
******************************************************************************************************************/
.mjn-button{
    height:2em;
    padding:15px 50px;
    margin:20px 40px;
    cursor:pointer;
    display:inline-block;
    color:#FFF !important;
    font-size:1em;
    border:1px solid #eee;
    background:#eee;
    border-radius:4px;
    line-height:2em;
    border:1px solid #aaa;
    text-decoration:none;
    -webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}
/********************************************************
          Green Background
*********************************************************/
.green{
    background: #cdeb8e; /* Old browsers */
    background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* IE10+ */
    background: linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */
}
/***********************************************************
              Red Background
***********************************************************/
.red{
    background: #ff3019; /* Old browsers */
    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
    background: linear-gradient(top, #ff3019 0%,#cf0404 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}
/*************************************************
             Yellow Background
 ************************************************/
.yellow{
    background: #ffd65e; /* Old browsers */
    background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* IE10+ */
    background: linear-gradient(top, #ffd65e 0%,#febf04 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
}
/******************************************
              Grey Background
 ******************************************/
.grey{
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
    background: linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */
}
/******************************************
         Black Background
 ******************************************/
.black{
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
    background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}
/******************************************
        Brown Background
 ******************************************/
.brown{
    background: #f6e6b4; /* Old browsers */
    background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
    background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}
/**********************************************
             Blue Background
 **********************************************/
.blue{
    background: #7abcff; /* Old browsers */
    background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
    background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}
/*****************************************
      Dark Red Background
 *****************************************/
.darkred{
    background: rgb(169,3,41); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */
    background: linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 */
}
/*******************************************
             Purple Background
 *******************************************/
.purple{
    background: rgb(203,96,179); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(203,96,179,1) 0%, rgba(173,18,131,1) 50%, rgba(222,71,172,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(203,96,179,1)), color-stop(50%,rgba(173,18,131,1)), color-stop(100%,rgba(222,71,172,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* IE10+ */
    background: linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=1 ); /* IE6-9 */
}
.mjn-button:hover{
    -webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
     -khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
       -moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
         -o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
            box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
.mjn-button:active {
    -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
     -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
       -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
         -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
    text-shadow:1px 1px 1px #eee;
}
.light {
    display: block;
    position: relative;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    padding: 1px 9px;
    top: -16px;
    left: -53px;
    height: 0px;
}
.mjn-button:hover .light{
    padding:1px 5px;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    -khtml-animation-name: shine;
    -khtml-animation-duration: 0.6s;
    -khtml-animation-timing-function: linear;
    -moz-animation-name: shine;
    -moz-animation-duration: 0.6s;
    -moz-animation-timing-function: linear;
    -o-animation-name: shine;
    -o-animation-duration: 0.6s;
    -o-animation-timing-function: linear;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    left:45px;
}
@-webkit-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -webkit-transform: rotate(-360deg); }
}
@-khtml-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -khtml-transform: rotate(-360deg); }
}
@-moz-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -moz-transform: rotate(-360deg); }
}
@-o-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -o-transform: rotate(-360deg); }
}
@-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; transform: rotate(-360deg); }
}
/*************************************************************************************************
   End of  Css3 Gradient Shiny Spinning Effect Button by .:MJN Tech:.
**************************************************************************************************/

• Now Click On Save Template..

How to use This Code in Posts:

• To add This Buttons in Post go to HTML Part of your Post and Add this below code According to your Color..

Green Button

<a href="Url-Here" class="mjn-button green">
<div class="light"></div>Your Text</a>

Red Button

<a href="Url-Here" class="mjn-button red">
<div class="light"></div>Your Text</a>

Blue Button

<a href="Url-Here" class="mjn-button blue">
<div class="light"></div>Your Text</a>

Yellow Button

<a href="Url-Here" class="mjn-button yellow">
<div class="light"></div>Your Text</a>

Grey Button

<a href="Url-Here" class="mjn-button grey">
<div class="light"></div>Your Text</a>

Black Button

<a href="Url-Here" class="mjn-button black">
<div class="light"></div>Your Text</a>

Brown Button

<a href="Url-Here" class="mjn-button brown">
<div class="light"></div>Your Text</a>

Dark Red Button

<a href="Url-Here" class="mjn-button darkred">
<div class="light"></div>Your Text</a>

Purple Button

<a href="Url-Here" class="mjn-button purple">
<div class="light"></div>Your Text</a>

That's it ..All Done!!..

   Customization :

• Now Replace "URL Here" Text Highlighted Red with your Link..
• And Replace "Your Text" in pink with Download or Demo or What ever you want..

Useful Note:

• You can Also  Edit this menu like Width,Colour etc using HTML Editor of our Blog   : HTML Editor..
• You can Use Hexadecimal Color Code  Generator to Replace Colors of our Blog : HexaDecimal Color Code Generator..

Important Note:

• You Can Comment If any Problem Persist..

I hope you have found this post helpful..

Don't forget to Subscribe , Comment and Share this post..

With Regard's ,

Manjunath.G..

.:MJN Tech:.

Read Article

Add CSS3 Stylish Brick like Label Box to Your Blog..

In this tutorial we will see how to customize blogger labels and replace it with CSS3 and make them box style.We will apply this hack with using of pure CSS3 and will replace some existing code with new code in your template.These CSS3 bricks/box labels really attract readers.I am also using these bricks/box style label on this blog,you can see demo at right sidebar of this blog.Now lets see how to apply this tweak..

So lets begin..

First you have to add Labels Widget to your blog..Have you not added it yet..Then I will Show you How?? 

1. Go to your 'Blogger Dashboard' and go to 'Layout Section' on your blog..
2. Click on 'Add Gadget'..
3. You can see many Gadgets ..Scroll Down and you can find 'Labels' Gadget..
4. Click on 'Labels' and Save it..
5. Now you will see Default Blogger Labels in your Blog..

How To Customize Blogger Labels With CSS3?

First we have to edit some settings of our label widget.Save your label widget settings as in Image Below..

After Editing your Label Widget as in above follow these Steps....

1. Now go to Blogger Dashboard and go to 'Template' Section..
2. Before Editing Download a copy of your template..
3. Click on Edit HTML..
4.  Now Find below code in your template by Using Ctrl+F buttons ....

]]></b:skin>

After Finding it add the below CSS Code above "]]></b:skin>"

/*******************************************
  Labels Widget By MJN Tech
*******************************************/  
 #mjn-labels-w {
        color: #666;
        font-size: 0.925em;
        font-style: italic;
        line-height: 1.6em
    }
   
    a.tag {
        color: #777;
        font: 9px verdana;
        text-transform: uppercase;
        transition: border-color .218s;
        background: #f4f4f4;
        background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
        display: inline-block;
        text-shadow: 0 1px 0 #fff;
        -webkit-transition: border-color .218s;
        -moz-transition: border .218s;
        -o-transition: border-color .218s;
        transition: border-color .218s;
        background: #f3f3f3;
        background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
        background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
        border: solid 1px #ccc;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        margin: 0 4px 4px 0;
        padding: 3px 5px;
        text-decoration: none
    }
   
    a.tag:hover {
        color: #333;
        border-color: #999;
        -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 2px rgba(0,0,0,0.15)
    }
   
    a.tag:active {
        color: #000;
        border-color: #444
    }
   
    .slides {
        font-size: 85%;
        line-height: 130%;
        overflow: hidden;
        padding: 0;
        margin: 30px 0 10px;
        border-bottom: 1px solid #000
    }
/********End*************/

After adding CSS code,,Now Find the below code ..

<b:widget id='Label1' locked='false'

Until the first code below

</b:widget>

After Finding these code.. Now Replace code from
<b:widget id='Label1' locked='false'
to
</b:widget>
 with below code,

    <b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
        <b:includable id='main'>
            <b:if cond='data:title'>
                <h2>
                    <data:title/>
                </h2>
            </b:if>
            <div class='mjn-labels-w'>
                <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
                    <b:if cond='data:display == &quot;list&quot;'>
                        <ul>
                            <b:loop values='data:labels' var='label'>
                                <li>
                                    <b:if cond='data:blog.url == data:label.url'>
                                        <span expr:dir='data:blog.languageDirection'>
                                            <data:label.name/>
                                        </span>
                                        <b:else/>
                                        <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                                    </b:if>
                                    <b:if cond='data:showFreqNumbers'>
                                        <span dir='ltr'>(
                                            <data:label.count/>)</span>
                                    </b:if>
                                </li>
                            </b:loop>
                        </ul>
                        <b:else/>
                        <b:loop values='data:labels' var='label'>
                            <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
                                <b:if cond='data:blog.url == data:label.url'>
                                    <span expr:dir='data:blog.languageDirection'>
                                        <data:label.name/>
                                    </span>
                                    <b:else/>
                                    <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                                </b:if>
                                <b:if cond='data:showFreqNumbers'>
                                    <span class='label-count' dir='ltr'>(
                                        <data:label.count/>)</span>
                                </b:if>
                            </span>
                        </b:loop>
                    </b:if>
                    <b:include name='quickedit' />
                </div>
            </div>
        </b:includable>
    </b:widget>

That's it..Now Save your Template ..and its Done..

Any Problem or Error Comment Below..

Thanks for Visiting..

With regards,

Manjunath.G

.:MJN Tech:.

Don't Forget to Subscribe, Share and Join us..

Read Article