Like it? Tweet it! for Blogger, WordPress, Tumblr

Jalan-jalan ke web developer selalu menemukan yang fresh, baru, informatif dan gaya :D Postingan kali ini tidak jauh-jauh dari postingan BeBeN si bloglang anu ganteng kalem tea mengenai retweet sob ;)) Sebenarnya tombol berbagi via tweeter untuk weblog artikel kali ini :D

Widget jebolan dari pongsocket ini memang bergaya dan good punya :-bd Didasarkan dengan Twitter’s new API menghindari dari auto tweet pada artikel yg akan di retweet :P

Installation

► Fast installation guides for :WordPress | Tumblr | Blogger

Salam and happy blogging \m/ See you :-h

Panoramio Widgets For Blog

Belum lama mosting tentang Add Your Album to Blogger, eh ada informasi dari blogger in draft mengenai memasukkan album photo-photo kita kedalam blog juga :D Kolaborasi antara Panoramio dan blogger blog menghasilkan kreasi yang gaya punya b-) Untuk membaca artikel dan demonya silahkan sobat Panoramio Widgets let you add photos from around the world to your blog. Tuh disamping kiri contohnya juga sob ;)) ;)

Asterpix SearchLight Program Application

Ada kabar gaya nih sob. Sobat mungkin sudah tahu widget related post (artikel terkait), ataupun related post bergaya LinkWithin :-/ Pernah dengar mengenai Asterpix SearchLight? Jika belum maka inilah salah satu web yang memberikan layanan seperti related post :D Dengan menggunakan patent-pending PhraseMatch technology b-) membantu para pengunjung dan pemilik web untuk mencari konten yg benar-benar relevan. Dengan membantu mencarikan konten yg tepat ini maka dapat meningkatkan pengunjung per halaman dari weblog sobat :-bd

Hadir dengan beberapa format dan warna serta dapat memasukkan adsense google yg sobat miliki kedalamnya memberikan nilai lebih dari layanan ini. Impressions served saat ini sebanyak 1,286,140,031 :-O Yang sobat butuhkan adalah sebuah situs weblog dengan konten yang dapat diterima dan URL yang valid :D Free coy free...=P~

Sign-up disini untuk mendapatkan feature web ini :D Kalau mau lihat demonya langsung saja berkunjung ke yg punya informasi.Source by : TipsoTricks

Post Includable Part II

Dua postingan sebelumnya Page Layout Default Blogger dan Post Includable Part I yang tidak lain membedah kode-kode yg ada didalam template default blogspot. Lanjutan nih sob :D

The Post Title

The post title atau judul dari postingan. Judul postingan ini biasanya ditampilkan dalam bentuk hyperlink yg apabila diklik akan memasuki ke link yg dituju :D Kalau tidak ada yaa tidak akan masuk kemana-mana alias menjentul :"> Kode pada the title post...

<b:if cond='data:_post.title'>
<h1 class='post-title'>
<b:if cond='data:_post.link'>
<a expr:href='data:_post.link'><data:_post.title/></a> <!-- External link -->
<b:else/>
<b:if cond='data:_post.url'>
<a expr:href='data:_post.url'><data:_post.title/></a> <!-- Post permalink -->
<b:else/>
<data:_post.title/> <!-- Post title without a link -->
</b:if>
</b:if>
</h1>
</b:if>

Itu struktur kode untuk sebuah judul post ;)

Post Body

Badan post kali yak :P Pada bagian ini dikemas dengan sebuah elemen "P"

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

Post Footer Line 1

Struktur dari baris post footer ini sbb :

<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>Authorname</span>
<span class='post-timestamp'>Timestamp</span>
<span class='post-comment-link'>Commentlink</span>
<span class='post-icons'>Email Icon and QuickEdit Pencil</span>
</p>

Authorname

Widget blog yg dikonfigurasikan untuk menampilkan nama dari si penulis. Label default pada kode ini biasanya bertuliskan "Posted by"

<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:_post.author/>
</b:if>
</span>

Jadi bagi sobat yg mau ganti tulisan Posted by ya cari kode itu, yihaaa :-"

Timestamp

Widget blog yg dikonfigurasi untuk menampilkan waktu. Disertai permalink yg menuju hanya pada halaman tertentu.

<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' title='permanent link'><data:_post.timestamp/></a>
</b:if>
</b:if>
</span>

Kode diatas menampilkan teks/label pada permalink. Default teksnya biasanya "at" atau "di" :D

Commentlink

Segala yg berbau komentar ya diatur oleh perintah ini sob :)

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'> <!-- if the page is NOT an itempage, display the link -->
<b:if cond='data:_post.allowComments'> <!-- if the post allows comment to be made, display the link -->
<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>
</span>

Default teks/label dari komentar ini "comments" Pusing neranginnya ah ;)) Pokoknya yg bersangkut paut dg komentar ada pada kode itu.

