Modifikasi Widget Profil Blogger Seperti Profil Google

Modifikasi Widget Profil Blogger Seperti Profil Google

Bola Hero Gawai

Modifikasi Widget Profil Blogger Seperti Profil Google

Modifikasi Widget Profil Blogger
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.

Profil Blogger

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

Widget Profil Google

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.

Modifikasi Widget Profil Blogger Seperti Profil Google


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='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>

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×