How to Start a Blog? Panduan Lengkap Membuat Blog Hanya 30 Menit

Trik CSS3 Desain List ol li Rounded & Rectangle

Kali ini saya akan memberikan tutorial membuat desain bentuk List ol li Rounded dan Rectangle dengan CSS3. List ini digunakan untuk mempercantik tampilan kontent yang menggunakan list ol li untuk mengelompokkan kontent tertentu dalam penomoran.

Berikut Screenshot dari desain list ol li dengan CSS3 bentuk Rounded dan Rectangle :

trik desain css3 list ol li tutorial  centerklikList Rounded CSS3

Bentuk rounded ini tentunya type number berbentuk bulat, dan saat mouse menyentuh salah satu list bentuk hover dari rounded ini nomornya akan berputar 360 derajat.

trik desain css3 list ol li tutorial  centerklikList Rectangle CSS3

Untuk bentuk Rectangle ini jika saat hover akan memunculkan segitiga kecil di samping nomor.

Untuk membuat list seperti diatas copykan code css ini pada css anda di awal baris untuk memberikan jenis font dan ukuran font pada desain List anda:

body {
	max-width:320px;
	padding: 0 2em;
	margin:auto;
	}

ol {
    counter-reset: li; 
    list-style: none;
    *list-style: decimal; 
    font: 15px Lato;
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol ol {
    margin: 0 0 0 2em;
}

Untuk desain Rounded List copy css dibawah ini :

/*-------------*/
.rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;   
}

.rounded-list a:hover{
    background: #eee;
}

.rounded-list a:hover:before{
    transform: rotate(360deg);  
}

.rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute; 
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #38B7EE;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

Untuk desain Rectangle List copy css dibawah ini :

/* Rectangle */
.rectangle-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #555555;
    color: #fff;
    text-decoration: none;
    transition: all .3s ease-out;   
}

.rectangle-list a:hover{
    background: #6b6b6b;
}   

.rectangle-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute; 
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #EE3322;
    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: #EE3322;             
}

Untuk script htmlnya copy script dibawah ini :

<ol class="rounded-list">
    <li><a href="">List item</a></li>
    <li><a href="">List item</a></li>
    <li><a href="">List item</a>
        <ol>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
        </ol>
    </li>
    <li><a href="">List item</a></li>
    <li><a href="">List item</a></li>                       
</ol>

Jika anda ingin menggunakan List ini di wordpress anda tinggal anda copy css rounded ataupun rectangle di css style template wordpress yang anda gunakan, dan agar bisa tampil di postingan copy html nya di post anda di WYSIWYG mode text dengan css class yang sudah tertera di script HTML diatas. saya juga menggunakanya untuk blog wordpress saya, tapi saya hanya menggunakan untuk yang Rounded List, untuk demonya silahkan cek disini.

Selamat mencoba. 🙂

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

7 Comments

Add a Comment

Your email address will not be published. Required fields are marked *

Must Read...!
5 Desain UI Kit Best Design Gratis Download

Ketika anda sedang membangun sebuah website atau anda sedang mendesain sebuah website seringkali anda...

Perbandingan Opera Browser App Android Support CSS3

Kebanyakan orang tentunya sudah tau Browser dengan logo huruf O dengan warna merah yaitu...

Close