Cara mudah memasang List Css Hover Link dalam post blog

List Css Hover link HTML muncul sebagai format bullet list number ,dengan menggunakan css kita boleh menjadikannya bergaya dan berkesan bila diarahkan cursor ke link atau pautan tersebut .List Css Hover Link sesuai diterapkan di mana sahaja dalam post blog ,sebagai contohnya atas ,bawah ,tengah atau di dalam halaman tertentu blog .

Terdapat dua jenis senarai dalam HTML .

<ul>: Menggunakan item senarai tidak teratur yang ditandakan sebagai bullet.
<ol> : Menggunakan item senarai diperintahkan ditandakan sebagai nombor atau huruf.

Kami  { mdruzaidaud }  menerapkan tampilan list css hover link di dalam post blog di bahagian bawah artikel sebagai related post blog sampingan . List Css Hover Link juga boleh diterapkan di dalam halaman About Me ,Contact Me atau mengikut kesesuaian tertentu .Ianya juga boleh menggunakan imej sebagai penanda item senarai.

Berikut seperti mana yang tertera di bawah tutorial ringkas cara mudah memasang list css hover link dalam post blog .

1 : Login Dashboard Blogger.

2 : Click template serta pilih EDIT HTML.

3 : Langkah seterusnya scroll ke bawah template blog cara code ]]></b:skin>

4 : Copy paste style List Css Hover Link di bawah dan tampalkannya di atas ]]> </ b: skin> tadi.

.list-type2{
width:400px;
margin:0 auto;
}

.list-type2 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font-size: 15px;
font-family: 'Raleway', sans-serif;
padding: 0;
margin-bottom: 4em;
}

.list-type2 ol ol{
margin: 0 0 0 2em;
}

.list-type2 a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #FC756F;
color: #444;
text-decoration: none;
transition: all .2s ease-in-out;
}

.list-type2 a:hover{
background: #d6d4d4;
text-decoration:none;
transform: scale(1.1);
}

.list-type2 a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background:#FC756F;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
color:#FFF;
}

5 : Save template .

Cara penulisan List Css Hover Link dalam post blog seperti mana yang tertera  di bawah :

Setelah memasang code yang dikehendaki ,selanjutnya cara penulisan di dalam post blog.Buat atau karang post blog baru ,kemudian untuk penulisannya tambah code yang dikehendaki dalam tab HTML bukan Compose/Karang.

<div class="list-type2"> <ol> <li><a href="#">Contoh List Css Link Hover</a></li> <li><a href="#">Contoh List Css Link Hover</a></li> <li><a href="#">Contoh List Css Link Hover</a></li> </ol> </div>

Keterangan penulisan code di atas seperti yang tertera di bawah .

Demo seperti di bawah :

1. Contoh List Css Link Hover
2. Contoh List Css Link Hover
3. Contoh List Css Link Hover

1 : <a href="#"> Gantikan dengan pautan link .
2 : Contoh List Css Link tukar kepada tajuk pautan link .

Bagi kami ini mungkin cara termudah dan terpantas untuk memasang Lsit Css Hover Link dalam post blog .Selain itu ianya juga dapat menyerlahkan tampilan post blog agar kelihatan menarik dan bergaya .Sekian dulu untuk Tutorial Blogger cara mudah memasang List Css Link Hover dalam post blog semoga bersesuaian dengan tema template anda.

Article Provided By : www.formget.com .

Share this post

Artikel terkini terus ke inbox email anda :

PENAFIAN ( DISCLAIMER ) : Pelbagai bentuk imej, gambar, artikel, video dan pautan yang terkandung dalam blog ini diambil dari sumber - sumber lain .Oleh yang demikian dengan itu HAK CIPTA / COPYRIGHT dimiliki sepenuhnya oleh pemilik sumber tersebut .