Bloggercrib

Batik of Indonesia

noreply@blogger.com (Reza) — Sat, 03 Oct 2009 03:37:00 +0000

Image by Adidas

Jakarta (ANTARA News) - Employees of state-owned companies and government institutions have for years adhered to a tradition of wearing batik on every Friday of the week.

But this Friday (October 2, 2009) is special because President Susilo Bambang Yudhoyono has called on all Indonesians to wear batik on that day to celebrate UNESCO`s decision to include batik in its list of "Intangible Cultural Heritage of Humanity" items.

"Batik is regarded as a cultural icon with its own uniqueness. It conveys certain symbols and a profound philosophy, including man`s life cycle, and it has been touted by Indonesia as a non-material element of its cultural heritage," Coordinating Minister for people`s welfare Aburizal Bakrie told a press conference at Bogor State Palace on Sept. 7, 2009.

Inspired by the very act of creating a Batik-Made fabric which has a strong symbolic meaning for the Javanese. It is said that each time the Batik craftsman executes a particular intricate pattern the design is not only fixed to the cloth, but the meaning of the design is engraved ever more deeply in the soul of the Artisan. This highly skilled process, involving complicated dyeing and dye-resist processes, is regarded highly by many Indonesians as one of the six Priyayi or “High Arts”. (hypebeast.com)

Simply by Bloggercrib

noreply@blogger.com (Reza) — Thu, 24 Sep 2009 18:23:00 +0000

A simple 3 columns template, this is my first template, hope you like it.

Optimized title for SEO
3 columns footer
Navbar
Back to top button
Demo

Add comment box below your blogger posts

noreply@blogger.com (Reza) — Wed, 23 Sep 2009 11:43:00 +0000

Some templates doesn't have comment box below it's posts area, let me show you how to enable this feature to your blogger template.

1. Go to draft.blogger.com

2. Go to settings tab "Comment"

3. At Comment Form Placement, select "Embedded below post"

4. Go to layout tab "Edit HTML"

5. Expand widget templates.

6. Search and replace <b:include data='post' name='comments'/> with the following:

<b:include data='post' name='comments'/>
<b:include data='post' name='comment-form'/>

7. Save your template.

Voila! post a comment at the same page!!

Signature at the end of blogger posts

noreply@blogger.com (Reza) — Mon, 21 Sep 2009 17:12:00 +0000

Your posts look more elegant if you added your personal signature below your every posts, here's how we do it!

1. Go to mylivesignature website and create and generate your signature code.

2. Backup your template. recomended

3. Go to layout tab "Edit HTML".

4. Expand widget templates.

5. Paste your generated signature code below the following:

<data:post.body/>

6. Save your template.

You can change it with your custom signature by replace mylivesignature generated code with the following:

<div class="separator" style="clear: both; text-align: left;">
<img border="0" src="YOUR IMAGE URL"/>
</div>

The bold text represent text align you wanna use.
Have fun..

Show avatar on customized template comments

noreply@blogger.com (Reza) — Sun, 20 Sep 2009 14:14:00 +0000

Blogger introduce it's new feature that shows avatar on comments, you can simply enable it from blogger setting tab "Comments", then enable “Show profile images on comment”.

For some customized template, you need a trick to make it happen. Here's how..

1. Backup your template. recomended

2. Go to layout tab "Edit HTML".

3. Expand widget templates.

4. Search the following:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

If you can't find it, search and replace <dl id='comments-block'> with the code above.

5. Search and replace <a expr:name='data:comment.anchorName'/> with:

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

Save your template.

3 columns footer, anyone?

noreply@blogger.com (Reza) — Fri, 18 Sep 2009 16:35:00 +0000

Ever wondering to have a three columns footer? On your mark, get set, go!!

1. Backup your template. recomended

2. Go to layout tab "Edit HTML"

3. Search the following:

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

the bold tag can be different on each template, maybe looks like

<div id='footer-wrap'>

<div id='footer'>

4. Replace the red tag with the following:

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
</div>

5. Search and replace </b:skin> with the following:

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}
</b:skin>

Then preview your template, if you see a horizontal line at the bottom on your blog, then you've done it right. To remove this line, find and delete the tag below.

