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 wacana 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 wacana pengirim konten.

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

Tampilan kotak penulis tamu ini menyerupai 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 instruksi HTML di bawah ini untuk menampilkan kotak penulis di dalam postingan, simpan pada mode HTML di simpulan postingan.

 <div class="post-sender">
   <div class="title-sender">
     Postingan ini dikirim oleh:
   </div>
   <div class="photo-sender">
     <img alt="Membuat Kotak Penulis Tamu Ala Kompi Ajaib Membuat Kotak Penulis Tamu Ala Kompi Ajaib" height="90" src="https://lh3.googleusercontent.com/-Q55pKJrgnXs/AAAAAAAAAAI/AAAAAAAAh9M/ae9EthU2__8/s90-p-rw-no/photo.jpg" title="Membuat Kotak Penulis Tamu Ala Kompi Ajaib" width="90"/>
   </div>
   <div class="profil-description">
     <div class="name-sender separator">
       <a href="https://plus.google.com/+AdhySuryadi" target="_blank" title="Membuat Kotak Penulis Tamu Ala Kompi Ajaib">Adhy Suryadi</a>
       </div>
     <br/>
     Saya bukan apa-apa, tapi mencoba menjadi apa yang aku impikan...
     </div>
   </div>

Silahkan sesuaikan instruksi 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 instruksi HTML di bawah ini untuk menampilkan kotak penulis di dalam postingan, simpan pada mode HTML di simpulan postingan.

 <div class="post-sender">
   <div class="title-sender">
     Postingan ini dikirim oleh:
   </div>
   <div class="photo-sender">
     <amp-img alt="Membuat Kotak Penulis Tamu Ala Kompi Ajaib Membuat Kotak Penulis Tamu Ala Kompi Ajaib" height="90" src="https://lh3.googleusercontent.com/-Q55pKJrgnXs/AAAAAAAAAAI/AAAAAAAAh9M/ae9EthU2__8/s90-p-rw-no/photo.jpg" title="Membuat Kotak Penulis Tamu Ala Kompi Ajaib" width="90"></amp-img>
   </div>
   <div class="profil-description">
     <div class="name-sender separator">
       <a href="https://plus.google.com/+AdhySuryadi" target="_blank" title="Membuat Kotak Penulis Tamu Ala Kompi Ajaib">Adhy Suryadi</a>
       </div>
     <br/>
     Saya bukan apa-apa, tapi mencoba menjadi apa yang aku impikan...
     </div>
   </div>

Silahkan sesuaikan instruksi yang ditandai dengan data penulis.


Sumber https://www.kompiajaib.com/

Share this post