Cara Membuat Author Profil Seperti Milik Kompiajaib Responsive untuk Blog Non AMP dan AMP

Cara Membuat Author Profil Seperti Milik Kompiajaib Responsive untuk Blog Non AMP dan AMP

Cara Membuat Author Profil Seperti Milik Kompiajaib Responsive untuk Blog Non AMP dan AMP
www.azid45.web.id - Cara Membuat Author Profil Seperti Milik Kompiajaib. Assalamualaikum.wr.wb, Pada kesempatan kali ini saya akan share tutorial cara membuat author profil box atau kotak penulis dibawah postingan blog. Author profil ini saya buat sendiri dengan source view template saya sendiri. Dari blog terkenal, rata-rata menggunakan author profil box dibawah postingannya seperti kompiajaib, mas sugeng, warim,  kodejarwo, igniel dan lain sebaainya.  Sebenarnya template Viomagz sudah terdapat author secara otomatis yang mengarah pada google plus, namun sejak tanggal 4 Februari ini kita sudah tidak bisa membuat akun google plus lagi dan pada tanggal 2 april mendatang secara resmi google akan menghapus google plus sehingga jika tetap ingin menggunakan author yang secara langsung mengarah seperti google plus maka kita harus membuat manual.

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 == &quot;false&quot;'>
<img itemprop='image' src='url gambar' width='90px'/>
  </b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<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 != &quot;true&quot;'/>
	  </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 != &quot;true&quot;'/>
	  </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.
Reaksi:
PERHATIAN:Jika anda mendownload di blog ini, maka anda akan di redirect terlebih dahulu ke laman Short Safelink untuk keamanan blog. Oleh karena itu jika terjadi error 404 maka terjadi kesalahan dalam klik di laman redirect atau terjadi refresh laman redirect. Untuk mengatasinya anda bisa mengulang kembali klik file yang akan anda download di blog ini. Dan Jika anda ingin bertanya atau bantuan bisa kontak kami dengan Klik Disini atau nomor berikut 085733513782 - Terima kasih.

Berlangganan update artikel terbaru via email:

Related Posts

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar Disqus

0 Response to "Cara Membuat Author Profil Seperti Milik Kompiajaib Responsive untuk Blog Non AMP dan AMP"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel