Cara Membuat Author Profil Seperti Milik Kompiajaib Responsive untuk Blog Non AMP dan AMP
Oleh karena itu, disini saya akan membagi script author profil box yang mirip seperti milik kompiajaib dan juga digunakan pada template Viomagz. Keunggulan author profil box ini adalah selain google plus kita juga mengganti linknya sesuka hati kita baik itu facebook kita, twitter kita, instagram kita dan lain sebagainya. Jika teman-teman penasaran cara membuat author profil boxnya maka bisa mngikuti langkah-langkah berikut ini;
Pertama, teman-teman bisa masuk terlebih dahulu ke menu Template - edit HTML. Setelah masuk maka langkah selanjutnya adalah cari kode <head> dan pastekan kode dibawah ini tepat diatas kode <head>
<style>
.label-info-th a {
color: #ffffff;
background: linear-gradient(90deg,#1052a2 0,#2d82ea 50%,#3399ff 100%);
display: inline-block;
padding: 6px 12px;
margin: 1px 0;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
border: 2px solid #efefef;
}
.label-info-th a:hover {
color: #444444;
}
.post-info {
color: #777777;
font: normal normal 13px Roboto, Arial, sans-serif;
}
.info-1, .info-2, h2.post-title, .post-snippet {
margin-left: 275px;
}
.info-1 {
margin-top: 12px;
}
.info-2 {
margin-top: 12px;
}
.info-3 {
margin-bottom: 1.6em;
}
.post-info a {
display: inline-block;
color: #777777;
}
.post-info a:hover {
color: #444444;
}
.author-info:after, .time-info:after, .label-info:after {
content: "-";
padding: 0 2px;
}
.edit-post:before {
content: "-";
padding: 0 2px;
}
.author-profile {
overflow: hidden;
margin: 30px 0;
line-height: 1.5;
}
.author-profile img {
border: none;
float: left;
margin-right: 15px;
border-radius: 46px;
}
.author-profile > span {
font-size: 14px;
color: #888;
}
.author-profile a.g-profile {
font-weight: 500;
color: #2d82ea;
font-size: 18px;
margin-bottom: 5px;
display: inline-block;
}
.author-profile a.g-profile:hover {
color: #444444;
}
.author-profile a.g-profile:after {
content: "";
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-right: 4px;
color: #444444;
}
</style>
Kedua, Cari kode <b:includable id='postQuickEdit' var='post'> kemudian letakkan kode berikut dibaawah kode <b:includable id='postQuickEdit' var='post'> .... </b:includable>
Untuk Blog AMP
<b:includable id='postauthorbox' var='post'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<img itemprop='image' src='url gambar' width='90px'/>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true"'>
<amp-img title='nama blog' alt='nama blog' height='90' itemprop='image' layout='fixed' src='url gambar' width='90px'></amp-img>
<meta content='url gambar' itemprop='image'/>
</b:if>
<div>
<a class='g-profile' href='link author (fb, about, g+ dll)' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'>nama blog</span>
</a>
</div>
<span itemprop='description'>deskripsi blog</span>
<b:if cond='data:post.labels'>
<span class='label-info-th'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
</b:loop>
</span>
</b:if>
</div>
</b:includable>
Untuk Blog Non AMP
<b:includable id='postauthorbox' var='post'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<img itemprop='image' src='url gambar' width='90px'/>
<div>
<a class='g-profile' href='link author (fb, about, g+ dll)' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'>nama blog</span>
</a>
</div>
<span itemprop='description'>deskripsi blog</span>
<b:if cond='data:post.labels'>
<span class='label-info-th'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
</b:loop>
</span>
</b:if>
</div>
</b:includable>
Keterangan: Pastikan nama blog, url gambar, link author dan deskripsi blog sudah teman-teman ubah.
Ketiga, Gunakan kode pemanggil ini <b:include data='post' name='postauthorbox'/> untuk memanggil script diatas. Kode tersebut bisa diletakkan sesuka hati teman-teman. Jika ingin diletakkan dibawah postingan bisa meletekkan kodenya diatas related post.
Keempat, SAVE TEMPLATE.
Demikianlah tutorial Cara Membuat Author Profil Seperti Milik Kompiajaib Responsive untuk Blog Non AMP dan AMP. Semoga blog ini bermanfaat. Amin.
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.