Modifikasi Widget Profil Blogger Menyerupai 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 saat kita login ke akun Google kita.

Di pojok kanan atas akan tampak sebuah photo kita yang kecil dan bundar 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 ibarat mirip itu dengan photo kecil bundar 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 ibarat gambar di bawah ini.

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

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

DEMO JSFIDDLE | DEMO ON BLOG (FIXED)

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 isyarat HTML silahkan simpan di atas isyarat </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="Modifikasi Widget Profil Blogger Seperti Profil Google"/>
 </div>
 
 <div id='profilbox'>
 <a href='https://plus.google.com/117950600521728942551' target="_blank" title="Modifikasi Widget Profil Blogger Seperti Profil Google"><img alt='My Photo' class='profile-img' height='80' src='//lh3.googleusercontent.com/-Q55pKJrgnXs/AAAAAAAAAAI/AAAAAAAAc8U/IiDZVTHio94/s80-c/photo.jpg' width='80' title="Modifikasi Widget Profil Blogger Seperti Profil Google"/></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="Modifikasi Widget Profil Blogger Seperti Profil Google">
 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="Modifikasi Widget Profil Blogger Seperti Profil Google">View my profile</a>
     <input type="button" class='closeprofil' onclick="document.getElementById('profilbox').style.right='-300px';" value='&#215;' title="Modifikasi Widget Profil Blogger Seperti Profil Google" />
 </div>

Silahkan ganti semua URL profil-nya dengan URL profil G+ Anda dan ganti URL photo-nya dengan URL photo profil G+ Anda. Gunakan isyarat 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 saat disimpan di blog, posisinya dapat berubah alasannya template tiap-tiap blog berbeda-beda. Jika posisinya terlalu ke atas atau ke bawah, silahkan atur angkanya pada isyarat top untuk .profil-photo dan #profilbox

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

Sumber https://www.kompiajaib.com/

Share this post