Skip to main content

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.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB