Cara Memasang Multi Author Box Valid AMP

Sebenarnya author box yang saya bagikan kali ini yaitu hasil modifikasi saya dari template milik Mas Iwan. Nah, iseng-iseng deh coba diterapkan pada template yang saya gunakan pada saat ini dan ternyata bekerja dengan bagus. Lumayan lah, hasilnya memuaskan sekali 😁 Oh, ya. Eksperimen kali ini dilakukan karena dorongan saya untuk membuat template buatan Kang Adhy yaitu Kompi Indy supaya bisa menjadi valid AMP. Nah, untuk mempercantik tampilan pada template ini, maka saya tambahkan deh author box yang berada persis di bawah kotak reaction. Sejujurnya, kalau dibilang susah sih, ya tidak terlalu susah kok membuat template menjadi valid AMP. Tapi kalau dibilang mudah, ternyata sulit juga deh. Bingung, ya! Mungkin kurang lebih 1 hari 2 malam saya baru bisa membuat template valid HTML5 milik Kang Adhy menjadi valid AMP HTML. Namun kendala saya yaitu terletak pada bagian CSS. Mungkin karena saya adalah typical orang yang suka mendalami suatu ilmu secara otodidak, maka kalau ada bug pada template ini, bingungnya bukan main. Dan ironisnya, mungkin lebih dari 2 bulan saya belum bisa menemukan titik permasalahannya. Maka dari itu, bagi pengguna mobile device yang mengakses blog Fastest ini, saya mohon maaf kepada Anda sekalian karena saya belum bisa memperbaiki tampilan postingan yang masih acak-acakan 😡 Kebiasaan deh curhat 😠 Yuk, ah. Langsung saja kita simak bersama topik kita hari ini di bawah. Check it out, guys~

Langkah pertama.

Salin kode CSS di bawah;

.about-author{margin-bottom:10px;height:110px}.about-author p{margin:0 0 2px}.about-author amp-img{float:left;border-radius:2px}.about-description{padding-right:10px;margin:10px 0 0 140px}.about-description h5{margin-bottom:3px;color:#767676;text-transform:capitalize}.author-profile{background:#FFF6BF;margin:10px 0;overflow:hidden;color:#888}

Lalu simpan pada style amp-custom pada tampilan postingan.

Langkah kedua.

Salin kode HTML di bawah;

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
<section class='about-author'>
 <b:if cond='data:post.authorAboutMe'>
  <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
   <b:if cond='data:post.authorPhoto.url'>
    <amp-img alt='author photo' expr:src='resizeImage(data:post.authorPhoto.url,120)' height='120' layout='fixed' title='Author Photo' width='120'/>
   </b:if>
   <div class='about-description'>
    <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
     <span itemprop='name'>
      <h5>
       <data:post.author/>
      </h5>
     </span>
    </a>
    <span itemprop='description'>
     <data:post.authorAboutMe/>
    </span>
   </div>
  </div>
 </b:if>
</section>
</b:if>

Lalu simpan di bawah postingan Anda (terserah mau di letakkan di mana).

Langkah ketiga.

1. Pergi ke tata letak;

2. Pada main (posting blog), klik edit;


3. Cari tulisan Tampilkan Profil Pengarang Di Bawah Pos, lalu centang pada bagian tersebut dan klik simpan.


Langkah terakhir.

Dikarenakan multi author box yang telah saya bagikan di atas secara otomatis akan menampilkan nama, foto, dan about author sesuai dengan profil Google+ milik Anda, maka sebelum memasang author box ini, alangkah lebih baiknya untuk segera melengkapi data-data yang diperlukan, terutama pada bagian About Me. Oh, ya. Author box ini juga bisa digunakan pada blog yang mempunyai penulis artikel lebih dari satu loh (namanya juga multi author box huft). Jadi siapa pun penulis artikelnya, maka di bawah postingan yang telah ia publikasikan akan muncul about author sang penulis tersebut 😁

That's all~