Download This Theme Modie UI + AutoSafelink Download Buy Now Score PageSpeed
Beranda
blogger
widget

Kumpulan Widget Header Website Blogger

Hero Header Website Blogger Widget.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Kumpulan Widget Hero Header Blogger
Kumpulan Widget Hero Header Blogger.

Header Hero Website Blog

Header website blog adalah bagian elemen dari website blog yang terletak di paling atas. Pada bagian header ini biasanya terdapat nama brand, logo atau gambar pendukung yang berukuran besar, tombol navigasi sebagai CTA (call to action), dan konten teks layanan unggulan dari situs kamu.

Table of Contents

Header pada sebuah website ataupun blog adalah pokok utama yang menggambarkan keadaan blog itu. Bayangkan saja bagaimana jika manusia tanpa kepala ataukah artikel tanpa judul. Jadi header weblog adalah sebagai tajuk situs yang fungsinya mendeskripsikan, menggambarkan dan menjelaskan blog itu seperti apa dan bagaimana.

Secara sederhana , header website blog adalah elemen visual di bagian awal atau atas halaman depan homepage situs Web Blog , yang merupakan salah satu kunci yang membuat web blog bisa tampak lebih menarik, misalnya Hero Header.

Hero header adalah penggunaan gambar, teks, dan elemen navigasi di bagian atas beranda atau halaman web. Bisa dikatakan beragam dalam kegunaannya. Judul pahlawan bisa berupa foto, foto dan teks, penggeser foto, perbaikan foto, video, atau animasi. Hero image ini adalah hal pertama yang dilihat pengunjung situs.

Membuat Widget Hero Header

Cara membuat dan menambahkan hero header halaman depan homepage Blogger, ikuti langkah-langkahnya sebagai berikut.

Tutorial

  1. Pertama-tama Login ke Dashboard Blogger Anda.
  2. Pilih Tata Letak.
  3. Pilih Tambahkan Gadget
  4. Pilih HTML/JavaScript
  5. Kemudian pilih salah satu script style header dibawah ini, salin dan tempelkan kode scriptnya di bidang konten tersebut
  6. aktifkan Tampilkan widget ini
  7. Terakhir - Simpan.

A. Widget Hero Header Style-1

Kode script Hero header style-1 halaman depan Homepage Blogger.

Kode script Header Style-1

<div id='hero-wrapper'>
<div class='row'>
<div class='container'>
<!--[ Homepage title ]-->
<div class='hero-content'>
<h1 class='hero-title'>Best Free & Premium Blogger and WordPress Tutorials For You</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. Blogger Tips' 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.sae.icu/search/label/template'>Templates</a>,
<a class='popular-tag' href='https://www.sae.icu/search/label/widget'>Widget</a>,
<a class='popular-tag' href='https://www.sae.icu/search/label/blogger'>Blogger</a>
</div>
</div>
</div>
</div>

<style>
#hero-wrapper{background-blend-mode:overlay;padding:50px 0;margin:0;background: url(https://res.cloudinary.com/the-taluat/image/upload/v1642954786/background-circle_xmyhnx_ecz0gk.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>

Demo Hero Header Style-1

Best Free & Premium Blogger and WordPress Tutorials For You

Find a perfect template Tutorial with SEO Optimized and improve your blog right now

Tags: Template, Widget, Blogger

B. Widget Hero Header Style-2

Kode script hero header style-2 halaman depan Homepage Blogger.

Kode script Header Style-2

<div class="welcomeSec">
  <div class="WelcomeSec" id="WelcomeSec">
    <h2 class="headC">Welcome to Sae Bloggers</h2>
    <p class="desC"><b>Sae Bloggers</b> : A New Blog Where You Can Find Blogging Tutorials, Tips, Tricks,Templates and Many More...</p>
<center>
  <a class="button" style="border-radius:25px 2px 25px 2px!important" href="https://www.sae.icu/" 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 Sae Bloggers
  </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>

Demo Hero Header Style-2

Welcome to Sae Bloggers

Sae Bloggers : A New Blog Where You Can Find Blogging Tutorials, Tips, Tricks,Templates and Many More...

  Looking For More Sae Bloggers

C. Widget Hero Header Style-3

Kode script hero header style-3 halaman depan Homepage Blogger.

Kode script Header Style-3

<div class='thetaluat-hero'>
<div class='thetaluat-hero-items'>
<h2> Develop Your Creative Skill with <br/> Free Design Tutorials</h2>
<p>Our blog helps to Provide Latest Graphic design Tips, Trends, Resources that <br/> you need to start your new projects.  Get Daily Inbox by subscribe <br/> our newsletter.</p>
<div class='butto'>
<button id='full'
    onclick="window.location.href = '#';">
        Click Here
    </button>

<button id='outline'
    onclick="window.location.href = 'https://example.com';">
        Wordpress
    </button>
</div>
</div>
</div>

