Membuat Biodata Penulis Di Blog

Unknown

Accessories Blogger

Jumat, 15 Maret 2013

2 Komentar

                  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
Lihat Contoh Tampilan nya Seperti Gambar Di Bawah ini :

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 &#187;</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" Ganti Dengan 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 : Karrysta™

---

---

                     Karrysta™ Pro Music Berbagi Informasi,Inspirasi Dan Pengetahuan

---

---