Expand To Show Full Article
Blogger Author Bio Box With Social

Blogger Author Bio box with Social

Taufiq Setiawan

Updated on:

Blogger Author Bio box with Social
Blogger Author Bio box with Social

Blogger Author Bio box with Social Responsive kali ini saya membahas tentang cara menambahkan kotak bio penulis di blogger dengan ikon sosial.

Blogger Author Bio box with Social Dengan menggunakan kotak penulis ini Anda harus dengan mudah menambahkan penulis pengarang, bio data penulis deskripsi dan tautan media sosial penulis. tutorial ini cara memasang kotak blogger writer sobat semua.

Blogger Author Tutorial ini saya akan share Cara menambahkan kotak penulis profesional di blogger. Kotak penulis ini bisa membuat blogger  sobat lebih atraktif dan responsive.

Blogger Author Bio box with Social

Blogger Author Semua orang ingin membuat blog mereka lebih profesional dan keren saat mendesain. Tambahkan kotak Author di bawah setiap postingan blogger.

Ini adalah widget blogger yang mengagumkan. Widget ini bisa membantu sobat semua membuat blog Anda lebih atraktif dan responsive sobat.

Widget

Tutorial ini multi-author dari kotak ini digunakan untuk menampilkan google plus foto profil dan profil singkat penulis artikel.

Widget ini mendukung banyak penulis jika di blog menjalankan admin atau punya beberapa penulis lain Blogger Author.

  • Responsive Desain.
  • Icon-icon Social Responsive.
  • Professional Melihat Responsive.
  • Profil Atau Gambar Otomatis dari Gmail.
  • Desain CSS Responsive.

Mudah Pahami Sobat Semua.

Foto AuthorBox Otomatis dari gmail atau google plus profil berarti, deskripsi sobat semua dan gambar profil Anda akan dikumpulkan dari google plus profil.

Sobat tidak perlu repot menambahkan informasi tambahan tentang sobat. Jika sobat ingin menampilkan kotak bio penulis di bawah setiap posting, maka itu akan menjadi sempurna untuk sobat dan keren responsive.

Tutorial Cara Menambahkan Widget Blogger Author Box Di Bawah Setiap Postingan Di Blogger.

Tutorial sederhana. Sobat harus menambahkan beberapa Kode CSS Pada Template Blogger Sobat. Di widget blogger sobat bisa mempromosikan link media sosial Anda di widget ini dengan ikon sosial.

Blogger Author Bio box with Social Meskipun ikon ini digunakan dengan ikon Fontawesome. Author box widget untuk blogger bisa membuat blog anda lebih profesional. Beberapa pengguna selalu mencari bio box yang responsive

dan menarik untuk blogger. Widget copy code ini sobat.

Cara Kepertama:

Tutorialnya. Buka Dasbor Blogger> Template> Edit HTML dan lewati kode di atas di atas.

</ style>

/* CSS Author Bio Box by Mboton */

authorboxwrap{Font-family: Open Sans;background:#fff;margin:10px auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.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:#888;font-size:95%;margin-bottom:8px;font-family: Open Sans;}
.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;}

Cara Kedua.

Sekarang melewati kode di bawah tepat setelah.

 


<data: post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>Author: <a href='nama sobat' rel='author'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>
</p>
<div class='authorsocial'>
<a class='img-circle1' href='alamat Url facebook sobat' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='alamat Url twitter sobat' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='alamat Url google plus sobat' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>

Save Template Sobat.

Silakan Ubah semua  Tanda pagar URL yang di inginkan sobat semua  adalah, Facebook, Twitter dan Gooogle plus.

Ganti id google plus sobat ya (Https://plus.google.com/u/0/USER-NAME/about)
Klik tombol Edit pada Story Section dan tulis tentang diri Anda saat diperkenalkan pada blogger sobat.

Blogger Author Bio box with Social Sekian dari saya mboton semoga bermanfaat untuk sobat dan adik-adik yang ingin mendesain website tersebut nanti akan di jawab oleh pihak admin.

Tersebut akan selalu update lagi lebih banyak lagi nanti perlu peluang banyak dan di coba dulu oleh admin work tidaknya kalau sudah work akan di share di website.

Blogger Author Bio box with Social Nantinya sobat kunjung terus updatenya sewaktu-waktu update terbaru salam dari admin mboton yang terhormat.

Terima Kasih Atas Kunjungan Anda Semua salam hangat untuk berkomentar di bawah ya sobat.
Tetap Semangat Kawanku Semua.

Sharing Media Sosial:
Photo of author
Taufiq Setiawan

About the author

Mboton Business Technical Content Writer Menyukai dunia Technical IT Digital Marketing & Travel Blogging. Suka berbagi hal baru yang bermanfaat bagi Majalah Dunia.

Satu pemikiran pada “Blogger Author Bio box with Social”

Terima Kasih Banyak Atas Komentar dan Sudah Berkunjung di Halaman Website Mboton