SimplexDesign - free premium blogspot template

New comment pagination - solution for posts with 200+ comments

2012-01-25T17:05:00.002+07:00

If you are using Blogger default comment system (not threaded comment ) , you might see an error : comment pagination not shown for posts with 200+ comments .
What is comment pagination ? Like numbered page navigation ,here is comment pagination :

Yes ,blogger team said that they has an API for comment pagination ,but I don't know why it doesn't work in my blog . For example , my post on Simplex Enews template has 250 comments ,and I added comment pagination code into template , but I see no comment pagination appear . It only show first 200 comments and their no way to move to the last 50 comments .
So I decided to make it myself ,add a little javascript into template for comment pagination . Fortunately ,it work ,so I think it maybe helpful to you in case your blog use default comment system and your post has more than 200 comments :D

Here are steps for making a comment pagination as I did ^^ pls backup before follow steps bellow ,because at least we have a way to comeback .

1,Go to Dashboard - > Template -> Edit HTML .

2,Add these line right before ]]></b:skin>

#commentpaging {float:right;}
#commentpaging a {margin-right:5px;}

3,Add the code bellow before <body>

<script type='text/javascript'>
//<![CDATA[
function commentpagination(url,comment){
var posturl= url;
var comment = comment;
cmpage = Math.ceil(comment/200);
document.write('<a href="'+posturl+'?commentPage=1">Oldest</a>');
for (var i = 1; i <= cmpage; i++) {
document.write('<a href="'+posturl+'?commentPage='+i+'">'+i+'</a>');
}
document.write('<a href="'+posturl+'?commentPage='+cmpage+'">Latest</a>');
}

//]]>
</script>

4, Find this line

<b:includable id='comments' var='post'>

and add these code right after the line above

<span id='commentpaging'>
                                     Comment Page :
                                    <script type='text/javascript'>commentpagination("<data:post.url/>","<data:post.numComments/>");</script>
                                </span>

So here is what you got

<b:includable id='comments' var='post'>
<span id='commentpaging'>
                                     Comment Page :
                                    <script type='text/javascript'>commentpagination("<data:post.url/>","<data:post.numComments/>");</script>
                                </span>

5,Save template . That's all .

How it work

First ,this script will take the number of comment in a post ,and than divide by 200 . Round up the result to the nearest integer ,we will get the number of comment pages .
For example ,if my post has 250 comments :
250/200 = 1.25 -> round up -> 2
So the comment page 1 contain first 200 comments and the comment page 2 contain the last 50 comments .
The url to a comment page has structure :

http:// post url .html?commentPage=comment page number

for example ,here is the url of comment page 2 in my blog

http://www.thesimplexdesign.com/2011/02/simplexenews-latest-version-fixed.html?commentPage=2

When we get the number of comment page ,and comment page url structure ,the next step is very simple ,just write down all comment page with a loop statement .

It's the way this code work . Hope this helpful to you

Create a video slideshow in sidebar

2011-12-26T10:51:00.000+07:00

In SimplexBlognews ,Simplex Enews templates and many other templates ,there's a widget for embedding video . You can insert one video from video service to this sidebar by inserting the embed code right into widget content .
But we want a slideshow for video in this widget ,is it possible ?
Yes,it's possible . We can make a small slideshow for video in this widget .

Download Loopedslider js
Want a demo ? Please see in Demo of SimplexEnews template ,I added a slideshow for video in the right sidebar.

How to do ?

Do backup before make anychanges

1,Go to Dashboard ->Design - >Edit HTML

2,Upload Looped slider script in your host or host them in blogger .

3,Add script of Jquery framework right after </head>

After this line ,add script of looped slider .

4,Add the script to activate loopedslider in the end of template ,right before </body>

5,Add the CSS code right before ]]></b:skin>

.slides1 { position:absolute; top:0; left:0; }

.slides1 div { position:absolute; top:0; width:500px; display:none; }

You can add or remove CSS code to make the slide display as you want .

6,Save changes .

7,Go to Page Elements ,Click on edit link sidebar widget which you want to add video slideshow ,or create a new HTML/Javascript widget .
Paste the HTML markup as structure bellow :

<ul class="slides1">
            <li>
                .............video embed code .............

            </li>

<li>
                ................video embed code ..................

            </li>
<li>
                 ..................video embed code .............

            </li>

        </ul>


    <ul class="pagination">

    </ul>

Save changes .

10,Back to blog and see the result .

That's all for video slideshow in sidebar . I hope it helpful to you . Free to leave comment here

Christmas icon packs for web designer in holiday season

2011-12-23T10:24:00.000+07:00

Have you redesign your web/blog in this holiday season ? In this post ,I will show you some icon packs that good for Xmas . These collections are collected from various sources . Hope them helpful to you .
1,

Free Christmas Icons

Christmas Icon Sets

Christmas icons

Snowmen Icons

Winter Holiday Icons

Xmas Icons

Comment

Christmas Mini Pack

Christmas Icons

10,

Christmas Social Icons

11,

Holiday Seasonal Icons

12,

White Animals Icons

13,

Social Nomnomnom

14,

Harry Potter And The Bitten Apple

15,

Snowmen Icons

16,

Pool

17,

Christmas icons

18,

Articles

19,

Christmas Icons 2

20,

Lontar Eve

21,

Christmas icons

22,

Christmas Icons 2007

23,

Christmas icon

24,

Christmas Icons

25,

My Christmas

26,

Blogger Xmas Logo Icons

27,

Xmas pack

28,

Icon

Unlimited hosting for scripts in blogger template

2011-12-19T14:40:00.000+07:00

Many many of you complaint my host 110mb.com not working . Yes ,it's not a stable and reliable free hosting . So in this post ,I will tell you solution to fix this problem . The idea is very simple , we can host scripts in blogger itself .
This solution will make your template hard to read ,not good for SEO (as SEO expert said) because we included all scripts in template file . But hosting scripts in blogger will increase the loading speed ,and it work 100% ,don't need to worry about downtime .

How to do ?

1,If you are using a template from SimplexDesign ,open template in a word editor such as notepad ,wordpad ,notepad ++ ...

2,Make a search for this term <script ,it will show you all the place where scripts are embedded to your template .
Take a closer look ,if the script is hosted in another host , you will see something like this :
<script src='http://hosting....../xxxx.js' type='text/javascript'/>
The src attribute in <script statement above indicate the URL of javascript file .
Copy this URL http://hosting....../xxxx.js and paste it in browser window

It will show you the content of js file as picture above ,or a dialog which asking for download js file .
If you download the js file ,open it in a word editor

3,Insert the script in js file into blogger template by using this structure :
<script type='text/javascript'>
//<![CDATA[

insert content of js file here
............

//]]>
</script>
After inserting the script to blogger directly ,delete the line
<script src='http://hosting....../xxxx.js' type='text/javascript'/>
that we found in step 2 .
Do this for the rest .

4,Save template and upload it to blogger .
That's all .
I hope with this tip ,we can forget the problem with free javascript hosting . Yes,if you have a hosting ,you can host js file in your host ,it better for SEO .

SimplexDesign got a new domain and email address

2011-12-06T10:11:00.000+07:00

After two year working ,I decided to add a new domain for SimplexDesign blog ,that will make it more professional and easy for the development in the future . The new domain is :

http://thesimplexdesign.com

I think it easy to remember and not so far from the domain we all known http://simplexdesign.blogspot.com .

You may ask me what happen to .blogspot.com domain ? Oh ,yes ,it still alive and you can still access SimplexDesign blog with this domain . All post links ,backlinks to this domain are remained ,not broken . So if you have a link back to SimplexDesign ,don't worry about it .

A new thing is the contact email . From now,lease send / forward all emails (request templates ,questions ,comments ,suggestions ....) to this email :

Admin@thesimplexdesign.com

This email is very easy to remember and separated from my personal email : contact.dinhquanghuy@gmail.com , so your emails will not be flooded in other emails of mine ,and I can answer you faster .

Facebook for SimplexDesign ,oh ,I want to repeat this facebook again :

http://www.facebook.com/simplexdesignblog

In case you want to receive update via Twitter ,please follow :

http://twitter.com/dinhquanghuy

That's all new today :D thanks for support me all the time ,and hope you keep supporting me in the future .

Image zooming plugin

2011-11-23T10:51:00.002+07:00

Sometime ,we need a bigger and detailed version of an image ,but size of image is limited by post frame . So we can do a zoom function for image . For example ,you have a blog that selling children apparel . Because of the limitation of post frame ,if we add a big image ,it will break out the layout .If we add a small size image ,it's hard for buyer to see product in detail . It's time for zooming function .

Download

Installing this script is not different to lightbox effect .
Now let's start
1,Download the script files and upload to your hosting . This step is required because I have no hosting in hand now .

2,Now add these line bellow before <body>

<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/JavaScript" src="/js/cloud-zoom.1.0.2.min.js"></script>

3,How to use
In blog posting window ,after inserting image ,click on edit HTML ,and edit the HTML code of image to this form

<a href="bigimage.jpg" class="cloud-zoom" rel="option goes here .........">
<img src="smallimage.jpg" title="Optional title display" >
</a>
Bigimage.JPG is the big and detail version of image
Smallimage.JPG is the small version of image
Class 'cloud-zoom' is required .

4,If your blog has a line for calling jquery framework ,do not add more

because more than one jquery calling can make all script stop .

5,Options can be set by adding into rel attribute . I marked where to put option by the text "option go here" in the step 3 . Each option is separated by a comma ( , ) .

Here is the list of options

zoomWidth : The width of the zoom window in pixels. If 'auto' is specified, the width will be the same as the small image .
zoomHeight : The height of the zoom window in pixels. If 'auto' is specified, the height will be the same as the small image.
position : Specifies the position of the zoom window relative to the small image. Allowable values are 'left', 'right', 'top', 'bottom', 'inside' or you can specifiy the id of an html element to place the zoom window in e.g. position: 'element1'
adjustX : Allows you to fine tune the x-position of the zoom window in pixels.
adjustY : Allows you to fine tune the y-position of the zoom window in pixels.
tint Specifies a tint colour which will cover the small image. Colours should be specified in hex format, e.g. '#aa00aa'. Does not work with softFocus.
tintOpacity : Opacity of the tint, where 0 is fully transparent, and 1 is fully opaque .
lensOpacity : Opacity of the lens mouse pointer, where 0 is fully transparent, and 1 is fully opaque. In tint and soft-focus modes, it will always be transparent.
softFocus : Applies a subtle blur effect to the small image. Set to true or false. Does not work with tint.
smoothMove : Amount of smoothness/drift of the zoom image as it moves. The higher the number, the smoother/more drifty the movement will be. 1 = no smoothing.
showTitle : Shows the title tag of the image. True or false. true
titleOpacity : Specifies the opacity of the title if displayed, where 0 is fully transparent, and 1 is fully opaque.

That's all for zooming . I hope it helpful to you .

SimplexLinepress - blogger version of Linepress template

2011-11-10T14:47:00.000+07:00

Some readers asked me for a blogger version of Linepress template (from Gabfire) . After a long time ,now I want to show you the result . It's good for a magazine or news portal . Hope you all like this .

Live Demo | Download

How to install this template

1,Download the template .

2,Open the template file in any word editor . I recommend Notepad ++ for easy in editing .

3,To add social network account

Find this code :

<div id="submenu">
                <ul class="subnav">
                    <li><a title="Subscribe to latest posts in RSS" rel="nofollow" href="/feeds/posts/default" class="gab_rss" target="_blank">RSS for Entries</a></li>
                    <li><a title="Subscribe to latest posts via email" rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=simplex" class="gab_email" target="_blank">Subscribe via E-mail</a></li>
                    <li><a title="follow on twitter" rel="nofollow" href="http://www.twitter.com/dinhquanghuy" class="gab_twitter" target="_blank">Follow on Twitter</a></li>
                    <li><a title="Connect on facebook" rel="nofollow" href="http://www.facebook.com/simplexdesignblog" class="gab_facebook" target="_blank">Connect on Facebook</a></li>

and change the link in bold to your social network and feed burner accounts .

4,Save template and upload to blogger .

5,Go to page elements .

6,To add logo

click on logo widget

and add your logo into widget content as structure

like picture bellow

7,To add item to main menu navigation

click on 'menunav' widget

add link to your categories

8,To add content in 'teaser' section

click on teaser widget

add the category name into widget content

Do the same for 'teaser','featureright','mediabar','primarybottomleft' widget

9,To add content in the tab

click on each widgets from 'priBottab1','priBottab2','priBottab3','priBotab4'

add the category name into widget content ,add the name of category into widget title.

10,Other widgets can be edit as you want . You can add script into widget content (ads ,video embed ...)

11,You can add or remove or move widgets in anyplace as you want .

Save changes . That's all for this template .

I hope this template work fine for you .

Create post summary for video post

2011-10-24T11:27:00.000+07:00

Some readers asked me how to make a frontpage like simplextube2 . The video player is shown directly in homepage . The idea behind this script is similar to other 'readmore' script ,but it focus on video .

First , we set the form for a video post :

video link ...

endofvid

[starttext]

text for description

[endtext]

it means when we have a video post ,we have to post it as exact as this form .For example with a video from youtube :

http://youtube.com/..... endofvid

[starttext]

this is description

[endtext]The term 'endofvid' is used to marked the end of video link ,the text in front of this term is video link .

Second ,when creating readmore ,the script will scan all post content ,searching for the term 'endofvid' ,extract the text before this term and determine which service it is belonged . For example ,if the text contain the word ' youtube' ,it means video service provider is youtube . If the text contain 'vimeo' ,it means the video provider is vimeo .

Third , create a video player for the video service we determine above . For example ,if the video link above is belong to youtube ,in this step ,we create a youtube player . After creating video player ,feed the video link to player ,and show it in front page .

Fourth ,delete marked words 'endofvid' ,'[starttext]' ,'[endtext]

Now we move to the script

Insert this code before <body>

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

</script>

Content of this script is as exact as the explanation above ,step by step . In this script ,there are 5 video service : youtube ,liveleak,vimeo,dailymotion and metacafe . If you want another video service that allow video embedding ,feel free to suggest :D

Now ,move to the body of the post ,find this code

<data:post.body/>

and replace it with

<div expr:id='"summary" + data:post.id' style="margin-top:10px;">
                                    <data:post.body/>
                                </div>
                                <script type='text/javascript'>createVideo("summary<data:post.id/>");</script>

Now let's check for the post summary . You can create a post as the structure in step 1 ,insert a video from youtube ,and then see the result of post summary . Does the post show up with post summary and a video player ?

Make an impressive landing page for blogspot .

2011-10-17T10:46:00.003+07:00

Some readers asked me for making a static landing page for blogspot . It makes blog look more professional and separated to other blogspot’s blogs .

In this post ,I will tell you how to make a landing page for blogspot . This post related to HTML,CSS ,Jquery and some Blogspot Api’s ,so you must be familiar to them before we start .

The idea for this landing page is inspired by a design from Tympanus website .

Live Demo
Now let's start

1,HTML markup

The HTML structure consists of a main container and an unordered list where each item is one of the columns. The main container has class “ei_menu” and also the id “ei_menu”.
Under the main container ,each of <li> item contains a link element with two spans inside and a div element with the content.
The two spans are for the background image shown at the beginning and the image shown when click (active) . Since we are using just one image for each we will have to define the background position.
Div element contain the title ,text,and links .

<div id="ei_menu" class="ei_menu">
    <ul>
        <li>
            <a href="#" class="pos1">
                <span class="ei_preview"></span>
                <span class="ei_image"></span>
            </a>
            <div class="ei_descr">
                <h2>title</h2>
<a href="link">                <h3>Click here to go</h3></a>
                <p>Some text here...</p>
            </div>
        </li>
        <li>
            <a href="#" class="pos2">
                <span class="ei_preview"></span>
                <span class="ei_image"></span>
            </a>
            <div class="ei_descr">
                <h2>title</h2>
<a href="link">                <h3>Click here to go</h3></a>
                <p>Some text here...</p>
            </div>
        </li>
<li>
            <a href="#" class="pos3">
                <span class="ei_preview"></span>
                <span class="ei_image"></span>
            </a>
            <div class="ei_descr">
                <h2>title</h2>
