Special List Hover Like Me

Assalamualaikum

Ada yang request tuto di cbox, nih katanya :

LIVE PREVIEW

1. TUTORIAL : Blockquote Unyu
2. TUTORIAL : Navigation 1

Untuk Template Designer

1. Cari kode

 /* Posts

2. Kemudian paste-kan kode ini di bawah kode no. 1

ol{counter-reset: li; /* initiate a counter */
list-style: none; /* remove default numbering */
*list-style: decimal; /* keep using default numbering for ie6/7 */
font: 10px 'verdana';padding: 0;margin-bottom: 4em;}
ol ol{margin: 0 0 0 2em; /* add some left margin for inner lists */}
.rectangle-list a{position: relative;display: block;
padding: .4em .4em .4em .8em;*padding: .4em;margin: .5em 0 .5em 2.5em;background-image: url('URL GAMBAR');color: #8B8989;text-decoration: none;transition: all .3s ease-out; }
.rectangle-list a:hover{background: #dcf1fd;;}
.rectangle-list a:before{content: counter(li);counter-increment: li;position:absolute; left: -2.5em;top: 50%;margin-top: -1em;background:#b4d4f8;background-image: url('URL GAMBAR');color:#fff;height: 2em;width: 2em;line-height: 2em;text-align:center;font-weight: bold;}
.rectangle-list a:after{position: absolute; content: '';border: .5em solid transparent;left: -1em;top: 50%;margin-top: -.5em;transition: all .3s ease-out; }
.rectangle-list a:hover:after{left: -.5em;border-left-color: #9a8c92; }

3. Untuk memanggil kodenya, tinggal gunakan kode di bawah ini. Pastekan di kotak HTML/JavaScript :)

<ol class="rectangle-list">
<li><span style="color: #6fa8dc;"><a href="http://fajarrd.blogspot.com/2012/12/blockquote-unyu.html">TUTORIAL : Blockquote Unyu</a></span></li>

<li><a href="http://fajarrd.blogspot.com/2012/12/navigation-1.html"><span style="color: #6fa8dc;">TUTORIAL : Navigation 1</span></a></li>

*Warna merah : URL GAMBAR ANDA

*Warna biru : KODE WARNA ANDA

Kode-kode cantik ini saya dapatkan dari Yura ,  thanks Yura