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:
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'>4. Paste-kan code diatas tepat di bawah:
<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>
<div class='post-footer'>Anda bisa men-costumize warna background author box sederhana ini di CSS yang telah dibuat tadi.
<div class='post-footer-line post-footer-line-1'>