Cara Membuat Blogger Profile CSS3

Dalam hari ini taukahbahwa.blogspot.com akan menyampaikan artikel tentang Cara Membuat Blogger Profile CSS3. Semoga dengan artikel Cara Membuat Blogger Profile CSS3 akan menambah pengetahuan untuk anda pembaca setia taukahbahwa.blogspot.com

Login to Blogger. Gunakan User Name atau Email Address serta Password. Setelah data tersebut dituliskan dengan benar, KLIK "Login".

Dasboard (Dasbor) : Ini halaman yang akan dijumpai setelah login. Akan terlihat beberapa buah link di dalamnya. Cari dan KLIK "Design (Rancangan)". Tunggu beberapa saat!

Design (Rancangan) : KLIK link "Edit HTML".
Edit HTML : Setelah halaman ini terbuka, maka akan terlihat kode html penyusun blog.

Silahkan cari kode  ]]></b:skin>.
Copy - Paste : Copy kode CSS di atas dan pastekan tepat di atas kode ]]></b:skin>.
SAVE Templates (Simpan Template) : KLIK "SAVE Templates" kemudian bukalah blog anda. Sebuah tampilan baru yang cantik

Kode CSS Animations on Blogger Profile

dl.profile-datablock {clear: both; text-align:center;}
#sidebar .Profile img.profile-img {
      border: 8px solid #aaa;
      opacity: 0.3;
      border-radius: 6px;
      margin: 20px 0 20px 60px;
      padding: 4px;
      background: #eee;
      box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
      -moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
      -webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
      -o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
      -moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in;
      -webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in;
}
#sidebar .Profile:hover img.profile-img {
      opacity: 1.0;
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      -moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 16px #222;
      margin: 40px 0px 20px 10px;
      -o-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
      -moz-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
      -webkit-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
      -o-transition: margin-left 1.5s ease-in 0.4s, margin-top 1.5s, -o-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
      -moz-transition: margin 1.5s ease-in 0.4s, -moz-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
      -webkit-transition: margin 1.5s ease-in 0.4s, -webkit-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
}

Catatan
margin dengan nilai 60px digunakan untuk mengatur posisi gambar. Rubah jika diperlukan. Semakin kecil gambar akan semakin ke kiri!
Sumber : Gubhug reyot

Jangan Lupa Untuk Membagikan Artikel Ini Ok

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com