Last updated Blog:
I created this part two because part one was too long. 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:
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
If there are any </a> before the one you add, you may have to delete these. When you're finished it should look something like the highlighted part on the image below:
Now on your blog/page, save and exit out of HTML mode. Now simply click the paperclip link symbol and write what you want your link to be called, and for the actual link, it is # and whatever you called it. Eg like #your-text in my example. View the post/page, click the link you just made and that is the full URL of your jump link. Now you can write something and say something like "Click here to learn how to do this".
Sometimes too much writing can be highlighted, however this only happened to me before I realized you need to put the close tag </a> where you want the highlighting to stop.
You could also see in your post/page's HTML section that your blog has made extra HTML codes that are unneeded, say if your code is <a id="blog-beginning">, your blog has most likely made too many of these, how I solved this was by deleting all the extras that your blog has made apart from the one you put in.
The easiest way on Blogger to put a box around your text is by using Blockquote for the text you want to have a box around:
Then making blockquotes on your blog have a border, then every time you Blockquote text, it will have a box around it.
Simply add the following to your CSS box, remember to change the CSS name to what your CSS Blockquote name is:
.post-body blockquote {border:1px solid black}
How to make post snippets
The following information I found from these two places:
blog.irsah and support.google
However I also found where to put it in my theme, and I found what CSS code to use to make the 'Read More' link look better on my site, and I also included text above the snippet on posts only, a box around the snippet to make it easier for the user to know what part is the post and what part is the snippet and how to stop some of your posts snippets writing turning bold.
Search for this code in your blog's main HTML:
<b:include data='post' name='postFooter'/>
Put the following code above that code:
<div class='boxed'> <b:comment> Displays post snippets </b:comment> <b:eval expr='snippet(data:post.body, { length: 300 })'/><a class='jump-link flat-button' expr:href='data:post.url'><data:messages.readMore/></a></div>
The snippet of the post will also unfortunately appear after every post, so to help the reader understand, we need to tell them they've just read the following page, to do this:
Search for this code in your blog's main HTML:
<b:include data='post' name='postBody'/>
Place the following code after that code:
<p>You've just read:</p>
To stop some of your posts snippets writing turning bold:
Head to the CSS box, and place the following code:
.boxed {font-weight: normal;}
Make the 'Read More' link have less background colour if you have coloured links:
Head to the CSS box, and place the following code:
.jump-link {line-height: 0;}
It should look something like this with your picture on top if that's part of your theme:
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>
It will look something like this when finished:
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 highlighted 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:
Having your enter comment on your homepage could increase user engagement. To do this just follow this tutorial.
First, head to your settings and make sure your comment location is down as embedded, click save. Next, create a forum page, or just a page where your comments will be located.
Next, publish it and head to the page you just made. Scroll down to the comment section and right click here where the white space is, (your background may not be edited so just click as close to it as you can):
Click inspect and you should see a section saying 'Elements'.
Scroll to the part that should look something like this:
Right click that code and click copy and then copy outerHTML.
Head to your Layout and add a HTML widget. Paste your code and save your edits, move it to where you want it and don't forget to save your edits.
To have this on the homepage only, follow these steps. I recommend to have it on your homepage only as the comment section on your posts/pages can glitch if there is an extra comment section on the same post/page.
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)}
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.
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
.png)
.png)
_LI.jpg)
I'd love feedback about this Blog's coding series. Feel free to leave me some!
ReplyDelete