tutorialswb

TutorialsWB hadir sebagai wadah bagi teman-teman yang ingin "Belajar PHP Dasar". Sehingga kami yakin bahwa TutorialsWB akan menjadi Pusat "Belajar Bahasa Pemrograman PHP" Disamping PHP website ini menyediakan berbagai tips dan trik Blogger. Kami menerima Pemasangan iklan banner atau artikel.

Hubungi Saya

Membuat Author Box dibawah Postingan Blog



Selamat malam kali ini kami akan share bagaimana membuat multi author box dibawah postingan blog. Selain untuk meningkatkan tingkat SEO  dari website anda sebenarnya tujuan utama dari author box ini adalah untuk memberi informasi kepada pengunjung website atau blog anda siapa pemilik  atau penulis artikel pada website tersebut.




Selain mempunyai tampilan yang elegan multi author box yang kami buat tentunya sudah mempertimbangkan tingkat Seo dan yang terpenting responsive.

Pada artikel sekitar yang lalu kami telah membuat tutorial membuat author box yang tentunya keren dan responsive.

Read More:
Membuat Author Box Pada Blogger Part-1

Langsung saja kita memulai membuat author box yang keren dan responsive. Ada dua cara yang meti anda lakukan.

1. Edit template pada blog anda, kemudian cari kode ]]></b:skin> masukkan kode dibawah ini tepat di atasnya.

 #author-info {
    display: block;
    background: #f6f9fa;
    text-align: center;
    margin-top: 75px;
    padding: 25px;
}

#author-info img {
    border-radius: 50px;
    margin-top: -65px;
    margin-bottom: 5px;
}

#author-info h5 {
    color: #555;
    font-family: Raleway,sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    margin: 0 0 10px;
}

#author-info p {
    color: #888;
    line-height: 1.4em;
    font-size: 14px;
} 

2. Cari kode <data:post.body/> kemudian masukkan kode dibawah ini tepat di bawahnya.

 <div id="author-info">
<img alt="" class="avatar avatar-120 photo" src="INSERT URL IMAGE"/>
<h5>Arman Basir</h5>
<p>I'm the founder of TutorialsWB.com. I am a full-time Blogger and Web Developer. I've been blogging since 2016 and make a living from me by searching for online projects.</p>
</div> 

3. Masukkan url gambar yang ingin anda gunakan
4. Simpan dan lihat hasilnya.


Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda, Jangan lupa share keteman anda, Jika kalian ada request post silahkan tinggalkan komentar dibawah dan mulai berdiskusi dengan kami.



Baca Juga

closed