Ditulis oleh: Ditulis pada: 9/30/2017
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.