<a href="link">                <h3>Click here to go</h3></a>
                <p>Some text here...</p>
            </div>
        </li>
<li>
            <a href="#" class="pos4">
                <span class="ei_preview"></span>
                <span class="ei_image"></span>
            </a>
            <div class="ei_descr">
                <h2>title</h2>
<a href="link">                <h3>Click here to go</h3></a>
                <p>Some text here...</p>
            </div>
        </li>
<li>
            .....................
        </li>

    </ul>
</div>

Link in href attribute of this line
<a href="link">                <h3>Click here to go</h3></a>

Can be link to any page you want . Link to all posts in blog is :

http://blog_name.blogspot.com/search/posts/default
When we use this HTML markup for home page ,it means we have to hide another elements . It's the time to use Blogspot API - the conditional statement .
It look like this

<b:if cond='data:blog.url == data:blog.homepageUrl'>
The HTML markup
<b:else/>
Other elements you want to hide in home page
</b:if>

For example ,in default template (such as minima) ,we want to hide blog posts :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

The HTML markup

<b:else/>

<b:section class='main' id='main1' showaddelement='no'>
.......................
</b:section>

</b:if>

2,The CSS

Add this code in CSS sections of your template

/* Menu style */

.ei_menu{

background:#111;

width:100%;

overflow:hidden;

}

.ei_menu ul{

height:350px;

margin-left:50px;

position:relative;

display:block;

width:1300px;

}

.ei_menu ul li{

float:left;

width:75px;

height:350px;

position:relative;

overflow:hidden;

border-right:2px solid #111;

}

.ei_preview{

width:75px;

height:350px;

cursor:pointer;

position:absolute;

top:0px;

left:0px;

background:transparent url(../images/bw.jpg) no-repeat top left;

}

.ei_image{

position:absolute;

left:75px;

top:0px;

width:75px;

height:350px;

opacity:0.2;

background:transparent url(../images/color.jpg) no-repeat top left;

}

.pos1 span{

background-position:0px 0px;

}

.pos2 span{

background-position:-75px 0px;

}

.pos3 span{

background-position:-152px 0px;

}

.pos4 span{

background-position:-227px 0px;

}

.pos5 span{

background-position:-302px 0px;

}

.pos6 span{

background-position:-377px 0px;

}

.ei_descr{

position:absolute;

width:278px;

height:310px;

border-right:7px solid #f0f0f0;

padding:20px;

left:75px;

top:0px;

background:#fff;

}

.ei_descr h2{

font-family: 'Rock Salt', arial, serif;

font-size:26px;

color:#333;

padding:10px;

text-shadow:0px 0px 1px #fff;

background:#fff url(../images/stripe_light.gif) repeat top left;

}

.ei_descr h3{

font-family: 'Raleway', arial, serif;

color:#fff;

text-shadow:0px 0px 1px #000;

font-style:normal;

padding:10px;

background:#333;

}

.ei_descr p{

color:#000;

padding:10px 5px 0px 5px;

line-height:18px;

font-size:11px;

font-family: Arial;

text-transform:uppercase;

}

Meaning of these CSS tags can be found in CSS cheat sheets or websites focus on CSS . I will not explain here for keep the post short and clean .Replace the images in background attributes to yours own images .
Add two lines

Right after </head> for embedding Google fonts into this design .

3,The Javascript

The idea is to expand the menu when clicking on it . The initial width for each menu item is 75 pixel ,when clicked ,the width is enlarged to 400 pixel (75pixel plus 325pixel for the hidden content )
Add this code right before </body>

$(function() {

var $menu = $('#ei_menu > ul'),

$menuItems = $menu.children('li'),

$menuItemsImgWrapper= $menuItems.children('a'),

$menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'),

totalMenuItems = $menuItems.length,

ExpandingMenu = (function(){

@current

set it to the index of the element you want to be opened by default,

or -1 if you want the menu to be closed initially

var current = -1,

@anim

if we want the default opened item to animate initialy set this to true

anim = true,

checks if the current value is valid -

between 0 and the number of items

validCurrent = function() {

return (current >= 0 && current < totalMenuItems);

init = function() {

/* show default item if current is set to a valid index */

if(validCurrent())

configureMenu();

initEventsHandler();

configureMenu = function() {

/* get the item for the current */

var $item = $menuItems.eq(current);

/* if anim is true slide out the item */

if(anim)

slideOutItem($item, true, 900, 'easeInQuint');

else{

/* if not just show it */

$item.css({width : '400px'})

.find('.ei_image')

.css({left:'0px', opacity:1});

/* decrease the opacity of the others */

$menuItems.not($item)

.children('.ei_preview')

.css({opacity:0.2});

}

initEventsHandler = function() {

when we click an item the following can happen:

1) The item is already opened - close it!

2) The item is closed - open it! (if another one is opened, close it!)

$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {

var $this = $(this).parent(),

idx = $this.index();

if(current === idx) {

slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);

current = -1;

}

else{

if(validCurrent() && current !== idx)

slideOutItem($menuItems.eq(current), false, 250, 'jswing');

current = idx;

slideOutItem($this, true, 250, 'jswing');

}

return false;

});

/* if you want to trigger the action to open a specific item */

openItem = function(idx) {

$menuItemsImgWrapper.eq(idx).click();

opens or closes an item

note that "mLeave" is just true when all the items close,

in which case we want that all of them get opacity 1 again.

"dir" tells us if we are opening or closing an item (true | false)

slideOutItem = function($item, dir, speed, easing, mLeave) {

var $ei_image = $item.find('.ei_image'),

itemParam = (dir) ? {width : '400px'} : {width : '75px'},

imageParam = (dir) ? {left : '0px'} : {left : '75px'};

if opening, we animate the opacity of all the elements to 0.1.

this is to give focus on the opened item..

if(dir)

alternative:

$menuItemsPreview.not($menuItemsPreview.eq(current))

.stop()

.animate({opacity:0.1}, 500);

$menuItemsPreview.stop()

.animate({opacity:0.1}, 1000);

else if(mLeave)

$menuItemsPreview.stop()

.animate({opacity:1}, 1500);

/* the <li> expands or collapses */

$item.stop().animate(itemParam, speed, easing);

/* the image (color) slides in or out */

$ei_image.stop().animate(imageParam, speed, easing, function() {

if opening, we animate the opacity to 1,

otherwise we reset it.

if(dir)

$ei_image.animate({opacity:1}, 2000);

else

$ei_image.css('opacity', 0.2);

});

};

return {

init : init,

openItem : openItem

};

})();

call the init method of ExpandingMenu

ExpandingMenu.init();

if later on you want to open / close a specific item you could do it like so:

ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)

});

</script>

That’s all .
There are two keypoints here :
1-Make the HTML markup ,adding CSS and javascript to make an expanding menu for homepage .
2-Hide elements which you do not want to show in homepage .

I hope this post helpful to you .

how to make a blogspot template : General steps of making blogspot template

2011-08-20T23:23:00.000+07:00

This is the last post in series 'how to make a blogspot template' .In this post ,I just want to tell you what I did when making Simplex's templates . I do not focus on HTML/CSS /Javascript because you can find documents on these easily in internet . I also do not go further on Blogger template structures/sections /widgets/data tags/API ,because they are mentioned in previous posts . Only work orders ,tools ,and some tips .

Unlike other platforms such as wordpress stand alone or joomla which a template comes with many files ,blogger template is in one file xml only .
As we know ,blogger template contain sections . Here is the order of these sections :

First ,header
Second ,blogpost
Third ,sidebar
Last ,footer

All we need to do when making a template are :

Place sections and widgets in right order . Add/remove sections /widgets
Add HTML arround these sections ,and use CSS to decorating them .
Add javascript /jquery for special effects ,get the feeds and mashup homepage .

1,Place sections and widgets in right order .

Blogspot is made up with sections ,widgets... so you have to place them in right order ,add more sections /widget for the function you want and remove unnecessary sections /widgets .
For example ,in Simplex Blognews template ,I add more sections for page list ( in the top of page ) ,sections for advertising banner ...remove default sections and widgets in sidebar .
I also use conditional statement <b:if> to hide sections/widget in some specific cases . For example ,we all know blogpost widget show the post list /single post (see the post on blogpost widget here) ,but in the homepage ,I don't want it to show up ,so I use a conditional statement to cover all blogpost widget

<b:if cond='data:blog.url == data:blog.homepageUrl'>
homepage content
<b:else/>
blogpost widget .....
</b:if>

In the code above ,if the current page is homepage ,it will show homepage content , if the current page is a category page or single post ,it will call blogpost widget for processing content .
Or if we want to hide all the blog content when go to a specific page ,we can use a conditional statement like that :

<b:if cond='data:blog.url == "page url"'>

.....

<b:else/>

2,Add HTML and CSS around sections/widgets

We have a template's frame with sections and widgets,now we need to add more HTML tags around and decorate these HTML tags with CSS to make it display as we want : some images ,some text in bold , fonts ....you can do all of them in this step .
Firebugs is the best tool for this work ,you can find the post on how to use this tool here . It will reduce your time on working with CSS and HTML .You can use this tool to inspect elements on websites which has design you want and find out which HTML/CSS their designer used . CSS tags information and cheatsheet can be found in this post .
To get some inspirations ,you can go to template galleries ,collections ,or go to famous blogs on design . Sometimes ,combining the elements which you love in various templates can give you an unique design .

3,Add Javascripts/jquery

Because blogger doesn't allow server side programing , Javascript/Jquery will give us a solution for mashing up a homepage . By using Javascript to get feeds from categories in blog,split the feed into post titles,post summaries ...and then display them ,we have a good homepage ,as you see in Simplex' templates .
Javascript/Jquery is also used to make special effects,for example ,sliders,hover buttons ,menu ...
You can find out more post on using Jquery/Javascript in SimplexDesign blog .

That's all steps I applied when making a template and it work for me ^^ I can't tell you how to make a specific template ,because it's very long and take times . I hope with series 'how to make a blogspot template ' you can :
-Understand the basic of a blogspot template ,structure,what it contain
-Functions of sections /widgets,how they work .Meaning of data tags /Api and statements.
-General steps to make a template,what we have to do ,what we have to search in google for making an elements ....
By reading all posts from start to the end ,I hope every time you see the code of Simplex templates ,you can understand what I did,and then make your own customization ,you can also apply them in making your own template .
It take time to search,read and then apply to make a template . It's not easy . But if you want ,you can do it .Thanks for supporting me all the time .

How to make a blogger template : how blogspot widget work?

2011-08-06T10:36:00.000+07:00

In previous posts ,you known the meaning of Blogger data tags ,now in this post ,we will see how blogspot widget ,the most important widget in blogger work .
Blogpost widget is the widget that show the process and show the blog post .
It contain many 'includable' inside ,this structure you can get from the post on widget.
Now let't see how it work

In a template , Blogpost widget start with this line
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

The id can be vary in different template ,but the type="Blog" is required
In this widget ,there are some 'includable' :

<b:includable id='main' var='top'> : main includable ,this includable will take the main task for processing data and show the result to user computer
<b:includable id='nextprev'>: this includable will add the link 'next page' ,'prev pag' at the bottom of homepage ,archive page ,and add the link 'next post','previous post' at the bottom of single post .
<b:includable id='mobile-nextprev'> this includable do the same task to nextprev includable above ,but this includable will work if you browse the blog in mobile .
<b:includable id='post' var='post'> this includable will process the data of each post ,it will show post title,post body ,date .... if you are reading a single post ,and show post summary if you are in homepage or archive page
<b:includable id='mobile-index-post' var='post'> like 'post' includable above ,but it work on mobile
<b:includable id='postQuickEdit' var='post'> this includable will add an small pencil at the end of post ,that allow blog owner can edit the post easily ,click on this pencil ,blog owner will be redirected to post editing window ,don't need to back to dashboard ,and search for post which he want to edit from post list.
<b:includable id='shareButtons' var='post'> this includable will show a list of share buttons at the end of post
<b:includable id='comments' var='post'> show all comments of each post .
<b:includable id='commentDeleteIcon' var='comment'> add a recycle bin symbol next to the comment ,allow blog owner delete unwanted comment .
<b:includable id='comment-form' var='post'> show the comment form bellow the post ,allow reader to write their comment .
<b:includable id='backlinks' var='post'> show the backlinks to a post .
<b:includable id='backlinkDeleteIcon' var='backlink'> show the recycle bin icon next t'o the backlink
<b:includable id='feedLinks'> and <b:includable id='feedLinksBody' var='links'> :show the feed links to blog and to each post .
<b:includable id='status-message'> show the status message ,like this ' show all post under label xyz '

Blogpost work as diagram bellow

1,When Blogpost widget start working
2,It start a loop statement to looping through all post
3,If the post counting number i smaller than the number of post ,it will call the post includable for showing post data (post title ,post body ,author ,labels...)
4a,4b,4c In the post includable ,if the current page is a single post ,it also call other includables such as post edit icon ,comment ,comment form ... ,but if current page is homepage or an archive page ,these includable will not be called .
5,Go to the next post and back to the check point at step 3
6,In case of finish looping through all posts ,back to the main includable
7,Call next prev includable (or feedlinks,backlinks...if necessary) ,add the link to next and previous post to the end of page .
8,Finish

In these includable ,beside data tags ,we can add HTML ,javascript to make it display as we want .
Combine this post with previous post on data tags,widget structure ,looping and conditional statement ,you will get a big picture on how a template work when reading the code .
Hope this post helpful to you

How to make a blogger template : data tags -part 2

2011-07-27T20:00:00.000+07:00

In previous post ,I told you about data tags for some widgets . In this post ,we continue to the last and most important widget : blogpost widget . This widget is used to show posts in a blog . Without this widget ,we can't blogging .

Now let's see blogpost widget's data tags :

