pesona jati: CARA PASANG PROFILE DI BLOG DENGAN PHOTO SENDIRI

Cara memasang profile dibong dengan photo sendiri sebenarnya selain memperindah tampilan blog,juga sebagai tanda pengenal dirikita kepada pengunjung blog kita,,,karena disertai photo dan akun facebook,G+,dan twitter akan memudahkan orang lain mengenal kita serta memudahkan untuk saling berintraksi antara pemilik blog dan pengunjung,
karena menggunakan cara memasang profil diblog ini menggunakan photo sendiri,maka anda wajib mengupload photo anda terlebih dahulu,terserah lewat mana phothobucket,G+ atau lewat blog anda,,,,lalu copy alamat url nya dan simpan dulu,,,
ok kita olah dulu kejadian perkaranya agar lebih jelas

1.login keblog anda klik "disini"
2.Masuk pada desain pada kanan atas
3.Pilih tata letak
4.Klik tambahkan gegget>>tambahkan HTML/java script
5.Copy paste code dibawah ini kekotak yang disediakan

<style>

#aboutme {

background-color:#00ffff;

-moz-box-shadow:0 0 15px #e0e0e0;

-webkit-box-shadow:0 0 15px #e0e0e0;

box-shadow:0 0 3px #e0e0e0;

border:1px solid #0000ff;

padding:3px;

-moz-border-radius:2px;

-webkit-border-radius:2px;

border-radius:2px;

margin:0 auto;

margin-top:15px;

padding:10px;

width:370px;

height:150px;

}

.name-author {

margin:0 0 7px;

display:block;

width:100%;

}

.name-author h3 {

position:relative;

display:inline;

background-color:#0097BD;

color:#FFF;

font-family:Segoe UI;

font-size:15px;

font-weight:bold;

margin:0 0 0 -3px;

padding:3px 10px 3px 15px;

width:100%;

-moz-text-shadow:0 1px 0 black;

-webkit-text-shadow:0 1px 0 black;

text-shadow:0 1px 0 black;

}

.name-author h3:after {

content:" ";

width:0;

height:0;

position:absolute;

left:100%;

top:0;

border-width:13px;

border-style:solid;

border-color:transparent transparent transparent #0097BD;

}

@-webkit-keyframes name-author {

0% {color:white}

20% {color:Orange}

40% {color:pink}

60% {color:Orchid}

80% {color:gold}

100% {color:white}

}

@-moz-keyframes name-author {

0% {color:white}

20% {color:Orange}

40% {color:pink}

60% {color:Orchid}

80% {color:gold}

100% {color:white}

}

@-keyframes name-author {

0% {color:white}

20% {color:Orange}

40% {color:pink}

60% {color:Orchid}

80% {color:gold}

100% {color:white}

}

/* Penerapan efek pada element yang akan diberi efek*/

.name-author h3 {

/* Waktu 10 detik */

animation:10s infinite name-author linear;

-webkit-animation:10s infinite name-author linear;

}

.aboutme-text {

font-size:12px;

text-align:left;

margin:0;

}

.aboutme-image-container {

float:left;

width:70px;

height:70px;

margin-right:75px;

z-index:1;

}

.aboutme-image-container {

margin:-20px 0 5px 0;

padding:9px;

position:relative;

-webkit-border-bottom-right-radius:10px;

-webkit-border-bottom-left-radius:100%;

-moz-border-radius-bottomright:100%;

-moz-border-radius-bottomleft:100%;

border-bottom-right-radius:100%;

border-bottom-left-radius:100%;

-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

-moz-box-shadow:inset 0 0 40px rgba(0,0,0,0.3),0px 1px 5px #666;

box-shadow:inset 0 0 40px rgba(0,0,0,0.3),0px 1px 5px #666;

background-color:#00ff00;

}

.aboutme-image-container:before {

content:' ';

position:absolute;

top:0;

left:-10px;

width:0;

height:0;

border-style:solid;

border-width:0 0 10px 10px;

border-color:transparent transparent #333 transparent;

}

.aboutme-image-container:after {

content:' ';

position:absolute;

top:0;

right:-10px;

width:0;

height:0;

border-style:solid;

border-width:10px 0 0 10px;

border-color:transparent transparent transparent #333;

}

.aboutme-image-container img {

width:100%;

height:100%;

border:2px solid yellow;

border-radius:100%;

-webkit-transition:all 0.3s ease;

-moz-transition:all 0.3s ease;

transition:all 0.3s ease;

-moz-box-shadow:1px 1px 4px #000;

-webkit-box-shadow:1px 1px 4px #000;

box-shadow:1px 1px 4px #000;

}

.aboutme-image-container img:hover {

border:2px solid GOld;

cursor:pointer;

margin-left:0;

-moz-transform:scale(1.2) rotate(360deg);

-webkit-transform:scale(1.2) rotate(360deg);

-o-transform:scale(1.2) rotate(360deg);

-ms-transform:scale(1) rotate(-360deg);

transform:scale(1.2) rotate(360deg);

-moz-box-shadow:1px 1px 4px #000;

-webkit-box-shadow:1px 1px 4px #000;

box-shadow:1px 1px 4px #000;

}

</style><div id='aboutme'>

</div>

<h3>Rasyidan Ahnaf</h3></div>

<a href="http://pesona-jati.blogspot.com/" style="color: #666;">...Bergaya hidup indah dengan hasil karya demi terwujutnya rumah idaman memberikan kepuasan kebutuhan furnituture rumah anda</a><small><span style='float:right;font:italic 15px Arial, Sans-Serif;'><a href='https://plus.google.com/+rasyidanahnafPJ/posts/' target='_blank'>***View My Profile ***</a></span></small>

<td>

<td>

<td>

keterangan code html
# ganti warna *merah* dengan alamat url photo anda
# ganti warna *biru* dengan alamat blogger anda
# ganti warna *pink* dengan dekripsi tentang anda atau blog anda
# ganti warna *putih*dengan url alat facebook anda
# ganti warna *coklat* dengan alamat url G+ anda
# ganti warna *kuning* dengan url alamat twitter anda

6.Save atau simpan dan lihat hasilnya
================================================
demikian cara memasang profil dengan photo sendiri pada blog,,silahkan mencoba
semoga sukses

Senin, 18 November 2013

CARA PASANG PROFILE DI BLOG DENGAN PHOTO SENDIRI

Tidak ada komentar:

Posting Komentar

Rasyidan Ahnaf

Tukar Link