- Home >
- BERBAGAI CARA , CHEAT >
- Cara Membuat Biodata Di Blog Menggunakan CSS / HTML
Cara Membuat Widgate Biodata Penulis Dengan CSS Efek Hover
Salam Bertemu Kembali Sobat Blogger semua Di mana pun Anda Berada.
Di kesempatan Kali ini saya ingin berbagi Cara membuat Widgate Blogger
Cara Membuat Biodata Penulis Dengan CSS Efek Hover Di Blog Anda.
Dimana Widgate ini akan Tampil di Postingan Blog Anda Secara Otomatis
Biodata Ini Akan Tampil Otomatis Di Bawah Setiap Postingan Sobat,Maksud nya Widgate
Ini Menerangkan Data Penulis Berikut Keterngan nya dan ada Link Tertaut di dalam
Oke Sobat Langsung Saja ke Topik Cara Membuat Biodata Penulis Di Blog
Ini Code Html/CSS Berikut di Bawah ini Copas Klik Scrol :
<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;
-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>
.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;
-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>
Cara Memasang nya :
Login Ke Blog Anda
Pilih Dasboard,Lalu pilih Layout/Tata letak
Lalu di Halaman Layout Anda Pilih Tambah kan Gidgate
Lalu ada Pilihan Menu,Pilih saja Menu Html/Javascrip
Masukan Code Html di atas tepat nya di Mode Html nya,
Dengan Catatan Code Tsb sudah di edit manual URL Photo,
Dan Keterangan Anda, atau tentang Pandangan Anda
Setelah Di rasa sudah Pas semua Save Widgate Tsb,
Lalu Tempat kan Widgate Tsb tepat di Bawah Post Halaman Sobat
Di Mode halaman Layout,Kemudian Save/Simpan Perubahan.Selsai
Keterngan :
Ganti Teks yang Bertuliskan= YOUR_IMAGE_OR_PICTURE dengan Alamat URL Photo Anda
Dan Ganti juga tek Url=https://plus.google.com/u/0/GOOGLE_PLUS_ID/ ,Dengan Url
Goggle Plus Anda, Lalu Teks yang Bertulis kan= “YOUR NAME” GantiDengan Nama
Account Goggle Anda, Lalu YOUR NAMA Yang ke2 Ganti Dengan Nama Blog Anda
Dan Teks Yang Bertulis kan “YOUR OTHER INFORMATION” Ganti Dengan
Informasi apapun mengenai diri Anda,Seperti Perusaha,an Lokasi,Group atau Admin,
Penulis, organisasi Lembaga Sosial Pekerja,an dll basic informasi lainnya tentang diri sobat.
Semoga Artikel ini Mudah di Pahami Anda Semua Selamat Mencoba,smoga Berhasil.
Salam Sukses Dari :҉----=[۞|GҎ®$|Ω]=---҉
Posting Komentar