I open this thread to teach bloggers like myself wonderful codes you can use to customize your blog To a Professional Standard. I don't know it all in-fact am still learning but i believe is good i also share those i have learn, after all some of them were taught to me free of charge but am not asking you to pay any thing and i also believe not every code am going to post here you will like. Since they say too much of everything is bad. all you have to do is to pick the once you are okay with while you allow the guy next to you to pick his own.

I will also answer every question concerning every code am going to be dropping here as time goes on though am not always online but i will do my best to answer every thing. You can as well use the comment box on my blog to drop your question if you can wait, but am going to be here and i will encourage anybody with question's to drop it here so others can as well learn from it. Then pray together that Nairaland Admin doesn't ban me since we are doing so on their mercy watch out for great HTML CODE from me this new year. Is time to customize your blog To a Professional Standard.

And if you going to be judging me by my own blog then i think you are like a footballer who refuse to to adhere to the instruction of his coach such one is likely to fail not because he is not good but simple because he allow his sight to judge before his Heart see you.

Lets Talk About: How To Center Your Blogger Header Image /Font


Like i said in one of my previous post that your blog homepage is like front of your house, of how you arrange it will determine how people will describe it. So today am going to help you get it arrange professional, and we are going to take it one by one. The reason for that is to make sure you
get every details along the way. So without wasting much time we are going to start with the header.

You will agree with me that the of a website that include blog is what really distinguishes it from others is like what gurus calls your identity or digital fingerprint. The reason for that is not far fetch since is clear that whenever a visitor accesses your blog for the first time, the header is one major aspect that is used to determine who you are and the type of content that they can expect to read. It's therefore every important to create a header that is both prominently placed and conclusion of your quine brand name.

It would have be simple if not to shift if not that the idea is default Blogger settings for header positioning. I believe you have also notice that whenever you upload a header to your site, it will automatically be aligned to the left of the page. By default that is how is being set. Though some Blogger users may i believe are okay with this setting, more especially if they are using a header design that doesn't contain a background. But others on the other hand may find that their background headers appear cut off, incomplete, or even indistinguishable from the rest of their content.

Now If you find yourself in the second category of users, just hold on, there is a way to adjust the positioning of your header so that it will display as a center Blogger header. The true is that by centering your site header, you have greater flexibility over the overall design, whether you agree or not is a simple true, and also it allows you to really shine light on your content. It's very hard if you ask me to miss a header that is placed smack dab in the middle of the screen on every page that visitor navigates to.

Making this change is very very easy and simple, first you'll be able to make certain adjustment on every page of your blog without having to change them one by one. In-fact all you need to do is to modify the CSS of your blog which can be found directly through your blogger dashboard. Like i did promise early am going to be holding you hand in hand to achieve this. Meaning even if you have little to no experience in web design, that is HTML , you can still center your blog header by inserting some code inside the CSS box as simple as that. Below are the steps to follow.


First Step Log in into your Blogger Account with your username and password, and select your blog, then scroll down to "Template" and click on "Customize" button just before EDIT HTML [/b]button Scroll down again to "[b]Advanced" you will see last last there "Add CSS" tab and paste the code below inside the empty box:

#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}
If you have a small image and you want it to become full width, add this CSS instead:
#header-inner {
background-size: cover;
width: 100% !important;
text-align: center;
}
#header-inner img {
width: 100%;
height: 100%;
}


Once you have done that Press/Hit the ENTER key after you paste the code snippet, then click the "Apply to Blog" button.
But if is just something you wrote maybe like WELCOME TO MY BLOG or any of such use the code below and follow the same procedure above

#header-inner img {margin: 0 auto !important;}
#header-inner {text-align:center !important;}

Okay sure you have done that. Good. Here are some other aligning options for your headers: Align Blogger Header Banner and Text Side by Side Image on the right and title on the left use this code:

#header-inner {
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}

If you want Image on the left and title on the right use this code

#header-inner {
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}
Remember: for larger images, you may have to resize them if you want them to appear side by side with text.

