Codepen Code Editor Blogger Template. a template to edit and test code that is very useful for Blogger, just like W3schools. an editor code for blogspot blogger you can play with it as much as any other editor.
Features:
- Responsive
- Live Editing
- SEO Meta Ready
- Personal Blog
- 1 Column
- 2 Option Layout
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:dir='data:blog.languageDirection' lang='vi'>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<!-- NQnia.blogspot.com -->
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link href='........./favicon-32x32.png' rel='icon' sizes='32x32'/>
<link href='........./android-icon-192x192.png' rel='icon' sizes='192x192'/>
<link href='........./apple-icon-180x180.png' rel='apple-touch-icon-precomposed'/>
<meta content='........./ms-icon-144x144.png' name='msapplication-TileImage'/>
<link href='https://codeeditorfree.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + "- Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + "- RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"https://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + "- Atom"' rel='alternate' type='application/atom+xml'/>
<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/4044097237-ieretrofit.js"></script>
<script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>404: Page Not Found | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
</b:if>
<link href='https://plus.google.com/xxxxxxxxxxxxxxxxxxx' rel='me'/>
<link href='https://plus.google.com/xxxxxxxxxxxxxxxxxxx' rel='publisher'/>
<meta content='xxxxxxxxxxxxxxxxxxxxxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxxxxxxxxxxxxxxxxxxxxxx' name='msvalidate.01'/>
<meta content='xxxxxxxxxxxxxxxxxxxxxxxxxxxx' name='p:domain_verify'/>
<meta content='xxxxxxxxxxxxxxxxxxxxxxxxxxxx' name='yandex-verification'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageUrl'>
<link expr:href='data:blog.postImageUrl' rel='image_src'/>
</b:if>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='Replace the url of your blog Logo' property='og:image'/>
</b:if>
<meta content='xxxxxxxxxxxxxx' property='fb:admins'/>
<meta content='xxxxxxxxxxxxxx' property='fb:profile_id'/>
<meta content='Name Profil FB' name='Author'/>
<meta content='URL profil FB' property='article:author'/>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@changeUsernameTwitter' name='twitter:creator'/>
<!-- NQnia.blogspot.com -->
<style type="text/css">
<!-- /*<b:skin><![CDATA[
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0!important;padding:0!important}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}
img{border-style:none}svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
button:focus{border:none;}
/* End extract */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1,h2,h3,h4,h5,h6,.be-slim,.be-wide{font-family:"Segoe UI",Arial,sans-serif}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.be-serif{font-family:"Times New Roman",Times,serif}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:10px 0}.be-wide{letter-spacing:4px}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
img{margin-bottom:-5px}a{color:inherit}
.be-image{max-width:100%;height:auto}
.be-table,.be-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}
.be-table-all{border:1px solid #ccc}
.be-bordered tr,.be-table-all tr{border-bottom:1px solid #ddd}
.be-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.be-table-all tr:nth-child(odd){background-color:#fff}
.be-table-all tr:nth-child(even){background-color:#f1f1f1}
.be-hoverable tbody tr:hover,.be-ul.be-hoverable li:hover{background-color:#ccc}
.be-centered tr th,.be-centered tr td{text-align:center}
.be-table td,.be-table th,.be-table-all td,.be-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.be-table th:first-child,.be-table td:first-child,.be-table-all th:first-child,.be-table-all td:first-child{padding-left:16px}
.be-btn,.be-btn-block{border:none;display:inline-block;outline:0;padding:6px 16px;vertical-align:middle;overflow:hidden;text-decoration:none!important;color:#fff;background-color:#000;text-align:center;cursor:pointer;white-space:nowrap}
.be-btn:hover,.be-btn-block:hover,.be-btn-floating:hover,.be-btn-floating-large:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.be-btn,.be-btn-floating,.be-btn-floating-large,.be-closenav,.be-opennav,.be-btn-block{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.be-btn-floating,.be-btn-floating-large{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px}
.be-btn-floating{width:40px;height:40px;line-height:40px}.be-btn-floating-large{width:56px;height:56px;line-height:56px}
.be-disabled,.be-btn:disabled,.be-btn-floating:disabled,.be-btn-floating-large:disabled{cursor:not-allowed;opacity:0.3}
.be-btn.be-disabled *,.be-btn-block.be-disabled,.be-btn-floating.be-disabled *,.be-btn:disabled *,.be-btn-floating:disabled *{pointer-events:none}
.be-btn.be-disabled:hover,.be-btn-block.be-disabled:hover,.be-btn:disabled:hover,.be-btn-floating.be-disabled:hover,.be-btn-floating:disabled:hover,
.be-btn-floating-large.be-disabled:hover,.be-btn-floating-large:disabled:hover{box-shadow:none}
.be-btn-group .be-btn{float:left}.be-btn-block{width:100%}
.be-btn-bar .be-btn{box-shadow:none;background-color:inherit;color:inherit;float:left}.be-btn-bar .be-btn:hover{background-color:#ccc}
.be-badge,.be-tag,.be-sign{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}
.be-badge{border-radius:50%}
ul.be-ul{list-style-type:none;padding:0;margin:0}ul.be-ul li{padding:6px 2px 6px 16px;border-bottom:1px solid #ddd}ul.be-ul li:last-child{border-bottom:none}
.be-tooltip,.be-display-container{position:relative}.be-tooltip .be-text{display:none}.be-tooltip:hover .be-text{display:inline-block}
.be-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden}
.be-navbar li{float:left}.be-navbar li a,.be-navitem,.be-navbar li .be-btn,.be-navbar li .be-input{display:block;padding:8px 16px}.be-navbar li .be-btn,.be-navbar li .be-input{border:none;outline:none;width:100%}
.be-navbar li a:hover{color:#000;background-color:#ccc}
.be-navbar .be-dropdown-hover,.be-navbar .be-dropdown-click{position:static}
.be-navbar .be-dropdown-hover:hover,.be-navbar .be-dropdown-hover:first-child,.be-navbar .be-dropdown-click:hover{background-color:#ccc;color:#000}
.be-navbar a,.be-topnav a,.be-sidenav a,.be-dropdown-content a,.be-accordion-content a,.be-dropnav a,.be-navblock a{text-decoration:none!important}
.be-navbar .be-opennav.be-right{float:right!important}.be-topnav{padding:8px 8px}
.be-topnav a{padding:0 8px;border-bottom:3px solid transparent;-webkit-transition:border-bottom .25s;transition:border-bottom .25s}
.be-topnav a:hover{border-bottom:3px solid #fff}.be-topnav .be-dropdown-hover a{border-bottom:0}
.be-opennav,.be-closenav{color:inherit}.be-opennav:hover,.be-closenav:hover{cursor:pointer;opacity:0.8}
.be-btn,.be-btn-floating,.be-dropnav a,.be-btn-floating-large,.be-btn-block, .be-navbar a,.be-navblock a,.be-sidenav a,.be-pagination li a,.be-hoverable tbody tr,.be-hoverable li,
.be-accordion-content a,.be-dropdown-content a,.be-dropdown-click:hover,.be-dropdown-hover:hover,.be-opennav,.be-closenav,.be-closebtn,*[class*="be-hover-"]
{-webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s;transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s}
.be-ripple:active{opacity:0.5}.be-ripple{-webkit-transition:opacity 0s;transition:opacity 0s}
.be-sidenav{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
.be-sidenav a,.be-navblock a{padding:4px 2px 4px 16px}.be-sidenav a:hover,.be-navblock a:hover{background-color:#ccc}.be-sidenav a,.be-dropnav a,.be-navblock a{display:block}
.be-sidenav .be-dropdown-hover:hover,.be-sidenav .be-dropdown-hover:first-child,.be-sidenav .be-dropdown-click:hover,.be-dropnav a:hover{background-color:#ccc;color:#000}
.be-sidenav .be-dropdown-hover,.be-sidenav .be-dropdown-click {width:100%}.be-sidenav .be-dropdown-hover .be-dropdown-content,.be-sidenav .be-dropdown-click .be-dropdown-content{min-width:100%}
.be-main,#main{transition:margin-left .4s}
.be-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.be-modal-content{padding-bottom:20px;height:650px;margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}.be-closebtn{text-decoration:none;float:right;font-size:24px;font-weight:bold;color:inherit}
.be-closebtn:hover,.be-closebtn:focus{color:#000;text-decoration:none;cursor:pointer}
.be-pagination{display:inline-block;padding:0;margin:0}.be-pagination li{display:inline}
.be-pagination li a{text-decoration:none;color:#000;float:left;padding:8px 16px}
.be-pagination li a:hover{background-color:#ccc}
.be-input-group,.be-group{margin-top:24px;margin-bottom:24px}
.be-input{padding:8px;display:block;border:none;border-bottom:1px solid #808080;width:100%}
.be-label{color:#009688}.be-input:not(:valid)~.be-validate{color:#f44336}
.be-select{padding:9px 0;width:100%;color:#000;border:1px solid transparent;border-bottom:1px solid #009688}
.be-select select:focus{color:#000;border:1px solid #009688}.be-select option[disabled]{color:#009688}
.be-dropdown-click,.be-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.be-dropdown-hover:hover .be-dropdown-content{display:block;z-index:1}
.be-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0}
.be-dropdown-content a{padding:6px 16px;display:block}
.be-dropdown-content a:hover{background-color:#ccc}
.be-accordion {width:100%;cursor:pointer}
.be-accordion-content{cursor:auto;display:none;position:relative;width:100%;margin:0;padding:0}
.be-accordion-content a{padding:6px 16px;display:block}.be-accordion-content a:hover{background-color:#ccc}
.be-progress-container{width:100%;height:1.5em;position:relative;background-color:#f1f1f1}
.be-progressbar{background-color:#757575;height:100%;position:absolute;line-height:inherit}
input[type=checkbox].be-check,input[type=radio].be-radio{width:24px;height:24px;position:relative;top:6px}
input[type=checkbox].be-check:checked+.be-validate,input[type=radio].be-radio:checked+.be-validate{color:#009688}
input[type=checkbox].be-check:disabled+.be-validate,input[type=radio].be-radio:disabled+.be-validate{color:#aaa}
.be-responsive{overflow-x:auto}
.be-container:after,.be-container:before,.be-panel:after,.be-panel:before,.be-row:after,.be-row:before,.be-row-padding:after,.be-row-padding:before,.be-topnav:after,.be-topnav:before,.be-clear:after,.be-clear:before,.be-btn-group:before,.be-btn-group:after,.be-btn-bar:before,.be-btn-bar:after
{content:"";display:table;clear:both}
.be-col,.be-half,.be-third,.be-twothird,.be-threequarter,.be-quarter{float:left;width:100%}
.be-col.s1{width:8.33333%}
.be-col.s2{width:16.66666%}
.be-col.s3{width:24.99999%}
.be-col.s4{width:33.33333%}
.be-col.s5{width:41.66666%}
.be-col.s6{width:49.99999%}
.be-col.s7{width:58.33333%}
.be-col.s8{width:66.66666%}
.be-col.s9{width:74.99999%}
.be-col.s10{width:83.33333%}
.be-col.s11{width:91.66666%}
.be-col.s12,.be-half,.be-third,.be-twothird,.be-threequarter,.be-quarter{width:99.99999%}
@media (min-width:601px){
.be-col.m1{width:8.33333%}
.be-col.m2{width:16.66666%}
.be-col.m3,.be-quarter{width:24.99999%}
.be-col.m4,.be-third{width:33.33333%}
.be-col.m5{width:41.66666%}
.be-col.m6,.be-half{width:49.99999%}
.be-col.m7{width:58.33333%}
.be-col.m8,.be-twothird{width:66.66666%}
.be-col.m9,.be-threequarter{width:74.99999%}
.be-col.m10{width:83.33333%}
.be-col.m11{width:91.66666%}
.be-col.m12{width:99.99999%}}
@media (min-width:993px){
.be-col.l1{width:8.33333%}
.be-col.l2{width:16.66666%}
.be-col.l3,.be-quarter{width:24.99999%}
.be-col.l4,.be-third{width:33.33333%}
.be-col.l5{width:41.66666%}
.be-col.l6,.be-half{width:49.99999%}
.be-col.l7{width:58.33333%}
.be-col.l8,.be-twothird{width:66.66666%}
.be-col.l9,.be-threequarter{width:74.99999%}
.be-col.l10{width:83.33333%}
.be-col.l11{width:91.66666%}
.be-col.l12{width:99.99999%}}
.be-content{max-width:980px;margin:auto}
.be-rest{overflow:hidden}
.be-layout-container{display:table;width:100%}.be-layout-row{display:table-row}.be-layout-cell,.be-layout-col{display:table-cell}
.be-layout-top{vertical-align:top}.be-layout-middle{vertical-align:middle}.be-layout-bottom{vertical-align:bottom}
.be-hide{display:none!important}.be-show-block,.be-show{display:block!important}.be-show-inline-block{display:inline-block!important}
@media (max-width:600px){.be-modal-content{margin:0 10px;width:auto!important}.be-modal{padding-top:30px}
.be-topnav a{display:block}.be-navbar li.be-right{float:none!important}.cdx-row.stac{display:none}
.be-topnav .be-dropdown-hover .be-dropdown-content,.be-navbar .be-dropdown-click .be-dropdown-content,.be-navbar .be-dropdown-hover .be-dropdown-content{position:relative}
.be-topnav,.be-navbar{text-align:center}.be-layout-col{display:block;width:100%!important}}
@media (max-width:768px){.be-modal-content{width:500px}.be-modal{padding-top:50px}}
@media (min-width:993px){.be-hide-large{display:none!important}.be-sidenav.be-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.be-hide-medium{display:none!important}}
@media (max-width:992px){.be-sidenav.be-collapse{display:none}.be-main{margin-left:0!important;margin-right:0!important}}
.be-top,.be-bottom{position:fixed;width:100%;z-index:1}.be-top{top:0}.be-bottom{bottom:0}
.be-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.be-left{float:left!important}.be-right{float:right!important}
.be-tiny{font-size:10px!important}.be-small{font-size:12px!important}
.be-medium{font-size:15px!important}.be-large{font-size:18px!important}
.be-xlarge{font-size:24px!important}.be-xxlarge{font-size:36px!important}
.be-xxxlarge{font-size:48px!important}.be-jumbo{font-size:64px!important}
.be-vertical{word-break:break-all;line-height:1;text-align:center;width:0.6em}
.be-left-align{text-align:left!important}.be-right-align{text-align:right!important}
.be-justify{text-align:justify!important}.be-center{text-align:center!important}
.be-display-topleft{position:absolute;left:0;top:0}.be-display-topright{position:absolute;right:0;top:0}
.be-display-bottomleft{position:absolute;left:0;bottom:0}.be-display-bottomright{position:absolute;right:0;bottom:0}
.be-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.be-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.be-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.be-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.be-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.be-display-container:hover .be-display-hover{display:block}.be-display-container:hover span.be-display-hover{display:inline-block}.be-display-hover{display:none}
.be-circle{border-radius:50%!important}
.be-round-small{border-radius:2px!important}.be-round,.be-round-medium{border-radius:4px!important}
.be-round-large{border-radius:8px!important}.be-round-xlarge{border-radius:16px!important}
.be-round-xxlarge{border-radius:32px!important}.be-round-jumbo{border-radius:64px!important}
.be-border-0{border:0!important}.be-border{border:1px solid #ccc!important}
.be-border-top{border-top:1px solid #ccc!important}.be-border-bottom{border-bottom:1px solid #ccc!important}
.be-border-left{border-left:1px solid #ccc!important}.be-border-right{border-right:1px solid #ccc!important}
.be-margin{margin:16px!important}.be-margin-0{margin:0!important}
.be-margin-top{margin-top:16px!important}.be-margin-bottom{margin-bottom:16px!important}
.be-margin-left{margin-left:16px!important}.be-margin-right{margin-right:16px!important}
.be-section{margin-top:16px!important;margin-bottom:16px!important}
.be-padding-tiny{padding:2px 4px!important}.be-padding-small{padding:4px 8px!important}
.be-padding-medium,.be-padding,.be-form{padding:8px 16px!important}
.be-padding-large{padding:12px 24px!important}.be-padding-xlarge{padding:16px 32px!important}
.be-padding-xxlarge{padding:24px 48px!important}.be-padding-jumbo{padding:32px 64px!important}
.be-padding-4{padding-top:4px!important;padding-bottom:4px!important}
.be-padding-8{padding-top:8px!important;padding-bottom:8px!important}
.be-padding-12{padding-top:12px!important;padding-bottom:12px!important}
.be-padding-16{padding-top:16px!important;padding-bottom:16px!important}
.be-padding-24{padding-top:24px!important;padding-bottom:24px!important}
.be-padding-32{padding-top:32px!important;padding-bottom:32px!important}
.be-padding-48{padding-top:48px!important;padding-bottom:48px!important}
.be-padding-64{padding-top:64px!important;padding-bottom:64px!important}
.be-padding-128{padding-top:128px!important;padding-bottom:128px!important}
.be-padding-0{padding:0!important}
.be-padding-top{padding-top:8px!important}.be-padding-bottom{padding-bottom:8px!important}
.be-padding-left{padding-left:16px!important}.be-padding-right{padding-right:16px!important}
.be-topbar{border-top:6px solid #ccc!important}.be-bottombar{border-bottom:6px solid #ccc!important}
.be-leftbar{border-left:6px solid #ccc!important}.be-rightbar{border-right:6px solid #ccc!important}
.be-row-padding,.be-row-padding>.be-half,.be-row-padding>.be-third,.be-row-padding>.be-twothird,.be-row-padding>.be-threequarter,.be-row-padding>.be-quarter,.be-row-padding>.be-col{padding:0 8px}
.be-spin{animation:be-spin 2s infinite linear;-webkit-animation:be-spin 2s infinite linear}
@-webkit-keyframes be-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
@keyframes be-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
.be-container{padding:0.01em 16px}
.be-panel{height:650px;padding:0.01em 16px;margin-top:16px!important;margin-bottom:16px!important}
.be-example{background-color:#f1f1f1;padding:0.01em 16px}
.be-code,.be-codespan{font-family:Consolas,"courier new";font-size:16px}
.be-code{line-height:1.4;width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
.be-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
.be-example,.be-code{margin:20px 0}.be-card{border:1px solid #ccc}
.be-card-2,.be-example{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important}
.be-card-4,.be-hover-shadow:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important}
.be-card-8{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important}
.be-card-12{box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)!important}
.be-card-16{box-shadow:0 16px 24px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21)!important}
.be-card-24{box-shadow:0 24px 24px 0 rgba(0,0,0,0.2),0 40px 77px 0 rgba(0,0,0,0.22)!important}
.be-animate-fading{-webkit-animation:fading 10s infinite;animation:fading 10s infinite}
@-webkit-keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.be-animate-opacity{-webkit-animation:opac 0.8s;animation:opac 0.8s}
@-webkit-keyframes opac{from{opacity:0} to{opacity:1}}
@keyframes opac{from{opacity:0} to{opacity:1}}
.be-animate-top{position:relative;-webkit-animation:animatetop 0.4s;animation:animatetop 0.4s}
@-webkit-keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.be-animate-left{position:relative;-webkit-animation:animateleft 0.4s;animation:animateleft 0.4s}
@-webkit-keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.be-animate-right{position:relative;-webkit-animation:animateright 0.4s;animation:animateright 0.4s}
@-webkit-keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.be-animate-bottom{position:relative;-webkit-animation:animatebottom 0.4s;animation:animatebottom 0.4s}
@-webkit-keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}}
@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.be-animate-zoom {-webkit-animation:animatezoom 0.6s;animation:animatezoom 0.6s}
@-webkit-keyframes animatezoom{from{-webkit-transform:scale(0)} to{-webkit-transform:scale(1)}}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.be-animate-input{-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}.be-animate-input:focus{width:100%!important}
.be-opacity,.be-hover-opacity:hover{opacity:0.60;-webkit-backface-visibility:hidden}
.be-opacity-off,.be-hover-opacity-off:hover{opacity:1;-webkit-backface-visibility:hidden}
.be-opacity-max{opacity:0.25;-webkit-backface-visibility:hidden}
.be-opacity-min{opacity:0.75;-webkit-backface-visibility:hidden}
.be-greyscale-max,.be-grayscale-max,.be-hover-greyscale:hover,.be-hover-grayscale:hover{-webkit-filter:grayscale(100%);filter:grayscale(100%)}
.be-greyscale,.be-grayscale{-webkit-filter:grayscale(75%);filter:grayscale(75%)}
.be-greyscale-min,.be-grayscale-min{-webkit-filter:grayscale(50%);filter:grayscale(50%)}
.be-sepia{-webkit-filter:sepia(75%);filter:sepia(75%)}
.be-sepia-max,.be-hover-sepia:hover{-webkit-filter:sepia(100%);filter:sepia(100%)}
.be-sepia-min{-webkit-filter:sepia(50%);filter:sepia(50%)}
.be-text-shadow{text-shadow:1px 1px 0 #444}.be-text-shadow-white{text-shadow:1px 1px 0 #ddd}
.be-transparent{background-color:transparent!important}
.be-hover-none:hover{box-shadow:none!important;background-color:transparent!important}
/* Colors */
.be-amber,.be-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.be-aqua,.be-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.be-blue,.be-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.be-light-blue,.be-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.be-brown,.be-hover-brown:hover{color:#fff!important;background-color:#795548!important}
.be-cyan,.be-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.be-blue-grey,.be-hover-blue-grey:hover,.be-blue-gray,.be-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.be-green,.be-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.be-light-green,.be-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.be-indigo,.be-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.be-khaki,.be-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.be-lime,.be-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.be-orange,.be-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.be-deep-orange,.be-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.be-pink,.be-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.be-purple,.be-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.be-deep-purple,.be-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.be-red,.be-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.be-sand,.be-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.be-teal,.be-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.be-yellow,.be-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.be-white,.be-hover-white:hover{color:#000!important;background-color:#999!important}
.be-black,.be-hover-black:hover{color:#fff!important;background-color:#000!important}
.be-grey,.be-hover-grey:hover,.be-gray,.be-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.be-light-grey,.be-hover-light-grey:hover,.be-light-gray,.be-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.be-dark-grey,.be-hover-dark-grey:hover,.be-dark-gray,.be-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.be-pale-red,.be-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.be-pale-green,.be-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.be-pale-yellow,.be-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.be-pale-blue,.be-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.be-text-amber,.be-hover-text-amber:hover{color:#ffc107!important}
.be-text-aqua,.be-hover-text-aqua:hover{color:#00ffff!important}
.be-text-blue,.be-hover-text-blue:hover{color:#2196F3!important}
.be-text-light-blue,.be-hover-text-light-blue:hover{color:#87CEEB!important}
.be-text-brown,.be-hover-text-brown:hover{color:#795548!important}
.be-text-cyan,.be-hover-text-cyan:hover{color:#00bcd4!important}
.be-text-blue-grey,.be-hover-text-blue-grey:hover,.be-text-blue-gray,.be-hover-text-blue-gray:hover{color:#607d8b!important}
.be-text-green,.be-hover-text-green:hover{color:#fff!important}
.be-text-light-green,.be-hover-text-light-green:hover{color:#8bc34a!important}
.be-text-indigo,.be-hover-text-indigo:hover{color:#3f51b5!important}
.be-text-khaki,.be-hover-text-khaki:hover{color:#b4aa50!important}
.be-text-lime,.be-hover-text-lime:hover{color:#cddc39!important}
.be-text-orange,.be-hover-text-orange:hover{color:#ff9800!important}
.be-text-deep-orange,.be-hover-text-deep-orange:hover{color:#ff5722!important}
.be-text-pink,.be-hover-text-pink:hover{color:#e91e63!important}
.be-text-purple,.be-hover-text-purple:hover{color:#9c27b0!important}
.be-text-deep-purple,.be-hover-text-deep-purple:hover{color:#673ab7!important}
.be-text-red,.be-hover-text-red:hover{color:#f44336!important}
.be-text-sand,.be-hover-text-sand:hover{color:#fdf5e6!important}
.be-text-teal,.be-hover-text-teal:hover{color:#009688!important}
.be-text-yellow,.be-hover-text-yellow:hover{color:#d2be0e!important}
.be-text-white,.be-hover-text-white:hover{color:#fff!important}
.be-text-black,.be-hover-text-black:hover{color:#000!important}
.be-text-grey,.be-hover-text-grey:hover,.be-text-gray,.be-hover-text-gray:hover{color:#757575!important}
.be-text-light-grey,.be-hover-text-light-grey:hover,.be-text-light-gray,.be-hover-text-light-gray:hover{color:#f1f1f1!important}
.be-text-dark-grey,.be-hover-text-dark-grey:hover,.be-text-dark-gray,.be-hover-text-dark-gray:hover{color:#3a3a3a!important}
.be-border-amber,.be-hover-border-amber:hover{border-color:#ffc107!important}
.be-border-aqua,.be-hover-border-aqua:hover{border-color:#00ffff!important}
.be-border-blue,.be-hover-border-blue:hover{border-color:#2196F3!important}
.be-border-light-blue,.be-hover-border-light-blue:hover{border-color:#87CEEB!important}
.be-border-brown,.be-hover-border-brown:hover{border-color:#795548!important}
.be-border-cyan,.be-hover-border-cyan:hover{border-color:#00bcd4!important}
.be-border-blue-grey,.be-hover-border-blue-grey:hover,.be-border-blue-gray,.be-hover-border-blue-gray:hover{border-color:#607d8b!important}
.be-border-green,.be-hover-border-green:hover{border-color:#4CAF50!important}
.be-border-light-green,.be-hover-border-light-green:hover{border-color:#8bc34a!important}
.be-border-indigo,.be-hover-border-indigo:hover{border-color:#3f51b5!important}
.be-border-khaki,.be-hover-border-khaki:hover{border-color:#f0e68c!important}
.be-border-lime,.be-hover-border-lime:hover{border-color:#cddc39!important}
.be-border-orange,.be-hover-border-orange:hover{border-color:#ff9800!important}
.be-border-deep-orange,.be-hover-border-deep-orange:hover{border-color:#ff5722!important}
.be-border-pink,.be-hover-border-pink:hover{border-color:#e91e63!important}
.be-border-purple,.be-hover-border-purple:hover{border-color:#9c27b0!important}
.be-border-deep-purple,.be-hover-border-deep-purple:hover{border-color:#673ab7!important}
.be-border-red,.be-hover-border-red:hover{border-color:#f44336!important}
.be-border-sand,.be-hover-border-sand:hover{border-color:#fdf5e6!important}
.be-border-teal,.be-hover-border-teal:hover{border-color:#009688!important}
.be-border-yellow,.be-hover-border-yellow:hover{border-color:#ffeb3b!important}
.be-border-white,.be-hover-border-white:hover{border-color:#fff!important}
.be-border-black,.be-hover-border-black:hover{border-color:#000!important}
.be-border-grey,.be-hover-border-grey:hover,.be-border-gray,.be-hover-border-gray:hover{border-color:#9e9e9e!important}
.be-border-light-grey,.be-hover-border-light-grey:hover,.be-border-light-gray,.be-hover-border-light-gray:hover{border-color:#f1f1f1!important}
.be-border-dark-grey,.be-hover-border-dark-grey:hover,.be-border-dark-gray,.be-hover-border-dark-gray:hover{border-color:#616161!important}
.be-border-pale-red,.be-hover-border-pale-red:hover{border-color:#ffe7e7!important}.be-border-pale-green,.be-hover-border-pale-green:hover{border-color:#e7ffe7!important}
.be-border-pale-yellow,.be-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.be-border-pale-blue,.be-hover-border-pale-blue:hover{border-color:#e7ffff!important}
/* Body Layout */
body#layout #container, body#layout ul,#layout ul {display:none;}
body#layout #outer-wrapper, body#layout .post-inner, body#layout .sidebar, body#layout .sidebartop {padding:0;}
body#layout #wrapper, body#layout .post-inner, body#layout .sidebar-inner {padding:0;}
body#layout .header-wrapper {margin-top:0;}
body#layout #header {min-height:0px;width:100%;}
body#layout #headerdua {width:30%;float:left;}
body#layout .sosial-atas li{display:none}
#layout,#layout .widget-content,#layout .add_widget {border:none;}
body#layout .add_widget {border:1px solid #ddd;}
#layout .add_widget a {color:#111;}
#layout #header{min-height:0px;width:100%;margin:10px 0 0 0;}
#layout #main-wrapper{width:70%;float:left}
#layout #sidebar-wrapper{width:30%;left:0;padding:0;float:right}
#layout .draggable-widget .widget-wrap2 {background:#c1cfd9;}
#layout #banner,#layout #banner2 {background-color:#444;padding:20px 0!important;margin-bottom:20px;}
#layout #banner .widget,#layout #banner2 .widget{width:80%;margin:5px auto!important;overflow:hidden;float:none}
#layout #banner .add_widget,#layout #banner2 .add_widget{width:80%;margin:5px auto!important;overflow:hidden;float:none}
#footer-xwidget .footer-widget {width:31.7%;float:left;margin-left:10px;}
#footer-wrapper {overflow:hidden;margin:0 auto 20px auto;padding:20px 0 0;}
#layout #footer-wrapper #column1,#layout #footer-wrapper #column2{margin:0}
ol, ul {list-style: none;}
.navbar,.post-feeds,.feed-links,#navbar-iframe{display:none}.cdx-row{width:auto!important;float:left}#header-wrapper .header,#comments,#footer-wrapper,#blog-pager,.post-vinfo,.post-header,.post-title{display:none}#header-wrapper{overflow:hidden}#header{float:left;width:100%;max-width:257px}.header-right{text-align:center;padding:0;overflow:hidden;margin:0;width:100%;}.header-wrapper2{position:relative;z-index:999}#footer-wrapper{text-align:left;overflow:hidden;margin:0}.footer{padding-bottom:.2em}.contact-form-widget{max-width:568px}form{color:#666}form.payforpal{margin:auto;text-align:center}#kontak-arlina{margin:auto;max-width:640px}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{border-radius:0.2em;border:1px solid #e0e0e0;min-height:1.75em;padding:0.25em;position:relative;margin:0 0 0.8em;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border:1px solid #e0e0e0;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)}#ContactForm1_contact-form-submit{font-weight:500;height:auto;line-height:normal;background:#438afe;overflow:hidden;vertical-align:middle;display:inline-block;padding:0.25em 0.8125em 0.1875em;border:0;border-bottom:0.15em solid #3c7ce4;border-right:0.1em solid #3c7ce4;border-radius:0.2rem;outline:0;color:#fff;width:100%;font-size:1em;text-transform:uppercase;text-align:center;text-overflow:ellipsis;;transition:all .2s ease}#ContactForm1_contact-form-submit:hover,#ContactForm1_contact-form-submit:focus{border-color:#3875d7;background:#3c7ce4}.contact-form-success-message-with-border,.contact-form-error-message-with-border{background:#fff;border:1px solid #e0e0e0;margin:0 0 0.8em;border-radius:0.2em;font-weight:500;box-shadow:none}#ContactForm1_contact-form-error-message img{display:none}.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}img.contact-form-cross{line-height:40px;margin-left:5px}
.CodeMirror{font-family:consolas,monospace;font-size:15px;height:300px;color:black}.CodeMirror-lines{padding:4px 0}.CodeMirror pre{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:white}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumbers{}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:black}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-animate-fat-cursor{width:auto;border:0;-webkit-animation:blink 1.06s steps(1) infinite;-moz-animation:blink 1.06s steps(1) infinite;animation:blink 1.06s steps(1) infinite;background-color:#7e7}@-moz-keyframes blink{0%{}50%{background-color:transparent}100%{}}@-webkit-keyframes blink{0%{}50%{background-color:transparent}100%{}}@keyframes blink{0%{}50%{background-color:transparent}100%{}}.CodeMirror-overwrite .CodeMirror-cursor{}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:-20px;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:blue}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:bold}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:mediumblue}.cm-s-default .cm-atom{color:mediumblue}.cm-s-default .cm-number{color:mediumblue}.cm-s-default .cm-m-javascript.cm-number{color:red}.cm-s-default .cm-m-sql.cm-number{color:red}.cm-s-default .cm-def{color:black}.cm-s-default .cm-variable{color:black}.cm-s-default .cm-m-css.cm-variable{color:mediumblue}.cm-s-default .cm-punctuation{}.cm-s-default .cm-property{color:red}.cm-s-default .cm-m-javascript.cm-property{color:black}.cm-s-default .cm-operator{}.cm-s-default .cm-variable-2{color:black}.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:green}.cm-s-default .cm-string{color:mediumblue}.cm-s-default .cm-m-javascript.cm-string{color:brown}.cm-s-default .cm-m-sql.cm-string{color:brown}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta{color:#555}.cm-s-default .cm-qualifier{color:brown}.cm-s-default .cm-builtin{color:brown}.cm-s-default .cm-tag{color:brown}.cm-s-default .cm-bracket{color:mediumblue}.cm-s-default .cm-attribute{color:red}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error{color:#f00}.cm-invalidchar{color:#f00}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-30px;margin-right:-30px;padding-bottom:30px;height:100%;outline:none;position:relative}.CodeMirror-sizer{position:relative;border-right:30px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:3;display:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-30px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:none;font-variant-ligatures:none}.CodeMirror-wrap pre{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;overflow:auto}.CodeMirror-widget{}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line >span::selection,.CodeMirror-line >span >span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line >span::-moz-selection,.CodeMirror-line >span >span::-moz-selection{background:#d7d4f0}.cm-searching{background:#ffa;background:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content: '';}span.CodeMirror-selectedtext{background:none}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{font-family:Verdana,sans-serif!important;color:#444;margin:0!important;font-size:100%}.cdx-nav{height:40px;overflow:hidden;min-width:380px;position:absolute;width:100%;top:99px}.be-navbar button{border:none;padding:8px 16px;display:block}a.beschoolslink{padding:0!important;display:inline!important}a.beschoolslink:hover,a.beschoolslink:active{text-decoration:underline!important;background-color:transparent!important}#dragbar{position:absolute;cursor:col-resize;z-index:3;padding:5px}#shield{display:none;top:0;left:0;width:100%;position:absolute;height:100%;z-index:4}#framesize span{font-family:Consolas,monospace}#container{background-color:#f1f1f1;width:100%;overflow:auto;position:absolute;top:138px;bottom:0;height:auto}#textareacontainer,#iframecontainer{float:left;height:100%;width:50%}#textarea,#iframe{height:100%;width:100%;padding-bottom:10px;padding-top:1px}#textarea{padding-left:10px;padding-right:5px}#iframe{padding-left:5px;padding-right:10px}#textareawrapper{width:100%;height:100%;background-color:#ffffff;position:relative;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)}#iframewrapper{width:100%;height:100%;background-color:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)}#textareaCode{background-color:#ffffff;font-family:consolas,"courier new",monospace;font-size:15px;height:100%;width:100%;padding:8px;resize:none;border:none;line-height:normal}.CodeMirror.cm-s-default{line-height:normal;padding:4px;height:100%;width:100%}#iframeResult,#iframeSource{background-color:#ffffff;height:100%;width:100%}#stackV{background-color:#999999}#stackV.horizontal,#stackV.horizontal,#cmmnt-btn{background-color:transparent}#stackV.horizontal:hover,#cmmnt-btn:hover{background-color:#d3d3d3}#stackH,#stackH,#cmmnt-btn{background-color:transparent}#stackH:hover{background-color:#d3d3d3}#stackH.horizontal{background-color:#999999}#textareacontainer.horizontal,#iframecontainer.horizontal{height:50%;float:none;width:100%}#textarea.horizontal{height:100%;padding-left:10px;padding-right:10px}#iframe.horizontal{height:100%;padding-right:10px;padding-bottom:10px;padding-left:10px}#container.horizontal{min-height:200px;margin-left:0}#tryitLeaderboard{overflow:hidden;min-width:380px;position:absolute;width:100%;top:4px;height:99px}.be-navbar li button{cursor:pointer}@media screen and (max-width:727px){.cdx-nav{top:70px}#container{top:108px}}@media screen and (max-width:467px){.cdx-nav{top:60px}#container{top:98px}}@media only screen and (max-device-width:768px){#iframewrapper{overflow:auto}#container{min-width:320px}.stack{display:none}#tryhome{display:block}}@font-face{font-family:'fontawesome';src:url('../lib/fonts/fontawesome.eot?14663396');src:url('../lib/fonts/fontawesome.eot?14663396#iefix') format('embedded-opentype'),url('../lib/fonts/fontawesome.woff?14663396') format('woff'),url('../lib/fonts/fontawesome.ttf?14663396') format('truetype'),url('../lib/fonts/fontawesome.svg?14663396#fontawesome') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0,0)}.fa-2x{font-size:2em}.loader{border:6px solid #f3f3f3;border-top:6px solid #3498db;border-radius:50%;width:60px;height:60px;animation:spin 2s linear infinite}#saveLoader{margin:20px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#iframewrapper{}
*/]]></b:skin>
<!-- NQnia.blogspot.com -->
<b:if cond='data:view.isHomepage'>
<style type='text/css'>
.date-outer,#comments-panel{display: none;}
</style>
</b:if>
<style type='text/css'>
textarea {
padding: 2px 0px 0px 2px;
}
user agent stylesheet
input:not([type="image" i]), textarea {
box-sizing: border-box;
}
user agent stylesheet
textarea {
font-family: monospace;
border-color: rgb(169, 169, 169);
}
user agent stylesheet
textarea {
-webkit-appearance: textarea;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
flex-direction: column;
resize: auto;
cursor: auto;
white-space: pre-wrap;
word-wrap: break-word;
border-width: 1px;
border-style: solid;
border-color: initial;
border-image: initial;
padding: 2px;
}
user agent stylesheet
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em 0em 0em 0em;
font: 13.3333px Arial;
}
user agent stylesheet
input, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb;
}
</style>
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>
<style type='text/css'>
/* CSS Style Homepage Blog Here */
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
/* CSS Style Blog post Here */
/*]]>*/
</style>
</b:if>
<b:if cond='data:blog.pageType == "static_page" or data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
/* CSS Style Blog post and static page Here */
/*]]>*/
</style>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
/* CSS Style static page Here */
</style>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true"'>
<style type='text/css'>
/* CSS Style mobile Here */
</style>
</b:if>
<!-- <body><div></div> -->
<script type='text/javascript'>
//<![CDATA[
cookieOptions = {msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.", link: "http://www.blogger.com/go/cookiechoices", close: "Got it!", learn: "Learn More" };
//]]>
</script>
<script type='text/javascript'> //<![CDATA[
if (window.addEventListener) {
window.addEventListener("resize", browserResize);
} else if (window.attachEvent) {
window.attachEvent("onresize", browserResize);
}
var xbeforeResize = window.innerWidth;
function browserResize() {
var afterResize = window.innerWidth;
if ((xbeforeResize < (970) && afterResize >= (970)) || (xbeforeResize >= (970) && afterResize < (970)) ||
(xbeforeResize < (728) && afterResize >= (728)) || (xbeforeResize >= (728) && afterResize < (728)) ||
(xbeforeResize < (468) && afterResize >= (468)) ||(xbeforeResize >= (468) && afterResize < (468))) {
xbeforeResize = afterResize;
googletag.cmd.push(function() {
googletag.pubads().refresh([gptAdSlots[0]]);
});
}
if (window.screen.availWidth <= 768) {
restack(window.innerHeight > window.innerWidth);
}
fixDragBtn();
showFrameSize();
}
var fileID = "";
var loadSave = false;
function getSavedFile() {
loadSave = true;
var htmlCode;
var paramObj = {};
paramObj.fileid = "";
fileID = paramObj.fileid;
var paramA = JSON.stringify(paramObj);
var httpA = new XMLHttpRequest();
httpA.open("POST", globalURL, true);
httpA.setRequestHeader("Content-Type", "");
httpA.onreadystatechange = function() {
if(httpA.readyState == 4 && httpA.status == 200) {
document.getElementById("textareaCode").value = httpA.responseText;
window.editor.getDoc().setValue(httpA.responseText);
loadSave = false;
}
}
httpA.send(paramA);
}
//]]></script>
</head><!--<head/>-->
<body class='index' itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<b:if cond='data:blog.pageType == "error_page"'>
<style scoped='scoped' type='text/css'>
/* CSS Style Error Page Here */
</style>
<!-- HTML Error Page Here -->
</b:if>
<b:if cond='data:blog.pageType != "error_page"'>
<div itemprop='mainContentOfPage' itemscope='itemscope' itemtype='https://schema.org/WebPageElement'>
<header itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPHeader'>
<div id='header-wrapper'>
<div class='content-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Live Editer (Header)' type='Header' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>-1</b:widget-setting>
<b:widget-setting name='useImage'>false</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>0</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title' itemprop='headline'>
<b:include name='title'/>
</h1>
</div><b:include name='description'/>
</div>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description' itemprop='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><data:title/></span></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</header>
<div id='tryitLeaderboard'>
<div id='header-wrapper' itemscope='itemscope' itemtype='https://schema.org/WPHeader'>
<div class='header section section' id='header'><div class='widget Header' data-version='1' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<a href='http://Netridere.blogspot.com/' itemprop='url' title='Code editor'>
<span itemprop='name'>Code Editor</span>
</a>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>
</span></p>
</div>
</div>
</div></div>
<div class='header-right section' id='header-right'><div class='widget HTML' data-version='1' id='HTML1'>
</div>
</div>
</div>
</div>
<div class='clear'/>
<nav class='cdx-nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<ul class='be-navbar be-light-grey' style='border-top:1px solid #f1f1f1;overflow:auto'>
<li class='cdx-row' id='tryhome'>
<a href='/' title='Home'><img alt='home' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAVCAYAAABYHP4bAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGMzYxQTEyMjA2ODExODA4M0ExNURFNzM0MzY1MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBM0NDNzAyQkYyQTExMUU2QkJGQ0RFQUJENDU1N0M0OCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBM0NDNzAyQUYyQTExMUU2QkJGQ0RFQUJENDU1N0M0OCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MEVGRjM2MUExMjIwNjgxMTgwODNBMTVERTczNDM2NTIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEVGRjM2MUExMjIwNjgxMTgwODNBMTVERTczNDM2NTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7+jDUuAAACCElEQVR42ryVT0gUURzH31t3JbCsYFI6LWGCUBAoNEYXw6jWQ1LkMbwE2gYiHjx66bCnsoKiDfEgeIjojyLLbkUFwRKZXlYID7LQPTy4VDK7o9+3fBd+TMu0M4Y/+DDze+/9ft+Z3/vNG51Op1UAOwdmQSuYBPNi7im4xnsX3AGvHMdRtm2raACRq+AZaKc/AyzwkP4J0CbWH5fBkQZFJsAbIWLsAHgAHjPPL0+MK51/vVGMyZIi+BYomrKAo5wzT3/ML5HfG5nARSGyCS6Bb6AZnAXfOWf25nwYodPgI7hCf52JTQXyIAcSbI5cI7WvJ5SgyCn6b0EvGABZcJDjj0AKXOc+ee2Pn1CS5bLoP2GilOguabfBApgCY565CzJ/RFzv8clqDTLOBCbRqE9VLoIv4B2rscXxm2yYI1rrqoDp/edsYWMllinHBP0NbEEn+Ao0sMEGxwfB+3K53GWElsENThS5UDHwZIAP+hDIgMtskk/V7yMW6ykUCnkj9JoLTTf1cWGGgWFsGtwFQ2DOdV1lWdaHKPfiMzuqA9xXe7cRln24UqksxePxbG3jX/J6WP0/a+H1BcT+OoJcn8AKWAWOGDsjEqq9nHXSSmzfn2JsBXSHPRn8rMnj60YDgwrpsBsWUftkkQDCOuAbRv2a4Qcxf9Idz9zvOmPmhN72jGv+bdfkwl0BBgAFpm2yZZTmLwAAAABJRU5ErkJggg=='/>
</a>
</li>
<li class='cdx-row stac'>
<button id='stackV' onclick='restack(false)' title='Vertically'>
<img alt='Dikey' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAVCAYAAACt4nWrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpi3Ldv338GIoGjoyPj/v37iVbPAtVEUCHQUDAmRT0TAw3BqOGjhg9Fw4nJPKNhPoQMh5WKo8EyeA1nJKUOBakHYqLVAwQYANUjFto8AbaLAAAAAElFTkSuQmCC'/>
</button>
</li>
<li class='cdx-row stac'>
<button id='stackH' onclick='restack(true)' title='Horizontally'>
<img alt='Horizontally' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVCAYAAABCIB6VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD5JREFUeNpi3Ldv338GGgAWEOHo6EhVQ/fv38/AxEAjMGrwqME40jEo3dHCYEZauXg0S4+m41GD6Z2lAQIMAH0NDumVqnWsAAAAAElFTkSuQmCC'/>
</button>
</li>
<li class='cdx-row'>
<button class='be-green be-hover-white be-hover-text-green' onclick='submitTryit(1)'><img alt='Stack Vertically' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAVCAYAAACkCdXRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxMDEwZjgwMC1hMjNhLTdmNGUtOWUxYS0zNzI3ZTFkNGEzZmYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkM1MjhDODhGMkI0MTFFNjgyRUI4MjNCNEE4MDVDQUQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkM1MjhDODdGMkI0MTFFNjgyRUI4MjNCNEE4MDVDQUQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjEwMTBmODAwLWEyM2EtN2Y0ZS05ZTFhLTM3MjdlMWQ0YTNmZiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxMDEwZjgwMC1hMjNhLTdmNGUtOWUxYS0zNzI3ZTFkNGEzZmYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz79LaZZAAACE0lEQVR42oTVS0hUURzH8TujUvRwprT3JqGx6IHYprJt7oMEoXWbaNcLoqDogcyiCUoJpZAWtYhwIWgLIRQKByGqRQSBRZCLHHoM5VCkc/0e+F36c7p35sKHOY//edxzzzmTCsMwqPO04AyquIylxEjXWYwOFPAWv8J/zxAaEtr811kzBtVwASM4j6eY0iBRbCPWJHW2Fa/V0SW0mroVMTNxg7zHdr+z1XiFMg55jXI4i11e+UGU8A4Z21lBM+pSfj3WKn1VdQXlV5lZd6puMOqsHVX0KaBVo73EJBbVYAnPUcQstij+our3ucwt/MYGVbopvwhrP26gFhP/E3fT7I4eTKKk3VLGgtk9D3ECw6asgq8mfgJHA410XaO060tWVf7IW/R7ZnZXsFvlF1xBWr1/0+8xXENK+XFvj4+ZtDsNx237qLN1+h1Fn2lwxOus26Rv4onS2eg4zWHce51n5nXcZ+/FHfP6RS/+MeYDBVW0twLtr6k6X3MaWcW7I/XDrWegRYwW1OU34qMO+UzMlniDzzp+Lv6c6jqjaQ6oYL/ymzXTNPKqu60bw81om+L2aFM/sMepWbt+Hge89dipWXd45Xu13rPREtnKNnzAjZgbosmk3aVwCn8Un0u6z9wrrDT5HRjFGE5iWLMP9QU31bocrRT6zeL/xSfcx+G4No017n7353Aa35FBHl+wmNRgWYABAK+1HeDT4mpcAAAAAElFTkSuQmCC'/>
<b>Run</b></button>
</li>
<li class='cdx-raw be-right be-hide-small'>
<span style='padding:8px 10px 0 0;display:block;float:right;'>
<span id='framesize'>
</span>
</span>
</li>
</ul>
</nav>
<div id='shield'/>
<a href='javascript:void(0)' id='dragbar'/>
<b:if cond='data:view.isHomepage'>
<div id='container'>
<div id='textareacontainer'>
<div id='textarea'>
<div id='textareawrapper'>
<textarea autocomplete='off' id='textareaCode' spellcheck='false' wrap='logical'><!DOCTYPE html>
<html>
<head>
<title>Code Editor</title>
<style type="text/css">
body {
margin: 0 auto 0 auto;
}
#wrap {
margin: 20px auto;
text-align: center
}
a:link{
color: #00ad62;
font-size: 200%;
font-family:segeo ui, arial;
text-decoration:none;
font-weight:bold;
position:fixed;
top:30%;
left:10%;
background: linear-gradient(45deg, #2196F3 25%, #8a54eb 50%, #f760b4 70%); color: transparent; -webkit-background-clip: text;
transition: all 0.3s ease-out;
}
</style>
</head>
<body>
<div id='wrap'>
<a href='https://netridere.blogspot.com/' target='_blank'>Netridere</a>
</div>
</body>
</html></textarea>
<form autocomplete='off' id='codeForm' style='margin:0px;display:none;'>
<input id='code' name='code' type='hidden'/>
</form>
</div>
</div>
</div>
<div id='iframecontainer'>
<div id='iframe'>
<div id='iframewrapper'>
</div>
</div>
</div>
</div>
</b:if>
<article id='post-wrapper'>
<div class='main section' id='main'>
<b:if cond='!data:view.isHomepage'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
<b:widget-settings>
<b:widget-setting name='commentLabel'>Nhận xét</b:widget-setting>
<b:widget-setting name='showShareButtons'>true</b:widget-setting>
<b:widget-setting name='authorLabel'>By</b:widget-setting>
<b:widget-setting name='disableGooglePlusShare'>true</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='timestampLabel'>on</b:widget-setting>
<b:widget-setting name='reactionsLabel'>Phản ứng</b:widget-setting>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLocation'>false</b:widget-setting>
<b:widget-setting name='showTimestamp'>true</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='backlinksLabel'>You might like</b:widget-setting>
<b:widget-setting name='showDateHeader'>true</b:widget-setting>
<b:widget-setting name='style.textcolor'>#000000</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#008000</b:widget-setting>
<b:widget-setting name='showAuthor'>true</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#0000ff</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='postLabelsLabel'>Từ khóa :</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='top'><!-- manage posts in index page -->
<b:if cond='data:mobile == "false"'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<b:if cond='data:mobile == "false"'>
<div class='inline-ad'>
<data:adCode/>
</div>
</b:if>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'><!-- manage older and newer page -->
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> Previous</a></span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Next</a></span>
</b:if>
<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'>Home</a>
</div>
<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a>
</div>
<div class='clear'/>
</div>
</b:includable>
<b:includable id='post' var='post'><!-- Post structure -->
<article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta expr:content='data:post.firstImageUrl' itemprop='url'/>
<meta content='700' itemprop='width'/>
<meta content='700' itemprop='height'/>
</div>
<b:else/>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh06z1Yjz2-CRIRljXt5ZQ5OPZ8cNiIo2_IuQ5RGqcJxPuN-qq9rngU7PL-5ngYDCkQQkawNeahjL9b7bohEPFHqua_FN5UTsqRkwKYRS5doa5TPKY2RwH9s8vyRsdRNaMFQPXKuemYlvA/s72-c/no-thumbnail.jpg' itemprop='url'/>
<meta content='700' itemprop='width'/>
<meta content='700' itemprop='height'/>
</div>
</b:if>
<div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
<div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-h4Sfj04fut8zUhEE-ksVNblq6L_XpnDhJeWwc37cdqo4rZtrEqQH7RyKWpX_KFO7TkQSJk2jilnR0tlyICxqAH54Htr8z6AwbCZVXCwQViGtiHv4dTTQmfJpFsCj2xohMfkDXrCg_pa/s600/logo-ka.png' itemprop='url'/>
<meta content='600' itemprop='width'/>
<meta content='600' itemprop='height'/>
</div>
<meta expr:content='data:blog.title' itemprop='name'/>
</div>
<div itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title' itemprop='headline'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' itemprop='url' rel='bookmark'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' itemprop='url' rel='bookmark'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<!-- Post Meta -->
<div class='thichnet-blog'>You are reading Tutorial from <a href='Welcome to Thủ Thuật Blogspot' target='_blank'>Thủ Thuật Blogspot</a></div>
<!-- Post Meta End -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<div id='container'>
<div id='textareacontainer'>
<div id='textarea'>
<div id='textareawrapper'>
<textarea autocomplete='off' id='textareaCode' spellcheck='false' wrap='logical'>
<data:post.body/>
</textarea>
<br/>
<form autocomplete='off' id='codeForm' style='display: none; margin: 0px;'>
<input id='code' name='code' type='hidden'/>
</form>
</div>
</div>
</div>
<div id='iframecontainer'>
<div id='iframe'>
<div id='iframewrapper'>
</div>
</div>
</div>
</div>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'/>
<b:if cond='data:blog.url == data:post.url'>
<div>
<!-- Share social HTML -->
</div>
</b:if>
</article>
</b:includable>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'><!-- message when you find something- delete if you don't need -->
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div class='clear'/>
</b:if>
</b:includable>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
<aside itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>
<div id='sidebar-right'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
</aside>
</b:if>
<div class='widget HTML' data-version='1' id='HTML6'>
</div>
</div>
</article>
<footer itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPFooter'>
<!-- footer HTML Here -->
</footer>
</div>
</b:if><!-- end if page is not error page -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'/>
<script src='//www.blogger.com/static/v1/jsbin/116666437-codemirror.js'/>
<script src='//rawcdn.githack.com/Shaampc/new-Archive/67893b6d93c1eec8a90caff6ba9086373b4a5818/codedite.js'/>
<!-- NQnia.blogspot.com -->
<script type='text/javascript'>
//<![CDATA[
var setting={exceptionurl:".ly,nqnia.blogspot.com,blgger.com,paypal.me,google.com,twitter.com,whatsapp.com,instagram.com,#,netralid,idntheme.com,goomsite.net,.com,.net,javascript:,mailto:",path:"#?o="};
//]]>
</script>
<script src='https://cdn.jsdelivr.net/gh/Indzign/theme@master/autosafelink.js'/>
<script src='https://www.blogger.com/feeds/6060085619603975811/posts/default?alt=json-in-script&max-results=150&callback=showurl'/>
<!--</body>--> </body>
</HTML>