[TUTORIAL] Listing Item { like me }

by - Thursday, February 11, 2016

Assalamualaikum dan salam sejahtera ,


Good morning ^^ 


Ini dia kawan bloggers kita yang bertanya macam nak buat list item korang punya tutorial , freebies and so on tu , so jom kita tunjukkan . Mintak maaf seandainya cara Anis taip di bawah ni korang kurang faham ka apa , so boleh ja tanya untuk kepastian :D malu bertanya sesat jalan dik , 

1. Bukak Template --> Edit HTML 

2. Cari perkataan ni .

body {

3. Sila COPY kan semua ni PASTE di BAWAH perkataan yang korang cari sebelum ni . 

.sarang{
display:inline-block;
background: #000000;
width: 250px;
height: 18px;
line-height: 20px;
margin:3px;
font-size:12px ;
letter-spacing: 1px;
text-align:left;
text-transform:lowercase;
padding-left: 4px;
z-index:9;
-webkit-transition-duration:.2s;
-moz-transition-duration:.2s;
-ms-transition-duration:.2s;
-o-transition-duration:.2s;
transition-duration:.2s;
}
.sarang:hover{
-webkit-transition-duration:.2s;
-moz-transition-duration:.2s;
-ms-transition-duration:.2s;
-o-transition-duration:.2s;
transition-duration:.2s; color: #ffffff;
letter-spacing: 2px;
}

MERAH - warna tulisan sebelum hover 
BIRU - panjang satu kotak 
HIJAU - warna tulisan selepas hover 

Korang boleh tukar mengikut kehendak masing - masing :)

4. Save . 
Jap ! Belum siap lagi ye :) Tu baru wujudkan coding tu dalam blog korang , sekarang ni kalau korang nak gunakan dia , kena ikut macam ni pulak . 

1. Open mana-mana page yang korang nak --> Edit 
2. Tekan button HTML . 

3. COPY ayat di bawah ni . 

<a class="sarang" href="https://www.blogger.com/">COMING SOON</a>

OREN - Link korang yang punya tutorial / freebies
PURPLE - Nama tutorial / freebies 

4. PASTE kan di ruangan tersebut . 

5. Kalau nak banyak kotak macam dekat blog Anis ni , PASTE kan saja banyak - banyak macam ni .

<a class="sarang" href="https://www.blogger.com/">COMING SOON</a>
<a class="sarang" href="https://www.blogger.com/">COMING SOON</a>
<a class="sarang" href="https://www.blogger.com/">COMING SOON</a>
<a class="sarang" href="https://www.blogger.com/">COMING SOON</a>

6. Kalau nak CENTER kan semua kotak-kotak tu . Buat kod anda macam ini tau .

<center>
<a class="sarang" href="https://www.blogger.com/">COMING SOON</a>
<a class="sarang" href="https://www.blogger.com/">COMING SOON</a>
<a class="sarang" href="https://www.blogger.com/">COMING SOON</a>
<a class="sarang" href="https://www.blogger.com/">COMING SOON</a>
</center>

7. Save .

Maaf kan Anis kalau korang tak berapa nak faham , ke terbelit ke , tak jumpa code yang disuruh cari ke , do tell me , I'll help you :3

Selamat mencuba .

P/S : Coding ni asal daripada blogskin Anis yang dulu :3 

Share
Tweet
Pin
Share
Tags :

You May Also Like

5 LOVE(S)

  1. Aqilah AzmiFebruary 11, 2016 1:02 am

    Ahaaa benda ni hehe qila pun ada letak (rs nya la) hahaha im so lame anyway thank u for sharing!

    ReplyDelete
  2. AnonymousFebruary 11, 2016 2:10 pm

    LOL tak sangka awak buat jugak tuto ni. thankyou chinguuu~~

    ReplyDelete
  3. cik puan rraiFebruary 25, 2016 7:36 pm

    nice tutorial :)

    ReplyDelete

Thank you for dropping some comment and have a nice day! 😉