Cara Membuat Widget About Me Terbaru Keren

Selamat Malam Guys, Lagi begadang nih gue hehehe, kali ini saya akan memberikan tutorial bagaimana sih Cara Membuat Widget About Me Terbaru Keren, oke langsung saja, beriku tampilannya :

Tampilan Widget About Me

Profil About Me yang satu ini adalah widget yang sedang saya gunakan sekarang di blog Dunia Programming, untuk keunggulannya adalah, memiliki banyak link sosmed, dan juga bagian foto Profil Pembuat blog yang keren ketika kita arahkan kursor kebagian foto profil.

dan juga, kita dapat menambahkan tombol Join Our Site, agar para pengunjung dapat menerima informasi dari blog kalian secara otomatis, apabila kalian menulis artikel terbaru pada blog kalian.

"Lalu, bagaimana cara membuatnya...?"

Langsung saja kita mulai tutorialnya

Cara Membuat Widget About Me Terbaru Keren

1). Langkah pertama, masuk kebagian menu Dashboar blog kalian, lalu pilih Template > Edit HTML.

2). Masukkan source code CSS dibawah ini tepat diatas script </b:skin>, atau bisa juga diantara kode CSS lainnya.

CSS

/* About Me */
#HTML68 .aboutinv-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.aboutinv-img{position:relative;max-height:140px;overflow:hidden}
.aboutinv-img img {max-width:100%;width:100%;transition:all .6s;}
.aboutinv-img:hover img{transform:scale(1.2) rotate(-10deg)}
.aboutinv-img:before{content:&#39;&#39;;background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.aboutinv-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;left:22.5%;z-index:3}
.aboutinv-float{text-align:center;display:table;width:100%;height:100%}
.aboutinv-float a{background:transparent;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #fefefe;border-radius:3px;transition:all .3s}
.aboutinv-float:hover a{background:#09a4de;color:#fff;border-color:transparent;}
.aboutinv-float a i{font-weight:normal;margin:0 5px 0 0}
.aboutinv-wrpicon{display:block;margin:15px auto;position:relative;}
.aboutinv-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .aboutinv-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .aboutinv-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .aboutinv-icon i{font-family:fontawesome;margin:0 3px 0 0}
.aboutinv-icon.fbl a{background:#3b5998}
.aboutinv-icon.twitt a{background:#19bfe5}
.aboutinv-icon.crcl a{background:#d64136}
.aboutinv-icon.fbl a:hover,.aboutinv-icon.twitt a:hover,.aboutinv-icon.crcl a:hover{background:#404040}
.extender .aboutinv-icon:hover a,.extender .aboutinv-icon a:hover{color:#fff;}
.aboutinv-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.aboutinv-info p{margin:5px 0}
.aboutinv-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.aboutinv-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.aboutinv-info h4:before,.aboutinv-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:&#39;\a0&#39;;background-color:rgba(0,0,0,0.08);}
.aboutinv-info h4:before {margin-left:-50%;text-align:right;}

3). Setelah itu, pergi kebagian menu Tata Letak, lalu klik Add Widget > HTML / Javascript.

4). Lalu, masukkan source code HTML dibawah ini.

HTML

<div class='widget-content'>
<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='aboutinv-img'>
<img alt='Indzign' class='img-responsive' height='auto' src='Gambar.jpg' title='Indzign' width='300'/>
<div class='aboutfloat-img'><span class='aboutinv-float'><a href='https://www.blogger.com/follow-blog.g?blogID=8614019978387121716' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'/> Join Our Site</a></span></div>
</div>
</div>
<div class='aboutinv-info'>
  <h4><span>Muhammad Tajuddin</span></h4>
<p>Seorang Blogger Pemula</p>
</div>
<div class='aboutinv-wrpicon'>
<ul class='extender'>
<li class='aboutinv-icon fbl'><a href='https://www.facebook.com/softwareengineering2/' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'/> Like</a></li>
  <li class='aboutinv-icon twitt'><a href='https://www.instagram.com/heydins_' target='_blank' title='Follow Our Instagram'><i class='fa fa-instagram fa-fw'/> Follow</a></li>
<li class='aboutinv-icon crcl'><a href='https://plus.google.com/115771468879770383096?hl=id' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'/> Circle</a></li>
</ul>
</div>
</div>
</div>

Keterangan :

• Untuk text yang berwarna merah, ganti sesuai keinginan kalian.
• Untuk text yang berwarna biru, ganti dengan link yang ingin kalian kaitkan.

Bagaimana...? Keren bukan tampilannya, pastinya keren dongs.

Jika kalian mengalami kesulitan dalam membuat widget Aboutme diatas, silahkan kalian bisa meninggalkan komentar pada kolom yang sudah disediakan dibawah, secepatnya akan saya jawab, atau bisa juga chat di link sosmed yang sudah saya berikan.

Sekian, semoga apa yang saya berikan bermanfaat bagi kalian, terimakasih.