4 Simple, Best Popular Posts Widget For Blogger

​

How To Add Popular Post Widget To Blogger Template 

Login to your blogger account, click Template >>Edit HTML. 

Move you mouse arrow over to the template and click on any key. 

Use the ctrl+f key to open a search box. 

Adding the Javascrip code. 

Search for the </body> tag.

Copy the code below and paste it before </body> tag. 

//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

Must Do: check if the highlited text is inside the code is already in your template(some template do have it as default), if you find it, skip it and copy the rest. 

Adding The Css Part Of The Code 

Search for the </head> tag. 

Copy any css code according to any style of your choice and paste it before or above the </head> tag. 

1.      Style One.   Box Within a Box 

<style type=’text/css’>.sidebar .PopularPosts ul {margin: 0;padding: 0;}.sidebar .PopularPosts ul li {list-style: none !important;padding: 0 !important;margin-bottom: 10px;}.sidebar .PopularPosts .item-thumbnail {height: 190px;margin: 0;overflow: hidden;width: 100%;}.sidebar .PopularPosts .item-title {position: relative;}.sidebar .PopularPosts img {height: 100%;width: 100%;object-fit: cover;}.sidebar .PopularPosts .item-title a {color: #FFFFFF;font: 15px 'Oswald', sans-serif;text-transform: uppercase;font-size: 20px;padding: 10px;position: absolute;right: 0;left: 0px;margin: 0px auto;text-align: center;text-decoration: none;top: 40px;width: 60%;height: 26px;overflow: hidden;z-index: 2;}.sidebar .PopularPosts .item-snippet {background: rgba(0, 0, 0, 0.35);border-top: 6px solid rgba(0, 0, 0, 0.1);border-bottom: 6px solid rgba(0, 0, 0, 0.1);color: #FFFFFF;left: 0px;right: 0px;margin: 0px auto;padding: 65px 10px 10px;position: absolute;font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;text-align: center;top: 35px;width: 60%;z-index: 1;}.sidebar .PopularPosts .item-content {position: relative;}</style>

2.     Style two.   Colourful Boxes.

<style type=’text/css’>.sidebar .PopularPosts ul {padding: 0;margin: 0;}.sidebar .PopularPosts .item-thumbnail a {clip: auto;display: block;height: auto;overflow: hidden;}.sidebar .PopularPosts .item-thumbnail {width: 130px;height: 130px;border-right: 5px solid #fff;margin: 0px 10px 0px 0px !important;position: relative;}.sidebar .PopularPosts .item-thumbnail img {position: relative;height: 100%;width: 100%;object-fit: cover;}.sidebar .PopularPosts ul li {float: left;margin-bottom: 5px;max-height: 130px;min-width: 250px;overflow: hidden;}.sidebar .PopularPosts ul li:first-child {background: #D9EDF7;}.sidebar .PopularPosts ul li:first-child + li{background: #F2DEDE;}.sidebar .PopularPosts ul li:first-child + li+ li {background: #DFF0D8;}.sidebar .PopularPosts ul li:first-child + li+ li + li {background: #FFEEBC;}.sidebar .PopularPosts ul li:first-child + li+ li + li + li{background: #E0E0E0;}.sidebar .PopularPosts .item-title {font: 13px 'Oswald', sans-serif;text-transform: uppercase;padding: 10px 5px 10px;}.sidebar .PopularPosts .item-title a {color: #000;text-decoration: none;}.sidebar .PopularPosts .item-snippet {font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;padding-right: 5px;}.sidebar .PopularPosts .widget-content ulli {padding: 0px 5px 0px 0px!important;}</style>

3.      Style three    Numbered Posts.

<style type=’text/css’>.sidebar .PopularPosts ul {counter-reset: popularcount;margin: 0;padding: 0;}.sidebar .PopularPosts ul li {float: left;max-height: 130px;min-width: 250px;position: relative;}.sidebar .PopularPosts .item-thumbnail::after {color: rgba(255,255,255, 0.63);content: counter(popularcount, decimal);counter-increment: popularcount;font: 70px 'Oswald', sans-serif;list-style-type: none;position: absolute;left: 5px;top: -5px;z-index: 4;}.sidebar .PopularPosts .item-thumbnail::before {background: rgba(0, 0, 0, 0.3);bottom: 0px;content: &quot;&quot;;height: 100px;width: 100px;left: 0px;right: 0px;margin: 0px auto;position: absolute;z-index: 3;}.sidebar .PopularPosts .item-thumbnail a {clip: auto;display: block;height: auto;overflow: hidden;}.sidebar .PopularPosts .item-thumbnail {width: 100px;height: 100px;margin: 0px 10px 0px 0px !important;position: relative;}.sidebar .PopularPosts .item-thumbnail:hover:before {display: none;}.sidebar .PopularPosts .item-thumbnail img {position: relative;padding-right: 0px !important;height: 100%;width: 100%;object-fit: cover;}.sidebar .PopularPosts .item-title {font: 13px 'Oswald', sans-serif;text-transform: uppercase;padding: 0px 5px 10px;}.sidebar .PopularPosts .item-title a {color: #000;text-decoration: none;}.sidebar .PopularPosts .item-snippet {font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;}.sidebar .PopularPosts .widget-content ulli {padding: 0px 5px 0px 0px !important;}.sidebar .PopularPosts .item-content {padding: 5px 0px;border-bottom: 1px dotted #dedede;overflow: hidden;height: 100px;position: relative;}</style>

4.      Style four     Grid Layout 

<style type=’text/css’>.sidebar .PopularPosts ul {padding: 0;}.sidebar .PopularPosts ul li:first-child{width: 100%;max-height: 100%;opacity: 0.9;}.sidebar .PopularPosts ul li:nth-child(even){margin-right: 2%;}.sidebar .PopularPosts ul li {box-sizing: border-box;position: relative;padding: 0px !important;width: 49%;max-height: 120px;opacity: 0.4;overflow:hidden;float: left;margin-bottom: 2%;-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;}.sidebar .PopularPosts ul li:hover {opacity: 1;}.sidebar .PopularPosts .item-thumbnail {margin: 0;width: 100%;}.sidebar .PopularPosts ul li img {box-sizing: border-box;width: 100%;height: 100%;object-fit: cover;padding:0;}.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {visibility: visible;opacity: 1;}.sidebar .PopularPosts .item-title a {color: #fff;background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);text-decoration: none;position: absolute;text-align: center;font: 13px 'Oswald', sans-serif;left: 0;right: 0;bottom: 0%;padding: 100px 10px 10px;opacity: 0;visibility: hidden;}.sidebar .PopularPosts .item-snippet {display: none;}</style>

Read below to Customize popular post widget.

 

Go to your blog layout, locate the popular post widget and click on edit, set it up as seen on the pics below. 

Don’t forget to

share our Post

from WordPress http://ift.tt/2e4OXR6

Simple Side Bar Email Subscription Widget For Blogger.

Get more Email subscribers to your blog, with this stylish Emails  subscription  widget made with pure css code.

This will help increase your blog load speed.

1.    Login to your blogger account. 

Click on Template, Edit Html, click on the blog Template, click on the ctrl+f key on you keyboard for windows and cmd+f on Mac.  

Features Of The Sidebar Subscription Box.  

1)   Fully Responsive Design.

2)   simple and Super easy to customize the colors and text content.

3)    Social Profiles' Links in the bottom.

4)    Beautifu hover effect, with font awesome icons.

