✔ Cara Menciptakan Author Box Valid Amp Di Blogger

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

Jika kalian membuka blog ini, niscaya anda akan melihat foto dan biodata singkat penulis di bawah tombol share. Author box sederhana ini dibentuk dengan memakai 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 memakai 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 isyarat 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 men-costumize warna background author box sederhana ini di CSS yang telah dibentuk tadi.

Sumber http://ampidn.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: