Blogger Profil

by kompiajaib

HTML

<script src="https://apis.google.com/js/plusone.js"></script>
<div class='profil-photo' onclick="document.getElementById('profilbox').style.right='15px';">
<img alt='Foto Saya' class='profile-img' height='32' src='//lh3.googleusercontent.com/-Q55pKJrgnXs/AAAAAAAAAAI/AAAAAAAAc8U/IiDZVTHio94/s32-c/photo.jpg' width='32' title="Click me!"/>
</div>

<div id='profilbox'>
<a href='https://plus.google.com/117950600521728942551' target="_blank" title="My Profil"><img alt='My Photo' class='profile-img' height='80' src='//lh3.googleusercontent.com/-Q55pKJrgnXs/AAAAAAAAAAI/AAAAAAAAc8U/IiDZVTHio94/s80-c/photo.jpg' width='80' title="My Profil"/></a>
<div class='profile-datablock'>
<div class='profile-data'>
<a class='profile-name-link g-profile' href='https://plus.google.com/117950600521728942551' rel='author' style='background-image: url(//www.google.com/images/icons/ui/gprofile_button-16.png);' target="_blank" title="Adhy Suryadi">
Adhy Suryadi
</a>
<br/>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='https://plus.google.com/117950600521728942551'></div>
</div>
</div>
<a class='profile-link' href='https://plus.google.com/117950600521728942551' rel='author' target="_blank" title="View my profile">View my profile</a>
    <input type="button" class='closeprofil' onclick="document.getElementById('profilbox').style.right='-300px';" value='&#215;' title="Close this" />
</div>

CSS

.profil-photo{
background-size: 32px 32px;
border-radius: 50%;
display: block;
height: 32px;
width: 32px;
position:fixed;
top:15px;
right:25px;
z-index:10000;
}
.profil-photo img{
border-radius: 50%;
}
.profile-img {
float : left;
margin : 0 15px 0 0;
}
.profile-data {
margin : 0;
}
.profile-datablock {
margin : 0 0 20px;
}
.profile-name-link {
background : left top no-repeat;
display : inline-block;
min-height : 20px;
padding-left : 20px;
}
.profile-textblock {
margin : 0.5em 0;
}

#profilbox{
background:#fff;
border:1px solid #ccc;
color:#333;
font-size:14px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
line-height:1.2em;
top:60px;
right:-300px;
padding:15px;
position:fixed;
width:250px;
height:80px;
box-shadow: 0 2px 10px rgba(0,0,0,.2);
z-index:10000;
}
#profilbox:before{
content:"";
width:0;
height:0;
position:absolute;
top:-22px;
right:14px;
border:11px solid transparent;
border-color:transparent transparent #ccc;
}
#profilbox:after{
content:"";
width:0;
height:0;
position:absolute;
top:-19px;
right:15px;
border:10px solid transparent;
border-color: transparent transparent #fff;
}
.closeprofil{
background:none;
border:none;
position:absolute;
top:0px;
right:0px;
cursor:pointer;
font-size:18px;
font-weight:700;
color:#888;
}
.closeprofil:focus{
outline:none
}