Cara Memasang Widget Profil Keren Pada Blog

Pada kesempatan kali ini saya ingin share widget profil keren atau yang biasa di sebut About Me. Bagi para blogger yang ingin memberikan sedikit preview tentang diri sendiri sangat cocok menggunakan widget ini. Biasanya pihak blogger telah menyediakan widget ini, namun tampilannya bisa dibilang kurang menarik. Jadi, kali ini saya akan share widget profil lengkap dengan akun sosial media yang dapat diklik oleh pengunjung/visitors bila ingin mengenal Anda lebih jauh.

Widget About Me

Cara Memasang Widget Profil Keren Pada Blog

1. Anda harus memasang icon Font Awesome di blog Anda terlebih dahulu. Bila sudah memilikinya, abaikan tahap ini. Namun, bagi Anda yang belum memasang icon font awesome, ikuti cara berikut.

Login terlebih dahulu ke blog Anda, lalu pilih Template > Edit HTML. Silahkan cari kode </head> . Bila sudah ketemu, silahkan copy CSS dibawah tepat di atas kode tersebut, lalu save.

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

2. Jika icon Font Awesome telah terpasang, silahkan menuju Layout > Add Widget > HTML/Jawascript, lalu masukkan HTML berikut.

<style>
div.head-bg:before{content:"";position:absolute;top:0;right:0;z-index:40;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #eee #fff #fff;background:#658E15;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.08),-1px 1px 1px rgba(0,0,0,0.08);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.08),-1px 1px 1px rgba(0,0,0,0.08);box-shadow:0 1px 1px rgba(0,0,0,0.08),-1px 1px 1px rgba(0,0,0,0.08);display:block;width:0}
.widget.widget-about{padding:0;background:#fff;margin-bottom:30px}
.widget.widget-about .head-bg{position:relative;background-color:#47C2DC;height:90px;background-repeat:no-repeat;background-position:center center;-webkit-background-size:cover!important;-moz-background-size:cover!important;-o-background-size:cover!important;background-size:cover!important}
.widget.widget-about .head-bg .my-pic{position:absolute;bottom:-20px;left:30px;border-radius:50%;overflow:hidden;background-color:#fff;border:5px
solid #fff}
.widget.widget-about .head-bg .my-pic
img{height:80px;width:80px}
.widget.widget-about .head-bg .my-data{padding-left:130px;padding-top:46px;color:#fff}
.widget.widget-about .head-bg .my-data
span{display:block;letter-spacing:1px;text-transform:uppercase}
.widget.widget-about .head-bg .my-data .my-name{font-size:14px;line-height:16px}
.widget.widget-about .head-bg .my-data .my-job{font-size:10px}
.widget.widget-about .my-words{padding:22px
25px 8px 25px;font-size:13px;line-height:21px}
.widget.widget-about .social-icon{margin-top:6px;text-align:center;border-top:1px solid #eee;padding:8px
25px 8px 25px}
.widget.widget-about .social-icon
a{display:inline-block;margin-right:6px;height:24px;width:24px;color:#fff;border-radius:2px;text-align:center;font-size:14px;background-color:#ddd;transition:background-color 0.2s ease-in-out;-moz-transition:background-color 0.2s ease-in-out;-webkit-transition:background-color 0.2s ease-in-out;-o-transition:background-color ease-in-out}
.widget.widget-about .social-icon a:hover{background-color:#47C2DC}
.widget.widget-about .social-icon a
i{font-size:14px;display:inline;line-height:25px}
.widget .tagcloud
a{display:inline-block;padding:1px
8px;color:#bbb;margin:0
3px 6px 0;border-radius:2px;border:1px
solid #eee;font-size:12px!important;text-transform:capitalize;transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out}
</style>
<div class='widget widget-about'><div class='head-bg' style='background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPzdUTRsxN4_XmcwxjJx50J77RWD0I0UJYEzHcbvg_4fUqAzLCGkDOoG42rxUlFrxhQ1_bHhO00c83CZo3g5qDmN5BjrD0par88HDnHQ6otxONsrwhrk5ImZDQ3kw1tdudRb_qP2y146aA/s1600/about-block-bg2.jpg)'><div class='my-pic'><img alt='M. Taufiq Nur' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZpgswxoDviirkYsvyiE9Ye0U_ec14lnIK8riWocmnnkXsCVBn7wlMGg5PuT4f_TwL066-ie0CtamavL-0to8MWa0fRVUNQtHMhgDS73qi80jp0AAT6yZ-n4C5d8uS6CtY_OZLoHcn-DvF/s1600/my-pic-widget.jpg'/></div><div class='my-data'><span class='my-name'>M. Taufiq Nur</span> <span class='my-job'>Author</span></div></div><div class='my-words'>Saya adalah seorang Mahasiswa yang sangat menyukai dunia blogger. Bila ingin mengenal lebih jauh, silahkan follow akun sosial media saya.</div><div class='social-icon'><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-facebook'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-twitter'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-dribbble'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-google-plus'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-instagram'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-linkedin'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-flickr'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-pinterest'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-vimeo-square'/></a></div></div>

Keterangan :

• Ganti M. Taufiq Nur dengan nama sobat,
• Ganti Author dengan profesi atau status sobat,
• Ganti Saya adalah seorang Mahasiswa yang sangat menyukai dunia blogger. Bila ingin mengenal lebih jauh, silahkan follow akun sosial media saya. Sesuai dengan keinginan sobat,
• Ganti semua url http://wajahilmu.blogspot.com/ denga alamat akun sosial media sobat. Pastikan agar sesuai dengan icon yang ada.
• Untuk mengganti foto, silahkan ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZpgswxoDviirkYsvyiE9Ye0U_ec14lnIK8riWocmnnkXsCVBn7wlMGg5PuT4f_TwL066-ie0CtamavL-0to8MWa0fRVUNQtHMhgDS73qi80jp0AAT6yZ-n4C5d8uS6CtY_OZLoHcn-DvF/s1600/my-pic-widget.jpg dengan link foto sobat.

Baca juga : Cara Memasang Widget Recent Post Keren Pada Blog

3. Terakhir, seperti biasa klik save dan lihat hasilnya.

Demo

Bila ada pertanyaan terkait widget ini, silahkan tuliskan pada kolom komentar dibawah. Terima Kasih.

Bagikan Artikel ini