Thursday 7 May 2009

Understanding detail of xml blogger Post Body



by Novan D. Cahyono 9 comments

This time, I will share my tutorial, this time about blogger theme, especially focus on blogger post body area

Sebelum Kita Membuat Template Blogger, Saya akan memberikan Ulasan mengenai struktur element dalam blogger xml supaya anda lebih mengerti dalam memodifikasi Template selanjutnya, sehingga nantinya akan bisa memodifikasi template dengan menambah element di bagaian footer, header, sidebar maupun di bawah post body.

before starting , I will give You the analysis of element structure in the post body template Blogger Blogspot xml or html format ( it is same) so you can understand how to modify blogger template easier and nicer

Struktur Awal

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html
expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
Informasi Blog dan Seo (Blog Information)
<b:skin>/*</b:skin>
Informasi Pembuat Template (Template designer information)
<style type='text/css'>
Tempat Meletakkan Code CSS (Css Code, put here!)
</style>
</head>
<body>
Tempat Code HTML yang akan tampil di Web Browser
</body>
</html>


Contoh : kali ini dibagian dan terdapat skin dan style tempat code css diletakkan

(in this part between and there is skin and style, here you can put your css code)


<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<meta name="Description"
content="tulis beberapa informasi tentang blog anda disini"/>
<b:skin>/*</b:skin>

<!--
Blogger Template Style
Name:
Designer: Novan Dwi Cahyono
URL: infonovan.blogspot.com-->

<style type='text/css'>
Tempat Meletakkan Code CSS (anda)
</style>
</head>

Dan yang paling penting adalah bagian ini yang menentukan kualitas blog anda.
And this is the most important part to know your blogspot template quality

<body>
Tempat Code HTML yang akan tampil di Web Browser
</body>


Inilah section pembuka pada post.body template anda, tempat posting dan merupakan bagian utama dalam pembuatan blog anda bukan ?. kalimat showaddelement='no' artinya anda tidak akan bisa menambahkan element widget padabagian ini
Below is the opening section in the your “post.body” a posting place and the main page in your page, isn’t it?

The “showaddelement='no' “ mean that you cant add widget element her
e

<div id='main_left'>

<b:section id='main_s' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a class='blog-pager-newer-link'
expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'>
<data:newerPageTitle/></a> </b:if>
<b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link'
expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'>
<data:olderPageTitle/></a> </b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link'
expr:href='data:blog.homepageUrl'>
<data:homeMsg/>
</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a
class='home-link'
expr:href='data:blog.homepageUrl'>
<data:homeMsg/>
</a> </b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

pada bagian di atas anda menjumpai class='blog-pager-newer-link', class='blog-pager-newer-link', class='home-link' ini yang ditampilkan adalah bagian bawah post body yang tertulis " OLDER POST, NEWER POST DAN OLDER" customisasilah sesuai keinginan. anda dengan menambah (warna) latar belakang agar lebih menarik tentunya dengan melihat bagian css yaitu pada bagian ".blog-pager"
at this section you will see [class='blog-pager-newer-link', class='blog-pager-newer-link', class='home-link'] this appearing below post body " OLDER POST, NEWER POST DAN OLDER", customize!, like adding background in order to make yours good, exactly in ".blog-pager" in css code


Kode berikutnya yaitu pembuka post body halaman.
The next Code is the opening post body page.


<<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2>
<b:if cond='data:post.link'> <a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'> <a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>


Dibawah judul setiap Postingan akan terlihat Kategory ( saya menyebutnya sebagai tag )
seperti pada template saya yaitu pada bagian di bawah ini.
Under title every Post will seen Category ( I call it as tag ) like at my template at part hereunder.

<!-- TAG -->
<div class="post-tag">
<b style="border-right:solid 1px #CCCCCC; padding-right:10px;
margin-right:10px;">Tag</b>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url+
&quot;?max-results=10&quot;' rel='tag' style="border-right:solid 1px #CCCCCC;
padding-right:10px; margin-right:10px;">
<data:label.name/>
</a>
<b:if cond='data:label.isLast != &quot;true&quot;'></b:if>
</b:loop>
</b:if>
</div>

<!-- SHARE POST TOP -->
<div class="comment">
<b:if cond='data:post.allowComments'> <b><a class='comment-link'
expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1
<b:else/>
<data:post.numComments/>
</b:if>
</a></b> </b:if>
comments
</div>

Dari bagian ini anda dapat menambahkan badge - badge untuk men-share postingan yang bertujuan untuk menaikkan traffik blog anda seperti delicious, twitter, bloglog, digg, dan lain-lain.
from part of your this you can add badges to share you articel which aim to boost up traffik your blog like delicious, twitter, bloglog, digg, etc.

urutan selanjutnya anda akan menjumpai kode berikut, ini adalah yang paling penting, sebuah postingan teks akan muncul atau tidak pada halaman utama, disini pula anda dapat memodifikasi dengan memringkas artikel dengan expandable post link atau lebih terkenal dengan kata read more ( kebanyakan para pemula sangat antusias untuk merubahnya pada kali pertama membuat blog di blogspot)
sequential hereinafter you will meet code following, this is most importantly, a post text will emerge or not on main page, here you can also modifies by summarizing article with expandable post link or more famous with word read more ( mostly the very enthusiastic beginners to change it at times firstly makes blog in blogspot)


<div
class='post-body-n'><p>
<data:post.body/></p>
<div style='clear: both;'/>
<!-- clear for photos
floats -->
</div>


urutan berikutnya adalah footer post (tapi bukan bagian footer template halaman)
the next sequence is footer post ( but non part of footer template yard)


<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<div class="spacer"/>
<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'> <span
class='email-post-icon'>&#160;</span></a></span></b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</p>
<!-- Show Post Tag -->
<p class='post-footer-line post-footer-line-3'></p>
<br/>
</div>

selanjutnya adalah end tag div untuk menutup
</div> Kode penutup untuk element ( <div class='post hentry'> )
</b:includable> Kode penutup Untuk pembuka post body halaman (<b:includable
id='post'var='post'> )


Nah, next dengan

<b:includable id='commentDeleteIcon' var='comment'> <span expr:class='"item-control
" +
data:comment.adminClass'> <a expr:href='data:comment.deleteUrl'
expr:title='data:top.deleteCommentMsg'> <span
class='delete-comment-icon'>&#160;</span></a></span></b:includable>


Bagian Selanjutnya (Next Code)

<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>
<b:else/>
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>


Dan selanjutnya (Next)

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap-n'>
<div class='status-msg-body-n'>
<data:navMessage/>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Dan selanjutnya lagi (hmm… next again)

<b:includable id='backlinkDeleteIcon' var='backlink'> <span expr:class='"item-control
" + data:backlink.adminClass'> <a expr:href='data:backlink.deleteUrl'
expr:title='data:top.deleteBacklinkMsg'> <spanclass='delete-comment-icon'>&#160;</span></a></span></b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url'
expr:type='data:f.mimeType' target='_blank'>
<data:f.name/>
(
<data:f.feedType/>
)</a></b:loop>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'> <span expr:class='"item-control " +
data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <span
class='quick-edit-icon'>&#160;</span></a></span></b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div id='backlinks-container' style="font-size:12px;">
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
<div class='comments' id='comments'><a name='comments'/>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.allowComments'> <b><a class='comment-link'
expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1
<b:else/>
<data:post.numComments/>
</b:if>
</a></b> </b:if>

Bagian dibawah ini adalah post comment [ anda mau terdapat kotak komentar untuk para visitor
berkomentar atau hanya sebagai command button (post a Comment) seperti Punya saya ] yaitu antara tag </dl> dan </b:if>


<div class="spacer"/>
<dl id='comments-block' style="font-size:13px; color:#333333;">
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-"
+ data:comment.id'/>
<b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'> <span class='deleted-comment'>
<data:comment.body/>
</span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='"#comment-"+data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></span></dd>
</b:loop>
</dl>
</b:if>
</div>

</b:includable>


bagian Kode di bawah ini adalah bagian Penutup (End Code)

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<div class='date-header'>
<data:post.dateHeader/>
</div>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
<b:include data='post' name='comment-form'/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
</b:includable>
</b:widget>
</b:section>


</div>



Kamu akan melihat tag kode seperti ini di atas

</dl>
</b:if>
</div>

</b:includable>
Diantara tag </dl> dan </b:if> Kamu akan menjumpai kode seperti ini
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>


Ini merupakan Kode untuk Menampilkan Sebuah Button “ Post a Comment” atau anda dapat juga menggantinya sebagai kotak komentar langsung ( saya tidak memasangnya di Blog saya ) untuk menggantinya cukup me-replace kodenya dengan ini
This is code to show Button " Post a Comment" or you can also changes it as comment box of direct ( I don't install it in my Blog ) to change it, enough you replace above the code is herewith

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/> <b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if> </b:if> </p>


Berikut Ini, Kode Untuk Menambah opsi untuk add alement di template blogger anda
And the last is like here, to add some add element in order to add a widget easily.


<b:section id="tambah element"> </b:section>

dan jangan lupa jika ingin menambah cukup kopy pastekan kode lengkap di atas ke bagian template blogger, tetapi bagian id="element1" harus ganti kata "element1" menjadi misal elementaddsense, elementsaya3 dan seterusnya, yang penting tidak boleh ada id yang sama.



Any Suggestions ?

Share this post:
|
Comments 9 comments
Bagaimana menurut kamu ? Subscribe to my feed


Anonymous said...

Hi Novan.
I am using the same blogger template and I am asking for your help.
Now only the titles of the posts appear on my main page. I would like to display a part of each posts with a 'read more' option, just like you do.
Is it enough to modify the code or should I change other settings?
Please check my blog and send me a mail to: nowhere.else@hotmail.comThanks very much!
http://artbypi.blogspot.com/

Novan said...

Hi friend,
you asked about showing the post text, right?
It's not too difficult.
I have posted this tut earlier.
Follow this link
feel free to ask!

Anonymous said...

Tutorial yang sangat bagus sekali! Mas Novan, saya mau tanya, apa kegunaan b: dalam template blogger? misalnya: mengapa hanya sebagian yang menggunakan b:?

Ngomong-ngomong aplikasi Novs Config 1.0b.exe-nya keren juga ya!

Anonymous said...

Misalnya: <b:include data='post' name='comment-form'/>. mengapa hanya sebagian yang menggunakan b:, sementara yang lainnya tidak menggunakan b:? Maaf Mas, Tag HTML terpotong jadi saya bikin komennya dua.

Novan said...

@Asep Hibban,



terima kasih, saya senang mas asep telah menggunakan aplikasi Novs Config.



sebelumnya maaf, kalau kalau sudah lama menunggu balasan,







fungsi seperti ini adalah custom tag yang digunakan untuk mendefinisikan struktur blogger template sendiri,

mungkin tags ini dapat diartikan sebagai "meta language", ini bukan html

Tag ini hanya oleh Blogger dan Blog hanya berisi valid ketika dipublish



informasi tambahan disini :

http://www.google.com/support/blogger/bin/answer.py?hlrm=fr&answer=46995

http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=46995

Novan said...

@Asep Hibban,

terima kasih, saya senang mas asep telah menggunakan aplikasi Novs Config.

sebelumnya maaf, kalau kalau sudah lama menunggu balasan,

fungsi seperti ini adalah custom tag yang digunakan untuk mendefinisikan struktur blogger template sendiri,
mungkin tags ini dapat diartikan sebagai "meta language", ini bukan html
Tag ini hanya oleh Blogger dan Blog hanya berisi valid ketika dipublish

informasi tambahan disini :

http://www.google.com/support/blogger/bin/answer.py?hlrm=fr&answer=46995
http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=46995

Tutorial Komputer said...

trims infonya bagus,,,

http://www.dije.web.id

Anonymous said...

Everything is very open with a precise clarification of the issues.
It was really informative. Your website is useful. Thanks for sharing!


Here is my website :: Wlps Litigation Settlement Fund | Hypnosis Tips and Advice

Novan said...

thanks for appretiating it folk

Post a Comment

Saya Novan Dwi Cahyono , tidak akan sanggup untuk membuat negara menjadi bangkrut karena secara substansial aku tidak membayar dimuka untuk pengabdianku.


------------- Penyejuk Hati -----------
Pelayanan yang kita berikan kepada sesama itu sesungguhnya, sewa yang kita bayar untuk tempat di bumi ini. Jelaslah manusia itu menempuh perjalanan bahwa maksud dunia ini bukanlah untuk memiliki dan mendapatkan, melainkan untuk memberi dan melayani.

Program Baru

New Cool Tools !
Novs Creator (600Kb) , tools portable (tanpa install) multifungsi yang membuat computer system Windows bebas worm tanpa antivirus dan sejenisnya hanya dengan beberapa sentuhan. Membuat pengguna semakin pintar dengan Win@os, include : shell portable(command prompt), Autoruns, Rootkit Unhooker, Bobo Regedit. download , passwordnya : "infonovan" tanpa kutip, coba kehandalannya!

Subscribe feeds rss Berlangganan Artikel

Ketikkan E-mail Anda di sini untuk berlangganan artikel

Kategori Teknologi 2009 - 2010

Kategory

Subscribe Posting terakhir

Langganan komentar Komentar terbaru

Join in this Site


Berbincang