SimplexDesign - free premium blogspot template

New customization Blogger threaded comment

noreply@blogger.com (nhamngahanh) — Mon, 28 May 2012 09:53:00 +0000

After reading some comments from you on Customize threaded comment system and check by myself ,there's an error when applying CSS in this post: the reply button and load more button are not work .
Now in this post ,I will show you how to customizing theaded comment system like Simplex Bigblue template .

New threaded comment system use more javascript than the old comment form . It's mean if we look into the template code ,we couldn't know what HTML tags will be used in comment form ,therefore hard to write CSS .
To know what HTML tags has been generated by javascript ,you can wait for page fully loaded ,and then save that page to your computer .
Check the downloaded page ,we can see what HTML tags in comment .
All of these HTML tags are decorated by CSS attributes in default Blogger CSS file . You can't download/edit/modify this CSS file . So the solution here is to write new CSS in template file to overwrite the defaults .

Here is the HTML code of threaded comment that I dumped in my blog :

<div class="comments-content">
     <div id="comment-holder">
         <div kind="x" id="xxx">
             <div id="xxx">
                 <div u="x" t="x" kind="x" class="comment-thread" id="xxx">
                     <ol id="xxx">
                         <li kind="x" class="comment" id="xxx">
                             <div class="avatar-image-container">
                                 <img src="avatar">
                           </div>
                             <div class="comment-block" id="xxx">
                                 <div kind="x" class="comment-header" id="xxx">
                                     <cite class="user"><a href="xxxx" rel="nofollow">Comment name</a></cite>
                                   <span class="icon user"></span>
                                   <span class="datetime secondary-text"><a href="xxx" rel="nofollow">date and time</a></span>
                               </div>
                               <p class="comment-content" id="xxx">comment body</p>
                               <span kind="x" class="comment-actions secondary-text" id="xxx">
                                     <a o="r" target="_self" href="javascript:;" kind="i">Reply</a>
                                   <span class="xxxxxx">
                                         <a href="xxx" target="_self" o="x">Delete</a>
                                   </span>
                               </span>
                           </div>
                           <div class="comment-replies" id="xxx">
                                 <span kind="x" id="xxx">
                                     <div u="x" t="x" kind="x" class="comment-thread inline-thread" id="xxx">
                                         <span kind="x" class="thread-toggle thread-expanded" id="xxx">
                                             <span class="thread-arrow" id="xxx"></span>
                                           <span class="thread-count" id="xxx">
                                                 <span style="display: none;" id="xxx"></span>
                                               <span style="display: none;" id="xxx"></span>
                                               <a target="_self" href="javascript:;">Replies</a>
                                               <div class="thread-dropContainer thread-expanded" id="xxx">
                                                     <span class="thread-drop"></span>
                                               </div>
                                           </span>
                                       </span>
                                       <ol class="thread-chrome thread-expanded" id="xxx">
                                             <div>
                                                 <li kind="b" class="comment" id="xxx">
                                                     <div class="avatar-image-container">
                                                         <img src="avatar of people who reply comment above">
                                                   </div>
                                                   <div class="comment-block" id="xxx">
                                                         <div kind="m" class="comment-header" id="xxx">
                                                             <cite class="user blog-author"><a href="xxx" rel="nofollow">name of people who reply comment</a></cite>
                                                           <span class="icon user blog-author"></span>
                                                           <span class="datetime secondary-text"><a href="xxx" rel="nofollow">date and time reply comment</a></span>
                                                       </div>
                                                       <p class="comment-content" id="xxx">comment body</p>
                                                         <span kind="m" class="comment-actions secondary-text" id="xxx">
                                                             <span class="item-control blog-admin pid-868019743"><a href="xxx" target="_self" o="d">Delete</a></span>
                                                         </span>
                                                   </div>
                                                   <div class="comment-replies" id="xxx"></div>
                                                   <div class="comment-replybox-single" id="xxx"></div>
                                               </li>
                                           </div>
                                           <div kind="ci" class="continue" id="xxx"><a target="_self" href="javascript:;">Reply</a></div>
                                       </ol>
                                         <div class="comment-replybox-thread" id="xxx"></div>
                                   </div>
                               </span>
                           </div>
                             <div class="comment-replybox-single" id="xxx"></div>
                       </li>



                   </ol>
                   <div kind="ci" class="continue" id="xxx" style="display: none;">
                         <a target="_self" href="javascript:;">Add comment</a>
                   </div>
                   <div class="comment-replybox-thread" id="xxx">
                         xxxxxxxxx
                   </div>
                   <div kind="rb" class="loadmore loaded" id="xxx"><a target="_self" href="javascript:;">Load more...</a></div>
               </div>
           </div>
       </div>
    </div>
</div>

Please take a look at the code above . I censored unnecessary information in the code above . What we need to know is HTML tags and class attribute of these class .
Base on the HTML markup above ,we can write CSS code to decorate them as we want .

Here is the code that I applied in Simplex Bigblue template .You can consider it an example .

