๐Ÿ”ด Eye-Catching Hero Section in Blogger

 A Guide to Creating an Eye-Catching Hero Section in Blogger

๐Ÿ”ด Eye-Catching Hero Section in Blogger


The hero section is a crucial part of any website or blog as it serves as the first impression for visitors. In this article, we will guide you on how to create a stunning hero section for your Blogger blog. We'll provide you with a code snippet and explain each element to help you customize it according to your preferences.

Creating the Hero Section:

To create an appealing hero section, follow these steps:

  1. Go to layout options in your blogger dashboard
  2. Add a gadget blog widgets to show this element into top of your homepage
  3. Add a gadget and choose HTML javascript
  4. Paste this code on content and save 

  5. Now refresh your blog to see chenges 
  6. If you are facing amy problem join our teleegram group link in footer 


<div id='mainbx'> <div class='rown'> <div class='cntne'> <div class='dhanjeerdr'> <h2 class='htitle'>Best premium Blogger themes and beautiful codes + tips </h2> <p class='hero-text'>Find your queries what you want today๐Ÿ™‚
but first join my <a href="https://telegram.me/bloging_help"> telegram group</a> </p> </div> <div class='hero-search'> <form action='/search' class='search-form' method='get'> <input aria-label='Search' autocomplete='off' autocorrect='off' class='search-input' name='q' placeholder='e.g  THEME, TIPS,Code' spellcheck='false' type='text'/> <button class='search-button' title='Search' type='submit' value=''>
  <i class="fa-solid fa-magnifying-glass fa-beat" style="color: #00db0b;"></i>  
</button> </form> </div> <div class='hero-tags'> <span class='tags-label'><b>Topics:</b></span> <a class='popular-tag' href='https://www.bwal.tech/search/label/Blogger%20Themes?max-results=10'>Templates</a>, <a class='popular-tag' href='https://www.bwal.tech/search/label/Codes%20for%20blogger?max-results=10'>Widget</a>, <a class='popular-tag' href='https://www.bwal.tech/search/label/Editing?max-results=10'>Materials๐Ÿฅธ</a> 
</div> </div> </div> </div> 

<style> #mainbx{background: transparent;} .dhanjeerdr{color:var(--hero-color);text-align:center;margin:0 0 30px} .dhanjeerdr h1{display:block;font-size:35px;font-weight:700;margin:0 0 13px} .dhanjeerdr p{display:block;font-size:16px;color:var(--hero-text-color);margin:0} .hero-search{text-align:center;margin:0 0 13px} .hero-search .search-form{display:inline-block;position:relative;width:480px;max-width:100%;height:50px;border:0} .hero-search .search-input{float:left;width:100%;height:50px;background-color: var(--transparent-bg);

overflow:hidden;font-size:14px;color:#95a5a6;font-family:inherit;font-weight:400;line-height:51px;padding:0 20px;border:1px solid black;border-radius:4px} .hero-search .search-input::placeholder{color:var(--title-color);opacity:.55} .hero-search .search-input:focus{box-shadow:0 2px 8px rgba(0,0,0,0.1)} .hero-search .search-button{position:absolute;top:0;right:0;height:50px;background-color:transparent;overflow:hidden;font-size:14px;color:#95a5a6;text-align:center;line-height:51px;cursor:pointer;opacity:.85;padding:0 20px;border:0;border-radius:0 6px 6px 0} .hero-search .search-button:hover{background-color:rgba(155,155,155,0.1)} .hero-tags{float:left;width:100%;font-size:14px;color:var(--hero-color);text-align:center;margin:0 0 10px} .hero-tags span,.hero-tags a{display:inline-block text-decoration:none;} .hero-tags a{color:var(--hero-text-color);margin:0 0 0 10px} .hero-tags a:hover{color:var(--hero-color)} .hero-promo{float:left;width:100%;font-size:21px;color:var(--hero-text-color);text-align:center;padding:40px 0 0;margin:20px 0 0;border-top:1px solid rgba(255,255,255,0.15)} .hero-promo a{color:var(--hero-color);font-weight:700;margin:0} .hero-promo a:hover{color:var(--hero-text-color)} @media screen and (max-width: 1030px) { .rown{width:100%;max-width:100%;margin:0} .cntne{padding:0 15px}} @media screen and (max-width: 640px){ .dhanjeerdr h1 { font-size: 31px;}} 

    background: #004DFF;
background: linear-gradient(to left, #006cff 0%, #ff00c7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;



The hero section is a critical component of your Blogger blog's design. By following the steps outlined in this article, you can create an attractive and engaging hero section that captures the attention of your visitors. Customizing the provided code snippet allows you to match the hero section with your blog's branding and style. Experiment with different colors, fonts, and layouts to find the perfect combination that represents your blog effectively.

Last word

In this post we will provided information about ๐Ÿ”ด Eye-Catching Hero Section in Blogger, if you like this post then share with your friends and iff you have any queries then join our telegram groups for more informative materials bicouse most of tips provided only on telegram chenall ,your favourite DK technozone

Next Post Previous Post
No Comment
Add Comment
comment url