Some popular basic codes blogger/blogspot

Updated on July 10, 2016 - Post a Comment

1. Font, color, margin

<span style="color:#339966; font-family:Tahoma; font-size:12pt; margin-left:12px;">Nội_dung</span>

#339966 : color code
12pt Tahoma : size and font-family
margin-left:12px : margin text, you can change left value to right, top, bottom

2. Text align

<div style="text-align:center;">Your content here</div>

center : can be change to right or left

3. Format font

<b>Bold Your content here</b>
<i>Italic Your content here</i>
<u>Underline Your content here</u>
<strike>Strikethrough your content here</strike>

4. List

Bullet list

<ul>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ul>

Numbered list

<ol>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ol>

5. List format

ul {list-style-type:none;}

none: display nothing
disc: square
circle: circle dot
square: Black dot
decimal: number (1,2,3,4,…)
lower-alpha: Alphabet (a, b, c, d, e, …)
upper-alpha: Alphabet (A, B, C, D, E, …)
roman: Roman (i, ii, iii, iv, v, …)
upper-roman: Roman (I, II, III, IV, V, …)
/*image list style*/ list-style-image:url('Link_imange');

6. Create a hyperlink to a specific bookmark in a post

<a href="Link_of_post#example_title">Go to example</a>
......................
<a name="example_title">example title</a>

Note: there's no space between characters
example:
- Go to A (<a href="http://ducrat.blogspot.com/2015/12/some-popular-basic-codes-blogger-blogspot.html#A_position">Go to A</a>)
...
A position(<a name="A_position">A</a>)

7. Put image to post

1. Basic code

<img src="image_link" title="note" alt="description"/>

2. Advande code

<img src="image_link" title="note" alt="description" align="bottom" width="400" height="400"/>

8. Add link to your post

<a href="LINK" target="blank">Tên_Link</a>

target="blank" : open link in new tab

9. Add image with link

<a href="LINK" target="blank"><img src="image_link"/></a>

10. Create A Button To Show/Hide Content

<div>
<div>
<input type="button" value="show" style="width:75px; font-size:11px; margin:0px; padding:4px; border="1"" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'show'; }">
</div>
<div>
<div style="display: none; border:#4F4F4F 1px solid; padding: 4px; background:# ">
CONTENT
</div>
</div>
</div>

example:

11. Divide 2 colums, 3 colums, 4 colums

<table><tbody>
<tr><td class="column_1" style="font:12px Tahoma; color:#000000; width:120px;padding:4px;" valign="top"><div class="column_1">
content of colum 1

</div>
</td><td class="column_2" style="font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top"><div class="column_2">
content of colum 2

</div>
</td></tr>
</tbody></table>

If you want to add more colum, just before/above line </td></tr> add following code:

</td><td class="column_n" style="font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top"><div class="column_n">
content of colum n</div>

12. Creat a boder for an element

<div style="border:#4F4F4F 1px solid; padding: 4px; background:#eee; width:400px;">
content
</div>

#4F4F4F 1px solid : color code - thickness - boder style.
- solid ______________
- dashed ----------------
- dotted ......................
background:#eee : background color
width:400px : width of border

