Box about author ini sudah valid HTML5 dan CSS3 dan hanya menggunakan beberapa kode CSS dan HTML. Tampilannya sediri menurut saya sudah bisa dibilang keren, silahkan Anda lihat demo author boxnya pada gambar disamping.
Padahal saya sedang ingin berhenti blogging pada malam hari ini saya di sibukkan dengan ulangan besok hari , tapi kalau saya tidak update posting, nanti alexa rank blog ini bisa gendut, hehe.
Widget about author ini juga bisa menambah blog Anda menjadi semakin keren, karena tampilannya yang rapi dan elegan serta enak dipandang. Pada artikel sebelumnya saya juga sudah membangikan 1 widget yang sangat berguna, yaitu widget tombol search keren.
Baca juga : Cara Membuat Tombol Search Keren
Dan jika Anda tertarik membuat widget about author box keren seperti gambar diatas, Anda bisa memasangnya dengan mengikuti langkah-langkah berikut ini.
Cara Membuat Widget About Author Box Keren
1. Login ke blogger
2. Dashboard > Template > Edit HTML
3. Masukan kode CSS berikut diatas kode ]]></b:skin>
.profile-img{float:left;display:block;width:90px;height:90px;margin:10px 10px 0 0;background-size:cover;background-repeat:no-repeat;background-position:center center;border-radius:99em;border:3px solid #eee;box-shadow:0 3px 2px rgba(0,0,0,0.3)}4. Simpan Template
.profile-data{margin:0; letter-spacing:.1em; font-size:90%; font-weight:bold; line-height:1.4em}
.profile-datablock{margin:.5em 0 .5em .0em}
.profile-textblock{text-align:left; margin:0.0em; line-height:1.6em}
.profile-link{font-weight:bold}
5. Pergi ke Tata Letak > Tambahkan Gadget dan masukan kode HTML berikut
<div class="profile-textblock">Keterangan :
<img alt="Ahmad Manarul Hakim" class="profile-img" src="http://2.bp.blogspot.com/-hyiFz3zWaw8/Usp9kPKQNHI/AAAAAAAACJg/jEwQioQ2nrs/s1600/ahmadmanarulh.png" title="Ahmad Manarul Hakim" width="100" height="100" />Saya (Ahmad Manarul Hakim) merupakan seorang blogger pemula yang ingin membuat manfaat lewat blog saya.
Anda dapat menemukan saya di : <br/>
» <a href="https://www.facebook.com/ahmad.manarul.16" title="Facebook" target="_blank">Facebook</a><br/>
» <a href="https://twitter.com/mestiqui" title="Twitter" target="_blank">Twitter</a><br/>
» <a href="https://plus.google.com/+AhmadManarulHakim" title="Google+" target="_blank">Google+</a>
</div>
- Warna merah Anda ganti dengan nama Anda
- Warna biru Anda ganti dengan url foto Anda
- Warna hijau Anda ganti dengan deskripsi Anda
- Warna orange Anda ganti dengan url social Anda
6. Simpan Widget
Ternyata caranya simple bukan untuk membuat widget about author box keren, semoga dengan ini pengunjung blog Anda bisa menemukan Anda di social media lainnya dan bisa menambah blog Anda menjadi tambah keren, semoga bermanfaat.
Created By Novan Chandra :)
0 komentar:
Posting Komentar