.comment {
    list-style-type: none;
    width: 100%;
}
.comment .avatar-image-container img {
    width: 35x;
    height:35px;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    margin: 0;
    padding: 3px;
    vertical-align: middle;
}
.comment .avatar-image-container {
    float: left;
    max-height: 36px;
    overflow: visible;
    width: 36px;
}
.comment .comment-block {
    margin-left: 70px;
    position: relative;
    background: none repeat scroll 0 0 #F7F7F7;
    border: 1px solid #E4E4E4;
    border-radius: 4px 4px 4px 4px;
    overflow: hidden;
    padding: 15px 20px 5px;
}
.comment .comments-content .datetime {
    font-size: 11px;
    font-style: italic;
    margin-left: 6px;
    float:right;
}
.comment .comments-content .datetime a{
    color:#999;
}
.comment .comments-content .user {
    font-style: normal;
    font-weight: bold;
}
.comment .comments-content .user a {
    color:#333;
}
.comment .comment .comment-actions a {
    background: -moz-linear-gradient(center top , #FFFFFF 20%, #E5E5E5 100%) repeat scroll 0 0 transparent;
    border-color: #E4E4E4 #C4C4C4 #C4C4C4 #E4E4E4;
    border-radius: 2px 2px 2px 2px;
    border-right: 1px solid #C4C4C4;
    border-style: solid;
    border-width: 1px;
    color: #424242 !important;
    display: inline-block;
    margin: 5px;
    padding: 7px 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 #FFFFFF;
    font: 11px/18px sans-serif;
    margin: 5px;
    padding: 1px 6px;

}
.comment .continue a {
    background: -moz-linear-gradient(center top , #FFFFFF 20%, #E5E5E5 100%) repeat scroll 0 0 transparent;
    border-color: #E4E4E4 #C4C4C4 #C4C4C4 #E4E4E4;
    border-radius: 2px 2px 2px 2px;
    border-right: 1px solid #C4C4C4;
    border-style: solid;
    border-width: 1px;
    color: #424242 !important;
    display: inline-block;
    margin: 5px;
    padding: 7px 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 #FFFFFF;
    font: 11px/18px sans-serif;
    margin: 5px;
    padding: 1px 6px;
}
.comment .comments-content .loadmore.loaded {
    background: none repeat scroll 0 0 #4488DD !important;
    color: #FFFFFF;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 10px;
    text-align: center;
}

You can copy this CSS code if you want threaded comment like Simplex Bigblue template ,or write more CSS code if you want to make it as you want .
Hope this post helpful to you .

Some Basic Principles and Techniques for Web Site Design

noreply@blogger.com (Guest Blogger) — Fri, 25 May 2012 09:05:00 +0000

This is guest post by Brianne Walter on basic principles and techniques for web design . It's also helpful for you who want to make a custom template for blog .
The principles and the techniques are essential for any design. Therefore, in this case, the website design is no exception. For a good website designing, you will need to apply the principles and techniques in a wise manner. Therefore, you will need to know about these elements and its functions. Therefore, some principles and techniques are discussed for your need.

Layout

The layout of a website can create its aesthetic meaning to the visitors. Therefore, it is very much important to use the composition of the page in the subtle manner. How you will design, the website's page is a vital concern for making the stunning layout. Therefore, for achieving the success of the layout, you have to apply the grid technique in the layout segment. Particularly, the rules of third should be used to make a stunning composition for the website layout. For good layout, you have to consider putting some surprises in the design, so that the visitors can stay on the website page for a long time.

Color

The color for any website design is an important element. So, the color should be used in the website design in intelligent way. Remember color can make or break the consistency of the website layout. Before using color in the website page, you have to study the color harmony in deeply. So, that there will be no scope for error for color placing on the website layout.

Typography

Before using the typography on the website, you have to know the aesthetic sense of the fonts. The reason is that if you use the right font for the website design, then you will make it more user-friendly for the visitors. The exact typography for the website design is vital for the eyes, because, the wrong fonts can damage the viewing angle of the monitor screen.

Navigation

When you are going to design the website, you should remember that navigation in the website should be user-friendly which means the visitors can access the website without any trouble. Moreover, you have to use your intuition in advance, about where the movement of the visitors' eyes will be on the web page.

Usability

When you are designing the website, you should think about the visitor's mind. In advance, you have to realize that what the visitors will do when they make a visit on the website and you have to think about what the visitors will do on the website.

Clarity

The clarity of the website design depends on the pixel usage. So, how you will use the pixels in the website layout which will determine the crisp and the sharpness of it on the monitor screen. Moreover, the edges of the pictures or fonts should be clear as well as looking great on the monitor screen also.

Consistency

Always, remember that the website design should have consistency in all segments of the layout, because, the consistency in every aspect of the website will determine its success. Generally, consistency means making everything match like font, spacing, heading sizes .Etc.

Therefore, the website design requires the principles and techniques to build a good-looking website for the visitors.

About guest blogger

Brianne Walter is a freelance blogger who is passionate about writing. She frequently writes on SEO, marketing, design and social media related topics. Her favorite sites are ecofriend and style guru, which she also happens to work for.

New blogger interface and error when installing new template

noreply@blogger.com (nhamngahanh) — Tue, 22 May 2012 04:05:00 +0000

The new blogger interface will be applied to all blog in next month .
Some of you updated to new blogger interface and error message suddenly appear when installing a new template .
The reason is very simple . The error is on widgets in blogger and widgets inside template .

For example ,you added a Popular post widget to blogger when using old template . But in new template ,there's no Popular post widget in template itself . So error occurred.
What to do in this situation is to remove Popular post widget in Blogger and re-install later .
This is very different to old Blogger interface . The old one will show a dialog for all widget that not exist in new template and asking for keep these widgets or delete . We can still keep the old widget with all the code added in widget content .
So I recomment you to :
- Do backup before installing any template .
- Copy widget content .
- Remove all widgets
- Install new template
- Add widget back to template .

7 Essential Design Elements of E-Commerce Email

noreply@blogger.com (Guest Blogger) — Thu, 17 May 2012 08:01:00 +0000

Email is still king. Even as other channels become more popular, email remains popular among Internet users. Marketers still value email as a way to communicate with consumers.
It's important for designers to understand the value placed on email and email design.
With this in mind, let's look at the essential elements of e-commerce email design.

E-commerce companies work hard to build their email subscriber lists. These folks realize the importance of having a list. To have a consumer opt-in to an email program is a sign that they want to receive valuable correspondence from a company. If you can create great email designs you will be a valuable resource for any company looking to hire.

1. Visual Brand Relevance

Source

If you are looking for email inspiration you can't go wrong with Fossil. In the last year or so their program has been stellar. The design really establishes what their brand is about and these days the Fossil brand is cool, laid back and stylish. Fossil has become known for way more than just watches. Their apparel and accessories are sought after by folks that have a little funky and organic style. Use brand images and photography in emails for e-commerce brands like Fossil. It's a great way to really entice people to click through to the site to shop, but it's also something they'll actually look forward to seeing in the inbox each week.

2. Purpose & Call-To-Action

Source

The simple concept and design of the LL Bean Signature emails are great. They focus on simplicity. You won't see a ton of calls to action. Instead, each email has a basic purpose and a call-to-action to support that purpose. In this case, LL Bean Signature is promoting their polos. There are two main calls to action. Shop the featured polo or shop all polos. Simple. Easy to understand.

3. Cohesive Theme

Source

Levenger often has a theme for their emails. This email featured a theme for graduates. The entire email was focused on items a graduate would need for their professional career. Cohesiveness is important when creating emails like this. It is relevant to a target customer. The email is not relevant to everyone, but there are still a few small links near the top and the logo for others to click through to the website.

4. Descriptive Headline

Source

Johnston & Murphy did a great job with a headline in a recent email. The headline is only two words, but you instantly understand what the email is about. This is important. Headlines are key to letting the email opener know they are looking at the right email. The subject line needs to lead to the headline, which leads to the landing page. Johnston & Murphy did this plus they took advantage of a timely event, The Kentucky Derby.

5. Enticing Links

Source

Danner takes a little different approach with their email program. Every month they send out their Danner In The Details email. It's a great series with a focus on content. The design is simple. There is quite a bit of content for each section of the email, but what is really important here is the enticing nature of the content. It leads you just enough to get excited and then the links call you to action to click through to the website. This is good email design and strategy. Get the consumer to the website.

6. Obvious Links or Buttons

Source
Old Navy's emails are entirely unique. They are flashy and in your face. The brand has changed marketing strategies in recent years. They are promotional and fun. Their email program reflects this brand strategy. Another good aspect of the Old Navy email design is the obvious links. On the left side of this email you'll notice four links for Women, Women's Plus, Maternity, and Men. These basic looking text links, but that's what consumers are comfortable clicking. Don't get too crazy with buttons and links. Make them obvious for users so they are comfortable clicking.

7. Consumer Focus

Source

Woolrich has a great email program. The design is visually appealing. The company very much communicates their brand message with their design and imagery. In this example you see the photo of the woman. It's something the target audience of Woolrich will see and understand. Photos like this are great for connecting with an audience.

But what I love even more about this email is the customer-focused list of benefits. It can be difficult to focus on the customer benefits when referring to products. Woolrich does a good job. They understand that a customer is not just buying a shirt. The customer is getting something that will keep them dry in the summer months. This email is selling more than just a shirt. It's selling comfort.

About Guest Blogger

Dayne Shuda is a contributing blogger for Fluttermail, email marketing for small businesses.

Update for SimplexGamezone template

noreply@blogger.com (nhamngahanh) — Wed, 09 May 2012 09:11:00 +0000

One reader mailed to me for the problem with comment form in SimplexGamezone template . The comment form is not well design and it is pushed down bellow sidebar section .
I made a new version that fix this problem . All the download links for this template has been replaced to newer one .You can download newer version and re-install or update manually with this post

Download version 2

If you want to update manually ,here is steps :
1,Find this code

<b:if cond="data:blog.pageType == "item"">
                             <div class="breadcrumbed">
                                You are here:
                                <a expr:href="data:blog.homepageUrl">Home</a>
                                <span> /
                                     <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>
                                </span>
                            </div>

                            <div id="uscolumnsingle">
                                <div class="1wrapperst">
                                    <div class="2wrappernd">
                                        <div class="uscontinue">
                                             <div class="post">
                                                 <div class="ptitle">
                                                        <b:if cond="data:post.link">
                                                        <a expr:href="data:post.link"><data:post.title/></a>
                                                    <b:else/>
                                                        <b:if cond="data:post.url">
                                                            <a expr:href="data:post.url"><data:post.title/></a>
                                                        <b:else/>
                                                            <data:post.title/>
                                                        </b:if>
                                                    </b:if>
                                                </div>
                                                <div class="meta_author">By
                                                     <data:post.author/>
                                                    On <data:post.timestamp/> |
                                                    Categorized As
                                                    <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> |
                                                    With
                                                    <b:if cond="data:post.allowComments">
                                                        <b:if cond="data:post.numComments == 1">
                                                            1 <data:commentLabel/>
                                                        <b:else/>
                                                            <data:post.numComments/> <data:commentLabelPlural/>
                                                        </b:if>
                                                     </b:if>
                                                </div>
                                                <div id="mycontent"><data:post.body/></div>
                                                <div class="clear"/>
                                            </div>

                                            <div id="authorarea">
                                                 <img width="60" height="60" class="avatar avatar-60 photo" src="simplexgamezone_files/d72f45aa0f1e49fdbe7dffa1ebdca7d2.png" alt=""/>
                                                <div class="authorinfo">
                                                     <p><b>About <a title="Posts by admin" href="http://thesimplexdesign.com/">admin</a></b> -
                                                    Share a little biographical information to fill out your profile. This may be shown publicly. Share a little biographical information to fill out your profile. This may be shown publicly.</p>
                                                </div>
                                            </div>
                                             <div class="share">
                                                 <ul>
                                                    <li>
                                                        <img border="0" alt="Add to Delicious" class="sharethis" src="simplexgamezone_files/share.png"/>
                                                     </li>
                                                 </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="page-bottom">
                                </div>
                                <div class="clear"/>
                            </div>

                            <b:include data="post" name="comments"/>
                        <b:else/>

Replace it with

<b:if cond='data:blog.pageType == "item"'>
                             <div class='breadcrumbed'>
                               You are here:
                               <a expr:href='data:blog.homepageUrl'>Home</a>
                               <span> /
                                     <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>
                               </span>
                           </div>

                           <div id='uscolumnsingle'>
                               <div class='1wrapperst'>
                                   <div class='2wrappernd'>
                                       <div class='uscontinue'>
                                            <div class='post'>
                                                <div class='ptitle'>
                                                      <b:if cond='data:post.link'>
                                                       <a expr:href='data:post.link'><data:post.title/></a>
                                                   <b:else/>
                                                       <b:if cond='data:post.url'>
                                                           <a expr:href='data:post.url'><data:post.title/></a>
                                                       <b:else/>
                                                           <data:post.title/>
                                                       </b:if>
                                                   </b:if>
                                               </div>
                                               <div class='meta_author'>By
                                                     <data:post.author/>
                                                   On <data:post.timestamp/> |
                                                   Categorized As
                                                   <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> |
                                                      With
                                                   <b:if cond='data:post.allowComments'>
                                                       <b:if cond='data:post.numComments == 1'>
                                                           1 <data:commentLabel/>
                                                       <b:else/>
                                                           <data:post.numComments/> <data:commentLabelPlural/>
                                                       </b:if>
                                                     </b:if>
                                               </div>
                                               <div id='mycontent'><data:post.body/></div>
                                               <div class='clear'/>
                                           </div>

                                           <div id='authorarea'>
                                                 <img alt='' class='avatar avatar-60 photo' height='60' src='http://1.gravatar.com/avatar/d72f45aa0f1e49fdbe7dffa1ebdca7d2?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G' width='60'/>
                                               <div class='authorinfo'>
                                                     <p><b>About <a href='http://thesimplexdesign.com' title='Posts by admin'>admin</a></b> -
                                                   Share a little biographical information to fill out your profile. This may be shown publicly. Share a little biographical information to fill out your profile. This may be shown publicly.</p>
                                               </div>
                                           </div>
                                             <div class='share'>
                                                 <ul>
                                                   <li>
                                                       <img alt='Add to Delicious' border='0' class='sharethis' src='http://magazine3.com/gameup/demo/wp-content/themes/gameup-single-v25-demo/icons/share.png'/>
                                                     </li>
                                                 </ul>
                                           </div>
                                             <b:include data='post' name='comments'/>
                                       </div>
                                   </div>
                               </div>
                               <div class='page-bottom'>
                               </div>
                               <div class='clear'/>
                           </div>


                       <b:else/>

2, Find this code

   <b:includable id="comments" var="post">
<div class="comments" id="comments">
    <a name="comments"/>
    <b:if cond="data:post.allowComments">
      <h4>
        <b:if cond="data:post.numComments == 1">
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>

      <b:if cond="data:post.commentPagingRequired">
        <span class="paging-control-container">
          <a expr:class="data:post.oldLinkClass" expr:href="data:post.oldestLinkUrl"><data:post.oldestLinkText/></a>
          Â
          <a expr:class="data:post.oldLinkClass" expr:href="data:post.olderLinkUrl"><data:post.olderLinkText/></a>
          Â
          <data:post.commentRangeText/>
          Â
          <a expr:class="data:post.newLinkClass" expr:href="data:post.newerLinkUrl"><data:post.newerLinkText/></a>
          Â
          <a expr:class="data:post.newLinkClass" expr:href="data:post.newestLinkUrl"><data:post.newestLinkText/></a>
        </span>
      </b:if>

      <div expr:id="data:widget.instanceId + "_comments-block-wrapper"">
        <dl expr:class="data:post.avatarIndentClass" id="comments-block">
          <b:loop values="data:post.comments" var="comment">
            <dt expr:class=""comment-author " + data:comment.authorClass" expr:id="data:comment.anchorName">
              <b:if cond="data:comment.favicon">
                <img width="16px" height="16px" expr:src="data:comment.favicon" style="margin-bottom: -2px;"/>
              </b:if>
              <a expr:name="data:comment.anchorName"/>
              <b:if cond="data:blog.enabledCommentProfileImages">
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond="data:comment.authorUrl">
                <a expr:href="data:comment.authorUrl" rel="nofollow"><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class="comment-body" expr:id="data:widget.instanceId + data:comment.cmtBodyIdPostfix">
              <b:if cond="data:comment.isDeleted">
                <span class="deleted-comment"><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class="comment-footer">
              <span class="comment-timestamp">
                <a expr:href="data:comment.url" title="comment permalink">
                  <data:comment.timestamp/>
                </a>
                <b:include data="comment" name="commentDeleteIcon"/>
              </span>
            </dd>
          </b:loop>
        </dl>
      </div>

      <b:if cond="data:post.commentPagingRequired">
        <span class="paging-control-container">
          <a expr:class="data:post.oldLinkClass" expr:href="data:post.oldestLinkUrl">
            <data:post.oldestLinkText/>
          </a>
          <a expr:class="data:post.oldLinkClass" expr:href="data:post.olderLinkUrl">
            <data:post.olderLinkText/>
          </a>
          Â
          <data:post.commentRangeText/>
          Â
          <a expr:class="data:post.newLinkClass" expr:href="data:post.newerLinkUrl">
            <data:post.newerLinkText/>
          </a>
          <a expr:class="data:post.newLinkClass" expr:href="data:post.newestLinkUrl">
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class="comment-footer">
        <b:if cond="data:post.embedCommentForm">
          <b:if cond="data:post.allowNewComments">
            <b:include data="post" name="comment-form"/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond="data:post.allowComments">
            <a expr:href="data:post.addCommentUrl" expr:onclick="data:post.addCommentOnclick"><data:postCommentMsg/></a>
          </b:if>
        </b:if>

      </p>
    </b:if>
    <b:if cond="data:showCmtPopup">
      <div id="comment-popup">
        <iframe scrolling="no" frameborder="0" allowtransparency="true" id="comment-actions" name="comment-actions">
        </iframe>
      </div>
    </b:if>

    <div id="backlinks-container">
    <div expr:id="data:widget.instanceId + "_backlinks-container"">
       <b:if cond="data:post.showBacklinks">
         <b:include data="post" name="backlinks"/>
       </b:if>
    </div>
    </div>
</div>
</b:includable>

Replace it with

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
    <div id="displaying">Displaying <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>
        </b:if>
    </div>
    <div id="haveyoursay">Have Your Say </div>

     <br/>

      <ol class="commentlist">

          <b:loop values='data:post.comments' var='comment'>
             <li id="comment-4" class="comment even thread-even depth-1 parent">
                <div>
                <div class="comment-author vcard">
                   <b:if cond='data:blog.enabledCommentProfileImages'>
                     <data:comment.authorAvatarImage/>
                  </b:if>
                 <cite class="fn"><b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if></cite>
        <span class="says">says:</span>
        </div>

        <div class="comment-meta commentmetadata"><a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
                </div>

        <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
           </div>

</li>


          </b:loop>
        </ol>


        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>


    </b:if>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>


</div>
</b:includable>

3,Adding this CSS code in CSS section

.comments .avatar-image-container {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    float: left;
    margin: 0 10px 10px 0;
    max-height: 35px;
    overflow: hidden;
    padding: 2px;
    width: 35px;
}
.comments .avatar-image-container img {width:35px;height:35px;}

#blog-pager {

    float: left;
    font-weight: bold;
    margin: 1em 0;
    overflow: hidden;
    padding: 5px 15px;
    text-align: center;
    width: 625px;
}

That's all for update this template .

How to Generate Backlinks Without Dabbling in the Dark Arts

noreply@blogger.com (Guest Blogger) — Thu, 03 May 2012 07:23:00 +0000

This is guest post by Lisa-Anne Redwood on how to generate backlinks without using blackhat method
There’s been a lot of buzz lately regarding Google’s rankings and the SEO changes that ‘big G’ has been putting in place. Many private backlink networks have now be almost entirely de-indexed by Google. That means that countless websites that were enjoying the heady heights of search rankings are now almost completely invisible to search users. These developments have understandably unnerved legitimate website owners, many of whom may not have kept track of how their backlinks were generated.

But in fact, these changes may actually be a positive thing for these webmasters. Google tends to target those people who use blackhat SEO techniques (read: spammers), but there are still plenty of ways you can generate backlinks whilst keeping your hat very much white in colour. Let’s take a look at a few ways you can create some legitimate backlinks to your blog or website, even since Google’s hammer has come down.

Guest posting on other blogs

It’s an old method, but still arguably the best. Guest blogging on relevant websites and blogs is a fantastic way to get your link out there on the web in a very organic and whitehat way. Whilst the more unscrupulous SEO practitioners may focus their attention on the spamming the comments section of blogs, you can rise above all this by actually being the one writing the articles. All you have to do is contact the owners of blogs or sites like yours and offer to write an article for them – just be sure that it’s good enough and genuinely offers the reader something of value (and of course make sure your link is in context).

Video backlinks

You may have noticed that Google very often gives precedence to videos in the search results. What this means for bloggers and site owners is that, provided they can come up with compelling content for a video, they can enjoy a new way to create backlinks. When you upload a video to one of the many video streaming sites, you’re often invited to insert a URL either in the video details or description. Very often these links are FOLLOW, which means they’re a legitimate backlink. If your niche allows it, making a video (instructional or informational) can be a great way boost the links back to your site – and if others like it, you may get even more.

Contributing to online communities

Forum posting is another area where blackhatters focus their attention, so you do need to be careful here. One effective method is to spend some time getting to know a community, contributing to the conversation, and then slowly introducing links back to your site. When this is done in a natural way, it can be a fantastic way to create quality backlinks. Just be sure that you are really contributing – and that you’re an authority on the topic – and your blog or site will really benefit.

Getting involved with social media

One of the most valuable ways to reach an audience right now is via social media. That means Facebook, Twitter, Pinterest and so on. While the links you’ll get from these sites are NOFOLLOW, posting your content there can help in a number of ways. First, if your social media profiles become reconginised as an authority on your niche, you can use them to share links which others will then link to. When other people choose to link to your content from their site, you’re getting the very best possible backlink – and the ones that truly fit the definition of ‘legitimate’. Social bookmarking sites like Reddit and Digg can also be helpful in this regard, but be careful not to ‘spam’ them because the users on those sites are very particular about what they like and what gets promoted to their respective ‘front pages’.

With Google getting smarter all the time, blog owners and webmasters too have to adapt in terms of their promotion strategy. If you’re still using black or greyhat techniques, it may be time to focus more on whitehat methods that generate quality backlinks – otherwise you’re risking being removed from Google’s index altogether, and for many sites that’s nothing more than a death sentence.

About guest blogger

Lisa-Anne Redwood is a freelance writer from England who specialises in helping businesses explore their online marketing strategies.

SimplexBigblue - New template for pro blogger

noreply@blogger.com (nhamngahanh) — Wed, 02 May 2012 07:56:00 +0000

It's been a long time since the last template released . In this post I will show you the latest template Simplex Bigblue ,a new template for blogging purpose . This template use exist functions in blogger ,all javascript needed is integrated in template itself ,so it decrease the loading time , load smoothly and easily ,and better in SEO .

This template is now applied in SimplexDesign blog ,so I didn't make a new demo .

Download

How to install this template

1,Download template file

2,Open template in a word editor such as Notepad++

3,To add social network accounts

Find this code

<ul class='social'>
                   <li><a class='social-feed' href='http://feeds.feedburner.com/Simplex' rel='nofollow' target='_blank'>RSS feed</a></li>
                   <li><a class='social-twitter' href='http://twitter.com/dinhquanghuy' rel='nofollow' target='_blank'>Twitter</a></li>
                   <li><a class='social-facebook' href='http://www.facebook.com/simplexdesignblog' rel='nofollow' target='_blank'>Facebook</a></li>
                   <li class='last'><a class='social-youtube' href='https://plus.google.com/u/1/108626685028871955867/posts'>Google+</a></li>
               </ul>

Replace the links in bold to your social network accounts .

4,To add Feedburner subscribe

Find this code

<form action='http://feedburner.google.com/fb/a/mailverify' class='newsletter-form' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Simplex', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
                       <input class='email' name='email' onblur='if (this.value == '') {this.value = 'E-mail';}' onfocus='if (this.value == 'E-mail') {this.value = '';}' type='text' value='E-mail'/>
                       <input name='uri' type='hidden' value='Simplex'/>
                       <input name='title' type='hidden' value='Simplex'/>
                       <input name='loc' type='hidden' value='en_US'/>
                       <input class='submit' name='submit' type='submit' value='Submit'/>
                   </form>

Replace it with the code that Feedburner provide you .

5,To add Advertisement to the space between first post and the rests in homepage and archive page

Find this code

<div class='home-content-ad'>
                                       <div class='ad-code'>
                                           
<div class='clear'/>
                                       </div>
                                       <div class='clear'/>
                                   </div>

And replace the text  to your own ad code

6,To add ad code under post title

Find this code

<div style='margin-top:10px;margin-bottom:10px;'>

</div>

Replace  with your ad code

7, To add ad code in the space next to related posts section

Find this code

<div class='entry-bottom-ad'>
                                        <h3 class='ad-title'>Advertisement</h3>
                                           
                                    </div>

Replace  with your own ad code.

8,To edit credit name under each post
Find this

<div class='author-description'>
                                             <h3>HuyDinhQuang - administrator</h3>
                                            HuyDinhQuang (known as Nhamngahanh) is a blogger and founder of Simplexdesign blog . Learn more about him <a href='http://www.thesimplexdesign.com/p/about-me.html'>here</a> and connect with SimplexDesign community in <a href='http://twitter.com/dinhquanghuy'>Twitter</a>,<a href='http://www.facebook.com/simplexdesignblog'>Facebook</a>,and <a href='https://plus.google.com/u/1/108626685028871955867/posts'>Google+</a>
                                        </div>

And replace it with your own credit / bio .

9,Upload template to Blogger .

10,You can add/edit/remove widgets as your needs . There are many places for adding widget in this template.

That's all for installing this template . It's a template for blogging purpose ,so it's easier to install than others .

Note :

This template use readmore funtion in blogger ,so you can create post summary in homepage /archive page just by adding a 'jump break' in post editor when editing post .(I marked this button with a circle)
Popular Post function with thumbnail only works when all pictures in your post are uploaded to Blogger . Thumbnail can't be shown if your post use picture in another hosting .
Adding search description , Search preferences will make your post have a higher rank in SEO

Top 5 Tips to Increase Conversion rate on your ecommerce website

noreply@blogger.com (Guest Blogger) — Tue, 24 Apr 2012 16:55:00 +0000

This is guest post by Richard on tips to increase conversion rate on ecommerce websites .
Conversion on a site refers to the conversion rate which is a measure of the total number of people that go on to make online purchases. With websites, it is mainly a percentage of visitors who make purchases. A lot of websites are mainly interested to increase the number of visitors. These are the ones that are unable to resolve the problems in order to make navigation easier for customers. By resolving such problems, these websites can increase their conversion rates at a very low expense. Look at the following top 5 tips to increase conversions on your site

1. Simplify Navigation

The more complex your website, the less the number of people making purchases. Be simple to encourage people to buy from you. Accessibility is the foremost issue that prevents users to purchase items online. An inaccessible website potentially loses almost 5 percent of its sales. Make your website accessible through all browsers as those unable to do so lose 15 to 20 percent of their total sales.

2. Only Ask The Right Information!

There is no reason why you should ask customers? email addresses to let them view online brochures or even ask their phone numbers before proceeding further to an email enquiry page. Do not force your users to create accounts to make purchases, as this won't guarantee them becoming return customers. Simplify things and ask only relevant and legitimate questions that have to do with the sales only. Use customer feedback data or questionnaires to collect other information.

3. Develop a Bond of Trust

Following plenty of internet credit card scams, a lot of users are still reluctant to use such private and confidential details online. Provide 24 hour customer support service through a phone number so the users can identify you to a location. Show the privacy policy and clearly explain the shipping policy and procedures as well to strengthen customer trust. Display the ?VeriSign Secured? logo on the website if you have an SSL certificate.

4. Maintain a Clear Returns Policy

Make the online shopping experience as plain and clear as brick and mortar shopping. You should know how to deal with the return policy pertaining to different articles of sale, for example, the return policy for clothes is very different as customers are not able to see them closely on the internet and might find them different in reality. Similarly, perishable items are not accepted upon return anywhere in the world once they are sold- not even at physical stores! Develop a distinct and different policy for all items that you sell.

5. Offer Easy and Different Payment Mediums

Not everyone owns a credit card which should be very obvious to you. Similarly, not everyone who has it uses it as well. So, offer several easy and effortless modes of payment to suit the needs of every customer. Many times, customers add a lot of products in their online basket and are satisfied with every procedure on the website, but fail to make purchases when the website limits them to do it through one means only. Make your online website more accessible and simple to let customers know you value them.

About guest blogger

Richard has been working on the Magento Commerce platform for several years. As an ecommerce specialist, he has a strong interest in maximising online conversions.

Best way to Study the Value of a Link

noreply@blogger.com (Guest Blogger) — Sun, 15 Apr 2012 10:21:00 +0000

Link building is one of the most important things when do SEO for a website . Have you think about buying or trading links with other websites to improving rank in Search Engine ? In this guest post, Brianne will show you the way to study the value of a link and therefore have a good strategy in buying or trading links .

During the older days of internet , websites used to fill the content with a certain keyword to enhance and bolster their rankings in the search engines. The repetition of the word many times throughout the content ensured that the website got placed suitably and had a high ranking in the search engine searches. Such practices compromised with the quality of content.
Now the Google rankings depend on the on-page and off-page factors of SEO and back link form one of the most important off-page factor for SEO rankings. These links are evaluated in terms of the quality and quantity and are the backbone of search engine rankings.

Building and maintaining of links can be important in achieving the desired high rankings in the search results of the search engines. The links made should be of premium quality and should be applicable or the right areas as well. Different links can be of different types and therefore one must analyze the links carefully to achieve the specific results.

Type of link

Links can be of many types but only two are able to influence the rankings. These are the image and the text links. Text links are considered more powerful than image links and therefore they get more preference. Other kinds of links including the JavaScript links are not given any importance by the search engines as the spiders of the search engines cannot read or follow these links in a proper way.

Anchor text

The anchor text can be very crucial in deciding the value of a link. One should not concentrate on the name of the company or website but should include the expected keywords in the anchor text of the back link. This is so because the ranking of the web page depends on the words in the anchor texts of the links which point at the website. More valuable words get higher ranking in the search engine results.

The age of the link page

The age of the link page on the internet is also an important factor to be analyzed and should be studied while deciding the value of the link. Major search engines like Google trust those webpages that have been on the web for a long duration of time.

Incoming and outgoing links

A back link which links to other websites can offer good SEO value and the more direct links are more valuable. The links that are provided on web pages are more authoritative and can offer links of good value. If your site is linked to an authority website that is linked to other websites as well then it is good for the reputation and ranking of your website. The value of the link also depends on the number of outgoing links it has. If a link gets displayed on the page then it calls for more traffic. There are also 'no-follow' links which can be used to increase the traffic but they fail to achieve the values that are set by SEO.

If you are building a website for SEO then you should consider the factors that provide value to links. You can save time by using the SEO tools. Analyzing links can be very essential for those who are launching a new website.

About guest blogger

Brianne is a blogger by profession. She loves writing on technology and luxury. Beside this she is fond of gadgets. Recently an article on Ford Endeavour attracted her attention. These days she is busy in writing an article on Samsung Omnia W.

How to Optimize Your Blog

noreply@blogger.com (Guest Blogger) — Thu, 12 Apr 2012 03:48:00 +0000

Attracting traffic to your blog is not an easy task. Optimizing your blog needs to consider few important things. The design of blog, home page, content, images, SEO, and the text presentation plays crucial role in optimizing your blog on the net. The visitors often search for good quality content with attractive interface and images.

Use popular keywords

A good way to achieve the purpose of a successful blog is to use keywords which people tend to use more often so that they are directed to the blog with a greater frequency. This helps to achieve the objective of being able to reach out to a wider audience.

Use keywords in the article

A good way to appeal to readers is to use the keywords a few times in the article so that they are easily able to relate to it and their interest in the contents does not sway to something else. Use shorter sentences When sentences are long or convoluted, people find it difficult to trace or remember the train of thought. They prefer reading shorter sentences as it has a great impact on them, so a good strategy to optimize ones blog is to use shorter sentences.

Use relevant photographs

When people see that the writing that they have been searching for is aided by some visual medium such as photograph, they tend to relate to it better and thus find more interest in reading it. A photograph should be chosen in such a way that it says in a summary what the whole blog is all about without giving away the crust of the matter.

Make it easier to subscribe to

When people see that they need to go through a long and painstaking process to register or subscribe to the blog, they tend to get deterred and choose to give up in the first place. So care should be taken to ensure that visitors can easily subscribe to the blog and begin their work of reading.

Allow people to leave comments

Allowing people to leave comments enables them to have a sense of participation in the blog that they are viewing and so they tend to prefer that too other blogs which may have similar content. Another good aspect about this is that the comments or feedback from people helps in making changes as the readers are the people who have the best perspective of the blog.
Optimizing a blog is an art as well as a science, and requires just a little bit of work and dedication in order to make it a big hit. There a host of bloggers on the net and it takes just a few easy steps such as these in order to be ahead in the race and have a good and successful blog.

About the author:
Brianne is a blogger by profession. She loves writing on gadgets. Beside this she is fond of books. She recently did an article on Wireless Laser Printer. These days she is busy in writing an article on comb over carpet.

SEO vs. PPC, which is the best to Increase traffic to your site

noreply@blogger.com (nhamngahanh) — Sat, 31 Mar 2012 03:08:00 +0000

This guest post is by Brianne Walter
Websites need to mark their presence on the internet to get more traffic. This can be done using appropriate online marketing techniques that serve to promote a given website. Search Engine Optimization (SEO) and Pay-Per-Click (PPC) are two such marketing techniques that are used to draw the attention of the end-user by ensuring that the website is displayed prominently on the result pages of popular search engines such as Bing, Yahoo and Google.

When placed high on the search engine result pages (SERP), the website is automatically bound to be noticed and explored by the visitors, thereby increasing the chances of improving traffic to your site.

Both SEO and PPC work well in getting a website to rank high on the SERP, but they are two totally different marketing approaches targeted however at the same result. The choice of the appropriate technique depends on several factors such as purpose of the website, purpose of the marketing campaign, and the budget allocated for the marketing exercise. Here’s how you can decide which of these techniques is best to increase visitor traffic to your website.

Purpose of the Website

Online marketing varies based on the purpose of the website. If your blog or personal website is simply a form of expression, a casual attempt to connect with the world at large and make friends with the like-minded, SEO is a better option. It is a natural, organic way of gradually reaching out to visitors over a long term through quality and relevant content, building goodwill and reputation in the process.

This is also the preferred technique of veteran websites that look to consolidate and maintain their hard earned high rankings. However, it is difficult for new websites to capture high ranks on SERP instantly. A quick bout of advertising using PPC, a paid marketing service, allows them to figure high on the SERP for a short span, enough to announce their presence.

They can then get back to SEO to build their content for natural ranking, as PPC is quite expensive in the long run when compared to hiring professional support for SEO.

Scope of the Marketing Exercise and Budget

PPC expenses vary based on the exact position of your advertisement on the SERP as well as the trending keywords against which you want the advert to be displayed. This technique is usually used short-term to simply get the attention of the users to your website and is then supplemented with other natural SEO techniques such as content creation, link building, and social media optimization to yield results in the long run. PPC is especially useful for new websites, and those looking to promote seasonal or occasional offers, discounts, sales and other such events that are valid only for a limited time frame.

Long-term PPC is advisable only if the returns outweigh PPC expenses, but you will have to note that you will be spending quite a bit on experimenting with the technique before you learn the ropes.

Conversion rates with systematic organic SEO are bound to be relatively higher than short-term PPC rates. Building trust, quality inbound links, and relevant, unique content right from the very launch of your website will make the site both user and search engine friendly in the long run, to give a high rank and increased traffic. Optimum use of PPC to quickly jog the user’s memory occasionally will help trigger a revisit and spike traffic short-term. Both these techniques go hand-in-hand to improve traffic, but website / marketing purpose and budget are the factors that you should consider while opting for either one of them.

About Guest Blogger

Brianne is a blogger by profession. She loves writing on technology and luxury. Beside this she is fond of gadgets. Recently an article on luxury yacht attracted her attention. These days she is busy in writing an article on aphelion.

Make a custom 404 page for Blogger

noreply@blogger.com (nhamngahanh) — Mon, 26 Mar 2012 17:09:00 +0000

Several days ago ,Blogger team announced new SEO functions for Blogger after a long time waiting :D These functions are grouped in Meta Tags, Errors and Redirections, and Crawlers and Indexing.In Redirections group,we got 404 page function and redirect dead links .
Now in this post ,I will show you how to create a custom 404 page for all Blogger templates and Simplex's templates .

Demo here

Here are steps for making this 404 page

1, Read this step if you are using one of Simplex's templates .
If you apply all instructions in internet for creating a custom 404 page for Simplex templates,you will see nothing appear.
To fix this ,make a search for this line

<b:includable id='main' var='top'>

The search result will look like this

<b:includable id='main' var='top'>
..........code here .blah blah blah......
</b:includable>

Add this code right after the line we search

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

<b:include data='top' name='status-message'/>

</b:if>

We make the code look like this

<b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == "error_page"'>
                        <b:include data='top' name='status-message'/>
                    </b:if>
..........code here .......
                           </b:includable>

What does this code mean ? it means if the page is not found , Blogger will call the includables status-message (<b:includable id='status-message'> ) which showing error message ( for more information on includables ,what are they and what they do ? you can read this post )

Keep reading if you are using SimplexEnews template. Skip for other Simplex's templates

Because the includables for showing 404 message ( <b:includable id='status-message'> ) were changed for making breadcrumb bar ( this feature is only on Enews template ^^ ) so we need to fix this includable for showing both of breadcrumb bar and 404 error message .

Find this code

<b:includable id='status-message'>
                                <b:if cond='data:navMessage'>
                                     <div id='breakcrumb' style='display:none'>
                                         <data:navMessage/>
                                    </div>
                                 </b:if>
                            </b:includable>

And change it to

<b:includable id='status-message'>
                                <b:if cond='data:navMessage'>
                                     <div id='breakcrumb' style='display:none'>
                                         <data:navMessage/>
                                    </div>
                                    <b:if cond='data:blog.pageType == "error_page"'>
                        <div class='status-msg-wrap'>
                                     <div class='status-msg-body'>
                                        <data:navMessage/>
                                    </div>
                                    <div class='status-msg-border'>
                                         <div class='status-msg-bg'>
                                             <div class='status-msg-hidden'><data:navMessage/></div>
                                        </div>
                                    </div>
                                </div>
                                <div style='clear: both;'/>
                    </b:if>
                                </b:if>
                            </b:includable>

2, Now this step is for you all :D both of Simplex's templates and other templates
Go to Blogger Dashboard - > Search Preferences -> Custom Page not found -> click on Edit and add the content for your custom 404 page to the text box . You can add HTML code to this box so feel free to add anything you want ,for example : a cool picture ,a search box ,or a link ...
Here is what I did for SimplexDesign : A picture for 404 message and a small text ask the readers if they can back to homepage and search again .

If you want to make a 404 page with a picture ,the content of page can be something like this

<img src="link to your 404 picture">
Page not found ,back to Homepage

A 404 page with a search box ,the content of page can be something like this

<h3>Your requested page was not found</h3>
<p>Sorry, we cannot find the page that you are looking for. It might have been removed, had its name changed, or is temporarily unavailable.<br/>
Please check that the Web site address is spelled correctly.</p>
<b>Other things to try:</b><br/>
<ul>
<li>Go to our <a href="/">home page</a>, and use the menus or links to navigate to a specific post.</li>
<li>
<form method="get" action="/search">
<table width="100%">
<tr>
<td><input type="text" style="width:95%;padding:2px;" value="Search this blog.." onfocus="if (this.value == "Search this blog..") {this.value = ""}" onblur="if (this.value == "") {this.value = "Search this blog...";}" name="q"></td>
<td><input type="button" Value="Search"></td>
</tr>
</table>
</form>
</li>
</ul>

3,After two steps above ,you can type a wrong URL in your blog and see what is displayed .
Do you see your custom error message ?Does it has a gray background and a black border ?
Yes ,we can add more CSS to make the border and gray background disappear
Find the tag </head>

And add this code right before

<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
</style>
</b:if>

Now go back and see what happen to your 404 page . Is this what you want ?

You can custom the 404 page as you want by adding your own CSS in step 3 or add your own HTML in step 2 .

That's all for a custom 404 page .Please do backup before making any change . If you are using a Simplex template ,please pay attention to step 1 and finish it before move to step 2 and 3 .

SimplexGameZone - magazine template for game site

noreply@blogger.com (nhamngahanh) — Thu, 15 Mar 2012 04:11:00 +0000

(A new update for this template has been released. Download link has been changed to newer one . For more detail on this update,you can check at this page )

It's been a long time since SimplexLinepress came out to you all . I was very busy ,so I couldn't publish any template . But when everything is fine ,it's time for a new template . In this post ,I want to show you the blogger version of Gameup template from Magazine3.com : SimplexGamezone . Yes, another magazine template .

Demo | Mirror | Download jquery-ui.js - Mirror

How to install this template

1,Download template file

2,Download the jquery-ui.min.js file

To download these files ,click on the link . It open a new browser window . Click Save page as. Choose the place which you want to save and click on Save as

3,Upload this js file to your host . I have no hosting so I can't host it for you .

4,Open template in a word editor such as Notepad++

5,Find this code

Replace .../jquery-ui.min.js to the url of jquery-ui.min.js file which you hosted .

6,Find this code

<b:widget id='HTML6' locked='false' title='socialnetwork' type='HTML'>
                                <b:includable id='main'>
                                    <div class="headerbookmark">
                                        <div class="headerbookmark1">
                                            <a href=""><img src="http://2.bp.blogspot.com/-GFXAS4YIgT4/T2FJiiTQzcI/AAAAAAAAARI/-y_-KEKhP6w/twitter.png" alt="" height="36px" width="36px"/></a>
                                        </div>
                                        <div class="headerbookmark1">
                                            <a href=""> <img src="http://2.bp.blogspot.com/-1QmKHZfI7cQ/T2FJhiyLCRI/AAAAAAAAARE/2ysHUPeri9Q/facebook.png" alt="" height="36px" width="36px"/></a>
                                        </div>
                                        <div class="headerbookmark1">
                                            <a href=""><img src="http://2.bp.blogspot.com/-Y9u6J796JoA/T2FJjN3wU6I/AAAAAAAAARQ/Ihd4udczM_o/yt.png" alt="" height="35px" width="36px"/></a>
                                        </div>
                                    </div>
                                    <div class="clr"></div>
                                </b:includable>
                            </b:widget>

Add the url of your social networks to this code .

7,To edit the main menu

Find this code

<div class="menu-header">
                 <ul id="menu-gameumne" class="menu">
                    <li><a href="">Home</a></li>
                    <li><a href="">Category</a></li>
                    <li><a href="">Category</a></li>
                    <li><a href="">Category</a></li>
                    <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>
            </div>

Add link to categories to menu code above .

Link to category has structure like this
http://xxx.blogspot.com/search/label/category_name

8,Save template and upload it to Blogger

9,Go to Dashboard ->Setting ->Other - > Allow Blog Feed and change feed mode to Full

10,Go to Dashboard -> Layout

11,To add logo

Click on logo widget

Add the url of logo to widget content as structure bellow

12,To add content to newsticker

Click on headerticker widget
Add the category which you want to show posts in newsticker

13,To add content to slider

Click on slider widget

Add name of category which you want to show latest post in slider in widget content

14,Do the same for thepart1,thepart2,thepart3 ,latestupdate widgets .

14,To add the ad

Click on small ad widget

Add the ad code into widget content .

Do the same for other ad widgets

15,There's many place which you can add widget in this template .
You can add/remove them as you want .

Save changes . Ok ,you are done .
Installing this template is not different to other templates from SimplexDesign ,so If you familiar to others ,it only take you a few minutes .
I added the download link for js file . Because many of you complaint on 110mb.com hosting downtime . I hope with this js file and your host ,it can be much more easier .
I publish the template files and js file on dropbox website . So anytime I make a changes in template ,for fixing errors or doing something else ,this patch will automatically updated ,and you can get the latest updates with the same link ,don't need another download link . I will try to publish other templates to dropbox folder in future .
That's all for this template . Hope it helpful to you . Free to leave me comments :"D

8 tips for increasing blogger's loading speed

noreply@blogger.com (nhamngahanh) — Mon, 05 Mar 2012 09:04:00 +0000

Many peoples complaint about their blog loading speed . 'Slow' is the term that I heard so much . So in this post ,I want to tell you some tips for increasing the loading speed .

1,Host javascript files in your host or Blogger template itself
Most of templates from SimplexDesign use a lot of javascript . Because blogger provide some APIs for designer ,so using javascript is the only way to masking -up the homepage . Javascript are also used for special effects in site ,for example sliders,tabs . In many Simplex's templates ,I used 110mb.com for hosting javascript files . It's a free hosting but not stable . Sometimes it downs ,all the blog that javascript files hosted in 110mb.com will be affected . So I suggest you all host javascript by yourself or host them in blogger template itself if you can't afford a hosting . If your site has a lot of traffic ,a host that support CDN technology is a good choice .

2,Remove unnecessary code
I checked many sites that report error ,they add a lot of codes, ad code ,toolbar ,tooltip ... These codes increase the loading time ,some of them conflict to existing scripts in template and make template not working properly .

3,Remove unnecessary widgets
Widgets can increase your loading time the way you've never thought .Believe it or not ,some widgets in blogger widget list is not from Google Blogger team ,it was built by bloggers ,and they also use javascript :D

4,Reduce social media buttons
Social media buttons are also use javascript for taking post url when page load ,more button ,more script to load . So I suggest you all keep popular social media buttons only ,Facebook ,Twitters ... or the networks you use the most . Use addthis.com service and keep the number of button in the minimum ,I think it will be better .

5,Avoid extra comment systems
Disqus or Facebook comment system can be modern comment systems with many functions ,but they are third party services ,all the comments and comment form are stored/loaded from remote servers . What happen if this service is busy or out of orders ? Many times ,I see facebook comment struggling in loading and then stop with a blank canvas ,no comment,no form displayed .

6,Load less posts
Another question that I see a lot . People want to increase the number of posts in archive pages ,increase the number of post sections in homepage ... Should we load more post and make blogger processing more data ,make client browser process more javascript ? Web browser can be stopped from working, go to 'idle' status if it has to process a lot of javascripts . I often meet this error in working with Firefox (a good browser but eat a lot of RAM and CPU processing )

7,Use default 'readmore' function
All Simplex's templates integrated 'auto readmore' function to create post summary with image for each post in homepage/archive page . But this script can be passed if we use Blogger default 'readmore' function . What is the difference ? The 'readmore' from blogger process data in server and send the result to client computer . 'Auto readmore' funtion use javascript for processing data in client computer . Your computer or Google server is more power ? I think you get your own answer .

8,Optimize images before posting
Images is the largest part of every website . Optimizing images before posting , reduce the number of images will make your blog load faster ,especially for template such as Simplex Portfolio ,Simplex Photography 2 ...

Here are 8 tips for increasing loading speed of Blogger blog . I hope it helpful to you . Feel free to leave comments and click like if you think it interesting :D Thanks for your support :D

Colorful Popular Post widget

noreply@blogger.com (nhamngahanh) — Fri, 17 Feb 2012 02:23:00 +0000

Popular Post widget has been published by Blogger long time ago . A helpful widget that show the most viewed posts in blog . In this post ,I will show you how to style this widget ,add colors to this one to make it look nice and exciting :D

This post contain Blogger API code ,CSS and a little of Javascript ,so it will be easier if you are familiar to them . Please read my posts on Blogger API to understand Blogger API and it structure , the 'section' and 'widget' code . If you are not sure on what is going on ,pls do backup template ,it will be helpful in case of any error .

Demo here

How to do it

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

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

.mostpopular {

}

.mostpopular_li {

}

.mostpopular_li.color0 {

}

.mostpopular_li.color1 {

}

.mostpopular_li.color2 {

}

.mostpopular_li.color3 {

}

.mostpopular_li.color4 {

}

.mostpopular_li.color5, .mostpopular_li.color6, .mostpopular_li.color7, .mostpopular_li.color8, .mostpopular_li.color9, .mostpopular_li.color10, .mostpopular_li.color11, .mostpopular_li.color12, .mostpopular_li.color13, .mostpopular_li.color14, .mostpopular_li.color15 {

}

a.barlinko {

}

a.barlinko:hover {

}

.barco {

}

.mostpopular_li img {

}

a.thethingwithc {

}

3,In template ,choose the position where you want to insert this widget ,and then add the code

<b:section id='sidebar' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
                                   <div id='sidebartitlewrapper'>
                                         <b:if cond='data:title'><h3><span><data:title/></span></h3></b:if>
                                   </div>
                                   <div class='sectioncont'>
                                         <ul class='mostpopular'>
                                             <script type='text/javascript'>
                                                 //<![CDATA[
                                               var i=0;
                                               //]]>
                                           </script>
                                             <b:loop values='data:posts' var='post'>
                                                 <script type='text/javascript'>
                                                     //<![CDATA[
                                                       document.write ('<li class="mostpopular_li color'+i+'">');
                                                       var i= i +1;
                                                   //]]>
                                               </script>
                                                  <a class='barlinko' expr:href='data:post.href'><data:post.title/><data:post.id/></a>
                                               <span style='display: inline-block;width:100%;'>
                                                     <span style='float: left;font-size:10px;color:#f5f5f5;'> </span>
                                                   <span class='cb'/>
                                               </span>
                                               <script type='text/javascript'>
                                                     //<![CDATA[
                                                          document.write ('</li>');
                                                    //]]>
                                               </script>
                                           </b:loop>
                                       </ul>
                                   </div>
                                   <b:include name='quickedit'/>
                               </b:includable>
</b:widget>
</b:section>

Insert this code into sidebar as other script . Do not insert in other section element .For the question what 'section' is ,pls read this post

Save changes and go back to Dashboard .

4, Click on View blog to see the result . We need some work here
Click on the wrench icon in the right corner of widget

I marked it with a circle .
A dialog will display . Change the setting as picture bellow

Save settings .
That's all for this widget . Hope it works ^^

Enable Threaded Comment in Simplex's templates

noreply@blogger.com (nhamngahanh) — Thu, 02 Feb 2012 07:21:00 +0000

Newer version here
~~Blogger official support threaded comments . You can see the demo in SimplexDesign blog ^^ .~~
I think it's better than Blogger default comment ,and more convenient than embedded comment systems such as Disqus , IntenseDebate ...In this post ,you will learn how to enable this feature in Simplex's templates

~~To enable this function in Simplex's templates , you can follow these steps :~~
~~1,Go to Dashboard - > Template - > Edit HTML~~
~~Check on Expand widget template~~

~~2,Find this line~~
~~lt;b:include data='post' name='comments'/>~~
~~And change it to~~
~~lt;b:include data='post' name='threaded_comments'/>~~

~~3,Save template .~~
~~Ok ,you can see the threaded comment system work in your blog .~~

~~4,To make the threaded comment look like what is in SimplexDesign ,you can paste this code right before <body> :~~

~~<style>~~
~~/*------------- START Blogger Threaded Comments by www.ravisaive.in -------------*/~~
~~.comments {~~
~~clear: both;~~
~~margin-top: 10px;~~
~~margin-bottom: 0px;~~
~~line-height: 1em;~~
}
~~.comments .comments-content {~~
~~font-size: 12px;~~
~~margin-bottom: 16px;~~
~~font-weight: normal;~~
~~text-align:left;~~
~~line-height: 1.4em;~~
}
~~.comments .comment .comment-actions a {~~
~~display: inline-block;~~
~~margin: 0;~~
~~padding: 1px 6px;~~
~~border: 1px solid #C4C4C4;~~
~~border-top-color: #E4E4E4;~~
~~border-left-color: #E4E4E4;~~
~~color: #424242 !important;~~
~~text-align: center;~~
~~text-shadow: 0 -1px 0 white;~~
~~text-decoration: none;~~
~~-webkit-border-radius: 2px;~~
~~-moz-border-radius: 2px;~~
~~border-radius: 2px;~~
~~background: #EDEDED;~~
~~background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );~~
~~background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );~~
~~font: 11px/18px sans-serif;~~
~~padding:2px 8px; margin-right:10px;~~
}
~~.comments .comment .comment-actions a:hover {~~
~~text-decoration: none; background:#fff; border:1px solid #5AB1E2;~~
}
~~.comments .comments-content .comment-thread ol {~~
~~list-style-type: none;~~
~~padding: 0;~~
~~text-align: none;~~
}
~~.comments .comments-content .inline-thread {~~
~~padding: 0.5em 1em;~~
}
~~.comments .comments-content .comment-thread {~~
~~margin: 8px 0px;~~
}
~~.comments .comments-content .comment-thread:empty {~~
~~display: none;~~
}
~~.comments .comments-content .comment-replies {~~
~~margin-top: 1em;~~
~~margin-left: 40px;   font-size:12px; background:#EBF5FE;~~
}
~~.comments .comments-content .comment {~~
~~margin-bottom:16px;~~
~~padding-bottom:8px;~~

}
~~.comments .comments-content .comment:first-child {~~
~~padding-top:16px;~~
}
~~.comments .comments-content .comment:last-child {~~
~~border-bottom:0;~~
~~padding-bottom:0;~~
}
~~.comments .comments-content .comment-body {~~
~~position:relative;~~
}
~~.comments .comments-content .user {~~
~~font-style:normal;~~
~~font-weight:bold;~~
}
~~.comments .comments-content .user a {~~
~~color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;~~
}
~~.comments .comments-content .icon.blog-author {~~
~~width: 18px;~~
~~height: 18px;~~
~~display: inline-block;~~
~~margin: 0 0 -4px 6px;~~
}
~~.comments .comments-content .datetime {~~
~~color: #999999;~~
~~float: right;~~
~~font-size: 11px;~~
~~text-decoration: none;~~
}
~~.comments .comments-content,~~
~~.comments .comments-content .comment-content {~~
~~margin:0 0 8px;~~
}

