Add Responsive Big Hero Header in Blogger Blog Homepage

When you land on a page, what's the first thing you notice?

Of course, the design and easiness in navigating through. When it comes to UX/UI design, hero header is vital for delivering your message and informing users what your site is about.

Today, I will share the code and walk you through the process of installing creative and responsive big hero text header in your blogger blog. Moreover, I also got a lot of requests to share 'Hero header design' of our homepage. 

A gentle reminder to new comers -- couple of months ago, I had shared animated hero header and creative hero footer design for blogger.  😊 

Let's start by taking a 💾 full backup of current design.

And here is the demo of our creative hero header design for blogger. It is responsive as well.

If you want to view the live responsive demo, here's the link to our codepen.

CodePen - Hero Header For Blogger

Many blogger templates lack professional and creative header designs. In this article, we are going to design a beautiful and animated hero header.

cdpn.io

You have the permission to share this code but it is mandatory to link this page. Lets play fair. 🤝

(I) Adding CSS Code for Hero Header

CSS styles the structure for your theme. Search for </head> or </head> and add following CSS code above it. 

<style>
/* Responsive Big Hero Header By TwistBlogg.com */
/* Keep Credit Intact */
.hero-header {
  margin: 50px auto 200px auto;
	padding: 50px 20px;
	max-width: 1200px;
	font-family: 'Inter,sans-serif';
	background: #f5f5f5;
}

.hero-header .main-text {
	font-size: 96px;
	line-height: 1.25;
	font-weight: 800;
	color: #000;
}

.spancolor {
	color: #0066ff
}

.text {
	margin-top: 1.5rem;
	font-size: 24px;
	line-height: 1.5
}

.two_buttons {
	grid-auto-flow: dense;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: 1rem;
	margin-top: 0.90rem;
	width: 48%
}

.default_button {
	display: inline-flex;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: 20px;
	text-decoration: none;
	border: 1px solid #DADADA;
	border-radius: 0.5rem;
	padding: 1rem 0.75rem;
	cursor: pointer;
	transition: all .15s ease-in;
	background-color: #0066ff;
	color: white;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.default_button svg {
	width: 22px;
	height: 22px;
}

@media screen and (max-width: 1024px) {
	.hero-header .main-text {
		font-size: 80px !important;
	}
}

@media screen and (max-width: 832px) {
	.hero-header .main-text {
		font-size: 64px !important;
	}

	.two_buttons {
		width: 55%
	}

	.default_button {
		font-size: 16px !important;
	}
}

@media screen and (max-width: 640px) {
	.hero-header .main-text {
		font-size: 48px !important;
		text-align: center;
		margin-top: -15px !important;
	}

	.text {
		font-size: 20px !important;
		text-align: center;
	}

	.two_buttons {
		width: 90%;
		margin: 30px auto;
	}

	.default_button {
		font-size: 14px !important
	}
}
</style>

(II) Adding HTML Code for Hero Header

This is where we call our hero header classes and tags. Add the following code to desired location for widget to appear or append in 'Add a Gadget' from layout.

<div class='hero-header'>
   <h1 class='main-text'><span class='spancolor'>Supercharge</span> your blogger blog</h1>
   <p class='text'>Build a blazing fast, optimized and premium blog, everything for <b><strong>FREE</strong></b> with us.</p>
   <div class='two_buttons'>
      <a href="/search" class="default_button">
         Get Started
         <svg style="margin-left: 1rem;">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="#fff" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right">
               <path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/>
               </path>
            </svg>
         </svg>
      </a>
      <a href="/p/contact.html" class="default_button" style="background-color: #07070A;">
         Contact Us
         <svg style="margin-left: 1rem;">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone-incoming">
               <polyline points="16 2 16 8 22 8"></polyline>
               <line x1="23" y1="1" x2="16" y2="8"></line>
               <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
            </svg>
         </svg>
      </a>
   </div>
</div>

That's all. You have now beautiful and responsive big hero header in blogger blog homepage. Do not forget to share and leave a comment. 🤓