5)    Loads faster, because it is made up of pure CSS code. 

Now search for the <head> rage and paste the font awesome code below it. 

<link href='http://
http://ift.tt/YLkwbr
awesome/4.3.0/css/font-awesome.css'

rel='stylesheet'/>

Save your template and go to layout  click on the Add Gadget option. A new pop up window will appear, click on the + sign on the right side of add a HTML code.

Copy the code below and paste it inside the box that appear, leave the title box at the top empty.

Don't click on the save button yet

<style>
/* ----------------------------------------------------
Sidebar Subscription Box Widget = V.2
Designed by :: http://
www.TwistBlogger.com
Keep These Credits Intact, Do Not Remove
-----------------------------------------------------*/
#twist-blogger-sbox-v2 {
padding: 0;
padding-bottom: 5px;
font-family: inherit;
display: block;
margin: 0;
width: 100%;
border-radius: 1px;
border: 0;
background: #363636;
}
#twist-blogger-sbox-v2 .main_tagline {
padding: 0px 0px;
line-height: 2.5em;
font-size: 26px;
margin: 0;
height: 95px !important;
overflow: hidden;
font-weight: normal;
color: #FFF;
text-align: center;
border: 0;
background-color: #FF5959;
}
#twist-blogger-sbox-v2 .email_icon {
display: table;
margin: -35px auto 0px;
font-size: 25px;
padding: 12px;
height: 25px;
width: 25px;
background-color: #363636;
color: #FFF;
border-radius: 50px;
border: 10px solid #FFFFFF;
line-height: 0;
}
#twist-blogger-sbox-v2 p {
font-size: 15px;
color: #F9F9F9;
text-shadow: 0px -1px 0px #000;
line-height: 27px;
padding: 5px 10px 5px;
text-align: center;
width: 80%;
margin: 5px auto 20px;
border-bottom: 2px solid #6A6A6A;
border-radius: 20px;
}
#twist-blogger-sbox-v2 .rssform {
padding: 0;
margin: 0 auto;
display: block;
}
#twist-blogger-sbox-v2 .rssform input {
padding: 8px;
margin: 20px auto 15px;
font-size: 13px;
color: #000;
text-align: center;
display: block;
font-family: inherit;
font-weight: normal;
width: 90%;
height: 38px;
text-transform: uppercase;
outline: none !important;
border: 1px solid #FFFFFF;
border-radius: 1px;
background-color: #FCFCFC;
box-sizing: border-box !important;
}
#twist-blogger-sbox-v2 .rssform
.button:hover {
background: #000000;
}
#twist-blogger-sbox-v2 .rssform .button {
background: #FF5959;
color: white!important;
border: 1px solid #FFFFFF;
margin-top: 15px;
outline: none !important;
transition: all .3s ease-in-out;
padding: 5px 2px !important;
float: none;
text-transform: uppercase;
font-size: 18px;
font-weight: normal;
cursor: pointer;
}
#twist-blogger-sbox-
v2 .bottom_lock_policy {
background: url
(http://ift.tt/Pr3JSs
kYVqV9JYDHY/VPMC8jPKTGI/
AAAAAAAAA28/zxv0TYRIZe4/s1600/
Lock-twistblogger.png) no-repeat 3% -2px;
color: #959595;
text-align: center;
font-size: 12px;
margin: 0;
padding: 3px;
line-height: 25px;
}
#twist-blogger-sbox-
v2 .bottom_lock_policy a {
color: #959595;
text-decoration: none !Important;
}
#twist-blogger-sbox-v2 .social_profiles {
line-height: 1.2em;
display: table;
float: none;
margin: 0px auto;
text-align: center;
min-width: 157px;
padding: 5px 0px;
border: 0;
}
#twist-blogger-sbox-v2 .social_profiles
a:hover {
color: #FFF;
background-color: #FF5959;
border-color: #FFF;
}
#twist-blogger-sbox-v2 .social_profiles a {
color: #000000;
margin: 0 5px;
text-align: center;
float: left;
display: table;
padding: 4px 5px;
background-color: #FFFFFF;
border-radius: 50px;
border: 2px solid #2D2D2D;
width: 15px;
height: 15px;
line-height: 0;
font-size: 16px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
#twist-blogger-sbox-v2 form {
margin-bottom: 10px !important;
}
</style>
<div id="twist-blogger-sbox-v2">
<div class="main_tagline"> Join Our
Newsletter</div><div
class="email_icon"><i class="fa fa-
envelope"></i></div>
<p> Get All The Latest Updates
Delivered Straight Into Your Inbox For
Free!</p>
   <div class="rssform">
