12 April 2011

Modifikasi kode css profile untuk mempercantik blog

Blog dengan tampilan cantik dan menarik adalah impian saya sejak awal terjun ke dunia blogger. Sebelum memakai salah satu template biasanya saya coba untuk melihat demonya dulu sebelum template tersebut saya pakai, hal ini disebabkan saya ingin mengetahui terlebih dahulu tampilan standar dari template tersebut yang nantinya saya coba memberikan sedikit modifikasi yang sesuai dengan keinginan saya. Salah satu bagian dari template pada blog ini yang saya permak adalah kode css profil bawaan template dengan merubah sedikit tampilannya (modifikasi kode css).
Berikut kode css awal pada item profil:


/* Profile */
.profile-img {
  float: $startSide;
  margin-top: 5px;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  border: 4px solid $topSidebarTextColor;
}

.profile-datablock {
  margin-top:0;
  margin-$endSide:15px;
  margin-bottom:.5em;
  margin-$startSide:0;
  padding-top:8px;
}

.profile-link {
  background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbf_q4v29U9-TFhBS43fH3GCYAh0yN9Ki_A-FMYAUOCbc9CLfDZ497-zHPEr_z7t4cAphJNuh1VAmPf9fW3Ztu4nuIC0YVEEsn5k7fBU4AzI_UDSyJbhvz6vRw4I19f6M_6Q5T4Tn44pI/s1600/icon_profile.gif") no-repeat $startSide .1em;
  padding-$startSide:15px;
  font-weight:bold;
}

.profile-textblock {
  clear: both;
  margin: 0;
}

Kemudian saya coba modifikasi sedikit css-nya dengan harapan bisa mempercantik tampilan profil blog sederhana ini. Berikut kode css setelah modifikasi:


/* Profile */
.profile-img {
  display:block;
  float:none;
  margin:10px auto;
  opacity:1.0; -o-transition:2s ease-out;
  padding:5px;border:#666 4px solid;
  -moz-transition:2s ease-out;
  -webkit-transition:2s ease-out;opacity:0.3;-moz-opacity:0.3;filter:alpha(opacity:30);}
.profile-img:hover {
  background: #660000;
  color: #eee;
  opacity: 1.0;
  filter: alpha(opacity=100);
} 

.profile-datablock {
  margin-top:0;
  margin-$endSide:15px;
  margin-bottom:.5em;
  margin-$startSide:0;
  padding-top:2px;
  color:#ff2727 blink;
  font-style:italic;font-weight:Bold;
  font: 15px Monotype Corsiva; text-shadow: 2px 2px 5px #f3e80c;
  text-align:center;
  border:4px solid #666;
  border-radius:12px;
  -moz-border-radius:12px;
  -webkit-border-radius:12px
  margin:20px auto;
  width:185px; height:90px;opacity:0.3;-moz-opacity:0.3;filter:alpha(opacity:30);}

.profile-datablock:hover{
  background: transparent url (http://i1089.photobucket.com/albums/i352/infokita1978/Bokong.gif);
  color: #eee;
  opacity: 1.0;
  filter: alpha(opacity=100); }  
.profile-link {
  background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbf_q4v29U9-TFhBS43fH3GCYAh0yN9Ki_A-FMYAUOCbc9CLfDZ497-zHPEr_z7t4cAphJNuh1VAmPf9fW3Ztu4nuIC0YVEEsn5k7fBU4AzI_UDSyJbhvz6vRw4I19f6M_6Q5T4Tn44pI/s1600/icon_profile.gif") no-repeat $startSide .1em;
  padding-$startSide:15px;
  position:center;
  font-weight:bold;
}

.profile-textblock {
  clear: both;
  margin: 0;
}

Kode warna merah penambahan kode untuk memberikan efek gelap dan terang.
Kode warna biru adalah modifikasi tampilan deskripsi

Hasilnya bisa anda lihat sendiri pada profil blog ini, tampilan standar bawaan template sudah berubah dimana font maupun backgroundnya sudah saya permak dengan menambahkan efek hover dan gambar animasi. Pada postingan kali ini saya cuma mau memberikan saran pada anda supaya jangan pernah berhenti belajar untuk menambah ilmu dan coba praktekkan langsung apa yang sudah anda dapatkan. Saya sendiri masih dalam tahap belajar dengan satu harapan ilmu pengetahuan saya terus bertambah walaupun semuanya tetap melalui tahap demi tahap. Saya bukanlah seorang progammer, tetapi saya blogger yang mau belajar, ingat bro... tanpa belajar dan praktek kita takkan pernah bisa. Sekian dulu pertemuan kali ini, semoga bro.. dan sist.. selalu punya keinginan  menambah ilmu dengan terus belajar dan tidak mudah puas dengan apa yang sudah kita miliki sekarang. Salam.

Artikel Terkait Lainnya



3 komentar:

BAYU KURNIAWAN mengatakan...

Jalan jalan....

Unknown mengatakan...

follow 59 sukses, follow balik ya, n jangan lupa tukeran link ya . n.n salam kenal

Unknown mengatakan...

follow 59 sukses, follow balik ya, n jangan lupa tukeran link ya . n.n salam kenal

Posting Komentar

PrevPage NextPage home