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
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 .
- 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 .
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 .
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>
- 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 .
Live Demo | Download
Here is steps to install this template :
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
- 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 .
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 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 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 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 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 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 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 is an online IDE for developing PHP, Ruby, HTML, CSS and JavaScript with built-in (S)FTP.
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 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 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 is a website where you can write JavaScript, HTML5, CSS in your browser, and share it with you co-authors.
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.
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 .
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 .
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 .
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
Thanks Fast Company's Doogie Horner for making this infographic .
You can click on this image for larger size
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 .
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 .
