Perbaikan Logo Blog Pada Header Blog

Perbaikan Logo Blog Pada Header Blog

Bola Hero Gawai

Perbaikan Logo Blog Pada Header Blog

Logo Blog Pada Header Blog
Beberapa waktu yang lalu saya share sebuah trik untuk menyingkat kode HTML header blog. Dan di situ juga saya share cara mengganti title blog dengan gambar atau logo blog.

Sebenarnya pada beberapa website yang menyediakan tool untuk mengecek seo blog seperti Chkme, mengganti title blog dengan gambar seperti itu tidak masalah karena tag H1 homepage tetap terdetek dengan isi konten tag H1 berupa gambar/logo blog.

Namun ternyata isi konten tag H1 yang berupa gambar ini bermasalah karena tool-nya membaca tag H1 ini seolah tanpa konten/isi. Ternyata memang untuk tag H1 - H6 ini sebenarnya harus diisi dengan teks bukan dengan gambar.

Untuk itu biar title blog ini bisa aman diganti dengan gambar pada script penyingkat kode HTML header blog yang saya share beberapa waktu yang lalu, kini saya share trik manipulasi pemasangan gambar atau logo blog di header blog agar tidak mengganggu tag H1 homepage blog.

Agar Anda tidak bingung dengan bahasan postingan ini, silahkan simak dulu postingan sebelumnya pada link di bawah ini.
Pada postingan sebelumnya, untuk mengganti title blog dengan gambar kita mengganti kode berikut:


          <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><data:title/></span></a>
  </b:if>
</b:includable>

Dan diganti dengan kode di bawah ini:


<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <img alt='title-blog' height='60' src='URL LOGO BLOG' title='Kompi Ajaib' width='260'/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><img alt='title-blog' expr:title='data:title' height='60' src='URL LOGO BLOG' title='Kompi Ajaib' width='260'/></span></a>
  </b:if>
</b:includable>

Karena cara di atas ternyata menyebabkan error pada beberapa tool seo checker karena tag H1 berisi gambar, maka silahkan gunakan trik di bawah ini.

Silahkan tambahkan kode di bawah ini tepat di bawah kode penutup header seperti ini </b:section>


<div class='logo-blog'>
  <a href='/' title='Homepage'><img alt='logo blog' height='90' src='URL LOGO BLOG' title='Homepage' width='212'/></a>
               </div>

Sehingga penampakan secara keseluruhan akan tampak seperti di bawah ini:


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='KOMPI AJAIB (Header)' type='Header'>
          <b:includable id='main'>
    <div id='header-inner'>
      <div class='titlewrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <h1 class='title'>
<b:include name='title'/>
        </h1>
<b:else/>
        <p class='title'>
          <b:include name='title'/>
        </p>
</b:if>
      </div>
    </div>
</b:includable>
          <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
          <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><data:title/></span></a>
  </b:if>
</b:includable>
        </b:widget>
      </b:section>
<div class='logo-blog'>
  <a href='/' title='Homepage'><img alt='logo blog' height='90' src='URL LOGO BLOG' title='Homepage' width='212'/></a>
               </div>

Silahkan sesuaikan tinggi dan lebarnya sesuai dengan tinggi dan lebar gambar.

Setelah itu tambahkan kode CSS seperti berikut ini untuk mengatur letak tampilan gambar logonya.


.logo-blog{position:absolute;left:0;bottom:5px}

Untuk bottom:5px silahkan sesuaikan agar logo berada di tengah-tengah tinggi kolom header agar enak dilihat dan rapih. Bisa juga diganti dengan top.

Kemudian tambahkan kode position:relative pada kode CSS #header-wrapper.

Agar teks title blog tidak ngintip keluar gambar apalagi jika Anda menggunakan logo blog dengan background transparant, Silahkan tambahkan juga kode opacity:0 pada kode CSS #header h1,#header p.

Selesai... Sekarang tag H1 blog Anda aman dan title blog Anda berganti dengan logo blog buatan Anda. Untuk demonya silahkan lihat dan cek untuk tag H1 homepage template Kompi Males di http://seositecheckup.com/

Dan untuk pengguna template Kompi Males, Anda bisa gunakan trik ini untuk logo blognya atau tunggu update postingannya besok.

Terima kasih untuk koreksi mas Giovani Aluha

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

28 Comments Add Comment

Langsung Ambil Pertamax .. :-d
Komen dulu baru baca .. =)D

Balas

Keduax :D
Nyimak dulu kang sambil edit template kang andy nih hehe

Balas

Hehehehe silahkan mas semoga bisa dimengerti :)

Balas

Silahkan mas Muhammad :) tambahin kopinya atuh :D

Balas

Hahaha ini udah sedia ni mas lagi lihat dunia lain :D
Oh iya kang, ngilangin efek/warna #ddd gimana?

yang ada di homepage di postingan. Nah cara ngilangin itunya gimana ya

Balas

sudah ada di template kompi males,tadi saya cek.
o ya mas,kalo pingin kolom komentarnya,seperti ini warnanya gimana mas

