Pada artikel kai ini, kita akan membahas mengenai cara membuat Sidebar About author box Menarik di Blogger.
Ketika membuat sebuah web ataupun sebuah blog akan selalu penting untuk memperkenalkan diri Anda kepada pembaca setia dan pengikut blog Anda sehingga mereka akan mengetahui informasi mengenai anda.
Untuk memperkenalkan diri anda kepada pengunjung atau pembaca setia anda biasanya dapat menggunakan widget about author box yang dapat ditampikan pada bagian sidebar blog anda.
Daftar Isi
Sidebar About author box merupakan sebuah widget yang teletak pada bagian sidbar blog yang memiliki fungsi untuk meberikan informasi sekilas mengenai penulis blog dan juga memberikan informasi mengenai akun media soial.
Pada sebuah widget about author box biasanya terdapat beberapa informasi seperti akun media sosial, sehingga nantinya Anda dapat dengan mudah membagikan berbagai tautan profil media sosial Anda bersama dengan deskripsi singkat dan sederhana Anda kepada pembaca stia blog anda.
Dengan menggunakan fitur ini, menjadi akan sebuah pilihan ideal untuk dapat menampilkan beberapa informasi apapun mengenai Anda dengan cara yang menarik. Baik menampikan sebuah gambar profil, beberapa deskripsi mengenai anda dan beberapa tombol media sosial yang anda miliki.
Untuk membuat sebuah Sidebar About author box di Blogger sangatllah mudah anda hanya perlu menambahkan widget pada tema blog anda kemudian anda tinggal menambahkan kode script yang telah anda buat. untuk langkah mudah nya sebagai berikut.
1. Masuk ke akun Blogger Anda
Pertama -tama anda login terlebih dahulu ke akun blog yang hendak akan di buat Sidebar About author box.
2. Pergi ke tata letak
Setelah masuk ke akun blog anda, maka anda tinggal masuk ke bagian tata letak. Tata letak disini berfungsi untuk mengatur tampilan blog anda.
3. klik tambahkan gadget atau widget
untuk menambahkan gadget atau widget Sidebar About author box tinggal tambah / add gadget kemudian pilih HTML, JavaScript.
4. Tambahkan kode html dan Css
Jika sudah maka anda dapat isikan judul sesuai keinginan anda seperti About me. Di bagian konten, Anda harus menyalin kode yang saya berikan kepada Anda dibawah ini.
<div class="widget-content">
<div class="sidebar_about_author">
<div class="inner_wrapper">
<div class="aboutme-img">
<img alt="Author" class="img-responsive" height="auto" src="#gambar profil" title="Author" width="300">
</div>
</div>
<div class="aboutme-info">
<h4> Kriteria.my.id </h4>
<p> Belajar blog bersama Kriteria.my.id </p>
</div>
<div class="aboutme-wrpicon">
<ul class="extender">
<li class="aboutme-icon"><a href="#facebook" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li class="aboutme-icon"><a href="#twitter" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li class="aboutme-icon"><a href="#github" rel="nofollow" target="_blank" title="GitHub"><i class="fa fa-github"></i></a></li>
<li class="aboutme-icon"><a href="#Google+" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></i></a></li>
<li class="aboutme-icon"><a href="#Pinterest" rel="nofollow" target="_blank" title="Pinterest"><i class="fa fa-pinterest-p"></i></a></li>
</ul>
</div>
</div>
<style>
.aboutme-img {
position: relative;
max-height: 150px;
overflow: hidden;
}
.aboutme-img img {
max-width: 100%;
width: 100%;
}
.aboutme-info {
margin-top: 20px;
font-size: 13px;
}
.aboutme-info h4 {
margin-bottom: 10px;
font-size: 16px;
text-transform: uppercase;
color: #888;
font-weight: 700;
}
.aboutme-info p {
margin: 5px 0;
}
.aboutme-wrpicon {
display: block;
margin: 15px auto 10px auto;
position: relative;
}
.aboutme-wrpicon .extender {
width: 100%;
display: block;
}
.extender {
text-align: center;
font-size: 16px;
}
.extender .aboutme-icon {
background: rgba(0,0,0,.06);
display: inline-block;
border: 0;
margin: 0;
padding: 0;
border-radius: 3px;
}
.extender .aboutme-icon a {
display: inline-block;
font-family: fontawesome;
font-weight: 400;
color: #aaa;
height: 32px;
width: 32px;
line-height: 32px;
border-radius: 3px;
}
</style>
</div>
Akan tetapi sebelum anda menyalin, maka terlebih dahulu membuat beberapa perubahan pada kode html dan css dengan keterangan sebagai berikut :
- Pada kode bagian kriteria.my.id dengan menulis nama penulis.
- Pada bagian Belajar blog bersama Kriteria.my.id, Anda harus mengubahnya menulis dengan menulis deskripsi mengenai Anda.
- Pada bagian #gambar profil Anda harus menempelkan tautan gambar Anda.
- Pada bagian #facebook Anda harus menempelkan tautan profil facebook Anda.
- Pada bagian #twitter profil Anda harus menempelkan tautan profil twitter Anda.
- Pada bagian #github profil Anda harus menempelkan tautan profil github Anda.
- Pada bagian #Google+ profil Anda harus menempelkan tautan profil Google+ Anda.
- Pada bagian #Pinterest profil Anda harus menempelkan tautan profil Pinterest Anda.
Ket. Pada bagian facebok hingga pinterest merupakan opsional jika anda tidak ingin menambahkanya anda bisa menghapusnya dari kode <li hingga kode</li> yang akan anda hilangkan.
Jadi setelah melakukan perubahan diatas maka Anda dapa menyalin kode yang telah anda ubah dan kemudian menempelkanya pada konten widget tersebut. Kemudian klik simpan.
Sekarang klik Lihat kembai blog anda.Tentunya saat ini anda dapat melihat Sidebar About author box yang berhasil ditambahkan.
Jadi hanya itu saja untuk artikel kali ini. Jika ada sebuah perntanyaan atau Anda merasa artikel ini bermanfaat dan Anda ingin kami terus memposting konten bermanfaat mengenai tips dan trik blogger, jangan lupa untuk meninggalkan komentar di kotak komentar di bawah.
