Parrot Green Style Label Tag For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><b><span style="color: #93c47d;"><span style="font-size: large;">Parrot Green Style Label Tag For Blogger</span></span></b></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsziF9Ll2breiNC0oreIx_NoZzridks0AC9M3sIzh630FgVEkqD1oE-uaixe7d9q2Zy1uKYtDt-wnmjkyJyNmF5NKuRXE9OkpIF2ygrEPfZByz6ghaSOsY42zYtS_11NIj2XTZGA881NAM/s1600/Parrot-Green-Style-Label-Tag-For-Blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsziF9Ll2breiNC0oreIx_NoZzridks0AC9M3sIzh630FgVEkqD1oE-uaixe7d9q2Zy1uKYtDt-wnmjkyJyNmF5NKuRXE9OkpIF2ygrEPfZByz6ghaSOsY42zYtS_11NIj2XTZGA881NAM/s320/Parrot-Green-Style-Label-Tag-For-Blogger.jpg" width="320" /></a></div><br /><br /><span style="font-size: 15px;">Continuing from my recent post about Blogger Label Widget style , I present another CSS3 powered style. It uses :before and :after selectors extensively & cunningly to manipulate the shapes accompanied with CSS3 transform. CSS3 gradients are used for backgrounds. It also highlights the the count besides each label. It was originally designed by Jakob Cosoroaba , I just converted it into Blogger usable .  </span> <span style="font-size: 15px;"><br /></span><br /><br /><span style="font-size: 15px;">Before you get started make sure that your Blog has the Label Widget present already and set the Display option to Cloud and also tick the option to display the count. </span><br /><br /><div class="MsoNormal"><div style="text-align: left;"><h4><span style="background-color: white;"><b>How to Add Parrot Green Label Tag Style to Blogger?</b></span></h4></div></div><div class="MsoNormal"></div><div class="MsoNormal"><b><span style="font-family: Georgia;">STEP #1:</span></b><span style="font-family: Georgia;">Login to <b><a href="http://www.blogger.com/" target="_blank">Blogger</a></b>.</span></div><div class="MsoNormal"></div><div class="MsoNormal"><b><span style="font-family: Georgia;">STEP #2:</span></b><span style="font-family: Georgia;">Go to <b>Dashboard>Templates</b></span></div><div class="MsoNormal"></div><div class="MsoNormal"><b><span style="font-family: Georgia;">STEP #3:</span></b><span style="font-family: Georgia;">Now click on <b>Edit HTML>Proceed</b></span></div><div class="MsoNormal"></div><div class="MsoNormal"><b><span style="font-family: Georgia;">STEP #4:</span></b><span style="font-family: Georgia;">Find below code:</span></div><div class="MsoNormal"></div><span style="background: silver; font-family: "Courier New"; font-size: 10.0pt; mso-highlight: silver;">]]></b:skin></span><span style="font-size: 15px;"><span style="font-size: 15px;">  </span></span><span style="font-size: 15px;"><span style="font-size: 15px;"></span><br /></span><br /><div class="MsoNormal"><b><span style="font-family: Georgia;">STEP #5:</span></b><span style="font-family: Georgia;">Now Copy & Paste the below code above the above code:</span></div><br /><br /><blockquote class="tr_bq"><br />.label-size{display: inline-block;padding: 0px 10px;height: 29px;line-height:29px;border-radius: 5px;font-weight:bold;font-size:12px;text-decoration:none;}<br />.label-size{<br />  border: 1px solid #769e42;<br />  box-shadow: inset 0 1px 0 #c5e59c ;<br />  background-color: #9ed35a;<br />  text-shadow: 0px 1px 1px #6ea23b;<br />  color: #fff;<br />  background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />}<br />.label-size:hover{<br />  background-color: #b7fa66;<br />  background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);<br />  background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);<br />  background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);<br />  background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);<br />  background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);<br />}<br />.label-size:active{<br />  background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />}<br />.label-size{<br />  display:inline-block;<br />  border-radius: 5px 0 0 5px;<br />  border-right-width:0;<br />  position:relative;<br />  z-index:5;<br />  margin-right: 20px;<br />  margin-bottom: 10px;<br />}<br />.label-size:after{<br />  content: " ";<br />  width: 22px;<br />  height: 22px;<br />  line-height: 18px;<br />  font-size:25px;<br />  border-top: 1px solid #769e42;<br />  border-right: 1px solid #769e42;<br />  box-shadow: inset 0 1px 0 #c5e59c ;<br />  background-color: #9ed35a;<br />  text-shadow: 0px 1px 1px #7eac46;<br />  border-radius: 3px 7px 3px 0;<br />  color: #fff;<br />  background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  position:absolute;<br />  top: 3px;<br />  right: -12px;<br />  z-index:-3;<br />  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */<br />       -moz-transform: rotate(45deg);  /* FF3.5+ */<br />        -ms-transform: rotate(45deg);  /* IE9 */<br />         -o-transform: rotate(45deg);  /* Opera 10.5 */<br />            transform: rotate(45deg);<br />               filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */<br />                       M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');<br />                 zoom: 1;<br />}<br />.label-size:hover:after{<br />  background-color: #b7fa66;<br />  background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);<br />  background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);<br />  background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);<br />  background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);<br />  background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);<br />}<br /><br />.label-size:active:after{<br />  background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />  background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);<br />}<br /><br />.label-size:before{<br />  content: " ";<br />  height:5px;<br />  width:5px;<br />  display:block;<br />  position:absolute;<br />  right:-3px;<br />  top:11px;<br />  background-color: #fcfdf5;<br />  border: 1px solid #83ab52;<br />  border-radius:5px;<br />  box-shadow: 0 1px 0 #b2ddd83;<br /><br />}<br />.label-size span{<br />  padding:2px 5px;<br />  border: 1px solid #9e5c26;<br />  border-radius: 5px;<br />  box-shadow: inset 0 1px 0 #f5bf8c;<br />  background-color: #ed943f;<br />  text-shadow: 0px 1px 1px #000;<br />  margin-left: 10px;<br />  background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);<br />  background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);<br />  background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);<br />  background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);<br />  background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);<br />}<br />#Label1 {<span style="background-color: red;">height:210px</span> !important;}</blockquote><br /><br /><br /><div class="MsoNormal"><b><span style="background: white; font-family: Georgia;">STEP #6:</span></b><span style="background: white; font-family: Georgia;"> Here above in <span style="background: red; mso-highlight: red;">RED HIGHLIGHTED</span> has to be adjusted according to the number of Labels in your blog. If this is not done then the Labels might overlap with other widgets.<span class="apple-converted-space"> So adjust it your way.</span></span><span style="background: white; font-family: Georgia; mso-bidi-font-family: Arial;"></span></div><div class="MsoNormal"></div><div class="MsoNormal"><br /><b><span style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: Georgia;">STEP #7:</span></b><span style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: Georgia;"> Now Click on Save button.</span></div><div class="MsoNormal"></div><span style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: Georgia;">So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these <span class="IL_AD" id="IL_AD1">codes</span> just comment below for help. Stay tuned for more posts.</span><span style="font-family: Georgia;"></span><br /><br /></div>