<data:feedLinks/>: A list of feeds for this page. On the main page, this will contain the main blog feeds; on item pages, this will also contain comments feeds. Each item in this list contains the following:
<data:feedLinks.url/>: The feed URL.
<data:feedLinks.name/>: The feed name (i.e. 'Posts' or 'Comments').
<data:feedLinks.feedType/>: The type of feed (Atom or RSS).
<data:feedLinks.mimeType/>: The mime type of the feed.
<data:olderPageUrl/>: If there are older posts than the ones on the current page, this is a URL to those posts. Context-sensitive for page type. (Not all pages will have this link.)
<data:olderPageTitle/>: Title of the link to the older page of posts. It's usually the text "Older Posts"
<data:newerPageUrl/>: The newer equivalent of olderPageUrl.
<data:newerPageTitle/>: The newer equivalent of olderPageTitle.
<data:commentLabel/>: The phrase to use to show the number of comments, e.g. "comments."
<data:authorLabel/>: The phrase to use to indicate who wrote the post, e.g. "posted by."
<data:timestampLabel/>: The phrase to use to indicate when the post was written, e.g. "posted at."
<data:postLabelsLabel/>: Phrase to introduce the list of post labels, e.g. "labels for this post."
<data:backlinksLabel/>: Phrase to describe backlinks to this post, e.g. "links to this post."
<data:posts/>: A list of all posts for this page. You can consider it a set ,and each post is an item in this set . We can refer to post's properties by the following tags:
<data:post.dateHeader/>: The date of this post, only present if this is the first post in the list that was posted on this day.
<data:post.id/>: The numeric post ID.
<data:post.title/:> The post's title.
<data:post.body/>: The content of the post.
<data:post.author/>: The display name of the post author.
<data:post.url/>: The permalink of this post.
<data:post.timestamp/>: The post's timestamp. Unlike dateHeader, this exists for every post.
<data:post.labels/>: The list of the post's labels. Each label contains the following:
<data:label.name/>: The label text.
<data:label.url/>: The URL of the page that lists all posts in this blog with this label.
<data:label.isLast/>: True or false. Whether this label is the last one in the list (useful for placing commas).
<data:post.allowComments/>: 'True' if this post allows comments.
<data:post.numComments/>: The number of comments on this post.
<data:post.showBacklinks>: Whether to show backlinks for this post.
<data:post.numBacklinks/>: Number of backlinks for this post.
<data:post.addCommentUrl/>: The URL of the 'add a comment' form for this post.
<data:post.emailPostUrl/>: The URL of the 'email this post' form for this post.
<data:post.editUrl/>: The URL of the edit form for this post.
<data:feedLinks/>: A list of feeds specific to this post. (This is different from the overall blog feedLinks, as it may contain a feed for the post's comments, for instance.) Each contains the following:
<data:feedLink.url/>: The feed URL.
<data:feedLink.name/>: The feed name (e.g. 'Posts' or 'Comments').
<data:feedLink.feedType/>: The type of feed (Atom or RSS).
<data:feedLink.mimeType/>: The mime type of the feed.
<data:comments/>: A list of all comments for this post (on item pages only). Each contains the following:
<data:comment.id/>: The numeric ID of the comment.
<data:comment.body/>: The body of the comment.
<data:comment.timestamp/>: The time the comment was created.
<data:comment.author/>: The display name of the comment's author, or 'Anonymous'.
<data:comment.authorUrl/>: URL of the comment author's profile, if the comment is not anonymous.
<data:comment.deleteUrl/>: The URL for deleting this comment.
<data:comment.isDeleted/>: Whether this comment has been deleted. (The text of deleted comments is replaced with a placeholder.)

How to make a blogger template : data tags - part 1

2011-07-22T20:00:00.000+07:00

In previous post ,I mentioned on what is on widgets and includable ,and now ,in this post ,I want to show you the Blogger APIs,or data tags ,which you can use to included specific pieces of data in template file .
All of these data tags has structure :
<data:name/> or <data:name1.name2/>
where name or name1,name2 is the name of the particular piece of data you want to use

Now ,we go further :
In the post on section and widget ,I told you there are 12 types of widget :

BlogArchive
Blog
Feed
Header
HTML
SingleImage
LinkList
List
Logo
BlogProfile
Navbar
VideoBar
NewsBar

So there are 12 groups of Blogger APIs (or data tags ) for 12 types of widget ,these APIs can use only in the corresponding widget and one group for Globally Available Data ( the data you can use in any place in template )
1,Globally Available Data :
These data tags can be applied to the entire page, so you can use it anywhere, unlike other data tags which can only be used in a specific widget.

<data:title/>: Return the blog's title.
<data:pageType/>: Return type of the current page. It can be 'item', 'archive', or 'index'.
<data:url/>: Return the URL of the current page.
<data:homepageUrl>: Return the homepage of the blog.
<data:pageTitle/>: Return title of the current page. This is often the blog title, but may contain additional information on archive or post pages.
<data:encoding/> : Return the encoding to use for the blog, e.g. UTF-8.
<data:languageDirection/>: Return either "ltr" or "rtl" for left-to-right and right-to-left languages, respectively.
<data:feedLinks/>: Return the autodiscovery feed links for the page header.

How to apply them ?
Very simple ,in template ,in a place you want to show blog title ,just add a <data:title/> and the blog title will be shown .

Page Header

There are two data tags for this widget :

<data:title/>: The blog's title.
<data:description/>: The blog's description.

Blog Archives

The different styles provided here are for the different default options on the Page Elements tab. If you're designing a new version, it's easiest to use 'FLAT' as the style, and then manipulate the rest of the data as desired.

<data:title/>: The title of the widget.
<data:style/>: One of 'MENU', 'FLAT', or 'HIERARCHY'.
<data:data/>: A list of each archive unit, each of which contains:
<data:data.name/>: The name of this archive interval, e.g. "August 2006."
<data:data.url/>: The link to the page containing posts from this interval.
<data:data.post-count/>: How many posts there are in this interval.

Profile Widget

For a blog with a single author, the profile widget contains the following information. Note that to access different parts of the photo data, you'll use notation such as <data:photo.url/>.

<data:title/>: The title of the widget.
<data:userUrl/>: The author's profile URL.
<data:location/>: The location from the author's profile.
<data:aboutme/>: The "About Me" information from the profile.
<data:displayname>: The author's display name.
<data:photo/>: The user's profile photo, made up of the following:
<data:photo.url/>: The photo URL.
<data:photo.width/>: The photo's width, in pixels.
<data:photo.height/>: The photo's height, in pixels.
<data:photo.alt/>: The "alt" text for the photo.

On team blogs, the profile widget contains less information about more authors, as follows.

<data:title/>: The title of the widget.
<data:authors/>: The list of all authors, each of which contains the following:
<data:authors.displayname>: The author's display name.
<data:authors.userURL/>: The author's profile URL.

If you want to design your template to handle both single- and multiple-author blogs, you can use the data:team variable to distinguish between the two cases. E.g. <b:if cond='data:team=="true"'> (display multiple authors) </b:if>

Text / HTML / JavaScript Widget

The Text widget and the HTML/JavaScript widget work the same way and have the same two pieces of data.

<data:title/>: The widget's title.
<data:content/>: The content of the widget.

Feed Widget

A feed widget's content is dynamically loaded using Google AJAX API after blog is rendered in a browser. It can be styled only using CSS.

<data:title/>: The widget's title.
<data:feedUrl/>: The URL of the feed.

Picture Widget

A picture widget contains a single image, and provides all the relevant data for that image.

<data:title/>: The title of the widget.
<data:sourceUrl/>: The URL of the image.
<data:width/>: The image's width, in pixels.
<data:height>: The image's height, in pixels.
<data:caption/>: The image caption.

Labels Widget

The labels widget includes a list of all labels that are in use on the blog.

<data:title/>: The widget title.
<data:labels/>: The list of labels, each of which contains:
<data:labels.name/>: The text of the label.
<data:labels.count/>: How many posts have this label.
<data:labels.url/>: A link to a page displaying posts with this label.

List Widget

The simplest form of a list. Each item is just a single piece of text, without any different types of data within it.

<data:title/>: The widget title.
<data:items/>: The list of items.

Link List Widget

A slightly fancier list, where each item has two parts to it: the text and the link.

<data:title/>: The widget title.
<data:links/>: The list of links, each of which contains:
<data:links.name/>: The link's text.
<data:links.target/>: The link's URL.

Logo Widget

It doesn't get any simpler than this one. Just one piece of data here.

<data:fullButton/>: The URL of the Blogger button you've selected.

How to make a blogger template : inside widget - includable

2011-07-18T20:00:00.000+07:00

In previous post ,I told you about section and widget ,and how it arranged in the template body . In this post ,I will show you what is in a widget.

As we know ,a widget has an opening tag and a closing tag ,and structure like this :
<b:widget [...attributes...]>
</b:widget>
for example ,a header widget
<b:widget id="header" type='HeaderView' locked="yes"/>

..............

</b:widget/>

a widget contain blocks of code 'includable' inside ,like this :

<b:widget [...attributes...]>

<b:includable id='main' var='xxx'>
    [insert whatever content you want here]
</b:includable>

<b:includable id='yyy' var='yyy'>
    [insert whatever content you want here]
</b:includable>

<b:includable id='zzz' var='zzz'>
    [insert whatever content you want here]
</b:includable>
..........
</b:widget>

If you see blogger template file ,this is what you see ,is that right ?

In each widget ,there must be one 'includable' block with id="main" .This will usually contain most or all of the content that will display for this widget ,and other 'includable' will support the main 'includable' in processing data . For example ,you have a widget which showing the subsription form ,in this widget ,there's a main 'includable' will show the form and result , and other 'includable' will get the data form ,connect to the subscription database,processing them...etc.. . Or if a widget is a car ,so the 'main includable' will be motor ,other includable will be fuel tank,spark plug,valves ,crankshaft ...

An includable followed with these attributes :

id: (Required) A unique identifier made up of letters and numbers.
var: (Optional) An identifier made up of letters and numbers, for referencing data within this section.

When a widget go to work , the main includable will get data ,pass data to other 'includable' for processing and then get the result back to main includable for showing result through a call stament .
The call statement has form
<b:include name='includable id' data='variable'/>

Beside the main 'includable' ,you can set the id of other 'includable' with any name you want .

If you familiar to 'function ' and 'procedure' in programing ,you can understand 'includable' and 'widget' easily . The main includable work as main program ,and other includable work as function or procedure .

Another example ,if you want to show post title :

<b:includable id='main'>

<b:include name='show_post_title' data='i'/>

</b:includable>

<b:includable id='show_post_title' var='p'>
............

show post title of the post has id='p'

..........
</b:includable>

in the code above ,the main includable has a call stament for includable 'show_post_title' . The ID of the post which you want to show title is passed through variable 'i' in the main . The includable 'show_post_title' get the value of 'i' and assign it as to variable 'p' , then show title of the post which has id='p' . The result is returned to the main includable and displayed as title of the post which has id='i' .

Includes are most useful if you have a section of code that you want to repeat multiple times in different places. You can just write the code once, put it inside a b:includable, then use b:include wherever you want it to appear. If you don't need to do that, then you can just stick with the single main includable and not worry about the rest. (Note that the main includable is included automically -- <b:include name='main'/> is unnecessary.)

Statements

Like any programing language ,Blogger allows us use some statement such as loop statement and condition statement in 'includable' .

Loops

The b:loop statement repeat a section of content multiple times. This is most commonly used for printing out each post in a list of posts for a given page, or each comment, or each label, etc. The general format for using loops is this:

<b:loop var='identifier' values='set-of-data'>
[repeated content goes here]
</b:loop>

The 'identifier' part can be any name you choose, and will be used to stand in for each new item in the list, for instance, in the blog posts widget, posts is a list,each time through the loop. A common convention is to simply call this "i" .

If / Else

You can use the b:if and b:else tags to display content in some places but not others. The general format is this:

<b:if cond='condition'>
[content to display if condition is true]
<b:else/>
[content to display if condition is false]
</b:if>

The b:else tag is optional. Without it, the result will be either the content listed in the b:if section or nothing. The closing </b:if> is required in each case, however.

How to make a blogger template : the body and APIs

2011-07-15T20:00:00.000+07:00

In previous post ,I told you about the header of a blogger template . The next part should be the CSS part ,but as you know ,we use the CSS to define how elements in body displayed (post color ,font,size...),so in this post ,I want to show you what is in the body of a template APIs and HTML markup ,then we will back to the CSS to define how they displayed .

The <body> part of a template is made up primarily of 'sections' and 'widgets'.
Sections mark out areas of a page, such as the sidebar, footer, etc.
There are many widgets in a section .
A widget is an individual page element such as a picture, a blogroll, or anything else we can add from the Page Elements tab.
In body part ,we can add HTML around 'sections' or add them inside 'widgets'

Each section has an opening and a closing tag, looking something like this:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">

</b:section>

A <b:section> tag can have the following attributes:

id - (Required) A unique name, with letters and numbers only.
class - (Optional) Common class names are 'navbar,' 'header,' 'main,' 'sidebar,' and 'footer.' You can use any name if you want ,or use google default . You can write some CSS tags to define how a 'class' look in CSS section .
maxwidgets - (Optional) The maximum number of widgets to allow in this section. If you don't specify a limit, there won't be one.
showaddelement - (Optional) Can be 'yes' or 'no,' with 'yes' as the default. If it is 'yes' ,you can add more widgets to this section ,in the section area ,you will see a link 'Add a Page Element' ,if the value is 'no' ,there's nothing .
growth - (Optional) Can be 'horizontal' or 'vertical,' with 'vertical' as the default. This determines whether widgets within this section are arranged side-by-side or stacked.

In a section ,there are many widgets , each widget can do a specific task ,for example : showing blog post content ,showing rss links ...
A widget also has an opening and a closing tags ,like this :
<b:widget id="header" type='HeaderView' locked="yes"/>

..............

</b:widget/>

A widget can contain HTML tags and Blogger APIs for different works , but in the simplest form ,it's only

<b:widget id="header" type='HeaderView' locked="yes"/> </b:widget/>

with nothing inside ,just a placeholder indicating how the widget should be handled in Page Elements tab .

A widget may have the following attributes:

id - (Required) May contain letters and numbers only, and each widget ID in your template should be unique. A widget's ID cannot be changed without deleting the widget and creating a new one.
type - (Required) Indicates what kind of a widget it is, and should be one of the valid widget types listed below.
locked - (Optional) Can be 'yes' or 'no,' with 'no' as the default. A locked widget cannot be moved or deleted from the Page Elements tab.
title - (Optional) A display title for the widget. If none is specified, a default title such as 'List1' will be used.
pageType - (Optional) Can be 'all,' 'archive,' 'main,' or 'item,' with 'all' as the default. The widget will display only on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of thier pageType.)

The types of widgets you can specify are:

BlogArchive
Blog
Feed
Header
HTML
SingleImage
LinkList
List
Logo
BlogProfile
Navbar
VideoBar
NewsBar

That's all for sections and widgets ,in the next post ,we will examine what is in a widget and APIs :D

How to make a blogger template : the header

2011-07-12T20:00:00.001+07:00

As mentioned in previous post on blogger template structure ,there are 4 main parts in a blogger template . Part 1 contain information on xml format ,and we can ignore this part because there's nothing to do here .
For the part 2 ,the header ,here is the first thing we should care for a blogger template .

In a default blogger template , there are only two lines in this part :

<b:include data='blog' name='all-head-content'/>

The first line

<b:include data='blog' name='all-head-content'/>

will insert necessary meta tags to the header automatically . If you view source code of a page in your blogspot's blog ,what will you see ? Something like that :

There's no line <b:include data='blog' name='all-head-content'/> .
It's replaced with meta tags , links to favicon ,link to default CSS, script file...

The next one

is rendered to the title tag in header
<title>blog titles .....blah blah ...</title>

What should we do with header ?

-You can add your own meta tags for 'site description' ,'keywords' , like these :

-Add your own favicon

-Add link to outside script files or css files

A small tip

Every page in blog should have description and keywords that close to the page's content,it's what google said in their SEO tip .
In Blogger ,we can't follow this advice exactly ,but we can try our best ,by using what Blogger provide .

We can use this code in the header

<b:if cond='data:blog.pageType == "index"'>

<title><data:blog.title/></title>

......... meta tags for the homepage ....

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<title><data:blog.title/></title>

....meta tags for category page (or archive page)....

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<title><data:blog.pageName/></title>

.... meta tags for single post ...

</b:if>

The code above means :

-if the current page is homepage ,it show the meta tags for homepage in header and blog title in title
-if the current page is category page ( page that contain a list of posts under a specific category ) ,it show the meta tags for category page in header and blog title in title
-if the current page is a single post ,it show meta tags in header and title of post in title .

By using this code ,we can narrow the meta tag (keywords,page description) and title for every page type . Although we can't add keywords ,page description for a specific post ,but it's still better than do nothing ,isn't it ?
That's all for the header . In the next posts ,I will move to other parts in a blogger template , steps to make a HTML template , convert it to Blogger , and tools for this work .

How to make a blogger template : Blogger template structure

2011-07-11T20:00:00.001+07:00

Blogger team tried to make their product more easier to use and customization for all users with their template design funtion . If you want some changes in fonts ,background ,layout...,this function can help you . But if you want more ? want to make your own blogger blog look like a professional website ? It's time you need to know something about structure of blogger template ,apis ,scripts ... to make your own .
I will make a post series on How to make a blogger template ,so you can make one for yourself or can do the customizsation easily . I will try to make it short ,and easy to understand , hope it helpful for you .

Here is the first post on this topic : Blogger template structure

Blogger template is written in xml markup language ,a complete template has 4 section as mentioned bellow(this is my way to describe a template ,not Google ^^ )

1,The first section will contain something like this
This part will define the document bellow is in xml format ,the standard of this xml ,and something else related . I'm not a professional developer and do not know much on xml ,so I can't explain you more about this part ^^ This part is required but fortunately ,we don't need to make anychanges on them .

2,The second section : This section start from <head> to <b:skin> , it contain necessary tags for header ,meta tags , link to favicon... like other html documents . In this section ,we can add favicon ,adding some meta tags for description ,keywords ..

3,The third section : Start from <b:skin> and end at </b:skin> ,it contain CSS tags ,that set the appearance of your blog . This CSS define how an element in blog look like ,such as text color ,font size ,color ,background ... All tags in this part are follow the standard of CSS without any exception or 'CSS tags for Blogger only' ,so if you have some basic knowledge on this field ,you can easily modify them as you want .

