The new year is hours away, why not celebrate the joy of the welcoming the year 2018 with the ones who visits your blog?
Let's put a smile on everyone's faces who visits your blog by wishing them a happy new year when they open your website up for the first time.
We've created a small set of photos that you can add to your Blogger blog using a few lines of HTML, CSS and JavaScript code, no coding knowledge required, you have have to know the basics of editing HTML templates. All you are going to do is basic copying-pasting.
The new year is just hours away so without wasting much time let's get on with the tutorial.
Before we begin, here's a quick demo of what you will be adding: Demo Hosted on JSBin
Copy the code:
Let's put a smile on everyone's faces who visits your blog by wishing them a happy new year when they open your website up for the first time.
We've created a small set of photos that you can add to your Blogger blog using a few lines of HTML, CSS and JavaScript code, no coding knowledge required, you have have to know the basics of editing HTML templates. All you are going to do is basic copying-pasting.
The new year is just hours away so without wasting much time let's get on with the tutorial.
Before we begin, here's a quick demo of what you will be adding: Demo Hosted on JSBin
The code that you need
The new message is basically an image that is shown interactively using JavaScript and the way it is displayed using CSS as well. The entire code here is a mixture of HTML, CSS and JavaScript code.Copy the code:
<div class="new-year-message" id="stramaxon_new_year_message"></div>
<style>
.new-year-message {
display: none;
opacity: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .5s all ease-in-out;
z-index: 99999;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizdj3FJait56mKMFM_iTeNZYt4jfI4Cqyx9ZG4TtdS16zwaYVyJ96MoIeuuH9Mr5a-DCkabCQUPJPveTIjqfZ6qVrx7E0DMS1kgj0Vwn6lVHZB4ih_REe-icnX6lCPJj-PCTFPy91DjKeA/s1600/happy-new-year-3-t.jpg");
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
var seconds = 5; // Number of seconds you want the message to be visible
var show = true;
var message = document.getElementById("stramaxon_new_year_message");
// Check if the message has been shown before
if ( window.localStorage ) {
if ( !localStorage.getItem("stramaxonNewYearMessage") ) {
show = true;
}
else {
show = false;
}
}
// Show and click to close
if ( show ) {
_fadeIn( message );
setTimeout(function(){
_fadeOut( message );
}, seconds * 1000 );
if ( window.localStorage ) {
localStorage.setItem("stramaxonNewYearMessage", "shown")
}
}
else {
// don't show
}
message.addEventListener("click", function(){
_fadeOut(this);
});
});
function _fadeOut(el){
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .1) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
};
function _fadeIn(el, display){
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
};
</script>
Add it to your blog
After you have copied the entire code, the next step is to add it to your blog to actually display the new year message on your blog.
The easiest and safest method to add a new block of code on a Blogger blog is to add it using an HTML/JavaScript widget, follow the steps to add one to your blog:
- Log-into your Blogger dashboard
- On your blog's dashboard, go to the Layout section
- In the sidebar or a footer section, you may see "Add a Gadget" link, click open it
- In the list of gadgets you will find "HTML/JavaScript" to add it click on the plus icon next to it.
- You will now see a text-box under "Content", this is where you have to paste the copied code. Leave the "Title" field empty since we do not want the widget box to be apparently visible on the blog.
- Hit "Save" and that's it.
You have successfully added the code that was required to add a simple, fade-in fade-out new year message on your blogger blog.
I want a different image
As promised we will be providing a set of images that you can use depending on your blog's style and your taste. It is fairly easy to change which image you want to show.
- In the code that you pasted in the HTML/JavaScript gadget, find the following line
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizdj3FJait56mKMFM_iTeNZYt4jfI4Cqyx9ZG4TtdS16zwaYVyJ96MoIeuuH9Mr5a-DCkabCQUPJPveTIjqfZ6qVrx7E0DMS1kgj0Vwn6lVHZB4ih_REe-icnX6lCPJj-PCTFPy91DjKeA/s1600/happy-new-year-3-t.jpg"); - As the name suggests it tells the browser which image to load. The URL inside url() is the link to the image we are using. All you have to do is replace it with the URL of the image you would like to use.
Here are the links to four different images that we prepared for you to use (right click on the link and copy link address):
- Copy full-size image address (default)
- Copy full-size image address
- Copy full-size image address
- Copy full-size image address
Why I don't see it?
If you added the codes properly and you still can't see the message then it can be for two reasons:
- Either JavaScript is disabled in your browser. To fix it please look for ways to enable JavaScript in the browser you are using.
- In case you only were able to see it for the first time you loaded your blog and it doesn't show up after that, then it is not a problem, as the message is set to display only once for a person. You do not want to obstruct a reader's experience every time they visit a different page on your blog with the same message banner. If you just want to check how it looks then fire up a Incognito or Private browsing mode in your browser and load the blog.
That's it. We hope you find this useful and also wish you a very happy new year!
See you in 2018.
> Tools > Developer Tools