Email Icon and QuickEdit Pencil

Post icon ini ada dua, email dan pensil :P Biasanya link pada post yg berupa gambar email kecil serta quick edit yg digambarkan oleh icon pensil.

<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>

Post Footer Line 2

Garis post ini tak lain yg menampilkan label pada postingan. Secara default biasanya bertuliskan "labels"

<span class='post-labels'>
<b:if cond='data:_post.labels'> <!-- if the post has labels, display them -->
<data:_postLabelsLabel/>
<b:_loop values='data:_post.labels' var='label'> <!-- loop through all labels -->
<a expr:href='data:_label.url' rel='tag'><data:_label.name/></a>
<b:if cond='data:_label.isLast != "true"'>,</b:if> <!-- if there is another label, display a colon as separator -->
</b:_loop>
</b:if>
</span>

Post Footer Line 3

Pada baris ini kosong, dan biasanya untuk mempermudah kita mengedit pada icludable.

Styling classes

Macam gaya classes yg sering digunakan dalam includable.

Class
post
post-title
post-header-line-1
post-body
post-footer
post-footer-line
post-footer-line-1
post-author
post-timestamp
timestamp-link
post-comment-link
comment-link
post-icons
item-action
email-post-icon
post-footer-line-2
post-labels
post-footer-line-3
Prodigy of Head

Blogger Data Tags

Daftar tag data yg sering dipakai dalam includable ini.

Data Tag	Description
data:top.showAuthor	'true' if the Blog Widget is configured to show the author name
data:top.authorLabel	the phrase preceding the author name (default value: 'Posted by')
data:top.showTimestamp	'true' if the Blog Widget is configured to show the timestamp
data:top.timestampLabel	the phrase preceding the timestamp (default value: 'at')
data:top.commentLabel	the phrase showing the number of comments, single (default value:'comment')
data:top.commentLabelPlural	the phrase showing the numer of comments, plural (default value:'comments')
data:blog.pageType	the type of the current page
data:_post.id	the unique id-number of the post
data:_post.title	the post title
data:_post.link	the url of the (external) webpage the post is pointing to
data:_post.url	the post permanent lnk
data:_post.body	the post body
data:_post.timestamp	the post timestamp
data:_post.allowComments	'true' if making comments is allowed for this post
data:_post.addCommentUrl	the url of the comments form
data:_post.addCommentOnclick	-
data:_post.numComments	the number of comments on this post
data:_post.emailPostUrl	the url of the email form
data:_post.emailPostMsg	the tooltip message of the email icon link
data:_post.labels	the list of labels assigned to the post
data:_postLabelsLabel	the phrase preceding the list of labels (default value: 'Labels:')
data:_label.url	the url of the page listing all posts with this label
data:_label.name	the name of this label
data:_label.isLast	'true' if this label is the last one of the list

Thanks a lot for http://beautifulbeta.wikidot.com Download disini untuk mendapatkan blogger cheat sheet Blogger Cheat Sheet (PDF, english).

Post Includable Part I

Lanjutan tulisan kemarin mengenai dalaman template Page Layout Default Blogger. Tulisan yg itu kan membahas 4 bagian utama yg ada pada daleman template bawaan blogspot. Sekarang kita bedah sesi Includable pada template. Adapun syntax includable pada template blogspot ini biasanya berbentuk...
<b:includable id="name" var="data">
...
...
</b:includable>

• id = unik/nama id
• var = optional dari id, mungkin variabel ya ;))

Untuk contohnya :

1. <b:includable id='backlinks' var='post'>
2. <b:includable id='post' var='post'>
3. <b:includable id='comment-form' var='post'>
4. ...

Itulah syntax includable beserta variabelnya. Untuk lebih mudahnya mari tengok daftar tabel berikut ini.

Widget Type	Includable id	Includable var
Blog	backlinkDeleteIcon	backlink
...	backlinks	post
...	commentDeleteIcon	comment
...	comments	post
...	feedLinks	---
...	feedLinksBody	links
...	main	top
...	nextprev	---
...	post	post
...	postQuickEdit	post
...	status-message	---
BlogArchive	flat	data
...	interval	intervalData
...	main	---
...	menu	data
...	posts	posts
...	toggle	interval
Header	main	---
Label	main	---
Profile	main	---

Hehehe...:D Kita memasuki pada fase yg lebih dalam (bagian yg lumayan puyeung sob) :p Kalau sudah terbayang dengan apa yg dipaparkan diatas tadi, maka pada fase ini akan lebih terlukiskan deh ;) (lukisan???) [-( Langsung yuk kita bedah :p

Struktur includable pada main post.

Pada umumnya struktur pada bagian utama postingan ini memiliki bentuk...

<div class='post'>
<a name='post-id'/>
<h1 class='post-title'>Post Title</h1>
<div class='post-header-line-1'/>
<div class='post-body'>
<p>Post Body</p>
</div>
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>Author Timestamp Comments Email Edit</p>
<p class='post-footer-line post-footer-line-2'>Labels</p>
<p class='post-footer-line post-footer-line-3'/>
</div>
</div>

Jangan bingung sob, mungkin kode-kode diatas tidak akan sama dg yg ada di template kalian. Secara umumnya begitu sih ;)) Tips :