4,The forth part start from <body> end at </body> : the main part of a template ,it made up primarily with 'section' and 'widget' . In sections and widgets ,there are Blogger APIs for specific tasks .
We have many 'sections' ,one for showing posts ,others for show banner in header ,or showing footer ...
In the section for showing post ,we have widget for showing single post , widget for showing posts in categories ,widget for showing posts in homepage ...
In a widget ,for instance ,widget showing single post ,we have Blogger APIs for showing date ,time ,post header ,post body ...

Beside APIs,we can use HTML tags to arrange elements and make them display as we want .
This is similar to Wordpress template ,if you ever work with them before .

Other element that I usually use in Simplex's template is scripts . Scripts can be anywhere in part 3 and 4 ,but in some cases ,we need to grouped them or move them to the end of template (before </html> ) to avoid conflicting .
That's all for template structure ,in the next posts ,I will go deeper in each part .

Why Every Programmer Should Learn SEO - and Vice Versa

2011-07-07T20:00:00.001+07:00

This article was written by Anthony Benedict.

In the business world that doesn't involve coding, link building, programming, designing, writing for the Internet or one of the many other jobs that can be done with an Internet connection and a decent computer - all these jobs are grouped into one type of position. People with jobs like these are known to outsiders as the "computer people" and many of them think that all of them pretty much do the same things - which can be summed up for the most part as designing websites.

Although all of us that partake in these types of jobs know that this is not at all the case, there should be a little bit of truth to that claim, as every person involved in SEO should be at least a little bit involved in programming - and every programmer (well not every single type of programmer actually) should be at least a familiar with SEO.

Why "SEO's" Should Know a Little bit of Coding/Programming

First of all as an SEO you should know that coding and programming isn’t at all the same thing. There are some very advanced types of programming that you will probably never have the time in your life to learn - and that does not include the basic types of coding like HTML and CSS, although these are two great places to start.

One of the main reasons you should learn about CSS and HTML (and even JavaScript) is that having the best formatting within your coding can tremendously help your SEO. Just like browsers, Google is "likes" light weight coding and its spiders can crawl and read it a lot faster, thus allowing you to get indexed much quicker.

Another reason an SEO should learn a little bit of programming is that it will give you new ideas on how to attack old problems. It will help you learn what you are wasting your time on, what can be automated, and help you to solve your problem on an exponential platform. You don't have to become an expert in the field of programming, but just doing a little bit of dabbling in it will help you get a better idea of sorts of things that can be done that you didn't even think were possible. In fact just a simple conversation with a programmer and seeing what he has to say or what he can do for you will help with that.

Why Programmers Should Learn SEO

Whether you are a web site designer or a hardcore programmer - you should know one thing. There is a lot of money involved in the world of SEO. And since SEO is very much related to what you will be able to do on the computer - designing programs around SEO tactics, needs, services, and even companies. As a freelancing programmer, the world of SEO, link building, and content writing can really give you some great ideas. In fact some SEO businesses are found on great programs that allow SEO's to automate a lot of the tedious work that comes with Internet marketing.

Of course another reason one should learn SEO because owning a website is the best way to market what you are trying to sell. And the best way to market you website is by learning about SEO. Even learning the basics is essential for hiring a company to do all your SEO for you - otherwise you may up over paying for services that may never even pan out.

Being a web developer or programmer with an SEO background, or specializing in Internet marketing with a little bit of a computer science background is a very impressive resume - and many companies (even ones that do not have to do with he Internet) love seeing that type of combination. Being able to have your mind at least somewhat wrapped around both concepts will open many doors for you - whether you are working for a corporation or starting your own business.

About Author

This article was written by Anthony Benedict. Anthony helps to run and maintain inetzeal.com. inetzeal.com is an Internet marketing company that provides many services - including an ever popular white label link building service.

How to solve CSS errors in Blogger template using Firebug

2011-07-06T20:00:00.001+07:00

Knowing CSS can help you in solving Blogger template errors ,or make some customization . But how to do that ? how to find where is the trouble or find what CSS attribute you need to change when make customization ? In this post ,I will show you what I did : using Firebug (a Firefox add-on ) to work with CSS .
Firebug is a great add-on of Firefox browser ,it's very popular in web development because it can help us inspecting website elements ,debugging errors in CSS ,script ,seeing web layout ....
To use Firebug ,first ,Firefox browser must be installed in your PC . Then go to website : http://getfirebug.com/ ,click on Install Firebug to get the latest version and installed this add-on to Firefox .

After installing Firebug ,you will see an new button in browser window ,this button has the image of a bug .

Enter the Blogger blog you want to fix errors or make customization
When the page fully loaded ,click on firebug button ,the firebug window will appear at the bottom of browser window .

Click on the arrow button in firebug window

After click this button ,there will be a rectangle around the element that the mouse is pointing . Move your mouse pointer to the element you want to change size or fix error
In the right panel of firebug window ,you will see the CSS tags of element which you are pointing .

You can click on the value of these CSS attributes to change value of them ,for example ,in this picture ,I changed width of an element in the right panel ,and see how it look after changing immediately in browser window .
You can also add more attributes to a CSS tags to make it display as you want ,for example ,you want color of all text in an element changed to white color,just right click on right-panel and ,choose new property ,and then add color:#fff;

That's very easy and fun because you can see how your site is right after making changes .

But how to know which CSS need to change ,or meaning of CSS tags or what need to add to make it display as you want ? You can see it easily in my previous post : 31 online CSS cheatsheets that may helpful .

You can use Firebug to see the element layout ,the right or left margin ,padding... in Layout tab in right panel .
When you finish the work ,just go to Blogger template (xml file) ,and add the tags or attributes that you've just added in Firebugs to your template .
There're many functions that Firebug can help you in finding bugs and fixing errors .It's very easy to use ,believe me ,just need a little of time ,you can handle this software and make it work for you ^^

31 online CSS Cheatsheets that help

2011-07-05T20:00:00.001+07:00

Believe it or not ,most of modifications in default Blogger templates that I did were CSS only . And the result are custom templates you see in SimplexDesign blog .Understanding CSS ,even a little can help you in changing elements in website/blog as you want .Changing in Font size,colors ,size of elements ,positions of elements... all of them are CSS ^^
But how can we remember all of them ,we are not developer and we have no time to do this . So here are 30 CSS cheatsheets ,that you can use for reference ,anytime you want to know about an attribute ,what they mean ,and the role of them ...
I hope this helpful to you
This information was found on this site ,and you can go there to get the original post and more interesting posts
This article is divided in 2 major Sections:

1,Most Practical CSS Cheat Sheet Yet

More Information on Most Practical CSS Cheat Sheet Yet

CSS Cheatsheets

20,CSS3 Cheatsheets

CSS3 Click Chart

More Information on CSS3 Click Chart

21,CSS3 Help Sheet.

More Information on CSS3 Help Sheet.

22,CSS 3 selector syntax

More Information on CSS 3 selector syntax

23,CSS3 Quick Reference Guide

More Information on CSS3 Quick Reference Guide

24,CSS 3 Cheat Sheet

More Information on CSS 3 Cheat Sheet

25,WebKit CSS3 Cheat Sheet

More Information on WebKit CSS3 Cheat Sheet

26,CSS3 Color Names

More Information on CSS3 Color Names

27,HTML5 and CSS 3 Cheat Sheets

More Information on HTML5 and CSS 3 Cheat Sheets

28,HTML5 & CSS3 Support

More Information on HTML5 & CSS3 Support

29,CSS 3 cheat sheet

More Information on CSS 3 cheat sheet

30,Compatibility tables for support of CSS3

More Information on Compatibility tables for support of CSS3

31,CSS3 – Information and samples

More Information on CSS3 – Information and samples

