Cara Membuat Kotak Profile Author Blogger

cara membuat widget Box Kotak author bio profile penulis blogger dibawah postingan keren menarik dan responsive. cara memunculkan menampilkan box author profile blogger di blog.biasanya kotak/ box profile author bio blogger sudah ada, namun jika anda mau menggantinya kali ini admin akan share berbagai macam kotak box profile bio blogger yang keren. sekalian cara ini juga mengganti dan mengatasi author profile blog sempat yang hilang. tentunya box profile ini dilengkapi tombol share media sosial GooglePlus (G+) dan anda juga dapat mengubah nama tampilan yang terdapat didalamnya .

Berbicara tentang author profile blogger banyak sekali manfaat yang terdapat didalamnya, rata rata blogger kelas atas memasangnya untuk keperluan mengetahui siapa penulis artikel atau penulis blog tersebut. Dengan memasang widget Kotak Box author profile blogger , pengunjung akan mudah mengenali siapa sebenarnya pendiri blog itu. selain itu masih banyak lagi fungsi yang terdapat didalam author profile blog.

Untuk cara pembuatannya sendiri sebenarnya mudah ada beberapa template blog yang memang sudah menyediakannya kita tinggal menyetingnya saja, namun jika anda ingin sekali memodifnya menjadi sedikit lebih menarik atau keren maka simak caranya berikut ini.

Jika ada bingung menyeting profile blogger kali ini Kotak box author profile blogger yang akan admin bagikan kali ini anda tinggal meletakan linknya saja jika ada tak mau repot untuk menyeting dari profile blogger anda

Oke sobat untuk cara lengkapnya silahkan ikuti langkahnya berikut ini:

cara memasang kotak author profile blogger dibawah postingan blog

#kotak author profile blogger style 2

berikut secreenshot penampakan kotak box author profile style 2

Cara Membuat Kotak Profile Author Blogger

Oke untuk cara membuatnya silahkan ikuti langkahnya berikut ini : 

1. Silahkan anda masuk ke dashboard blogger anda
2. LAngsung saja pergi kemenu edit HTML
3. Copy kode dibawah ini dan letakan tepat diatas kode ]]></b:skin>
.authorboxwrap{Font-family: Open Sans;background:#f3f3f3;margin:10px auto 20px;padding:20px;overflow:hidden;border:1px solid #fafafc;}
.avatar-container {float:left;margin-right:20px;border: 1px solid silver;padding: 3px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-family:Open Sans; 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:#00000;font-size:95%;margin-bottom:8px;font-family: arial;}
.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:50%;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;}
4. Oke setelah itu copy kode dibawah ini lalu letakan tepat dibawah kode <data:post.body/> yang kedua
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<img src='https://scontent-sin62.cdninstagram.com/t51.288515/s1080x1080/e15/fr/15338331_197975987328478_7517741477372362752_n.jpg'/>
</div>
<div class='author_description_container'>
<h4>Author: <a href='#' rel='author'><data:post.author/></a></h4>
<p> Terima kasih telah berkunjung ke blog ini jika kalian suka silahkan share. Artikel saya yang berjudul<a expr:href='data:post.url'><data:post.title/></a>. artikel ini resmi ditulis oleh <data:post.author/> .Pada hari ini khususnya<data:post.dateHeader/>. Jika anda ingin sebarluaskan artikel ini, atau meletakan artikel ini sebagai tulisan anda mohon sertakan <strong>sumber link asli.</strong><center><strong>www.jagoankode.blogspot.com</strong></center></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>
<div style='clear:both'/>
</b:if>
5. SAVE TEMPLATE lalu lihat hasilnya
catatan :
Ganti tulisan merah dengan data data author blog yang anda inginkan
Ganti tulisan biru dengan URL sosial media yang anda punya
Sedangkan tag <img src warna ungu ganti link photo profile yang anda punya.
Penutup...

Sekian Dari Tutorial Saya Yang Berjudul Cara Membuat Kotak Profile Author Blogger Keren Banget Bukan, Jika Kalian Suka Silahkan Kalian Cobakan Cara Diatas di Blog Kalian Masing Masing, Dan Semoga Bermanfaat Untuk Teman Teman Semuanya, Baca Juga Updatan Lain Di Blog Ini Yaa...

Postingan terkait:

Belum ada tanggapan untuk "Cara Membuat Kotak Profile Author Blogger"

Posting Komentar