Blog Personal tentang tips Blogging dan Internet

Header Blog Valid Schema.Org dan HTML5

Makin kesini semakin jarang buat artikel tentang tutorial blog, mumpung Saya ada waktu maka kali Saya akan buat tutorial cara membuat header blog valid schema.org dan HTML5 :D . Selain valid schema.org dan HTML5 header blog ini juga sangat bagus dan SEO.

Bagaimana cara pemasangannya ? silakan ikuti cara yang akan Saya paparkan berikut ini :

1. Silakan cari kode di bawah ini atau yang mirip seperti kode dibawah. Jika masih kesulitan silakan pilih menu Lompat ke Widget > Pilih Header1.

<b:widget id='Header1' locked='true' title='Kang Mousir (Header)' type='Header'>
...
</b:widget>
2. Lalu ganti kode yang diatas dengan kode dibawah ini.
<b:widget id='Header1' locked='true' title='Kang Mousir (Header)' type='Header'>
      <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
            <div style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='description'/></div>
          </b:if>
        </b:if>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:title='data:title' itemprop='image' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
               <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
                <div style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='description'/></div>
            </b:if>
          </b:if>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>      
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <h1 class='title'><b:include name='title'/></h1>
           <b:else/>
             <h1 class='title'><b:include name='title'/></h1>
           </b:if>
        <b:else/>
          <h2 class='title'><b:include name='title'/></h2>
        </b:if>
        <b:include name='description'/>
      </div>
    </div>
  </b:if>
</b:includable>
      <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description' itemprop='description'><span><data:description/></span></p>
  </div>
</b:includable>
      <b:includable id='title'>
    <a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'><data:title/></span></a>
</b:includable>
    </b:widget>
3. Selesai :D

Sekarang tinggal Anda cek di https://developers.google.com/structured-data/testing-tool/. Bagaimana hasilnya keren bukan, apalagi kalau stuktur templatenya sudah memakai struktur yang disarankan oleh google pasti lebih keren seperti template buatan Saya Sang SEO :). Nih hasilnya
Header Blog Valid Schema.Org dan HTML5

Struktur header ini sangat disarankan karena bagus untuk memudahkan robot google menjelajahi blog kita. Itulah tutorial singkat yang dapat Saya berikan, semoga bermanfaat ya :D

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Kang Mousir langsung di pesan kotak masuk.

feedburner

29 Komentar untuk "Header Blog Valid Schema.Org dan HTML5"

Anak Nelayan

Makasih kang, saya puas banget dengan template sang seo :-d

Si Geeniuss

Sang Seo emang keren kang, dan pemiliknya juga baik hati lagi, Bagi yang belum pake sang seo saya sarankan memakainya. :) Nanti saya ikut promosikan deh hehehee

Dede Mahmud

Kang tolongin dong saya ada masalah dengan template blogspot. Baru-baru ini saya mengedit templet blogspot malah jadi berantakan, setelah saya perhatikan ternyata ada yang aneh dimana dalam template asli yang saya unduh ada 3 kata "data:post.body" tapi setelah disimpan di template blogspot hanya bisa tersimpan 2 data:post.body tersebut. Saya coba dengan blog yang lain ternyata sama semua malah jadi berantakan... :D apa yang salah ya?

Putra Adam

nyimak kang .. saya ambil pertamax :D

Azarine Yusriyah

kang mousir jarang update sibuk dengan Blog yang lainya x..?? itu yang diatas ada tulisan "Mobokio (Header)" di isi Nama blog ya kang...

Elang Al Farez

Kalau Untuk Site Navigation buat valid html5 bagaimana ya caranya?

PonselFavorit Indonesia

apakah hanya langsung mengganti kode html itu kang? bagaimana dengan kode cssnya, apakah tidak perlu diganti karena setiap blog memiliki kode css yang berbeda

Fitra Rahim

Makasih kang sangat berguna untuk blog saya

Hadi Ismail

Mau tanya kang mousir kok layout tata letak iklan saya di header atas yang berukuran 729 pixel x 90 pixel jadi hilang ya setelah saya pasang mohon bantuannya kang adienote[.]com

Terima Kasih

Kips Bandung

Tutorial yang bagus, bagus untuk SEO dan pastinya semakin tinggi kualitas blognya.
Salam!

yusuf ryandi

Ga ngerti ini buat apaan, tapi ikutin akang aja aaah.. Biar tambah SEO templatenya hehehe :D

Icah Banjarmasin

Assallammualaikum Kang..rasanya lama sekali saya ga ngesot ke rumah abang..nahhh ini Tips yang sangat bagus sekali..PERTAMAX..ahhahayy

Zul fikar

kang boleh jelasin fungsi script ini
http://pastebin.com/raw.php?i=5pfwZX8V
yg ada di templet agan dibawah <head>
terima kasih

Elang Al Farez

Wkwwkwk tapi benar juga sih gan :v

faiz ihsan

Wah keren sekali kang, langsung ke TKP nih buat praktekin :D

faiz ihsan

Wah keren sekali kang, langsung ke TKP nih buat praktekin :D

Akram Shafwan

wah saya kagak ngeri, maklum blogger newbie. hehe

cak darwis

manteb mas bro buat yg hobi komputer mah ini gampang

Dion Angelus

emang keren tempalte ini gan, ane suka juga..mantap

Ikhsanudin din

Wah banyak nian kodenya. masih bingung

ade rizky

saya masih bingung kang,,
maklum masih newbie :D
terimakasih infonya,, saya akan coba pelajari perlahan :)

Reky Wiryanto Bongso

manfaat header blog valid schema.org dan html5 apa yah kang?

Kadek Krisma scout

makasi bro kunjungi juga download software gratis kadekkrisma.blogspot.com

Ibrahim M.Pd.I

Sukurnya punya saya selamat tu mas, :D

Settingers Blog

Keren kang, artikelnya sangat membantu buat yang mau mempercantik tampilan blog tanpa ragu akan ke seoanya

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Klik emoticon : :) :D :( :-o @@, :s :wow: 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen: :-d