<hr align='center' color='#5d5d54' width='90%'/>

Or if you wanna keep that line and change its color, just modified the red code above with HTML color code.

Add two extra widget area below post section

noreply@blogger.com (Reza) — Fri, 18 Sep 2009 14:19:00 +0000

Sometimes we need an extra field in our blog template, let me show you how to add two extra section below your blog posts.

1. Backup your template. recomended

2. Go to layout tab "Edit HTML"

3. Search the following:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

the bold tag can be different on each template, maybe looks like

<div id='main'>

<div id='content'>

4. Between </b:section> and </div> (at the end of the script above), add the following:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='magazine-left' showaddelement='yes' >
<b:widget id='Text51' locked='false' title='New Section 1' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-right' showaddelement='yes' >
<b:widget id='Text52' locked='false' title='New Section 2' type='Text'/>
</b:section>

<div style="clear: both;"></div>
</b:if>

5. Search and replace </b:skin> with the following:

#magazine-left {
width: 45%;
float: left;
}
#magazine-right {
width: 45%;
float: right;
}
</b:skin>

Then preview your template, you should see "New Section 1" and "New Section 2" side by side below the posts section.

Replace "read more" text with image

noreply@blogger.com (Reza) — Thu, 17 Sep 2009 16:27:00 +0000

There's always another things to do with blogger, that's why i love it.
Follow this trick to replace your "read more" text with an image.

1. Backup your template. recomended

2. Go to layout tab "Edit HTML".

3. Search the following:

<a expr:href='data:post.url "#more"'>Read More </a>

<a expr:href='data:post.url "#more"'><data:post.jumpText/></a>

4. Replace the bold text with this tag

<img border="0" src="YOUR IMAGE URL"/>

5.Save your layout.

Done!!

Official read-more function

noreply@blogger.com (Reza) — Thu, 17 Sep 2009 14:14:00 +0000

Finally, blogger had a read-more function, this will hide your full post until you click the read-more button.

If you are using the New Advanced Post Editor, then you can insert the jump break easily from the post editor. (see the picture above)

If you are not using the New Post editor,then you will have to manually type the jump break tag . To do that just place  between summaries and your full post.

Note that this feature sometimes not work on customize template, there's a stuff to do.

1. Backup your template. recomended

2. Go to layout tab "Edit HTML".

3. Check if the following script is already there.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url "#more"'>Read more..</a>
</div>
</b:if>

If not, add the script above below <data:post.body/> tag.

That's it, your read-more feature ready to go.

Customizing blockquote

noreply@blogger.com (Reza) — Thu, 17 Sep 2009 12:21:00 +0000

Standar blockquote looks too simple for me, here is some trick to make it different.

1. Backup your template. recomended

2. Go to layout tab "Edit HTML".

3. Search:

blockquote {
bla
bla
bla }

.post-body blockquote {
margin: 1em 3em;
padding: .5em;
background-color: #f6ebc1;
}

4. Replace it with following:

.post-body blockquote {
font: 12px/20px italic Times, arial;
padding: 8px;
background-color: #e5e5e5;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
margin: 0px;
background-image: url(http://img151.imageshack.us/img151/5882/bulletp.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 0px;
}

You can change its value to customize the looks.

Ps : This effect only appear in your blog posts, not in preview or compose mode.

How to use blockquote

noreply@blogger.com (Reza) — Thu, 17 Sep 2009 11:46:00 +0000

Many people use blockquotes in their blog posts, text inside blockquotes looks different than regular content, like this..

Text inside blockquote

Text inside blockquote

Text inside blockquote

To use blockquote, all you have to do is block the text that you want to put in it then simply click the icon on compose mode post editor.

Mine is a little bit different, because i've done i little trick to change its background, check this out!

Link it with Linkwithin

noreply@blogger.com (Reza) — Thu, 17 Sep 2009 08:23:00 +0000

Preety cool gadget, it display your related posts with thumbnails

1. Go to Linkwithin website.

2. Insert your eMail, blog URL, platform and width.

3. Click "Get Widget".

4. Follow the step by step tutorial they provide.

Another cool widget on your blog!!

Floating "back to top" button

noreply@blogger.com (Reza) — Thu, 17 Sep 2009 07:25:00 +0000

This button will bring you to the top of a page for just one click, no need to scrolling up anymore.

1. Backup your template. recomended

2. Go to layout tab "Edit HTML".

3. Search and replace </body> the following:

<a href='#' style='display:scroll;position:fixed;bottom:0px;right:10px;' title='Back to Top'><img src='http://img260.imageshack.us/img260/1849/backtotop.png'/></a>
</div></div> 
</body>

4. Save your layout.

Go on, click it! ;)

