Widget Blogroll css3 part ||

Kalau sebelumnya saya sudah share tentang blogroll dengan css3 sekarang saya akan share blogroll dengan css3 part ||. bentuknya ya kayak di screenshot itu, tema nya black / gray / dark / gelap hehehe kebanyakan atau nya, silahkan lihat demonya.

DEMO

Gimana sobat - sobat blogger semua. . .? apa ada yang berminat. . .? bagi yang minat langsung saja ke cara pembuatannya.

1. Masuk di dasbor blogger
2. Klik Tata Letak / Rancangan
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukan kode di bawah ini di dalam kotak bagian bawah.

<div class="s">
<span class="Systemkepala">Judul Blogroll</span>
<ul>
<li><a href="#">Aduh Gusiku Sakit</a></li>
<li><a href="#">Menghilangkan link di area komentar</a></li>
<li><a href="#">Cewek Cantik</a></li>
<li><a href="#">Modifikasi Blockquote Terkeren</a></li>
<li><a href="#">Caption gambar terkeren</a></li>
</ul>
</div>

<style type="text/css">
div.s {
    margin: 0 auto;
    padding: 5px;
    background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPKsMIC93OIPxO4K5Job6HG4AaxaQN_18KIWLBG-Vo7nxYcod16LtB4hZ_Y0ojgMnaW1MGO9lfU1Mqpj4BjvgWuWrCBI9Gt90Y4eOlq1SVrt93IlGLMBxBDLAaiB5-Ordr9vLYMdyJ_N_G/s1600/bg000000.jpg);
    border: 1px solid #880;
    position: realative;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px
    }

div.s .Systemkepala {
    display: block;
    text-align: center;
    border: 1px solid #880;
    margin: 0;
    padding: 5px;
    font: bold 20px/20px Arial, sans-serif;
    text-transform: uppercase;
    color: #A95;
    background-color: rgba(0, 0, 0, 0.1);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
    }

div.s ul {
    list-style-type: none;
    padding: 0;
    margin: 5px 0 0 0
    }

div.s li {
    list-style: none;
    padding: 5px 0 5px 10px;
    border-bottom: 1px solid #333;
    -moz-box-shadow: 0 1px 0 #666;
    -webkit-box-shadow: 0 1px 0 #666;
    box-shadow: 0 1px 0 #666;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease
    }

div.s li:hover {
    border-bottom-color: #880;
    -moz-box-shadow: 0 1px 0 #222;
    -webkit-box-shadow: 0 1px 0 #222;
    box-shadow: 0 1px 0 #222;
    text-shadow: 0 0 5px #FF0
    }

div.s li a {
    color: #888;
    text-decoration: none;
    font: normal 15px/20px Georgia, serif;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease
    }

div.s li a:hover {
    color: #FF0
    }
</style>

6. Klik SIMPAN dan lihat hasilnya.
Jangan lupa ganti tanda # Dengan URL anda, dan ganti juga teks teks yang aneh itu dengna judul link nya. semoga blogroll dengan css3 ini bermanfaat. oh iya kalau ada yang mau dengan tampilan warna lain silahkan sampaikan lewat kotak komentar, karena pasti kalau temanya gelap gini ada yang ngerasa gak cocok sama blognya jadi entar aku update lagi untuk warna - warna request-an.