Bingung setiap masuk blog mau ngapain, jalan2 keblog-blog temen belum juga dapat inspirasi, desain box profil ini sudah beberapa hari didalam folderku sekarang dari pada bingung aku bagi aja nih...
<div id='zto_profile'> <div class='foto'><img src='foto-anda.jpg'/></div> <div class='data'> <p><b>ZHINTO</b></p> <table> <tbody> <tr> <td>Tempat</td> <td>: Rawamangun (SULSEL)</td> </tr> <tr> <td>Hobi</td> <td>: Denger musik / Ngeblog / Main gitar</td> </tr> <tr> <td>Status</td> <td>: { pengangguran }</td> </tr> </tbody></table> </div> <div style='clear:both'></div> <div class='sos'> <a class='fb' href='#'>Facebook</a> <a class='tw' href='#'>Twitter</a> <a class='tw d' href='#'>Profil Blogger</a> </div> </div>
/* ZTO Creation http://zhinto.blogspot.com/ */#zto_profile { width: 400px; margin: 0 auto; padding: 10px; border-bottom: 3px solid #44515A; overflow: hidden; color: #171820; background: #1696C5; background: -moz-linear-gradient(-45deg, #53abcc 0%, #2a88b7 50%, #0079b2 51%, #2a7ab7 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#53abcc), color-stop(50%,#2a88b7), color-stop(51%,#0079b2), color-stop(100%,#2a7ab7)); background: -webkit-linear-gradient(-45deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%); background: -o-linear-gradient(-45deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%); background: -ms-linear-gradient(-45deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%); background: linear-gradient(135deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#53abcc', endColorstr='#2a7ab7',GradientType=1 ); } #zto_profile p { margin: 0; padding: 0; font: normal 14px/20px Arial,sans-serif } #zto_profile table { font: normal 12px/20px Arial,sans-serif } #zto_profile abbr { border-bottom: 1px dotted #999; cursor: help } #zto_profile .foto { float: left; margin: 0 10px 0 0; height: 100px; width: 75px; overflow: hidden; } #zto_profile .foto img { width: 100%; height: 100%; } .sos { background: #288AD8; background: -moz-linear-gradient(45deg, #53abcc 0%, #2a88b7 50%, #0079b2 51%, #2a7ab7 100%); background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#53abcc), color-stop(50%,#2a88b7), color-stop(51%,#0079b2), color-stop(100%,#2a7ab7)); background: -webkit-linear-gradient(45deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%); background: -o-linear-gradient(45deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%); background: -ms-linear-gradient(45deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%); background: linear-gradient(45deg, #53abcc 0%,#2a88b7 50%,#0079b2 51%,#2a7ab7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#53abcc', endColorstr='#2a7ab7',GradientType=1 ); padding: 10px; margin: 5px 0 0; overflow: hidden; position: relative; left: -10px; bottom: -10px; width: 100%; box-shadow: 0 0 10px rgba(10, 11, 12, 0.7); -moz-box-shadow: 0 0 10px rgba(10, 11, 12, 0.7); -webkit-box-shadow: 0 0 10px rgba(10, 11, 12, 0.7); z-index: 2; border-top: 1px solid #00B8F1; text-align: center } .sos .fb, .tw { padding: 5px 10px; background: #6997E7; border: 1px solid #0056C2; -moz-box-shadow: 0 1px 1px rgba(238, 238, 238, 0.3) inset; -webkit-box-shadow: 0 1px 1px rgba(238, 238, 238, 0.3) inset; box-shadow: 0 1px 1px rgba(238, 238, 238, 0.3) inset; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font: bold 11px/20px Arial,sans-serif; color: #0B4897; text-decoration: none; } .fb { float: left; } .tw { float: right; } .tw.d { float: none; display: inline-block; } .sos .fb:hover, .tw:hover { box-shadow: inset 0 0 5px rgba(0,0,0,0.15); -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.15) -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.15) }