18 Nov 2016

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.

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

Theme by Wanaseoby