Membuat Profil Blogger keren Seperti Google+
Membuat Profil Blogger keren Seperti Google+ - Widget yang saya maksud adalah sebuah Widget yang menampilkan Foto Profil Google+, Memudahkan seseorang
untuk Melingkari Akun anda atau menjadi teman anda, dan juga
menampilkan jumlah lingkaran yang anda miliki saat ini. Selain itu google plus merupakan sarana jaringan yang dapat
menghubungkan anda dengan beberapa orang untuk mendapatkan info
perkembangan terbaru mengenai apa saja yang anda butuhkan sehingga optimasi blog dapat meningkatkan trafik pengunjung.
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.
Cara memasang widget profile ala google+ supaya tampil di blogger ini cukup gampang hanya Dengan menambahkan sedikit custom style CSS dan HTML maka widget Google+ pun siap terpasang dan mempercantik blog, penasaran dengan hasilnya? Lihat tanda panah pada tampilan screenshoot dibawah ini:
Cara Membuatnya
1. Masuk ke akun blogger anda
2. Pilih menu Template dan pilih Edit HTML
3. Masukkan CSS berikut tepat diatas kode ]]></b:skin> atau </style>
5.Masukkan kode dibawah ini dibawah kode <body>
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
Mudah-mudahan bermanfaat, Terima kasih.
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.
Cara memasang widget profile ala google+ supaya tampil di blogger ini cukup gampang hanya Dengan menambahkan sedikit custom style CSS dan HTML maka widget Google+ pun siap terpasang dan mempercantik blog, penasaran dengan hasilnya? Lihat tanda panah pada tampilan screenshoot dibawah ini:
1. Masuk ke akun blogger anda
2. Pilih menu Template dan pilih Edit HTML
3. Masukkan CSS berikut tepat diatas kode ]]></b:skin> atau </style>
.profil-photo{background-size: 32px 32px;4.Cari kode <body> (Gunakan CTRL+F untuk memudahkan)
border-radius: 50%;
display: block;
height: 32px;
width: 17px;
position:fixed;
top:70px;
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:#000;
border:1px solid #ccc;
color:#333;
font-size:14px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
line-height:1.2em;
top:120px;
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:-25px;
right:1px;
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:#fff;
}
.closeprofil:focus{
outline:none
}
5.Masukkan kode dibawah ini dibawah kode <body>
<div class='profil-photo' onclick="document.getElementById('profilbox').style.right='15px';">Pada Kode HTML di atas yang saya tandai dengan warna merah, silahkan sesuaikan dengan URL google+ milik kamu, begitu juga dengan URL foto/image kamu yang akan di pakai.
<img alt='Foto Saya' class='profile-img' height='32' src='//lh5.googleusercontent.com/-rIuzkqojuDs/AAAAAAAAAAI/AAAAAAAAAAA/bkKQx4Gd6n4/s32-c/photo.jpg' width='32' title="Click me!"/>
</div>
<div id='profilbox'>
<a href='https://plus.google.com/108553163793892045847' target="_blank" title="My Profil"><img alt='My Photo' class='profile-img' height='80' src='//lh5.googleusercontent.com/-rIuzkqojuDs/AAAAAAAAAAI/AAAAAAAAAAA/bkKQx4Gd6n4/s96-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/108553163793892045847' rel='author' style='background-image: url(//www.google.com/images/icons/ui/gprofile_button-16.png);' target="_blank" title="Mr Tepu">
Mr Tepu
</a>
<br/>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='https://plus.google.com/108553163793892045847'></div>
</div>
</div>
<a class='profile-link' href='https://plus.google.com/108553163793892045847' 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='×' 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
Mudah-mudahan bermanfaat, Terima kasih.
Comments
Post a Comment