2016 July 19 Archive - EXEIdeas – Let's Your Mind Rock

Blogger Labels Widget displays list of the categories of blogger posts. Creating labels helps to categorize the posts in groups or its related category. So it helps visitors to see the posts under a category and to find out there desired content easily. Default blogger Labels widget is not so Stylish and are simple in design like links. Now here we have This Labels widget can style using simple CSS codes.This Blogger Labels Widget will attract your readers to click on this widget that will increase your page views and keep your readers engage with your awesome content. So now use Blogger Popular to show your posts in coloured style.Features:1.) No JavaScript Added.2.) No JQuery File Added.3.) Stylish CSS Added.4.) Simple And Fast Loading Code.5.) Can Work With Any Browser.6.) Work With Any Blogger Domain.7.) Can See The Post Title and Post Thumbnails.8.) Plain In Design.9.) Fully Customizable With Your Design.10.) Can Control Everything.How To Add In Blogspot?1.) Go To Your www.blogger.com2.) Open Your Desire “Blog”.3.) Go To “Layout”.4.) Click “Add A Gadget” Where You Want To Add It.5.) Now Scroll To “HTML-JAVASCRIPT”6.) Click “+” Icon To Add It.7.) Now “Copy” The Below Code And “Paste” It To There.8.) Leave The “Title” Empty.9.) Click “Save”, Now You Are Done.Black Forest Theme Labels With Animated Scaling For BLogger Labels Widget: .Label li {background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;border: 1px solid;border-radius: 6px 6px 6px 6px;float: left;font-size: 116%;list-style: none outside none;margin: 2px;padding: 4px;transition: all 0.3s ease 0s;}.Label li:hover {transform: rotate(351deg) scale(1.7);}.Label a {color: #fff;text-decoration: none;} Yellow Customized For BLogger Labels Widget: .Label li:before {background-image: -moz-linear-gradient(left top , #FEDA71, #FEBA47);border-bottom: 1px solid #D99D38;border-left: 1px solid #D99D38;content: "";height: 1.39em;left: -0.69em;position: absolute;top: 0.2em;transform: rotate(45deg);width: 1.3em;z-index: 1;}.Label li:after {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #D99D38;border-radius: 4.167em 4.167em 4.167em 4.167em;box-shadow: 0 1px 0 #FAEABA;content: "";height: 0.5em;left: -0.083em;position: absolute;top: 0.667em;width: 0.5em;z-index: 9999;}.Label li {background-image: -moz-linear-gradient(center top , #FEDA71, #FEBA47);border-bottom: 1px solid #D99D38;border-radius: 0 0.25em 0.25em 0;border-right: 1px solid #D99D38;border-top: 1px solid #D99D38;box-shadow: 0 1px 0 #FAEABA inset, 0 1px 1px rgba(0, 0, 0, 0.1);color: #996633;float: left;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;font-size: 0.75em;font-weight: bold;list-style: none outside none;margin: 0 0 7px 20px;padding: 0.417em 0.417em 0.417em 0.917em;position: relative;text-decoration: none;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);z-index: 1;} Blue Customized For BLogger Labels Widget: .Label li:before {background-image: -moz-linear-gradient(center top , #1E5799 0%, #207CCA 100%);border-bottom: 1px solid #145091;border-left: 1px solid #145091;content: "";height: 1.39em;left: -0.69em;position: absolute;top: 0.2em;transform: rotate(45deg);width: 1.3em;z-index: 1;}.Label li:after {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #3F6893;border-radius: 4.167em 4.167em 4.167em 4.167em;box-shadow: 0 1px 0 #B5D8FF;content: "";height: 0.5em;left: -0.083em;position: absolute;top: 0.667em;width: 0.5em;z-index: 9999;}.Label li {background-image: -moz-linear-gradient(center top , #1E5799, #207CCA);border-bottom: 1px solid #145091;border-radius: 0 0.25em 0.25em 0;border-right: 1px solid #145091;border-top: 1px solid #145091;box-shadow: 0 1px 0 #CCE4FF inset, 0 1px 1px rgba(0, 0, 0, 0.1);color: #996633;float: left;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;font-size: 0.75em;font-weight: bold;list-style: none outside none;margin: 0 0 7px 20px;padding: 0.417em 0.417em 0.417em 0.917em;position: relative;text-decoration: none;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);z-index: 1;} Black Forest Theme Label For BLogger Labels Widget: .Label li {background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;border: 1px solid;border-radius: 6px 6px 6px 6px;float: left;font-size: 116%;list-style: none outside none;margin: 2px;padding: 4px;transition: all 0.3s ease 0s;}.Label li:hover {transform: rotate(5deg);}.Label a {color: #fff;text-decoration: none;} Skeleton Theme For BLogger Labels Widget: .Label a {color: #000000;text-decoration: none;}.Label li {border: 1px solid #000;border-radius: 6px 6px 6px 6px;color: #000000 !important;float: left;font-size: 116%;list-style: none outside none;margin: 2px;padding: 4px;transition: all 0.3s ease 0s;}.Label li:hover {transform: rotate(5deg);} Skeleton Theme With Painting Hover Effect For BLogger Labels Widget: .Label a:hover {text-shadow:5px 5px 5px #dcdcdc;background:orange;border:1px solid orange;border-bottom-right-radius: 0px;border-top-left-radius: 0px;border-bottom-left-radius: 30px;border-top-right-radius: 30px;}.Label li {border: 1px solid;border-radius: 6px 6px 6px 6px;color: #000000 !important;float: left;font-size: 116%;list-style: none outside none;margin: 2px;padding: 4px;transition: all 0.3s ease 0s;}.Label a {color: #000;text-decoration: none;}.Label li:hover {transform: rotate(5deg);} Leaf Theme For BLogger Labels Widget: .Label a {-moz-border-bottom-colors: none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;background-color: #7FBF4D;background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);border-bottom-right-radius: 30px;border-color: #63A62F #63A62F #5B992B;border-image: none;border-style: solid;border-top-left-radius: 30px;border-width: 1px;box-shadow: 0px 1px 0px 0px #96CA6D inset;color: #FFFFFF;float: left;font: 14px verdana;height: 18px;margin-bottom: 9px;margin-left: 10px;padding: 10px;position: relative;text-decoration: none;transition: all 0.5s ease-in-out 0s;}.Label a:hover {background: none repeat scroll 0% 0% orange;border-radius: 0px 30px 0px 30px;border: 1px solid orange;text-shadow: 5px 5px 5px #DCDCDC;}.Label {margin: 0px;padding: 0px;position: relative;}.Label li:hover {transform: rotate(5deg);}.Label li {float: left;font-size: 116%;list-style: none outside none;transition: all 0.3s ease 0s;} Circular Cloud Effect For BLogger Labels Widget: .Label a{padding-left:20px;background:#000;padding:0 20px;color:#fff!important;border-radius:100px;-moz-border-radius:100px;height:32px;line-height:32px;text-transform:uppercase;text-decoration:none;border:none !important;-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;float:left;margin-left:5px;margin-top:5px;font-size:14px;}.Label a:hover{color:#000 !important;background:#ff0;} Simple Label With Count For BLogger Labels Widget: .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size {background:#0dd7b4;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;}.label-size:hover {background:#333333;}.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333333;color:#fff !important;}.label-size {line-height:1.2} Curvey Label With Count For BLogger Labels Widget: .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size {border:5px dashed #000000;border-bottom-right-radius: 30px;border-top-left-radius: 30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;}.label-size:hover {border:5px dashed #FA0830;background:#000000;}.label-count {white-space:nowrap;border-bottom-right-radius: 30px;border-top-left-radius: 30px;padding-right:3px;margin-left:-3px;background:#000000;color:#fff !important;}.label-size {line-height:1.2} Customization:Nothing to change here by default. Edit your CSS if you are a pro and want more customization.Last Words:That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…