Selasa, 11 Mei 2010

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 TypeIncludable idIncludable var
BlogbacklinkDeleteIconbacklink
...backlinkspost
...commentDeleteIconcomment
...commentspost
...feedLinks---
...feedLinksBodylinks
...maintop
...nextprev---
...postpost
...postQuickEditpost
...status-message---
BlogArchiveflatdata
...intervalintervalData
...main---
...menudata
...postsposts
...toggleinterval
Headermain---
Labelmain---
Profilemain---
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
CasesWant \ DoReplace MY FIRST LINE CODE with
1Bagaimana 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;'>
2Bagaimana 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;'>
3Bagaimana 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;'>
4Bagaimana 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;'>
5Bagaimana 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;'>
7How to display gadgets only on archive pages of blogger.<b:if cond='data:blog.pageType == &quot;archive&quot;'>
8Bagaimana menampilkan gadget hanya pada halaman arsip blogger.<b:if cond='data:blog.url == &quot;Your_URL_Here&quot;'>
9Bagaimana menampilkan gadget hanya pada halaman tertentu blogger.<b:if cond='data:blog.url != &quot;Your_URL_Here&quot;'>

See you...:-h
Diposting oleh di
Label: ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)