<form action="http://
http://ift.tt/ttr54b"
method="post" target="popupwindow"
onsubmit="window.open('http://

http://ift.tt/ttr54b?

uri=legendyechny.blogspot', 'popupwindow',

'scrollbars=yes,width=550,height=520');ret
urn true">
<input type="text" name="email"
placeholder="Enter your email address...">

<input type="hidden"

value=" legendtechny.blogspot" name="uri">

<input type="hidden" name="loc"
value="en_US">
<input value="Join Now"
class="button" type="submit">
</form>
</div>

<div class="bottom_lock_policy">We

Respect Your Privacy | <a href="http://ift.tt/2eoQuT6">Get This Widget</a> </

div>
   <div class="social_profiles">

<a href=" http://ift.tt/eIlFV0

Legendtechny.blogspot " target='_blank' rel='nofollow'

title="Join on Facebook"><i class="fa fa-
facebook"></i></a>

   <a href=" http://www.twitter.com/

Chi_obinna" target='_blank' rel='nofollow'

title="Follow on Twitter"><i class="fa fa-
twitter"></i></a>

   <a href=" http://plus.google.com/

+ostani " target='_blank' rel='nofollow'

title="Follow on Google+"><i class="fa fa-
google-plus"></i></a>

#FF5959

title="Follow on Pinterest"><i class="fa fa-
pinterest"></i></a>
   </div>

