Cara Memasang Multi Author Box Di Bawah Postingan Blog AMP HTML

Cara Memasang Multi Author Box Di Bawah Postingan Blog AMP HTML Apa sih fungsi dari memasang author box di blogger, khususnya dibagian bawah postingan? fungsinya adalah kita dapat memperkenalkan tentang diri kita terhadap pengunjung , sehingga dengan membuat Author Box di setiap postingan blog akan membuat pengunjung lebih tau lagi tentang sobat pada blog tersebut,ya walaupun singkat kita secara tidak langsung akan membuat pengunjung membaca nya,dan bisa juga membuat pengunjung balik lagi ke blog sobat ,dengan membuat multi author box di bawah postingan/artikel blog akan memberikan tampilan yang sedikit berbeda seperti tambahan media sosial agar pengunjung bisa tau langsung Facebook, Google+, Twitter, Instagram maupun Email sobat sendiri.

Baca juga : Facebook Messenger Page Plugin With Show Hide For AMP HTML

Cara Memasang Multi Author Box Di Bawah Postingan Blog AMP HTML

Cara nya memang cukup mudah sobat hanya perlu memasang kode CSS dan juga HTML setelah itu mengganti beberapa kode yang diperlukan lalu selesai. Author Box ini juga sudah valid AMP HTML. Langsung saja bagi sobat yang ingin memasang author box dibawah postingan blog silahkan baca tutorialnya dibawah ini :

Langkah Pertama

Salin kode CSS di bawah ini, kemudian simpan pada style amp-custom='amp-custom di dalam postingan.

.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:#EEEEEE;text-transform:capitalize}.author-profile{background:#777;margin:10px 0;overflow:hidden;color:#EEEEEE}
p.soc-icon {height:25px;padding:6px 0 0 0}
.soc-icon svg{width:25px; height:25px;}
.soc-icon span svg:hover path{fill:#E74C3C}
.soc-icon span svg path{fill:#22313F;transition: all .5s ease-in-out;}

Langkah Kedua

Salin HTML dibawah ini :

<section class='about-author'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<amp-img alt='author photo' height='120' layout='fixed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmu2w0RqqJzfbY76f2sZdMwahDoRCLuf6TGLmqQ5EU6SMNccTGltN9bWC2C31zYHWFITZ2LQbTYhTtza2vgvjJaWUamx89X4EjKh0MJDIGZn8dVLM2sxlnMdbUMqsZW5Kn0YAUZeyLf058/s1600/pfrofil.jpg' title='Author Photo' width='120'/>
<div class='about-description'>
<a class='g-profile' href='https://plus.google.com/+darwinisrin' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'>
<h5>
Darwin Isrin
</h5>
</span>
</a>
<span itemprop='description'>
Hi, My name is <b>Darwin</b>. Pencinta Malam, Penyuka Hitam, Penikmat Gelap dan Pengurus Acara 😃
</span>
<p class='soc-icon'>
<span>
<a href='https://www.facebook.com/darwin.isrin' itemprop='sameAs' target='_blank' title='Facebook'>
<svg viewBox='0 0 24 24'>
<path d='M19,4V7H17A1,1 0 0,0 16,8V10H19V13H16V20H13V13H11V10H13V7.5C13,5.56 14.57,4 16.5,4M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>
</a>
</span>
<span>
<a href='https://twitter.com/darwinisrin' itemprop='sameAs' target='_blank' title='Twitter'>
<svg viewBox='0 0 24 24'>
<path d='M17.71,9.33C17.64,13.95 14.69,17.11 10.28,17.31C8.46,17.39 7.15,16.81 6,16.08C7.34,16.29 9,15.76 9.9,15C8.58,14.86 7.81,14.19 7.44,13.12C7.82,13.18 8.22,13.16 8.58,13.09C7.39,12.69 6.54,11.95 6.5,10.41C6.83,10.57 7.18,10.71 7.64,10.74C6.75,10.23 6.1,8.38 6.85,7.16C8.17,8.61 9.76,9.79 12.37,9.95C11.71,7.15 15.42,5.63 16.97,7.5C17.63,7.38 18.16,7.14 18.68,6.86C18.47,7.5 18.06,7.97 17.56,8.33C18.1,8.26 18.59,8.13 19,7.92C18.75,8.45 18.19,8.93 17.71,9.33M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>
</a>
</span>
<span>
<a href='#' itemprop='sameAs' target='_blank' title='Google Plus'>
<svg viewBox='0 0 24 24'>
<path d='M20,2A2,2 0 0,1 22,4V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V4C2,2.89 2.9,2 4,2H20M20,12H18V10H17V12H15V13H17V15H18V13H20V12M9,11.29V13H11.86C11.71,13.71 11,15.14 9,15.14C7.29,15.14 5.93,13.71 5.93,12C5.93,10.29 7.29,8.86 9,8.86C10,8.86 10.64,9.29 11,9.64L12.36,8.36C11.5,7.5 10.36,7 9,7C6.21,7 4,9.21 4,12C4,14.79 6.21,17 9,17C11.86,17 13.79,15 13.79,12.14C13.79,11.79 13.79,11.57 13.71,11.29H9Z'/>
</svg>
</a>
</span>
<span>
<a href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='Youtube'>
<svg viewBox='0 0 24 24'>
<path d='m3.375 1.6406c-1.1046 0-2 0.8955-2 2v16c0 1.104 0.8954 2 2 2h16c1.105 0 2-0.896 2-2v-16c0-1.1104-0.9-2.0004-2-2.0004h-16zm3.6191 4.2774l4.7519 2.8125 4.752 2.8125-4.766 2.941-4.7632 2.94 0.0117-5.754 0.0136-5.752z' fill='#000000'/>
</svg>
</a>
</span>
<span>
<a href='https://www.instagram.com/darwinisrin/' rel='nofollow' target='_blank' title='Instagram'>
<svg viewbox='0 0 24 24'>
<path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z' fill='#000000'/>
</svg>
</a>
</span>
<span>
<a href='https://siijombi.blogspot.co.id/p/contact.html' rel='nofollow' target='_blank' title='Contact'>
<svg viewBox='0 0 24 24'>
<path d='M20,18H18V9.25L12,13L6,9.25V18H4V6H5.2L12,10.25L18.8,6H20M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='#000000'/>
</svg>
</a>
</span>
</p>
</div>
</div>
</section>

Kemudian silahkan sobat simpan di bawah postingan, suka suka sobat mau simpan dimana.

Dikarenakan multi author box yang telah saya bagikan di atas secara otomatis akan menampilkan nama, foto, dan about author sesuai dengan profil Google+ milik sobat, maka sebelum memasang author box ini, alangkah lebih baiknya untuk segera melengkapi data-data yang diperlukan, terutama pada bagian About Me

Langkah Ketiga

Sobat pergi ke Tata Letak kemudian Edit Postingan. Untuk lebih jelas perhatikan gambar dibawah ini :



Kemudian tampilkan Profil Pengarang di bawah pos



Selesai. hehehe Selamat mencoba.

Author box ini juga bisa digunakan pada blog yang mempunyai penulis artikel lebih dari satu juga namanya juga multi author box, Jadi siapa pun penulis artikelnya, maka di bawah postingan yang telah dia publikasikan akan muncul about author sang penulis tersebut 😁