Cara Membuat Author Box Valid AMP di Blogger

Cara Membuat Author Box Valid AMP di Blogger dengan Foto Penulis Otomatis

Jika kalian membuka blog ini, pasti anda akan melihat foto dan biodata singkat penulis di bawah tombol share. Author box sederhana ini dibuat dengan menggunakan CSS dan valid untuk amp blogger. 

Bagaimana, tertarik untuk memasangnya? Author box ini lengkap dengan foto profil si penulis, dan secara otomatis memanggil gambar dari foto profil google plus anda.

Jika memang berminat, dan anda menggunakan template blogger valid AMP, maka caranya sangat mudah. Mau tahu caranya? Yuk ikuti cara membuat author box sederhana berikut ini:

1. Silahkan masuk ke tema editor di dashboard blogger anda, dan klik EDIT pada template.

2. Copy kode CSS Author box di bawah ini, dan paste di bawah code <amp-custom>

 .profilku{ font:normal normal 11px/normal Tahoma,Verdana,Arial,Sans-Serif; margin:10px 1px;padding:10px; background-color:#fff2cb;height:100%} .kiri{width:20%;float:left} .kanan{width:80%}

3. Kemudian, anda perlu memanggil CSS tersebut untuk memasang author box valid AMP seperti gambar diatas. Copy dan pastekan code berikut ini:

<div class='profilku'>
<div class='kiri'>
<amp-img expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='50px' layout='responsive' width='50px'/></div>
<div class='kanan'>
  <b>Penulis   :</b> <data:post.author/><br/>
  <b>Judul     :</b> <a expr:href='data:post.url'><data:post.title/></a><br/>
  <b>Note     :</b> Terima kasih sudah membaca artikel ini. Silahkan  berkomentar.<br/></div>
  </div>

4. Paste-kan code diatas tepat di bawah:

 <div class='post-footer'>
 <div class='post-footer-line post-footer-line-1'>

Anda bisa men-costumize warna background author box sederhana ini di CSS yang telah dibuat tadi.

Bagikan Artikel ini