Awesome and premium Popular posts widget with css hover effect for blogger

Gud evening my dear folks,Today i will be sharing and awesome blogger widget for popular post.Recently i have shared how add download buttonn but it's time for posts.

Nowadays,you should have a smart popular post widget with css effect.This popular post widget have number and css hover effect..
This widget increase ur blog pageviews..becoz people see how the blog looks like...So if u want to change ur simple blog into Smart blog,u must have this widget.......

Learn how to add this widget into ur blog........

IMPORTANT STEPS TO ADD THIS WIDGET

1. Go to ur blogger account...
2. Go to Template>Edit HTML
3. Now Search  ]]></b:skin> by pressing Ctrl+F
4. Now paste the below code above ]]></b:skin>

  .popular-posts ul li a {

    background: none repeat scroll 0 0 #222222;

    color: #FFFFFF;

    display: block;

    margin: 10px 0;

    padding: 25px 15px 30px;

    position: relative;

    text-decoration: none;

    transition: all 0.3s ease-out 0s;

 width: 85%;

}

.popular-posts ul li a:before {

    background: none repeat scroll 0 0 #2DB3E9;

    color: #FFFFFF;

    font-weight: 700;

    height: 2em;

    line-height: 2em;

    margin-left: 88%;

    padding: 4px;

    position: absolute;

    text-align: center;

    width: 2em;

    transition: all 0.2s ease-in-out 0s;

   -moz-transition: all 0.3s ease-in-out 0s;

}

.popular-posts ul li a:hover {

    opacity: 0.8;

}

.popular-posts ul li a:hover:before {

    border-left-color: #CCCCCC;

    left: -1px;

     -webkit-transition: all 0.2s ease-out;

    -moz-transition: all 0.2s ease-out;

    -ms-transition: all 0.2s ease-out;

    -o-transition: all 0.2s ease-out;

}

.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {

    content: "10";

}

.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {

    content: "9";

}

.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {

    content: "8";

}

.popular-posts ul li:first-child + li + li + li + li + li + li a:before {

    content: "7";

}

.popular-posts ul li:first-child + li + li + li + li + li a:before {

    content: "6";

}

.popular-posts ul li:first-child + li + li + li + li a:before {

    content: "5";

}

.popular-posts ul li:first-child + li + li + li a:before {

    content: "4";

}

.popular-posts ul li:first-child + li + li a:before {

    content: "3";

}

.popular-posts ul li:first-child + li a:before {

    content: "2";

}

.popular-posts ul li:first-child a:before {

    content: "1";

}

.item-snippet {

    display: none;

}

.PopularPosts .item-thumbnail {

    display: none;

}

5. Now Save ur Template....6.Once u Save ur Template,this will change ur old popular post into smart popular post.... 


Please Share this widget with your friends

Awesome pure css3 premium Animated download button for blogger

Yesterday i was seeing a blog having an awesome download button,i thought to hack it
now i m going to share an awesome css button with hover effect.

Adding the CSS in the Template

• Login to Blogger >> Dashboard

• Template >> Edit Html

• Then search for ]]></b:skin> tag

• Paste bellow code just above ]]></b:skin> tag

/* --------------------------------------

Awesome CSS3 Download Button for Blogger

http://mybloggerskill.blogspot.com

------------------------------------------ */

.dlbutton {

margin: 150px auto;

width: 200px;

position: relative;

z-index: 1;

}

.dlbutton a {

display: block;

width: 200px;

height: 50px;

background: #00b7ea;

background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));

background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);

background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);

background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);

background: linear-gradient(top, #00b7ea 0%,#009ec3 100%);

color: white;

text-align: center;

text-decoration: none;

text-transform: uppercase;

font: 17px/50px Helvetica, Verdana, sans-serif;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );

}

.dlbutton a, .slide {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

}

.slide {

position: absolute;

z-index: -1;

display: block;

margin: -50px 0 0 10px;

width: 180px;

height: 40px;

background: #7b7b7b;

color: #fff;

text-align: center;

font: 12px/45px Helvetica, Verdana, sans-serif;

-webkit-transition: margin 0.5s ease;

-moz-transition: margin 0.5s ease;

-ms-transition: margin 0.5s ease;

-o-transition: margin 0.5s ease;

transition: margin 0.5s ease;

}

.dlbutton:hover .bottom {

margin: -10px 0 0 10px;

}

.dlbutton:hover .top {

margin: -80px 0 0 10px;

line-height: 35px;

}

.dlbutton a:active {

background: #00b7ea;

background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3));

background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);

background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);

background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);

background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );

}

.dlbutton:active .bottom {

margin: -20px 0 0 10px;

}

.dlbutton:active .top {

margin: -70px 0 0 10px;

}

#textwidget {

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

}

After adding the code save the template and follow the next step.

ADDING THE BUTTON

