Make a forum for blogspot

Vanillaforums.com service is not free anymore . Please check before apply this to blog .

A forum is good a starting point for building community around your blog .But what tool do you use to create a forum ?
- you can buy a host and install a forum software on it ,then adding link to this forum from your blog
- you can build a discussion board with some free service in internet
- you can use discussion board in Facebook fanpage
in this post ,I will show you another way . We will use a third-party forum that provided by Vanilla .This forum can stand alone ,or it can embeded to your blogspot as a page . I will tell you about Vanilla and how to embed this forum to a page in your blogspot ,make it become an element of your blog .

I integrated Vanilla forum in the live demo of Simplex Enews template ,you can see it here

here is steps to install this forum to blogspot

1,Go to Vanilla site at this address . You will see there are some plans for you to choose ,one free and the others are not . Free plan is very simple ,it's like a discussion board and lack of options ,you have no storage space for files ,no custom domain and logo ,no custom HTML ... But in my opinion ,you should choose this plan first before going to higher (paid) plains .


2,Fill all field in the form ,and choose an address for your forum . Each forum in vanilla has an address and you can use this to access directly to your forum .


3,After registering ,it will lead you to the dashboard . In the left-hand of dashboard window ,you will see groups : Appearance , Users , Forum Settings,Addons and Import .
-Use options in Appearance group to make forum look as you want .
-Use options in Users group to manage users of your forum and set roles - permission in your forum
-Use options in Forum Settings for make categories for your forum ,set the spam filter and see the statistics .
-Use Import to import data from other forums software to your Vanilla forum .
-Use options in Addons group for manage addons in your forum ,and embed Vanilla forum to other sites .


4,To embeded your Vanilla forum to blogger , from Vanilla forum dashboard ,go to Embed Vanilla option in Addons group . In the textbox Forum <Embed> Code you will see the script for embeding forum to other sites .Copy this code to clipboard