</div>

How to customize the css code. 

1.   Change this 3 highlighted  #FF5959 color code to any code of your choice.

2.   Change the three highlited social profile URL to your own URL. 

<a href=" http://plus.google.com/

+ostani " target='_blank' rel='nofollow

<a href=" http://www.twitter.com/

Chi_obinna

<a href=" http://ift.tt/eIlFV0

Legendtechny.blogspot

3.    Edit the bold highlited texts with any text of your choice, except my blog name replace it with your blog name.

...After Customizing The CSS Code, Now Click On Save Button.

Custom Popular Post Widget With Counter Box

This popular post widget will make your blog look nice we'd help vistors easily navigate you posts.&nbsp;
Login to your blogger Dashboard>>click on Template>>>Edit Html.
On the blog Template click&nbsp;on it and click ctrl+f on windows and cmd+f on Mac.

First step=Adding javascrip to before </bod> tag.

Copy the code below, and paste it before the </body>tag in your template.

<script src='http://ift.tt/nkWzpa
ajax/libs/jquery/1.7.1/jquery.min.js'
type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var tbn = 150;
$('#PopularPosts1').find('img').each
(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace
(/s\B\d{2,4}/,'s' + tbn)});
image.attr('width',tbn);
image.attr('height',tbn);
});
});//]]></script>
Note : Back up your blog template first.&nbsp;

Customizing the thumbnail size.&nbsp;Simply change the highlited&nbsp;digit 150, to any number of your choice.
In this, our thumbnail size will be 150x150px.&nbsp;
Step two adding the css style code.&nbsp;
Simply chose any of your choice style code and paste it before the&nbsp;]]></b:skin>

Style One

