Hello Guys! Welcome Back to My Blog. Today in this post I am going to share a tutorial on How To Add Stylish Hero Header in Median UI. If You use Blogger Platform then You will be know about Blogger Templates. Many Active Bloggers use Median UI Blogger Template in their Blog because Median UI is the best Blogger template in Blogger Platform. if you want to make more attractive Median ui by using a Stylish Hero Header then Follow this tutorial.
You can use this Stylish Hero Header only in Median UI 1.5 Blogger Theme. So Don't use it anyother Blogger Templates.
Benefits
- Make Your Blog More Attractive
- Increase Your Visitors By Adding This Beautiful Header in Median UI
- Search Form in Front of Your Visito
- You can use Your Blog Title and Description in Hero Header
How To Add Hero Header in Median Ui
Step 1 :- First of All, You need to Go on Blogger.com.
Step 2 :- Now Login with your Account.
Step 3 :- Then Click on Layout Section. Now Your theme Layout is open.
step 4 :- Now Check Your Large Content section and open Large Ads Widget and remove all Content of Widget.
Step 5 :- Now Copy the code provided below and paste in the Large Ads Widget.
<div id='hero-wrapper'>
<div class='row'>
<div class='container'>
<!--[ Homepage title ]-->
<div class='hero-content'>
<h1 class='hero-title'>Best Free and Premium Blogger Tutorials 2021</h1>
<p class='hero-text'>Find a perfect template Tutorial with SEO Optimized and improve your blog right now</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. star rating' spellcheck='false' type='text'/>
<button class='search-button' title='Search' type='submit' value=''><svg class='line' viewbox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><circle class='fill' cx='9.76659044' cy='9.76659044' r='8.9885584'></circle><line x1='16.0183067' x2='19.5423342' y1='16.4851259' y2='20.0000001'></line></g></svg></button>
</form>
</div>
<div class='hero-tags'>
<span class='tags-label'><b>Tags:</b></span><a class='popular-tag' href='https://www.theforyou.online/search/label/Blogger'>Blogger</a>,
<a class='popular-tag' href='https://www.theforyou.online/search/label/Html'>HTML</a>,
<a class='popular-tag' href='https://www.theforyou.online/search/label/Css'>CSS</a>
</div>
</div>
</div>
</div>
<style>
#hero-wrapper{background-blend-mode:overlay;padding:50px 0;margin:0;background: url(https://res.cloudinary.com/themewiki/image/upload/v1625063858/background-circle_xmyhnx.png)}
.hero-content{color:var(--hero-color);text-align:center;margin:0 0 30px}
.hero-content h1{display:block;font-size:35px;font-weight:700;margin:0 0 13px}
.hero-content 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:0;border-radius:6px}
.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}
.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) {
.row{width:100%;max-width:100%;margin:0}
.container{padding:0 15px}}
@media screen and (max-width: 640px){
.hero-content h1 {
font-size: 31px;}}
</style>
Step 6 :- Now Save Layout by Clicking on Save button in the Bottom Area.
Conclusion
Okk, Well thats's great tutorial on How To Add Hero Header in Median Ui 1.5 Blogger Theme. If you face any problems regarding this post then don't hesitate to publish your comments in to Comment section. thanks for reading me.