After making the CSS changes save your modifications very important, then go back to your homepage and refresh the page. You will notice the header is now centered., instead of on the left. Also click on some of your pages links and make sure that this change has been made to every page or post on your blog. But if by chance you notice there's no change, kindly go through the code you modified and make sure that you copied and pasted the code into the box exactly as stated above.

Believe me minor modification in the code, or a missing semicolon will cause it to fail or make the changes you want to achieve, or even come up with a different result than what you expected
One thing i love about CSS is the fact that it's your blog site's central hub for all design. In the next post i will be showing you how you can modify just about any appearance on your site to give the blog a custom look and feel.

If you still have any question about all i wrote in this post use the comment box and i will do my best to have them answered.http://eisteve..com.ng/2016/12/learn-how-to-center-your-blogger-header.html

Watch out for the next one code

PM ME FOR YOUR AFFORDABLE WEB DESIGN
08133014066(WHATAPP)

[quote author=easiblogger post=52443311]PM ME FOR YOUR AFFORDABLE WEB DE

Redesigning Your Blog With This Attractive Popular Posts Widgets For Blogger

There's nothing bad in trying to keep your readers with similar posts, I love it and am sure you do too. So if you using blogger/blogsopt as a platform for your personal or even business blog. I believe you are still looking for some ways to customize your blog and make it your very own just the way you want it to be.


If very clear just like i did say in my previous post that the essence of ll this is to make your webpages unique and eye-catching, and above all to make sure it stand out from the rest of other pages on the Internet. More also you want to grab the attention of your market, by that you want them to browse through your site and at the end becomes your loyal followers. This is what will call goal and there's nothing bad about it.

Good enough there're wonderful ways to personalize your blog the way you want it. And one of that way is to customize your Popular Posts widget. Well if you haven't install it yet you are really missing a lot but am sure by the time you finish reading this post you will learn the benefits and how to install it too.


As you know Adding the Popular Posts Widget for Blogger is very easy and simple.
Just login to your blogger account, click on your blog title, access the Layout menu, click "Add Widget" and choose "Popular Posts". A window will appear asking you to configure the widget by choosing which posts you'll feature (e.g. those that were most viewed in the past 7 days or 30 days or from the beginning of your blog). You also have option to choose how many posts you'll feature in your Popular Posts section and select if you'll show the post title only or along with the image thumbnail and/or the snippet. (Remember that each widget style has different requirements, so I do normally ask that you follow the instructions carefully to know if you'll need the snippet and image thumbnail or not).

Now once you've followed these instructions stated above, you'll get to see the basic version of the Popular Posts Widget for Blogger in your blog. You have option to stick with this if it matches your blog design like me. But if it doesn't suit your taste, there's no need to feel bad since you have option to personalize it to your choice. just scroll down and choose from the following styles below.


First Popular Posts Style 1 - Box within a box
This if you ask me is an interesting widget style since it uses your snippet and image thumbnail in a unique way. In fact a close look you will discover that your snippet is written in opaque text and placed in a small transparent box. This, in turn, is placed in a bigger rectangular box, wherein your image thumbnail is used as a background. Choosing this Popular Posts Widget for Blogger can be a great option if you want to brighten up your blog and grab the attention of readers with your colorful photos. To achieve this style use the CSS CODE below:

<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 &#39;Oswald&#39;, 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>

The second Popular Posts Style 2 - Comes with Large thumbnails with small post titles underneath
This uses the same code as the basic Blogger Popular Posts Widget with a few tweaks. Popularized by well-known blogs, One ting i l love so much about this style is the fact that it's eye-catching because it focuses on pictures, which don't only summarize the posts' content but also add visual drama to the entire page. So if you are into clothes, makeup, art and other topics that highly depend on visual presentation to better express ideas. I believe this is particularly useful for your kind blogs. And to achieve this use the CSS below:

<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none !important;
padding: 0 !important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: &quot;&quot;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
}
</style>

