SimplexAuto - my Blogger template for Auto blog

Note : If your slider can't work ,you can download the fixed version with download link provided in this post ,or you can see here for solution  
 
Another template for you who want to make an blog on auto . It's also good for other niches (of course ^^ ) . Now let's take a look on screenshot and live demo



Live Demo | Download

How to install this template ?
1,Download this template . This template package contain only one xml file because I uploaded all images and javascript files to ImageShack and Google Code ,so you don't need to worry about bandwidth .
2,Upload template to Blogger .
3, Go to Page elements ,you will see this screen :

4,To add your own logo ,click on edit link in logo widget ,and paste your logo as this structure  :

<img src="your own logo url"/>
The best size for logo is 300x90 pixels .
5,To add your advert to the header ,click on edit link in Ads widget and paste your ads script .
The size for advert is 468x60 .
6,To add your categories to menubar ,click on edit on menu widget and add link to each category in your blog . For example ,link to a category (or label) in blogger look like this : http://yourblog.blogspot.com/search/label1 . So in menu widget

enter http://yourblog.blogspot.com/search/label1 in New Site URL field ,and enter ' label1 ' in New Site Name field . When you finish ,click on save .
7,Feature widget is the slider showed in homepage . To show posts in a category in slider ,click on edit in feature widget and add label of this category in widget content . For example ,you want to show posts in category ' label1 ' in slider in homepage ,click on edit link in feature widget and enter 'label1' in feature widget content .
8,Right ads widget is for ads which will be show in right sidebar ,you can click edit and add your ads script .
9,Blogroll and category widget you can do as menu widget .
10,There are many place in this template you can add your own widget ,so I think it will satisfy you .
How to use ?
This template support video post and normal blog post .
To post a video ,made this post as this structure :

your-youtube-video-link-endofvid

[starttext]

video description 

[endtext]

and add label video for your post.
For example ,I want to create a video post with youtube video at this address : http://www.youtube.com/watch?v=e5wfYPXAjl8 ,here is what I do :
Go to Dashboard - > Posting ->New Post
and enter post content like this

http://www.youtube.com/watch?v=e5wfYPXAjl8endofvid

[starttext]

Textdescription .....blah blah blah ...

[endtext]

add the label 'video' in Labels field .
To make a blog post without video ,do as normal .
That's all .

I like this clean and minimalist ,but how about u? Please tell me what you think about this template?

Host your javasript files with Google code

In my posts on jquery and javascript for Blogger blog ,I always recommend hosting javascript file in Google code for speed and reliable . But some of you may ask : how to use Google code ? So this is the purpose of this post : How to host your files in Google code .
Google code is a service of Google ,they have disk space for developer host files in open source projects .Like any other services from Google ,it's free ,fast ,and reliable .


To host files in Google ,at first ,you need to go to this address . After Login using your Google account (by clicking on Sign in to create a project) , you will see link for Create a new project bellow . Click on this link

.A new page appear . Fill the information for Project name , Project summary ,and description . After full fill all information in this page ,click on Create project .

- A new project is created in Google Code . So now ,it's time for us to uploading files .In Project home page ,click on Downloads tab .

-In Downloads tab ,click on New Download . A form for uploading file appear . Click on Browse to selecting file which you want to host in Google code . After selecting file ,type something for summary in summary field ,and labels . When you are done,click on Submit file .

When uploading progress is finished , it will back to download page ,where you see the files you uploaded .

Now ,to use these file in any website ,just copy its URL by right click on file name in Download page and select Copy URL , and paste the link to where you need . For example ,you may see the code like that <script src="your js file"></script> ,change "your js file" to URL of file which you hosted in google code . That's all
Enjoy it ^^

SimplexTube - my new template for video blog

There's a newer version for SimplexTube ,faster and support more video hosting service .Check it out here

Update : If slider can't work ,you can download fixed version with download link provided in this post or  see here for solution if don't want to re-install this template 

In comments in my blog,some of them asked me for a video template like BloggerTube . But I want to try a new way ,unlike BloggerTube . So here is my new template named SimplexTube . It's a template for personal blog , support video and video thumbnail ,not a video gallery .
You can see the screenshot here







Live Demo | Download


How to install this template ?
1,Download template . Because I uploaded all images to ImageShack and scripts to Google code ,so I don't included them in template package . ImageShack and Google code are unlimited bandwidth services at this time .
2,Open template file (xml file ) in any word editor you have . Find this code
<div style="float: right; width: 120px;" id="menutop">
under this ,you will see a code as bellow :