Parrot Green Style Label Tag For Blogger

Parrot Green Style Label Tag For Blogger Continuing from my recent post about Blogger Label Widget style , I present another CSS3 powered st...

Read more »

Stylish Gradient CSS3 Buttons With Animated Shiny Line Spinning Effect On Hover

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><span style="color: #cc0000;"><span style="font-size: large;">Stylish Gradient CSS3 Buttons With Animated Shiny Line Spinning Effect On Hover Version 1.1</span></span></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSn5imCO1Fz0M7EutpQGk4Ff2yJIKCAPlgNB_sLvQKAMVvoVgiSAbj53l-5fugFzevO79tJXmSpTzxnphwnNGjCiKaK28PJ5GuSu5kKtSUIqxuHWOLdVNayZU8X7QpB6_J2nxb7cI-8E6Q/s1600/Demo-Of-Shiny-CSS3-Buttons-Gradient-Buttons-With-Shiny-Spinning-Effect-On-Hover.gif.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSn5imCO1Fz0M7EutpQGk4Ff2yJIKCAPlgNB_sLvQKAMVvoVgiSAbj53l-5fugFzevO79tJXmSpTzxnphwnNGjCiKaK28PJ5GuSu5kKtSUIqxuHWOLdVNayZU8X7QpB6_J2nxb7cI-8E6Q/s320/Demo-Of-Shiny-CSS3-Buttons-Gradient-Buttons-With-Shiny-Spinning-Effect-On-Hover.gif.gif" width="304" /></a></div><br /><br /><br />Make your Blog Stylish With These Buttons As per your blog color Theme or Use it for Demo Click<br /> 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..<br />  <br />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..<br /><br /><h4 style="text-align: left;">Easy Steps Add CSS3 Gradient Buttons Into Your Blog :</h4><div style="text-align: left;"></div><ul style="text-align: left;"><li>First Go to <a href="http://www.blogger.com/" target="_blank">Blogger</a> and Go to Your Blogger Dashboard..</li><li>Now Go to Template Section Which is in Left Side of your Blogger Dashboard..</li><li>Before Clicking On Edit HTML Backup your Template by Clicking "Backup/Restore" which is in Right side Top of your Blogger Dashboard..  </li><li>Now click on "Download Template" so that if any problem persist after editing template you can restore it..</li><li>After Backup of your Template now click on "Edit HTML"..</li><li>Now find "<span style="background-color: #cccccc;">]]></b:skin></span>" by clicking "Ctrl+F" in your Blogger Template Codes..</li><li>Now place Below Set of CSS Code above "<span style="background-color: #cccccc;">]]></b:skin></span>"..</li></ul><blockquote class="tr_bq"><br /><div class="codebox">.mjn-button{<br />    height:2em;<br />    padding:15px 50px;<br />    margin:20px 40px;<br />    cursor:pointer;<br />    display:inline-block;<br />    color:#FFF !important;<br />    font-size:1em;<br />    border:1px solid #eee;<br />    background:#eee;<br />    border-radius:4px;<br />    line-height:2em;<br />    border:1px solid #aaa;<br />    text-decoration:none;<br />    -webkit-transition: all 0.3s linear;<br />     -khtml-transition: all 0.3s linear;<br />       -moz-transition: all 0.3s linear;<br />         -o-transition: all 0.3s linear;<br />            transition: all 0.3s linear;<br />}<br />/********************************************************<br />          Green Background<br />*********************************************************/<br />.green{<br />    background: #cdeb8e; /* Old browsers */<br />    background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); /* FF3.6+ */<br />    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */<br />    background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */<br />    background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Opera 11.10+ */<br />    background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* IE10+ */<br />    background: linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* W3C */<br />    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */<br />}<br />/***********************************************************<br />              Red Background<br />***********************************************************/<br />.red{<br />    background: #ff3019; /* Old browsers */<br />    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */<br />    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */<br />    background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */<br />    background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */<br />    background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */<br />    background: linear-gradient(top, #ff3019 0%,#cf0404 100%); /* W3C */<br />    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */<br />}<br />/*************************************************<br />             Yellow Background<br /> ************************************************/<br />.yellow{<br />    background: #ffd65e; /* Old browsers */<br />    background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* FF3.6+ */<br />    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */<br />    background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */<br />    background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */<br />    background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* IE10+ */<br />    background: linear-gradient(top, #ffd65e 0%,#febf04 100%); /* W3C */<br />    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */<br />}<br />/******************************************<br />              Grey Background<br /> ******************************************/<br />.grey{<br />    background: rgb(238,238,238); /* Old browsers */<br />    background: -moz-linear-gradient(left, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */<br />    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+ */<br />    background: -webkit-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */<br />    background: -o-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */<br />    background: -ms-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */<br />    background: linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */<br />    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */<br />}<br />/******************************************<br />         Black Background<br /> ******************************************/<br />.black{<br />    background: #7d7e7d; /* Old browsers */<br />    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */<br />    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */<br />    background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */<br />    background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */<br />    background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */<br />    background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */<br />    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */<br />}<br />/******************************************<br />        Brown Background<br /> ******************************************/<br />.brown{<br />    background: #f6e6b4; /* Old browsers */<br />    background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */<br />    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */<br />    background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */<br />    background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */<br />    background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */<br />    background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */<br />    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */<br />}<br />/**********************************************<br />             Blue Background<br /> **********************************************/<br />.blue{<br />    background: #7abcff; /* Old browsers */<br />    background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */<br />    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */<br />    background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */<br />    background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */<br />    background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */<br />    background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */<br />    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */<br />}<br />/*****************************************<br />      Dark Red Background<br /> *****************************************/<br />.darkred{<br />    background: rgb(169,3,41); /* Old browsers */<br />    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+ */<br />    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+ */<br />    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+ */<br />    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+ */<br />    background: -ms-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */<br />    background: linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */<br />    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 */<br />}<br />/*******************************************<br />             Purple Background<br /> *******************************************/<br />.purple{<br />    background: rgb(203,96,179); /* Old browsers */<br />    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+ */<br />    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+ */<br />    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+ */<br />    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+ */<br />    background: -ms-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* IE10+ */<br />    background: linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* W3C */<br />    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=1 ); /* IE6-9 */<br />}<br />.mjn-button:hover{<br />    -webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;<br />     -khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;<br />       -moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;<br />         -o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;<br />            box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;<br />}<br />.mjn-button:active {<br />    -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;<br />     -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;<br />       -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;<br />         -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;<br />            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;<br />    text-shadow:1px 1px 1px #eee;<br />}<br />.light {<br />    display: block;<br />    position: relative;<br />    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+ */<br />    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+ */<br />    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+ */<br />    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+ */<br />    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+ */<br />    background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* W3C */<br />    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */<br />    padding: 1px 9px;<br />    top: -16px;<br />    left: -53px;<br />    height: 0px;<br />}<br />.mjn-button:hover .light{<br />    padding:1px 5px;<br />    -webkit-animation-name: shine;<br />    -webkit-animation-duration: 0.6s;<br />    -webkit-animation-timing-function: linear;<br />    -khtml-animation-name: shine;<br />    -khtml-animation-duration: 0.6s;<br />    -khtml-animation-timing-function: linear;<br />    -moz-animation-name: shine;<br />    -moz-animation-duration: 0.6s;<br />    -moz-animation-timing-function: linear;<br />    -o-animation-name: shine;<br />    -o-animation-duration: 0.6s;<br />    -o-animation-timing-function: linear;<br />    -webkit-animation-name: shine;<br />    -webkit-animation-duration: 0.6s;<br />    -webkit-animation-timing-function: linear;<br />    left:45px;<br />}<br />@-webkit-keyframes shine {<br />    0% { top: -15px; left: -48px; }<br />    10% { top: -5px; }<br />    20% { top: 5px; }<br />    30% { top: 15px; }<br />    40% { top: 25px; }<br />    50% { top: 35px; }<br />    60% { top: 25px; }<br />    70% { top: 15px; }<br />    80% { top: 5px; }<br />    90% { top: -5px; }<br />    100% { top:-15px; left:45px; -webkit-transform: rotate(-360deg); }<br />}<br />@-khtml-keyframes shine {<br />    0% { top: -15px; left: -48px; }<br />    10% { top: -5px; }<br />    20% { top: 5px; }<br />    30% { top: 15px; }<br />    40% { top: 25px; }<br />    50% { top: 35px; }<br />    60% { top: 25px; }<br />    70% { top: 15px; }<br />    80% { top: 5px; }<br />    90% { top: -5px; }<br />    100% { top:-15px; left:45px; -khtml-transform: rotate(-360deg); }<br />}<br />@-moz-keyframes shine {<br />    0% { top: -15px; left: -48px; }<br />    10% { top: -5px; }<br />    20% { top: 5px; }<br />    30% { top: 15px; }<br />    40% { top: 25px; }<br />    50% { top: 35px; }<br />    60% { top: 25px; }<br />    70% { top: 15px; }<br />    80% { top: 5px; }<br />    90% { top: -5px; }<br />    100% { top:-15px; left:45px; -moz-transform: rotate(-360deg); }<br />}<br />@-o-keyframes shine {<br />    0% { top: -15px; left: -48px; }<br />    10% { top: -5px; }<br />    20% { top: 5px; }<br />    30% { top: 15px; }<br />    40% { top: 25px; }<br />    50% { top: 35px; }<br />    60% { top: 25px; }<br />    70% { top: 15px; }<br />    80% { top: 5px; }<br />    90% { top: -5px; }<br />    100% { top:-15px; left:45px; -o-transform: rotate(-360deg); }<br />}<br />@-keyframes shine {<br />    0% { top: -15px; left: -48px; }<br />    10% { top: -5px; }<br />    20% { top: 5px; }<br />    30% { top: 15px; }<br />    40% { top: 25px; }<br />    50% { top: 35px; }<br />    60% { top: 25px; }<br />    70% { top: 15px; }<br />    80% { top: 5px; }<br />    90% { top: -5px; }<br />    100% { top:-15px; left:45px; transform: rotate(-360deg); }<br />}<br />   </div></blockquote><div class="codebox"></div><div class="codebox"></div><div class="codebox">End of  Css3 Gradient Shiny Spinning Effect Button </div><div class="codebox">Now Click On Save Template..</div><br /><h4 style="text-align: left;">How to use This Code in Posts: </h4><ul style="text-align: left;"><li>To add This Buttons in Post go to HTML Part of your Post and Add this below code According to your Color..</li></ul><br /><h4 style="text-align: left;">Green Button</h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="<span style="color: red;">Url-Here</span>" class="mjn-button green"><br /><div class="light"></div><span style="color: magenta;">Your Text</span></a> </div><br /><h4 style="text-align: left;">Red Button</h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="<span style="color: red;">Url-Here</span>" class="mjn-button red"><br /><div class="light"></div><span style="color: magenta;">Your Text</span></a></div><br /><h4 style="text-align: left;">Blue Button</h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="<span style="color: red;">Url-Here</span>" class="mjn-button blue"><br /><div class="light"></div><span style="color: magenta;">Your Text</span></a></div><br /><h4 style="text-align: left;">Yellow Button </h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="<span style="color: red;">Url-Here</span>" class="mjn-button yellow"><br /><div class="light"></div><span style="color: magenta;">Your Text</span></a></div><br /><h4 style="text-align: left;">Grey Button </h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="<span style="color: red;">Url-Here</span>" class="mjn-button grey"><br /><div class="light"></div><span style="color: magenta;">Your Text</span></a> </div><br /><h4 style="text-align: left;">Black Button </h4><div style="text-align: left;"></div><div class="codebox"><div style="text-align: left;"><a href="<span style="color: red;">Url-Here</span>" class="mjn-button black"></div><div style="text-align: left;"><div class="light"></div><span style="color: magenta;">Your Text</span></a></div></div><br /><h4 style="text-align: left;">Brown Button</h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="<span style="color: red;">Url-Here</span>" class="mjn-button brown"><br /><div class="light"></div><span style="color: magenta;">Your Text</span></a></div><br /><h4 style="text-align: left;">Dark Red Button</h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="<span style="color: red;">Url-Here</span>" class="mjn-button darkred"><br /><div class="light"></div><span style="color: magenta;">Your Text</span></a></div><br /><h4 style="text-align: left;">Purple Button</h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="<span style="color: red;">Url-Here</span>" class="mjn-button purple"><br /><div class="light"></div><span style="color: magenta;">Your Text</span></a></div><br />That's it ..All Done!!..<br /><br /><div class="note"><h4 style="text-align: left;"><b>  </b><b> </b>Customization :</h4><ul style="text-align: left;"><li>Now Replace "<span style="color: red;">URL Here</span>" Text Highlighted <span style="color: red;">Red</span> with your Link.. </li><li>And Replace "<span style="color: magenta;">Your Text</span>" in<span style="color: magenta;"> pink</span> with Download or Demo or What ever you want..</li></ul></div></div>

