Edit in JSFiddle

function fixed() {
    document.getElementById("selector").style.display = "none";
    document.getElementById("width").style.display = "inline";
    document.getElementById("minWidth").style.display = "none"
}
function resizing() {
    document.getElementById("selector").style.display = "block";
    document.getElementById("width").style.display = "none";
    document.getElementById("minWidth").style.display = "inline"
}
function zzRadio(a) {
    a = a.mode;
    for (var c = 0, b = a.length; c < b; c++) if (a[c].checked) return a[c].value
}

function zzCss(a, c, b) {
    var d = a + "{width:calc(100% - 280px)}\n",
        e = parseInt(b, 10) + 280,
        f = b / 2;
    a = "\n" + a + "{width:" + b + "px}";
    "fixed" == c && (a = d = "");
    return d + (".caudoi{z-index:999;zoom:1;width:140px;height:455px;position:fixed;top:0;left:0;background:url(http://i.imgur.com/h8jUThA.png) no-repeat transparent;background-position:0 -456px}\n.caudoi.phai{left:auto;right:0;background-position:0 0}\n@media screen and (max-width: " + e + "px) {" + a + "\n.caudoi{left:50%;margin-left:" + ("-" + (f + 140) + "px") + "}\n.caudoi.phai{left:50%;right:auto;margin-left:" + (f + "px") + "}\n}")
}

function preview(a, c, b) {
    var d = open("", "Xem tr\u01b0\u1edbc", "width=1024,height=550,scrollbars=1,resizable=1,titlebar=1");
    d.document.body.innerHTML = '<div class="caudoi trai"></div><div class="caudoi phai"></div><div data-selector="' + b + '" style="' + c + 'px; height: 1500px; background: #333; margin: 0 auto;"><h1 style="text-align: center;color: yellow;padding-top: 20px;">Code c\u00e2u \u0111\u1ed1i t\u1ebft:</h1><h2 style="color: #FF4496;padding-top: 20px;">CSS:</h2><textarea id="bvCSS" style="width: 100%;min-height: 150px;" onClick="this.select()">' + a.replace(/[<>]/g,

    function (a) {
        return {
            "<": "&lt;",
            ">": "&gt;"
        }[a]
    }) + '</textarea><em style="color: #FFF;">Th\u00eam v\u00e0o CSS</em><h2 style="color: #06EBFF;padding-top: 20px;">HTML:</h2><textarea style="width: 100%;min-height: 55px;" onClick="this.select()">&lt;!--[if lt IE 9]&gt;&lt;style type="text/css"&gt;.caudoi{display:none}&lt;/style&gt;&lt;![endif]--&gt;\n&lt;div class="caudoi trai"&gt;&lt;/div&gt;\n&lt;div class="caudoi phai"&gt;&lt;/div&gt;</textarea><em style="color: #FFF;">Th\u00eam v\u00e0o th\u1ebb body</em><p style="text-align: center;"><a href="#" onclick="window.close()" style="color: red;">\u0110\u00f3ng c\u1eeda s\u1ed5</a></p></div>';
    c = d.document.createElement("style"); - 1 != a.indexOf(b) && (a = a.replace(RegExp("(" + b.replace(/(\*|\||\+|\,|\~|\:|\-|\^|\$|\(|\)|\>|\[|\]|\=)/g, "\\$1") + ")", "g"), '[data-selector="$1"]'), console.log(RegExp("(" + b.replace(/(\*|\|)/g, "\\$1") + ")", "g")), console.log(a));
    c.innerHTML = a;
    d.document.head.appendChild(c)
}

function zzSubmit(a) {
    var c = a.punSelector.value,
        b = a.punWidth.value;
    a = zzRadio(a);
    var d = "min-";
    if (isNaN(b) || "" === b) alert("Nh\u1eadp s\u1ed1 v\u00e0o \u00f4 Chi\u1ec1u r\u1ed9ng!");
    else {
        var e = "/* Cau Doi Tet - DEVs.forumvi.com */\n" + zzCss(c, a, b);
        "fixed" == a && (d = "");
        preview(e, d + "width:" + b, c)
    }
    return !1
};

<form action="javascript:void(0);" onsubmit="return zzSubmit(this);">
    <dl> 
        <dt>
            <strong style="color:red">Loại chiều rộng</strong>:
        </dt>
        <dd>
            <input name="mode" type="radio" value="fixed" onclick="fixed();" checked />Cố định
            <input name="mode" type="radio" value="resizing" onclick="resizing();" />Co giãn
        </dd>
    </dl>
    <dl id="selector" style="display:none"> 
        <dt>
            <strong style="color:#0047FF">Selector</strong> (<em>của khung tạo nên chiều rộng trang web, diễn đàn</em>):
        </dt>
        <dd>
            <input name="punSelector" type="text" value=".pun" />
        </dd>
    </dl>
    <dl> 
        <dt>
            <span id="width">
                <strong style="color:green">Chiều rộng</strong> (<em>width</em>):
            </span>
            <span id="minWidth" style="display:none">
                <strong style="color:#B800B8">Chiều rộng tối thiểu</strong> (<em>min-width</em>):
            </span>
        </dt>
        <dd>
            <input name="punWidth" type="text" value="" /> px
        </dd>
    </dl>
    <p>
        <input type="reset" value="Làm lại" onclick="fixed();" />
        <input type="submit" value="Lấy code" />
    </p>
</form>

/*
By Zzbaivong
http://devs.forumvi.com
*/