Elemen CSS Template Blogspot

Subsection 1 - Variable:This subsection contains the declaration (the introduction) of the font and color variables that appear in the Fonts and Colors tab in the Layout page. For example, the Text Color or the Text Font variables that you can choose and modify using the Fonts and Colors tab. In my templates, I've added a lot of variables (close to 40+) compared to some of the standard Blogger templates to make it easy for you to customize a lot of things on the template.

 

Subsection 2 - Global:
This part contains the code to control the general appearance and layout. If you look at the green bar above, you'll see the code "body {.....}". This means that every code that goes inside the {.....} will control the general properties (size, layout, & appearance) of the body of the template (everything that the computer screen covers). For example, it controls the width of your whole template and the background color or image. But it doesn't control the detailed properties of the whole template (that is done by all the other subsections). Or, if you do set the detailed properties inside the body container, say the Text Font, and then reset the same properties inside a smaller sub-container, the properties set in the body container will be overridden, or canceled.

Inside this subsection, you will also find other important large containers - the Outer-wrapper and the Content-wrapper - so this subsection is where you want to look for if you want to tweak those containers.

Subsection 3 - Header:This part controls the properties of everything inside your Header-wrapper container. The most common ones are the Blog Title and the Blog Description. In most of my templates, I've added an extra object in the Header-wrapper - the Linkbar (or the horizontal menubar). Typically, you can't add extra object in the Header because you can't use the Add Page Element tab. To add the Linkbar, I had to change the 3rd Section of the template code structure (which is the Data section). In my own blog (dzelque.blogspot.com), I added something else, which is the Google Search Bar. Ideally, you can add just about anything you want there, if you know how to deal with the 3rd Section. We'll get to this later.

Subsection 4 - Main:This part controls the properties (size, layout, and appearance) of everything that the Main-wrapper block contains - the Date Header, the Post, the Comment, the Feed Link, and any widgets that you drag into the Main section using the Add Page Element tab.

 

 Subsection 5 - Sidebar:This part controls the properties of everything inside your Sidebar-wrapper - for example the Labels, Blog Archive, Adsense units, Link Lists, etc. But, it doesn't set how many sidebars you have or their locations on the blog (example Sidebar-Main-Sidebar or Main-Sidebar-Sidebar). That part is done in the Section 3 of the Blogger Template Code Structure - the Data Section.

Subsection 6 - Miscellaneous:This part controls the properties of additional elements in your blog that's not controlled by all the above subsections. These elements are the Profile (or the About Me block), the Blogquote, and the Code. It means if you want to, say, change the color of the quoted text or the font of your nickname in the About Me block, this is where you want to look for to tweak it.

 

Subsection 7 - Post-Footer: 

In my Generic Template, this part controls the properties of 3 things:

1. The Post-Footer - the texts below your post body. This is the part that contains information about your post, or the texts that say "Posted by YourNickname, Labels: ....., 5 Comments, etc.
2. The Blog-Pager - the links at the bottom of your blog posts that say "Newer Posts, Home, or Older Posts".
3. The Feed-Link - the link that says "Subscribe to: Posts (Atom)".

Subsection 8 - Comment:This part controls all the properties of the Comments section in your blog.

Subsection 9 - Footer:This part controls all the properties in the Footer section. Generally, the Footer section contains some text explaining the ownership or copyright of a blog. In some other blogs, they also put extra stuff in the Footer section, like the Recent Posts or Popular Posts in 2 or more columns. Basically, you can just put about anything in the Footer as in the Sidebar.
  
Source

Read More

Struktur Template Blogger

1. Body: the outer most block is the Body of your template (basically everything that the computer screen covers).
2. Outer-wrapper: this container covers your whole template (the body is more like the outside of your template). In general, you build a wrapper to place a multiple of smaller blocks inside it. The most common blocks inside this Outer-wrapper is the Header, Content, and Footer.
3. Header: this block is the top most part of your blog (the name is quite obvious). But inside the Header you will have other sub-blocks too - the Header Title block, the Header Description block, and others such as the Adsense banners, a menu bar, etc. So, to wrap all these sub-blocks inside one large container, the largest container in the Header section is usually a Header-wrapper that wraps everything inside.
4. Content: below the Header is the Content-wrapper - basically the most important container block of all. Immediately inside this wrapper are the Sidebar containers (1,2 or any number of sidebars) and the Main container (which contains your posts, comments, or some ads).
5. Footer: is the bottom most container of your template. As in the Header section, you'll also need a Footer-wrapper to contain other sub-blocks in the Footer section.
6. Main: the Main-wrapper is the outer most container in the Main section which goes inside the Content-wrapper. Inside this Main-wrapper are the Post block, Comment block, Date Header, and other widgets created from the Add Page Element option.
7. Sidebar: is the block that contains all your side widgets - About Me, Labels, Archive, Text, HTML, Adsense, etc. In a standard Blogger template, you will usually find only 1 sidebar - hence the 2-column template (Main and Sidebar). But it's actually easy to add multiple number of sidebars. The most common ones are 2 sidebars - or the 3-column template. You will see from these tutorial series that once you understand the template structure, it's actually easy to add and move the sidebars to the left or right of your Main container.
8. Blog Post: this block contains the important stuff - your Posts Titles, Post, Post Author, Labels, etc.

One other way to see this structure is from the hierarchical point of view. Starting from the largest container to its sub-containers, the structure looks like this:

• Body
• Outer-wrapper
• Header-wrapper
• Blog Title
• Blog Description
• Other widgets
• Content-wrapper
• Sidebar-wrapper (1,2,3...)
• Main-wrapper
• Date Header
• Posts
• Post Title
• Post Content (or called Post Body)
• Post Footer (Author, Labels, etc)
• Comments
• Feed Link
• Other widgets (mostly ad units)
• Footer-wrapper
• Footer text (disclaimer, copyrights, etc)
• Other widgets 

 Source

Read More

Facebook Like Box Valid Xhtml Blogspot

Facebook Like Box valid xtmhl ini berguna jika template sobat belum menggunakan HTML5 karena ada bagian attribut pada FB like box yang tidak valid xthml, tapi jika template sobat sudah menggunakan html5 rasanya sudah valid xhtml. berikut cara membuat facebook like box yang paling xhtml:

>

Klik disini dulu untuk mengambil kode script facebook like box:
Atau langung copy paste kode Facebook like box yang valid xhtml dibawah ini :

<div id="fb-root"></div>
<script type="text/javascript">
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js#xfbml=1';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div id="FbCont">
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var fb = document.createElement('fb:like-box');
fb.setAttribute("href","Your Facebook Fan Pages");
fb.setAttribute("show_faces","true");
fb.setAttribute("header","false");
fb.setAttribute("stream","false");
fb.setAttribute("width","200");
fb.setAttribute("font","segoe");
document.getElementById("FbCont").appendChild(fb);
//--><!]]>
</script>
</div>

Keterangan : Ganti "Your Facebook Fan Pages" dengan Punya sobat.
Selesai.

Read More