Stylish Gradient CSS3 Buttons With Animated Shiny Line Spinning Effect On Hover

Stylish Gradient CSS3 Buttons With Animated Shiny Line Spinning Effect On Hover Version 1.1 Make your Blog Stylish With These Buttons As per...

Read more »

Flashy Look Animated Label Cloud Widget For Blogger - Its Not Flash

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><span style="color: #cc0000;"><span style="font-size: large;">Flashy Look Animated Label Cloud Widget For Blogger - Its Not Flash</span></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaHj5MGuJaA0T9aVn3CKEzpBI-PZpa61YGFHtvMhkZUPR3D4fp25ZzSnnw1Q95OjEX2YI2GvClLiPiEB1B-mUkninQ5CWtJhkkFnL1cRBqTBz9YcpcQMR-y28InTXXzctHXk5UuWdV6pJl/s1600/Flash-Animated-Label-Cloud-Widget-for-blogger-2014.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaHj5MGuJaA0T9aVn3CKEzpBI-PZpa61YGFHtvMhkZUPR3D4fp25ZzSnnw1Q95OjEX2YI2GvClLiPiEB1B-mUkninQ5CWtJhkkFnL1cRBqTBz9YcpcQMR-y28InTXXzctHXk5UuWdV6pJl/s320/Flash-Animated-Label-Cloud-Widget-for-blogger-2014.gif" width="256" /></a></div>Hi Bloggiyan! Today We Are Sharing Cool Flash animated label cloud is an awesome widget to show your blog.Its A easy to add Via Widget No Need Modification In Template .This Widget will add beauty to your blog & user will focus it quickly after loading  your blog. its load fast because it doesn't contain any Flash file or script.We recommend you to add this cool animated widget to your blog .<br /><br /><h4 style="text-align: left;">Easy Single Step To Install Animated Label Cloud Widget </h4><b>1. Login To Your Blogger Account. </b><br /><b>2. Open Blogger Dashboard.</b><br /><b>3. Click Layout-->Add A Gadget. </b><br /><b>4. Now Select HTML/Javascript From Gadget List. </b><br /><b>5. Paste The Following Code In Content Section.</b><br /><div class="postmsgg23" style="font-family: "Courier New",Courier,monospace;"><script type="text/javascript">  /*<![CDATA[*/  var NBTFlashLabelSettings = {blogurl : "<b><span style="color: red;">http://www.s2free.blogspot.com/</span></b>", color : <b>"<span style="color: #3d85c6;">99cc00</span>"</b>, hoverColor : "333334", backgroundColor: "FFFFFF", size : 11, speed : 99, width: 250, height: 300, transparency :true  };  /*]]>*/  </script>  <script src="https://lables.googlecode.com/files/labels.js" type="text/javascript"></script></div><br /><b>6. Save Done!</b><br /><h4 style="text-align: left;">Customization:</h4><br />Change URL : <b><span style="color: red;">http://www..blogspot.com/</span></b><br /><span style="color: red;"><span style="color: black;">Change Color : </span></span><span style="color: red;"><span style="color: black;"><b><span style="color: #3d85c6;">99cc00</span></b></span></span><br /><br /><div style="text-align: center;"><span style="color: red;"><span style="color: black;"><b><span style="color: #3d85c6;"><b><span style="color: #6aa84f;"><span style="font-size: medium;">Post Your Comments And Ideas For New Emoticons</span></span></b>  </span></b></span></span></div><div style="text-align: left;"></div><div style="text-align: left;"><br /></div><div class="hreview"><span class="item"> <span class="fn">Animated Label Cloud Widget For Blogger - Its Not Flash</span><br /> </span> Last Reviewed by <span class="reviewer">S2Free Blog Team</span> on <span class="dtreviewed">June 14 2013<br /> </span> Rating: <span class="rating">4.5</span><span style="color: red;"> </span></div></div>

Flashy Look Animated Label Cloud Widget For Blogger - Its Not Flash

Flashy Look Animated Label Cloud Widget For Blogger - Its Not Flash Hi Bloggiyan! Today We Are Sharing Cool Flash animated label cloud is an...

Read more »