Home » » Tutorial Embed Comment Link di Laman Utama

Tutorial Embed Comment Link di Laman Utama

Empayar Utama - Thursday, July 14, 2011 : 9 comments

Ini kali ketiga kot aku bagi tutorial. Rasanyalah. Tutorial apa? Haaa, korang perasan tak template ni sebenarnya siang-siang lagi memang tak ada langsung Post Detail seperti Author, masa, komen link, emel subscription, quick edit, labels, sharing widgets, dan yang sewaktu dengannya. Ada template yang ada, ada template yang tak ada benda alah ni. Sampaikan kawan-kawan blogger kat shoutbox tanya aku memang tak nak bagi diorang komen ke?

Alamak, aku suka la pulak kat template nih walaupun tak boleh nak embed benda-benda tu. Jenuh satu hari aku tanya pakcik Google yang Melayu yang Omputeh sambil mulut tak berenti mengunyah memang tak ada tutorial untuk benda ni kalau nak letak kat laman utama (main page). Siap bukak forum sana sini pun tak jumpa daaa. Abis tu kena tuka template ke? Lepas aku godeh sendiri, jadilah macam kat bawah ni.

Tengok pada Edit -Configure Blog Posts punya setting canteekk je kan? Tapi bila publish hampeh tak nampak; tak keluarpun.
Jadi buat sesapa yang berminat nak letak macam yang aku dapat buat tu, boleh cuba. Tak berjaya jangan saman aku aaa... Nanti aku pusing bagi pospon manyak kali sampai bertahun kes tertunda aja kat mahkamah tu. Buang duit je kan? Apa-apa hal pun bagi Expand Widget Template tu dulu:
Pastu korang cari kod ni sampai jumpa. Nak senang guna (CTRL + F) kat keyboard pastu taip kod pertama tu:
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13'
src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> </div>

<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>
</div>

Aku terangkan sikit (bukan bagi terangkan gambarlah, bagi penerangan). Untuk pos footer ni dia ada tiga (3) line; contoh macam kat atas tula. Korang boleh adjust nak letak atas bawah ke tak kisah janji dalam 3 baris je maksima. Html kodnya cam kat bawah ni (kalau nak nengok contoh satu-satu tengok balik kat atas tu aaa).

Aku letak beberapa kod html sebaris, nampak tak 5 barang tu kat baris pertama:

1. Kod grup kaler biru pertama untuk letak nama Author (bukan auta). Kemudian nanti korang boleh tuka 'Posted by' kepada benda lain kat Edit - Configure Bog Posts

2. Kod grup biru kedua tu untuk tarikh dan masa. Pun korang boleh adjust balik kat Edit - Configure Bog Posts kemudian

3. Kod grup biru ketiga tu untuk tunjuk komen. Haaaa ini la yang penting sekali sebab bila adanya link ni tak yah dah susah-susah nak klik Tajuk Entri kat atas atau kat kotak Archive.

4. Kod grup biru keempat apa ya... Kejap, oh untuk subscribe melalui emel. Siap ada gamba sampul surat lagi tu.

5. Kaler biru kelima tu sebaris je, untuk edit dan keluar gambar pensel.

Untuk baris kedua aku letak label kod (kaler merah). Jimat ruang sket sebab ada rakan blogger yang guna template lebey kurang cam ni letak semua label kat sidebar atau footer bawah sekali. Ada yang suka ada yang tak; jadi terpulang pada diri sendiri.

Dan last sekali baris ketiga kaler ijau tu ialah kod untuk sharing buttons.
<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>

<span class='post-icons'><!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
</span>

<!-- quickedit pencil --><b:include data='post' name='postQuickEdit'/>
</div>

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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>
</span>
</div>

<div class='post-footer-line post-footer-line-3'>
<div class='post-share-buttons'><b:include data='post' name='shareButtons'/></div>
</div>

</div>



Aku kan dah bagitau awal-awal dulu yang aku ni memang tak reti nak bagi tutorial. Jadi html kod kat atas tu aku kopipes letak kat Notepad pastu letak dalam Paint, tampal pulak kat sini. Kalau korang nak dan pandai bancuh kopi, ambikle. Kalau level sama cam aku - hehe bukak Notepad ke Word ke, salin satu-satulah (biar lambat asal selamat). Entah bila template designers akan selaraskan semua template otomatik ada widget-widget tu ; entah-entah aku ni yang tertinggal bas tak?

Kat bawah ni satu tin biskut lebih besar dari kerusi kat living hall rumah. Tengok isinya masih penuh 3 hari lepas. Mulut pulak tak berenti nak mengunyah.
Aku sorang belasah 3 hari je, hehe tempeyek tu adalah tinggal belen lima keping je kot lagi...
Alamak lapar balik, aku nak gi beli rotilah.

.
related posts plugin for wordpress, blogger...

^_^

9 comments:

  1. sekadar cadangan, kalau code panjang2 tu takde org akan follow. Sng je nak embed html code di entry, mula2
    1. Encrypt html code. Boleh guna laman web ni http://www.iwebtool.com/html_encrypter
    2. Kemudian, copy encrypted code and paste dalam entry.
    3. Dah habis tulis entry, cuba preview dulu.
    4. kalau semua ok, publish.

    Harap tips ni berguna.

    ReplyDelete
  2. @Affan; camtu ke. Aku memang tak tau mende. Makasih nanti aku cuba mana tau entri boleh bg pendek, kan...?

    ReplyDelete
  3. hehe ada yg faham ada kurang faham hehe

    ni nak hilg kan yg bawh 2 ka???

    ReplyDelete
  4. @fatin; erkkk bukanla. Ada blog yang tak de benda ni kat main page (esp kalau display satu entri aja). Jadi tambah kod bagi ada...

    ReplyDelete
  5. EU buat tutorial!!! Gila hebat tu..mak ni menda2 HTML ni mmg ngong terus ler..

    ReplyDelete
  6. @lagenda / mak; Wakakakak puncanya satu je. Aku tak nampak followers aku kat template lama. Tapi takpe kan kongsi ilmu (yang baru jumpa) ni...

    ReplyDelete
  7. Bila buat etry baru laman utama aku tertindih plak...camna ya nak layan benda ni

    ReplyDelete

Tulislah apapun, aku baca...