Cara Membuat Biodata Penulis Dengan CSS Efek Hover
Kali ini saya akan memposting cara Membuat Biodata Penulis Dengan CSS Efek Hover
Cara memasangnya gampang banget tinggal menambahkan gatget saja di sidebar atau footer blog. Berikut ini adalah caranya membuat biodata penulis dengan CSS efek hover.
Cara Membuat Biodata Penulis Dengan CSS Efek Hover :
Cara memasangnya gampang banget tinggal menambahkan gatget saja di sidebar atau footer blog. Berikut ini adalah caranya membuat biodata penulis dengan CSS efek hover.
Cara Membuat Biodata Penulis Dengan CSS Efek Hover :
- Seperti biasa sobat harus Login dulu di akun blog sobat
- Pilih Tata Letak
- Tambah Gadget HTML/Java Script
- Copy dan paste kode di bawah ini
<style>
.BSprofileBorder {
margin:0 auto;
padding:5px;
width:290px;
border-radius:5px;
border: 5px #009999 solid;
min-height:70px;
}.BSprofileBorder1 {
margin:5px auto;
padding:5px;
width:auto;
border-radius:5px;
border: 5px #80C8FE solid;
min-height:70px;
}#BSprofile{
border:2px solid #888;
margin:2px 5px 0px 5px;
padding:2px;
}
#BSprofile:hover {
border:2px solid #ccc;
cursor:pointer;
}
.BSprofileopacity {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455, M12=-0.08715574274765817,
M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.BSprofileopacity:hover {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1,
sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
<div>
<div>
<img id="BSprofile" height='50' src="YOUR_IMAGE_OR_PICTURE" width='50' align="left"/>
I'm <a rel="me" href=https://plus.google.com/u/0/GOOGLE_PLUS_ID/ title="YOUR NAME" target="_blank">
YOUR NAME </a> YOUR OTHER INFORMATION </span> >>> <a style="color:#888;" href="ABOUT_ME" target="_blank">Read More »</a> </div> </div>
Ganti tulisan yang berwarna merah seperti rincian dibawah ini:
YOUR_IMAGE_OR_PICTURE - Ganti dengan URL photo profile yang mau sobat pakai.
GOOGLE_PLUS_ID - Ganti dengan 21 digit ID Google+ sobat.
ABOUT_ME - Ganti dengan URL halaman 'About Me' yang sobat punya.
YOUR_NAME - Ganti dengan nama yang mau sobat pakai.
YOUR OTHER INFORMATION - Ganti dengan informasi apapun mengenai diri sobat, seperti negara/lokasi, judul (ex. Admin, Penulis, dll) atau basic informasi lainnya tentang diri sobat.
YOUR_IMAGE_OR_PICTURE - Ganti dengan URL photo profile yang mau sobat pakai.
GOOGLE_PLUS_ID - Ganti dengan 21 digit ID Google+ sobat.
ABOUT_ME - Ganti dengan URL halaman 'About Me' yang sobat punya.
YOUR_NAME - Ganti dengan nama yang mau sobat pakai.
YOUR OTHER INFORMATION - Ganti dengan informasi apapun mengenai diri sobat, seperti negara/lokasi, judul (ex. Admin, Penulis, dll) atau basic informasi lainnya tentang diri sobat.
0 Response to "Cara Membuat Biodata Penulis Dengan CSS Efek Hover"
Posting Komentar