Cara Pasang Iklan Di Sebelah Kanan Atau Kiri Postingan Blogspot

1. Login ke Blogger
2. Siapkan Kode iklan yang ingin dipasang dikanan atau kiri postingan blog
3. Edit HTML ==> Backup template
4. Beri tanda Centang Expand Template Widget
5. Lalu cari kode <data:post.body/> (jika terdapat lebih dari satu kode seperti itu, pilih kode yang ke dua)
6. Copy pastekan kode berikut ini di atas kode <data:post.body/>, pilih salah satu untuk posisi kanan atau kiri postingan

A. Kode dibawah ini untuk menampilkan iklan di sebelah kiri postingan blog

<div style='float:left;margin-right:10px'>
Ganti dengan Kode iklan yang sudah di parse
</div>

B. Kode dibawah ini untuk menampilkan iklan di sebelah kanan postingan blog
<div style='float:right;margin-left:10px;'>
Ganti dengan Kode iklan yang sudah di parse
</div>

7. Save template dan lihat hasilnya.

Untuk memparse kode iklannya silahkan parse Disini
Cara ini bisa diterapkan untuk menampilkan iklan google adsense atau PPc lainnya.
Selamat mencoba.

Read More

Elements Containers Template Blogger

The #main and .post are the titles of each containers. Each container codes must be contained within {...}. For the explanation below, we'll focus on the codes inside the post block, especially for the explanation on the margin and padding (the codes colored in red).

• Margin - sets the distance between the border of the container to the border of a parent (larger) container outside it. There are 4 numbers defining the Margin property. The 1st number sets the top margin, the 2nd sets the right margin, the 3rd number sets the bottom margin, and the 4th number sets the left margin. It basically sets the whole margin in a clock-wise fashion starting from the top. In the case above, the parent container for the post container is the main container. See how the dashed border for the blue (post) container is placed inside the green (main) container following the post block's margin command (the codes in red). If the post's margins are all set to zero, then the post container would be exactly the same size as the main container. Think of the Margin as a command that moves its border away from a parent border. Another thing, Margin can have a negative value, which means that it moves toward the parent border and may overlap it (not away from it).
• Padding - sets the distance between the border of the container to the border of a child (smaller) container inside it. In the case of the post container, the child container is the post-body. The 4 numbers defining the padding sets the padding in a clock-wise fashion also, just like the Margin property. See how the post's padding puts the post-body inside the post container, away from the dashed border. Unlike the Margin, think of the Padding as a command that moves a child border away from its border. Padding values cannot be negative.
• Min-width and Max-width - sets the width of the container. Usually, it's enough to write it as width = 400px (for example), but it's becoming more of my habit to set the width as strict as possible, because I sometimes saw that if it's not written strictly, the container width might shrink and expand freely on some situations and in some different browsers. So by setting the width strictly, I made sure that it looks exactly like I want at all times in all browsers (basically getting rid of alignment bugs). If you look at my newer templates, I even set the width redundantly, say in Main-wrapper and then in Main containers eventhough they are pretty much the same. Doing it this way solves some alignment bugs that I saw (eventhough I don't really understand why it solves it by writing it redundantly).
• Background - sets the background color of the container. It uses the hexadecimal code for colors. See here for all the color values. You can also set a background image that repeats itself to cover the whole container block. The way to do this is by pointing to the URL of an image. For details on how to do this, see W3Schools tutorials. You can also set the value to be $samplevariable, where the variable is the one that you define in Subsection 1 in CSS Styling Structure.
• Color - sets the color of your text using the hexadecimal color code, or the variable defined earlier in Subsection 1.
• Font - sets the font of your text. You can use the variables set in Subsection 1 also. See W3Schools tutorials for more details on setting the font properties.
• Text-align - sets the alignment of your text. The 3 options are either left, center, or right.
• Line-height - sets the distance, or height, between two text lines.

Here is a sample code for the 2 containers:

#main {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 400px;
max-width: 400px;
background: $mainbgColor;
color: #111111;
font: $textFont;
}

.post {
margin: 0px 20px 10px 0px;
padding: 10px 20px 10px 2px;
line-height: 1.5em;
text-align: left;
background: $postbgColor;
}

 Source

Read More

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