Merubah Tampilan Profil Di Blog

Merubah-rubah tampilan blog seperti template, widged dll merupakan kepuasan tersendiri bagi si pemilik blognya, seperti halnya saya yang sering merubah-rubah blog Catatan Pena ini...hehehe..( biasa bang..! manusia gak pernah ada puasnya..) dan karena terlalu asyiknya ber bloging ria..lupa dah hari sudah malam...Berkunjung ke blog-blog orang lain untuk melihat-lihat merupakan penambahan ilmu yang luar biasa bagi saya pribadi untuk Karena terlampau seriusnya saya memandangi kode-kode script yang sangat mempusingkan itu dan sesekali kode tersebut juga membuat kita bete, serta kebiasaan tangan yang selalu memutar-mutar sebatang rokok ketika saya sedang merokok, tak sadar bahwa posisi rokok yang sudah saya hisap terbalik...( puuaaanassssssss...) wuakakakakakakak....

Kali ini saya akan sedikit berbagi mengenai sebuah widged profil yang pernah saya lihat di blog milik orang lain dimana tampilannya sudah di permak sedemikian rupa.

Untuk lebih jelas mengenai seperti apakah tampilannya, anda bisa lihat DISINI (yang bertuliskan Lihat profil lengkapku) semoga saja belum saya ganti hehehehe...

Bila anda tertarik untuk membuatnya, silahkan ikuti panduannya dibawah ini.

1. Login ke blog anda.
2. Dihalaman Dasboard, klik " Rancangan ".
3. Klik " Edit HTML ".
4. Pada halaman Edit Html, cari kode  ]]></b:skin>
5. Copy/paste kode yang ada dibawah ini dan letakkan diatas kode  ]]></b:skin>

Catatan Pena

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 px;
      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;
}

Copy/paste kode yang ada didalam kotak berwarna hitam dan letakkan tepat diatas kode ]]></b:skin> 

6. Kemudian Save template anda, dan sekarang lihat hasilnya.

Mudah bukan..? silahkan anda mencobanya.

Semoga informasi ini bermanfaat.