Membuat Biodata Penulis Di Blog

16 Mar

                  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 »</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



Iklan

2 Tanggapan to “Membuat Biodata Penulis Di Blog”

  1. wconen 16 Maret 2013 pada 09:42 #

    Wah bagi pemula seperti saya sangat bermanfaat. Makasi mas… Kalo ada maktu kunjung balik ya.

  2. Karrysta™ 17 Maret 2013 pada 04:28 #

    Oke Mas Sama-sama salam sukses…

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: