Test Html Codes, Before Using Them On Your Blog.

This is for all of my blogger friends:

I am going to share an information with all of my friends, which may be very useful for all those who are “code junkies” and for all, who like change and keep on changing.

I have noticed that all of my blogger friends often try to change the look of their blog pages by installing some new codes and scripts to make it more attractive, informative and innovative.

Though thousands of free scripts for different uses and functions are available freely and can be installed in our blogs/ WebPages, but installing and removing a code itself is a painful process.

Usually, first you need to go to your dashboard (in case of using blogger or WordPress, or go to your control panel in care using personal domain) by signing in with your username and password. Then you will need to go to Layout>>Add a gadget>>Html/Java Script, ….fill in the box with specific codes and click “save” to see the change or effect of that particular code.

And if you disliked or are dissatisfied with the particular code, you have to remove it in same lengthy process. If you are still doing all sort of things like this, just to see how your new code/scripts will look like, then here is a good news (good site?) for you.

Now you don’t need to go through all the lengthy process. If you want to see what will be the final outcome/result of a new Html Codes and Javascripts, just go to Html & JavaScript Test Bed and fill the codes in the box and click on “Test”…….voila!, you will immediately see the Product/result of the codes in a new page (no login, no registration, no nagging… nothing…just a free test bed.)

Now you can freely and safely play with your codes. You can edit the codes, add your own lines and see the result exactly before applying it into your own site.

I also found another similar site  to test the codes, and that is http://www.geocities.com/swfanatic_2000/htmltester.html.

So get ready to be more innovative as a free lab is available to all of us to carryout our tests and play with codes and scripts.






6 Comments Add your own

  • 1. Tony Brown  |  September 24, 2009 at 10:23 pm

    I don’t know If I said it already but …Great site…keep up the good work. 🙂 I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say I’m glad I found your blog. Thanks, 🙂

    A definite great read..Tony Brown

  • 2. skidoknet  |  December 4, 2009 at 8:19 am

    Ну прямо в точку, что ещё можно сказать. Только не могу понять, куда пропал автор?

  • 3. gucci shoes  |  February 27, 2010 at 10:19 am

    I enjoy your site and I have bookmarked it, Kind Regards

    Bernice Johanson

    Gucci Shoes
    Gucci Sandals

  • 4. Flash  |  June 9, 2010 at 2:17 am

    But now I have be stricken to believe that the uninjured community is an enigma, a innocuous poser that is made rueful by our own fuming attempt to explicate it as supposing it had an underlying truth.

  • 5. Linda  |  June 10, 2010 at 2:10 pm

    I believe I allready have been told about this topic
    at bar 2 days ago by a mate, but at that moment
    it didn’t caugh my attention.

  • 6. christopher  |  July 22, 2010 at 5:19 pm

    TAB_HEADINGS = ‘h2’;
    TAB_CLASS = ‘tab’;
    SECTION_CLASS = ‘section’;
    QUERY_SECTION_ARG = ‘section’;
    TAB_SELECTED_CLASS = ‘selected’;
    TAB_NOT_SELECTED_CLASS = ‘not-selected’;
    LOADING_ELM_ID = ‘loading’;
    CONTENT_HOLDER_ID = ‘content-holder’;

    lastSection = 0
    function checkHash() {
    var section = get_selected();
    if(section != lastSection) {
    lastSection = section;

    function get_elements() {
    var divs = document.getElementsByTagName(“div”);
    var htags = document.getElementsByTagName(TAB_HEADINGS);
    sections = [];
    tabs = [];
    headings = []
    for(var i=0; i<divs.length; i++) {
    if(divs[i].className == SECTION_CLASS) sections.push(divs[i]);
    for(var i=0; i<htags.length; i++) {
    if(htags[i].className == TAB_CLASS) {
    var span = document.createElement("span");
    span.innerHTML = htags[i].innerHTML;

    function combine_tabs(){
    if(headings.length == 0)return;
    headings[0].innerHTML = '';
    for(var i=0; i 0) headings[i].parentNode.removeChild(headings[i]);

    function hide_all(){
    for(var i=0; i<sections.length; i++) {
    sections[i].style.display = "none";
    for(var i=0; i<tabs.length; i++) {
    tabs[i].className = TAB_NOT_SELECTED_CLASS

    function show_section(index){
    if(sections.length == 0) return;
    var section = sections[index];
    if(!section) var section = sections[index=0];
    section.style.display = "block";
    tabs[index].className = TAB_SELECTED_CLASS;
    var id = headings[index].getAttribute('id') || sections[index].getAttribute('id');
    if(id && index != lastSection) {
    var y = typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement.scrollTop;
    if(!navigator.userAgent.match(/Safari/)) location.hash = '#' + id;
    window.scrollTo(0, y);
    if(typeof load_tab == 'function') load_tab(id);
    lastSection = index;

    function tab_click(e){
    var target = e && e.target || event.srcElement;
    for(var i=0; i<tabs.length; i++) {
    if(target == tabs[i] || target.parentNode == tabs[i]){

    function set_handlers(){
    for(var i=0; i<tabs.length; i++) {
    tabs[i].onclick = tab_click;

    function get_selected(){
    var selected = 0;
    if(location.hash) {
    selected = location.hash.substring(1);
    } else if(location.search) {
    var args = location.search.substring(1).split('&');
    for(var i=0; i<args.length; i++) {
    var name = args[i].split('=')[0];
    var value = args[i].split('=')[1];
    if(name == QUERY_SECTION_ARG){
    selected = value;
    for(var i=0; i<sections.length; i++){
    if(sections[i].getAttribute('id') == selected || headings[i].getAttribute('id') == selected){
    selected = i;
    return selected;

    function set_up() {
    var loadingElm = document.getElementById(LOADING_ELM_ID);
    loadingElm.style.display = "none";
    var contentHolderElm = document.getElementById(CONTENT_HOLDER_ID);
    if(contentHolderElm) {
    contentHolderElm.style.display = "block";
    var selected = get_selected();
    if(!navigator.userAgent.match(/Safari/)) setInterval(checkHash, 100);

    onload = set_up

    h2.tab span {
    margin-left: 9px;
    margin-right: 0px;
    padding: 1px 10px 0px 10px;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    cursor: pointer;
    /* Remove the following if you don’t want rounded corners (Mozilla only). */
    -moz-border-radius: 7px 7px 0px 0px;

    h2.tab span.not-selected {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    color: #999;

    h2.tab span.selected {
    background-color: #fff;
    border-bottom: 1px solid #fff;

    h2.tab {
    border-bottom: none;
    font-weight: bold;
    font-size: 100%;
    margin-bottom: 0px;
    font-style: normal;

    div.section {
    border: 1px solid #ccc;
    padding: 15px 5px 5px 5px;

    Tab 1

    content for first tab

    Tab 2

    content for second tab

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed

%d bloggers like this: