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
<!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)
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<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
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 here
<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.
<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.
<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+
"?max-results=10"' rel='tag' style="border-right:solid 1px #CCCCCC;
padding-right:10px; margin-right:10px;">
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'></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)
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)
<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'> </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
" +
data:comment.adminClass'> <a expr:href='data:comment.deleteUrl'
expr:title='data:top.deleteCommentMsg'> <span
class='delete-comment-icon'> </span></a></span></b:includable>
Bagian Selanjutnya (Next Code)
<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: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)
" + data:backlink.adminClass'> <a expr:href='data:backlink.deleteUrl'
expr:title='data:top.deleteBacklinkMsg'> <spanclass='delete-comment-icon'> </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'> </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 + "_backlinks-container"'>
<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>
<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
</b:if>
</div>
</b:includable>
<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
<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.
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 ?
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/
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!
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!
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.
@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
@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
trims infonya bagus,,,
http://www.dije.web.id
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
thanks for appretiating it folk
Post a Comment