~~.comment-header {background-color: #F4F4F4;~~
    ~~border: thin solid #E6E6E6;~~
    ~~margin-bottom: 5px;~~
    ~~padding: 5px;~~
}
~~.comments .comments-content .comment-content {~~
~~text-align:none;~~
}
~~.comments .comments-content .owner-actions {~~
~~position:absolute;~~
~~right:0;~~
~~top:0;~~
}
~~.comments .comments-replybox {~~
~~border: none;~~
~~height: 250px;~~
~~width: 100%;~~
}
~~.comments .comment-replybox-single {~~
~~margin-top: 5px;~~
~~margin-left: 48px;~~
}
~~.comments .comment-replybox-thread {~~
~~margin-top: 5px;~~
}
~~.comments .comments-content .loadmore a {~~
~~display: block;~~
~~padding: 10px 16px;~~
~~text-align: center;~~
}
~~.comments .thread-toggle {~~
~~cursor: pointer;~~
~~display: inline-block;~~
}
~~.comments .continue {~~
~~cursor: pointer;~~
}
~~.comments .continue a {~~
~~display: inline-block;~~
~~margin: 0;~~
~~padding: 1px 6px;~~
~~border: 1px solid #C4C4C4;~~
~~border-top-color: #E4E4E4;~~
~~border-left-color: #E4E4E4;~~
~~color: #424242 !important;~~
~~text-align: center;~~
~~text-shadow: 0 -1px 0 white;~~
~~text-decoration: none;~~
~~-webkit-border-radius: 2px;~~
~~-moz-border-radius: 2px;~~
~~border-radius: 2px;~~
~~background: #EDEDED;~~
~~background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );~~
~~background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );~~
~~font: 11px/18px sans-serif;~~
~~padding:2px 8px; margin-right:10px;~~
}
~~.comments .comments-content .loadmore {~~
~~cursor: pointer;~~
~~max-height: 3em;~~
~~margin-top: 3em;~~
}
~~.comments .comments-content .loadmore.loaded {~~
~~max-height: 0px;~~
~~opacity: 0;~~
~~overflow: hidden;~~
}
~~.comments .thread-chrome.thread-collapsed {~~
~~display: none;~~
}
~~.comments .thread-toggle {~~
~~display: inline-block;~~
}
~~.comments .thread-toggle .thread-arrow {~~
~~display: inline-block;~~
~~height: 6px;~~
~~width: 7px;~~
~~overflow: visible;~~
~~margin: 0.3em;~~
~~padding-right: 4px;~~
}
~~.comments .thread-expanded .thread-arrow {~~
~~background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;~~
}
~~.comments .thread-collapsed .thread-arrow {~~
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
~~border: 1px solid #DDDDDD;}~~
~~.comments .avatar-image-container img {~~
~~width: 36px;~~
}
~~.comments .comment-block {~~
~~margin-left: 48px;~~
~~position: relative;~~
}

~~/* Responsive styles. */~~
~~@media screen and (max-device-width: 480px) {~~
~~.comments .comments-content .comment-replies {~~
    ~~margin-left: 0;~~
}
}

~~/*------------- End of Blogger Threaded Comments by www.ravisaive.in -------------*/~~
~~</style>~~

~~This CSS snipet is not from me . It's belong from www.ravisaive.in . So please keep the credit line in this snipet .~~
~~That's all . Hope it helpful to you all :D~~

New comment pagination - solution for posts with 200+ comments

noreply@blogger.com (nhamngahanh) — Wed, 25 Jan 2012 10:05:00 +0000

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 ? In the picture above ,I marked a circle around comment pagination .
So what is the solution for posts with more than 200+ comments ?

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

noreply@blogger.com (nhamngahanh) — Mon, 26 Dec 2011 03:51:00 +0000

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>

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

After this line ,add script of looped slider .

<script src="your_host............./loopedslider.js" type="text/javascript"></script>

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

<script>

$('.slides1').cycle({

fx: 'fade',

speed: 'slow',

timeout: 3000,

pager: '.pagination'

});

</script>

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

noreply@blogger.com (nhamngahanh) — Fri, 23 Dec 2011 03:24:00 +0000

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

2, Christmas Icon Sets

3, 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

noreply@blogger.com (nhamngahanh) — Mon, 19 Dec 2011 07:40:00 +0000

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

noreply@blogger.com (nhamngahanh) — Tue, 06 Dec 2011 03:11:00 +0000

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

noreply@blogger.com (nhamngahanh) — Wed, 23 Nov 2011 03:51:00 +0000

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

<script type='text/javascript' src='js/jquery.js'></script>

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

noreply@blogger.com (nhamngahanh) — Thu, 10 Nov 2011 07:47:00 +0000

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

<img src="your logo url"/>

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

noreply@blogger.com (nhamngahanh) — Mon, 24 Oct 2011 04:27:00 +0000

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 .

noreply@blogger.com (nhamngahanh) — Mon, 17 Oct 2011 03:46:00 +0000

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

<link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css' />

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>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(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 .

SimplexDesign - free premium blogspot template

New customization Blogger threaded comment

Some Basic Principles and Techniques for Web Site Design

Layout

Color

Typography

Navigation

Usability

Clarity

Consistency

About guest blogger

New blogger interface and error when installing new template

7 Essential Design Elements of E-Commerce Email

1. Visual Brand Relevance

2. Purpose &amp; Call-To-Action

3. Cohesive Theme

4. Descriptive Headline

5. Enticing Links

6. Obvious Links or Buttons

7. Consumer Focus

About Guest Blogger

Update for SimplexGamezone template

Download version 2

How to Generate Backlinks Without Dabbling in the Dark Arts

Guest posting on other blogs

Video backlinks

Contributing to online communities

Getting involved with social media

About guest blogger

SimplexBigblue - New template for pro blogger

Download

How to install this template

Note :

Top 5 Tips to Increase Conversion rate on your ecommerce website

1. Simplify Navigation

2. Only Ask The Right Information!

3. Develop a Bond of Trust

4. Maintain a Clear Returns Policy

5. Offer Easy and Different Payment Mediums

About guest blogger

Best way to Study the Value of a Link

Type of link

Anchor text

The age of the link page

Incoming and outgoing links

About guest blogger

How to Optimize Your Blog

Use popular keywords

Use keywords in the article

Use relevant photographs

Make it easier to subscribe to

Allow people to leave comments

SEO vs. PPC, which is the best to Increase traffic to your site

Purpose of the Website

Scope of the Marketing Exercise and Budget

About Guest Blogger

Make a custom 404 page for Blogger

Here are steps for making this 404 page

SimplexGameZone - magazine template for game site

How to install this template

8 tips for increasing blogger's loading speed

Colorful Popular Post widget

How to do it

Enable Threaded Comment in Simplex's templates

New comment pagination - solution for posts with 200+ comments

How it work

Create a video slideshow in sidebar

How to do ?

Christmas icon packs for web designer in holiday season

1,Free Christmas Icons

2, Christmas Icon Sets

3, Christmas icons

Snowmen Icons

Winter Holiday Icons

Xmas Icons

Comment

Christmas Mini Pack

Christmas Icons

Christmas Social Icons

Holiday Seasonal Icons

2. Purpose & Call-To-Action