HTML and CSS codes for your Blogger/site Part Two

Part Two 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:

Add a jump link Add a Popup with a link Redirect a user who visits your post/page Add a background image on your Blogger Embed a site via Iframe and make it look like it's part of your Blog Edit your Blogger's cookie notice

How to make a jump link

At the start of this page I added jump links to make this page easier to navigate. A jump link means, a link in which when a user presses it, it jumps them to a specific part of the page. I found this information out at Hubspot.

To start, click on the HTML of the post/page you want to jump link. Scroll to the part of the page that you want your jump link to link to. 

Simply add the following code <a> <a id="">

In between "" put a name relating to what your jump link is, like blog-beginning. Your code should be something like this

<a> <a id="your-text">

And where you want your jump link to end, simply add the following code

</a>

To link to it, write your page url with #your-text that you chose as your id e.g.

https://www.ventsharmblogs.co.uk/2023/11/skip-to-part-you-need-add-jump-link-how.html#jump-link

That's a short term method, you can also try:

✨ Make Jump Links easier in Blogger ✨

This jump-link helper works in Compose view and does not create IDs inside option lists.

What that means

• Dropdown <option> items are never used as jump targets
• You only add a drop-down list in HTML the jump link destination is done in composure (so much easier)

---

Where to put the JavaScript

Blogger → Layout → Add a Gadget → HTML/JavaScript

Paste the code below and Save.

<script>(()=>{const e=s=>(window.CSS&&CSS.escape)?CSS.escape(s):s.replace(/[^a-zA-Z0-9\-_:.]/g,"\\$&"),t=i=>{let d=document.getElementById(i);if(d)return d;let a=document.querySelector('.post-body a[href="#'+e(i)+'"],.post-content a[href="#'+e(i)+'"],.entry-content a[href="#'+e(i)+'"],a[href="#'+e(i)+'"]');if(!a)return null;let h=a.closest("h1,h2,h3,h4,h5,h6,p,li,div,section,article,blockquote")||a;h.id=i;return h},o=h=>{if(!h||h[0]!=="#")return;let i=h.slice(1),d=t(i);if(!d)return;d.scrollIntoView({behavior:"smooth",block:"start"});try{history.replaceState(null,"",h)}catch(e){location.hash=h}};document.addEventListener("change",n=>{let s=n.target;if(s&&s.tagName==="SELECT"&&s.name==="my_menu"&&s.value&&s.value[0]==="#"){o(s.value);s.selectedIndex=0}});document.addEventListener("click",n=>{let a=n.target.closest&&n.target.closest('a[href^="#"]');if(!a)return;let h=a.getAttribute("href");if(!h||h==="#"||document.getElementById(h.slice(1)))return;let d=t(h.slice(1));if(d){n.preventDefault();o(h)}});location.hash&&o(location.hash)})();</script>

---

How to add the link (Compose view)

1. Type your section text, for example:

   Best hospital experience

2. Highlight it
3. Click Insert link
4. Enter:

   #hospital-experience
   

(Or whatever you want to call it)

      5.Apply

---

How to create the dropdown jump menu

This will link to your jump links

Use this exact structure:

<form name="my_jump">
<select name="my_menu">
<option value="">Choose an option</option>
<option value="#hospital-experience">Best hospital experience</option>
<option value="#doctors-experience">Best doctors experience</option>
</select>
</form>🌟

🔐 Tip: Add a 🌟 symbol after your drop-down menu so you can easily see where to start typing again in Compose view.

Don’t delete it — removing text too close to the menu can accidentally delete part of the code.

• The <option> values control where to jump
• The script reads the value but never adds IDs to the option list

Feel free to view my live demo

How to make a pop up of text and include a link

I found the following information at W3Schools. Simply add the following code to your post/page's HTML at the very end, if there is a tiny bit of code before it at the end of something you have written in your blog, like <p>, simply delete that bit before pasting this as that could cause this to not work properly:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {font-family: Arial, Helvetica, sans-serif;}

.callout {

  position: fixed;

  bottom: 35px;

  right: 20px;

  margin-left: 20px;

  max-width: 300px;

}

.callout-header {

  padding: 25px 15px;

  background: #555;

  font-size: 30px;

  color: white;

}

.callout-container {

  padding: 15px;

  background-color: #ccc;

  color: black

}

.closebtn {

  position: absolute;

  top: 5px;

  right: 15px;

  color: white;

  font-size: 30px;

  cursor: pointer;

}

.closebtn:hover {

  color: lightgrey;

}

</style>

</head>

<body>

<div class="callout">

  <div class="callout-header">Popup Header</div>

  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>

  <div class="callout-container">

    <p>Some text to describe the popup message <a href="your link">your button's name</a> some extra text if you like</p>

  </div>

</div>

</body>

</html>

How to redirect a user who visits your post/page

To redirect a user who visits a post/page of yours is fairly simple. Simply copy and paste the following code into the HTML part of your post/page:

<head> <meta content="5; URL=the link" http-equiv="refresh"></meta></head> <body> <p>If you are not redirected in one second, <a href="the link">click here</a>.</p></body>

You will have to change the hirefreshed parts of that code, to your own amount of seconds that you want for the user before they are redirected, and a link of your choice.

When you are done, it will look like this before the user is redirected to where you direct them:

Add a background image on your Blogger

I found this information out at Blogknowhow.Always check that the theme edits you make, don't alter any theme edits that you have already made before pressing save. The simple way to do this is to head to your Blogger's theme, click customize and select the background image you want. If you have tried this but it resets all of your edits on the theme editor, so you can't save it, or if you're like me and it doesn't work, you'll need to follow these steps. 

First, make a Blog post or page and upload the image that you want as the background. Publish the post, head to the post's URL and click on the image, you'll see your image URL. You'll need that. Head to the theme part of your Blog. Find the part that says 

body { and directly after that line, place the following code:

background-image: url(URL address of your image);

Change the writing in bold to your image URL. Your code should look like this:

body {background-image: url(URL address of your image); (existing code)}

How to embed a site via Iframe and make it look like it's part of your Blog

I found this information out at Stackoverflow. 

Check this page out and the page it recommends until you know the basics of Blogger, so you can add the following code to where you want it:

<iframe src="The URL here" scrolling="no" style=" width: 550px; height: 500px; overflow: hidden;" ></iframe>

With the above you can't scroll, so you can edit the bold parts to your liking, change the overflow from hidden to, visible, scroll, auto, try different things to see what works for you.

How to edit your Blogger's cookie notice

I found this information at Xomisse.

First head to your Blogger's main HTML. Next, above the </head> tag, paste the following:

<!-- START XOMISSE Custom EU Cookies Notice -->  <script type="text/javascript"> cookieOptions = { msg: "Information about your cookie notice", link: "Your cookie notice URL here", close: "Okay!", learn: "Learn More" }; </script> <!-- END XOMISSE Custom EU Cookies Notice -->

Edit the writing in bold with your information.

Conclusion

Don't forget to save your edits! 

I do hope you've found something useful on 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 three