Membuat Blogroll Keren Dengan CSS3

Dari pada gak ada buat update postingan mending aku share Blogroll yang saya buat iseng - iseng saja buat ngisi waktu setelah di fikir lumayan buat di share siapa tau ada yang mau menggunakannya gak ada juga gak apa - apa dari pada gak update blog hehehhehee Blogroll ini serba CSS3 Karena box shadow, border-radius dan juga background RGBA yang mampu membuat warna transparan Contoh nya sih persis seperti screenshot di atas tapi biar gak penasaran langsung aja liat DEMO nya

DEMO

Mau di Bilang Widget Blogroll Keren Dengan CSS3 juga gak cocok, kalau menurut yang baca postingan ini cocok gak di bilang widget . . .?? gak cocok kan. . .?? jawab nya di kotak komen aja lah hehehhee ok langsung saja ambil kode nya di bawah ini.

<div class='widgetSystem'>
<div class='nama'>Link List</div>
<div class='kulit'>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
</div>
</div>
<style type='text/css'>
.widgetSystem {
    width: 96%;
    padding: 5px;
    background: #DDD url(http://1.bp.blogspot.com/-reD45_z2_oA/TvxN8wjYa3I/AAAAAAAABLY/Aq5cUurE1F0/s300/7aee702ddd6dd0_full.jpg) no-repeat;
    margin: 5px auto;
    border: 1px solid #00f;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 1px 1px #00f;
    -moz-box-shadow: 0 0 1px 1px #00f;
    box-shadow: 0 0 1px 1px #00f
    }
.widgetSystem .nama {
    text-align: center;
    font-size: 1.5em;
    background: #fd64b1;
    background: rgba(255, 0, 128, 0.6);
    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: #f379b2;
    background: rgba(255, 0, 128, 0.5);
    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: #C71585;
    background: rgba(199, 21, 133, 0.7);
    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: #1E90FF;
    color: #0000CD
    }
.widgetSystem li {
    list-style: none;
    color: #CCC;
    margin: 5px
    }
</style>

Silahkan sesuaikan sendiri kalau menurut anda kurang menarik mau ganti warnanya silahkan, pokokx ganti aja sepuas - puasnya dah hehehe baca juga Cara membuat Link Keren Dengan CSS semoga bermanfaat