/* Sidebar Popular Posts */
.sidebar .popular-posts ul {
counter-reset: popcount;
margin: 0;
padding: 0;
}
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {
font-family: "Oswald",sans-serif;
height: 130px;
font-weight: bold;
list-style: none !important;
overflow: hidden;
padding: 0px !important;
position: relative;
margin: 2px;
border: 0;
width: 100%;
float: left;
}
.sidebar .PopularPosts .item-thumbnail
{margin: 0; width: 100%;}
.sidebar .PopularPosts ul li img {
display: block;
float: left;
padding: 0;
width: 100%;
height: 130px;
-webkit-transition-duration: 1.0s; /
*Webkit: Animation duration*/
-moz-transition-duration: 1.0s; /*Mozilla
Animation duration*/
-o-transition-duration: 1.0s; /*Opera
Animation duration*/
transition:1.0s;
}
.sidebar .PopularPosts ul li img:hover {
-webkit-transform:scale(1.06); /*Webkit:
0.5 times the original Image size*/
-moz-transform:scale(1.06); /*Mozilla 0.5
times the original Image size*/
-o-transform:scale(1.06); /*Opera 0.5
times the original Image size*/
transform:scale(1.06);
overflow: hidden;
}
.sidebar .PopularPosts .item-title {
bottom:0;
left: 0;
right: 0;
padding-bottom: 0;
position: absolute;
z-index: 999;
}
.sidebar .PopularPosts .item-title a {
background: rgba(32, 32, 32, 0.77);
color: #FFFFFF;
display: block;
font-size: 16px;
font-weight: bold;
line-height: normal;
font-family: "Oswald",sans-serif;
padding: 10px 0px 5px 10px;
text-transform: capitalize;
transition: all .4s ease-in-out;
}
.sidebar .popular-posts ul li:hover .item-
title a {
color: rgba(255, 255, 255, 1);
background: rgba(231, 76, 60, 0.88);
text-decoration: none;
}
.sidebar .popular-posts ul li:before {
background: rgba(255, 252, 8, 1);
color: #000;
content: counter(popcount, decimal);
counter-increment: popcount;
float: left;
font-size: 14px;
line-height: 20px;
list-style-type: none;
padding: 0px 8px 1px 1px;
border-radius: 0px 0px 10px 0px;
position: absolute;
top: 0;
z-index: 4;
border: solid #FFF;border-width: 0px 2px 2px 0px;

Style Two

/* Sidebar Popular Posts - Style 1 */.sidebar .popular-posts ul {
counter-reset: popcount;
margin: 0;
padding: 0;
}
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {
font-family:'Oswald','Open
Sans','Helvetica Neue',Arial,Tahoma,sans-
serif;
&nbsp; height: 130px;
&nbsp; list-style: none !important;
overflow: hidden;
padding: 0 !important;
position: relative;
margin: 2px;
border: 0;
width: 48%;
float: left;
}
.sidebar .PopularPosts .item-thumbnail
{margin: 0; width: 100%;}
.sidebar .PopularPosts ul li img {
display: block;
float: left;
padding: 0;
width: 100%;
height: 130px;
-webkit-transition-duration: 1.0s; /
*Webkit: Animation duration*/
-moz-transition-duration: 1.0s; /*Mozilla
Animation duration*/
-o-transition-duration: 1.0s; /*Opera
Animation duration*/
transition:1.0s;
}
.sidebar .PopularPosts ul li img:hover {
-webkit-transform:scale(1.06); /*Webkit:
0.5 times the original Image size*/
-moz-transform:scale(1.06); /*Mozilla 0.5
times the original Image size*/
-o-transform:scale(1.06); /*Opera 0.5
times the original Image size*/
transform:scale(1.06);
overflow: hidden;
}
.sidebar .PopularPosts .item-title {
bottom:0;
left: 0;
right: 0;
padding-bottom: 0;
position: absolute;
z-index: 999;
}
.sidebar .PopularPosts .item-title a {
background: rgba(32, 32, 32, 0.77);
color: #FFFFFF;
display: block;
font-size: 12px;
line-height: normal;
padding: 5px 0px 2px 5px;
text-transform: capitalize;
transition: all .4s ease-in-out;
}
.sidebar .popular-posts ul li:hover .item-
title a {
color: rgba(255, 255, 255, 1);
background: rgba(231, 76, 60, 0.88);
text-decoration: none;
}
.sidebar .popular-posts ul li:before {
background: rgba(255, 252, 8, 1);
color: #000;
content: counter(popcount, decimal);
counter-increment: popcount;
float: left;
font-size: 14px;
line-height: 20px;
list-style-type: none;
padding: 0px 8px 1px 1px;
border-radius: 0px 0px 10px 0px;
position: absolute;
top: 0;
z-index: 4;
border: solid #FFF;
border-width: 0px 2px 2px 0px;}

Now got to your blog Layout and change you popular post settings according to the Image Below. 

posted from Bloggeroid

How To Automatically Add Border To Your Blog Post Images

Read The Guid Below

Login to your blogger blog  dashboard>>Click on Template>>Edit Html.

Note:  First Backup Your Blogger Template 

Copy the code below and paste it above  the b:skin tag on your blog template.

.post img {border:5px solid #d2d2d2;padding:2px;}

You can change the #d2d2d2 border  color code to any code of your choice.

How to stop country specific URL redirection in blogspot blog

A newbie blogger have come across this and am sure does not know how to solve the issue.




A situation where url redirection occurs e.g your blog URL which you signed up for gave to some one is http://legendtechny.blogspot.com and when some one from France clicks on it on it the the URL will change to http://legendtechny.blogspot.com.fr , isn't that strange to the eye?.One have to put an end to this due to the negative impacts it has on them success of his blog may be not at the beginning but in the future.


What are the negative effects of blog redirection on blogspot blog?

Dip in adsense revenue; people have complained of depreciation of the amount they earned when the specific country URL redirection is active on there blog.

Loosed control of blog URL; people can get to your blog with the real blog name u signed up for withe the specific country redirecting URL. It do cause confusion as some who doesn't not understand will be thinking of the main blog URL.

Problem in the external commentary medium; problem and confusion might arise, because your blog readers might get confused.

Low social media statistics; comment and likes might not be recoded due to the difference in URL of your blog visitors due to different country they are accessing your blog from.

How to stop specific country redirecting in your blog.


Step 1
Login to yourself Dashboard.



Step 2
Click on Template and Edit HTML

Step 3
Move your body over to the body of the HTML the single click with your mouse, then press CTRL+F to open a search box,now input into the search box.
See image below.



Copy the redirection code seen below, place it after the tag.

<script type="text/javascript">var blog = document.location.href.toLowerCase();if (!blog.match(/\.blogspot\.com/)) {blog = blog.replace(/\.blogspot\..*?\//, ".blogspot.com/ncr/");window.location.replace(blog);}</script>

Step 4
Click on "Save Template" to save what you have edited.

Use the comment box to let us know how you feel of the post. I await your comment.

posted from Bloggeroid