Cara Membuat Widget Author Box Keren di Bawah Postingan Blog - SeriesWans

Serieswans.com - Pada kesempatan kali ini saya akan membahas tentang cara membuat Author blog dengan sosial button di blogger. Author Box juga sangat baik jika dipasang diblog kita, karena bisa memperkenalkan penulis ataupun pemilik blog kepada para pembacanya.

Widget author box ini biasanya terletak di bagian sidebar blog dan juga di bawah postingan. tapi kali ini saya akan buat hanya yang di bawah postingan seperti gambar di bawah ini contohnya.

Baca Juga : 5 Tips dan Cara Mudah Mendapatkan Sitelink Blog dari Google Terbaru

 Memasang Author Box Keren di Blogger

Nah, dengan adanya Author Box yang dilengkapi dengan sosial media icons juga sangat bermanfaat agar semua para pembacanya dapat menghubungi pemilik blog tersebut saat mereka memiliki keluhan ataupun pertanyaan seputar artikel yang mereka baca. untuk cara membuat widget author box ini sangat mudah, karena di bawah ini sudah saya siapkan kode widget author box berserta cara pemasangannya, ayo simak langkah-langkahnya di bawah ini.

Berikut adalah langkah-langkah Cara Mudah Memasang Author Box Keren di Blogger Terbaru :

1.Masuk ke Dashboard  blogger seperti biasanya.

2.Kemudian, Silahkan masuk kemu Template dan klik Edit HTML

3.Selanjutnya cari kode <data:post.body/> dan letakkan kode dibawah ini tepat dibawah kode tersebut

<!-- deskripsi anda -->
<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><a href='https://www.serieswans.com/' rel='author'><data:post.author/></a></h4>
<p>
  Hanya Seorang blogger pemula yang ingin terus belajar mengenai Dunia Teknologi, Programing dan Mencari ide-ide yang kreatif yang bisa di manfaatkan oleh banyak orang
<data:post.authorAboutMe/>      
</p>
<div class='authorsocial'>
&lt;a class=&#39;img-circle1&#39; href=&#39;https://www.facebook.com/SeriesWans-289539498428038/?ref=bookmarks&#39; rel=&#39;nofollow&#39; target=&#39;_blank&#39;&gt;&lt;i class=&quot;fab fa-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class=&#39;img-circle2&#39; href=&#39;https://twitter.com/WansTm&#39; rel=&#39;nofollow&#39; target=&#39;_blank&#39;&gt;&lt;i class=&quot;fab fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class=&#39;img-circle3&#39; href=&#39;https://www.instagram.com/&#39; rel=&#39;nofollow&#39; target=&#39;_blank&#39;&gt;&lt;i class=&quot;fab fa-instagram&quot;&gt;&lt;/i&gt;&lt;/a&gt;
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>
<!-- deskripsi akhir anda -->

4.Kemudian masukkan kode CSS dibawah ini tepat sebelum kode ]]></b:skin> ataupun </style>

/* CSS Author Box */
.authorboxwrap{
    background: #fff;
    margin: 0px 0px -4px;
    padding: 15px;
    overflow: hidden;
 border: 1px solid #f0f0f0;
}
.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:#00b02a}
.author_description_container h4 a:hover{color:#333}
.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;    border-bottom: 4px solid #273d6b;
    border-radius: 0px 15px 0px 15px;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;    border-bottom: 4px solid #2a7bab;
    border-radius: 0px 15px 0px 15px;}
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;    border-bottom: 4px solid #902319;
    border-radius: 0px 15px 0px 15px;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

5.Jika sudah selesai simpan Templatenya dan silahkan lihat blognya, jika gak ada kesalahan saat pemasangan kode diatas, maka author box akan muncul.

Baca Juga : Cara Mudah Memasang Notifikasi AdBlocker keren seperti Kompi Ajaib

Mungkin itu saja artikel mengenai Cara Membuat Widget Author Box Keren di Bawah Postingan Blog. jangan lupa kunjungi dan berlangganan, agar anda tidak ketinggalan artikel terupdate selanjutnya. apbaila anda memiliki pertanyaan terkait tutorial di atas. silahkan tanyakan di kolom komentar. semoga artikel ini bisa membantu menyelesaikan permasalahan anda.

Related Posts