HTML and CSS codes for your Blogger/site Part One

Part One HTML and CSS codes for your Blogger however most can be implemented on other sites.

First, back up your template. Make sure you have the following code just above your theme HTML </body> don't worry if you have to place another code just above </body> after.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Click the dropdown menu to go to the part of the page you need. Can't find what you're looking for? Click here to see all of the coding you can try.

Skip to the part you need:

Where is the HTML box Search for a specific HTML code Find your widget's name Widget on homepage only Hide widget from homepage Widget on specific page only Hide widget from a page Move locked widgets in layout Make a dropdown menu Edit labels gadget Make a clickable button Make a back button Add a YouTube video to your Blog Add a sticky back to top button Make any widget sticky Sticky widget malfunction CSS Sticky widget malfunction two CSS

Where is the HTML box

The HTML box is located when you press Theme and press the arrow, there you should see a HTML option as shown below. Those 3 lines are your menu bar. 

How to search for a specific HTML code

This is different than searching for a HTML via your Posts/Pages.

First click somewhere on the HTML page where the codes are, if you click off of that screen it could bring up a different search bar.

So once you've clicked somewhere on the HTML page where the codes are, hold down Cntrl and press F.

Enter the code you want to search in the search bar and then press enter.

The search bar should appear in the same place as shown in the below image, if it doesn't, it means you didn't click somewhere where the codes are, you clicked somewhere around the box shown below where you enter the HTML. 

Find a widget's name

When you go to your Blogger's menu, there is a Layout option. In there, you can create certain widgets, HTML widgets, Pages, Lists, your profile widget etc. You can read more on how to create and move the widgets on my Designing for your blogger Article. 

To find the name of the widget you have made, head to the HTML of your Blogger, how to do this is described above. Then simply press 'Jump to widget' which looks like this:

The next step is pretty easy. Depending on what your widget is, e.g. a page link widget, find the name, and click through those, until you find the one that you made (it will have the links you used or writing etc), example below:

HTML How to only have certain widgets on the Homepage

This information was found at BloggerSentral

One problem with Blogger is that when you click on a post you have made, or page, it shows all the widgets still, which forces the reader to scroll past all of that before reading.

Here is a quick method to hide a widget everywhere accept the home page.

Go to your HTML, and click 'jump to widget' select the widget you need to jump to, e.g HTML1. Your posts widget is classed as 'Blog1'.

Find the part where it says <b:includable id='main'>

After this part of the code, enter

<b:if cond='data:blog.url == data:blog.homepageUrl'>

 Then simply scroll down to the part just before it says </b:includable>

Every widget is finished like this. Just before it says that, place this code:

<b:else/>

<style type='text/css'>

# {display:none;}/*to hide empty widget box*/

</style>

</b:if>

HOWEVER, where the # is you need to write what widget you're editing e.g HTML1.

So it should look something like this:

Don't worry if it these codes are very far away from each other, it all depends on how much code is in your widget.

HTML How to have a widget everywhere but the homepage

This information was found at Sneeit

Again, head to your HTML, click 'jump to widget' select the widget you need to jump to, e.g HTML1. Your posts widget is classed as 'Blog1'.

Let's say you want to hide all your posts from the main page. To do this, you find the part where it says <b:includable id='main'>

After this part of the code, enter 

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:remove/>

</b:if>

It should look something like this:

HTML How to show a widget on a specific page/post only

This information was found at BloggerSentral

Again, head to your HTML, click 'jump to widget' select the widget you need to jump to, e.g HTML1. Your posts widget is classed as 'Blog1'.

Let's say you want to hide a widget from a specific page, to do this, you find the part where it says <b:includable id='main'>

After this part of the code, enter

<b:if cond='data:blog.url == "PUT_URL_HERE"'>

Then simply scroll down to the part just before it says </b:includable>

Just before it says that, place this code:

<b:else/>

<style type='text/css'>

# {display:none;}/*to hide empty widget box*/

</style>

</b:if>

HOWEVER, where the # is you need to write what widget you're editing e.g HTML1.

It will look something like this, however remember to change what I have underlined to your own widget name and the URL of your choice:

HTML How to hide a widget on a specific page/post only

This information was found at BloggerSentral

Head to your HTML, click 'jump to widget' select the widget you need to jump to, e.g HTML1. Your posts widget is classed as 'Blog1'.

Let's say you want to hide all your posts from the main page. To do this, you find the part where it says <b:includable id='main'>

After this part of the code, enter 

<b:if cond='data:blog.url == "PUT_URL_HERE"'>

<b:remove/>

</b:if>

It will look something like this, however remember to change what I have underlined to the URL of your choice:

HTML How to move locked widgets in the Layout

As you may realise, some widgets can't be moved in the layout. Simple code can fix that.

Head to your HTML, Jump to your widget, and where it says Locked = 'true', change that to false, it should now look like this:

HTML how to make a dropdown menu

Head to Script Generator. You can create however many Menus and you can place however many on your blog. 

The steps once you're there are easy to follow also, just copy and paste the code it generates into your HTML page/gadget. 

