How To Add Stylish Popular Post Widget With Slide Effect

Saturday, January 18, 2014

How To Add Stylish Popular Post Widget With Slide Effect

Add Stylish Popular Post Widget With Slide & 3D Effect

Watch Live P T V Sports Click

Hey Guys.
I am write the article How To Add Stylish Popular Post Widget in Blogger, Do you want to add stylish popular post widget in blogger. So this article is help for you, Today I'm guide to your How to add 3D effect popular post widget. To add 3D effect popular post widget in blogger follow my instruction.

Download Free PC Registered Software Click

Step -1
Log-in Your Blogger Account,

Step -2
Click on Dashboard , Then Click on Layout,

Download Free PC Games Registered Full Click

Step -3

Click on Add a Gadget and Choose Popular Posts, (If you already have this gadget skip this step)
Step -4
After Adding Popular Post Gadget Add a Gadget Again Select HTML/JavaScript widget,

Step -5
Copy Code In The Box Below, And Past in HTML/JavaScript,

Download Free PC 100,000 Drivers Full || All In One Driver Pack Click

HTML Code Here Style -1 (Slide/Snipping)

#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;

}

#PopularPosts1 ul {
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}

#PopularPosts1 li {
 width:290px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs9ZuTGSDrjzYJuxxMt3_WkchyphenhyphenReGPRHw23JLRE6mEXmKgin_WxC2DWvkJYcp1J-ei-64tVGjbQQDJiccCPK6lcJQp_ToWDo5ceB2Fmv0HWq9Is62LhZ7GCsh9Up0nKdxNRwQpLK44yu4/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
   
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:2px solid #7CA2C4;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#289728;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>
</a><br /><small><a 
href="http://thaheemsoftware.blogspot.com/2014/01/how-to-add-stylish-popular-post-widget.html">Want
 Popular Post Widget</a></small></span></p>

More Blogger Tips & Tricks Click

HTML Code Here Style -2 (3D Moving)

Step -6

Now Click on Save. Done!

Download Free Registered Microsoft Office All Version Click