Cara Membuat Widget Author Box Keren Di Blog

Zona Internetku 2 Comments September 19, 2018

Cara Mudah Membuat Widget Author Box Keren Di Blog. Widget Author atau yang biasa disebut dengan nama widget pengarang merupakan sautu widget blog yang berisi tentang identitas atau informasi sekilas sekilas mengenai penulis konten blog tersebut, tak jarang juga kalau widget author juga bisa diberi tombol link media sosial author tersebut.

Widget author box biasanya terletak di bagian sidebar blog dan juga di bagian bawah postingan blog. Fungsi Widget Author Box sendiri berfungsi sebagai untuk memberitahukan infromasi tentang si penulis ataupun pemilik konten blog tersebut.

Baca juga : 2 Cara Membuat Widget Subscribe Box Keren Di Blog

2 Cara Paling Mudah Untuk Menambahkan Widget Author Box Yang Super Kece Di Blog

Untuk membuat widget author box sangat mudah sekali, karena saya sudah menyiapkan kode widget author blog buatan saya sendiri yang saya ambil dari template premium buatan saya. Untuk tampilan widgetnya tidak perlu diragukan lagi karena tampilan sudah responsive dan bisa menyesuaikan di segala perangkat.

1. Menambahkan Author Box Di Bawah Postingan Blog

1. Pastikan kalian sudah masuk di blog kalian
2. Berikutnya pilih menu "Tema" kemudian kalian klik "Edit Tema"
3. Setelah itu kalian cari kode </b:skin> atau </style>
4. Silahkan letakkan kode berikut ini di atas kode yang tadi

