Modifikasi Widget Profil Blogger Seperti Profil Google

Kali ini saya akan share cara memodifikasi widget profil Blogger atau widget About Me yang biasanya disimpan di sidebar blog. Modifikasi ini terinspirasi dari profil Google yang berada di pojok kanan atas ketika kita login ke akun Google kita.

Di pojok kanan atas akan tampak sebuah photo kita yang kecil dan bulat yang apabila di klik akan keluar sebuah kotak yang berisi profil kita dan tombol untuk sign out dari akun Google. Nah kali ini kita akan memodifikasi profil Blogger yang mirip seperti itu dengan photo kecil bulat di pojok kanan atas yang apabila diklik akan keluar sebuah kotak yang berisi profil Blogger kita.

Biasanya widget profil Blogger atau widget About Me tampak seperti gambar di bawah ini.

Dan profil Google yang saya maksud tampak seperti gambar gif di bawah ini.

Dan modifikasi widget profil Blogger-nya tampak seperti gambar di bawah ini. Untuk demonya silahkan lihat pada link di bawahnya, dan untuk demo yang di blog saya menggunakan position: fixed agar sesuai dengan navbar-nya.

Bagi tertarik untuk mencobanya, silahkan copy kode-kodenya di bawah ini.

Kode 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
}

Kode HTML

Untuk kode HTML silahkan simpan di atas kode </body>

<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='http://ift.tt/1AMDU3A' 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='http://ift.tt/1AMDU3A' 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='http://ift.tt/1AMDU3A'></div>
</div>
</div>
<a class='profile-link' href='http://ift.tt/1AMDU3A' 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>

Silahkan ganti semua URL profil-nya dengan URL profil G+ Anda dan ganti URL photo-nya dengan URL photo profil G+ Anda. Gunakan kode pada URL photonya dengan s32-c untuk photo kecilnya dan s80-c untuk photo profil di dalam kotak (perhatikan URL photonya di atas).

Kadang-kadang ketika disimpan di blog, posisinya bisa berubah karena template tiap-tiap blog berbeda-beda. Jika posisinya terlalu ke atas atau ke bawah, silahkan atur angkanya pada kode top untuk .profil-photo dan #profilbox

Dan jika ingin melayang silahkan ganti position:absolute menjadi position:fixed pada kode .profil-photo dan #profilbox

from profil - Penelusuran Blog Google http://ift.tt/1AMDU3D

via IFTTT