How To Add Stylish Hero Header In Your Blog.

Hello There Friend!

In Todays Post I Am Going To Tell You How To Add A Beautifull Hero Header In Your Blog, So That Your Website Will Look Cool, Most Of The Bloggers Used The Hero Header To Create A Best First Look Beautifull. For Those Who Don't Know About Hero Header Let Me Explain For Them.

What Is Hero Header?

A Hero Widget Is A Website Design Term Used To Describe An Oversized Banner Image At The Top Of A Website. Sometimes Called A “Hero Header,” It Is Usually Full-Width And Prominently Placed At The Top Of His Web Page, So It Serves As The First Look At Your Business Or Service. In Some Cases You Can Also Tell The Content Of The Website In The Hero Header.

Why Should I Add Hero Header In Your Blog?

Hero Header Is A Very Beautiful Widget That You Can Add In Your Blog So That It Would Create A Good Look Of Sense In  Your Blog.

How To Add Stylish Hero Header To Your Blog?

Now We Will Talk About How To Add Hero Header In Your Blog, Follow The Given Steps One By One To Add Hero Header To Your Blog.
Step 1: First Of All Go To The Bogger Dashboard And Login Into Your Blog.

Step 2: Go To The Layout The Section Add The Widget Above The Under Header Tag

Step 3: Then Click On The HTML Javascript And Add The Below HTML Code In That.
You Can Also Add That Tag In The Under Header Adsense Tag:

HTML

<div class="welcomeSec">
  <div class="WelcomeSec" id="WelcomeSec">
    <h2 class="headC">Welcome To The Cyber Terminal</h2>
    <p class="desC"><b>Cyber Terminal</b> : A Blog Where You Can Discover All The Hacking Tips And Tricks From Basic To Advance. The Perfect Tech Hub Is Here.</p>
<center>
  <a class="button" style="border-radius:25px 2px 25px 2px!important" href="https://thecyberterminal.blogspot.com/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" class="line" viewbox="0 0 24 24"><g transform="translate(3.500000, 3.500000)" stroke="#fff"><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; Looking For More Stuff
  </a></center></div></div>

<style>.headC{font-family:var(--font-bodyAlt);text-align:center;font-weight:900}
.desC{font-family:var(--font-bodyAlt);text-align:center;font-size:13px;padding-bottom:0px;line-height:1.6em;} .desC:after{content:'';width:0px;display:block;position:relative;bottom:-6px;border-bottom:1.5px solid #989b9f;margin:3px auto;animation:animatebord 3s infinite;-webkit-animation:animatebord 3s infinite}
@-webkit-keyframes animatebord{0%{width:20px}50%{width:100px}100%{width:20px}}@keyframes animatebord{0%{width:20px}50%{width:100px}100%{width:20px}}</style>

Replace The Credentials According To Your Need Like Image And Name And Also The Link

Step 4: Click On The Save Button And See The Magic.

We Have Added The Hero Header In Our Blog Sucessfully Hope You Have Like It.

If You Have Any Problem In Adding The Hero Header In Your Blog Tell Me In The Comment Section I Will Fully Try To Resolve It.

Thanks For Reading.