Modifikasi tampilan blogroll

Sudah beberapa hari ini saya nggak posting, lagi sibuk dengan dunia nyata, oke dari pada mikirin ntu lebih baik modif tu tampilan blogroll sobat, hehehe.ni saya kasi blogroll ini mengikuti ukuran width: 96% jadi kalo di letakkan pada sidebar gak akan sebesar ini. ni langsung aja saya masukkin demonya.. CEKIDOT

Blogroll

CYBER-JM

CYBER-JM

CYBER-JM

CYBER-JM

CYBER-JM

CYBER-JM

CYBER-JM

CYBER-JM

CYBER-JM

CYBER-JM

CYBER-JM

CYBER-JM

CYBER-JM

CYBER-JM

Untuk membuatnya sobat tinggal copy kode berikut

<div class='widgetSystem'>
<div class='nama'>Blogroll</div>
<div class='kulit'>
<li><a href='URL anda'>CYBER-JM</a></li>
<li><a href='URL anda'>CYBER-JM</a></li>
<li><a href='URL anda'>CYBER-JM</a></li>
<li><a href='URL anda'>CYBER-JM</a></li>
<li><a href='URL anda'>CYBER-JM</a></li>
<li><a href='URL anda'>CYBER-JM</a></li>
<li><a href='URL anda'>CYBER-JM</a></li>
<li><a href='URL anda'>CYBER-JM</a></li>
<li><a href='URL anda'>CYBER-JM</a></li>
<li><a href='URL anda'>CYBER-JM</a></li>
<li><a href='URL anda'>CYBER-JM</a></li>
<li><a href='URL anda'>CYBER-JM</a></li>
</div>
</div>
<style type='text/css'>
.widgetSystem {
    width: 96%;
    padding: 5px;
    background: #000;
    margin: 5px auto;
    border: 2px inset #333;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 1px 1px #333;
    -moz-box-shadow: 0 0 1px 1px #333;
    box-shadow: 0 0 1px 1px #333;
    }
.widgetSystem .nama {
    text-align: center;
    font-size: 1.5em;
    background: #333;
    padding:5px;
    color: #FFF;
    font-family: "Times new roman", Arial, sans serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
    }
.widgetSystem .kulit {
    background: #333;
    height: 250px;
    overflow: auto;
    margin-top: 5px;
    border: 1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
    }
.widgetSystem a {
    text-decoration: none;
    margin: 5px;
    background: #555;
    padding: 5px;
    display: block;
    color: #BBB;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    font-family: "Arial", Arial, sans serif;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s
    }
.widgetSystem a:hover {
    background: #000;
    color: #ccc;
    }
.widgetSystem li {
    list-style: none;
    color: #CCC;
    margin: 5px
    }
</style>

 Mudahkan ? :D Semoga bermanfaat

Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Unknown, Published at 12.11 and have 11 komentar