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 memperlihatkan sedikit preview perihal diri sendiri sangat cocok memakai widget ini. Biasanya pihak blogger telah menyediakan widget ini, namun tampilannya sanggup dibilang kurang menarik. Jadi, kali ini saya akan share widget profil lengkap dengan akun sosial media yang sanggup diklik oleh pengunjung/visitors kalau 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, kemudian pilih Template > Edit HTML. Silahkan cari instruksi </head> . Bila sudah ketemu, silahkan copy CSS dibawah sempurna di atas instruksi tersebut, kemudian 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, kemudian 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/AVvXsEhnkCCoY6msp98l0pWg0mqHd0hpNAePU-trIPwjP61Rm1xeJl5clhLyHEjta1Efg86cOH0DXhXHJ_eFKhA-WfoeW9hCsdILqkB-7F6o2a_xfM_2ZYKzTyvvW3PKSLMPDVy0_X2UDg09de_n/s1600/about-block-bg2.jpg)'><div class='my-pic'><img alt='M. Taufiq Nur' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTz5gqg5NRVYkCGkQm0nT6Le6FQ-ell6pTN8ANn_pktI8Az5xj7UL4recDQSy4L1PYTr0GQCKx4VdnP_tY7GZdXfxIFrE5-63_o_JzljVXjIBUsy4XvFExS8G2SL2a0yoenoR-x2_7lfU_/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 yaitu 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='https://rodamotiv.blogspot.com/'><i class='fa fa-facebook'/></a><a href='https://rodamotiv.blogspot.com/'><i class='fa fa-twitter'/></a><a href='https://rodamotiv.blogspot.com/'><i class='fa fa-dribbble'/></a><a href='https://rodamotiv.blogspot.com/'><i class='fa fa-google-plus'/></a><a href='https://rodamotiv.blogspot.com/'><i class='fa fa-instagram'/></a><a href='https://rodamotiv.blogspot.com/'><i class='fa fa-linkedin'/></a><a href='https://rodamotiv.blogspot.com/'><i class='fa fa-flickr'/></a><a href='https://rodamotiv.blogspot.com/'><i class='fa fa-pinterest'/></a><a href='https://rodamotiv.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 yaitu seorang Mahasiswa yang sangat menyukai dunia blogger. Bila ingin mengenal lebih jauh, silahkan follow akun sosial media saya. Sesuai dengan harapan sobat,
• Ganti semua url https://rodamotiv.blogspot.com/ denga alamat akun sosial media sobat. Pastikan biar sesuai dengan icon yang ada.
• Untuk mengganti foto, silahkan ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTz5gqg5NRVYkCGkQm0nT6Le6FQ-ell6pTN8ANn_pktI8Az5xj7UL4recDQSy4L1PYTr0GQCKx4VdnP_tY7GZdXfxIFrE5-63_o_JzljVXjIBUsy4XvFExS8G2SL2a0yoenoR-x2_7lfU_/s1600/my-pic-widget.jpg dengan link foto sobat.

Baca juga : Cara Memasang Widget Recent Post Keren Pada Blog

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

Demo

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