Cara Membuat Widget Author Bio box dengan Social icons Pada Blog

Berikut adalah tips blogger, tips menulis blog, seputar blogger, pelanggaran blogger, apa yang ditulis di blog, kunci blogger, cara membuat blog, blogger hukum

Dalam tutorial ini saya berbagi cara menambahkan kotak bio penulis di blogger dengan ikon sosial. Dengan menggunakan kotak penulis ini Anda harus dengan mudah menambahkan avatar pengarang, bio data penulis (deskripsi) dan tautan media sosial penulis. Untuk permintaan beberapa teman hari ini saya membagikan tutorial ini cara memasang kotak blogger writer .

Dalam tutorial ini saya akan share Cara menambahkan kotak penulis profesional di blogger . Kotak penulis ini bisa membuat blog Anda lebih atraktif. Semua orang ingin membuat blog mereka lebih profesional dan cantik. Tambahkan kotak Author di bawah setiap tulisan blogger. Ini adalah widget blogger yang mengagumkan. Widget ini bisa membantu Anda membuat blog Anda lebih atraktif.

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 (guest post).

Fitur dari Blogger Author Box ini

• Desain responsif
• Ikon Sosial
• Lihat Profesional
• Profil Otomatis Dari Google Plus
• Desain CSS Sederhana
• Mudah digunakan

Otomatis dari google plus profil berarti, deskripsi Anda dan gambar profil Anda akan dikumpulkan dari google plus profil. Itu sebabnya Anda tidak perlu menambahkan informasi tambahan tentang Anda. Jika Anda ingin menampilkan kotak bio penulis di bawah setiap posting, maka itu akan menjadi sempurna untuk Anda

Cara menambahkan widget blogger author box di bawah setiap postingan di blogger

Ini sangat sederhana. Anda harus menambahkan beberapa kode CSS pada template blogger Anda. Di widget blogger ini hal yang paling menarik adalah, Anda bisa mempromosikan link media sosial Anda di widget ini dengan ikon sosial bulat. 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 cantik dan menarik untuk blogger. Widget ini khusus untuk dirinya. Sekarang mari kita stat tutorialnya.

Langkah 1: Sekarang mari kita mulai tutorialnya. Buka Dasbor Blogger > Template > Edit HTML dan lewati kode di atas di atas </ style>

/* CSS Author Bio Box by contohblogger.com */.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;}

Langkah 2 : 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='#' 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><div style='clear:both'/></b:if>

Sekarang Simpan Template

Pengaturan

1 | Buka Google Plus About Section. (https://plus.google.com/u/0/USER-NAME/about)

2 | Klik tombol Edit pada Story Section dan tulis tentang diri Anda

3 | Simpan

4 | Setelah selesai langkah di atas sekarang kembali ke Dashboard Blogger > Layout > Edit widget posting blog dan tanda centang View Author Profile Under Post .

5 | Simpan

Sudah selesai Jika Anda menemukan masalah maka beritahu saya di bagian komentar. Omong-omong, jangan lupa untuk berbagi posting kita dengan orang lain. Terima kasih...