Cara Membuat Author Box Ala Jagoandzgn

Cara Membuat Author Box Ala Jagoandzgn

Cara Membuat Author Box Ala Jagoandzgn - di sebagian atau hampir keseluruhan para blogger pastinya memberikan sebuah identitas pada blog yang dikelolanya, hal ini digunakan supaya visitor dapat mengetahui penulis blog tersebut.

Sebelumnya kami ingin memohon maaf kepada si owner blog yang sudah kami ambil kode author box nya menggunakan fitur inspect element dan kami lakukan tanpa izin terlebih dahulu, Hal ini kami sampaikan terlebih dahulu agar artikel yang kami bagikan bisa bermanfaat dan berkah untuk semua pengunjung setia blog ini.

Apakah kalian sudah penasaran dengan author box dari blog mana? ya seperti pada judul, author box tersebut adalah dari blog Jagoandzgn yang menurut kami memiliki tampilan unik dan menarik untuk diulas. Tanpa panjang lebar lagi, jika kalian ingin memasangnya silahkan ikuti tutorial berikut.

Tutorial Pemasangan

Langkah 1
Silahkan login terlebih dahulu ke halaman Blogger.

Langkah 2
Pada menu dashboard, silahkan pilih menu Tema > Edit HTML

Langkah 3
Kemudian cari kode ]]></b:skin> dan letakkan kode CSS dibawah ini tepat diatasnya.
/* Author Box by Sempetin.my.id */
.sempetin-Author{text-align:center;margin-top:20px;}
.sempetin-Author .top{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start;justify-content:center;}
.sempetin-Author .bottom{text-align:center;margin-top:-35px;padding:45px 15px 15px;border-radius:5px;background:teal;background-image: linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));}
.sempetin-Author img{width:50px;height:50px;border:5px solid #fff;border-radius:100px;}
.sempetin-Author .author-name{font-size:20px;font-weight:700;margin-bottom:7px;}
.sempetin-Author .author-name a{color:#ffffff;font-weight:500}
.sempetin-Author .author-desc {color: #eaeaea;font-family: 'Google Sans',sans-serif;overflow: hidden;line-height: 1.6em;font-size:14px}
.sempetin-Author .author-desc a {background: #ffffff;padding: 5px 8px;color: black;border-radius: 6px;font-family: 'Google Sans',sans-serif;font-size: 13px;!important: ;}
.sempetin-Author .author-desc a:hover {color:#0081ff;}
.sempetin-Author .author-desc li {display : inline-block;padding-top: 5px;}

Langkah 4
Selanjutnya cari kode yang mirip seperti ini,
<b:if cond='data:post.authorAboutMe'>...</b:if>

Langkah 5
Lalu ganti kode tersebut dengan kode dibawah ini.
<b:if cond='data:post.authorAboutMe'>
<div class='sempetin-Author'>
<b:if cond='data:post.authorPhoto.url'>
<div class='top'>
<img itemprop='image' expr:src='data:post.authorPhoto.url' width='90px'/>
</div>
</b:if>
<div class='bottom'>
<div class='author-name'>
<a expr:href='data:post.authorProfileUrl' rel='author' expr:title='data:post.author'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<div class='author-desc'><data:post.authorAboutMe/>
<br/>
<li><a href='https://www.facebook.com/' title='Facebook'>Facebook</a></li>
<li><a href='https://wa.me/' title='WhatsApp'>WhatsApp</a></li>
<li><a href='https://www.instagram.com/' title='Instagram'>Instagram</a></li>
</div>
</div>
</div>
</b:if>
Ubah kode yang kami marking sesuai dengan URL sosial media kalian.

Langkah 6
Setelah selesai editing kode, jangan lupa untuk Simpan Tema.

Screenshot Author Box Jagoandzgn.com

Penutup

Apabila dengan tutorial yang kami berikan diatas belum bisa dipahami, silahkan tanyakan melalui kolom komentar yang berada dibawah artikel ini. Sebisa mungkin akan kami balas jika tidak ada kesibukan, dan mohon dimaklumi jika ada salah dalam penyampaian karena kami memang baru belajar untuk berbagi melalui artikel.

Mungkin sekian dulu artikel dari Cara Membuat Author Box Ala Jagoandzgn, semoga bermanfaat dan Terima kasih

Fernand
Fernand Kecanduan berbagi ilmu!

1 komentar

Posting Komentar