XHTML Blogger · Seksi Posting
Tabel Konten
Dalam Konsep
Konten Halaman:
Prolog:
Elemen posting pada umumnya adalah sebuah elemen <b:includable>
dengan id='post'
seperti ini:
<b:includable id='post' var='post'>
...
</b:includable>
Pada versi mobile, Anda akan melihatnya sebagai elemen ini:
<b:includable id='mobile-post' var='post'>
...
</b:includable>
Elemen tersebut berisi markup HTML yang mendukung penampilan posting:
<div class='post hentry'>
<h2 class='post-title entry-title'>
Judul Artikel...
</h2>
<div class='post-body entry-content' id='post-body-3907786755150251808'>
Konten artikel...
</div>
<div class='post-footer'>
Konten footer artikel...
</div>
</div>
Detail:
Judul Posting
Berupa elemen heading. Biasanya memiliki kelas post-title
dan/atau entry-title
:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Data | Keterangan | Tampilan/Contoh Tampilan |
---|---|---|
data:post.link | Elemen ini akan menghasilkan tautan lampiran yang nilainya Anda atur melalui editor posting | http://www.custom_link_url.com |
data:post.url | Elemen ini akan menghasilkan URL posting | http://nama_blog.blogspot.com/2012/11/lorem-ipsum.html |
data:post.title | Elemen ini akan menghasilkan judul posting | Lorem Ipsum |
Tubuh/Konten Posting
Berupa elemen divisi dengan kelas post-body
dan/atau entry-content
:
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
<div class='clear'/> <!-- clear for photos floats -->
</div>
Data | Keterangan | Tampilan/Contoh Tampilan |
---|---|---|
data:post.id | Elemen ini akan menampilkan ID posting | 3907786755150251808 |
data:post.body | Elemen ini akan menampilkan konten posting | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
data:post.snippet | Elemen ini akan menghasilkan ringkasan posting dalam 100 kata + ... | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut ... |
data:post.thumbnailUrl | Elemen ini akan menghasilkan URL thumbnail pertama di dalam posting dalam resolusi s72-c | http://4.bp.blogspot.com/-EJgQTkZZJXY/UI1J-2tM21I/AAAAAAAAFF8/09hfALvXkVY/s72-c/1389621_gaillardia.jpg |
data:post.firstImageUrl | Elemen ini akan menghasilkan URL thumbnail pertama di dalam posting dalam resolusi yang sesungguhnya | http://4.bp.blogspot.com/-EJgQTkZZJXY/UI1J-2tM21I/AAAAAAAAFF8/09hfALvXkVY/s1600/1389621_gaillardia.jpg |
data:post.authorPhoto.url | Elemen ini akan menghasilkan URL gambar foto profil penulis | https://lh4.googleusercontent.com/-nxgZmVx9WAM/AAAAAAAAAAI/AAAAAAAAAAA/q7C64RWrrU0/s1600/photo.jpg |
data:post.authorProfileUrl | Elemen ini akan menghasilkan URL profil penulis | http://www.blogger.com/profile/034065736413533XXXXX |
data:post.authorAboutMe | Elemen ini akan menghasilkan deskripsi profil penulis | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. |
Footer/Catatan Kaki Posting
Berupa elemen divisi. Biasanya memiliki kelas post-footer
:
<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>
<!-- quickedit pencil --><b:include data='post' name='postQuickEdit'/> <span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
<!-- Feature added by BTemplates.com -->
<b:if cond='data:post.sharePostUrl'>
<div class='post-share-buttons'><b:include data='post' name='shareButtons'/> </div>
</b:if>
</div>
<div class='post-footer-line post-footer-line-2'><span class='post-labels'> ... </span> <b:if cond='data:top.showMobileShare'>
<div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
<a href='javascript:void(0);'><data:shareMsg/></a>
</div>
</b:if>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'>
<data:post.dummyTag/>
</div>
</b:if>
<b:if cond='data:top.showMobileShare'>
<div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
<a href='javascript:void(0);'><data:shareMsg/></a>
</div>
</b:if>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'>
<data:post.dummyTag/>
</div>
</b:if>
</div>
<div class='post-footer-line post-footer-line-3'><span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span> </div>
</div>
Data | Keterangan | Tampilan/Contoh Tampilan |
---|---|---|
data:top.authorLabel | Label keterangan sebelum nama penulis | Diposting oleh: |
data:post.author | Elemen ini akan menghasilkan nama penulis | Taufik Nurrohman |
data:top.timestampLabel | Label keterangan sebelum waktu penerbitan | pada |
data:post.timestampISO8601 | Elemen ini akan menampilkan waktu penerbitan dalam format timestamp ISO 8601 | 2012-10-28T22:42:00+07:00 |
data:post.timestamp | Elemen ini akan menampilkan timestamp waktu penerbitan | 10:42 |
data:post.addCommentUrl | Elemen ini akan menampilkan URL posting dengan tambahan hash #comment-form | http://nama_blog.blogspot.com/2012/11/lorem-ipsum.html#comment-form |
data:post.addCommentOnclick | ??? | ... |
data:top.commentLabel | [?] | - |
data:post.numComments | [?] | - |
data:top.commentLabelPlural | [?] | - |
data:shareMsg | ??? | ... |
data:post.dummyTag | ??? | ... |
data:top.showLocation | ??? | ... |
data:post.location | ??? | ... |
data:postLocationLabel | Elemen ini akan menampilkan label lokasi sebelum keterangan lokasi penerbitan posting | Lokasi: |
data:post.location.mapsUrl | Elemen ini akan menghasilkan URL lokasi dalam peta Google (???) | ... |
data:post.location.name | Elemen ini akan menampilkan lokasi penerbitan posting yang telah dituliskan dalam formulir lokasi | Banyumas, Indonesia |
Jump Link/Read More Link
Elemen ini akan muncul saat Anda mengaktifkan jump link pada posting/memotong artikel dengan cara menyisipkan kode <!--more-->
:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>
Data | Keterangan | Tampilan/Contoh Tampilan |
---|---|---|
data:post.jumpText | Elemen ini akan menampilkan teks “Baca Selengkapnya” dari pengaturan posting | Read More » |
22 Komentar
Anonim
nah ini baru, saya tadinya mau nanya kode2 seperti ini :D
tapi apa bedanya nulisin kode data:top.authorLabel sama kita nulis manual "Di posting oleh" bla bla bal
Damar Zaky
beda bahasa bang :D
Putra
sepintas ~
underground404.blogspot.com/2012/06/kode-logika-blogger-blogspot.html
belum sekomplit diatas =D
Unknown
Mas dari yang saya lihat klo data:top.commentLabel akan menghasilkan tulisan comment sedangkan klo yang ini data:top.commentLabelPlural tulisannya akan jadi comments itu klo dalam bahasa inggris tidak tau klo bahasa indonya..
Taufik Nurrohman
Ya, itu memang untuk keperluan bahasa yang memiliki perbedaan istilah antara bilangan singular dan plural. Orang Indonesia bisa menuliskan akhiran `komentar` setelah jumlah tanpa perbedaan:
Tapi negara-negara tertentu tidak begitu:
Anonim
oh jadi semuanya itu menyangkut bahasa. mungkin pada saat halaman di tranaslate yah.
Taufik Nurrohman
Lebih tepatnya di pengaturan bahasa dalam Dashboard Blogger. Kalau kita cuma menuliskan teks label secara langsung ke dalam template, kemungkinan yang mau memakai template kita cuma orang lokal saja karena beberapa label template tidak bisa berubah bahasa meskipun pengaturan bahasa sudah diganti.
Beben Koben
good good 2 :D
Damar Zaky
data:post.numComments
itu tuh ada berapa komenya di suatu post mas :D
Damar Zaky
masudku itu menunjukan jumlah komentar orang yang ada di post mas
Taufik Nurrohman
Tabelnya mau Saya pindah ke artikel khusus seksi komentar. Simbol
[?]
maksudnya tautan lanjutan (menurut blog ini). Link akan diedit saat artikelnya sudah ada ;)Unknown
widiiw mantep nih, masih dalam konsep tp sepertinya bakalan detil banget. Gelar tiker ah, sambil nyiapin kopi \o/
Lanjut masbro :-bd
tes
mas saya mau nanya ni , jangan di ketawain ya :p* pembahasan di atas ini berguna untuk apa mas ? saya gk paham , makanya saya bertanya untuk dapat ilmu baru :D
EM
permisi, menurut apa yang bisa saya tangkap, penjelasan di atas itu berguna untuk mengenal lebih jauh tentang elemen-elemen penyusun blogger.
ini sangat bermanfaat sekali lho, terlebih bagi para blogger yang suka main koding template.
dan juga bagi blogger awam seperti saya, bisa menambah ilmu.
Saeful Rahman
Maaf mas saya ingin bertanya seputar kode HTML pada sebuah template blogger. Saya mencoba menghapus kode2 yang saya rasa tidak perlu, selama saya menghapus kode tersebut tidak ada masalah sampai saat ini.
Berikut beberapa kode yang saya hapus pada tempe blogger :D
Saya juga menghapus kode HTML pada mobile, karena menurut saya kode tersebut tidak penting karena sudah ada yang namanya responsive.
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
Gimana pendapat mas tentang hal ini, apa kegunaan dari kode2 diatas ??
Taufik Nurrohman
Yang dihapus isinya saja, tapi elemen
<b:includable>
-nya jangan. Kalau dihapus biasanya Blogger akan mengembalikan elemen tersebut secara otomatis.Saeful Rahman
ok :-d
Unknown
mas klau markup html buat posting kya yg di bawa ini, cara merakit code <b:includable id='post' var='post'> gmna ya :D
Taufik Nurrohman
Kalau harga dan ID produknya lain-lain itu agak susah untuk dibuat, karena di editor posting tidak ada bidang pengisian harga dan ID produk. Kecuali kalau markup HTML tersebut ditulis secara manual di dalam konten posting.
Anonim
Min, kalau yang
<data:post.timestampISO8601/>
itu kan waktu publishnya, nah kalau untuk mengetahui waktu terakhir di update gimana ?Taufik Nurrohman
Kalau di dalam JSON ada, tapi kalau di data XML Saya belum tahu.
Anonim