Welcome in my blog!

Tutorial 

Menambahkan widget sederhana kontak saya 

1. Masuk ke akun blog kamu
2. Pilih tata letak, tambahkan widget Javascript
3. Pastekan kode berikut 

<div class="widget-content">

<div class="sidebar_about_author">

<div class="inner_wrapper">

<div class="aboutme-img">

<img alt="Author" class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUgsJo7RhsQhFYXU7ltVKDw01eaWJ0UlCQM0QVFwPpEUijMRgG9nOUZOm9W1gWD3Jqmu4LtEDt1AYgmgmn9qhgMNccn-rVgtblbvFPcUYBMS8OAvygIz989ojvwduRqqT44PqNxPELSQwW/s360-c-h257/048.jpg" title="Author" width="300">

</div>

</div>

<div class="aboutme-info">

<h4>Author Name</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>

</div>

<div class="aboutme-wrpicon">

<ul class="extender">

<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>

<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li>

<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="GitHub"><i class="fa fa-github"></i></a></li>

<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></i></a></li>

<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="Pinterest"><i class="fa fa-pinterest-p"></i></a></li>

</ul>

</div>

</div>

<style>

.aboutme-img {

    position: relative;

    max-height: 150px;

    overflow: hidden;

}

.aboutme-img img {

    max-width: 100%;

    width: 100%;

}

.aboutme-info {

    margin-top: 20px;

    font-size: 13px;

}

.aboutme-info h4 {

    margin-bottom: 10px;

    font-size: 16px;

    text-transform: uppercase;

    color: #888;

    font-weight: 700;

}

.aboutme-info p {

    margin: 5px 0;

}

.aboutme-wrpicon {

    display: block;

    margin: 15px auto 10px auto;

    position: relative;

}

.aboutme-wrpicon .extender {

    width: 100%;

    display: block;

}

.extender {

    text-align: center;

    font-size: 16px;

}

.extender .aboutme-icon {

    background: rgba(0,0,0,.06);

    display: inline-block;

    border: 0;

    margin: 0;

    padding: 0;

    border-radius: 3px;

}

.extender .aboutme-icon a {

    display: inline-block;

    font-family: fontawesome;

    font-weight: 400;

    color: #aaa;

    height: 32px;

    width: 32px;

    line-height: 32px;

    border-radius: 3px;

}

</style>

</div> {codeBox}

Berikut hasilnya  {alertSuccess} Klik