5,Go to blogger and login to your blog . Go to Posting tab and click on Edit Pages to create a new page . Click on edit to add content to this page .
In page editor window,click on Edit HTML ,and paste the script of Vanilla forum (you've just copied to clipboard) to page content ,and then publish the page .Now Vanilla forum added sucessfully to a page in your blog .

6,A little tip for you : if size of your page smaller than size of vanilla forum ,Vanilla forum size can overlap elements in your blog or break the layout . To fix this ,you can add some code lines to page content in step 5 like this :
<style>
.forum {width:600px}
</style>
<div class="forum">
Vanilla forum script you copied in step 4
</div>
change the value 600 to the size of vanilla forum you want .

That's all for Vanilla forum .I hope this post helpful to you .

Simplex Aggregator 2 - News aggregator for blogspot

In a post several months ago ,I showed you my template Simplex News Aggregator ,a template that I developed base on Google feed Api and a script from DynamicHTML .This template will get news from many source and show them as time order in separated categories . But that template is very simple ,both of design and function ,so in this post ,I want to show you  Simplex News Aggregator 2 ,a template that comes with news aggregator ,support blogging ,page ,and widget .

Live Demo Download

Install Instruction

1,Download template file .

2,Open template in a word editor .

3,To change logo ,find this code :

.logo a { color:#b24a35; background:url(http://img818.imageshack.us/img818/9282/logolb.png) no-repeat; }

and change the text in bold to your logo url .

4,Here is the code of menu navigation

<ul id="nav">
                 <li><a class='name' expr:href='data:blog.homepageUrl'>Home</a>
                     <ul>
                         <li><a title="Sub Pages 1" href="">Sub Pages 1</a></li>
                         <li><a title="Sub Page 3" href="">Sub Page 3</a></li>
                         <li><a title="Sub Page 4" href="">Sub Page 4</a></li>
                     </ul>
                 </li>
                 <li><a href="http://simplexnetwork.blogspot.com/search/label/blog">Blog</a></li>
                 
             </ul>

You can add link to your categories to this menu .

5,Code of header description  :

 <div class="clearfix" id="header-in">
             
             <p class="description">This is a network of news ,resources and tutorial ,feel free to browse them and if you want ,you can submit your news to us ,and we will be very pleased to show it out</p>
         </div>

change it to the text you want .

6,Here is the code of each news categories in home page :

<li>
                     <h3><img width="16" height="16" src="http://digg.com/favicon.ico"/> Technology News</h3>
                     <script type="text/javascript">
                         var newsfeed=new gfeedfetcher("list1")
                         newsfeed.addFeed("NYT", "http://www.nytimes.com/services/xml/rss/nyt/International.xml")
                         newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/world")
                         newsfeed.filterfeed(5) //Show 5 entries, sort by date
                         newsfeed.init() //Always call this last
                     </script>   
                 </li>

               
I will explain this code line by line :
-<h3><img width="16" height="16" src="http://digg.com/favicon.ico"/> Technology News</h3>

• http://digg.com/favicon.ico : Icon of news category.
• Technology News : name of news category 

-  var newsfeed=new gfeedfetcher("list1")  List1 is the id of news category ,each id must be unique ,for example list1,list2,list3... if there are two categories with one ide ,there's nothing will be shown .

-    newsfeed.addFeed("NYT", "http://www.nytimes.com/services/xml/rss/nyt/International.xml")
      newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/world")
 These two lines will add news from sources (NYT and Yahoo News) to the news category in homepage . if you want to add news from other sources ,you can apply this structure :
      newsfeed.addFeed("Name of news source", "RSS link of news source")

- newsfeed.filterfeed(5) //Show 5 entries, sort by date this line specify the number of entry showed is 5 . You can increase this number to show more or decrease for less .
That's the code for showing news from news sources into one category in homepage . By understanding what these lines mean ,I hope you can modify them as you want . You can refer to my post on Simplex News Aggregator old version for more detail because the code for showing news in these two template are the same

7,When you browse blog posts in  my live demo ,you will notice the sidebar in the right hand . Here is the code for this sidebar :

<div id="sidebar">
                 <div class="col">
                     <h3><span>Categories</span></h3>   
                     <ul>
                         <li>
                             <a href="http://simplexnetwork.blogspot.com">Blog</a>
                         </li>
                     </ul>
                 </div>
             </div>

you can add the categories ,links you want to this sidebar .

8,Now ,you can upload template to Blogger .  There are many places for widget in this template ,and you can add or remove your own widget as you want .

9,That's all for this template .If you familiar to template from SimplexDesign ,you will see that very easy to editing template and make it show as you want ,you can also refer to other templates for more.

I hope this template will be helpful to you .

Merry christmas 2010 to you all .

11 web based editors with IDEs to code directly from your browser

There are many web based code editors out there, but getting by free and good ones is not that easy. After searching ,I found this list on SmashingApps website ,they are some editors that also recognize as IDEs .If your work get involved with coding ,but in sometimes ,you have to use another computer or need to work when you are far away from your home or office ,they are good replicas for you.

Kodingen

Kodingen is an Online Development Environment including Code Editor, Cloud Hosting, Database Administration, Collaboration, Web based access to file-system, Web based ftp & svn integration.

PHPanywhere

PHPanywhere is a web based free Integrated Development Environment or IDE for the PHP language, in other words it is an application that gives developers all the code editing capabilities they need to develop PHP applications online.

CodeRun Online IDE

CodeRun Studio is a cross-platform Integrated Development Environment (IDE), designed for the cloud. It enables you to easily develop, debug and deploy web applications using your browser. CodeRun Studio can be used instead or alongside your existing desktop IDE. You can upload existing code in order to test it in the cloud or for sharing with your peers.

Codeita

Codeita is a powerful, easy to use, cloud-based, web development environment.  It’s a powerful code editor, an advanced svg image editor, and an out of this world project management and collaboration tool. It allows users to code, develop, brainstorm, communicate and then publish projects and files to your web server.

Drawter

Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website’s code. It runs on every single web-browser which makes it really useful and helpful.

ecoder

ecoder is a simple, web-based code editor, which includes a file browser, file uploader, and tabbed system to allow multiple files to be edited at the same time. using this web-application developers can edit code directly online, real-time syntax highlighting is handled by textarea and keyboard short-cuts lend it the feel of a locally installed application.

ShiftEdit

ShiftEdit is an online IDE for developing PHP, Ruby, HTML, CSS and JavaScript with built-in (S)FTP.

jsFiddle

JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc.
Using this approach, JavaScript developers can very easily isolate bugs.

ideone

Ideone is something more than a pastebin; it’s an online compiler and debugging tool which allows to compile and run code online in more than 40 programming languages.

Amy Editor

Amy Editor is the online source code and text editor. It is implemented using the text-editing control of the Fry Framework in a pure JavaScript fashion, running inside your browser.

jsdo.it

jsdo.it is a website where you can write JavaScript, HTML5, CSS in your browser, and share it with you co-authors.

Simplex Newspaper II update : Why Google Friend Connect can't display in blog?

Several days ago ,I have a comment and an email from Simon Jose N who complaint that he can't use Google friend connect in template Simplex Newspaper 2 , it mean he can add this widget to blog ,but it can not display . After 1 days for searching in Google and digging in my template ,I find out that the reason is in template itself . In template ,I used one javascript framework Scriptaculous for Lightbox effect ,and some .js files related to this effect conflict to script of Google Friend Connect and it the reason why GFC can't display .

To fix this problem ,we can simply add this code before </body> :

<script>
window.JSON = {
parse: function(st){
return st.evalJSON();
},
stringify: function(obj){
return Object.toJSON(obj);
}
};
</script>

That's all . I applied this tip in my Simplex Newspaper II live demo and everything is ok . I hope it will work fine for you .
With this post ,I want to appologize for my late replying to Simon Jose N and all people who met this trouble .I know this error affect to your site . And I want to say "thank you" for error reporting . It will help us make template much better .

Wazala - shopping cart solution for everyone who using Blogger

Long time ago ,I told you about SimpleCart ,a solution for making an online shopping cart in Blogger . And now ,I want to show you Wazala ,a new service for shopping cart and online store in Blogger .Unlike SimpleCart you have to work with script ,code ...but with Wazala everything is every simple ,just copy and paste the code given to template ,and a shop ready to use . Other works such as add products ,manage orders ,shipping ,taxes... can be done via Wazala dashboard .


Wazala is not a free service but you can try this service for 15 days trials before upgrade to another package or cancel .
Live Demo in my blog   | Live Demo in Wazala homepage

Here is steps for making an online Store for your Blogger with Wazala

1,Go to Wazala website

2,Fill all your information into form .After finishing this step ,Wazala will send you a mail to verify your account . Go to your mail box ,open mail they sent to you and click the link in mail to verify . That's all . Now you have an account in Wazala .

3,Signin to your dashboard with Sign in link in the top right corner of Wazala website . The Dashboard or Store Manager page has 8 tabs ,5 tabs on the left side : Account ,Store,Products, Options,Get widget and 3 tabs on the right : Orders,Customers and Dashboards .

4,In 3 tabs on the right :

• Dashboard tab will give you an overview look on your shop ,with the value of sales in time ,number of orders
• Customers tab will give you information about people who buy your products .
• Orders tab will give you information on the orders that made via your online store and status of these orders .

5,In 5 tabs on the left :

• Account tab will show your personal information  ,the package you are using and link to upgrade your subscribtion  . You can also link your wazala account to Facebook ,Google and Yahoo for showing your shop information in these social networks .There's a link to Wazala fanpage ,and link to Wazala application in Facebook  . It mean you can use Wazala to sell goods in Facebook as an Facebook apps (like Facebook market store apps)
• In the Store tab ,you can set information for your shop such as shop address ,email ,phone .You can also customize your shop with your own logo ,background and labels .
• To add products to your shop ,you will use Products tab . There's a grid of products in your shop . To add new product ,click on New ,and fill all information about your product : name ,status ,description ,price ,tax,shipping ,images ,and other options . There are some options such as Downloads ( if you want to sell downloadable goods ) Inventory tracking ,and Coupon only valid if you upgrade your account .
• You will set the payment methods ,taxes , shipping and others related in Options tab . 
• And the last tab on the left Get widget will give you the code to add to your blog . You can see how your widget look before adding to your blog by entering your site address in preview on your website block and click to preview . If you finish ,you can copy the code given in Script Code textbox ,and go to Blogger Dashboard ,go to Design tab,then to Edit HTML and paste the script right before </head> .After that ,save template and you will see the shop showing in your blog .

That's all for Wazala shopping cart solution . In my opinion ,Wazala is a good solution for blogger who using platform like Blogger . You don't need to write codes ,worry about HTML .Just copy and paste the code . It's secure and fast with a well-organized dashboard ,very easy to use . I think if you are the people who want to set up an online store for many kind of goods or just want to sell something beside blogging , but have not enough time and money to choose a complex platform or hire coders ,buy templates ,hosting ,bandwidth ... ,this is solution for you . Wazala not only using in Blogger ,but also spreading your shop in Facebook (as a Facebook apps ,you can selling via Facebook ), and link to Google and Yahoo .
Trial time will expire in 15 days and you can cancel your subscribtion or upgrade to a higher package for your business . But believe me ,this is a good deal .

Infographic : How to make money on the web

While surfing some websites ,I found this infographic in Fastcompany website . It's very helpful for me to know what I can do to make money from websites .
Thanks Fast Company's Doogie Horner for making this infographic .
You can click on this image for larger size

Simplex Newspro - Template for magazine

Here is the template Simplex Newspro . It's a Blogger version of Newspro template from Gabfirethemes . I think it's good for a news portal and magazine .




Live Demo | Download


Do you like this ?

Here is steps for installing this template .

1,Download template file .

2,Open it in a word editor like Notepad++

3,To change logo ,find this code
<div id="logo" style="padding: 30px 0pt 0px 10px;">   
                 <a title="Simplex Newspro" href="">Simplex Newspro</a>
             </div><!-- /logo -->
and change the text in bold to your site name of your logo . If you have a logo ,you can replace the text with this <img src="your logo url"/>

4,To add your social network accounts ,find this code :
<ul>
                     <li>
                         <a href="/feeds/posts/default/" class="gab_rss">RSS for Posts</a>                         
                     </li>
                     <li><a title="" rel="nofollow" href="/feeds/comments/default/" class="gab_rss">RSS for Comments</a></li>
                     <li><a title="" rel="nofollow" href="" class="gab_email">Subscribe by e-mail</a></li>       
                     <li><a title="" rel="nofollow" href="http://twitter.com/dinhquanghuy" class="gab_twitter">Follow on Twitter</a></li>       
                     <li><a title="" rel="nofollow" href="http://facebook.com/simplexdesignblog" class="gab_facebook">Connect on Facebook</a></li>   
                 </ul>
and add links to your twitter ,feedburner and facebook account .

5,Here is the code of main menu :
<div id="navcats">
             <ul>
                 <li class="first current-cat"><a expr:href='data:blog.homepageUrl'>Home</a></li>
                 <li><a title="" href="/search/label/politic">Politic</a>
                     <ul class="children">
                         <li><a title="" href="/search/label/americas">Americas</a>
                             <ul class="children">
                                 <li><a title="" href="">Category</a></li>
                                 <li><a title="" href="">Category</a></li>
                                 <li><a title="" href="">Category</a></li>
                             </ul>
                         </li>
                         <li><a title="" href="/search/label/asia">Asia</a></li>
                         <li><a title="" href="/search/label/africa">Africa</a></li>
                         <li><a title="" href="/search/label/europe">Europe</a></li>
                         <li><a title="" href="/search/label/usa">USA</a></li>
                     </ul>                 
                 </li>                 
                 <li><a title="" href="/search/label/business">Business</a></li>
                 <li><a title="" href="/search/label/tech">Technology</a></li>                 
             </ul>
         </div>
        
modify this code with your categories and sub categories . Link to your category has structure : /search/label/your category

6,Find this code

label1 = "Analysis";
Title1 = "News Analysis";

label2 = "Americas";
Title2 = "Americas";

label3 = "Africa";
Title3 = "Africa";

label4 = "Asia";
Title4 = "Asia";

label5 = "Europe";
Title5 = "Europe";

label6 = "Usa";
Title6 = "USA";

label7 = "business";
Title7 = "BUSINESS";

label8 = "tech";
Title8 = "TECHNOLOGY";

label9 = "feature";
Title9 = "FEATURE";

label10 = "focus";
Title10 = "FOCUS";

and set value of labels from label1 to label10 to categories you want to show posts in home page . The position of each label is in picture bellow :

For example ,you want to show posts in category xyz in position of label 1,just change value of label1 from "analysis" to "xyz"

7,To add ad code into this template ,you can find in template these lines :

<!--place your ads here -->

<a href="http://simplexdesign.blogspot.com"><img src="http://img535.imageshack.us/img535/7039/300x250ads.jpg"/></a>

<!--end of ads code -->

or
<!--place your ads here -->
                 <a href="http://simplexdesign.blogspot.com"><img src="http://img36.imageshack.us/img36/9267/sdads468x60.png"/></a>
                 <!--end of ads code-->
and change them to your ad code . To avoid errors occuring when adding ad code to template ,you should encode your ad code at here before adding them to template

8,Save template and upload it to Blogger

9,Go to Page element ,you will see some widgets existed in footer . You can add content to these widgets : add links to feature link widget ,add text to about this site content ,add your Flickr id into Flickr stream widget content . You can also remove them if unecessary . This template has widget ready function ,so you can add your widgets in some positions .

10,Save changes .
That's all for this template . I hope you will see it helpful .

SimplexNewsadvance Update

if you are using my template Simplex Newspaper II ,here is the update for you . This update will make your template load faster ,specially with single pages and archive pages . And you can do this update within few minutes ,easy and simple .

Following 3 steps bellow :

1,find this line :

<div id="primaryTopWrapper">

and insert the following code right before the line you found :
<b:if cond='data:blog.url == data:blog.homepageUrl'>

2,find this line :
<div id="innerContent">
and insert the following code right before the line you found :
</b:if>
         
         <b:if cond='data:blog.url != data:blog.homepageUrl'>

3,find this line :
<div class="clear"></div>
         <div id="footerCatBar">       
and insert the following code right before the line you found :
</b:if>

That's all for the update .
We need this update because when loading single pages or archive pages ,Simplex Newspaper II template also load a part of homepage (included some javascript files) first , then hide it by using CSS . By inserting the code in 3 steps above ,we prevent parts of homepage loaded ,so this will increase the loading time for single pages and archive pages .