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/AVvXsEi0gUOCrXFKHblpDfNdybswB_G_q1RjtFjhtJ_Njq_GdWKvl56olzeDAAmOwZPxgjrYG5-wcM4oY1tXB23SpBIYKQ16VqhrncPPecjGpQITFNAexmPB3Y6NUSiCdNGgwPUSOFi6Jft6Oxo/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: #02bbf3;
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:#02bbf3 blink;
font-style:italic;font-weight:Bold;
font: 15px Monotype Corsiva; text-shadow: 2px 2px 5px #02bbf3;
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: #02bbf3;
opacity: 1.0;
filter: alpha(opacity=100); }
.profile-link {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0gUOCrXFKHblpDfNdybswB_G_q1RjtFjhtJ_Njq_GdWKvl56olzeDAAmOwZPxgjrYG5-wcM4oY1tXB23SpBIYKQ16VqhrncPPecjGpQITFNAexmPB3Y6NUSiCdNGgwPUSOFi6Jft6Oxo/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
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.
