• Home
  • Contact
  • Link Exchange
  • Donate Us
  • About Me

Tuesday, June 26, 2012

Pin It

Costumize Blogspot Popular Post With CSS3

3:25:00 PM  Anonymous   No comments

See the picture .....
we will make Your popular post like that, actually isn't always like that, depends on your template settings, my template uses red for the link color.
This Trick uses CSS3 Transition Effect, it makes more beutifull
This trick doesn't use javascript.






!!Important: Make Sure you've backed up your template before do this







So, How To Edit The Popular post??

  • Open blogger.com then Open your pageelement and edit your popular post
  • set it like the picture above
  • Next, go to your template >> Edit you template editor, and search the code like this
    this code depends on your template
.PopularPosts
.PopularPosts .widget-content ul li{

  • Replace with My Code
    .PopularPosts .item-title{font-weight:bold;padding-bottom:0.2em;text-shadow:0px 1px 0px #fff;}
    .PopularPosts .widget-content ul li{padding:0.7em 0;background: url(http://3.bp.blogspot.com/-5T_xlsI0aIc/T-lcR7ChM9I/AAAAAAAAAUc/G8Y7AbJ_3lQ/s1600/BI+logo.png) no-repeat 5px 10px;list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
    border-radius:5px;
    -moz-border-radius:10px;
    -ms-transition: all 0.26s ease-out; /* IE10? */
    -moz-transition-duration: 1s; -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out
    }
    .PopularPosts .widget-content ul li:hover{
    border:1px solid #6BB5FF;
    color: #0CF;
    text-transform: none;
    float: none;
    margin:0 0 5px 0px;
    border-radius:15px;
    -moz-box-shadow: 1px 1px 4px #000;
    -webkit-box-shadow: 1px 1px 4px #000;
    box-shadow: 1px 1px 4px #000; z-index:999999; font-weight:bold; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.31);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.31);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.31);
    -moz-transition: all 0.26s ease-out; /* FF4+ */
    -o-transition: all 0.26s ease-out; /* Opera 10.5+ */
    -webkit-transition: all 0.26s ease-out; /* Saf3.2+, Chrome */
    -ms-transition: all 0.26s ease-out; /* IE10? */
    -moz-transition-duration: 1s; -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    text-shadow:1px 1px 3px #D2BCB0, -1px 1px 3px #D2BCB0, -1px -1px 3px #D2BCB0, 1px -1px 3px #D2BCB0;
    }
If You Can't find any code above , we will try another method
  • Search  ]]></b:skin>
    Next, paste my code above it
  • Then Save it, and see it on your blog, move your mouse over it and see the effect.
If You want to edit the color of the border , just search #6BB5FF, use  to find the code you want.

Please Comment or Share this If you like my Post
Like the Post? Do share with your Friends.

Posted in: , , , ,

0 komentar:

Post a Comment