Jadikan Gaya Author Box di Blogger Unik + Media Sosial

Jadikan Gaya Author Box di Blogger Unik + Media Sosial
Daftar Isi Artikel
Widget Author Box menunjukkan sebuah data diri Profil seorang penulis artikel di dalam blog agar pemilik blog bisa dikenal dengan mudah oleh pengunjung tersebut dan biasanya memunculkan keterangan tentang dirinya seperti (tentang saya), terletak di bawah atau bagian samping sidebar sebuah artikel. Dengan adanya widget ini, pembaca / pengunjung bisa dapat mengetahui dan mengenal siapa penulis artikel dengan mudah.

Author Box atau fitur About Me ini biasanya memiliki tampilan yang berbeda-beda di setiap template yang kita pakai berisi Foto Penulis dan Deskripsi singkat penulis dan detail fikturnya dilengkapi dengan iconk link media sosial agar lebih mudah dikenal oleh banyak orang.

Jadikan Gaya Author Box di Blogger Unik + Media Sosial

Mungkin kebanyakan dari kalian pengguna platform Blogger, mendapati bahwa tampilan widget Author Box tidak menarik. Jadi, untuk membuatnya lebih keren dengan gaya yang simpel. Saya akan membahas tutorial cara memasang Author Box (About Me) di Blogger atau Blogspot.

Simak pembahasan lengkapnya dengan seksama ^^

Memasang Widget Author Box / About Me di Blog

Widget Author Box Mirip Jagoandzgn

Widget Author Box Keren Mirip Jagoandzgn

1. Langkah pertama kalian Masuk ke Dasbor Blogger > Tema > Edit HTML.

2. Lalu caari kode ]]></b:skin>.

3. Dan kemudian letakkan kode dibawah ini tepat diatasnya ]]></b:skin>.