#aboutme-in{background:#b8c7e4;margin:25px auto;display:block;position:relative;padding:30px 10px 20px 10px;overflow:hidden}
#aboutme-in:before{content:'';display:block;width:100%;height:70px;background:#0a2f77;position:absolute;top:0;left:0;right:0;z-index:0}
.img-about{display:inline-block;float:left;position:relative;z-index:1}
.img-in{width:120px;height:120px;border-radius:100%;z-index:1;border:7px solid #f3ebdc}
.aboutfull{z-index:1;position:relative;display:inline-block;float:right;width:calc(100% - 155px)}
.aname{color:#b38c45;font-size:20px;font-weight:600!important;padding:0!important;display:block;margin:12px 7px!important;text-transform:uppercase;font-family:informal roman}
.aboutme-note{font-size:15px;font-weight:400;line-height:1.6em;color:#714b11}
.sosmed-about{display:block}
.sosmed-about a{text-align:center;font-size:20px;display:inline-block;padding:0;margin:5px 2px}
.sosmed-about a i{line-height:30px}
.sosmed-about a i.fa-facebook{color:#fff;background-color:#174298;height:30px;width:35px}
.sosmed-about a i.fa-google-plus{color:#fff;background-color:#a70000;height:30px;width:35px}
.sosmed-about a i.fa-instagram{color:#fff;background-color:#4a340c;height:30px;width:35px}
.sosmed-about a i.fa-twitter{color:#fff;background-color:#7790c1;height:30px;width:35px}
@media screen and (max-width:480px){#aboutme-in{text-align:center}.img-about{float:none}.aboutfull{width:100%}.aboutme-note{text-align:left;float:left}}

5. Jika selesai, selanjutnya yaitu kalian cari kode <data:post.body/>

Tips : Setiap template blog memiliki jumlah kode <data:post.body/> yang berbeda beda, jadi jika widget author pada blog kalian tidak muncul maka solusinya kalian harus meletakkan kode widget author blog tadi di atas atau di bawah kode <data:post.body/> yang lainnya
biasanya yang benar adalah kode <data:post.body/> berada di dalam kode <b:includable id='post' var='post'>...</b:includable>

6. Setelah kalian sudah menemukan kode <data:post.body/> maka kalian letkkan kode berikut ini di bawah kode <data:post.body/>

<div id='aboutme-in' class='aboutme-in'>
<span class='img-about'>
<a href='#'>
<img class='img-in' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGH5R7XrrDNAveUWmBxvIgGIVANiJ58q2SljiyTsznxBtnsz3Ub8QFLBzeEqpTi-3BCvkXhBHqJ05ZP0x0StvawjILu80cXTX_wsF0WUm0qZG3QemIcfOuaNAOXvn5mDqjnGwlQZlb0Pzu/s1600/noimage-zonainternetku.png"/>
</a>
</span>
<span class='aboutfull'>
<span class='aname'>Mch. Hakim
</span>
<span class='aboutme-note'>Zona Internetku | Seorang blogger Ganteng dan memanfaatkan waktu luangnya untuk belajar blogging, koding, mendesain dan mendalami dunia IT
</span>
<span class='sosmed-about'>
<a href='https://web.facebook.com/zonainternetku/'><i class='fa fa-facebook'></i></a>
<a href='https://plus.google.com/u/0/+MchHakim'><i class='fa fa-google-plus'></i></a>
<a href='https://www.instagram.com/mch.hakim/'><i class='fa fa-instagram'></i></a>
<a href='#'><i class='fa fa-twitter'></i></a>
</span>
</span>
</div>

7. Ok, jika semua dirasa sudah beres, silahkan kalian klik "Simpan Tema" dan lihat hasilnya

Baca juga :
3 Cara Memasang Widget Tombol Media Sosial Pada Blog
6 Cara Memasang Social Media Share Button Pada Blog
Trik Membuat Widget Label Blog Menjadi Keren

2. Menambahkan Author Box Di Bagian Sidebar Blog

1. Silahkan login dulu di blog kalian
2. Kemudian pilih menu "Tata Letak" dan klik "Tambahkan Gadget"
3. Selanjutnya pilih widget yang bernama "HTML/JavaScript"
4. Setelah itu masukkan kode berikut ini

<style>
#about_me{background:#eeb9b2;margin:25px auto;display:block;position:relative;padding:30px 10px 20px 10px;overflow:hidden;max-width:300px}
#about_me:before{content:'';display:block;width:100%;height:100px;background:#ed7d70;position:absolute;top:0;left:0;right:0;z-index:0}
/* Widget Author Box By Zona Internetku */
.about_img{display:block;position:relative;text-align:center}
.img_in{width:120px;height:120px;border-radius:100%;z-index:1;border:7px solid #f3ebdc}
.about_full{position:relative;display:block;width:100%}
.a_name{color:#3f2b07;font-size:20px;font-weight:600!important;padding:0!important;display:block;margin:12px 7px!important;text-transform:uppercase;font-family:informal roman;text-align:center}
.aboutme_note{font-size:15px;font-weight:400;line-height:1.6em;color:#714b11}
.sosmed_about{display:block}
.sosmed_about a{text-align:center;font-size:20px;display:inline-block;padding:0;margin:5px 2px}
.sosmed_about a i{line-height:30px}
.sosmed_about a i.fa-facebook{color:#fff;background-color:#174298;height:30px;width:35px}
.sosmed_about a i.fa-google-plus{color:#fff;background-color:#a70000;height:30px;width:35px}
.sosmed_about a i.fa-instagram{color:#fff;background-color:#4a340c;height:30px;width:35px}
.sosmed_about a i.fa-twitter{color:#fff;background-color:#7790c1;height:30px;width:35px}
@media screen and (max-width:768px){#about_me{max-width:100%;text-align:left}.about_img{float:right}.about_full{width:calc(100% - 155px);float:right}.a_name{text-align:left}.aboutme_note{text-align:left;float:left}}
@media screen and (max-width:480px){#about_me{text-align:center}.about_img{float:none}.about_full{width:100%}.a_name{text-align:center}.aboutme_note{text-align:left;float:left}}
</style>

<div id='about_me' class='about_me'>
<span class='about_img'>
<a href='#'>
<img class='img_in' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGH5R7XrrDNAveUWmBxvIgGIVANiJ58q2SljiyTsznxBtnsz3Ub8QFLBzeEqpTi-3BCvkXhBHqJ05ZP0x0StvawjILu80cXTX_wsF0WUm0qZG3QemIcfOuaNAOXvn5mDqjnGwlQZlb0Pzu/s1600/noimage-zonainternetku.png"/>
</a>
</span>
<span class='about_full'>
<span class='a_name'>Mch. Hakim
</span>
<span class='aboutme_note'>Zona Internetku | Seorang blogger Ganteng dan memanfaatkan waktu luangnya untuk belajar blogging, koding, mendesain dan mendalami dunia IT
</span>
<span class='sosmed_about'>
<a href='https://web.facebook.com/zonainternetku/'><i class='fa fa-facebook'></i></a>
<a href='https://plus.google.com/u/0/+MchHakim'><i class='fa fa-google-plus'></i></a>
<a href='https://www.instagram.com/mch.hakim/'><i class='fa fa-instagram'></i></a>
<a href='#'><i class='fa fa-twitter'></i></a>
</span>
</span>
</div>

5. Jika kode di atas sudah di masukkan ke dalam widget "HTML/JavaScript" silahkan kalian klik "Simpan"

Sekian ulasan singkat mengenai Cara Membuat Widget Author Box Keren Di Blog yang dapat saya posting disini, semoga hal ini bisa membantu.

Promo Menarik

Diskon Barang Elektronik Di Lazada Hingga 80%

Cek disini

Promo Cuci Gudang, Diskon Sampai 50%

Cek disini

Murah Pol - Barang Murah Berkualitas Mewah

Cek disini

Tampil Cantik Gak Perlu Mahal - Diskon 50%

Cek disini

Kumpulan Barang Untuk Kesehatan - Diskon 50%

Cek disini

SHARE