13. Add button "Select all" to select all text box (don't require encode)

<form name="MyTextBoxForm"><input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all"/>
<textarea cols="59" name="MyTextBox" rows="18" wrap="on" style="background:#eee; color:#464646; border:1px #A0C4EA dashed;">Your content here</textarea> </form>

cols="59" : width of text box
rows="18" : amount of text box's rows
wrap="on" : If text line is too long, there's a horizontal scroll
wrap="off" : If text line is too long, there's a vertical scroll

14. Effect when moving mouse on a link

<a href="Your-link" target="blank" onmouseover="oldColor=this.style.backgroundColor;this.style.backgroundColor='#eee';" onmouseout="this.style.backgroundColor=oldColor;">your content</a>

15. Blogger Conditional tags

1. Conditional tags for Home page
Used for home page of the blog; anything inside it will load in the home page of your site;

<b:if cond='data:blog.url == data:blog.homepageUrl'>
EXECUTE IN HOMEPAGE ONLY
</b:if>

In case of static page redirects for your homepage, you’ll need to use the specific page URL code in the next section.

2. Post and Static Pages Conditional tags
For targeting both post and static pages in blog.

<b:if cond='data:blog.url == data:post.url'>
EXECUTE IN POST AND STATIC PAGES ONLY
</b:if>

3. Static Page Conditional Tags
Blogger users often want static pages behavior somewhat different from other pages in blog.

<b:if cond='data:blog.pageType == "static_page"'>
EXECUTE IN ON STATIC PAGES ONLY
</b:if>

4. Blog Post Page Conditional tag
This tag used for Blog posts pages.

<b:if cond='data:blog.pageType == "item"'>
EXECUTE IN BLOG POST PAGES
</b:if>

5. Conditional Tag for Index pages
Index pages are pages show by default multiple blog posts on one page i.e. homepage, labels page, QUERYand yearly archive page. Index

<b:if cond='data:blog.pageType == "index"'>
EXECUTE IN INDEX PAGES
</b:if>

6. Label or Search page
Pages that are log on by clicking on a label link from the label list or cloud or labels given after a blog post.

<b:if cond='data:blog.searchLabel'>
EXECUTE IN LABEL OR SEARCH PAGES
</b:if>

7. Conditional Tag for Pages with Search Query
Pages with search query. For example: http://ducrat.blogspot.comsearch?q=blogger&submit=Search.

<b:if cond='data:blog.searchQuery'>
EXECUTE IN PAGES WITH SEARCH QUERY
</b:if>

8. Conditional Tag for Archive page
The archive page is the one that people reach by click on a Year or Month value in your Archive widget.

<b:if cond='data:blog.pageType == "archive"'>
EXECUTE IN ARCHIVE PAGES
</b:if>

First post Conditional tag
Not for a page type; used for targeting the first post on multi-post pages (index, archive, label) .

<b:if cond='data:post.isFirstPost'>
EXECUTE ALONG WITH THE FIRST PAGE
</b:if>

9. Conditional Tag for Error page
Error page are the “404” errors. By entering a link which is not available in you blog/site you can access it.

<b:if cond='data:blog.pageType == "error_page"'>
EXECUTE IN 404 OR ERROR PAGE
</b:if>

10. Conditional Tag for a Specific page/URL
It is used for allpying conditions to a specific page/ url.

<b:if cond='data:blog.url == "URL"'>
EXECUTE IN A SPECIFIC PAGE
</b:if>

These are the conditional tags for blogger page types. Now see the ways how to use them in a blogger template.

Applying Conditional Tags in Blogger
For Appling conditional tag to a content;

<b:if cond='data:blog.pageType == "item"'>
CONTENT (TO BE EXECUTED IF CONDITION IS TRUE)
</b:if>

As you see; put the content between the opening <b:if cond…> and the closing </b:if>. In the example above, the content will only appear on post pages.

Reversing a Condition
You can easily reverse a condition by changing the comparison operator from == (is equal to) to != (is not equal to);

<b:if cond='data:blog.url != data:post.url'>
EXECUTE IF TRUE
</b:if>

Execute Multiple Condition
If you want to specify an alternate content (when the condition is false), you need to insert a <b:else/> tag followed by the content, like this:

<b:if cond='data:blog.pageType == "item"'>
EXECUTE IF TRUE
<b:else/>
EXECUTE IF FALSE
</b:if>

Except inside a section or inside a widget content box, you can place the conditional anywhere in your template HTML. The content can be a div, a section, a style tag, another conditional tag etc.

If you are using these page types within your HTML as opposed to the template language Blogger might throw an error due to escaping of your characters. What this means is that the quotation marks need to be “escaped” and replaced with &quot. So <b:if cond='data:blog.pageType == "static_page"'> would be added as <b:if cond='data:blog.pageType == quot;static_pagequot;'>

16. Add your note or your signature under each post

Copy and paste fo;owing code after/under <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
YOUR NOTE HERE
</b:if>

17. Script to add file *.js to blog

<script src='Link_File_JS' type='text/javascript'/>

18. Script add js content directly to blog

<script type='text/javascript'>
//<![CDATA[
JS CONTENT HERE
//]]>
</script>