7 DAYS, 1 WEEK BLOG CHALLENGE - #4 A Tutorial

7 DAYS, 1 WEEK BLOG CHALLENGE - #4 A Tutorial

Assalamualaikum

Day 4 - A Tutorial

Display Post Author, Date/Time, Labels and Comments below Post Title

7 DAYS, 1 WEEK BLOG CHALLENGE - #4 A Tutorial


Okey, nak bagitau siap-siap, tutorial ini panjang dan rumit. Kalau rasa tak faham, aku minta maaf. 

Sebelum mula, pastikan backup template dulu. Kalau tak jadi, tak menyesal. 

Steps :

1. Buka Blogger Dashboard masing-masing.

2. Pergi ke bahagian Template

3. Tekan Edit HTML itu.

7 DAYS, 1 WEEK BLOG CHALLENGE - #4 A Tutorial


4. Tekan Ctrl + F dan cari kod ini :

<b:if cond='data:post.dateHeader'>

5. Dah jumpa? Okey, sekarang kenal pasti yang mana satu antara dua kod ini sama dengan kod hampa.

Kod 1

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Atau

Kod 2

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

6. Dah kenal pasti? Sekarang, gantikan kod yang tadi dengan kod ini :

Note : Kalau kod hampa ialah Kod 1, pilih Kod 1 dan sebaliknya.

Kod 1

<b:if cond='data:post.dateHeader'>
<script>var DataScript = ' <data:post.dateHeader/> ';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
</h2>
</b:if>

Atau

Kod 2

<b:if cond='data:post.dateHeader'>
<script>var DataScript = ' <data:post.dateHeader/> ';</script>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
<b:else/>
<h2 class='date-header'>
</h2>
</b:if>

7. Now, cari pula kod ini :

<div class='post-header-line-1'/>

8. Jumpa? Tambah kod ini di bawah kod tadi

<center>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<table style='font-size: 11px'>
<tr valign='top'>
<td>
<img src='AUTHOR ICON' style='vertical-align:middle;padding-right:5px; width: 15px; height:15px; border:0px;'/>
</td>
<td>
<span class='post-author vcard'><b:if cond='data:post.authorProfileUrl'><span class='fn'><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></span><b:else/><span class='fn'><data:post.author/></span></b:if></span>
</td>
<td>
<img src='DATE/TIME ICON' style='vertical-align:middle;padding-left:10px;padding-right:5px; width: 15px; height:15px; border:0px;'/>
</td>
<td>
<script>document.write(DateScript);</script> at <data:post.timestamp/>
</td>
<td>
<img src='LABEL ICON' style='vertical-align:middle;padding-left:10px;padding-right:5px; width: 15px; height:15px; border:0px;'/>
</td>
<td>
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></b:if>
</td>
<td>
<img src='COMMENT ICON' style='vertical-align:middle;padding-left:10px;padding-right:5px; width: 15px; height:15px; border:0px;'/>
  </td>
<td>
<span style='font-family: Roboto Slab; font-size: 11px'><a expr:href='data:post.url + &quot;#comments&quot;' style='float: right'><b:if cond='data:post.numComments == 1'>1 <data:commentLabel/><b:else/><data:post.numComments/> <data:commentLabelPlural/>
</b:if>
</a>
</span>
  </td>
</tr>
</table>
</b:if>

Pengelasan Warna :

Merah - Cari url gambar yang sesuai dengan setiap bahagian. Tengok contoh yang ada kat blog aku.
Kuning - Ubah ikut kesesuaian
Oren - Gantikan dengan nama pena hampa. Contoh : Amira
Hijau - Ganti koma itu dengan apa-apa yang hampa nak. Itu untuk mengasingkan setiap label hampa.
Ungu - Ganti font ini dengan mana-mana font yang hampa suka.

9. Preview. Kalau jadi, save :)


Memang agak rumit. Perlukan kesabaran dan ketelitian. Kalau apa yang aku bagi ini tak jadi, hampa boleh terus pergi sini. Aku belajar pun dekat situ.

That's it.

Till then. Wallahualam.

Amira

Amira. Reaching seventeen. She loves black, white and grey. A nerd who always dream to be with her oppa(s) eventhough she knew it was a total trash.

2 comments:

  1. yah nice toturial !! tapi unni nak rekues toturial mcmn buat petak2 tu dalam entry..macam kod awak simpan dlm kotak kan.. toturial plz:P

    ReplyDelete

Instagram