~SUNSHINE~: Membuat Background Image Dengan Efek Transparansi dan Animasi di Profil Blogger

Posting Ini Untuk Uji Coba...Boleh Juga Jika Anda Mau Praktek...!!!

Cara membuat Background Image dengan Efek Transparansi dan Animasi di Profil Blogger

Login ke blogger.
silahkan klik Design/Rancangan.
Lanjutkan dengan klik Edit/HTML.
cari kode CSS seperti di bawah ini :

/* Profile
----------------------------------------------- */
.profile-datablock {
      margin-top: 3px;
      margin-$endSide: 0;
      margin-bottom: 5px;
      margin-$startSide: 0;
      line-height: 140%;
}
.profile-textblock {
      margin-$startSide: 0;
}
.profile-img {
      float: $startSide;
      margin-top: 0;
      margin-$endSide: 10px;
      margin-bottom: 5px;
      margin-$startSide: 0;
      border:4px solid #e8b;
}

Jika tidak menemukan cari aj code yg seperti ini:

.profile {
.....
.... dst
}

Yang penting codenya di awali seperti ini ---> .profile { ...., jika sudah menemukan maka silahkan hapus saja. Jika ragu-ragu untuk melakukannya buat lah sebuah blog untuk uji coba sebagai tempat percobaan code Css,ngerti kan maksudnya…hehehe…

Kemudian g anti kode-kode CSS di atas dengan code CSS dibawah ini…!!!

#Profile .widget-content {
      position: relative;
      margin: 20px auto;
      width: 200px;
      height: 245px;
      padding: 5px;
      background: #666666;
      background: -moz-linear-gradient(top, #111, #eee);
      background: -webkit-gradient(linear, left top, right bottom, from(#111), to(#eee));
      text-align: center;
      border: 2px solid #888;
      text-shadow: 1px 1px 1px #000;
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
}
#Profile .widget-content img.profile-img {
      display: block;
      float: none;
      margin: 10px auto;
      opacity: 1.0;
      -o-transition: 2s ease-out;
      -moz-transition: 2s ease-out;
      -webkit-transition: 2s ease-out;
}
#Profile .widget-content span {
      position: absolute;
      top: 15px;
      left: 0px;
      width: 210px;
      height: 265px;
      background: url(http://i1109.photobucket.com/albums/h440/aneuk1/Background%20wallpaper/135.jpg) center center no-repeat;
      opacity: 0.4;
      -o-transition: all 0.7s ease-in 1s;
      -moz-transition: all 0.7s ease-in 1s;
      -webkit-transition: all 0.7s ease-in 1s;
}
#Profile .widget-content:hover span {
      opacity: 1.0;
      height: 1px; /* Aduen-Shunshine.blogspot.com*/
      border-bottom: 6px solid #888;
      -o-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
      -moz-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
      -webkit-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
}
#Profile .widget-content dl.profile-datablock {clear: both; margin: 10px auto;font-size: 11px;font-family: Arial;color: white;}
#Profile .widget-content dt.profile-data {font: 16px Tahoma; font-weight: bold;color: orange; text-transform:capitalize;}
#Profile .widget-content a.profile-link {color: #008686; font-size: 14px;}
#Profile .widget-content a.profile-link:hover {color: red;}