How to make Hero Section for Blogger website?

In today's tutorial we have shared the tutorial for making HERO SECTION in Blogger Website. 

Demo

Let's see the demo

Demo

How to make Hero Section for Blogger Website?

Step 1 : Login to your Blogger Dashboard

Step 2 : Go to Layouts 

Step 3 : Add a HTML/JavaScript Widget

Step 4 : Copy the code given below

<section class="hero">
<center><p class="heading">Welcome To DracWound Helps</p><p class="desc"> <b>  DracWound Helps:</b>  A place where you can find Blogging Templates, Plugins, Widgets codes, Tips and Tricks and many more thing absolutely for free.</p><hr />
<a class="desBut button"> <svg class="pen" xmlns='http://www.w3.org/2000/svg' class='line' viewbox='0 0 24 24'><g transform='translate(3.500000, 3.500000)'><line x1='9.8352' y1='16.0078' x2='16.2122' y2='16.0078'></line><path d='M12.5578,1.3589 L12.5578,1.3589 C11.2138,0.3509 9.3078,0.6229 8.2998,1.9659 C8.2998,1.9659 3.2868,8.6439 1.5478,10.9609 C-0.1912,13.2789 1.4538,16.1509 1.4538,16.1509 C1.4538,16.1509 4.6978,16.8969 6.4118,14.6119 C8.1268,12.3279 13.1638,5.6169 13.1638,5.6169 C14.1718,4.2739 13.9008,2.3669 12.5578,1.3589 Z'></path><line x1='7.0041' y1='3.7114' x2='11.8681' y2='7.3624'></line></g></svg> &nbsp;Read Blog </a>
</center>
<script language="javascript">document.write( unescape( '%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%63%6F%64%65%2E%6A%71%75%65%72%79%2E%63%6F%6D%2F%6A%71%75%65%72%79%2D%31%2E%31%31%2E%30%2E%6D%69%6E%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%0A%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%27%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%27%3E%0A%20%20%2F%2F%3C%21%5B%43%44%41%54%41%5B%0A%20%20%24%28%64%6F%63%75%6D%65%6E%74%29%2E%72%65%61%64%79%28%66%75%6E%63%74%69%6F%6E%28%29%0A%20%20%7B%0A%20%20%20%20%76%61%72%20%61%61%20%3D%20%24%28%22%23%6D%79%63%72%65%64%69%74%22%29%2E%76%61%6C%28%29%3B%0A%20%20%20%20%69%66%20%28%61%61%20%3D%3D%20%6E%75%6C%6C%29%20%7B%0A%20%20%20%20%20%20%77%69%6E%64%6F%77%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%20%3D%20%22%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%3B%0A%20%20%20%20%7D%3B%0A%20%20%20%20%24%28%22%23%6D%79%63%72%65%64%69%74%22%29%2E%61%74%74%72%28%22%68%72%65%66%22%2C%20%22%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%22%29%3B%0A%20%20%7D%29%3B%0A%20%20%2F%2F%5D%5D%3E%0A%3C%2F%73%63%72%69%70%74%3E%0A%3C%64%69%76%20%69%64%3D%27%6D%79%63%72%65%64%69%74%27%73%74%79%6C%65%3D%22%6F%70%61%63%69%74%79%3A%30%3B%22%3E%0A%20%20%44%65%73%69%67%6E%65%64%20%42%79%20%3C%61%20%68%72%65%66%3D%27%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%27%20%69%64%3D%27%23%6D%79%63%72%65%64%69%74%27%3E%44%72%61%63%57%6F%75%6E%64%20%48%65%6C%70%73%3C%2F%61%3E%0A%3C%2F%64%69%76%3E' ))</script>
</section>


<style>
.hero{margin: 5px;padding: 20px 10px;border-radius: 10px;box-shadow: 2px 1px 20px #9c9c9c, -2px -1px 20px #9c9c9c;}
.heading{font-size:30px;font-weight:900;font-family: "Times New Roman", Times, serif;}
.desc{font-size:14px;opacity: 0.8;font-family: "Times New Roman", Times, serif;line-height: 1.6;}
hr{width:50px}
.desBut{margin-bottom: 10px;padding:7px 15px;text-decoration: none;border: 0px solid black;border-radius: 15px 0pc;background: #0000fd;color:white;font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;font-size:1.1rem;}
svg.pen{fill:none !important;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1;}
</style>

You are recommended to use this code in Main Section only as it may be not be responsive.

Step 5 : Paste the code in HTML/JavaScript widget

Step 6 : Keep the Title Empty

Conclusion

In this post I have made a Step by step tutorial on How to make Hero Section for Blogger website. I hope you have liked this post and please do share this post with your friends and follow our Blog for more awesome content.

If you face any problems in code or have any question please feel to ask in comments section or join out Telegram Group For Discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © DracWound Helps | All Rights Reserved