<style>
/* thetaluat-hero items */
.thetaluat-hero {
background-color: inherit;
}
.thetaluat-hero-items {
display: flex;
padding: 1rem 0;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0 1rem;
}
.thetaluat-hero-items h2 {
font-size: 50px;
font-weight: 800;
width: 850px;
}
.thetaluat-hero p {
font-size: 17px;
font-weight: 500;
margin: 1rem 0;
}
.thetaluat-hero button{
padding: 1rem 4rem;
font-size: 17px;
font-weight: 600;
color: #fff;
border-radius: 3px;
transition: all 0.2s ease-in;
margin: 1rem 0;
border-color: #204ecf;
}
.thetaluat-hero button:hover{
cursor: pointer;
background: rgb(80, 148, 252);
transition: all 0.2s ease-in;
}
.butto{
display: flex;
gap: 1rem;
}
#full{
background: rgb(49, 172, 255);
}
#outline{
background: none;
border: 1px solid rgb(49, 173, 255);
color: inherit;
}
#outline:hover{
background: rgb(49, 173, 255);
color: #fff;
}
@media(max-width: 780px){
.thetaluat-hero h2{
font-size: 40px;
width: 100%;
}
}
@media(max-width: 400px){
.thetaluat-hero-items{
align-items: flex-start;
text-align: left;
}
.thetaluat-hero h2{
font-size: 30px;
}
.thetaluat-hero p{
font-size: 16px;
}
.thetaluat-hero button{
padding: 9px 15px;
}
}
</style>

Demo Header Style-3

Develop Your Creative Skill with
Free Design Tutorials

Our blog helps to Provide Latest Graphic design Tips, Trends, Resources that
you need to start your new projects. Get Daily Inbox by subscribe
our newsletter.

D. Widget Hero Header Style-4

Kode script hero header style-4 halaman depan Homepage Blogger.

Kode script Hero Header Style-4

<div class='hero-header'>
   <h1 class='main-text'><span class='spancolor'>Supercharge</span> your blogger blog</h1>
   <p class='text'>Build a blazing fast, optimized and premium blog, everything for <b><strong>FREE</strong></b> with us.</p>
   <div class='two_buttons'>
      <a href="/search" class="default_button">
         Get Started
         <svg style="margin-left: 1rem;">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="#fff" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right">
               <path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/>
               </path>
            </svg>
         </svg>
      </a>
      <a href="/p/contact.html" class="default_button" style="background-color: #07070A;">
         Contact Us
         <svg style="margin-left: 1rem;">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone-incoming">
               <polyline points="16 2 16 8 22 8"></polyline>
               <line x1="23" y1="1" x2="16" y2="8"></line>
               <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
            </svg>
         </svg>
      </a>
   </div>
</div>

<style>/* Responsive Big Hero Header By TheTaluat *//* Keep Credit Intact */
.hero-header {
  margin: 50px auto 200px auto;
	padding: 50px 20px;
	max-width: 1200px;
	font-family: 'Inter,sans-serif';
	background: #f5f5f5;
}
.hero-header .main-text {
	font-size: 96px;
	line-height: 1.25;
	font-weight: 800;
	color: #000;
}
.spancolor {
	color: #0066ff
}
.text {
	margin-top: 1.5rem;
	font-size: 24px;
	line-height: 1.5
}
.two_buttons {
	grid-auto-flow: dense;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: 1rem;
	margin-top: 0.90rem;
	width: 48%
}
.default_button {
	display: inline-flex;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: 20px;
	text-decoration: none;
	border: 1px solid #DADADA;
	border-radius: 0.5rem;
	padding: 1rem 0.75rem;
	cursor: pointer;
	transition: all .15s ease-in;
	background-color: #0066ff;
	color: white;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.default_button svg {
	width: 22px;
	height: 22px;
}
@media screen and (max-width: 1024px) {
	.hero-header .main-text {
		font-size: 80px !important;
	}
}
@media screen and (max-width: 832px) {
	.hero-header .main-text {
		font-size: 64px !important;
	}
	.two_buttons {
		width: 55%
	}
	.default_button {
		font-size: 16px !important;
	}
}
@media screen and (max-width: 640px) {
	.hero-header .main-text {
		font-size: 48px !important;
		text-align: center;
		margin-top: -15px !important;
	}
	.text {
		font-size: 20px !important;
		text-align: center;
	}
	.two_buttons {
		width: 90%;
		margin: 30px auto;
	}
	.default_button {
		font-size: 14px !important
	}
}
</style>

Demo Header Style-4

Supercharge your blogger blog

Build a blazing fast, optimized and premium blog, everything for FREE with us.

Get Started Contact Us
Demikian Sae Bloggers menyajikan informasi mengenai widget hero header website platform Blogger, semoga bermanfaat.

Source:
The Taluat dan Blogger

Go to Link
#blogger #widget

Posting Komentar

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.