Membuat Kotak Penulis Tamu Ala Kompi Ajaib

Jika Anda menyediakan kolom penulis tamu yang melalui moderasi Anda pada blog, sebaiknya buatlah juga kotak penulis tamu yang menjelaskan tentang pengirim konten yang dimuat.

Pada kotak penulis tamu, kita menampilkan foto dari pengirim konten, link profil pengirim konten, dan deskripsi pengirim konten yang menggambarkan secara singkat tentang pengirim konten.

Dengan begitu, kotak penulis tamu ini memberikan poin lebih bagi penulis tamunya. Pengunjung akan lebih mudah mengenali siapa pengirim artikel yang tengah dibacanya.

Tampilan kotak penulis tamu ini seperti terlihat pada JSFidle di bawah ini.


Jika Anda ingin mencobanya silahkan gunakan kode-kode di bawah ini.

Untuk blog non AMP

Silahkan simpan CSS di bawah 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 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">
    <img alt="Photo" height="90" src="https://lh3.googleusercontent.com/-Q55pKJrgnXs/AAAAAAAAAAI/AAAAAAAAh9M/ae9EthU2__8/s90-p-rw-no/photo.jpg" title="Photo Pengirim" width="90"/>
  </div>
  <div class="profil-description">
    <div class="name-sender separator">
      <a href="https://plus.google.com/+AdhySuryadi" target="_blank" title="Adhy Suryadi">Adhy Suryadi</a>
      </div>
    <br/>
    Saya bukan apa-apa, tapi mencoba menjadi apa yang saya impikan...
    </div>
  </div>

Silahkan sesuaikan kode yang ditandai dengan data penulis.

Untuk blog AMP

Silahkan simpan CSS di bawah 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="https://lh3.googleusercontent.com/-Q55pKJrgnXs/AAAAAAAAAAI/AAAAAAAAh9M/ae9EthU2__8/s90-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/+AdhySuryadi" target="_blank" title="Adhy Suryadi">Adhy Suryadi</a>
      </div>
    <br/>
    Saya bukan apa-apa, tapi mencoba menjadi apa yang saya impikan...
    </div>
  </div>

Silahkan sesuaikan kode yang ditandai dengan data penulis.

Reactions:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser