Widget Kotak About Me - Profil Author Blogger di Sidebar

Widget Kotak About Me - Profil Author Blogger di Sidebar.

ABOUT ME (Tentang Saya) adalah widget bawaan blogger yang berisi profil Google Plus admin atau author blog. Tampilannya standar bahkan bissa dibilang kurang menarik.

Berikut ini kotak profil admin blogger hasil modifikasi untuk dipasang di sidebar. Cara pasangnya mudah, yaitu tambahkan widget (Add a Gadget) dan pilih HTML/Javascript, lalu (copas) masukkan kode di bawah ini. Pastikan di template Anda ada link ke Font Awsome.

 

KODE:

<style>
.aboutme-img{position:relative;max-height:150px;overflow:hidden}
.aboutme-img img {max-width:100%;width:100%;}
.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:hover{background:#bbb;}
.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}
.extender .aboutme-icon:hover a,.extender .aboutme-icon a:hover{color:#fff;}
.aboutme-info{margin-top:20px;font-size:13px}
.aboutme-info p {margin: 10px;text-align: center;}
.aboutme-info h4 {margin: 10px;font-size: 16px;text-transform: uppercase;color: #888;font-weight: 700;text-align: center;font-family:Tahoma}
</style>
<div style='margin-bottom: 15px;padding: 0;overflow: hidden;background: #f1f1f1;'>
<div class='aboutme-img'>
<img alt='Author' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhywJxInmyL9BdVKgqQ6xW2W-EzRqNktNGt4uW3YYHHWZngdOMN7Hkt3bazKQ_a8kkWnR2OLFqlLWnPmi2piFJ5Zc9rkwkMkC1EokMp4PLSeVgJ5DJMFVzK4l1USnXiRN7ewDOstgt39UiE/s300-Ic42/beautiful-young-muslim-woman.jpg' title='Author' width='300'/>
</div>

<div class='aboutme-info'>
<h4>The Blogger</h4>
<p>Hello, I'm Blogger!</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='Instagram'><i class='fa fa-instagram'/></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>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Youtube Channel'><i class='fa fa-youtube'/></i></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Linkedin'><i class='fa fa-linkedin'/></i></a></li>
</ul>
</div>
</div>

PASANG LINK 
Link ke Font Awesome. Simpan di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

Demikian cara memasang Widget Kotak About Me - Profil Author Blogger di Sidebar. (http://bloggerbandungnih.blogspot.com).*