🔴 Eye-Catching Hero Section in Blogger
Dhanjee Rider
A Guide to Creating an 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:
- Go to layout options in your blogger dashboard
- Add a gadget blog widgets to show this element into top of your homepage
- Add a gadget and choose HTML javascript
- Paste this code on content and save
- Now refresh your blog to see chenges
- 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.
Last word
In this post we will provided information about 🔴 Eye-Catching Hero Section in Blogger, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.