/* Auto Author Box */
.faishalkc-Author{text-align:center;margin-top:20px;}
.faishalkc-Author .top{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start;justify-content:center;}
.faishalkc-Author .bottom{text-align:center;margin-top:-35px;padding:45px 15px 15px;border-radius:5px;background:teal;background-image: linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));}
.faishalkc-Author img{width:50px;height:50px;border:5px solid #fff;border-radius:100px;}
.faishalkc-Author .author-name{font-size:20px;font-weight:700;margin-bottom:7px;}
.faishalkc-Author .author-name a{color:#ffffff;font-weight:500}
.faishalkc-Author .author-desc {color: #eaeaea;font-family: 'Google Sans',sans-serif;overflow: hidden;line-height: 1.6em;font-size:14px}
.faishalkc-Author .author-desc a {background: #ffffff;padding: 5px 8px;color: black;border-radius: 6px;font-family: 'Google Sans',sans-serif;font-size: 13px;!important: ;}
.faishalkc-Author .author-desc a:hover {color:#0081ff;}
.faishalkc-Author .author-desc li {display : inline-block;padding-top: 5px;}

4. Selanjutnya cari kode template seperti ini.

<b:if cond='data:post.authorAboutMe'>...</b:if>

5. Ubah atau ganti kode tersebut dengan kode berikut ini.

<b:if cond='data:post.authorAboutMe'>
<div class='faishalkc-Author'>
<b:if cond='data:post.authorPhoto.url'>
<div class='top'>
<img itemprop='image' expr:src='data:post.authorPhoto.url' width='90px'/>
</div>
</b:if>
<div class='bottom'>
<div class='author-name'>
<a expr:href='data:post.authorProfileUrl' rel='author' expr:title='data:post.author'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<div class='author-desc'><data:post.authorAboutMe/>
<br/>
<li><a href='https://www.facebook.com/' title='Facebook'>Facebook</a></li>
<li><a href='https://wa.me/' title='WhatsApp'>WhatsApp</a></li>
<li><a href='https://www.instagram.com/' title='Instagram'>Instagram</a></li>
</div>
</div>
</div>
</b:if>

6. Nah, silakan edit dengan link media sosial media yang kalian miliki, jangan lupa Simpan Perubahan.

Widget Author Box Mirip KompiAjaib

Widget Author Box Blog Mirip KompiAjaib

1. Masuk ke Blogger.
2. Pastikan kamu sudah memasangkan / menerapkan FontAwesome terdahulu di blog kalian.
3. Setelah masuk ke Dashboard blogger, klik Template > Edit HTML.
4. Cari kode </head>.
5. Lalu Copy Paste  kode dibawah ini, dan letakkan kode sebelum / diatas kode </head>.

<!-- Widget Profil start-->
<style type='text/css'>
.sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center}
.authorbox{width:300px;background:url(//lh3.googleusercontent.com/lUQcK29uPNQzy9gVVKuCuVIso6amDmTXH1rsbIXukGeBp0BOJIYtwCE8BbNTVv_UArIBFg=s300-fcrop64=1,00001ad4fffff235) top center no-repeat #fff;border:1px solid #dedede;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px 0 0;margin:0 auto;}
h2.author-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}
.authorbox img{margin:55px auto 0;border-radius:100%;display:block}
a.authorname{margin:10px auto;font-weight:400;font-size:20px!important;text-decoration:none;}
a.authorname-url{margin:0 auto 10px;font-weight:400;font-size:16px!important;text-decoration:none;}
.sosmed-author li,.sosmed-author ul{list-style:none}
.sosmed-author ul{margin:0!important;padding:0!important}
.sosmed-author{margin:0 auto!important;padding:10px 0;background:#dfdfdf;border-top:1px solid #dedede}
.sosmed-author li{display:inline-block;margin-right:10px}
.sosmed-author li:last-child{margin-right:0}
.sosmed-author li a,a.authorname,a.authorname-url{color:#555!important;transition:all .4s ease-out}
.sosmed-author li a:hover,a.authorname:hover,a.authorname-url:hover{color:#111!important}
a.button-author{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:bold;font-size:16px!important;margin:10px 10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out;text-decoration:none}
a.button-author:hover{background:#357ae8;border:1px solid #2f5bb7}
</style>
<!-- Widget Profil end -->

6. Kemudian klik Simpan perubahan.
7. Dan cari kode html </body>.
8. Lalu Copy kode dibawah ini, dan paste kode sebelum </body>.

<!-- Widget Profil start -->
<script>
//<![CDATA[
var imgDefer = document.getElementsByTagName("img");
for (var i = 0; i < imgDefer.length; i++) {
    if (imgDefer[i].getAttribute("data-src")) {
        imgDefer[i].setAttribute("src", imgDefer[i].getAttribute("data-src"));
    }
}
//]]>
</script>
<!-- Widget Profil end -->

9. dan klik Simpan.

Langkah Terakhir

1. Kembali ke Dashboard Blogger.
2. Masuk pada Tata Letak > Tambah Gadget > HTML/Javascript.
3. Lalu Copy dan Paste kode html dibawah ini :

<div class="authorbox">
  <h2 class="author-title">
Author
</h2>
  <img alt="author" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="//lh3.googleusercontent.com/H9LjyimFU58AWcBw-EHwBJMFQBmTwek8XwBHKNJn-yzQqbydFYDpK09UMM5z-zT3FYx7UCD2hQ=w1366-h768-rw-no" width="120" height="120" />
  <a class="authorname" href="https://plus.google.com/+xxxxxx" rel="author" target="_blank" title="Aksan Pangestu">Aksan</a>
  <a class="authorname-url" href="https://plus.google.com/+xxxxxx" rel="author" target="_blank" title="google.com/+AksanPangestu">google.com/+AksanPangestu</a>
  <div class="sosmed-author">
    <ul>
          <li><a href="https://www.facebook.com/xxxxxx" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
          <li><a href="https://twitter.com/xxxxxx" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>
          <li><a href="https://www.google.com/+xxxxxx" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li>
      <li><a href="//www.youtube.com/c/xxxxxx" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
      <li><a href="https://www.linkedin.com/in/xxxxxx" target="_blank" title="LinkedIn" rel="nofollow"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></a></li>
      <li><a href="https://www.instagram.com/xxxxxx/" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
    </ul>
    <div class="clear"></div>
<a class="button-author" href="//www.blogger.com/follow.g?view=FOLLOW&blogID=6355813876215224659" target="_blank" title="Follow This Blog">Follow This Blog</a>
<a class="button-author" href="URL FEEDBURNER BLOG" rel="nofollow" target="_blank" title="Subscribe This Blog">Subscribe This Blog <i aria-hidden="true" class="fa fa-paper-plane"></i></a>
  </div>
</div>

4. Terakhir klik simpan.

Catatan:
- Ganti https://plus.google.com/+xxxxxx  dengan url / link Google+ kalian.
- Ganti //lh3.googleusercontent.com/H9LjyimFU58AWcBw-EHwBJMFQBmTwek8XwBHKNJn-yzQqbydFYDpK09UMM5z-zT3FYx7UCD2hQ=w1366-h768-rw-no  dengan url / link gambar (foto profil).
- Ganti https://www.facebook.com/xxxxxx  dengan url / link Facebook.
- Ganti https://twitter.com/xxxxxx  dengan url / link Twitter.
- Ganti //www.youtube.com/c/xxxxxx  dengan url / link  channel Youtube.
- Ganti https://www.linkedin.com/in/xxxxxx  dengan url / link Linkendin.
- Ganti https://www.instagram.com/xxxxxx/  dengan url / link Instagram.
- Ganti xxxxxx  dengan BlogID.
- Ganti URL FEEDBURNER BLOG  dengan url / link  FeedBurner blog.

Akhir Kata

Terima kasih teman-teman telah mengunjungi Aunur dan telah membaca artikel ini. Silahkan terus kunjungi blog ini untuk lebih banyak artikel dan informasi baru lainnya. Semoga harimu indah dan menyenangkan. See You! ^^
Conk Khalis
Oleh Conk Khalis

Hai, Saya Nur Khalis asli Sumenep. Seorang Content Creator dan Editor yang suka Desain dan main blog sebagai hobi mulai 2014 - sekarang. ^^

Langganan

  1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
  2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
  3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
  4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
  5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
  6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
  7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
  8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>