Change "Addtoany" button image

noreply@blogger.com (Reza) — Wed, 16 Sep 2009 19:02:00 +0000

Nice button they have, but if you still wanna change it, read more.

1. Open your Addtoany widget preference.

2. Replace the bold text with your image URL and size.

<a class="a2a_dd" href="http://www.addtoany.com/share_save"><img src="http://static.addtoany.com/buttons/share_save_171_16.png" width="171" height="16" border="0" alt="Share/Save/Bookmark"/></a><script type="text/javascript">a2a_linkname=document.title;a2a_linkurl=location.href;</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>

3. (optional) Add <div style="text-align: center;"> before the script
and </div> after the script to make it center align.

There you go, a custom social bookmark button.

Optimizing blog title for SERP

noreply@blogger.com (Reza) — Wed, 16 Sep 2009 16:44:00 +0000

How come this trick affect SEO? nice question!
By default, Blogger Post pages are of the form (Blog Title + Post Title), this form make the search engine concentrate on your blog title first then your post title, here's a simple trick but effectively increase your position on SERP by changing the default form to (Post Title + Blog Title).

1. Backup your template. recomended

2. Go to layout tab, "Edit HTLM".

3. Search and replace <title><data:blog.pageTitle/></title> with the following:

<b:if cond='data:blog.url == data:blog.homepageUrl'><br /> <title><data:blog.pageTitle/></title><br /> <b:else/><br /> <title><data:blog.pageName/> ~ <data:blog.title/></title><br /> </b:if>

As you can see now on your browser, the form changed to (Post Title + Blog Title).

Add "Addtoany" social bookmark button

noreply@blogger.com (Reza) — Wed, 16 Sep 2009 16:17:00 +0000

One thing i love about this widget is the complete link to every social network you know, so don't have to manually create the link script one by one.

1. Go to Addtoany website.

2. Choose "share/save" or "subscribe" button.

3. Choose button style, insert your page name (optional), page URL and select your platform.

4. Copy the code and paste it in your new HTML gadget then put the gadget below your post area.

Now you have the most complete social bookmark button.

Remove blogger navbar

noreply@blogger.com (Reza) — Wed, 16 Sep 2009 09:22:00 +0000

Navbar is a blogger default bar that appear on the topside of your blog, a little bit annoying, wanna remove it, read more.

1. Backup your template. recomended

2. Go to layout tab, "Edit HTLM".

3. Search and replace <style type='text/css'> with the following:

<style type='text/css'>
/* remove navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

4. Save your template.

If you can't find <style type='text/css'> tag, try this one.

1. Search and replace /* Variable definitions with the following:

#navbar-iframe {
display: none !important;
}

/* Variable definitions

2. Save your template.

Now you have a free-navbar blog.

Change your blog favicon

noreply@blogger.com (Reza) — Wed, 16 Sep 2009 08:01:00 +0000

Favicon is the image appear beside your blog address, blogger logo is the default image for blogspot blog, but you can modified this image to your favourite image.

1. Backup your template. recomended

2. Go to layout tab, "Edit HTLM".

3. Search and replace <![CDATA[/* with the following:

<link href='http://img294.imageshack.us/img294/2513/bloggercribicon.jpg' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<b:skin>
<![CDATA[/*

4. Save your template.

There, you have a new icon.

About me

noreply@blogger.com (Reza) — Fri, 06 Jul 2007 18:01:00 +0000

Hi, my name is Reza, I'm a freelance designer who fall in love with my profession, more like a hobby for me. I build this blog to help blogger user make their blog looks good. ;)
I'm new in blogger, part of my posts is my experiment with my own blog, don't hesitate to contact me if you had a trouble using tricks on my blog posts.

Regards,

Reza