May 2013 - Jazz

02:15

Simple but Cool & Awesome CSS3 Social Profile Widget with Zooming and Shrinking Effect ..

02:15

Today I am Adding One More Widget For "My Own Creation Group or Category".. As you all know I have 3 Widgets of My Own Creation in Before Posts.. So Today Let Me Share My Fourth Widget ..Its Simple Widget Made Using "CSS3" Effects..

Animated Preview :

Also See : How to Create Animated GIF Like Previewing Below..

This Widget Is Made Using the Concept Of Combined CSS3 Tutorials of Different Sites.. Thanks to them..

Live Demo ↓ :

Facebook
Like Us on Facebook

Twitter
Follow Us on Twitter

Google+
Add Us on Google+

RSS
Subscribe Us on RSS

So Now Lets get Started !!!

How to add this Widget to your Blog..

First Go to "Blogger" >> Then Go to your Blog "Dashboard"..
Now Click on Layout Section in the Left Side of your Blog "Dashboard"..
Now click on "Add Gadget" ..
You will get Many Options ..Scroll Down And Click on to "HTML/Java Script"..
Now Paste The Below Code in it..

Now click save..That's it ..all Done!!

Customization :

Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+,RSS with your Link..

Useful Note:

Update !!!!!!!! Made the CSS Code Shorter by Adding Link..
You can Also Edit this Widget like Width,Colour etc using HTML Editor of our Blog : HTML Editor..
You can Use Hexadecimal Color Code Generator of our Blog to Replace Colors : HexaDecimal Color Code Generator..

Important Note:

You Can Comment If any Problem Persist.. or Need Help With This Widget..
Also in Some Templates it may not be perfect.. In that Case Contact me..

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

05:00

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

05:00

Manjunath 0 Comments

                          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

05:13

Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.0 by MJN..

05:13

Manjunath 2 Comments

I have Posted My First Two Creation Using CSS3 Earlier In my Posts Before,, Those are

So after Working on Those Two Metro UI and Ribbon UI Widgets today I am Here With One More Metro UI Drop Down Menu Using CSS3..

I think and Hope you all Will Like it.. Take A Live Preview Live Demo

So let me Share you this Awesome Drop Down Menu..

How to Add this to your Blog:

First Go to "Blogger" and Go to your Blog Dashboard..
Now Click On "Layout" In Left Side of your Blog..
Now Click on "Add Gadget"..
You Will Get Many Widgets..Scroll Down to "HTML/JavaScript"..
Click On "HTML/JavaScript"..
Now Paste This Below Set of Code in it..

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<link rel="stylesheet" href="https://googledrive.com/host/0B_7JWdEqBhVVNTFlRld1RUpVeUE"/>

<div class="mjn-metro-menu">


<ul class="navi">
<li id="n1"><a class="mjn-tab1" href="http://mjntechtips.blogspot.in/" title="Home" ></a>
<ul class="sub">
<li class="l"><a class="mjn-fb" href="https://www.facebook.com/mjntech" title="Like Us on Facebook"></a></li>
<li class="c"><a class="mjn-tw" href="https://www.twitter.com/manjunathg17" title="Follow Us on Twitter"></a></li>
<li class="r"><a class="mjn-g" href="https://plus.google.com/u/0/116155905562588571799"></a></li>
<li class="r1"><a class="mjn-rss" href="https://feeds.feedburner.com/mjntech"></a></li>
</ul>
</li>
<li id="n2"><a class="mjn-tab2" href="http://mjntechtips.blogspot.in/search/label/" title="Tags" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab2sub" href="http://mjntechtips.blogspot.in/search/label/Windows"title="Windows"><span>Windows</span></a></li>
<li class="c"><a class="mjn-tab2sub" href="http://mjntechtips.blogspot.in/search/label/Blogger" title="Blogger"><span>Blogger</span></a></li>
<li class="r"><a class="mjn-tab2sub" href="http://mjntechtips.blogspot.in/search/label/CSS3" title="CSS/HTML"><span>CSS/HTML</span></a></li>
<li class="r1"><a class="mjn-tab2sub" href="http://mjntechtips.blogspot.in/search/label/Softwares" title="Softwares"><span>Softwares</span></a></li>
</ul>
</li>
<li id="n3"><a class="mjn-tab3" href="mjntechtips.blogspot.in/2013/" title="Blog Archive" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab3sub" href="mjntechtips.blogspot.in/2013/"><span>2013</span></a></li>
<li class="c"><a class="mjn-tab3sub" href="mjntechtips.blogspot.in/2013/"><span>2012</span></a></li>
<li class="r"><a class="mjn-tab3sub" href="mjntechtips.blogspot.in/2013/"><span>2011</span></a></li>
<li class="r1"><a class="mjn-tab3sub" href="mjntechtips.blogspot.in/2013/"><span>2010</span></a></li>
</ul>
</li>
<li id="n4"><a class="mjn-tab4" href="http://mjntechtips.blogspot.in/p/blog-page.html" title="Contact Us" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab4sub" href="#"><span>LINK 1</span></a></li>
<li class="c"><a class="mjn-tab4sub" href="#"><span>LINK 2</span></a></li>
<li class="r1"><a class="mjn-tab4sub" href="#"><span>LINK 3</span></a></li>
<li class="r"><a class="mjn-tab4sub" href="#"><span>LINK 4</span></a></li>
</ul>
</li>
<li id="n5"><a class="mjn-tab5" href="#" ><span></span></a>
</li>
</ul>
<div style="clear:both"></div>
</div>
</!doctype>

Now Click Save and Drag it to your desired position..

