Cara Menciptakan Logo Gambar Pada Header Blogspot Khusus Amp

Membuat Logo Header Dengan Gambar pada Blog AMP - 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 sanggup untuk memperindah tampilan blog atau web.

Logo merupakan salah satu identitas atau ciri dari salah satu brand atau merk. Maka penyantuman logo itu pun rasanya cukup penting.

Cara Mengganti Logo Blogspot di Header Dengan Gambar

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

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

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

Bagi teman yang masih resah untuk membuat logo gambar pada header blog amp, mamang akan mengatakan tutorialnya. Simak ya

Cara Mengganti / 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 sanggup sama mirip 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 isyarat yang sama atau hampir mirip dengan isyarat diatas, silahkan cari isyarat yang berwarna merah atau isyarat dibawah.

<data:title/>

5. Ganti dengan isyarat berikut ini:

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

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

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

Atur kembali jarak yang sesuai dengan kolom header kamu, contohbottom:5px. Khusus untuk bottom sanggup diganti dengan top. Contohnya menjaditop:5px.
7. Simpan templatenya, lalu lihat hasilnya.
Mamang hanya mengubah sedikit isyarat pada postingan kompi ajaib. Untuk kesannya 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.

Share this post