It should look like this

Edit labels gadget CSS 

The labels gadget is quite standard. However I found a tutorial on the internet showing how to fix this. I found it at Tuteinside.net. 

First, head to your HTML and Jump to widget Labels. 

Find the code that starts with this:  <b:widget id='Label1' and ends with this  </b:widget>

It will probably be a long code with loads of items that make up the labels gadget such as id='cloud'. Don't worry about how long it is before you find the </b:widget>.

You need to delete all of the code that starts with:  <b:widget id='Label1' and ends with this  </b:widget>, and replace it with:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

</b:if>

<h2><data:title/></h2>

<div class='widget-content'>

<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>

<option>Your text here</option>

<b:loop values='data:labels' var='label'>

<option expr:value='data:label.url'><data:label.name/> 

(<data:label.count/>)

</option>

</b:loop>

</select>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Where I highlighted, is where you'd write what you'd like to, e.g. Click here for articles.

The final result should look something like this, accept yours will probably be white or the color theme of your blog, but you can always edit the color like I have if you look at the first image below, by adding more CSS as I explained how to do in my Basic CSS codes for your blogger Article, again, the finished result should look something like this:

How to create a clickable button 

To create a clickable button is fairly simple, first choose where you want your button to be, either your post/page by simply heading to the HTML part, or your Homepage by heading to layout and adding a HTML widget, and then simply adding the following code: 

<button type="button"><a href="Your link">Your button's name</a></button>

You'll have to put your link and your button's name where I have highlighted.

It will look something like this when you're done:

How to create a back button

To create a back button is very easy, simply head to your Layout, create a HTML widget, place it where you want it to appear, and pop this code in:

<button onclick="history.back()">Go Back</button>

I found this information from  W3schools. 

It is always very useful to have a back button on your blog, so the reader can find their way back, nice and easily! 

How to add a YouTube video to your Blog

Head to your posts and create a new post, click the video icon, this allows you to search for a YouTube video. Add the one you want, and click on HTML. Select all and copy. Then either:

Paste it where you want it in the HTML section of your Post/Page

Or

Add it to your homepage by heading to your layout and creating a HTML widget, add that code in, move it to where you want it on your homepage

All done!

How to make a sticky back to top button

The following information was found at newbloggerwidget

First, copy this: 

<!--New Blogger Widget back to top widget Start--><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#nbw-top").fadeIn()}else{$("#nbw-top").fadeOut()}});$("#nbw-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a href="http://newbloggerwidget.blogspot.com"></a><a id='nbw-top' style='display: none; position: fixed; bottom: 1px; right:0%; cursor:pointer;font:12px arial;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2lfK1LtKsfiekbAXOlDHqILWKecx2cDkcnx0yyMXil-kXgnSCqesc7Ua8-3fTSxLwjBJ5C9taiCk3kpPAT7RwebcMfs68D5xTfQ7TMXdbefPI-a2lEXhSHvFGEN0tnF2yoSuY1JyuQBw/s1600/newbloggerwidget-back-to-top-1.png' width="50px" height="50px"/></a><!--New Blogger Widget back to top widget End-->

Place the above code in your Layout via the HTML widget and place it in the footer section. 

To make this work on a post/page only, I recommend reading this part of this page. 

At the end of your blog, it should now look like this:

Make any widget sticky

A sticky button 

To make a basic button, simply create a post, write the word you want for your button, press the paperclip button, and enter the link you want the button to link to. 

Click the HTML of the post/page and copy it. Put it in your Layout via the HTML widget, move it where you want to. 

I tell you how to make this sticky, just keep reading. 

A sticky Menu

If you want any other Nav menu, copy my HTML example of one on this page, then put this in your Layout via the HTML widget and place it where you want it. 

I tell you how to make this sticky, just keep reading. 

Make any widget sticky

Now to make whatever you have chosen sticky, you need to find the name of your HTML widget.

To find the name if you added your button to your layout via the HTML widget, you need to follow these steps. 

Once you know what your widget is called, simply head to your CSS edit page, and add this code:

#YOURWIDGET { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}

You can edit the the  numbers to adjust to the way you like. To make this work on a post/page only, I recommend reading this part of this page. 

Sticky widget malfunction CSS

If you are using Blogger, sticky buttons may make your header malfunction. Add this code to your CSS box, to make your header not pop up on scroll anymore, your header will still be at the top of the page, just not on scroll, thus stopping it from malfunctioning:

.boxed {border: 1px solid black ;} .centered-top-container.sticky {display: none;}

Sticky widget malfunction two CSS

After making sticky buttons, your Blog could make every HTML become sticky. If this happens you first need to find the name of your HTML widget.

To find the name if you added your button to your layout via the HTML widget, you need to follow these steps.

Once you know what your widget is called, simply head to your CSS edit page, and add this code:

#YOURWIDGET { position: inherit;}

Conclusion

Don't forget to save your edits!

I do hope you've found something useful from this page. Leave me a comment below if something isn't working right! Thank you!

The next thing I suggest you read is HTML and CSS codes for your Blogger - Part Two