Popular Post Widget Colors

Popular Post Widget Colors - Ok, in the post two today and incidentally this is the 100th article Arlina Design will share a popular post widget is made   such that its shape slightly eccentric so different from the widget, in general. 

Surely my friend already knew the function of this widget that displays the post with the most views by visitors based on time can be every week, month, or all the time. Simply, here's how its application:. Note: If the template is already installed CSS popular post, it's good removed beforehand to avoid mistakes in the future. 

Popular Post widget settings adjust the screenshot below:

1. Go to Blogger> Template> Edit HTML> Then add the following code just above

      ]> </ b: skin> or </ style>

/ * Latest Posts * /

.PopularPosts .item-Thumbnail {float: none; margin: 0 0 10px}

.PopularPosts .4s;}

.PopularPosts .item-Title: hover {background: RGBA (0,0,0, .2)}

.PopularPosts .item-Title a {color: RGBA (255,255,255,0); font-weight: 700; font-size: 120%; text-shadow: 0 0 5px RGBA (0,0,0,0)}

.PopularPosts .item-Title: hover a, .PopularPosts .item-title a: hover {color: RGBA (255,255,255,1); text-shadow: 0 0 5px RGBA (0,0,0, .3)}

.PopularPosts .widget-Content ul li img {translate (0.0) scale (1.0); transition: all .8s linear}

.PopularPosts .widget-Content ul li: hover img {transform: translate (0, -20px) scale (1:05); transition: all 3.6s linear;}

.PopularPosts Img {display: block; height: auto; width: 100%; padding: 0; backface-visibility: hidden;}

.PopularPosts .item-Snippet {display: none;}

.PopularPosts .item-Content ul li {position: relative; overflow: hidden;}

.PopularPosts Ul {padding: 0; line-height: normal; counter-reset: count;}

.PopularPosts .widget-Content ul li {position: relative; padding: 10px 0; overflow: hidden; max-height: 100px; transition: all .4s;}

.PopularPosts .widget Ul-content 80px / 1 Sans-Serif; z-index: 51; transition: all .4s;}

.PopularPosts .widget-Content ul li: hover: before {right: -55px;}

.PopularPosts Ul li: nth-child (1) .item-title {background: RGBA (221,25,29,0.5);}

.PopularPosts Ul li: nth-child (2) .item-title {background: RGBA (141,187,144,0.5);}

.PopularPosts Ul li: nth-child (3) .item-title {background: RGBA (39,169,255,0.5);}

.PopularPosts Ul li: nth-child (4) .item-title {background: RGBA (192,202,51,0.5);}

.PopularPosts Ul li: nth-child (5) .item-title {background: RGBA (26,35,126,0.5);}

.PopularPosts Ul li: nth-child (6) .item-title {background: RGBA (0,188,212,0.5);}

.PopularPosts Ul li: nth-child (1) .item-title: hover, .PopularPosts ul li: nth-child (2) .item-title: hover, .PopularPosts ul li: nth-child (3) .item- title: hover, .PopularPosts ul li: nth-child (4) .item-title: hover, .PopularPosts ul li: nth-child (5) .item-title: hover, .PopularPosts ul li: nth-child (6 ) .item-title: hover {background: RGBA (0,0,0,0.2);}

Remove the code that is marked if you select a widget without additional colors. 

2. Next add the following code before the </ body>

<Script type = 'text / javascript'>

// Popular Post Thumb

$ (Document) .ready (function () {$ (& # 39; .PopularPosts img & # 39;). Attr (& # 39; & # 39 ;, src function (i, src) {return src.replace (& # 39; S72-c & # 39 ;, & # 39; s400 & # 39;);});});

// <! [CDATA [

// Custom Latest Post

$ ( ". Popular posts .item ul li-snippet"). Each (function () {var t = $ (this) .text (). Substr (.120), s = t.lastIndexOf ( ""); s > 10 && $ (this) .text (t.substr (0, s) .replace (/[?,!\.-:;]*$/, "..."))});

//]]>

</ Script>

3. That's it, save the template and view the results. 

Enough, thank you and hopefully useful.