Skip to main content
MANGAIP BLOG

follow us

Membuat Logo Header Dengan Gambar pada Blog AMP


Mangaip.com - Logo merupakan salah satu identitas atau ciri dari salah satu brand atau merk. Maka penyantuman logo itu pun rasanya cukup penting. 
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:
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 tutorialnya. Simak ya

Membuat Logo Gambar pada Header 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='Mangaip 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 Logo Header Dengan Gambar pada Blog AMP, silahkan untuk dipraktekan langsung. Jangan ragu untuk bereksperimen sob. Selamat mencoba.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar