How to Create an Author Box Valid AMP in Blogger
How to Create an Author Box (Valid AMP) in Blogger with Automatic Avatar of Writer. How to Create an Author Box Valid AMP CSS
How to Create an Author Box (Valid AMP) in Blogger with Automatic Avatar of Writer
If you visit this blog, surely you will see the photo and short biography of the author under the share button. This simple Author Box is created using CSS and valid AMP.
Interested to install it on your blog? This author box is complete with the author's profile photo, and automatically calls the image from your google plus profile photo.
If you are interested, and you are using the blogger template with valid AMP, it is very easy. Want to know how? Let's follow how to create a simple author box below:
If you are interested, and you are using the blogger template with valid AMP, it is very easy. Want to know how? Let's follow how to create a simple author box below:
1. Please go to the theme editor in your blogger dashboard, and click EDIT on the template..
2. Copy the CSS Author box code below, and paste it under <amp-custom> code.
.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. Then, you need to call that CSS to install the valid AMP author box as shown above. Copy and paste the following code:
<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 the code above just below this code::
<div class='post-footer'>You can costumize the color of this simple background author box in CSS that was created earlier.
<div class='post-footer-line post-footer-line-1'>