How to Make Blogger Widget or Sideber Fixed, Sticky or Float

Hi people! I was just sitting yesterday watching TV  when this thought occurred to me, and I thought there are some people out there trying to do something like this on their blog.

Okay, what happened was that in 2014 I actually wanted to get this done on my blog after seeing it on Lifehacker.com, it was awesome 🙀. They used it to make an AdSense ad unit fix to the screen for much more visibility and you know, increase CTR. That would actually have made them a good income from Adsense. 

The function can be implemented to your blog with just a simple CSS line of code. The thing is to make it look very professional, you need to make the widget the last in your widget list.

So here is how to do it, but first, you must note the ID of your widget. To get this ID number, you need to click on the edit link in the Layout tab of your dashboard. 

Layman explanation ⇉ Login to Blogger⤤ ⥤ Layout ⥤ Your widget that you are working on ⥤ Click on the edit link ⥤ Click on the address bar of the pop-up window ⥤ go to the end of the address ⥤ The Lable name with a number at the front is what you are looking for.

Well, I feel responsible because I have already started writing this post, so I'll add a screenshot 😕.

That's what you have to do to know your widget ID. To the next step;

Go to Template ⥤ Customise ⥤ Advanced ⥤ CSS ⥤ Paste the below code according to preference.

For Widget

.WidgetID { position: fixed; }

For Sidebar

.column-right-inner { position: fixed; }

Customising

Replace the widgetID with yours.

Change .column-right-inner to left if you have your sidebar on the left.

That's it guys. Let me see your thanks in the comment, and if you have any issues also, that's why I have the comment box there. 

How to Center Blogger Header Image

The header of a website is the first thing a user notices on his first visit to that website. So, it is essential to have a  standout and clean header. We should also make changes that fit our blog so that it looks pleasant in the eyes of users.

At a point in time, we will find the need to adjust the header of our blogger blog, which is why I believe you are reading this post right now. With the codes I will be sharing, you make any edit to your blog header is you really understand basic steps in coding.

If you don't have an idea of what to do, this post is going to help you, So, please follow the tutorial I have prepared for you and you will get it done in no time at all.

Step 1. Go to Template ⥤ Customise ⥤ Advanced ⥤ Add CSS

In the CSS editor, paste the following code, according to what you want.

#header-inner {background-position: center !important; width: 100% !important;text-align: center;}#header-inner img {margin: auto;}

You can change the center to right of left depending on where you want your header to be.

To Make Header Full Width

#header-inner { background-size: cover; width: 100% !important; text-align: center; } #header-inner img { width: 100%; height: 100%; }

To Align Text to The Side of Header - Side by Side Style

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

To make the image appear to  the left, change the left to right

Step 2. Apply code to blog by clicking the Apply to Blog button.

That's how it's all done. You can alter the the the texts in red.

Like I mentioned earlier, you can make more core edits if you know the basics of CSS. The margin can be altered, you can even add your own margin definition and set the measurement according to how it tally with your blog design.

If you don't know anything in CSS, you better not change the codes so as to not mess up your header. You can find someone who understands better than you do.

Adding Costume Quote To Blogger Posts

The design of blogs is very essential. We take a good look at the type of fonts and every other thing and discover something needs to be fixed. We do this until our template is perfect. You can feel like I need to change my quote style an you probably found yourself in this page.

Throwing one or two quotes in a post just to show off your template design is a very good strategy for trapping visitors to your website, because apart from content, visitors also check the design before they decide if they will visit again.

To have made this tutorial to help you edit your quote to your taste. Before proceeding, make sure you have backed up your template in case you mess up you just need to restore it again. To backup your template, open the blog you want to make customization on and go to; Template. By the upper right of  your screen, click on the Backup/Restore button.

Follow the steps carefully.

Step 1- Go to Template and click on the Edit HTML button


Step 2- On the new page that comes  up, click on the box and press crtl + F on your keyboard

Step 3- Search for the ]]></b:skin>  If you do not find it, search for </b:skin>  You will see something like the below screenshot. Just click on the arrow and search for ]]></b:skin>  again.



Step 4- Just before the ]]></b:skin> tag, paste the below code.

blockquote {
background: #f4f4f4;
margin: 7px 0px 15px;
padding: 20px 25px;
font-color: #333333;
font-style: italic;
font-size: 0.9375rem;
font: inherit;
text-rendering: optimizelegibility;
border:none;
}

After you have pasted the code, Save your template and check your website to see the new design.

To edit the color of the background - #f4f4f4
To edit the color of the font - #333333
To edit the size of the font - 0.9375rem