🔴 Eye-Catching Hero Section in Blogger

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

🔴 Eye-Catching Hero Section in Blogger


Introduction:

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 

Code

 
 
<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;}} 

.htitle{
    background: #004DFF;
background: linear-gradient(to left, #006cff 0%, #ff00c7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}</style>

  

Conclusion:

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.

Next Post Previous Post
No Comment
Add Comment
comment url

Paid Templates

Blogger themes

Movie theme

codes for blogger

Grafix Material