So as we have added the CSS we just need to add the HTML in the desired place. So whenever you want to add this button to your post just switch the post editor to HTML from Compose and add the below HTML Code.

<div class="dlbutton">
<a href="YOUR-LINK-HERE" target="_blank">Download</a>
<div class="slide top">
.zip</div>
<div class="slide bottom">
4.7 MB</div>
</div>

After adding the HTML Code change YOUR-LINK-HERE with the URL of the file to be downloaded. Change 4.7 MB & .zip  with the files size and extension.
You are done now. Now you and your visitors can see this awesome Pure CSS3 animated download button in your blog.

</div>

An Premium Awesome Subscription widget for blogger

Hello,friends, Today i'm going to share an awesome subscription box for blogger.You have seen it on professional blog now it's time to reveal it.and dreamed for making it for your own blog, Having difficulty , we are here to help you.

AWESOME FEATURES OF THIS SUBSCRIPTION BOX

1. A top Broad message with different shade
2. Points message to tell about all your specialties
3. A cool and trendy flat style subscription box
4. A colorful and and eye catching button
5. Allover a Pleasing and eye catching color codes and design

LET START CODING HERE WE GO

Important Steps to Add this widget to blogger

• Go to your blog
• Go in layout 
• Click on Add a gadget where you wanna add a box
• Click on Html
• Copy the below code and paste it all there
• And then you are done

<div id="subscribers">
<div class="subscriptionboxtitle">
<h4><span class="thin">Want To Be</span> <b>Pro Blogger?</b></h4>
<p>Sign Up With Your Email Address and Get Free Tips To Be Professional Blogger!</p>
</div>
<div id="whatyouget">
<ul class="whatyougetwith">
<li>Get Professional Blogging Tips To Make Your Blog Pro.</li>
<li>Totally Newbie? Don't worry, We'll send newbies guide.</li>
<li>Learn Search Engine Optimization To Drive Huge OrganicTraffic.</li>
<li>Ideal Tips To Be a Billionire With Your Blog.</li>
</ul>
</div>
<div class="subscriptionsingup">
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open( &#39;http://feedburner.google.com/fb/a/mailverify?uri=mybloggerskills1&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input id='subscriptionbox' name='email' onblur='if ( this.value == &#39;&#39; ) { this.value = &#39;Enter your email address...&#39;; }' onfocus='if ( this.value == &#39;Enter your email address...&#39;) { this.value = &#39;&#39;; }' type='text' value='Enter your email address...'/>
<input name='uri' type='hidden' value='mybloggerskills1'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='subscribebutton' type='submit' value='Yes, I Want To Be Pro Blogger.'/>
</form>
</div>
<style>
.subscriptionsingup {
    padding: 20px;
}
#subscriptionbox {
    padding: 10px 15px 10px 15px;
    width: 223px;
    text-shadow: none;
    font-size: 16px;
    color: #666666;
    margin-bottom: 7px;
transition:background 400ms;
}
#subscriptionbox:focus{background:#fff47f;}
#subscribebutton {
    background: #F4836A;
    border: none;
    font-weight: 700;
    color: #fff;
    width: 256px;
    padding: 15px;
    text-shadow: none;
    font-size: 15px;
    cursor: pointer;
    padding-right: 10px;
    margin-left: 2px;
}
.thin {
    text-shadow: none;
    font-weight: 300;
}
#subscribers {
    float: left;
    width: 296px;
    background: #0091d6;
    border: 2px solid #03628f;
    font-family:open sans;
}
#whatyouget {
    background: #03628f;
    padding: 10px;
}
ul.whatyougetwith li {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbRkTC5p-Ou7IojXvyudVSDqN93F_76HrAchYLasWqKpwvLOThAoAx6IMCHCGASiFohhpDvfgx73bbJhd5g2xfH2Rfe4SvNKhIKyP2pWRwZ-ydYMaLXTeojX_NOES9eANPsPKqDeaEuM0/s1600/checkmarkk.png) no-repeat;
    margin: 10px;
    padding-bottom: 10px;
    text-shadow: none;
    font-size: 14px;
    line-height: 20px;
    text-shadow: none;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    padding-left: 25px;
}
.whatyougetwith ul {
    margin: 30px 30px 0 25px;
    padding: 0 0 0 25px;
}
.subscriptionboxtitle {
    height: 110px;
    padding: 10px;
    background: #0091d6;
}
.subscriptionboxtitle p {
    text-shadow: none;
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    line-height: 20px;
    color: #fff;
    margin-top: 5px;
    text-align: center;
}
.subscriptionboxtitle h4 {
    text-shadow: none;
    font-size: 23px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    line-height: 25px;
    color: #fff;
    padding-top: 15px;
    padding-bottom: 10px;
}
</style></div>
<div class='clear'></div>

Yipeee !!!! You are done
now save it,
Just check the live preview on your blog 
You can modify it as per you need or you can tell us it as a favorIf you still need any kind of  help you can contact me or comments here.