(Source : http://slodive.com/freebies/css-cheat-sheets/ )

Nature business card template for free

2011-07-04T20:00:00.002+07:00

I took an eye surgery two weeks ago and now I think my eyes are good enough to use computer again . Now is the time for me to answering comments and post something new after a long delay ^^
Thanks for still coming in my blog and keep supporting me in this time .

In this post ,I want to show you a freebie,a beautiful nature business card template in psd (Photoshop file format ) , just need some changes in name ,address... and it's ready to use

Designed by iBrandstudio ,this free business card is have very beautiful nature background with the atmosphere in the afternoon when the sun goes down. Come with double sided template with 3.5″x2″ in business card size, ready for print and highly customizable. The business card design that perfect for anyone.

You can use this business card template for free, both your personal and commercial project but do not redistribute or resell.

Features

Beautiful nature design
Highly customizable – Layered PSD and well organized
Ready for print with bleed lines and trim guidelines

Details

Date created : July 3, 2011
Font used : Arial and Lobster 1.4
Size : 3.5”x2”
Color : CMYK

Preview

Download

Have fun with it !

Useful online mind mapping and brainstorming tools

2011-06-20T22:24:00.019+07:00

Concept mapping and Mind mapping software are used to create diagrams of relationships between concepts, ideas or other pieces of information,by using this ,all ideas are connected and we get a greater image . It is used by individuals, corporate teams, students and teachers alike for various purposes.
As bloggers,we can use this technique for brainstorming ,getting new idea for blogging . In this post, I want to show you some online tools for mind mapping .

1. Spider scribe

SpiderScribe is a user friendly, free and online collaborative mind mapping tool for project management and brainstorming. With this flexible tool you can create freestyle and multi-directional maps – and combine them with elements such as images, text, files, calendar events and geographic locations.

2. Mindmeister

MindMeister is the most simplistic mind mapping tool , but its simplicity is definitely an asset. Once you’re logged into the service, you can create a fully functionalmind map using little more than the directional arrows and the Insert key to add new nodes to your map.You can set font size ,node colors ... ,and exporting file to popular format PDF, JPG, PNG, or GIF.

3. WiseMapping

WiseMapping is a free online mindmapping and collaboration tool which helps in Creating mind maps online, invite friends as contributors (useful when working in a team), save maps as PDF, and more. The drag’n’drop capabilities of WiseMapping make it easy to build up your diagram.

4. Mind42

Cool mind mapping tool for creating highly customizable organization charts. Each chart node can be colored, converted to an image, supplemented with a custom icon, link, attachment and more.

5. Mindomo

Mindomo is an online mind map Software where users can create, view and share mind maps in their browser. Mindomo is offering the basic services for free, while charging for advanced features. Unregistered users can view the mind maps, while registered users are permitted to create and share mind maps.

6. Gliffy

Extremely powerful techy-oriented diagram creation and collaboration tool, create anything from basic flow-chart diagrams to well-documented troubleshooting guides.

7. XMind

The interface is simple and intuitive to use. You can quickly move through your entire mind map with only a handful of keystrokes or jump over to the outline view for even quicker navigation. In addition to a basic mind map you can also create fishbone, organizational, tree, and logic charts. You can export charts as HTML, images, or text, and XMind comes a free account on XMind.net which allows you to share your charts online and embed them into blogs and web sites.

8. Glinkr

Map and share your views of contents on the Web.It's a free tool,easy to use .

9. Solvr

An interesting tool for getting solutions from others . You have a problem ,share it on Solvr, you have a link ,you can send this link to your friends ,or submit it to a forum,social networks .Every people who have the link can go to Solvr and share the solution to solve the problem .

10. Bubbl.us

Mind mapping is a fantastic way to sketch out ideas and do some really productive brainstorming. Bubbl.us is a mind-mapping product aimed towards exactly anyone who needs help organizing their thoughts or any jumbled information. Powered by Flash, Bubbl.us makes it easy for anyone to quickly start planning and sorting out their ideas through the use of linked text bubbles.

11. iMindMap

iMindMap takes a different approach to mapping than the other applications in the list. Rather than create new nodes off the main idea by adding boxes, nodes are created by clicking in the center or the main idea and drawing away from it with the mouse. Each new idea is a branch off the center. Strangely, many of basic feature available in free mind-mapping software are only found in the more expensive versions of iMindMap, like the ability to expand and collapse branches. Mind maps created in iMindMap can be exported as PDF, JPG, PNG and text outline.

Creating a Blog Concept for New Bloggers

2011-06-11T23:12:00.000+07:00

This guest post is by Mariana Ashley

One of the most difficult aspects of starting up a blog is creating a concept. Especially when creating a blog intended to collect ad revenue or your first official "serious" blog (as in, you want this blog to have thousands of subscribers and launch you into a blogging career), devising a foundation that will unify all your potential posts and ideas can become terrifyingly daunting. Any experienced or successful blogging guru will tell you that planning is critical in this phase of blogging. Fortunately, the variety of methods for planning and creating a blog is currently approaching infinity.

Stop and Ask Why

This is a crucial step that not enough bloggers do. In order to have a successful blog, you have to define and redefine the purpose of your blog. This may include some personal goals like "keep my writing skills up" or "have an online presence for my work." Remember that you should also ask why your blog will be read by others. What purpose will it serve for them? Will it serve a valuable niche topic? Will it provide good information that is otherwise hard to find? There are never too many why questions to ask before starting a project. The more you define why you are creating the blog and why it will be important to others, the more valuable and focused your blog will become in the end result.

Research

First and foremost, research research research! You should be reading any and every blog related to any idea you might want to blog about. If you don't have a feed reader, get one now! Seriously, if you want to consider yourself a blogger and don't want your life to become a nightmare of bookmarking and internet history searching, you need a reader like any aspiring author needs a bookshelf (or milk crates if they're on a budget).

As a Google fan, I use Google Reader to aggregate my feeds, but I recently started using Feedly (which basically transforms Google Reader into a personalized magazine) to consume my feeds. Since many readers allow you to integrate, import, or export your feeds, you can easily experiment with various readers and see what works best for you. Remember to organize your feeds and create a folder for blogs that give you inspiration for your new concept.

Brainstorm

Believe it or not, brainstorming is an essential process of project planning that too few bloggers (and countless other professions for that matter) actually implement. With all the free (usually for at least some limited service) project planning software and web applications available, there's no excuse to forgo this planning step. Of course, Word or Notepad – or even a physical sheet of paper and a pen – are all you really need to brainstorm, but it can be fun to get fancy.

Of course, it's a good idea to define any purpose and principles of your blog before jumping into brainstorming, but it's by no means a necessity. Just blindly brainstorming blog topics can become a huge benefit and give you ideas for your blog that you would never have thought about during research.

About Author

Mariana Ashley is a freelance writer who particularly enjoys writing about online colleges. She loves receiving reader feedback, which can be directed to mariana.ashley031@gmail.com

Create a Bad word filter in Blogger comment

2011-05-28T16:51:00.000+07:00

In your blog ,have you ever seen the bad word in comments ? Does it get annoyed other readers ? If the answer is yes ,you may need this one . I created a script for filtering bad word in comments .You just need to make a list of bad words ,and all the words in this list will be replaced with *

How we do that ?

1,Go to Blogger Dashboard -> Design ->Edit HTML .Checked on Expand wiget templates . Backup template before making any changes .

2,Find <body> and add this code right before

//<![CDATA[

function badwordfilter(ID){

var comm = document.getElementById(ID);

var comment = comm.innerHTML;

var reBadWords = /badword1|badword2/gi;

comment1 = comment.replace(reBadWords, "****");

comm.innerHTML = comment1;

comm.style.display = "block";

}

//]]>

</script>

please pay attention to the text in black bold above,it's the list of bad words .You can add more word to this list and separate each of them with a | ,like this
badword1|badword2|badword3|....|...
do not remove / at the start and /gi at the end .

3,Find and replace

with

<p>
                                                                                 <div expr:id='data:comment.id' style='display:none;'>
                                                                                    <data:comment.body/>
                                                                                </div>
                                                                                <script type='text/javascript'>badwordfilter("<data:comment.id/>");</script>

That's all .Save template and see the changes

SimplexMag - a template for magazine or portfolio

2011-05-20T17:11:00.002+07:00

This is my latest template ,I think it can be used for a blog ,or a portfolio ...

Live Demo | Download

How to install this template

1,Download this template

2,Open template file in a word editor ( wordpad ,notepad,notepad ++ ... )

3,To edit the main menu navigation

Find this code
<div class="menu-header">
                     <ul class="menu" id="menu-main-nav">
                         <li><a href="/search/label/test">Test</a>
                            <ul class="sub-menu">
                                <li><a href="">Sub Category</a></li>
                                <li><a href="">Sub Category</a></li>
                                <li><a href="">Sub Category</a></li>
                            </ul>
                        </li>
                        <li><a href="">Career</a></li>
                        <li><a href="">Category</a></li>
                    </ul>
                </div>

Add link to your categories in this code like this one
<li><a href="link_to_category">Category name</a></li>
link to a category in blogger has structure

http://your_blog.blogspot.com/search/label/category_name

4,To set the number of post showed in pages :

This template use numbered pagination script ,so you have to set number of posts per page in pagination script
Go to Blogger Dashboard ->Settings ->Formatting
in the box Show at most ....on the main page you will see the number of post showed in the main page . For example ,in the picture bellow ,the number of post in main page is 6

You can set another number .
Now ,back to template file ,find this code
<script type="text/javascript">
                                        var pageNaviConf = {
                                            perPage: 2,
                                            numPages: 2,
                                            firstText: "First",
                                            lastText: "Last",
                                            nextText: "Next",
                                            prevText: "Prev"
                                            }
                                    </script>

And change the value of perPage variable from 2 to the number we set at Show at most ...on the main page box .If we set the number of post in main page in Show at most ... on the main page 6 ,change the value of perPage from 2 to 6 .
Why we need this step ? To make sure the number of post per page exactly as we set . If you skip this step ,number of post on homepage is the number we set at Show at most ... box ,but click on the next page ,the number of post is only 2 (the value we set in perPage ) .

5,To add your social network accounts

find this code

<div class="social_media">
            <script src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c873bb26489d97f" type="text/javascript"></script>
               <a class="addthis_button_compact sharethis i_share at300m" href="http://www.addthis.com/bookmark.php?v=250&username=xa-4c873bb26489d97f">
                 <span class="at300bs at15nc at15t_compact"></span>
            </a>
             <a class="i_rss" href="http://feeds.feedburner.com/Simplex"></a>
            <a class="i_twitter" href="http://twitter.com/dinhquanghuy"></a>
            <a class="i_facebook" href="http://www.facebook.com/simplexdesignblog"></a>
            <a class="i_flicker" href="#"></a>
            <a class="top_btn" href="#"></a>
        </div>

and change link to your social network accounts

6,Upload template to Blogger .Then go to Dashboard -> Design ->Page Elements

7,To add logo

Click on edit link in header widget

In this widget , you can upload your logo image ,use text ...

8,To add the top ads

Click on edit link in Topads widget

Add the ad code to widget content

Do the same for Advertise widget in sidebar .

9,There are two widgets "latest resource" at the footer ,you can set these widget to show latest posts in a specific category .

Click on edit link in Latest resource widget

Add the title in Widget title ,and add the name of category which you want to show posts in widget content .

10,You can add your own widget in sidebar ,or in footer .

11,Save changes .

That's all for this template . I think it's very easy to install and use . Hope it helpful to you ,and feel free to give me feedbacks.

Simplex Eshop - Blogger template for shopping cart/ecommerce

2011-05-07T17:04:00.000+07:00

Some of you asked me for Ecommerce /shopping cart in Blogger platform . My result is template SimplexEshop .This is a test template and need more time to finish because every shop has its own options in shipping/tax rate/price/promotion ,and fill all needs with only Javascript is an impossible mission . But I want to show it here to get your feedback and hope I can make it better .

Live Demo | Download

How to install this template

1,Download the template file .

2,Open template file in a word editor .

3, To make a menu navigation

Find this code
<ul id="nav">
                     <li><a href="http://simplexeshop.blogspot.com">Home</a></li>
                    <li><a href="http://simplexeshop.blogspot.com/search/label/shop">Store</a>
                         <ul class="children">
                            <li><a href="">Category</a></li>
                            <li><a href="">Category</a></li>
                        </ul>
                    </li>
                    <li><a href="http://simplexeshop.blogspot.com/search/label/blog">Blog</a></li>
                </ul>
Add link to your categories like my other template . You can see on Simplex Enews or Simplex Transcript for more about this multi-level menu .

4,Basic Shop Setting
This template was built based on SimpleCart solution (Simplecartjs.com ) , what I did only integrated Simplecart to a blogger template . So all options /setting for shop ,you can see in simplecart documentation .

a,Payment method
This Template support two payment methods : Paypal and Google Checkout . Default is Paypal ,and it was set in these line :

simpleCart.email = "brett@wojodesign.com";

simpleCart.checkoutTo = PayPal;

If you want to use Paypal ,you can replace brett@wojodesign.com to your paypal email .
If you want to use Google Checkout ,you can replace two lines above with

simpleCart.merchantId = "111111111111111";

simpleCart.checkoutTo = GoogleCheckout;

Change 111111111111111 to your Google Checkout merchant ID .

b,Currency

This template support GBP,USD ,and EUR . Default is USD and it was set in this line

simpleCart.currency = USD;

if you want to change the currency ,you can change USD in the line above (marked in bold) to GBP or EUR .

c,Tax rate

The default tax rate was set in this line

simpleCart.taxRate = 0.08;

You can change the value from 0.08 to another rate . If you don't want to add the tax rate ,you can delete this line

d,Shipping

There are many ways to calculating the shipping cost for an order :
-Add a flat rate to the entire order .This is the default method in template and it was set in this line

simpleCart.shippingFlatRate = 5.25;

(an amount 5.25 shipping cost will be added to the entire order )
You can change 5.25 to the value you want .

-Add a shipping cost to every item in the cart : if you want to use this method ,you can delete simpleCart.shippingFlatRate = 5.25;
and use this line

simpleCart.shippingQuantityRate = 3.00;

This line will add an amount 3.00 to every item in the cart .Of course ,you can change 3.00 to other value .

-Add a shipping cost as percentage of total cost : to use this method ,you can delete the default simpleCart.shippingFlatRate = 5.25;
and use this :

simpleCart.shippingTotalRate = 0.05;

This line will add a shipping cost as 5% to the total cost .You can change this rate to another value .

If you require some advanced calculations for shipping, you can delete the default line and use the prototype object for CartItems:

CartItem.prototype.shipping=function(){

// we are using a 'size' field to calculate the shipping,

// so we first make sure the item has a size

if(this.size){

if( this.size == 'small' ){

return this.quantity*5.00;

} else if( this.size == 'large') {

return this.quantity*7.50;

} else {

return this.quantity*10.00;

}

} else {

// use a default of $2.00 per item if there is no 'size' field

return this.quantity*2.00;

}

The 'this' here refers to the item, and we are using a 'size' field and the item 'quantity' to calculate the shipping. Because an item may or may not have a size, we check to make sure it does with the 'if(this.size)'. If there is a size field, we use a different rate for each size and return a value based on the item quantity. Otherwise, we use a base rate of 2.00. simpleCart(js) will use the global shipping rates, and then add the shipping value for each item in the cart.

5,When you finish editing ,upload template to Blogger . Go to Dashboard ->Design ->Page elements

6,To add logo

click on logo widget

add logo as this image bellow

7,There are many places that you can add your own widget . For example ,you can add link list widget for making category menu ,subscription widget ,page list widget ...

8,That's all for install this template .

How to use this template

It's a little bit difficult when using this template .

To post product to shop : Go to Dashboard -> Posting -> New Post .Click on Edit HTML and made a post with this structure
<div id="description">
<img src="image url goes here">
<img src="image url goes here">
<img src="image url goes here">

PRODUCT INFORMATION..........
........................
</div>
<div class="simpleCart_shelfItem">
<span class="item_name">item name ...</span>
Price : <span class="item_price">price .........</span>
Quatity : <input class="item_quantity" type="text" value="1" />
<a href="javascript:;" class="item_add" title="Add to Cart">Add to Cart</a>
</div>

In structure above , this is the product information section :
<div id="description">
<img src="image url goes here">
<img src="image url goes here">
<img src="image url goes here">

PRODUCT INFORMATION GOES HERE..........
........................
</div>

you can add image by using <img src="image url goes here"> and add product description bellow (in the text product information goes here )
After the product information section ,we move to add to cart section :

<div class="simpleCart_shelfItem">
<span class="item_name">item name ...</span>
Price : <span class="item_price">price .........</span>
Quatity : <input class="item_quantity" type="text" value="1" />
<a href="javascript:;" class="item_add" title="Add to Cart">Add to Cart</a>
</div>

in this section ,add the item name in where I marked item name .... ,add the price in where I marked price ... and change the quatity from '1' to another value .

If you want to set a special shipping cost for this item only ,you can add this line to the add to cart section
<input class="item_shipping" value="xxx" type="hidden">
replace xxx to the shipping cost of this item
and the code of Add to cart section will become :
<div class="simpleCart_shelfItem">
<span class="item_name">item name ...</span>
Price : <span class="item_price">price .........</span>
Quatity : <input class="item_quantity" type="text" value="1" />
<input class="item_shipping" value="xxx" type="hidden">
<a href="javascript:;" class="item_add" title="Add to Cart">Add to Cart</a>
</div>

When you set shipping cost for an item ,the method which used to calculate shipping fee in step 4 will be overide .

After finish editing the post with structure above ,add a label 'shop' at the end of post ,and the product will be added to shop with sliders ,price and add to cart function

To post to Blog : to post to blog ,you can make a normal post ,and add a label 'blog' at the end of post .

It's similar to my older template Simplex Portfolio ,in Simplex Portfolio ,we have two display mode : display a post as a post in gallery ,and display a post as a normal blog post .In this template ,we also have two display mode : display a post as product in shop and display a post as a normal blog post .

For the page : you can make pages as normal .

That's all for this template . I think it is not easy to use and handle .If you familliar with the code ,you can take a try ^^ For detail shopping cart settings ,you can see more in simplecartjs
Feel free to leave me feedbacks

Tips for Finding the Perfect Blogger Template

2011-04-25T18:35:00.000+07:00

Some of readers mailed to me ask for which template should they use for blog? or ask me the template they are using good or not ? In fact ,choosing a template is up to the blog owner ,not me ^^ Angela Quint from Ultrasound has some advice for you in this case .This is a guest post from Angela Quint

Did you know there are more than 10 million blogs online today? If you’re a beginning blogger, there are probably almost that many questions going through your head. One of the first questions you probably have is how to choose the right blogging template. There are thousands of templates available, including ones that are free and ones for which you pay. It’s a crucial decision, so here are a few tips that will help you pick the perfect template for your blog.

1,To Pay or Not to Pay?

Should you pay for your template? That depends on two things: how serious are you about your blog and how much computer experience do you have? If your blog is a business venture, you need it to look as professional as possible, especially if you want to monetize the site. Some premium templates are ad placement ready, which makes formatting easy.
Another big advantage of purchasing a template is that you normally get better support. If problems arise, you’ll have help at the ready and you won’t have to be a techie to keep the site functioning properly.
If you decide to buy a template, think of it as in investment in the future wellbeing of your blog.

2,Start with 2 Columns

Although there are many one and three column templates available, most bloggers agree that a two-column format is easiest to manage. One column is too simplistic and three columns gets complicated. Two columns allows you to keep the site clean but functional, with the current post on one side and the search, ads, and other elements on the other.

3,Make it Relevant to Your Niche

You have a few seconds to capture your reader’s interest. That’s why the header you use is vital. Think about the focus of your blog and the people you want to read it. Make the graphic in the heading relate to the topic. You might love kittens, but if your blog is about golf, that adorable kitty graphic isn’t relevant. If your reader loves golf but isn’t in to cats, you’ve lost him as soon as he clicks on the page.
After you have more experience, you may learn to change the heading picture, but when you’re just starting out, it’s wisest to pick a template with a relevant graphic.

4,Functionality is Key

Do you want your readers to be able to leave comments? Do you want to add pictures to each post? Is there a search function? You need to narrow down what features your blog needs and then eliminate templates that don’t offer those elements. Make sure you test each of the features and check for broken links. Your blog needs to flow smoothly from page to page to keep readers happy.
Most importantly, know what the purpose of your blog is. By keying in on your goals, you’ll be better prepared to select the perfect template for your blog.

About Author

Angela Quint is an ultrasound technician by day and a blogger by night. She enjoys writing to share her love of health and wellness with others!

Make credit box for each author in a multi-author blog

2011-04-14T17:06:00.002+07:00

You have a blog with many authors who contribute content ,and you want to show their short bio in credit box at the end of each post . This idea was in Wordpress for a long time ,but not in Blogger . I tried several times ,but none of them work . Thanks to comment of ابن الملكـة

He gave me a code that work in a comment ,and now I want to share this code here .Both of me and ابن الملكـة hope this code helpful to you all ,and make Blogger to be the best of blogging platform .

Here is what we need to do :

1,First ,you find this line <data:post.body/>
and then paste the following code right after the line above.
<div style='clear:both'/>

                                    <div id='creditbox'>
                                        
                                        <b:if cond='data:blog.pageType == "item"'>


                                             <b:if cond='data:post.author == "NAME OF FIRST AUTHOR"'>
                                                 <img class='authoravatar' height='39' src='IMAGE URL FOR FIRST AUTHOR' width='39'/>
                                               <div class='postauthor'>
                                                   <h3><a href='FIRST AUTHOR'S URL'>NAME OF FIRST AUTHOR </a></h3>
                                                   <p> NOTES ABOUT FIRST AUTHOR </p>
                                               </div>
                                               <div style='clear:both'/>
                                           </b:if>


                                             <b:if cond='data:post.author == "NAME OF SECOND AUTHOR"'>
                                                 <img class='authoravatar' height='39' src='IMAGE URL FOR SECOND AUTHOR' width='39'/>
                                               <div class='postauthor'>
                                                   <h3><a href='SECOND AUTHOR'S URL'>NAME OF SECOND AUTHOR </a></h3>
                                                   <p> NOTES ABOUT SECOND AUTHOR </p>
                                               </div>
                                               <div style='clear:both'/>
                                           </b:if>

.......................
                                       </b:if>
                                       
                                   </div>
<div style='clear:both'/>

Notes :
1- NAME OF FIRST AUTHOR : replace this with name of your first author . Name of author must be as exact as name showed in profile .
2- NAME OF second AUTHOR :replace this with name of your second author
3- IMAGE URL FOR FIRST AUTHOR :Replace this with the link to your first author avatar or image .
4- IMAGE URL FOR second AUTHOR :Replace this with the link to your first author avatar or image.
5- NOTES ABOUT FIRST AUTHOR : Replace this with author short bio ,profile ...
6- NOTES ABOUT second AUTHOR : Replace this with author short bio ,profile ...
7- FIRST AUTHOR'S URL :Replace this with link to author profile page or link to a social network account.
8- SECOND AUTHOR'S URL :Replace this with link to author profile page or link to a social network account.

In case of there are more than one <data:post.body/> in the search result ,you can paste this code right after all the results .
If you have more than two authors ,you can duplicate the code of first author's information or second author's information and then change the name,link,bio...

2,Add this CSS code before <body> to decorate the credit box :
<style>
                                    #creditbox {
                                       background: none repeat scroll 0 0 #EDEDED;
                                       padding: 10px;
                                       margin-top:10px;}
                                       .authoravatar {float:left;margin-right:10px;padding:4px;background:#fff;border:1px solid #f0f0f0;}
                                       .postauthor {float:left;}
                                    </style>

This is an example .You can add more CSS tags to make the credit box display as you want .
Here is my credit box in Simplex Celebrity template

That's all for making credit box in a multi-author blog .Thanks ابن الملكـة again for this helpful tip .

Beyond Design: 5 Tips for Making Your Blog More Reader-Friendly

2011-04-08T02:09:00.001+07:00

This guest post was written by Alvina Lopez of accredited online colleges

For those of you bloggers who are knowledgeable about the ins and outs of website design, you definitely have a leg up in the blogosphere, as most bloggers aren't completely aware how much a blog's layout and color scheme affects a reader's attention. At the same time, however, there are a few other considerations that design-centric bloggers might want to keep in mind, especially in terms of writing. Here are just a few:

1. The title is more important than you think.

Titles are something that some bloggers put more emphasis on than others. But we could all do with placing a particular importance on making each title something special. It is, after all the first thing our readers lay their eyes on. When thinking of titles, consider your own browsing history. When you read the news online, which articles do you tend to click on? How are their respective titles worded? Checking articles that top the most popular lists is also a good way to improve your blog titles.

2. Paragraphs and blog posts that are too long turn off lots of net readers.

Paragraphs and articles that are too short make you look lazy.
Obviously, most bloggers know that writing paragraphs that are too long can tire readers out. Remember, the Internet is a veritable breeding ground for ADHD. At the same time, however, articles or paragraphs that are super short make your material look skimpy. Find a happy medium, and remember that most Internet readers especially like list posts.

3. Justified paragraphs are pleasing to the eye.

Some may disagree with me on this one, but having justified paragraphs like they do in newspapers is an aesthetic consideration that makes things easier to read. You can do this by hitting the "justify" button on Word if you do take write your first drafts on a word processor. It gives your blog articles a cleaner appearance. Off-setting quoted material in a different-colored box works well, too.

4. The placement of good hyperlinks is absolutely instrumental in drawing and keeping a reader's attention.

Hyperlinks that link out to related material are one of the hallmarks of good blog posts and Internet writing in general. But be careful. Placing too many hyperlinks can overwhelm your readers, and placing too few makes your blog post come off as not very authoritative and lacking supporting sources. Be sure to include links to quality material (i.e. stay away from content farm type stuff).

5. Cycling between the pyramid and inverted pyramid, depending on circumstances, keeps things fun and unpredictable.

Traditional journalists hew to the inverted pyramid when it comes to structuring their articles. That is, they place all the most relevant and important information in the first paragraph, and put unnecessary details further down the article. While this is a good practice for news stories, with blog posts you can shake things up a bit. By doing a right-side up pyramid, in which you tease readers with the more important info toward the bottom, you can effectively get your audience to read with bated breath till the very end. Be careful with this style, however, because it can easily turn into an exercise in boredom. Be sure to make each paragraph interesting and suspenseful in its own right.

About Author

Alvina Lopez is a freelance writer and blog junkie, who blogs about accredited online colleges. She welcomes your comments at her email Id: alvina.lopez @gmail.com.

Blogger offer five dynamic views for readers

2011-04-01T16:02:00.000+07:00

Blogger has offered five dynamic views for readers . Now ,we can browse a blog with not only normal blog design ,but also in five different views .With the latest in web technology, including AJAX, HTML5 and CSS3 ,in these views we can :
-Read more posts without having to reload or click to a second page .
-Read posts in different layout (flipcard,sidebar,mosaic,snapshot and timeslide )
-Browse a page faster because images only load when we view ,not all at once .
......
When seeing my blog in these views ,I have to say "Oh,that's so cool" .

See SimplexDesign blog in different views here

To enable different views to blog:

-Your blog is public. Your readers don’t need to sign in to view your blog.
-Your blog has feeds fully enabled. In the Settings | Site feed tab, you have enabled either Full or Jump Break for your Post Feed.
-You have not disabled dynamic views. In the Setting | Formatting tab, the option for Enable Dynamic Views is set to Yes.

To see a blog in different views , simply add a /view at the end of blog url . For example ,to see SimplexDesign blog in additional views ,you can go to this address : http://simplexdesign.blogspot.com/view

In all views, search is available in the upper right hand corner. Clicking on the ">" arrow in the very top left of the header bar will slide the header bar across and allow you to choose different views for the current blog as well as type in a new blog URL.

An important thing that these views require modern browsers such as Internet Explorer 8+, Firefox 3.5+, Chrome or Safari. Many elements of these views will not work if you have an older browser.

Please note that these views do not currently support many of the features your original blog may have, including displaying advertisements. Blogger team said that they will let user personalize these views, including providing an option to set a particular view as the default and displaying advertisements over the coming months.

Here is SimplexDesign blog in new views

Sidebar view

Flipcard view

Timeslide view

Mosaic view

Snapshot view

Use Google web font to styling header and text in your blog

2011-03-31T00:31:00.000+07:00

If you are using default Blogspot templates ,you can use Template Designer to set special fonts for header and text .But this function is not available if you are using a custom template . So how can we embed special fonts to blog ?

As you may know ,Template Designer in Blogspot use Google font for applying special fonts to blog .In this post ,I will show you how to use Google Font for styling text in blog without Template Designer ,just need some lines of code .

You can see demo here ( my template Simplex Newspro )

Here are steps :

1,Go to this site ,and select the font you like .

2,When move your mouse over the font ,you will see the text "Click here to embed...." .Click on this text .A new page appear . Click on Use this font tab

3,You will see two lines :

The first line is something like this :
<link href='http://fonts.googleapis.com/css?family=xxxxx' rel='stylesheet' type='text/css'>
xxxxx is the font name . Copy this line and paste right before <b:skin><![CDATA[/* in template file . An important thing : you must add an slash ( / ) at the end of this line ,like that
<link href='http://fonts.googleapis.com/css?family=xxxxx' rel='stylesheet' type='text/css'/>
If not ,you will see an error message .

The second line you get in Google web font page is something like this :

h1 { font-family: 'xxxx',xxxxx; }

xxx are font name and style of the font .
This line illustrate how the font you choose applied to h1 tag .

To applied the font you choose to an element in blog ,find CSS code of this element , and add the attribute font-family: 'xxxx',xxxxx; into element's CSS attributes

For example ,in my live demo I applied new font to post title in template Simplex Newspro .
Here are steps I did :
First ,I go to this website ,and choose the font Indie Flower

Click on "click here to embed Indie Flower"

Second ,I go to Dashboard - > Design ->Edit HTML ->Checked on Expand widget templates
Add the first line to embed font Indie Flower

After that ,add the font-family attribute to element I want to apply new font in CSS section

That's all .Save template and new font will be appeared .

In this post ,I just want to show you how to use Google font to embed new fonts to blog . It's very easy if you are familliar with CSS ,work with CSS or customize templates before . If you are a newbie and don't know where to insert font-family attributes to applied new font for an element,you can make a comment . I can help if possible .

Should we use Disqus or not ?

2011-03-20T23:31:00.005+07:00

In renewed version of templates ,I always make two file ,one template file with Blogger default comment system and the other with Disqus comment system . You might ask me what we should chose for our blog ? In this post ,I will write something about them and I hope it helpful to your decision .

Disqus is a modern comment system for website and blog .It enhance the commenting system on your blog and designed to make commenting more exciting and interesting. It's a realtime comment system and you can see your comment show up immediately . With Disqus ,you can reply to an existed comment and interact with comments by votes ,keep tracks on comments with email notification ,you can also link to media files in your comments ,embed video,audio ... in comment ,and you can use Gravatar . Disqus allow you to comment in mobile ,sharing comments in social networks,and build a good community with commnunity box and comment profile .And I have to say that it really easy to install and using ,I can import export comments,moderate them in Dashboard and prevent spam with their anti-spam technology . If you use Blogger and install Disqus comment system ,you blog look really professional .

But Disqus is not perfect ,it's an embeded comment system ,and work base on Ajax and javascript ,so it make your blog load slower or can not load if there's error in connection .Sometime ,Disqus script can conflict with other scripts ,therefore,they can't work . Another important thing I see that Disqus is not good for SEO . All comments in blog using Disqus can't be indexed by Google . Disqus said their system are SEO friendly ,but I do not think so .

Blogger default comment system is on other side . It's really a boring comment system . Look simple and straight,no interaction ,no sharing tool ,no connection to other networks and no threaded comment . But it load fast and good for SEO . SEO here mean I can make a search in Google and see comment in search result . And we can customize it,make it display as we want with a little CSS and code .Not so good but acceptable (as my templates ^^)

Here is list of good and bad for Blogger and Disqus that I see . I hope you can share your own experience with these comment systems and give advice to choose one for blog to others . Thanks in advance

Update for Subscription pop-up

2011-03-13T22:43:00.000+07:00

In comments of my previous post "Using Jquery to make an one-time subscription pop-up" ,YellOblog said that he want the pop-up appear after an amount of time and the pop-up is always at the center of viewport .Thanks YellOblog for the suggestion . Here is the complete code for your request :

Live Demo

To make a Subscription Pop-up ,you can read my post "Using Jquery to make an one-time subscription pop-up" and follow steps from 1 to 3 .

For the step 4 - Jquery code ,replace the code in the post "Using Jquery to make an one-time subscription pop-up"
with this one

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://dinhquanghuy.110mb.com/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
         var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
    centerPopup();
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}

//disabling popup with jQuery magic!
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

//centering popup
function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var windowscrolltop = document.documentElement.scrollTop;
    var windowscrollleft = document.documentElement.scrollLeft;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
    var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
    //centering
    $("#popupContact").css({
        "position": "absolute",
        "top": toppos,
        "left": leftpos
    });
    //only need force for IE6

    $("#backgroundPopup").css({
        "height": windowHeight
    });

}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
    if ($.cookie("anewsletter") != 1) {

        //load popup
        setTimeout("loadPopup()",5000);
    }
    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose").click(function(){
        disablePopup();
        $.cookie("anewsletter", "1", { expires: 7 });
    });
    //Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup();
        $.cookie("anewsletter", "1", { expires: 7 });
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
            $.cookie("anewsletter", "1", { expires: 7 });
        }
    });

});
</script>

pay attention to this line setTimeout("loadPopup()",5000);
5000 is the delay time in millisecond . You can set another value if you want .
That's all . I hope this update can fill your requests and make the subscription pop-up more profesional. You can check it out yourself and see the result .

SimplexNewsportal - renewed version

2011-03-09T21:59:00.002+07:00

Here is the renewed version of my template SimplexNewsportal . It's a good template for magazine and newsportal . I tried my best to make it easier to install and use .
There are two file for this template ,one with Disqus comment system and the other not .I added images folder to template package ,so if you want ,you can host images yourself

Live Demo | Download template with Disqus comment system | Download template with Blogger comment system

Here are steps for installing this template

1,Download template file .

2,If you want to use Disqus comment system
Open this template in a word editor and change the text in bold in this code
<script type='text/javascript'>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'simplexcelebs'; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
    // var disqus_identifier = 'unique_dynamic_id_1234';
    // var disqus_url = 'http://example.com/permalink-to-page.html';

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>

and this code

<div class='dsq-widget' id='recentcomments'><script type="text/javascript" src="http://simplexenews.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=32&excerpt_length=200"></script></div>
to your Disqus shortname .This step is required . If you choose template file without Disqus ,you can skip this step .

3,Upload template to Blogger

4,To add logo

click on edit link in logo widget

add logo into widget content like this

5,To add link to your social network

click on Subscribe widget

add link to your social network accounts.

6,To add items to menu

click on edit link in menu widget

add link to your categories

Link to category in blogspot has structure http://yourblog.blogspot.com/search/label/category name

7,To show content in headline widget

click on edit link in headline widget

add the name of category you want to show in this widget

8,To show content in feature content slider

click on edit link in feature content slider

add name of category you want to show in slider into widget content

9,Do the same for content left ,content right widgets .Just add a category name into widget content ,and recent posts in this category will be shown in widget's position in homepage .

10,Top ads,ads1 ,ads2 are widgets for advertisment . To add your ads

click on edit link

add your ad code into widget content .

11,You can add your own widgets if you want

12, To add a forum ,create a page (Go to Dashboard-Posting tab ->Edit Pages,click on new page) , name it "forum" and then paste the forum embeded code into page content (in Edit HTML mode)

After that , go to Dashboard -> Go to Design -> Edit HTML ,search for the text 'http://simplexnewsportal1.blogspot.com/p/forum.html'

and replace it with link to 'forum' page you've just created .There are 3 places need to change in total .
1st place

1st

2nd


2nd

3rd

After that ,save the changes .

13,To increase/decrease the number of post in each category ,go to Design ->edit HTML -> checked Expand widget templates ,and find these variables in template file :
numposts = 3;
numposts1 = 4;
numposts2 = 6;

try to change these values to what you need .
That's all for this template . I hope you like this re-newed version .

Auto apply lightbox effect to all images

2011-03-06T00:03:00.001+07:00

In my blog ,DJ Remix Town asked me for how to auto applied Lightbox effect to all images uploaded ,do not need to edit HTML and add rel="lightbox" manually. And now I have the answer for this question :

How to do this ?

First ,you need to read this post and follow all my instruction for install jquery lightbox to blog .

The magic is on the second step ,find and replace this code
<script type="text/javascript">
$(function() {
$('a[rel*=lightbox]').lightBox();
});
</script>

with this

<script type="text/javascript">
$(function() {
$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script>

The difference between them is this line $('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
This line mean Lightbox effect will be applied to all <a ...> tag which has an <img> tag inside ,and the href attribute of a tag is a link to image file (with the extension : gif,bmp,jpeg,png,jpg)

From now ,you can upload and insert images to your post using uploader in post editor window and don't care for the rest . Lightbox effect will be applied to all images .

Using Jquery to make an one-time subscription pop-up

2011-02-25T15:51:00.002+07:00

A new update for this post ,you can see here

Many of bloggers said that a subscription pop-up very helpful in increasing the number of subsriber . Some bloggers such as Johnchow use subscription pop-up to show his new books and ask for subscription from readers .As you can see ,the number of subscriber in Johnchow website is very impressive .
Pop-up good or bad ? I do not mentioned here ^^

In this post ,I've just want to show you how to make a subscription pop-up for your blog . This pop-up will appear in the first-time you visit and it only appear again after several days .

Live Demo

Here are steps for making a pop-up in Blogspot

1,Open template file by go to Blogspot Dashboard ->Design ->Edit HTML . Check the box "Expand widget templates"

2,Add this CSS code right before ]]></b:skin>
#popupContactClose{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}

3,Add this HTML code right before </body>
<div id="popupContact">
        <a id="popupContactClose">x</a>
        <h1>Pop-up title goes here</h1>
        <p id="contactArea">
            your pop-up content and subscription form ... goes here
        </p>
    </div>
    <div id="backgroundPopup"></div>

This is HTML code of your subscription pop-up .
Replace the text in bold with title of pop-up and pop-up content .
To make this popup becomes a subscription pop-up ,you can add Feedburner subscription code into pop-up content . Like this

<div id="popupContact">
        <a id="popupContactClose">x</a>
        <h1>Subscription to SimplexDesign</h1>
        <p id="contactArea">
            <form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Simplex', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                 <p>Enter your email address:</p>
                <p><input type="text" style="width:140px" name="email"/></p>
                <input type="hidden" value="Simplex" name="uri"/>
                <input type="hidden" name="loc" value="en_US"/>
                <input type="submit" value="Subscribe" />
            </form>
        </p>
    </div>
    <div id="backgroundPopup"></div>

The text in bold is the code of Feedburner subscription form .

You might ask me : how to get Feedburner subscription form ?
It's very easy .If you are using Feedburner ,login to your feedburner account -> click on your blog feed ->click on Publicize tab -> Click on Email Subscriptions -> Active this service -> code of subscription form is in text box .

If you do not use Feedburner ,you can add other code to pop-up content ....

4, Now it's time to add Jquery code . This code will make the pop-up work .
Add this code right before </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://dinhquanghuy.110mb.com/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
    var popupStatus = 0;
//this code will load popup with jQuery magic!
function loadPopup(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}

//This code will disable popup when click on x!
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

//this code will center popup
function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    //centering
    $("#popupContact").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6
    $("#backgroundPopup").css({
        "height": windowHeight
    });

}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
    if ($.cookie("anewsletter") != 1) {
        //centering with css
        centerPopup();
        //load popup
        loadPopup();
    }
    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose").click(function(){
        disablePopup();
        $.cookie("anewsletter", "1", { expires: 7 });
    });
    //Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup();
        $.cookie("anewsletter", "1", { expires: 7 });
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
            $.cookie("anewsletter", "1", { expires: 7 });
        }
    });
});
</script>

The pop-up will show if you are first-time visitor to the blog and will not displayed again for 7 days .
With this feature ,reader will not be annoyed by pop-up each time they visit your blog . After 7 days ,the pop-up will show again to remind visitor to subscribing your blog . You can set the number of days pop-up will be appeared again by set the value of expires: 7 to other value ,for example ,expires: 6 ^^

Note : If error occured when uploading template ,you must encode the script in step 4 by copying the code ,and go to this page ,paste the code in textbox and click on encode . After that copy the result and paste it back to template file .

That's all for subscription pop-up .
You can save template and back to your blog to see the changes.
I hope this post will be helpful

Update : How to move images in Simplex's templates from ImageShack to another host

2011-02-23T22:57:00.002+07:00

Many of you complaint me for trouble with imageshack.us today . Early today ,all images which hosted in Imageshack.us has been changed to ugly Frogs .
I wrote a post on how to register your domain with imageshack .But this way ,you have to wait for them to approve your site .
In this post ,I will show you the way to download all images in a Simplex's template to your PC and then upload it to another host .

Here are steps

1,First ,go to imageshack.us and register an account if you don't have one .
If you have an account existed , please login to your account .

With the new Imageshack policy ,we can only see images and download them if we are registered members . So it's the reason why we need to login to our accounts in imageshack.us .

Keep the imageshack browser window open .Do not close it .

2,Open another browser tab. Go to Blogger Dashboard ->Design ->Edit HTML,checked in Expand widget templates .
Press Ctr+F for search function and type the term "imageshack.us" into searchbox ,then enter

It will show you all link of images which were hosted in imageshack.us like picture above .

3, Copy one image link ( in the bracket ) .

Open another browser tab and paste the link into address bar .
Click enter ,it will show you the image .Right click on image and choose " save picture as " . Save this image on your hard disk.

4,Find another hosting that support image , for example , in this post ,I use Imgplace.com ( this hosting is just an example and you can use another hosting providers,paid or free ,it's up to you ) . I open imgplace.com website in another tab of browser window , choose the file and click Upload

When finish uploading ,copy the direct link

5,Back to the browser tab which template file are opening . Paste the image's direct link we got from the hosting to template file .Like this (see the arrow,new link in Imgplace.com replaced old one in Imageshack.us )

When you finish this step ,you are succesfull in moving one image from Imageshack.us to Imgplace.com hosting .

6, Do the same with other images which were hosted in Imageshack.us

All steps can do very fast , you can move an image from Imageshack to another host in less than 30 seconds .Because each template has some images ,so it only take you less than 10 minutes for all images .
Save template file and shutdown browser window .

You just finish moving all images in a Simplex's template from Imageshack.us to another hosting .
I hope this post helpful .

Update : Imageshack error unregister domain - how to fix ?

2011-02-23T15:09:00.006+07:00

Today ,not only in SimplexDesign blog and templates,the image of "IceFrog" with text like “Your country can only view this image by logging into ImageShack” or “Unregistered domain. Go to http://imageshack.us to register” appeared everywhere . This problem was happening to all images which were linked directly to ImageShack .

If you had uploaded an image to ImageShack and posted it on your website, blog, or any other applications then the ImageShack Icefrog picture would show up.
Codes provided by Image Shack are working such as the embed link to image. We can only see the images when we login imageshack.us .If not ,we can see the icefrog .All images are locked .

The solution here is very simple , you have to register your domain to imageshack.us by visiting this page and fill all the information needed: http://stream.imageshack.us/content.php?page=email&q=reg_domain

Note that this must be done by the site owner that is being affected in order for them to verify the ownership.
When you finish submiting your site ,just wait .They will aprove your site shortly and images will be displayed as before .
With the new policy ,I think imageshack.us is not a good choice for us from now . What happen if one day ,they lock all images and ask for money .

I will try another solution and provide you images to help you host them yourself as soon as possible .
If you can't wait , you can register an account in Imageshack.us ,and login . After that open template file (xml file) and search for "imageshack.us" , it will show you link of all images that hosted in Imageshack.us . Copy all these links to download manager program (such as Internet Download Manager ,Orbit,Flashget ...) and this program will download all images for you . This is the best way for you to get all images . Remember you can do this when you have an imageshack account and you loged in .

SimplexBuzz - one more premium template

2011-02-21T09:35:00.001+07:00

This is my latest template SimplexBuzz . This template has a eye-catching feature slider ,and I think it's good for travel/art/photography blog .

Live Demo | Download

Here are steps to install this template

1,Download template file

2,Open template file in any word editor you have .

3,To change the credit box at the end of each post

find this code

<h3>About Author</h3>

<h4>

<a href="">Nhamnganhanh</a>

</h4>

<p>This is template SimplexBuzz .

</p>

</div>

Change the text in bold to what you want (you can write some description about you and your blog ...)

4, To add your feedburner account to email subscription form

find this code
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=simplex', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
                                  <fieldset>
                                     <input type="hidden" name="uri" value="simplex"/>
                                    <input type="hidden" value="en_US" name="loc"/>
                                    <input type="text" name="email" class="sub"/>
                                    <button type="submit">Submit</button>
                                </fieldset>
                            </form>
change the text in bold 'simplex' to your feed burner account .

5,To add your social network accounts

find this code
<ul class="social">
                                <li><a class="twitter" href="http://twitter.com/dinhquanghuy">Twitter</a></li>
                                <li><a class="facebook" href="http://facebook.com/simplexdesignblog">Facebook</a></li>
                                <li><a class="flickr" href="http://flickr.com/photos/">Flickr</a></li>
                                <li class="rss"><a class="rss" href="/feeds/posts/default">RSS</a></li>
                            </ul>
change the links (marked in bold) to your social network accounts.

6,After that ,upload template to Blogger .

7,To add your logo

click on logo widget

then add your logo into widget content as I did in picture below

Click Save

8,To add items to top menu navigation

click edit link in category widget

then add link to your category into widget content like this

Link to category in blogspot has structure : http://yourblogspot.blogspot.com/search/label/your category

9,To add content to feature slider

Click on edit link in 'feature content slider' widget
Then add the name category which you want to show recent posts in feature content slider in widget content
for example ,I want to show recent posts under 'travel' category into feature content slider ,I click edit link in 'feature content slider' widget

then fill the widget content with name of category 'travel'

Save changes . From now ,4 latest posts in category 'travel' will be showed in feature slider

10,To show post in feature content section below slider

click on edit link in feature content widget

add name of category you want to show into widget content

Then save changes . Recent posts in this category will be showed in feature content section .

11,In this template , when you enter a single post ,the first image in this post will be showed as background in header automatically .
But when you enter a page ,there's no image displayed in header .
To add image in the header of pages

click on edit link in 'background for page' widget

and add the image into widget content .

From now ,the image you added will be showed as header's background each time you enter a page .

12,To add the text in alert box

click on edit link in 'alert' widget

and enter the text you want to show .

You can use HTML tags to make text in alert box display as you want .

13,To add your ad,click on edit link in banner widget

and add your ad code into widget content .

14, That's all for default widgets .You can add more widget or remove existed as you want .

Save all changes ,and you are done .I hope you all like this template and keep supporting me .
Feel free to use my template but please keep the credit at footer .Thanks in advance .

Update : As question from YUSUF left in my blog related to problems on long post titles and width of post in home page ,here is the solution

Find this

div.post h2.storyTitle {
color: #000000;
float: none;
font-size: 2.6em;
font-weight: bold;
line-height: 120%;
margin-bottom: 5px;
width: 585px;
}and delete width: 585px;
Then find

div.post div.storyContent {
float: none;
margin-bottom: 20px;
width: 585px;
}delete width: 585px;
To fix the problem with recent posts/comments tab when post title is long :
First ,find this

div#sidebar div.tabsContainer ul.panes ul li h4 {
left: 70px;
position: absolute;
top: 15px;
}and delete all of them
Second ,find this

div#sidebar div.tabsContainer ul.panes ul li p.meta {
bottom: 0;
color: #85837E;
font-size: 0.9em;
left: 70px;
line-height: 120%;
overflow: hidden;
position: absolute;
}Then change it to

div#sidebar div.tabsContainer ul.panes ul li p.meta {
color: #85837E;
font-size: 0.9em;
line-height: 120%;
margin-left: 60px;
}

the last step : Find this

div#sidebar div.tabsContainer ul.panes ul.comments li h4 {left:35px; width:250px;}
And replace it with

div#sidebar div.tabsContainer ul.panes ul.comments li h4 {
margin-left: 20px;
}

SimplexEnews - the latest version - fixed errors ,easy to install

2011-02-12T00:32:00.000+07:00

This is the latest version for SimplexEnews template ,that is fixed some errors occured .Easy to install and customize via widget in Page Elements

Live Demo | Download template file with Disqus | Download template file without Disqus

Here is steps to install this template

1,Download this template

2,Open template file in a word editor

3,To make a menu navigation

find this code
<div id='cat-menu'>
             <ul class='sf-menu nav' id='cat-nav'>
                <li><a href='http://simplexenews1.blogspot.com/'>Home</a></li>
                <li><a href='http://simplexenews1.blogspot.com/search/label/world'>World</a></li>
                <li><a href='http://simplexenews1.blogspot.com/search/label/US'>US</a></li>
                <li><a href='http://simplexenews1.blogspot.com/search/label/business'>Business</a>
                     <ul>
                        <li><a href=''>Category</a>
                             <ul>
                                <li><a href=''>Category</a></li>
                                <li><a href=''>Category</a></li>
                                <li><a href=''>Category</a></li>
                                <li><a href=''>Category</a></li>
                            </ul>
                        </li>
                        <li><a href=''>Category</a></li>
                        <li><a href=''>Category</a></li>
                        <li><a href=''>Category</a></li>
                    </ul>
                </li>
                <li><a href='http://simplexenews1.blogspot.com/search/label/entertainment'>Entertainment</a></li>
                <li><a href='http://simplexenews1.blogspot.com/search/label/Sports'>Sports</a></li>
                <li><a href='http://simplexenews1.blogspot.com/search/label/tech'>Technology</a></li>
                <li><a href='http://simplexenews1.blogspot.com/search/label/editor'>Editor's picks</a></li>
                <li><a href='http://simplexenews1.blogspot.com/search/label/story'>Top Stories</a>
                    <ul>
                        <li><a href=''>Category</a></li>
                        <li><a href=''>Category</a></li>
                        <li><a href=''>Category</a></li>
                        <li><a href=''>Category</a></li>
                    </ul>
                 </li>
            </ul>
        </div>

and edit the text in bold to the name and url of your categories . Link to each category has structure
http://your blog.blogspot.com/search/label/category-name

4,This is the code of credit box at the end of each post :

<div class='clear' id='entry-author'>
                                        <div id='author-avatar'>
                                            <img alt='' height='60' src='http://0.gravatar.com/avatar/4c2ed72c6be86742f05e9750110d5731?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G' width='60'/>
                                        </div> 
                                        <div id='author-description'>
                                            <h3>About author</h3>
                                            Curabitur at est vel odio aliquam fermentum in vel tortor. Aliquam eget laoreet metus. Quisque auctor dolor fermentum nisi imperdiet vel placerat purus convallis.
                                        </div> 
                                    </div> 

Edit the text in bold to the text you want (you can change it ,add link to your profile ,translate it to your language )

5,If you choose the template file with Disqus comment system ,find this code
<script type='text/javascript'>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'simplexenews'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
</script>

and this code :

<b:includable id='comments' var='post'>
                            <div id='disqus_thread'/>
<script type='text/javascript'>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'simplexenews'; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
    // var disqus_identifier = 'unique_dynamic_id_1234';
    // var disqus_url = 'http://example.com/permalink-to-page.html';

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href='http://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>

</b:includable>

and this code
<div class='dsq-widget' id='recentcomments'><script type="text/javascript" src="http://simplexenews.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=32&excerpt_length=200"></script></div>

change the text 'simplexenews' (marked in bold) to your Disqus shortname .This step is required because if you don't change this text ,it mean you are using my Disqus account ,so I can delete your comment
Now ,save template and upload it to blogger .

6, To add logo to this template

click edit link in logo widget

and add link to your logo in widget content

7,To add your social network accounts

click on 'edit' link in Social Networks widget

and add link to your social network accounts .

8,'topads','Midads' ,'ads2' are widgets for advertising .

You can click on 'edit' link of these widgets

and add the ad code into widget content . Like this

9,To show posts under a category in the slider:

click on 'edit' link in 'Looped Slider' widget

add the title you want to show into widget title ,and add the name of category into widget content .

In these pictures above ,I want to show posts in 'feature' category into slider ,so I add category name 'feature' into widget content and add the title 'feature' into widget title .

10,Do the same with other widgets . Click on 'edit' link in a widget ,add a category name into widget content and add the title you want to show in widget title . Recent posts in this category will be shown in where the widget you choose is .
For example ,I want to show posts under category 'US' in the position of widget 'Two col-right'
First ,I click on 'edit' link in 'Two col-right'

a dialog appeared, then , I add the category name 'US' into widget content ,and add the title I want to show 'US' into widget title .

After that ,click Save .

If the category 'US' existed in my blog ,and there is at least one post under category 'US' ,it will be displayed in the position of 'Two col-right'

11,Do the same with the carousel

For example ,I want to show posts under category 'headline' in the position of carousel widget
First ,I click on 'edit' link in 'Carousel'

a dialog appeared .
Then ,I add the category name 'headline' into widget content ,and add the title I want to show 'headline' into widget title .

After that ,click Save .
The posts under 'headline' category will be shown in carousel widget

12,To add video

click on edit link in video widget

add video embed code into widget content

13,To add photos to Flickr widget

click on edit link in Flickr widget

add Flickr id into widget content

14,To add Category ,Blogroll

you can click on edit link in these widget ,for example Category widget

add link you want

15,To add a forum to blog,create a new page ,name it 'forum' and paste the forum embeded code into page content (in Edit HTML mode)

then go to Dashboard -> Go to Design -> Edit HTML ,search for the text 'http://simplexenews1.blogspot.com/p/forum.html'

and replace it with link to 'forum' page you've just created .There are 3 places need to change in total . After that ,save the changes .

Here are places need to change 'http://simplexenews1.blogspot.com/p/forum.html' with the link to your forum page :
1st place :

2nd place

3rd place

That's all .Save template and you will see a full-width forum page .

16, Lightbox effect has been integrated in this template

To use Lightbox effect in your post ,when editing post ,click on Edit HTML .

To add lightbox effect for one image , use rel="lightbox" title="Your image Caption" as picture above
To add lightbox effect for multiple images , use rel="lightbox[albumname]" title="Your Image Caption"
if you want to add another image to this album,upload the second image and use rel="lightbox[albumname]" title="Caption for Second image of albumname"
in this case , lightbox will work like a gallery with next and previous links and you can use keyboard to navigate through the album

17,If you want to increase/decrease the number of post in each category ,go to Design ->edit HTML -> checked Expand widget templates ,and find these variables in template file :

numposts = 6;
numposts1 = 3;
numposts2 = 6;
numposts3 = 4;
numposts5 = 5;
numposts6 = 10;
try to change these values to what you need .

That's all for this template . You can add / remove widgets or change the position in Page Elements

Ultimate Guide to Get approved by Google Adsense

2011-02-10T16:36:00.000+07:00

This is a guest post by my friend SAHL AHMED who is a tech geek and a SEO expert and Founder of Humor And technology Blog – HumorTechBlog.Com

Most of the new bloggers step into blogging only because of Google Adsense . They think that they can make some money from their blog with Google adsense. But when they don’t get approved by adsense they are left with only one choice to quit blogging.
In this post ,I will show you the method to get approved by Google Adsense.
First of all , I assume you know what Google Adsense is the importance of Google Adsense to blogger's life .Here's a small summary if you never heard about Adsense .
What is Google Adsense?
Google.com earns most of revenue by allowing other website owners to advertise on their search result pages. This is managed through a program called Google AdWords.
Now you can earn a share of the revenue that Google earns from AdWords by displaying ads on your site. In other words, you're helping Google advertise and they pay you a percentage of what they earn.

This revenue sharing program is called Google AdSense.
It is the highest paying PPC (pay per click) program.

Who can join adsense?

Adsense is FREE to Join if your website passes its CRITERIAS

There are many criterias
1.Your website should be 6 months old
2.It should have be a Top level Domain
Click HERE for the list of criterias

How much time would it take to get adsense approved by using this method?

1. 15 To 30 days or maximum 2 months
2. Implementation of 14 Steps.

You have to implement 14 points below in order to make your blog/website ready for Google Adsense and get approved quickly :

1. Start a Blog on blogger.com Or use ur existing blog.

2. Put a cool and soothing template ..not too flashy and but too simple. It should look professional.

3. Buy a Custom domain (top level domain i.e (.COM) to publish your blogger blog on it. It should have a Name which relates to your blog . It will cost you some money but worth to do . (Google doesn't accept domains with .blogspot.com nowaday)

Tip: search on google for "How to use custom domain on blogger"

4.Write 20-30 good articles about your niche . If you can't , go to any article directory ( like Ezine etc ...) ,get articles and rewrite them in a very different way .
Tip: The more Orignal content , the better are the chances but don't rush and put a lot of articles.

5. An about me/Us page and a privacy policy page is a must-have and link to these pages should be seen on your homepage.

6. Put a neat and clean EMAIL subscription Box and a Blog archive widget.

7. Submit your website to Google , Bing , Yahoo and other search engines.

8. Bookmark your website in google and submit to Digg .
Tip : - never submit more than 15 links to Digg at a time if you don't want to get a ban !
- follow and get followers before submitting to Digg.

9. Make a Facebook fan page ,a Twitter account and a youtube channel in your blog or your website name. If not ,try your name .

Tip: Put a link – “FOLLOW US On twitter" clickable image or a Facebook like box on your blog!

10. Get some Facebook fans and Twitter followers by inviting fellow bloggers , friends , family , relatives . Upload 5-10 videos on Youtube and get some views.
Tip: Add a link at the start of your video description and at Twitter / Facebook about us page.
There are 2 ways by which you can get views to your video.
1. White hat method – By uploading original video tutorials or funny or cool videos which are made by you.
2. Black hat method- This method includes re-uploading of latest videos which have less views till now and which are good enough to get a lot of views.

I don’t encourage black hat method so for more information please contact me .

11. Share every post of you on Facebook profile and to Twitter followers , ask them to visit your website often.

12.Make an account on flixya.com and upload 10 videos or more .The same which you uploaded on youtube.
Tip : put your website link in all the videos on bottom of original description.
After uploading 10 videos or more you can apply for Adsense via flixya.com by going to the monetize tab.

13.Get traffic to you blog ( get as much as u can after applying for adsense as they check your website traffic)

Traffic sources :
-.Search engines
-.forums
-.twitter
-.facebook profile and fan page
-.youtube
-.flixya.com
-.Email marketing

14.( Most important )You should apply by flixya.com and by your website also ,on the same day.

Fill in all the details properly as it is difficult to change it after approval

15. If you apply the second time after getting banned or disapproved : make small changes in your ADDRESS and apply again..
e.g make co op ..co operative or make opp --> opposite or vice – versa.

What will happen after applying : The trick ?
As youtube and flixya.com are Google revenue sharing platforms , Google will check the both these .
So if your making an improvement at 3 places ,you will become a good publisher to invest in + you have a blog /webisite which is worthy of showing ads . Therefore it approves you.

PLAN A TIME TABLE FOR ALL THIS SO THAT IT DOESN’T BECOME STRESSFULL
This is not an illegal method ,I've just shared what helped me to get an adsense account.

Please note:
-Wait for 10-12 days before applying from flixya.com.
-While making an account on flixya.com or youtube use the email address by which your are gonna apply for adsense.

Now that you know all the things needed to make a powerfull blog.
Start now and rock it.

Thank you for your precious time.

About Author

SAHL AHMED a tech geek and a

SEO expert . Founder of Humor And technology Blog – HumorTechBlog.Com

For reference :

Blog : http://www.humortechblog.com/

Youtube : http://www.youtube.com/user/sahlcooool

Flixya : http://www.flixya.com/user/sahlcoolio

Twitter : http://twitter.com/HumorTechBlog

Facebook fan page: http://www.facebook.com/HumorTechBlog

Digg : http://digg.com/sahlsmash

Simplex Transcript - renewed version

2011-02-07T11:56:00.000+07:00

Simplex Transcript is a good template for an online portal or magazine . There's a lot of people download this template from Simplexdesign and use this template for their website . There are some bugs has been reported . Thanks you all for this.
In this post ,I want to introduce renewed version of Simplex Transcript template which is easier for you to install and customize ,fixed some bugs ,reduce loading time ,supported lightbox effect ,and a full-width page .

Live Demo | Download template file with Disqus | Download template file without Disqus

Here is steps to install this template

1,Download this template

2,Open template file

3,To make your main menu navigation

find this code
<div id='navcats'>
            <ul>
                <li>
                     <a href='http://simplextranscript.blogspot.com'>Home</a>
                </li>
                <li>
                     <a href='/search/label/world'>World News</a>
                    <ul class='children'>
                        <li><a href='#'>Category</a></li>
                        <li><a href='#'>Category</a></li>
                        <li><a href='#'>Category</a></li>
                    </ul>
                </li>
                <li><a href='/search/label/sports'>Sports</a></li>
                <li><a href='/search/label/finance'>Finance</a>
                     <ul class='children'>
                        <li><a href='#'>Category</a></li>
                        <li><a href='#'>Category</a></li>
                        <li><a href='#'>Category</a></li>
                    </ul>
                </li>
                <li><a href='/search/label/entertainment'>Entertainment</a>
                    <ul class='children'>
                        <li><a href='#'>Category</a></li>
                        <li><a href='#'>Category</a></li>
                        <li><a href='#'>Category</a></li>
                    </ul>
                </li>
                <li><a href='/search/label/business'>Business</a></li>
            </ul>
        </div>
and edit the text in bold to the name and url of your categories . Link to each category has structure
http://your blog.blogspot.com/search/label/category-name

4,This is the code of credit box at the end of each post
<div id='entryMeta'>
                                        <img alt='' class='avatar avatar-39 photo' height='39' src='http://3.bp.blogspot.com/_MsaNQZtvB5E/StANnrMWRCI/AAAAAAAAAKY/WmvDsGT-YfA/S45/normal_HNH_9244-sapa0207.jpg' width='39'/>
                                        Posted by <data:post.author/>
                                        on <data:post.timestamp/>. Filed under
                                        <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>.
                                        You can follow any responses to this entry through the <a href='/feeds/posts/default/'>RSS 2.0</a>.
                                        Feel free to leave a response
                                        <div class='clear'/>
                                    </div>

Edit the text in bold to the text you want (you can change it ,add link to your profile ,translate it to your language )

5,If you choose the template file with Disqus comment system
find this code

/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

var disqus_shortname = 'simplexblognews'; // required: replace example with your forum shortname

/* * * DON'T EDIT BELOW THIS LINE * * */

(function () {

var s = document.createElement('script'); s.async = true;

s.type = 'text/javascript';

s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';

(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);

}());

</script>

and this code

<b:includable id='comments' var='post'>

/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

var disqus_shortname = 'simplexblognews'; // required: replace example with your forum shortname

// The following are highly recommended additional parameters. Remove the slashes in front to use.

// var disqus_identifier = 'unique_dynamic_id_1234';

// var disqus_url = 'http://example.com/permalink-to-page.html';

/* * * DON'T EDIT BELOW THIS LINE * * */

(function() {

var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;

dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);

})();

</script>

</b:includable>

then change the text in bold "simplexblognews" to your Disqus shortname . This step is required because if you don't change this text ,it mean you are using my Disqus account ,so I can delete your comment (hehe ^^)

Now save template .Upload it to Blogger

6,To add logo to this template

click on edit link in logo widget

and add link to your logo in widget content

7,To add your social network account

click on 'edit' link in Stay Connected widget

and add link to your social network accounts .

8,'top ads','Top sidebar ads' ,'primarybottom sidebar','home sidebar ads' are widgets for advertising . You can click on 'edit' link of these widgets

and add the ad code into widget content . Like this

9,To show posts under a category in the slider:

click on 'edit' link in 'feature content slider' widget

add the title you want to show into widget title ,and add the name of category into widget content .

In these pictures above ,I want to show posts in 'feature' category into slider ,so I add category name 'feature' into widget content and add the title 'feature' into widget title .

10,Do the same with other widgets . Click on 'edit' link in a widget ,add a category name into widget content and add the title you want to show in widget title . Recent posts in this category will be shown in where the widget you choose is .

For example ,I want to show posts under category 'Politic' in the position of widget 'top mid col'

First ,I click on 'edit' link in 'top mid col'

a dialog appeared .
then ,I add the category name 'politic' into widget content ,and add the title I want to show 'POLITIC' into widget title .

After that ,click Save .

If the category 'politic' existed in my blog ,and there is at least one post under category 'politic' ,it will be displayed in the position of 'top mid col'

11,Do the same with the tab bar

For example ,I want to show posts under category 'cycling' in the position of tab number 1 in the tab bar
First ,I click on 'edit' link in 'priBotTab1'

a dialog appeared .

then ,I add the category name 'cycling' into widget content ,and add the title I want to show 'Cycling' into widget title .

After that ,click Save .

The posts under "cycling" category will be shown in tab1 of the tab bar .

12,In Page Element ,we can also setup widgets which will be shown in single page (post page)
this is a single page

and this is widgets for a single page in page element

In the single page ,post will be shown in the left-hand ,a narrow sidebar in the middle and a wide sidebar in the right .
Narrow sidebar contain widgets : Blog Archive,Label ,and Custom script .
Wide Sidebar contain widgets : Custom script ,Recent comment widesidebar ,recent post widesidebar,and Popular post

You can't add more widget to these sidebars . But you can remove widget existed .

If you want to add any script to single page (like ad script,counter script ...) add them into Custom script widget content .
Click edit link in Custom script widget
Add script into widget content .

13,To add a forum to blog,create a new page ,name it 'forum' and paste the forum embeded code into page content (in Edit HTML mode)

then go to Dashboard -> Go to Design -> Edit HTML ,search for the text 'http://simplextranscript.blogspot.com/p/forum.html'

and replace it with link to 'forum' page you've just created .There are 8 places need to change in total . After that ,save the changes .

Here are places need to change 'http://simplextranscript.blogspot.com/p/forum.html' with the link to your forum page :

1st place :

2nd place

3rd place

4th place

5th place

6th place

7th place

8th place

That's all .Save template and you will see a full-width forum page .

14,Lightbox effect has been integrated in this template

To use Lightbox effect in your post ,when editing post ,click on Edit HTML .

To add lightbox effect for one image , use rel="lightbox" title="Your image Caption" as picture above
To add lightbox effect for multiple images , use rel="lightbox[albumname]" title="Your Image Caption"
if you want to add another image to this album,upload the second image and use rel="lightbox[albumname]" title="Caption for Second image of albumname"
in this case , lightbox will work like a gallery with next and previous links and you can use keyboard to navigate through the album

That's all for this template .I hope it helpful to you

SimplexCelebrity renewed version

2011-01-30T13:28:00.000+07:00

In this post ,I want to show you renewed version of my template Simplex Celebrity ,which is more easy to install ,bugs fixed ,loading faster ,a forum wide-page and SEO friendly .
There are two template files for this version ,one with Disqus comment system and the other without .

Live Demo | Download SimplexCelebrity with Disqus | Download SimplexCelebrity without Disqus

Here is steps for installing this template

1, Download template file from links above .Choose template file with Disqus comment system if you want to use Disqus ,or choose the other if not .

2,If you choose template file with Disqus comment system ,open template file in a word editor such as Notepad ++ and find this block code :

<div id='disqus_thread'/>
<script type='text/javascript'>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'simplexcelebs'; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
    // var disqus_identifier = 'unique_dynamic_id_1234';
    // var disqus_url = 'http://example.com/permalink-to-page.html';

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href='http://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>

and this block

<script type='text/javascript'>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'simplexcelebs'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
</script>

change the text in bold "simplexcelebs" to your Disqus shortname .
Save template ,and upload it to Blogger .

3,Go to Blogger Dashboard ->Design->Page Element .In this page ,you will see many widgets .

4,To add logo to your blog

Click on logo widget

and fill widget content with link to logo as what I did in image below

5,To add items to menu bar

click on edit link in menu bar widget

and add link to categories in your blog as I did in the image

Link to each category has structure : http://yourblog.blogspot.com/search/label/your category

6,'top ads','sidebarads' are widgets for advertising . You can click on 'edit' link of these widgets and add the ad code into widget content . Like this

7,To add content to slider

click on edit link in "feature slider" widget

write the title you want to show in widget title
and write the name of category which you want to show in slider in widget content
for example ,in the picture below ,I want to show content of category "feature" in slider ,so I add title "feature slider" into widget title and add category name "feature" into widget content . And recent posts from "feature" category will be shown in slider .

8,Do the same with other widgets . Click on 'edit' link in a widget ,add category name into widget content and add the title you want to show in widget title . Recent posts in this category will be shown in where the widget you choose is .
for example ,I want to show posts in "music" in the position of widget "category box 2"

First ,I click on edit link in "category box 2" widget

a dialog appeared . I add category name "music" into widget content ,and add "MUSIC" in the widget title

after that ,click Save .
Here is what we have after editing :

9,To add a forum to blog,create a new page ,name it 'forum' and paste the forum embeded code into page content (in Edit HTML mode)

then go to Dashboard -> Go to Design -> Edit HTML ,search for the text
'http://simplexcelebs.blogspot.com/p/forum.html'
you will find out these block code :

<b:if cond='data:blog.url != "http://simplexcelebs.blogspot.com/p/forum.html"'>
        <b:section id='sidebar' class="widget1" showaddelement='yes'>
            <b:widget id='HTML14' locked='false' title='Subscribe' type='HTML'>


and

     <b:if cond='data:blog.url != data:blog.homepageUrl'>
                        <b:if cond='data:blog.url == "http://simplexcelebs.blogspot.com/p/forum.html"'>
                             <div id="fullcontent">
                                 <b:loop values='data:posts' var='post'>

Change "http://simplexcelebs.blogspot.com/p/forum.html" to your forum page's url .

10,Lightbox effect has been integrated in this template

To use Lightbox effect in your post ,when editing post ,click on Edit HTML .

To add lightbox effect for one image , use rel="lightbox" title="Your image Caption" as picture above
To add lightbox effect for multiple images , use rel="lightbox[albumname]" title="Your Image Caption"
if you want to add another image to this album,upload the second image and use rel="lightbox[albumname]" title="Caption for Second image of albumname"
in this case , lightbox will work like a gallery with next and previous links and you can use keyboard to navigate through the album

That's all for this template .I hope you enjoy this version ^^

Jquery Lightbox - another Solution for Lightbox effect in Blogger

2011-01-27T21:05:00.000+07:00

In previous post on Lightbox effect (Lightbox really working script) , I wrote about a script for Lightbox effect based on Scriptaculous (a Javascript framework) that work well in Blogger .
But if your blog is using Jquery framework ,this Lightbox effect can't work because there's a conflict between Jquery and Scriptaculous .
So here we have another solution that can be used in Blogger ,and of course ,it can be applied for all Simplex templates (included Simplex Celebrity ,Simplex Enews ...etc) .It's Jquery Lightbox

Demo in Simplex Celebrity template

How to install this script ?

1,Go to Blogger Dashboard ,Continue to Design tab ,then Edit HTML tab .

2,Add this code right before <body> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>

<script src="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.js" type="text/javascript"/>
<link href="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css"/>

<script type="text/javascript">
$(function() {
$('a[rel*=lightbox]').lightBox();
});
</script>

Save changes . You are done .

How to use ?

To use Lightbox effect in your post ,when editing post ,click on Edit HTML .

To add lightbox effect for one image , use rel="lightbox" title="Your image Caption" as picture above
To add lightbox effect for multiple images , use rel="lightbox[albumname]" title="Your Image Caption"
if you want to add another image to this album,upload the second image and use rel="lightbox[albumname]" title="Caption for Second image of albumname"
in this case , lightbox will work like a gallery with next and previous links and you can use keyboard to navigate through the album

That's all for Jquery Lightbox effect .
This post is for all of you ,who want to use Lightbox effect in Blogger , and specially for naxoz-report and DJ Remix Town ,who commented in my blog asked for Lightbox effect in Simplex Celebrity template .