Cara Mengganti Logo Header Dengan Gambar pada Blog AMP

gacerindo.com - Logo merupakan salah satu identitas atau ciri dari salah satu brand atau merk. Maka penyantuman logo itu pun rasanya cukup penting. Ada yang menyebut kalau mengganti logo header dengan gambar di blog maupun website itu penting, salah satunya yaitu untuk meningkatkan brand atau nama blog kita sendiri.

Bagi sebuah web atau blog, logo selain memiliki arti yang penting, juga bisa untuk memperindah tampilan blog atau web. 

Mari sedikit membicakaran pengalaman mamang tentang membuat logo header pada template kompi ajaib. Mamang membeli template kompi ajaib dari Akang Adhy, karena template ini menurut mamang sangat keren. Kenapa keren? Karena template Kompi Ajaib ini sudah mendukung AMP (Accelerated Mobile Pages).

Baca Juga:

• Cara Membuat dan Mengaktifkan Ads.TXT pada Blog Wordpress
• Pengertian dan Cara Mengaktifkan Ads.txt di Blogger

Setelah mamang utak-atik lagi, logo pada headernya, tidak bisa diubah ke dalam bentuk gambar. Tetapi hanya muncul Title Blog saja. Setelah mamang mutar-muter kesana kemari nyari tutorial, akhinya menemukanlah artikel tentang membuat logo header pada blog amp. Padahal referensi sebagian besarnya dari blog Kompi Ajaib.

Bagi sobat yang masih bingung untuk membuat logo gambar pada header blog amp, mamang akan memberikan panduannya. Simak ya

Membuat dan Mengganti Logo Header Dengan Gambar pada Blog AMP

1. Masuk ke dashboard blogger

2. Pilih Template>Edit HTML

3. Cari widget header, caranya dengan menekan ctrl+f dan ketikan header, isinya mungkin bisa sama seperti dibawah ini.

<div id='header-wrapper'>

<div class='content-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

        <b:widget id='Header1' locked='true' title='gacerindo Blog (Header)' type='Header' version='1'>

          <b:widget-settings>

            <b:widget-setting name='displayUrl'/>

            <b:widget-setting name='displayHeight'>0</b:widget-setting>

            <b:widget-setting name='sectionWidth'>353</b:widget-setting>

            <b:widget-setting name='useImage'>false</b:widget-setting>

            <b:widget-setting name='shrinkToFit'>false</b:widget-setting>

            <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>

            <b:widget-setting name='displayWidth'>0</b:widget-setting>

          </b:widget-settings>

          <b:includable id='main'>

    <div id='header-inner'>

      <div class='titlewrapper'>

        <b:if cond='data:blog.pageType != &quot;item&quot;'>

        <h1 class='title' itemprop='headline'>

<b:include name='title'/>

        </h1>

<b:else/>

        <p class='title' itemprop='headline'>

          <b:include name='title'/>

        </p>

</b:if>

      </div><b:include name='description'/>

    </div>

</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' expr:title='data:title' itemprop='url'><span itemprop='name'><data:title/></span></a>

</b:includable>

        </b:widget>

      </b:section>     

4. Setelah menemukan kode yang sama atau hampir mirip dengan kode diatas, silahkan cari kode yang berwarna merah atau kode dibawah.

<data:title/>

5. Ganti dengan kode berikut ini:

<a class='logo-blog' href='/' title='Homepage'><amp-img alt='Mang Aip' height='25' src='URL LOGO Sobat' title='Mang Aip' width='125'/>

Silahkan sesuaikan untuk height dan widht-nya, sesuai dengan ukuran kolom header kamu.
6. Jangan lupa untuk menambahkan kode dibawah pada CSS blog kamu ya, biasanya setelah kode <style>

.logo-blog{margin:0 auto;position:relative;left:0;bottom:0px;}

Atur kembali jarak yang sesuai dengan kolom header kamu, contoh bottom:5px. Khusus untuk bottom bisa diganti dengan top. Contohnya menjadi top:5px.
7. Simpan templatenya, lalu lihat hasilnya.
Mamang hanya mengubah sedikit kode pada postingan kompi ajaib. Untuk hasilnya silahkan lihat pada blog mamang yang ini.
Setelah membaca artikel Membuat dan Mengganti Logo Header Dengan Gambar pada Blog AMP, silahkan untuk dipraktekan langsung. Jangan ragu untuk bereksperimen sob. Selamat mencoba.