Kalau ada kode dg menggunakan "ID" maka ini berlaku untuk ID itu saja, kalau untuk kode dg menggunakan "CLASS" ini bisa dipanggil berkali-kali

Kembali pada kode struktur diatas tadi :) Pada struktur diatas disatukan (dikemas) menggunakan html DIV-element. Pada bagian judul post terkemas dalam tag <h1> Kode yg berwarna hijau, baris kosong pada bagian header, dimana pd default blogger tidak ditemukan dan akan ada pada template modifikasi :D Masuk ke bagian footer sobat melihat ada 3 baris pos (post-footer-line) Biar cepet penjelasannya ;) ketiga baris pos yg dimaksudkan diatas itu secara garis besar nama author, label postingan, dan kosong satu guna mempermudah dalam pengeditan template disaat sobat berada pada Editor Template. Kalau sudah mahir kita dapat bermain-main dg ke-3 kode baris pos tsb! Masih ingat dong dg keistimewaan "CLASS"
UPDATE Click to expand here

<?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 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>	The usual html header stuff.
<title><data:blog.pageTitle/></title>	Here's something interesting. New code for the blog title within the standard <title> tags. <data:blog.pageTitle/> inserts the name of the Blog from your template settings.
<b:include data='blog' name='all-head-content'/>	And here's a line that appears to enter any blog template head information. I don't know that there is any right now. Maybe it's a placeholder.
<b:skin><![CDATA[ /* * Blogger Template Style * * Sand Dollar * by Jason Sutter * Updated by Blogger Team */	The <b:skin> tag encloses the template. There's a </b:skin> at the bottom of the template part of the header. I'm not sure what the <![CDATA[ is doing. Perhaps enclosing the skin data? According to an anonymous commenter: On <![CDATA[: That's simply making it so that they don't have to replace every instance of < with the &lt; entity, since there are <Variable> XML-style declarations within the block. CDATA just tells XML not to parse the data within the block until it reaches the closing ]]>, when it resumes normal XML processing. You can <![CDATA[]]> anywhere outside a tag in an XML document. Note that the template has been "Updated by Blogger Team".
/* Variable definitions ==================== <Variable name="textcolor" description="Text Color" type="color" default="#000" value="#000"> <Variable name="bgcolor" description="Page Background Color" type="color" default="#f6f6f6" value="#d2dbff"> <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#F5DEB3" value="#cccccc"> <Variable name="pagetitlebgcolor" description="Blog Title Background Color" type="color" default="#DE7008" value="#006699"> <Variable name="descriptionColor" description="Blog Description Color" type="color" default="#9E5205" / value="#e6e6e6"> <Variable name="descbgcolor" description="Description Background Color" type="color" default="#F5E39e" value="#9eb0f5"> <Variable name="titlecolor" description="Post Title Color" type="color" default="#9E5205" value="#006699"> <Variable name="datecolor" description="Date Header Color" type="color" default="#777777" value="#993300"> <Variable name="footercolor" description="Post Footer Color" type="color" default="#444444" value="#444444"> <Variable name="linkcolor" description="Link Color" type="color" default="#DE7008" value="#DE7008"> <Variable name="footerlinkcolor" description="Post Footer Link Color" type="color" default="#968a0a" value="#3a9900"> <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#DE7008" value="#DE7008"> <Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#B8A80D" value="#993300"> <Variable name="sidebarlinkcolor" description="Sidebar Link Color" type="color" default="#999999" value="#009949"> <Variable name="bordercolor" description="Border Color" type="color" default="#e0ad12" value="#006699"> <Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-Serif" value="normal normal 99% 'Trebuchet MS',Trebuchet,Verdana,Sans-Serif"> <Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal bold 150% Verdana,Sans-serif" value="italic bold 121% Verdana,Sans-serif"> <Variable name="dateHeaderFont" description="Date Header Font" type="font" default="normal bold 105% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal bold 86% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif"> <Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal bold 300% Verdana,Sans-Serif" value="normal bold 270% Verdana,Sans-Serif"> <Variable name="titlefont" description="Post Title Font" type="font" default="normal bold 160% Verdana,Sans-Serif" value="normal bold 117% Verdana,Sans-Serif"> */	Some of the layout styles are defined here as "variables". Note that they are commented out (/* */), which I assume means that they are only used by Blogger Layouts, not in the actual html coding. Essentially, this is a place to store all of those font and color choices you can make in the Layouts. Some of the template choices don't seem to have all of these options. I picked one with a lot of flexibility, and I get to set a lot of color and font options. Color of post text Page background color Title text color Title background color Heading description btextcolor Heading description background color Post title text color Post date header text color Post footer text color Post links text color Post footer links text color Post visited links text color Sidebar title text color Sidebar links text color The color of any borders The font of all of the text in the body The font of all of the text in the sidebar The font of the date headers The font of the blog title The font of post titles That's a lot of flexibility.
body { margin:0px; padding:0px; background:$bgcolor; color:$textcolor; font-size: small; } #outer-wrapper { font:$bodyfont; } a { color:$linkcolor; } ... Lots o' deletions ... /** Tweaks for layout editor preview */ body#layout #outer-wrapper { margin-top: 0; } body#layout #main, body#layout #sidebar { margin-top: 10px; padding-top: 0; }	I deleted a lot of the styles here, as there's nothing all that special about them. However, it is interesting to see the "variables" defined above showing up here in the styles. For example, the body wrapper is defined with a background of "$bgcolor" and a text color of "$textcolor", both of which are defined above. Then, at the bottom are some "Tweaks for layout editor preview." Setting some padding and margins, but I couldn't tell you why or what for.
]]></b:skin> </head>	Here's the closer for the <![CDATA[, <b:skin>, and <head>.
<body> <div id='outer-wrapper'><div id='wrap2'>	Now we start the body, the stuff that actually shows up in a browser. The wrappers are standard stuff that appears in the old templates (and many other styled web pages).
<!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span>	It's nice that the folks at Blogger are worried about text browsers, but how many text browsers are still out there and do I really care if they read my blog? Text browsers are valuable and necessary tools for the internet and Blogger are Mensa-level geniuses to include this code snippet in their template. (Please stop the harassment now.)
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='FTTX News (Header)' type='Header'> <b:includable id='main'> <div class='titlewrapper'>	Here's the first expanded widget - the header widget, encased in a standard set of<div> tags. The <b:> tags are new, and appear to be a way to indicate information to Blogger (see more below). This one includes the ID entered in the layout (Header1) and the title (FTTX News) plus some Blogger-specific information about it being locked and of the type "Header". Items listed as "includable" are called later with "include". That's a very nice idea, and one that took me a while to figure out. Includable items that I found defined were: Main = The title and description, then later the main blog content, then later the sidebar content. And this one never gets called with a "include" statement. Some confusion here will hopefully be sorted out later. Comments = The detailed comments postQuickEdit = The icon and code for quick editing from the main page backlinkDeleteIcon = exactly what it says feedLinksBody backlink feedlinks nextprev commentDeleteIcon post flat menu interval toggle posts Interestingly, I can't find a way to move the "Header" layout widget to anywhere else on the layout page. For example, I wanted to put the header over the main content, but not over the sidebar. No dice. Moving it in the template results in a "invalid template" error.
<h1 class='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </h1> </div>	Very interesting. An embedded "if-then" statement in the template. Another advantage of the <b:> tags. The "data:" construct appears to be the new way to reference what used to be Blogger tags. There are no definitions available yet from Blogger, but I'm guessing the definition of these data objects blog.url = the currnet URL for the blog page blog.homepageUrl = the URL of the homepage of the blog In this case, if the current URL equals the homepageURL (i.e., you're on the main page), then the title doesn't have an embedded link. If you're on another page (e.g. an archive page), then the title becomes a link back to the main page. Pretty slick.
<div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:includable> </b:widget> </b:section> </div>	And here's where the Blog description get printed out, safely within its own wrapper. Here's another data field description: The blog description (duh!) The wrapper, of course, uses the variable and styles above as defined in the Layout editor by calling the "descriptionwrapper" class defined in the header.
<div id='content-wrapper'>	This is a big division, with all of the content including the main and sidebar. Other than that, nothing special.
<div id='main-wrapper'>	And the wrapper for the main content (not sidebar). Again, nothing special or new.
<b:section class='main' id='main' showaddelement='no'>	This however, is Blogger specific. It defines the main section that shows up in the Layout editor. It also says that it's not possible to add any elements to this section, something that you can experience for yourself in the Layout editor. The main section is for posts only. Personally, I don't use the main part for anything other than posts, so maybe this limitation isn't too bad.
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>	Another widget expanded - the posts. If you note in the Layout editor, this widget has some components that you can add (they show up below). This line appears to indicate the start of the individual page content, but it's not entirely clear what all is going on here. It looks like this one line puts in all of your post content, including the footer, labels, etc.. That's a lot of work in such a small number of characters. It remains to be seen if that will be a problem.
<b:includable id='comments' var='post'> <div id='comments'> <a name='comments'/> <h4> <b:if cond='data:post.numComments == 1'> 1 Comment: <b:else/> <data:post.numComments/> Comments: </b:if> </h4>	The first includable sub-widget is the comments. This widget only prints when you go to a specific entry and are looking at the comments - it's not on the main page of the blog. That's the magic of the include/includable constuct. Again, a nice if-then statement so that if there is only one comment, the blog prints "1 Comment". If there are more than one comments, it prints "# Comments" where # is the number of comments. Another data object here: post.numComments = the number of comments on a specific post
<dl id='comments-block'> <b:loop values='data:post.comments' var='comment'>	Here are the comments themselves. And another nice construct in the <b> tag - a loop. This one appears to loop through the post comments.
<dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/>	I'm not personally familiar with <dl>, <dt>, and <dd>, but I'm guessing that those are standard html tags. dl and dt are used for making lists of terms and their definitions (as pointed out by a rather superior slashdot commenter). Here's another interesting Blogger code construct, "expr:". "Expr:" appears to be a way to generate content for other use, something that used to be done with Blogger tags. In this case, "expr:name='"comment-" + data:comment.id" generates the name field in the <dt> tag (and later in an <a> tag) that is equal to the text "comment-[really obscure number representing this specific comment]".
<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> said... </dt>	Again with the nice "if-then" constuct. This one makes the comment author into a link if they have a profile URL. Otherwise, it just prints their name. Note that the "nofollow" is automatically included so that blog spammers get no love from the Googlebot.
<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>	Here's the text of the comment(s), and another "if-then". If the comment has been deleted, then encase the comment in a span of class "deleted-comment". In my stylesheet, that's italics and gray. I imagine this is for temporary deletions or confirmations of deletions. Surely the deleted comments don't just hang around.
<dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span>	And here's the comment footer. The "expr:" operator is used to generate a permanent link to this comment and assign it to the timestamp. Another <b:> tag is used to tell Blogger to put up the delete icon if the reader is the author (or so I imagine).
</dd> </b:loop> </dl>	Here endeth the comments coding. Some data objects in this section are: post.comments = some way to know if a comment exists (used in the loop statement) comment.id = the long and obscure integer assigned to a comment by Blogger comment.authorUrl = the URL of the commenter's profile comment.author = the name (or nickname) of the commerter comment.isDeleted = is the comment deleted (duh!) comment.body = the text of the comment comment.timestamp = what do you think?
<p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a Comment</a> </p>	This prints a little "Post a comment" link at the bottom of the individual post pages. Notice how flexible the "expr" operator is here. It generates a link within a <a> tag poining to a URL and defining a click action. Nice. More data objects: post.addCommentURL = the URL where someone can enter a comment on a specific post post.addCommentOnclick = the "onclick" action for entering a comment on a specific post
<div id='backlinks-container'> <b:include data='post' name='backlinks'/> </div>	Here's where the backlinks counter gets generated. Pretty simple - nothing like the comments.
</div> </b:includable>	And that's the end of the includable sub-widget for comments.
<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' title='Edit Post'> <span class='quick-edit-icon'> </span> </a> </span> </b:if> </b:includable>	This little includable sub-widget adds the "Quick Edit" icon to a post if the reader is the author. If there is a post editing URL, then generate a span containing the quick edit icon. New data objects here are: post.adminClass = not really sure what this tells Blogger, but it's used in a span definition post.editUrl = the URL to edit a specific post
<b:includable id='main' var='top'>	Another incluable "main". The includable "main" is going to need some more defining by folks smarter than I am.
<!-- posts --> <div id='blog-posts'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2> </b:if> <b:include data='post' name='post'/> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.allowComments'> <b:include data='post' name='comments'/> </b:if> </b:if> </b:loop> </div>	This is the post section, where the actual posts on the main page are printed out. Or so I believe. There's a loop that goes through the posts, and if-then that prints out the date header it exists, and an if-then that prints out the comments section if comments are allowed. New data objects are: post.dateHeader = the date header, apparently only attached to the last post on a specific day blog.pageType = not really sure, but it's probably a way to determine if you're on the main page or an item page post.allowComments = pretty obvious, isn't it? The line" <b:include data='post' name='post'/>" apparently instructs Blogger to print out the post text. So I suppose there is some flexibility here for hacking. I'm guessing that the "<b:if cond='data:blog.pageType == "item"'>" if-then statement is used to include the comment constucts from above if this in an individual item page.
<!-- navigation --> <b:include name='nextprev'/>	This calls the incluable code for next and previous links. Oddly, that incluable hasn't been defined above. So I suppose the order of the includable/include can be flexible.
<!-- feed links --> <b:include name='feedLinks'/> </b:includable>	This one call the incluable code for feed links. The includable close is for the "main" includable - or at least this particular "main" includable.
<b:includable id='backlinkDeleteIcon' var='backlink'> <span expr:class='"item-control " + data:backlink.adminClass'> <a expr:href='data:backlink.deleteUrl' title='Delete Backlink'> <span class='delete-comment-icon'> </span> </a> </span> </b:includable>	Here the incluable for the back link delete icon is defined. And yet another data object backlink.deleteUrl The data object appears to be nicely object-oriented with the "backlink" object having sub-objects like "deleteURL".
<b:includable id='feedLinksBody' var='links'> <div class='feed-links'> Subscribe to: <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>	Here is the code snippet for the feed links body includable. This one loops through all of the called links types (var='links') and prints out a hyperlinked pointer to the link URLs. The hyperlink (<a href ...>) includes a URL and type, both of which are constucted on the fly with expr: operators. The target is set to '_blank' so that the links open in a new window. Always a nice touch.
<b:includable id='backlinks' var='post'> <b:if cond='data:post.numBacklinks != 0'> <a name='links'/><h4><data:post.backlinksLabel/></h4> <dl id='comments-block'> <b:loop values='data:post.backlinks' var='backlink'> <div class='collapsed-backlink backlink-control'> <dt class='comment-title'> <span class='backlink-toggle-zippy'> </span> <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a> <b:include data='backlink' name='backlinkDeleteIcon'/> </dt> <dd class='comment-body collapseable'> <data:backlink.snippet/> </dd> <dd class='comment-footer collapseable'> <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span> <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span> </dd> </div> </b:loop> </dl> <p class='comment-footer'> <a class='comment-link' expr:href='data:post.createLinkUrl' id='b-backlink' target='_blank'><data:post.createLinkLabel/></a> </p> </b:if> </b:includable>	This is the includable for the backlinks. The first if-then statement checks if there are any backlinks (post.numbacklinks != 0). The != must mean "not equal to", because this section only makes sense if there actually are backlinks. This section prints a label ('links'), followed by a label (defined in the layout options), followed by the backlinks themselves formatted as a definition list. Some data objects in this section are: post.numBacklinks = the number of backlinks on a post post.BacklinksLabel = the label for backlinks defined in the options menus in Blogger post.backlinks = the backlinks themselves backlink.url = the url for the backlink backlink.title = the title of the backlink backlink.snippet = the small snippet of text that shows below a backlink backlink.author = the person who wrote the backlink article backlink.timestamp = what it says post.createLinkUrl = the url used to create a link to this post post.createLinkLabel = the label for the create-a-link link
<b:includable id='feedLinks'> <b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links --> <b:if cond='data:feedLinks'> <div id='blog-feeds'> <b:include data='feedLinks' name='feedLinksBody'/> </div> </b:if> <b:else/> <!--Post feed links --> <div id='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>	This is the includable for feed links. The main if-then-else statement checks to see if the current page is an item page or not. Again, "!=" must be "not equal to". If the current page is not an item page, then print the Blog feed links. If the current page is an item page, then print the post feed links. For non-item pages, another if-then checks that there actually are some feed links. If they exist, then the feeds are printed out inside a set of <div> tags by calling the feedLinksBody includable, which I assume is somewhere below. The passed data to the includable is feedLinks, as opposed to post.feedLinks, which is used below on the post-specific links. For the item pages, an if-then checks to see if comments are allowed. Apparently, feeds aren't displayed if comments aren't enabled. I'm not sure why that particular restriction exists. If comments are enabled, then a second if-then checks that feed links exist. If so, then the post-specific links are printed out inside a set of <div> tags by calling the feedLinksBody includable with post.feedLinks as passed data.
<b:includable id='nextprev'> <div id='blog-pager'> <b:if cond='data:newerPageUrl'> <a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'><data:newerPageTitle/></a> </b:if> <b:if cond='data:olderPageUrl'> <a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'><data:olderPageTitle/></a> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'>Home</a> </b:if> </div> <div class='clear'/> </b:includable>	I'm running low on steam for today, so the rest of these are a bit terse. I'll try to fill them in later. The includable for next and previous post links.
<b:includable id='commentDeleteIcon' var='comment'> <span expr:class='"item-control " + data:comment.adminClass'> <a expr:href='data:comment.deleteUrl' title='Delete Comment'> <span class='delete-comment-icon'> </span> </a> </span> </b:includable>	The includable for the comment delete icon.
<b:includable id='post' var='post'> <div class='post'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <div class='post-footer'> <p class='post-footer-line post-footer-line-1'><span class='post-author'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <data:post.author/> </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' title='permanent link'><data:post.timestamp/></a> </b:if> </b:if> </span> <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 != "true"'>,</b:if> </b:loop> </b:if> </span> <span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <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> </span> <span class='post-icons'> <!-- email post links --> <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' title='Email Post'> <span class='email-post-icon'> </span> </a> </span> </b:if> <!-- quickedit pencil --> <b:include data='post' name='postQuickEdit'/> </span> </p> <p class='post-footer-line post-footer-line-2'/> <p class='post-footer-line post-footer-line-3'/> </div> </div> </b:includable>	The includable for the post itself. This one is the master and calls many of the little ones above.
</b:widget> </b:section> </div>	And we have finally reached the end of the main post widget. Phew!
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Image1' locked='false' title='' type='Image'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/> <br/> <b:if cond='data:caption != ""'> <span class='caption'><data:caption/></span> </b:if> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='HTML1' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='Feed1' locked='false' title='Latest Comments' type='Feed'> <b:includable id='main'> <input id='displayMode' type='hidden' value='true'/> <input expr:value='data:feedUrl' id='feedUrl' type='hidden'/> <input expr:value='data:numItemsShow' id='numItemsShow' type='hidden'/> <input expr:value='data:showItemDate' id='showItemDate' type='hidden'/> <input expr:value='data:showItemAuthor' id='showItemAuthor' type='hidden'/> <input expr:value='data:locale' id='locale' type='hidden'/> <input expr:value='data:timeZone' id='timeZone' type='hidden'/> <input expr:value='data:feedReaderJsonBaseUrl' id='feedReaderJsonBaseUrl' type='hidden'/> <input expr:value='data:feedWidgetRefreshIntervalSec' id='feedWidgetRefreshIntervalSec' type='hidden'/> <h2><data:title/></h2> <div class='widget-content'> <ul id='feedItemListDisplay'> <b:loop values='data:feedData.items' var='i'> <li> <span class='item-title'> <a expr:href='data:i.alternate.href'> <data:i.title/> </a> </span> <b:if cond='data:showItemDate'> <b:if cond='data:i.str_published != ""'> <span class='item-date'> - <data:i.str_published/> </span> </b:if> </b:if> <b:if cond='data:showItemAuthor'> <b:if cond='data:i.author != ""'> <span class='item-author'> - <data:i.author/> </span> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='Text1' locked='false' title='Administrative Notes' type='Text'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='TextList1' locked='false' title='Sources' type='TextList'> <b:includable id='main'> <h2><data:title/></h2> <div class='widget-content'> <ul> <div id='link'> <b:loop values='data:items' var='item'> <li><data:item/></li> </b:loop> </div> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='ArchiveList'> <b:if cond='data:style == "HIERARCHY"'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == "FLAT"'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == "MENU"'> <b:include data='data' name='menu'/> </b:if> </div> <b:include name='quickedit'/> </div> </b:includable> <b:includable id='flat' var='data'> <ul> <b:loop values='data:data' var='i'> <li class='archivedate'> <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) </li> </b:loop> </ul> </b:includable> <b:includable id='menu' var='data'> <select id='ArchiveMenu'> <b:loop values='data:data' var='i'> <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option> </b:loop> </select> </b:includable> <b:includable id='interval' var='intervalData'> <b:loop values='data:intervalData' var='i'> <ul> <li expr:class='"archivedate " + data:i.expclass'> <b:include data='i' name='toggle'/> <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a> (<span class='post-count'><data:i.post-count/></span>) <b:if cond='data:i.data'> <b:include data='i.data' name='interval'/> </b:if> <b:if cond='data:i.posts'> <b:include data='i.posts' name='posts'/> </b:if> </li> </ul> </b:loop> </b:includable> <b:includable id='toggle' var='interval'> <b:if cond='data:interval.toggleId'> <b:if cond='data:interval.expclass == "expanded"'> <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&amp;toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'> <span class='zippy toggle-open'>? </span> </a> <b:else/> <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'> <span class='zippy'>? </span> </a> </b:if> </b:if> </b:includable> <b:includable id='posts' var='posts'> <ul class='posts'> <b:loop values='data:posts' var='i'> <li><a expr:href='data:i.url'><data:i.title/></a></li> </b:loop> </ul> </b:includable> </b:widget> <b:widget id='HTML2' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </div>	All of this code is for the sidebar, and I don't have tome to look through it today. I'll try to get to it later.
<!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> </div> <!-- end content-wrapper --> </div></div> <!-- end outer-wrapper --> </body> </html>	And, thus endeth the template. Pretty heady stuff that will take some studying.

and Click to expand here

Cases	Want \ Do	Replace MY FIRST LINE CODE with
1	Bagaimana menampilkan gadget hanya pada home page blogger. (Cara menyembunyikan gadget dari halaman statis dan halaman posting di blogger)	<b:if cond='data:blog.pageType == &quot;index&quot;'>
2	Bagaimana menampilkan gadget hanya pada halaman posting blogger (Cara menyembunyikan gadget dari home page dan static page di blogger).	<b:if cond='data:blog.pageType == &quot;item&quot;'>
3	Bagaimana menampilkan gadget hanya pada halaman statis dari blogger. (Cara menyembunyikan gadget dari halaman rumah dan halaman posting di blogger)	<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
4	Bagaimana menampilkan gadget pada halaman posting dan halaman statis blogger (Cara menyembunyikan gadget dari halaman rumah di blogger)	<b:if cond='data:blog.pageType != &quot;index&quot;'>
5	Bagaimana menampilkan gadget di halaman rumah dan halaman statis dari blogger. (Cara menyembunyikan gadget dari halaman posting di blogger)	<b:if cond='data:blog.pageType != &quot;item&quot;'>
6	Bagaimana menampilkan gadget pada halaman rumah dan halaman posting blogger. (Cara menyembunyikan gadget dari halaman statis di blogger)	<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
7	How to display gadgets only on archive pages of blogger.	<b:if cond='data:blog.pageType == &quot;archive&quot;'>
8	Bagaimana menampilkan gadget hanya pada halaman arsip blogger.	<b:if cond='data:blog.url == &quot;Your_URL_Here&quot;'>
9	Bagaimana menampilkan gadget hanya pada halaman tertentu blogger.	<b:if cond='data:blog.url != &quot;Your_URL_Here&quot;'>

See you...:-h

Page Layout Default Blogger

Pingin bikin template default blogger??? Nah kalau memang tertarik bagi para sobat yang mau membuat template default blogspot, ada baiknya mengetahui beberapa kode-kode yg berperan didalamnya ;)) Secara khusus penjelasan ini dititikberatkan pada Page Layout in Blogger Beta. Pada dasarnya bentuk Layout dari template beta ini ada 4 bagian (section). Pada masing-masing section terdapat variabel yg saling berkaitan :-/ Secara garis besar strukturnya dapat diterangkan seperti berikut :

1. Bagian Header berisi title (judul blog) dan deskripsi blog.
2. Bagian utama (main section) berisi postingan blog.
3. Bagian (section) sidebar yg berisi sidebar stuff seperti profile, links, label, blogroll, dan gadgets.
4. Section Footer terdapat (contains) isi, yg keberadaannya dibawah blog.

Mari kita lihat penjelasan singkat dari masing² struktur diatas. Kalau mau tahu struktur dari sebuah website ada baiknya para sobat membaca artikel The Anatomy of a Website.

Bagian Header

Pada bagian ini kita akan menemukan syntax seperti...
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Arti dari syntax tersebut yaitu, pada bagian header kita hanya dapat memasukkan 1 halaman element (widgets) dan tidak akan bisa memasukkan lebih. Apabila kita masuk ke Page Elements dan melakukan Add a Gadget, maka hal ini tidak akan berlaku :p

Kalau kita bermain dengan syntax ini menjadi...
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
Maka syntax ini akan memiliki arti, kita dapat meng-add (memasukkan) 3 halaman element pada bagian header blog kita :D

Bagian Sidebar

Masuk pada bagian sidebar blog kita akan dihadapkan pada...
<b:section class='sidebar' id='sidebar' preferred='yes'>
Pada syntax default ini memiliki arti, bahwa sobat dapat memasukkan page elemetns sesuai keinginan sobat :D Bagaimana kalau kita mau membatasi pemakaian halaman element pada bagian sisi blog kita :-?
<b:section class='sidebar' id='sidebar' maxwidgets='5' preferred='yes'>
Pasti sudah paham dong :-" yesss, sobat dapat meng-add page elements ini sebanyak 5 biji :)

Bagian Utama

Pada bagian ini yaitu bagian dari postingan. Pada sesi ini bisa saja memasukkan widgets, dan biasanya hanya satu. Itupun biasanya kita tempatkan dibawah/diatas. Masuk Layout ► Page Elements ► Drag pada bagian kolom postingan diatas/dibawah.
<b:section class='main' id='main' showaddelement='no'>
menjadi...
<section class='main' id='main' maxwidgets='1' showaddelement='no'>

Bagian Footer

Bagian dari sebuah template paling bawah keberadaannya. Syntax pada footer ini biasanya bertuliskan...
<b:section class='footer' id='footer'/>
Apabila mau memasukkan sebuah widget, tentu bisa :D

Demikian segelumit tentang bagian-bagian dari template default blogger beserta syntaxnya. Selamat bertemu kembali pada sesi penjelasan berikutnya :-h Source by : http://beautifulbeta.blogspot.com

Blog Bulk

Tradisi membagi blog tutorial. Blogger satu ini datang dari negara Croatia. Rasa ketertarikan terhadap blogger membuat sobat satu ini memberikan informasi khususnya mengenai seputar tutorial blog. Walau bahasa inggris yang disampaikannya tapi tetap jelas dan mudah untuk dipahami.

Dua artikel mengenai template yg gaya dan keren punya ;) Sambut dan datangilah blognya Blog Bulk. Bye bye :-h ;))