Balas

Itu adalah border right dan left pada kode ini mas
.content-wrapper{background-color:#fff;position:relative;width:970px;margin:0 auto;border-left:15px solid #ddd;border-right:15px solid #ddd}

Balas

Tambahkan background pada kode ini mas
.comment_area {border:1px solid #ddd;margin-bottom:10px; margin-left:30px; padding-right:10px; transition:all 400ms ease-in-out}

Balas

menyimak dulu kang... karena sementara masih belum otak atik tempe hehehehehe

Balas

saya ijin menyimak juga mas coz baru mencoba menggunakan template valid html5, hehehe :D krn saya masih bingung mikirin kenapa gambar logo header blog saya selalu tampil di google+ setiap kali mengeposkan, kok tidak gambar postingan yg tampil digoogle+ :D

Balas

nah saya setuju sama mbak indri saya pikir dulunya ada masalah pada template makanya saya coba ganti namun nasih tetap saja .. gambar header yang keluar ..

Balas

Hehhehe silahkan mas Ade :)

Balas

Padahal pada template demonya yang muncul gambar postingan ya mbak :)
Sebenarnya bukan dari valid atau tidak, itu karena ketidakmampuan G+ membaca thumbnail postingan, jadi yang dibacanya adalah image yang paling atas muncul di template. Untuk itu kita perlu memberitahukan gambar postingannya dengan sebuah meta. Untuk itu saya memasang meta di bawah ini pada templatenya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>

Coba pasang kembali kode meta di atas mbak :)
Begitu pun pada mas Nucky, coba pasang meta di atas pada templatenya.

Balas

Dengan itu maka ketika di postingan, URL thumbnail postingan muncul di atas di bawah kode <head> di kelompok kode meta seperti pada ss berikut http://prntscr.com/31687h
Dengan begitu maka thumbnail postingan yang paling pertama dibaca sebagai image pada thumbnail.

Balas

Wah saya masih pake cara yang lama Kang....
Nanti coba saya rubah.. Haturnuhun Kang :)

Balas

emangnya wajib ya gan pake H1 supaya SEO?

Balas

Silahan kang dicoba aja :)

Balas

Betul sebuah keharusan sebuah blog untuk mempunyai H1 minimal H1 H2 H3 dan akan lebih baik sampai H6. khusus untuk H1 harus terdapat hanya 1 buah baik di homepage ataupun di postingan untuk yang lainnya bisa lebih dari satu.

Balas

kode diatas itu dipastekan setelah kode apa mas, maaf blm paham cara penempatannya, hehehe :D

Balas

Di bawah atau di atas kelompok kode meta di bawah kode <head> :)
atau di atas kode ini &lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[

Balas

Biar lebih jelas ini ss-nya mbak http://prntscr.com/318opn

Balas

makasih penjelasannya mas Adhy, sudah saya terapkan di blog saya dan hasilnya sukses :-bd

makasih banyak bantuannya :)

Balas

oke gan. btw pernah ane nge test blog ane di chkme tu H3 itu optional. apakah itu benar?

Balas

Pagi Kang Adhy
diatas Kang Adhy menyinggung untuk menyisipkan
CSS #header-wrapper.
Agar teks title blog tidak ngintip keluar gambar apalagi jika Anda menggunakan logo blog dengan background transparant, Silahkan tambahkan juga kode opacity:0 pada kode CSS #header h1,#header p.

kebetulan Blog Saya Blog Simple Template dari Blogspt , sepertinya tidak ada " Header-Wrapper"
Jika saya tidak nyisipkan pengaruh SEO atau Pengaruh Dmananya?
Jika harus diletakin letakin bagian mananya ya?

Balas

laporan mas, tutorialnya sukses dipraktekin diblog ane, tapi sedikit masalah untuk tampilan mobilenya mas title blognya yang tadi dah ketimpa sama gambar jadi muncul lagi trus gambarnya jadi pindah kebawah.. penampakkannya mas tolong diliat mas.. http://i1205.photobucket.com/albums/bb434/ab4y/laporanmaskompi.png

atau karena saya belum nerapin kode yang ini, soalnya saya cari untuk css #header-wrapper ga ketemu, nyari yang sejenis header adanya #header-inner tapi itu dibagian mediaquery screen mas

Kemudian tambahkan kode position:relative pada kode CSS #header-wrapper.
Agar teks title blog tidak ngintip keluar gambar apalagi jika Anda menggunakan logo blog dengan background transparant, Silahkan tambahkan juga kode opacity:0 pada kode CSS #header h1,#header p.

harap bantuannya mas

Balas

mas, di mobile tampilannya jelek. coba cek http://www.responsinator.com/?url=www.blogsmz.com

Balas

kenapa di Page Speed "menggunakan " URL " msh tetap Error Saja

Balas

logo udah beres, tapi menunya ndempet, logo dibelakang menu jadinya =( please help me!!!!!!! susah amat sih kesel

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×