Blogger Web Sitenize Şık Kahraman Başlığı Nasıl Eklenir?

 

Bu Yazıda Size Nasıl Hero Başlığı Ekleneceğini Göstereceğim Size Blogger Web Sitenize Nasıl Şık Hero Başlığı Ekleyeceğinizi Göstereceğim. Blogger Web Sitemize Adım Adım Bir Süreçle Kahraman Başlığı Ekleyeceğiz. Kullanacağımız Terimlerin Tanımından Başlayıp Daha Sonra Hero Header'ı Yükleyeceğiz. Haydi başlayalım.

Web Sitemde Neden Hero Header Kullanmalıyım?

• Hiç Bir Web Sitesini Ziyaret Ettiğinizde En Üstteki Büyük, Göz Alıcı Bölümü Fark Ettiniz mi? Bu Kahraman Başlığı! Gelin onu harika kılan şeyin ne olduğundan bahsedelim:
• Harika Resimler: Dikkatinizi Çekecek Büyük, Güzel Görüntüler. Web Sitesinin Tarzına Uygun Resimler.
• Kısa ve Tatlı Sözler: Web Sitesinin Neyle İlgili Olduğunu Size Anlatan Basit Ve Açık Sözler. Daha Fazlasını Keşfetmenizi Sağlayacak Kelimeler.
• Burayı Tıklayın Düğmeleri: " Buraya Tıklayın " veya " Daha Fazla Bilgi Edinin " Gibi Bir Şey Yapmanızı İsteyen Düğmeler . Harekete Geçmeye Davet Gibi.
• Her Cihazda Çalışır: İster Bilgisayarda, ister Tablette, ister Telefonda Olun, Başlık İyi Görünür. Tuhaf Biçimlendirme Sorunları Yok.
• Marka Öğeleri: Sitenin Logosu ve Renkleri Mevcuttur. Yani Doğru Yerde Olduğunuzu Biliyorsunuz.
• Bir Şeyler Yapan Düğmeler: Başlıktaki Bazı Şeyler Üzerine Geldiğinizde Değişebilir. Eğlenceli Bir Dokunuş Ekler.

Şık Bir Kahraman Başlığı Nasıl Eklenir?

Blogger Web Sitenize Şık Bir Kahraman Başlığı Eklemek İçin Aşağıdaki Adımları Tek Tek Takip Edin. Web Sitesine Şık Bir Kahraman Başlığı Eklemek İçin Adımları Sırasıyla Takip Etmelisiniz. Haydi başlayalım,

Öncelikle Blogger Kontrol Paneline Gidin ve Blogu'nuza Giriş Yapın.

Alt Başlık Etiketinin Üstündeki “Widget Ekle” İle Takip Edilen Bölüme Düzen'e tıklayın.

Daha sonra HTML JavaScript'ine tıklayın ve aşağıdaki HTML kodunu buna ekleyin. Bu Etiketi “ Başlık AdSense Etiketi ” Altına da Ekleyebilirsiniz.

Kahraman Başlığı Kodları

 <div class="welcomeSec">
  <div class="WelcomeSec" id="WelcomeSec">
    <h2 class="headC">Welcome To The Code Artist</h2>
    <p class="desC"><b>Code Artist</b> : A Blog Where You Can Discover All The Hacking Tips And Tricks From Basic To Advance. The Perfect Tech Hub Is Here.</p>
<center>
  <a class="button" style="border-radius:25px 2px 25px 2px!important" href="https://thecodeartist.in/" 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 Stuff
  </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>
 

Aşağıdaki Kimlik Bilgilerini Web Sitenize Göre Değiştirin

3 Numaralı Satırdaki Code Artist'e Hoş Geldiniz .

4 Numaralı Satırdaki İsim ve Açıklama .

6 Numaralı Satırdaki Düğme Bağlantısı.

7. Satırdaki Düğme Adı.

Son olarak Kaydet ve Güncelle Düğmesine tıklayın.

Bütün işlemler bu kadar herkese kolay gelsin.

See the Pen Hero Header by Serkan Gündoğdu (@serkangundogdu13) on CodePen.