Tuesday, June 12, 2018
Custom Popular Post widget with 6 Styles
Custom Popular Post widget with 6 Styles
Custom Popular Post widget with 6 Styles
Setup this popular Post widget on your blog to increase page web view and display the most popular Post in just a small space in your blog homepage.
This popular Post widget is a flexible type that you can change it look, just by removing ann adding 3-5 code line to make it pleasing to the eyes.
...Step 1.
**First Configure the Popular Post Widget View and Display Location.**
Login to your blog, click on Layout, now chose the Add Widget option from side or bottom(see image below), click on Add Widget, from the pop-up window, scroll to see Popular Post, click on the plus sign.
Now configure the Popular Post Widget according to the pics Below.
...Step 2
Click on Template -> Edit HTML, click on the code area, use ctrl+f or cmd+f on Mac PC to open a search box, search for the and copy-paste the below code before the </head> tag.
<script src=http://ift.tt/18aYz5U/>
Now your Template is Jquery enabled.
Copy the below javascript code and paste it above the </body> tag
<script src=src=http://ift.tt/2fNBj9q type=text/javascript/>
Copy the CSS code below and paste it above the "<b>]]></b:skin></b>" tag.
/* Custom Popular Posts Widget By http://
www.blogornate.com */
.sidebar .PopularPosts .item-thumbnail {margin:
0;width: 100%;}
.sidebar .popular-posts ul {counter-reset:
popcount;padding: 0;margin: 0;}
.sidebar .PopularPosts ul li img {padding: 0;float:
left;height: 130px;width: 100%;display: block;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.sidebar .PopularPosts ul li img:hover {
/*
PASTE ONE OF YOUR CHOSEN HOVER EFFECT
CODE HERE/
}
.sidebar .popular-posts ul li {font-family:
"Oswald",sans-serif;font-weight: bold;height:
150px;overflow: hidden;list-style: none !important;
float: left;padding: 0px !important;margin:
2px;position: relative;border: 0;width: 100%;}
.sidebar .PopularPosts .item-title {position:
absolute;left: 0;bottom:0;right: 0;padding-bottom:
0;z-index: 999;}
.sidebar .popular-posts ul li:hover .item-title a
{text-decoration: none;color: rgba(255, 255, 255,
1);}
.sidebar .PopularPosts .item-title a {display:
block;background: rgba(32, 32, 32, 0.77);color:
#FFFFFF;
text-transform: capitalize;font-size: 12px;font-
weight: normal;padding: 10px 0px 5px 10px;}
1. Popular Post widget with Flash
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
2. Popular Post Widget With Gray Scale
-webkit-filter: grayscale(0);
filter: grayscale(0);
overflow: hidden;
3. Popular Post widget with opacity
opacity: .5;
overflow: hidden;
4. Popular Post widget with sepia
ebkit-filter: sepia(0);
filter: sepia(0);
overflow: hidden;
5. Popular Post widget with zoom Out
-webkit-transform: scale(1);
transform: scale(1);
overflow: hidden;
6. Popular Post Widget With zoom In
-webkit-transform: scale(1.3);
transform: scale(1.3);
overflow: hidden;
Help us share this post.
Tags: WRITEMEFLASH
