Cara Memasang Widget Profil Di blog yang keren

Ok Sudah lama nih gue nggak ngepost lagi , Dikerenakan Lagi sibuk Cari Cewek :v .. Kali Ini gue mau Berikan Ilmu Tentang Cara Memasang Widget Profil Di blog yang keren Ok langsung aja Ke tutorialnya

Tutorialnya :

1.Login Ke Blog Kalian
2.Setelah Masuk ke halaman Dashboard , Klik Tata letak di Bagian Bawah Kiri

3.Setelah Masuk Ke halaman widget Klik Tambahkan Gadget Seperti Gambar Dibawah

4.Kemudian Pilih HTML/JAVA Dan masukkan kode dibawah ini

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}

<div class="widget widget-about">
<div class="head-bg" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTsuo4-uGJSsTdu8ZKw1ppMaDn4ViqZrwmMtjdnf6148YAkd4iLWDie1SYKvHCp_DD4Dy3hYo-ckEbh2y_Cp4F4XLOh07GUlh-Ei-UM6EQ0uB3MkkNq1_0NLksZHN1PIVhS8y-W6AycRS6/s1600/about-block-bg2.jpg);">
<div class="my-pic">
<img alt="Prof.Zonk" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJPII-FDuj6a59u07ygXjhAey9iM9saiXHeIdrzL47omma82h0wcJAUOdiY7pEebXoJfx1HurwEewXpYUwR3nSgZrspKuBIPoZyBJKrnARsN4MmGjAH4lLTFdpRE19_1AMIrchhgIK17iX/s113/DSC08064.JPG" /></div>
<div class="my-data">
<span class="my-name">Prof.Zonk</span> <span class="my-job">Author</span></div>
</div>
<div class="my-words">
Hallo Welcome To Hacking Cyber Team Disini Menyediakan Pengetahuan Tentang Teknologi</div>
<div class="social-icon">
<a href="https://www.facebook.com/rusman.tobyaktasiregar"><i class="fa fa-facebook"></i></a><a href="https://twitter.com/profzonk1"><i class="fa fa-twitter"></i></a><a href="https://plus.google.com/100803330562847954813?hl=id"><i class="fa fa-google-plus"></i></a><a href="https://www.instagram.com/rusman_toby/?hl=id"><i class="fa fa-instagram"></i></a><a href="https://www.pinterest.com/profzonk/"><i class="fa fa-pinterest"></i></a></div>
</div>
<div class="TnITTtw-translate-selection-button" style="left: 330.5px; top: 1121px;">
</div>