Background Image dengan Efek Transparansi dan Animasi di Profil Blogger-Blogspot dengan CSS3

"Making a Background Image with Transparency Effects and Animation on Blogger Profiles with CSS3 Transition". He ... he ... nih .... gubhug reyot berlagak pintar. Nulis pakai bahasa Inggris, he ....! Benar nggak, ya, teks di atas?! He ... eh ... biar saja,dah. Kata orang gila: "Orang yang takut berbuat maka tak akan pernah bisa! Orang yang takut berbuat salah, maka berarti orang tersebut tak pernah mau mencoba dan melakukan." He ... he ... itu cuma kata orang gila. Jadi bagi yang waras dan sehat jangan pernah ikutan. 'ntar jadi ikutan gila!

Menampilkan sebuah background image dengan efek transparansi disertai animasi di widget Profile blogger-blogspot pasti akan jadi sesuatu yang menarik untuk di buat. Sesuatu yang baru dan sepertinya belum pernah ada dan di coba. Hayo .... siapa yang berani mencoba (biar ikutan gila!)? Sampeyan bisa melihat tampilan baru widget profile dengan backckground-image yang menggunakan efek transparansi dan animasi CSS3 di sini (After the demo page open, move the cursor on "si gubhug reyot" in the right sidebar):

D E M O

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

• Login ke blogger.
• Setelah halaman dasbor terbuka, silahkan, KLIK link "Design/Rancangan". Tunggu beberapa saat hingga halaman baru terbuka.
• Lanjutkan dengan KLIK link "Edit/HTML".
• Setelah sampeyan melihat kode html di template blog, cari kode CSS yang 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;
}

Tentu saja kode di atas mungkin tidak sama dengan kode CSS di template sampeyan. Yang terpenting, yang perlu dihapus dan diganti dengan kode CSS yang baru adalah semua kode CSS yang berupa syntax dengan bentuk seperti ini :
.profile {
.....
.... dst
}
Jika sampeyan menemukan kode yang di awali dengan .profile { ...., maka silahkan hapus saja. Jika ragu untuk melakukannya, sampeyan bisa buat sebuah blog baru untuk melakukan percobaan. Gunakan saja ID yang sudah ada untuk membuat blog percobaan melalui halaman dasbor. Di sini ada link "Buat blog". KLIK untuk membuat blog baru sebagai tempat melakukan segala eksperimen desain!
• Ganti kode-kode CSS di atas dengan Kode CSS berikut 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhylDiZquTXj7RC9DFaZLCAU5rIuHbjsuBAAycUYoTD_3jOwzeGNOvNU90reMzKTYTZbuw1rZ3LroAaWKhiB8IyQxPgh3JhftFIvgAoCjlJBXVJ74CdaO1CGe2aE3osOu3SyfsyaohaZSw/s400/Pemandangan-3.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; /* original code by: gubhugreyot.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: #99CCFF; font-size: 14px;}
#Profile .widget-content a.profile-link:hover {color: red;}

• KLIK"SAVE/Simpan Template", kemudian buka blog untuk melihat hasil perubahan pada profil sampeyan.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 


• 

» Happy Blogging - gubhugreyot «