Profile box ala google+

Kode profil box ala google+  ini sebetulnya saya dapat dari salah satu blognya mas +Adhy Suryadi  (KompiJuga).
waktu itu saya membaca postingan Template Default Blogger Juga Bisa Valid HTML5 Dan CSS3 di KOMPI AJAIB.
kemudian saya klik link demonya yang menuju blog KompiJuga,ternyata ada yang membuat saya tertarik dan penasaran.
keren euy....., photo profile mas Adhy nongkrong di pojok kanan atas (header).

Dari rasa penasaran itulah saya curi kodenya dan coba untuk menerapkanya di blog saya,Alhamdulillah....berhasil.
Setelah saya curi kode dan berhasil menerapkanya di blog,saya baru minta ijin sama mas adhy....hihihihi
dan setelah mas adhy mengijinkan,kemudian saya minta ijin lagi untuk saya jadikan posting dan membagikannya pada teman-teman semua yang mungkin tertarik untuk memasangnya juga.
Mas Adhy Suryadi memang baik deh akhh.......

Oklik,langsung saja pada pointnya.
Cara membuat atau memasang Profile box ala google+

1. copy kode CSS dibawah ini dan letakkan diatas ]]></b:skin> atau </style>

.profil-photo{
background-size: 32px 32px;
border-radius: 50%;
display: block;
height: 32px;
width: 32px;
position:fixed;
top:21px;
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:75px;
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:fixed;
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
}

2. copy kode HTML dibawah ini letakkan diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<div class='profil-photo' onclick='document.getElementById(&#39;profilbox&#39;).style.right=&#39;15px&#39;;'>
<img alt='Foto Saya' class='profile-img' height='32' src='//lh5.googleusercontent.com/-0yiyJVtzIeQ/AAAAAAAAAAI/AAAAAAAAAAA/9Oz5AdyyJ3U/s32-c/photo.jpg' title='Click me!' width='32'/>
</div>
<div id='profilbox'>
<a href='https://plus.google.com/109528017642941098159' target='_blank' title='My Profil'><img alt='My Photo' class='profile-img' height='80' src='//lh5.googleusercontent.com/-0yiyJVtzIeQ/AAAAAAAAAAI/AAAAAAAAAAA/9Oz5AdyyJ3U/s80-c/photo.jpg' title='My Profil' width='80'/></a>
<div class='profile-datablock'>
<div class='profile-data'>
<a class='profile-name-link g-profile' href='https://plus.google.com/109528017642941098159' rel='author' style='background-image: url(//www.google.com/images/icons/ui/gprofile_button-16.png);' target='_blank' title='Reo Adam'>
Reo Adam
</a>
<br/>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='https://plus.google.com/109528017642941098159'></div>
</div>
</div>
<a class='profile-link' href='https://plus.google.com/109528017642941098159' rel='author' target='_blank' title='View my profile'>View my profile</a>
<input class='closeprofil' onclick='document.getElementById(&#39;profilbox&#39;).style.right=&#39;-300px&#39;;' title='Close this' type='button' value='×'/>
</div>

Keterangan :
1. Untuk kesesuain letak pada blog anda,silahkan atur pada kode CSS nya menurut selara anda.

2. pada //lh5.googleusercontent.com/-0yiyJVtzIeQ/AAAAAAAAAAI/AAAAAAAAAAA/9Oz5AdyyJ3U/s32-c/photo.jpg ganti dengan URL profile image google+ anda.
Caranya : buka profile g+ anda,arahkan mouse pada photo profile klik kanan pilih copy image url.

Pada //lh5.googleusercontent.com/-0yiyJVtzIeQ/AAAAAAAAAAI/AAAAAAAAAAA/9Oz5AdyyJ3U/s80-c/photo.jpg masih URL profile image google+ anda juga,cuma bedanya pada angka s32 anda harus merubahnya menjadi s80 .

pada 109528017642941098159 ganti dengan ID profile google+ anda.

pada Reo Adam  ganti dengan nama profile anda.

Silahkan di coba,semoga bermafaat.