TYPE YOUR TEXT HERE
Showing posts with label html code. Show all posts
Blogger Multi -Colour Popular post Widget
First Add Popular post Widget to Blogger
Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.
Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save
Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>
Copy the following code and Paste just above it
Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.
Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save
Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>
Copy the following code and Paste just above it
<!-- Popular posts multi colored UI theme -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored UI theme -->
Wonderful blogger code
<div style="border-bottom-color: rgb(255, 215, 0); border-bottom-style: solid; border-bottom-width: 25px; border-left-color: rgb(255, 215, 0); border-left-style: solid; border-left-width: 25px; border-right-color: rgb(255, 215, 0); border-right-style: solid; border-right-width: 25px; border-top-color: rgb(255, 215, 0); border-top-style: solid; border-top-width: 25px; color: black; font-family: Verdana, Arial, sans-serif; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 600px;">
<div style="border-bottom-color: rgb(255, 215, 0); border-bottom-style: double; border-bottom-width: 30px; border-left-color: rgb(184, 134, 11); border-left-style: double; border-left-width: 30px; border-right-color: rgb(184, 134, 11); border-right-style: double; border-right-width: 30px; border-top-color: rgb(255, 215, 0); border-top-style: double; border-top-width: 30px; color: black; font-family: Verdana, Arial, sans-serif; font-size: 12px; margin-bottom: 0px; margin-left: 5px; margin-right: 5px; margin-top: 0px; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 0px;">
TYPE YOUR TEXT HERE </div>
</div>
</div>
This code Reflecting this image
Subscribe to:
Posts
(
Atom
)
