Showing posts with label blogger codes. Show all posts
Showing posts with label blogger codes. Show all posts

Thursday, April 30, 2015

Tuesday, March 24, 2015

Friday, March 20, 2015

Blogger Multi -Colour Popular post Widget

  /     /   No comments   
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

<!-- 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 -->

Wednesday, October 22, 2014

Saturday, February 9, 2013

Wonderful blogger code

  /     /   No comments   

<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

TYPE YOUR TEXT HERE


Wonderful blogger code

  /     /   No comments   

<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

TYPE YOUR TEXT HERE