The third Popular Posts Style 3 - is called Colorful boxes.
In case your blog needs a pop of color, believe me this is the right choice for you. This widget style presents your Popular Posts in several boxes that feature a thumbnail image and have bright, eye-catching shades like light green, talk of ocher yellow and vivid orange. wow wonderful design. Each box has a different color, and you can add up to four boxes if you like. To achieve this use the CSS CODE below:

<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 &#39;Oswald&#39;, 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 ul li {
padding: 0px 5px 0px 0px!important;
}
</style>

The forth Popular Posts Style 4 - Is called Grid layout
It's Just like the large-picture widget style, the grid layout believe me is an excellent option if you want to showcase your pictures or if your blog depends on visual information which i believe most blogs nowadays do. But bear in mind that the title of your posts won't be included in the layout, so readers will have to hover their mouses on the images to read the titles. And to achieve this use the CSS CODE below:

CSS code:
<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 &#39;Oswald&#39;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}
</style>

And the last but not the least is Popular Posts Style 5 - Called Numbered posts
Are you in love with numbered lists?, or just like to make your blog more organized, this can be the perfect option if you ask me. By using the code for this widget style, your Popular Posts will be automatically numbered and will feature clean, minimalistic boxes that include your snippet and image thumbnail. And to achieve this in this blog use the CSS CODE below:


<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 &#39;Oswald&#39;, 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 &#39;Oswald&#39;, 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 ul li {
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>

Alright these are just some of the widget styles you can choose from. Though there are a lot of them but i believe this few will give you what you what. Important thing to note is. Please when you've picked a style you want, kindly make sure to copy its CSS code very well in fact that's why am using red ti highlight it. Now once you do so, go to your blog, click on "Template" and select "Edit HTML" under the template preview.

Now to achieve our goal these next codes need to be pasted above the "</head>" or "</body>" tags, so check the instruction to know exactly where you need to put the code.

Lets Add the CSS
Now when the template editor has opened, just click anywhere inside the code area and hit CTRL + F or Command F but CTRL+F is easy, inside the search box that will appear past </head> and hit enter key to search the following tag:
</head>
You have seen it good, Just ABOVE the </head> tag, copy and paste the CSS code of your choice styles above.

Please pay serious attention. If the Popular Posts widget is located in the footer of your blog, remove the .sidebar class found in the CSS code in order to make it work. Though i believe most of us love to have it by side but is good to say so for some that love to have it in the footer.

Remember that most of the styles are using the Oswald font which you need to add to your template's code as well. Just follow the instruction below is easy to do.

So to achieve our target search for this tag <head> just like you did the first one above. But this time BELOW it add this CODE

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Next is to Add the JavaScript, which also require JavaScript style codes in order to resize the popular posts image / thumbnail and trim the post snippet and title.

To add the JavaScript, search the </BODY> tag and paste the following script just above it:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39.attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/w72-h72-p-nu/&#39;, &#39;/s350-c/&#39
});
$(&#39;.popular-posts ul li .item-snippet&#39.each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39);
});
$(&#39;.popular-posts ul li .item-content a&#39.each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39);
});
</script>

Please if you have already the jQuery library in your template, remove the line in blue before pasting.

On a finally note. Once you have added all the codes in the right place, as instructed above just press the "Save template" button to save the changes. and there you have it your customize Popular Post widgets.

If you ask me i believe this five Popular Posts widgets for Blogger featured today are all great solutions for adding a popular post section to your blog. The great thing about it all is the fact that they all have different appearance for determining what makes a post popular, And the end result is the same: Just like the popular saying, your visitors are always one click away from your best content. Try some of these styles, find your favorite, and see how it impacts the performance of your blog. Am sure in one way or the other it will lead to traffic increase and you will be glad you did. If you still have questions kindly use the comment box and i will do my best to have them answered. http://eisteve..com.ng/2016/12/lets-talk-about-redesigning-your-blog.html

Nice one Op

Thank you dear expect more soon

Kaydem:
Nice one Op