Membuat Author Box di bawah Postingan Blog

adscblog

Author Box adalah kotak dimana disana terdapat Photo orang yang menulis artikel atau pemilik blog tersebut,mungkin anda juga sering melihat Author box ini di berbagai blog yang anda kunjungi karena pemasangan Author Box ini lagi mark marak nya di blogger,tidak semua template ketika melakukan settingan dari template blogger akan muncul Author Box tersebut tentu nya memerlukan sedikit sentuhan javascript

Seperti Template infotrens ini,walaupun saya setting dari Settingan Template tetapi Author Box tersebut tidak lah muncul,karena tidak semua Template sama,mungkin oleh pembuat nya kode nya sudah di hapus atau memang sengaja tidak di pasang

Akan tetapi anda tidak perlu khawatir apabila menginginkan Author Box tersebut,anda bisa mengikuti langkah-langkah di bawah,yang tentu nya 100% berhasil,karena setiap Tutorial artikel yang berada di blog ini 90% sudah saya coba dan berhasil sehingga saya menulis nya di blog saya ini

Cara pemasangan Author box ini tidak begitu sulit anda hanya perlu menyisipkan beberapa kode di daerah tertentu dengan demikian anda akan mempunyai Author Box di bawah postingan,namun saya sarankan sebelum melakukan peng editan alangkah baik nya jika kode template nya di backup terlebih dahulu agar tidak mengalami kesalahan yang patal

Cara Memasang Author Box dengan Settingan Template blogger

Ada beberapa langkah untuk membuat Author box di Bawah postingan anda,yaitu salah satu nya melalui template yang berada di bagian samping kiri,maksud saya melalui setting pada blogger dengan mengklik tataletak yang berada di bagian kiri dan bisa anda ikuti titorial nya sebagai berikut

• Silahkan anda masuk ke blogger
• Kemudian Klik tata letak pada bagian kiri blogger kemudian silahkan anda klik "Edit" pada kotak postingan blogger
  
• Setelah anda mengklik "edit" seperti pada gambar di atas,maka akan tampil tampilan layar seperti gambar berikut
  
  
  
• Kemudian silahkan anda klik tombol "Tampilkan Profil Pengarang di bawah pos" seperti pada gambar di atas
• Kemudian Save dan silahkan lihat hasil nya di bagian postinga blog anda tepat nya di bagian bawah

Cara singkat agar Author Box tampil di bawah postingan

Setelah anda melakukan settingan seperti di atas namun tetap saja belum berhasil,langkah selanjut nya silahkan anda mengikuti tutorial berikut,dan saya yakin cara ini berhasil walau cara di atas tidak berhasil

• Silahkan anda Klik Template di bagian kiri Blogger
• Setelah itu klik lagi "Edit Html"
• Setelah anda berad di editan template silahkan anda cari kode berikut </b:skin> setelah ketemu silahkan anda letakan kode berikut sebelum kode tersebut,untuk memudahkan pencarian anda,silahkan anda tekan CTRL+F secara bersamaan

 /* CSS Multi Author Box */
.authorboxwrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#ef4824}
.author_description_container h4 a:hover{color:#404040}
.author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;}
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

• Setelah anda menyisipkan kode di atas,langkah selanjut nya silahkan anda letakan kode berikut setelah kode <data:post.body/> 

<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>       
</p>
<div class='authorsocial'>
<a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>

• Kemudian Save Template dan lihat hasil nya,pasti berhasil

Nah itulah cara menampilkan Author box di bawah postingan blog,semoga artikel nya bisa membantu sobat blogger,selamat mencoba dan semoga berhasil.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 07 Juni and have 0 komentar