Making a Background Image with Transparency Effects and Animation on Blogger Profiles with CSS3

To modify the appearance of the profile bloggers like "the title above" must be conducted by the page "edit HTML". Some of the css code in the template must be changed so that a background-image can be displayed. CSS code in the form of syntax .profile {margin: 3px 0 15px 0; .... etc ; } and other syntax related to the syntax .p {...) should be deleted and replaced with the new CSS code. Below is a sample of CSS code that must be removed and replaced with new CSS code

.profile-datablock {
      margin-top: 3px;
      ....
      ....
}
.profile-textblock {
      ....
}
.profile-img {
      ...
}

Delete all the CSS code that looks like the above and other syntax that uses the code ".profile { .....}"
Copy-paste CSS code below to replace the CSS code above.

#Profile1 .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;
}
#Profile1 .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;
}
#Profile1 .widget-content span {
      position: absolute;
      top: 15px;
      left: 0px;
      width: 210px;
      height: 265px;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDk5Ku1Wp0Bv_raItOgIK1tN3AmihPzasb5YIj0mG39IrJMi6p867sBQNssc4DChOhBK_BMq-3wLh3bh7Ss-zTdKWf9TM6kivdRhsbmGWqjBdtQOOMcKJFatwnZxL2IYOpbZjcZP3I7PY/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;
}
#Profile1 .widget-content:hover span {
      opacity: 1.0;
      height: 1px;
      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;
}
#Profile1 .widget-content dl.profile-datablock {clear: both; margin: 10px auto;font-size: 11px;font-family: Arial;color: white;}
#Profile1 .widget-content dt.profile-data {font: 16px Tahoma; font-weight: bold;color: orange; text-transform:capitalize;}
#Profile1 .widget-content a.profile-link {color: #99CCFF; font-size: 14px;}
#Profile1 .widget-content a.profile-link:hover {color: red;}

D E M O

Move your cursor on "si gubhug reyot" in the right sidebar.

How to save the CSS code :

1. Login to Blogger
2. Dasboard : Click "Design".
3. Design : Click "Edit HTML".
4. Edit HTML : Find css code like the sample above and replace with new CSS code!.
5. SAVE Templates
6. Open your blog and see the results.

Click the link below to open the tutorial!

Tutorial: How to Change Blogger Profiles

Original tutorial by gubhug reyot

You can see other best tutorial below ...

Please open the links below to read the others bloggers tutorial who can complete the tutorials and demos on this blog.

1. gubhug reyot
2. Tanty Template Modification
3. bloggerstuars

Thank you for your visit!

Greeting