Membuat Kotak Penulis Tamu Valid AMP Ala Kompi Ajaib

Sebagai salah satu daya tarik sebuah blog penyedia template karena hadirnya testimoni dari para pengguna blog, selain itu daya tarik blog adanya penulis tamu yang mengirim artikel ke blog kita, dan saat ini banyak blog yang sengaja menyediakan kolo penulis tamu di blognya, karena memang tanpa kita sadari menyediakan kolom penulis tamu bisa mendatangkan traffic untuk blog kita, nah jika pada template atau blog anda menyediakan kolom penulis tamu, alangkah banyak membuat box atau kotak penulis tamu, karena saat ini banyak pengguna template AMP saya berikan tutorial membuat box penulis tamu valid amp ala kompi ajaib.

Silahkan tambahkan CSS dibawah ini.

.post-sender {
  background: #E5E5E5;
  padding: 10px;
  width: auto;
  display: block;
  position: relative;
  font-size: 16px;
  margin: 30px auto;
  color: #333
}
.photo-sender,
.post-sender amp-img {
  width: 90px;
  height: 90px;
  display:block;
}
.title-sender {
  border-bottom: 1px solid #dbdbdb;
  padding-bottom: 8px;
  line-height: 1.3em
}
.photo-sender {
  overflow: hidden;
  display: inline-block;
  margin: 10px 10px 0 0;
  position: relative;
  float: left
}
.name-sender {
  font-weight: bolder;
  line-height: 1;
  margin-bottom: 10px;
  display: inline-block;
  text-align: left
}
.profil-description {
  padding-top: 10px;
  border-top: 1px solid #eeeded;
}
.post-sender::before {
  content: "";
  display: inline-block;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #E5E5E5;
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -10px
}
.post-sender a {
  text-decoration:none;
}
.post-sender::after {
  content: "";
  display:block;
  clear:both;
}

Kemudian silahkan gunakan kode HTML di bawah ini untuk menampilkan kotak penulis di dalam postingan, simpan pada mode HTML di akhir postingan

<div class="post-sender">
  <div class="title-sender">
    Postingan ini dikirim oleh:
  </div>
  <div class="photo-sender">
    <amp-img alt="Photo" height="90" src="background-color: orange;">https://lh3.googleusercontent.com/-166UcE-1fZY/AAAAAAAAAAI/AAAAAAAABvg/9ahrPYeIR_M/s60-p-rw-no/photo.jpg" title="Photo Pengirim" width="90"></amp-img>
  </div>
  <div class="profil-description">
    <div class="name-sender separator">
      <a href="https://plus.google.com/+DemangFedi" target="_blank" title="DemangFedi">Demang Fedi</a>
      </div>
    <br/>
   Nama Asli Pedi Perdiansyah,Cianjur Selatan,Jabar Nama Online Demang Fedi
</div>
 </div>

Silahkan sesuai dengan penulis, kolom yang di warnai.
Untuk non AMP silahkan berkunjung ke blog kompi ajaib
http://www.kompiajaib.com/2017/09/membuat-kotak-penulis-tamu-ala-kompi.html

Share :