How to Add a Hero Section in Blogger Home Page

Hello Viewers, Welcome to My Site “Shubham Blogging”. I hope all are doing good. Today, I will share a Code of ‘Hero Section’s which you can add in your Blogger Home Page. The Hero Section is Fully Responsive to all the device and make your more attractive to your viewers.

Hero Section

Your Blogger website will look more professional by adding a personalised Hero section, and you can easily upgrade the blog style. I’ve used the Median UI v.6 themes in this video. But if you follow our advice, you can use this hero section in almost any theme.

Steps to Add Hero Section in Blogger Home Page

Step 1 :- Login to your Blogger Dashboard, and Go to Layout

Step 2 :- Click on Adda Gadget Below Horizontal-Ad

Step 3 :- Click HTML/JavaScript and Copy the whole code and Paste it.

Now you have to add the about your blog at all the marked places and save it.

<div class='hero'><div class='hero-items'><h2> Develop Your Creative Skill with <br/> Free Design Tutorials</h2><p>Our blog helps to Provide Latest Tips and Tricks tutorials about Blogging <br/> Business, SEO Tips, much more. this Blog and stay tuned to this <br/> blog for further updates.</p><div class='butto'><button id='full'    onclick="window.location.href = '#';">        Learn SEO    </button><button id='outline'    onclick="window.location.href = '#';">        Blogger Tips & Tricks    </button></div></div></div><style>/* hero items */.hero {background-color: inherit;}.hero-items {display: flex;padding: 1rem 0;flex-direction: column;align-items: center;text-align: center;margin: 0 1rem;}.hero-items h2 {font-size: 50px;font-weight: 800;width: 850px;}.hero p {font-size: 17px;font-weight: 500;margin: 1rem 0;}.hero button{padding: 1rem 4rem;font-size: 17px;font-weight: 600;color: #fff;border-radius: 3px;transition: all 0.2s ease-in;margin: 1rem 0;border-color:  #000000;}.hero button:hover{cursor: pointer;background:  #ff9900;transition: all 0.2s ease-in;}.butto{display: flex;gap: 1rem;}#full{background:  #ff9900;}#outline{background: none;border: 1px solid  #000000;color: inherit;}#outline:hover{background:  #ff9900;color: #fff;}@media(max-width: 780px){.hero h2{font-size: 40px;width: 100%;}}@media(max-width: 400px){.hero-items{align-items: flex-start;text-align: left;}.hero h2{font-size: 30px;}.hero p{font-size: 16px;}.hero button{padding: 9px 15px;}}</style>

Conclusion

In this post I shared you “How to Add a Hero Section in Blogger Home Page“. I hope that you like my post. Please visit our site daily for more new posts. Thankyou for visiting our site.

 

Leave a Comment