-->

Cara Membuat Widget Author Box Keren di Bawah Postingan Blog

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

Cara Membuat Widget Author Box Keren di Bawah Postingan Blog
 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.
Next
Previous
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses
  • Facebook
  • Twitter
  • Instagram
  • Related Posts

    Show comments
    Hide comments

    0 Komen

    Posting Komentar

    • Mohon Tinggalkan jejak sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
    • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
    • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
    • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
      <i>#comments</i>
    • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
      <em>#comments {margin:0; padding:10px 15px}</em>

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    x
    Berlangganan

    Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!