Membuat Author Box Valid Amp

Tutorial/Cara Membuat Author Box Valid AMP di Blogger

Tidak jarang mungkin kalian pernah melihat foto dan pesan singkat penulis di bawah tombol share. Bisa dikatakan itu adalah Author box  dibentuk dengan menggunakan CSS dan valid untuk amp blogger karna tidak menggunakan javascript yang akan mempengaruhi vaild amp blog kalian kalau 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 menciptakan author box sederhana berikut ini:

1. Silahkan masuk ke tema editor di dashboard blogger anda, dan klik EDIT pada template.
2. Copy instruksi 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 menyerupai 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 sempurna di bawah:

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

Anda dapat edit ulang ukuran atau warna background author box sederhana ini di CSS yang telah anda pasang diatas.

Semoga bermanfaat.

Sumber https://www.merpatih.com/

Share this post