<div style="float: left; margin-right: 6px;">

                         <a target="_blank" title="Follow me on Twitter" href="http://twitter.com/dinhquanghuy">

                             <img src="http://r.fm/r/corners/twitter.png"/>

                         </a>

                     </div>

                     

                     <div style="float: left; margin-right: 6px;">

                         <a title="Digg me" target="_blank" href="">

                             <img src="http://r.fm/r/corners/digg.png"/>

                         </a>

                     </div>

                     

                     <div style="float: left; margin-right: 6px;">

                         <a href="your link here" rel='external dofollow' target='_blank'>

                             <img src="http://r.fm/r/corners/su.png"/>

                         </a>

                     </div>                    
                    
change the text which I marked red to your social network account ( Twitter ,Digg,Stumble ...)
After change ,save template .
3,Upload template to Blogger .
4,Go to Dashboard -> Layout ->  Page Elements .
you will see this screen

5, To Change the logo ,click on Edit and change the add the url of logo as structure bellow
<img src="your logo url"/>
6,To add categories to menu ,click on menu widget and add link to each category in widget content .
7,Page widget will show pages in your site automatically ,so you don't need to work with it .
8,To add adverts ,click on Ads widget and paste your ads script (Adsense or your own ads ) in widget content .
9,There's a category widget on the right sidebar ,click on edit and add link to your categories like what we do with menu widget .
10,In other place where appear "add a widget" ,you can add any widget you like .
How to use
This template has two sections ,Video and Blog . Video for showing videos ,and Blog for showing normal post ( like template SimplexPortfolio of mine )
1,To create a video post ( mean a post with video and text description for that video ) ,post with structure bellow :

your-youtube-video-url-endofvid

[starttext]

text description goes here

[endtext]

And label the post  'video'
For example ,I want to create a video post with youtube video at this address : http://www.youtube.com/watch?v=e5wfYPXAjl8 ,here is what I do :
Go to Dashboard - > Posting ->New Post
and enter post content like this

http://www.youtube.com/watch?v=e5wfYPXAjl8endofvid

[starttext]

Textdescription .....blah blah blah ...

[endtext]

add the label 'video' in Labels field .
Click Publish Post . Ok ,we finish posting a new video to blog . You can see this post in homepage.
2,To post a normal article ,go to Posting ->New Post and write your content as normal . But remember to add label 'blog' at Labels field . This label will mark post as normal blog post and it will show your post in Blog Post style ( Not Video Post style ).
3,To show your post in slideshow at the top of homepage,add one more label 'feature' to the post .


That's the install instruction and how to use this template . At this time ,Simplextube template support only Youtube video ,so I will try to expand the range of supporting video service . I hope you like this template ,and remember to give me feedbacks .

SEO tip from Mashable

There are many tips for SEO / SERP ,and you can find them easily in internet . In this post ,I just want to add one more tip for you all .This tip is not from me , I got it from Mr Tinh Tran at eblogviet.com  . He wrote in Vietnamese ,so I translated and post it here for you all . I hope it helpful .



If you go to Mashable blog  and see posts, you may notice that they always use short URL for their article ,and the URL contain only main keywords . Title of article maybe long ,but URL always short and focus on main keywords . For example ,there's a post with title “9 Ways to Do Good With 5 Minutes or $25“ but the url is not /9-ways-to-do-good-with-5-minutes-or-25/ as default , it is only /social-good-micro-lending/ .You see ,the URL focus on main keywords .

So what is the secret beyond this tip ? when bots/spiders from search engines crawl a page to index ,they will find main keywords in this page ,start from url to page title ,and continue to the end of post . If your URL short and focus in main keyword, it will help the spiders decrease time to examine the post for indexing ,and make your site a better rank in search result .

How we apply this tip in Blogger ? Very easy ,my friends . At first , write a post title short and focus on main keywords . Publish your post . Now your post is published with a short and SEO friendly URL . After that ,you can back to Dashboard and choose Edit Post ,change the post title to any title you want and publish it again . The first url is still kept while the post title is changed as you want . That's all . It will take only 30s from you but quite good for SEO.

E-commerce Icons for web design

In web design , finding icons and other resource for designing is a necessary task.We got icons for website ,for RSS ,and now ,icon sets for E-Commerce .This is the list of high-quality icon sets that I found on Webdesignledger ,and I want to re-post it here for you all because I think it maybe helpful . Enjoy it ^^

Checkout Process Icons

Shopping Bag

Money Back Guarantee Icon Set

Free eCommerce icons

Shop Cart Icons

Chalkwork Payments

CSS Globe e-commerce icons

High-Quality E-Commerce Icons

Weby Icons

Milky

Siena

Finance

Basket

Shopping Cart and Basket

Credit Cards

Fresh

Money Icons

E-commerce Icons

Shopping Cart

Business Icons

Nivo Slider - an awesome jquery slider with 9 unique transition effects

Inspired by Ronny Dee 's comment in my blog ,I want to introduce Nivo Slider jquery to you . It's an awesome Jquery plugin for slider with 9 unique transition effects ,and it look very professional like any Flash slide show .One of the most impressive slider I've seen .