Customization :

Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+,RSS and other in Red with your Link..
Replace the Names Highlighted in Pink with your Words appropriate to link given..

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 of our Blog to Replace Colors : HexaDecimal Color Code Generator..
Also see : How to add Animated CSS3 Multi Drop Down Menu For Blogger...
Update!!!! Made the CSS Code Shorter by adding Link...

Important Note:

You Can Comment If any Problem Persist.. or Need Help With This Widget..
This will be updated soon with much more Menu's i.e.,Multilevel As soon as possible.
So Join our Blog and Subscribe for latest news updates..

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

23:29

Simple and Stylish Ribbon UI Social Profile Widget v1.0 by MJN For Blogger..

23:29

Manjunath 2 Comments

As you all know My First Attempt in CSS3 was and also is "Metro UI Social Profile and Search Box with Zoom & Glow Effects Widget v1.0 by MJN For Blogger " .. So I am here Today with another Social Profile Widget which is one of "MY Own Creation" with Ribbon UI..

Live Demo of Ribbon UI Social Profile Widget..

RSS Google+Twitter Facebook

So After Previewing Live Demo I think you are "Happy!!" to add it to your Blog or Site..

Let's Begin !!!!!!

How to Add Ribbon UI Social Profile Widget For Blogger :

First Go to "Blogger" and then go to your Blog "Dashboard"..
Now go to "Layout Section" which is in Left side of your Blog "Dashboard"..
Now click on "Add Gadget" .. Scroll Down and Click on "HTML/JavaScript"..
Now Paste the Below Code in it..

Now click save..That's it ..all Done!!

Customization :

Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+,RSS with your Link..

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.. or Need Help With This Widget..

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

01:34

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

01:34

Manjunath 0 Comments

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

Red Button

Blue Button

Yellow Button

Grey Button

Black Button

Brown Button

Dark Red Button

Purple Button

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

04:45

Metro UI Social Profile and Search Box with Zoom & Glow Effects Widget v1.0 by MJN For Blogger ..

04:45

Manjunath 0 Comments

You may have Seen Many CSS3 Widgets in my before Posts of my blog.. If you are new to my blog .:MJN Tech:. you can have a look at my before posts.. and also subscribe for Much More Latest Updates.. Before Posts of CSS3 Category was not made by my own but shared it so that it will be helpful to you all..
But Today's I am here to share My First Attempt In Making Widgets Using CSS3 & HTML.. Hope you all like it and also thinking to update it using much more effects lately..

So let's get back to it..

First attempt in CSS3, Zoom and Glowing Effect Widget by MJN

Here is a Live Demo : Make Sure That the Images Loads completely..

How to add this to your Blog ?? Here it is..

Go to Blogger and go to your blog..
Now go to Layout in Left side of your Blogger Dashboard..
Now click on Add Gadget and Choose HTML/JavaScript..
Now paste the Below Set of codes in it..

Now click save..That's it ..all Done!!

Customization :

Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+,RSS with your Link..
In some templates search box may not fit..so to change Height and Width Edit the Text Highlighted in Green Colur..

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.. or Need Help With This Widget..
This will be updated soon with much more effects lately..

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

01:24

How to add Animated CSS3 Multi Drop Down Menu For Blogger ...

01:24

Manjunath 0 Comments

In today's post I am Gonna Share about 'CSS3 Drop Down Menu' for your Blogger.. Many Of you Would be Searching for this Code.. Isn't It Friendzzz.. So here I will Explain you how to insert Stylish Animated CSS3 Multilevel Drop Down Menu ... Just Follow The Steps..

Live Demo

Features Of CSS3 Drop Down Menu:
It is one of the greatest CSS3 Drop down menu as it has heaps of handsome new features which make it unique from all menus. Let us look at few of its features.

Easy to use, Optimized with CSS3..
Speedy, No compromise in blog speed..
Compatible with Mobile ,iPad Versions too..
Stunning Multi Drop Down Menu..
Optimized with stunning Animated JQuery Jumping drop down effect..
Editing coding as easy as ABC..

Animated Preview:

Mobile Version Preview:

How to Add CSS3 Multilevel Drop Down Menu..

First Go to Blogger and Go to your Blog..
Now Click On page Elements In Left Side of your Blog..
Now Click on Add Gadget..
You Will Get Many Widgets..Scroll Down to HTML/JavaScript..
Click On HTML/JavaScript..
Now Paste This Below Set of Code in it..

7.Now Click save ..

Customization :

Now Replace "URL Here" Text Highlighted Pink with your Link..
And Replace the names beside "URL Here" Highlighted in RED ( such as Categories,About etc) to Appropriate name for the link..
That's it..Now Place It Where you need in your Blog such as Above Blog Post Column.

Useful Note:

You can Also Edit this menu like Width,Colour etc using HTML Editor of our Blog : HTML Editor..
You can Also add Multilevel Menu's more than in Above HTML..

Important Note:
You Can Comment If any Problem Persist.. or Need Help With This menu for Extra sub Level's as in 'Live Demo'

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

Subscribe Us

Most Popular

Most Used Tags

Blog Archive

Contact Us

02:15

Simple but Cool & Awesome CSS3 Social Profile Widget with Zooming and Shrinking Effect ..

Facebook

Like Us on Facebook

Twitter

Follow Us on Twitter

Google+

Add Us on Google+

RSS

Subscribe Us on RSS

05:00

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

05:13

Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.0 by MJN..

23:29

Simple and Stylish Ribbon UI Social Profile Widget v1.0 by MJN For Blogger..

01:34

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

04:45

Metro UI Social Profile and Search Box with Zoom & Glow Effects Widget v1.0 by MJN For Blogger ..

01:24

How to add Animated CSS3 Multi Drop Down Menu For Blogger ...

Categories