DEMO: Search Form Using CSS3 Transition

Search form was built using CSS3 code in order to obtain the best performance and can make the blog more beautiful. Some codes used by CSS3 border-radius, drop-shadow (box-shadow), text-shadow, background-gradient and CSS3 Transition.
There are 2 options I have provided, it's up to you want to choose the first or second.

Search Form-1

Search Form-2

Click the link below to open the tutorial!

Tutorial: Search Form Using CSS3

Original tutorial by gubhug reyot

DEMO: Creating animation with CSS3 Transition on Blogger Profile Image

Click here and then open the "About Me" and move the cursor on it.

Click the link below to open the tutorial!

Tutorial: Creating animation on Blogger Profile

Original tutorial by gubhug reyot

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