you can see Live Demo here
 How about the effects? Cool? This plugin has been tested for most of popular browsers such as IE 7.0+ ,FireFox v3+ ,Chrome,Opera ,Safari ...so I don't think you will get trouble with browser when using this plugin .
Here is steps for install and use this plugin for your Blogger .

1, Download Nivoslider plugin from this site . Or you can download directly from this link .If you download this plugin from website ,you will see two version : production and development . Production is the version in which the code is encrypted for copyright protection . And the development is not encrypted . You can download both of them ,but development version is better .

2,Upload file nivo-slider.css and jquery.nivo.slider.js to a host . I recommend Google code for a speed and reliable hosting .

3,Create a HTML/Javascript widget in your Blogger blog .

4,Paste this code into widget content :

<link rel="stylesheet" href="your host .../nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="your host .../jquery.nivo.slider.pack.js" type="text/javascript"></script> 

The code above include Jquery framework and nivoslider plugin to your site .

5,Paste this code right after the code in step 3 :

<style>
#slider {
    position:relative;
    -moz-box-shadow:0px 0px 10px #333;
    -webkit-box-shadow:0px 0px 10px #333;
    box-shadow:0px 0px 10px #333;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
}
#slider a {
    border:0;
}
.nivo-controlNav {
    position:absolute;
    left:47%;
    bottom:-30px;
}
.nivo-controlNav a {
    display:block;
    width:10px;
    height:10px;
    background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:-10px 0;
}

.nivo-directionNav a {
    display:block;
    width:32px;
    height:34px;
    background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-32px 0;
    right:10px;
}
a.nivo-prevNav {
    left:10px;
}
</style>
This CSS code will add arrows and bullets icons for navigation in NivoSlider . It also stop flashing images before this plugin loads .

6,The code of slider content.Paste it after the code in step 5
<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://simplexdesign.blogspot.com"><img src="images/slide2.jpg" alt="" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
...............
</div>
As you see ,in slider content ,you can add links and caption to images .Modify them and add more if you want .

7,Make this plugin work by adding an initial code :

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
The initial code above is a simple one . Nivo slider has many options ,and here is the initial code with full option (and description for each option )
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random',
        slices:15,
        animSpeed:500,
        pauseTime:3000,
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:true, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){} //Triggers after all slides have been shown
    });
});
</script>
each line is an option ,and you can add ,modify value or remove for adding or removing option . For example ,the line "keyboardNav:true, //Use left & right arrows" mean it allow using right-left arrow button on keyboard for slider navigation . If you don't allow using keyboard ,set the value to "false" . 

8,Save the widget and see what we have ^^


A note for you : Size of displaying slider depend on size of "#slider" element and images in slider . For example : to make a slider which has width : 700px , you have to set the width of slider element to 700px  ; like this
#slider {
width:700px;
}
and use images which have the width :700px for fullfill the slider element . If you use a smaller image ,you will see the slider with smaller size .
That's all . I hope you will find something interesting with this plugin .
Here is list of showcase for this plugin ,you can take a look for inspiration ^^

Supporters:
Check out Hosting Observer – your guide to finding more
reliable web hosting plans online.

Build your online shop in Blogger using FatFreeCart

 

 In one of posts ,I wrote on how to build an online shop with SimpleCart . In this post ,I want to show you one more option for shopping cart in Blogger with FatFreeCart .Thanks KRKT (sorry I don't know your real name) for recommending this script to me .

FatFreeCart is a shopping cart developed by the team behind E-junkie shopping cart.It's built with jQuery, ThickBox, JSOD and E-junkie's e-commerce engine . It support Paypal and Google Checkout ,easy to integrate to any website or blog ( include Blogger ). FatFreeCart has two version , Free and Pro. But in this post ,I want to talk about Free version (free is always the best ^^)




You can see the live demo here

To set up an online shop in your Blogger using FatFreeCart ,you can follow steps bellow .
1, Go to this page ,and you will see a code generator for FatFreeCart . Fill all the fields for item's information .After done ,click on Create Cart code and you will see a code which is generated by FatFreeCart's code - generator .


2,Copy the code you get . Create a page in Blogger , click on Edit HTML and paste the code you get .
3,Save the page ,and you are done .
4,If you have more than one item to sell ,just go back to step 1 ,fill the fields for item's information and copy-paste the code right after the code of previous item in Blogger page .

You can modify the code by using CSS and HTML tags . It will make your shopping page blend into your site smoothly and look pro
In this free version ,FatFreeCart lack functions such as VAT ,location based ,discount ,inventory manager ... but I think this is still a good solution for selling something from your website or blog ,especially small blog.
I hope this helpful to you .

Don't forget to subscribe my blog for getting latest updates . Thanks