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. 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.

Tutorial ini saya akan share Cara menambahkan kotak penulis profesional di blogger. Kotak penulis ini bisa membuat blogger  sobat lebih atraktif dan responsive. 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.

  • 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. 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.

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 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.
Blogger Author Bio box with Social Blogger Author Bio box with Social Reviewed by Mboton on 10/04/2020 Rating: 5

No comments:

Powered by Blogger.