Blogroll mirip buku

Setelah berbagai ekperimen yang aku lakukan mengenai Link List / blogroll, pertama Membuat blogroll dengan css3 kemudian dilanjutkan dengan Widget Blogroll Css3 Part ||, dan Sepertinya sekarang masih mengenai blogroll lanjutan dari kedua postingan tersebut, kayaknya kali ini adalah Blogroll Css Part ||| hehehe bentuk dan modelnya kayak gambar dibawah ini nih.



Memanfaatkan css pseudo-element ::before dan pseudo-class :first-child. :first-child aku gunakan untuk menghapus style default pseudo-element ::before yang mengenai semua elemen li karena li yang pertama aku gunakan sebagai judul jadi harus di hapus style defaultnya biar kelihatan beda.

<style>
/*
Zhinto - Creation
url    : http://zhinto.blogspot.com/
*/
ul.lisBook {
    background: #E6E6E6;
    position: relative;
    padding: 0;
    border: 1px solid #AAA
    }

ul.lisBook::before {
    content: "";
    position: absolute;
    border-left: 1px solid #AAA;
    top: 0;
    left: 30px;
    bottom: 0
    }

ul.lisBook li {
    position: relative;
    padding: 3px 10px;
    border-bottom: 1px solid #AAA;
    margin: 0 0 0 30px;
    font: normal 14px/20px Arial, sans-serif;
    list-style-type: none;
    text-transform: capitalize
    }

ul.lisBook li::before {
    content: "";
    position: absolute;
    padding: 7px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background: #FFF;
    left: -20px;
    top: 7px
    }

ul.lisBook li:first-child::before {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    content: "#";
    padding: 0;
    background: none;
    left: -18px;
    top: 5px
    }

ul.lisBook li:last-child {
    border-bottom: none
    }

ul.lisBook li a {
    text-decoration: none;
    color: #333
    }

ul.lisBook li a:hover {
    color: #1788D3
    }

ul.lisBook li.tebal {
    font: bold 15px/20px Arial, sans-serif;
    list-style-type: none
    }
</style>
<ul class='lisBook'>
<li class='tebal'>NAMA TEMANKU</li>
<li><a href="#link anda">WAYAN</a></li>
<li><a href="#link anda">Mahsyar</a></li>
<li><a href="#link anda">Adi</a></li>
<li><a href="#link anda">Adam</a></li>
<li><a href="#link anda">Wahab</a></li>
<li><a href="#link anda">Cici</a></li>
</ul>

Simpan dengan menambah Gadget HTML/Javascript