How to Create Syntax Highlighter Website || With 3d Demo || In Blogger || By Technosahil ||

Hello Friends เคคो เคœैเคธा เค•ि เค†เคช เคฒोเค— เคœाเคจเคคे เคนैं เค•ि เคฌเคนुเคค เคธाเคฐे เคฒोเค— Blogging เค•े เคฆ्เคตाเคฐा เคชैเคธे เค—เคตा เคฐเคนे เคนै। เค…เคชเคจे เคชैเคธों เค•ो เคฌेเคธ्เคŸ เค•เคฐ เคฐเคนे เคนैं। เค‰เคจ्เคนें เคธเคฎเค เคจเคนीं เค† เคฐเคนा เคนै เค•ि เค•ैเคธे Blogger เคชเคฐ Traffic เคฒाเคฏा, เค•ैเคธे Adsense เค•ा Approval เคฒे।



เคคो เคเคธे เคธเคฎเคฏ เคฎें เคฎैंเคจे เค†เคชเค•े เคฒिเค SYNTAX HIGHLIGHTER Tool Website เค•ा Script  เคฒाเคฏा เคนै। เค‡เคธเค•े เคฌाเคฐे เคฎें เค†เคช Article เคฒिเค– เคธเค•เคคे เคนै เค•ी เค•ैเคธे เคฒोเค—ो เค‡เคธे Use เค•เคฐเคจा เคนै เค”เคฐ เค‡เคธे เค…เคชเคจे Blogger เค•े Site เคชเคฐ เคฒเค—ाเค•เคฐ เค†เคช เคชैเคธे เค•เคฎा เคธเค•เคคे เคนैं। เค‡เคธ เคคเคฐเคน เค•ी Website เคชเคฐ เคœเคฒ्เคฆी Adsense Approval เคนोเคคा เคนै। เคคो เค•ैเคธे  เค†เคชเค•ो เค‡เคธे Blogger เคฎें Create เค•เคฐเคจा เคนै เค”เคฐ เค•ैเคธे Code เค•ो Copy เค•เคฐเคจा เคนै เคฏเคน เคธเคฌ Process เคฎैं เค†เคชเค•ो เค‡เคธ Article เคฎें เคฌเคคाเคŠंเค—ा।

So friends เค‡เคธ เค•ोเคก เค•ो Copy เค•เคฐเคจे เค•े เคฒिเค เค†เคชเค•ो เคจीเคšे เคฆिเค เค—เค Steps เค•ो เคชूเคฐा เค•เคฐเคจा เคนोเค—ा।


Syntax Highlighter Tool

เคฌเคนुเคค เคธाเคฐे เคฆोเคธ्เคคों เค•ो เคถाเคฏเคฆ เคชเคคा เคญी เคจाเคฎ เคนो เค•ी เคฏे Syntax Highlighter เค•्เคฏा เคนोเคคा เคนै? เคคो เคฎैं เค†เคชเค•ो เคฌเคคा เคฆेเคจा เคšाเคนเคคा เคนूँ เค•ी เค•िเคธी เคญी Blog Post เคฏा Blog Page เคฎें เคœो Source Code เค‰เคชเคฒเคฌ्เคง เค•เคฐเคตाเคฏा เคœाเคคा เคนै. เค”เคฐ เค‰เคธे เคœिเคธ Format เคฎें Post เคฎें Add เค•िเคฏा เคœाเคคा เคนै เค‰เคธे เคนเคฎ Syntax Highlighter เค•े เคจाเคฎ เคธे เคœाเคจเคคे เคนै.

เคชंเคฐเคคु เค…เคฌ เคธเคฎเคฏ เค•े เคธाเคฅ เคธाเคฅ เคธเคฌ เค•ुเค› Advance เคนोเคคा เคœा เคฐเคนा เคนै. เคเคธे เคฎें เค…เคฌ Normal Syntax Highlighter เค•ो เคญी Advance เคฌเคจा เคฆिเคฏा เค—เคฏा เคนै. เค…เคฌ เค‡เคธเคฎें เค†เคชเค•ो Syntax Highlighter with 3d Background เคญी เคฆेเค–เคจे เค•ो เคฎिเคฒ เคœाเคคा เคนै. เค”เคฐ เค‡เคธเค•ा เคซाเคฏเคฆा เคฏเคน เคนै เค•ी เคธเคญी Codes เคคो เค…เคš्เค›े เคฆिเค–เคคे เคนी เคนै เคฒेเค•िเคจ เค‰เคธเค•े เคธाเคฅ-เคธाเคฅ Text Area Box เค”เคฐ Site เคญी เค…เคš्เค›े เคฆिเค–เคคे เคนै। เคœिเคธเค•े เค•ाเคฐเคฃ Sites เคชเคฐ เคœ्เคฏाเคฆा เคธे เคœ्เคฏाเคฆा Traffic เค†เคคे เคนैं



เค‡เคจ्เคนें เคญी เคชเฅे:-




Steps To Get The Code:-

● เคจीเคšे เคฆिเค เค—เค Download Button เคชเคฐ Click เค•เคฐें

เคคो เคฏเคน เค†เคชเค•ो เคเค• เคจเคฏे Page เคชเคฐ Redirect เค•เคฐ เคฆेเค—ा

● เค…เคฌ เค†เคชเค•ो เคจीเคšे เคธे Scroll เค•เคฐเค•े Continue Download เคชเคฐ Click เค•เคฐเคจा เคนै।

● เค…เคฌ เค†เคช เคจीเคšे Scroll เค•เคฐเค•े Captcha เค•ो Solve เค•เคฐ เคฆें เค”เคฐ Click Here To Download เคชเคฐ Click เค•เคฐें।

● เคซिเคฐ เค†เคชเค•ो Countdown Timer เคฎเคคเคฒเคฌ เค•ी เค‰เคฒ्เคŸी เค—िเคจเคคी เค•เคฐเคคा เคนुเค† เคฌเค•्เคธा เคเค• เค—ोเคฒ เค˜ेเคฐे เคฎें เคฆिเค– เคฐเคนा เคนोเค—ा เคคเคฌ เคคเค• Wait เค•เคฐें เค”เคฐ เคซिเคฐ Get Link เคชเคฐ Click เค•เคฐें।

● เค…เคฌ เค†เคชเค•ो Blue เคฏा Green Colour เค•े เคฌเค•्เคธे เคฎें Code เคฆिเค– เคฐเคนा เคนोเค—ा।

● เค…เคฌ เค†เคช Code เค•ो Copy เค•เคฐ เคฒे।


 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>SYNTAX HIGHLIGHTER </title>  
  <meta name="viewport" content="width=device-width, initial-scale=0.7">  
  <meta name="description" content="Free online syntax Highlighter to highlight all html/javascript/css code with high generate speed."/>  
  <meta name="robots" content="index,follow" />  
  <meta name="keywords" content="Free online syntax Highlighter to highlight all html/javascript/css code with high generate speed." />  
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
 <style id='page-skin-1' type='text/css'><!--  
  .button {  
  border: none;  
  color: white;  
  padding: 16px 32px;  
  text-align: center;  
  text-decoration: none;  
  display: inline-block;  
  font-size: 16px;  
  margin: 4px 2px;  
  transition-duration: 0.4s;  
  cursor: pointer;  
 }  
 .button5 {  
  background-color: #4CAF50; /* Green */  
  border: none;  
  color: white;  
  padding: 15px 32px;  
  text-align: center;  
  text-decoration: none;  
  display: inline-block;  
  font-size: 16px;  
  margin: 4px 2px;  
  cursor: pointer;  
 }  
  .button5:hover {  
  background-color: #008CBA;  
  color: white;  
 }  
 /* CSS Reset */  
 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}  
 /* HTML5 */  
 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{background:transparent;}table{border-collapse:collapse;border-spacing:0;}*,*:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}ins{background:#fff;}  
 /* Body Layout */  
 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;}  
 #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 #footer-wrapper .footer-column{width:33.33%;float:left}  
 #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}  
 /* Layout */  
 body {background:#fafafa;font-family:'Roboto',sans-serif;font-size:14px;font-weight:400;text-align:left;color:#000;margin:0;padding:0;}  
 .navbar,.post-feeds,.feed-links{display:none;}.section,.widget{margin:0;padding:0;}strong,b{font-weight:bold;padding:0;}cite,em,i{font-style:italic;}a:link,a:visited {color:#138be6;text-decoration:none;transition:all .3s}a:hover,a:hover:visited {color:#000}a img{border:none;border-width:0;outline:none;}img{max-width:100%;vertical-align:middle;border:0;}abbr,acronym{border-bottom:1px dotted;cursor:help;}sup,sub{vertical-align:baseline;position:relative;top:-.4em;font-size:86%;}sub{top:.4em;}small{font-size:86%;}kbd{display:inline-block;font-size:90%;color:#138be6;}mark{background-color:#ffce00;color:#182025;}p,blockquote,pre,table,figure,hr,form,ol,ul,dl{margin:1.5em 0;}hr{height:1px;border:none;background-color:#999;}code,kbd,pre,samp{font-family:monospace,monospace;}  
 pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:13px;margin:0;}*:focus {outline:0!important;}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:normal;}h1{font-size:200%}h2{font-size:180%}h3{font-size:160%}h4{font-size:140%}h5{font-size:120%}h6{font-size:100%}  
 .post-body blockquote{position:relative;margin:0 auto;padding:24px 20px 24px 45px;line-height:24px;text-shadow:0 1px 1px white;background-color:#f2f6c1;background-image:-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),-webkit-repeating-linear-gradient(top,transparent 0%,transparent 24px,rgba(239,207,173,0.7) 24px,rgba(239,207,173,0.7) 25px);border:1px solid rgba(0,0,0,0.1);font-family:cursive}  
 .post-body blockquote:before,.post-body blockquote:after{content:'';position:absolute;top:0;bottom:0}  
 .post-body blockquote:before{left:20px;border:4px solid rgba(239,207,173,0.7)}  
 .post-body blockquote:after{z-index:-1;left:0;right:0;background:rgba(242,246,193,0.9);border:1px solid rgba(170,157,134,0.7);transform:rotate(2deg)}  
 .post-body h1{font-size:200%}.post-body h2{font-size:180%}.post-body h3{font-size:160%}.post-body h4{font-size:140%}.post-body h5{font-size:120%}.post-body h6{font-size:100%}  
 .post-body h1 b,.post-body h2 b,.post-body h3 b,.post-body h4 b,.post-body h5 b,.post-body h6 b{font-weight:700;}  
 input,button,select,textarea{font-size:100%;line-height:normal;vertical-align:baseline;}  
 textarea{display:block;box-sizing:border-box;}  
 input.placeholder_text,textarea.placeholder_text{color:#888}  
 input::-webkit-input-placeholder,textarea::-webkit-input-placeholder,input:-moz-placeholder,textarea:-moz-placeholder,input.placeholder_text,textarea.placeholder_text{color:#444}[placeholder]:focus::-webkit-input-placeholder{transition:opacity .5s .5s ease;opacity:0}  
 .post ul li span{position:relative;display:block;padding:0;margin:.5em 0 .5em 2em;text-decoration:none;}  
 ol {counter-reset:li;list-style:none;padding:0;margin:0;}  
 ol ol {margin: 0 0 0 2em;}  
 .post ol li{position:relative;display:block;padding:0;margin:.5em 0 .5em 2em;background:#fff;text-decoration:none;}  
 .post ol li:before {content:counter(li);counter-increment:li;position:absolute;left:-2.5em;height:2em;width:2em;text-align:center;}  
 .post-body ul {position:relative;display:block;padding:0;margin:.5em 0 .5em 1.5em;text-decoration:none;}  
 /* Post Table */  
 .post-body table {width:100%;}  
 .post-body table td,.post-body table caption{background:#fff;border:1px solid rgba(0,0,0,0.05);padding:10px;text-align:left;vertical-align:top}  
 .post-body table th{background:#e74c3c;color:#fff;border:1px solid rgba(0,0,0,0.05);border-bottom:0;padding:10px;text-align:left;vertical-align:top}  
 .post-body table.tr-caption-container {border:1px solid rgba(0,0,0,0.14);margin:0;}  
 .post-body th{font-weight:700;}  
 .post-body table caption{border:none;font-style:italic;}  
 .post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #97b28e;}  
 .post-body th{}  
 .post-body th:hover{color:#fff;}  
 .post-body td a{color:#444;}  
 .post-body td a:hover{color:#cf4d35;}  
 .post-body table.tr-caption-container td{border:0;padding:8px;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#000;}  
 .post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}  
 .post-body li {list-style-type:square;}  
 .post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px!important;}  
 .sr {visibility:hidden;width:0;height:0;}  
 .clear{clear:both}  
 html {-webkit-font-smoothing:antialiased;}  
 ::selection {background:#338fff;text-shadow:none;}  
 .post-body ::selection {background:#aded00;color:#000;}  
 #hen, #feed{background:#000;background-image: url(#);background-size:cover;background-position:center center;background-attachment:fixed;opacity:1; display: block; padding:120px 0px 110px; position: relative; width: 100%;height:250px;}  
 .tube{text-align:center; color:red; line-height:26px;}  
 .tube h3{font-size: 50px; line-height:normal; font-weight: 1000; margin-bottom:26px; color:red;}  
 .tube p{font-size: 20px; display:block; line-height:30px; width:80%; margin:10px auto;font-weight:bold;}  
 .tube oro{color:yellow;font-weight:bold;}  
 .tube dis{color:auto;font-weight:bold;text-decoration:underline;}  
 .tube wp{color:#193e7a;font-weight:bold;text-decoration:none;}  
 .tube tick{color:green;font-weight:bold;font-size:25px;text-decoration:none;}  
 a.gosa{color: white !important;font-family: Arial Black}  
 #support{width:80%;text-align:left;margin-left:10%}  
 .bool{text-align:center;}  
 .bool h4{font-size:24px; line-height:26px; margin-bottom: 15px; padding-top:35px;}  
 .bool hr{ background: #ccc; display: inline-block; border:0; height: 2px; margin-bottom: 20px; width: 40px;}  
 .beeded{margin:0 -13px; }  
 .cand{margin:0 0px 25px; position:relative; }  
 .cand i{color: #ccc; display: block; font-size: 40px; height: 88px; line-height: 88px; width: 88px; transition: width .25s ease, height .25s ease;}  
 .cand h4{color: #000; font-weight: 600; font-size:18px; line-height:26px; margin:12px 0 18px; display:block;}  
 .cand h4 span {background: red; color: #fff; margin-right: 11px; padding:4px 9px;border-radius:100%;}  
 .cand p{font-size: 14px; line-height: 24px; color:#777;}  
 div:hover.cand i{background:#3373bc; color:#fff;}  
 .bow {display: flex; flex-wrap: wrap; margin-left: 0px; margin-right: -12px;}  
 .half {-moz-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding-left: 12px; padding-right: 12px;}  
 .third {-moz-box-flex: 0; -webkit-flex: 0 0 33.3333%; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width:33.3333%; padding-left: 12px; padding-right: 12px;}  
 .quart {-moz-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; padding-left: 12px; padding-right: 12px;}  
 .fifth,.fiver li {-moz-box-flex: 0; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width:20%; padding-left: 12px; padding-right: 12px;}  
 --></style>  
 <style>   
  /* Ardi Video Popup Start */   
  #atpopup { position:fixed;visibility:hidden; opacity:0; margin-top:-300px; }   
  #atpopup:target { visibility:visible; opacity:1; background-color:rgba(20,20,20,0.5); position:fixed; top:0; left:0; right:0; bottom:0; margin:0; z-index:99999999999; -webkit-transition:all 0s; -moz-transition:all 0s; transition:all 1s; }   
  @media (min-width:20%) { .atpopup-container { width:100%; } }   
  @media (max-width:30%) { .atpopup-container { width:100%; } }   
  .atpopup-container { position:relative; margin:7% auto; padding:30px 50px; background-color:rgba(20,20,20,0.2);height:100%; color:#000; border-radius:0; }   
  a.atpopup-close { position:absolute; top:6.5px; right:6.5px; background-color:tranparent; padding:7px 10px; font-size:25px; text-decoration:none; line-height:1; color:red; }   
  h2.post-title{   
  text-align: center;   
  }   
  /* Ardi Video Popup end */   
  /* Ardi Vidbut Start */   
  a.vidbut {background:yellow; text-align:center; padding:20px 0px; border-radius:50px; font-weight:600; width:300px; margin:0px auto 0; display:block; color:#000; transition:all 0.5s ease 0s;}   
  a:hover.vidbut {background:green; color:white;opacity:.9; transform:translateY(8px);}   
  /* Ardi Vidbut end */   
  </style>  
 <style type='text/css'>  
 /* Custom Cookies Info Dark */  
 .cookie-choices-info{background-color:rgba(56,66,75,.97)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;-webkit-transform:translateZ(0);}  
 .cookie-choices-info .cookie-choices-text{font-size:14px!important;color:#cee6ea!important}  
 .cookie-choices-info .cookie-choices-button{font-weight:normal!important;color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#f64c3b!important;letter-spacing:.8px;transition:all .4s linear}  
 .cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .4s linear}  
 .cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#282f36!important;transition:all .1s linear}  
 /* Arlina Fixed Layout */  
 .CSS_LIGHTBOX {z-index:999999!important;}  
 .CSS_LIGHTBOX_BG_MASK_TRANSPARENT {opacity:.95!important;}  
 .CSS_LIGHTBOX_SCALED_IMAGE_IMG {width:auto!important;max-width:100%;box-shadow:0 0 10px rgba(0,0,0,0.1);}  
 .CSS_LIGHTBOX_BTN_CLOSE {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW212Jf9UAxsE7FkUzSuFX-uoCdc_pskBK1r-OxySO40CA2YcyOzgLeyS3Z_2qiRIDaBCSCg-QAXYiKxnA4TbbqSEpMQFBqczFo6_KwMFZFYRPIiNPq-0KWfJvYiUPBXeKHt6xpkeU/s1600/delete.png') no-repeat!important;width:32px!important;height:32px!important;top:30px!important;opacity:0.7;transition:all .3s;}  
 .CSS_LIGHTBOX_BTN_CLOSE:hover{opacity:1;}  
 .CSS_LIGHTBOX_BTN_CLOSE_POS {right:10px!important;}  
 .CSS_LIGHTBOX_BG_MASK{background-color:rgba(0,0,0,0.8)!important}  
 .CSS_LIGHTBOX_FILMSTRIP{background-color:rgba(0,0,0,0.5)!important}  
 .quickedit, br {display:none}  
 .post,.widget-content,.breadcrumbs,.banner .widget,.banner2 .widget,#blog-pager,#comments{}  
 .banner .widget-content,.banner2 .widget-content,#LinkList215 .widget-content{}  
 #BlogArchive1 li.archivedate {padding:0;}  
 #BlogArchive1 #ArchiveList ul.posts li {padding:0 0 0 22px;line-height:normal;}  
 #ArchiveList{padding:10px}  
 #ArchiveList select{width:100%;padding:10px;margin-bottom:5px;border:1px solid rgba(201,201,201,0.52);font-size:13px;font-family:'Roboto',sans-serif}  
 /* Arlina Template Wrapper */  
 .maxiwrap {max-width:970px;margin:0 auto;}  
 #wrapper{background:#fff;display:block;position:relative;overflow:hidden;max-width:970px;margin:0 auto;padding:0;border-left:1px solid rgba(0,0,0,0.1);border-right:1px solid rgba(0,0,0,0.1)}  
 #content-wrapper {display:block;position:relative;overflow:hidden;padding:0;margin:-20px auto 0 auto;}  
 /* Arlina Top */  
 .search-boxs{display:none;width:230px;height:27px;float:right;padding:0;position:relative;transition:all .1s}  
 #search-forms,#searchform,.search-button{border:0;line-height:27px}  
 #searchform{position:relative;border:0;margin:9px 0 0 0}  
 #search-forms{background:rgba(0,0,0,.05);border-radius:3px;color:rgba(0,0,0,.5);width:100%;padding:0 30px 0 10px;height:27px;line-height:27px;font-size:13px;margin:0;border:1px solid rgba(0,0,0,0.05);transition:all .3s}  
 .search-button{background:none;width:30px;padding:0;text-align:center;margin:0;top:0;right:0;font-size:13px;color:#666;position:absolute;border-radius:0;text-shadow:none;box-shadow:none}  
 #search-forms:focus,#search-forms:hover,.search-button:focus,.search-button:hover{background:rgba(0,0,0,0);border-color:rgba(0,0,0,0.14);outline:0;color:rgba(0,0,0,.5)}  
 /* Ardi Header Wrapper */  
 #header{background-color: red;display:block;margin:0 auto;padding:0;word-wrap:break-word;width:100%;position:fixed;z-index:99;height:60px;line-height:60px;-webkit-transform:translateZ(0);transform:translateZ(0)}  
 #header .title{font-size:150%;margin:10px 0 0 0;padding:0;display:inline-block;text-transform: uppercase;width:100%;font-weight:bold}  
 #header .title a{color:#fff;}  
 #header .title a:hover {color:#fff;}  
 #header h1 a:hover,#header h2 a:hover { opacity:.8; }  
 #header h1 a:before, #header h2 a:before{font-family:'FontAwesome'; content:"\f121"; font-size: 20px;}  
 #header p.description{display:none;font-size:90%;margin:5px 0 0 0;line-height:normal;}  
 .header img {display:block;height:auto;}  
 #headerdua {float:left;margin:0 30px 0 0;}  
 /* Arlina Main Navigation */  
 #simplify-two{font-size:0;padding:0;margin:0 auto;float:right}  
 #simplify-two ul.menus{height:auto;overflow:hidden;position:absolute;z-index:99;display:none}  
 #simplify-two a{display:block;text-transform:normal;height:60px;line-height:60px;color:#fff;font-size:20px;font-weight:bold;overflow:hidden;margin:0 20px 0 0}  
 #simplify-two ul > li a i {color:black}  
 #simplify-two ul{margin:0 auto;padding:0;float:left}  
 #simplify-two ul li{position:relative;margin:0;list-style:none}  
 #simplify-two ul > li {float:left;}  
 #simplify-two input {display:none;margin:0;padding:0;width:80px;height:45px;opacity:0;cursor:pointer}  
 #simplify-two label {display:none;width:55px;height:48px;line-height:48px;text-align:center}  
 #simplify-two label span {font-size:16px;position:absolute;left:55px}  
 #simplify-two ul.menus li {display:block;width:100%;text-transform:none;text-shadow:none;}  
 #simplify-two ul.menus a {color:#fff;line-height:55px}  
 #simplify-two li a:hover,#simplify-two ul.menus a:hover {background:rgba(0,0,0,0.03);color:#000;}  
 #simplify-two li ul{display:none;background:#fff;margin:0;height:auto;position:absolute;top:99%;left:0;z-index:12;box-shadow:0 3px 10px 1px rgba(0,0,0,0.14);}  
 #simplify-two li:hover ul.menus,#simplify-two li:hover > ul{visibility:visible;opacity:1;}  
 #simplify-two li li{display:block;float:none;font-size:13px;height:auto;clear:both;margin-left:0;line-height:36px;border-bottom:1px solid rgba(0,0,0,0.05)}  
 #simplify-two li li:last-child {border:0;}  
 #simplify-two li ul ul {left:100%;top:0}  
 #simplify-two li li > a{background:#000;color:#666;display:block;margin:0;text-decoration:none;text-transform:none;min-width:180px;height:36px;line-height:36px;padding:0 13px;font-size:11px;border:0;;border-left:3px solid transparent;margin-top:0}  
 #simplify-two li li a:hover{background:#fdda97;color:#000}  
 /* Arlina search form */  
 #search-me{float:right;margin:0;padding:0;overflow:hidden;width:220px}  
 #search-me table{width:100%;margin:0;position:relative;height:36px}  
 #search-me td.search-boxs1{color:#cbd1e1!important}  
 #search-me input#search-boxs1[type="text"]{background:#3d548f;height:36px;line-height:35px;margin:0;padding:0 10px;width:100%;border:none;color:#cbd1e1!important}  
 #search-me input#search-button1[type="submit"]{font-family:FontAwesome;font-size:17px;background:transparent;color:#fff;height:60px;line-height:60px;margin:0;padding:0 15px;border:none;outline:none;font-weight:normal!important;transition:all 0.25s;position:absolute;right:0;top:0;z-index:2}  
 #search-me input#search-boxs1[type="text"]:focus{background:#3d548f;outline:none;color:#cbd1e1}  
 /* Arlina Post Wrapper */  
 #main-wrapper{width:64.98%;float:left;margin:0;padding:0;word-wrap:break-word;border-right:0px solid red);}  
 .main .Blog{border-bottom-width:0}  
 .main .widget{margin:0;padding:0}  
 .date-header{display:none!important}  
 h1.post-title.entry-title,h2.post-title.entry-title {font-size:18px;margin:0 0 15px;}  
 h1.post-title.entry-title a,h2.post-title.entry-title a{color:#2c4584;}  
 h1.post-title.entry-title a:hover,h2.post-title.entry-title a:hover{color:#138be6;}  
 .post{background:#fff;position:relative;margin:0;padding:0}  
 .post-body {margin:0;line-height:1.7em;text-align:left;font-size:15px;padding:20px;}  
 .post-info abbr {border:0;}  
 .post-timestamp,.author-info,.comment-info,.label-info{padding:0 10px 0 0}  
 .post-body img,.post-body video,.post-body object {background:#fafafa;max-width:100%}  
 .breadcrumbs{background:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;padding:20px;border-bottom:1px solid rgba(0,0,0,0.14);font-weight:700;}  
 .breadcrumbs a{color:#000;margin:0 2px;line-height:normal;}  
 .breadcrumbs .breadhome a{margin:0 5px 0 0}  
 .breadcrumbs .breadlabel:last-child{margin:0 0 0 4px}  
 .breadcrumbs a:hover{color:#138be6;}  
 .post-footer{line-height:1.6em}  
 .post-footer a{color:#97b28e;}  
 .feed-links{clear:both;line-height:2.5em;}  
 /* Arlina Sidebar Wrapper */  
 #sidebar-wrapper{padding:20px;width:35%;float:right;word-wrap:break-word;overflow:hidden}  
 #sidebar-wrapper h2,#sidebar-wrapper h3,#sidebar-wrapper h4{position:relative;overflow:hidden;margin:0;font-size:1rem;vertical-align:middle;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,.1);}  
 #sidebar-wrapper h2 span,#sidebar-wrapper h3 span,#sidebar-wrapper h4 span{display:inline-block;vertical-align:middle}  
 #sidebar-wrapper h2:after,#sidebar-wrapper h3:after,#sidebar-wrapper h4:after{content:'';display:inline-block;position:absolute;height:15px;top:0;margin:3px 0 12px 10px;width:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm9hdGVlW7F3Ak94m_RNjWnZuaxgH2PYkjrkj6pTc5d5_2KV85CnlI-vikfxYBYmlDgHXr82XCZVEVnPSBUrKHZj4BY0qY8U5tPkb62Jhe6utYTb9rD_WJgpYiTZ9zNrMiOP4jpu3PGB1_/s1600/repeat-bg.png)repeat;opacity:.9;}  
 #sidebar-wrapper .widget ul{margin:0;padding:0}  
 .widget-content{margin:0;padding:10px 0;overflow:hidden}  
 .sidebar,.sidebartop {line-height:1.5em;padding:0}  
 .sidebar ul,.sidebartop ul {padding:0;margin:0}  
 .BlogArchive #ArchiveList ul li {text-indent:0!important}  
 .sidebar ul li,.sidebartop ul li{margin:0;padding:10px;border-bottom:1px solid rgba(0,0,0,0.1);}  
 .sidebar .widget{margin:0}  
 .sidebartop .widget{margin:0 0 20px 0}  
 /* About Us */  
 .boxinner{z-index:99;width:100%;height:550px;position:absolute;left:50%;margin-left:-310px;top:70px}  
 .contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}  
 headbanger{background:#3cc091;height:70px;width:100%;position:inherit}  
 #textlogo{background:rgba(0,0,0,0.1);color:#fff;line-height:70px;text-align:center;font-size:200%;position:inherit;width:62.3%;box-sizing:initial}  
 #left{background:#fff;color:#666;top:70px;bottom:0;right:0;padding:20px 0 0 0;width:227px;position:inherit}  
 #left a{color:#888;transition:initial;}#left a:hover{color:#fff;}  
 #left i {margin:0 10px 0 0}  
 .taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;padding:15px;color:#888;}  
 .taber1:hover{background:#ff6733;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}  
 .taber6:hover{background:#383838;color:#fff}.taber7:hover{background:#f39c12;color:#fff}  
 #left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}  
 #aboutus{background:#fafafa;width:62.2%;padding:20px 20px 40px 20px;color:#444;text-align:left;position:inherit;float:left;line-height:normal}  
 #aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}  
 .scrollbarbox{overflow:hidden;text-align:justify;margin:55px 0 0 0}  
 .scrollbarbox .innerone{height:480px;overflow:auto}  
 #popup{display:none;opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}  
 #popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}  
 .popup-container{position:relative;margin:0 auto;padding:20px}  
 a.popup-close{position:absolute;border-radius:50px;right:20px;line-height:60px;margin:0 auto;font-size:16px;text-decoration:none;color:rgba(0,0,0,0.2);font-family:fontawesome}  
 a.popup-close:hover{color:rgba(0,0,0,0.6);}  
 .totalposts{margin:auto;display:table;text-align:center}  
 .totalposts .totalnumber{display:inline;font-weight:700;font-size:300%;color:#888}  
 .totalposts .totallabel{display:block;color:#888;font-weight:700}  
 /* Dropdown Label */  
 .droplabeldo select{outline:none;cursor:pointer;transition:all .6s ease-out}  
 .droplabeldo{display:inline-block;position:relative;overflow:hidden;width:100%;border:0;height:40px;line-height:40px;color:#7f8c8d}  
 .droplabeldo:before,.droplabeldo:after{content:'';position:absolute;z-index:2;top:15px;right:12px;width:0;height:0;line-height:40px;border:4px dashed;border-color:#999 transparent;pointer-events:none}  
 .droplabeldo:before{border-bottom-style:solid;border-top:none}  
 .droplabeldo:after{margin-top:8px;border-top-style:solid;border-bottom:none}  
 .dropdown-select{color:#000;position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:40px;line-height:20px;font-size:13px;border:1px solid rgba(0,0,0,0.1);-webkit-appearance:none;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}  
 .droplabeldo select:hover{border-color:rgba(0,0,0,.34);}  
 .droplabeldo select:focus{outline:none;cursor:pointer;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);}  
 .dropdown-select>option{background:#fafafa;position:relative;display:block;margin:3px;text-shadow:none;outline:0;border:0;cursor:pointer}  
 /* Ardi Footer Wrapper */  
 #footer-wrapper{background:red;color:white;text-align:center;padding:20px 0 0 0;margin:auto;border-top:3px solid #000}  
 .simplifymed a{display:inline-block;text-align:center;margin-top:10px;margin-right:5px;color:#fff;border-radius:100%;opacity:.9;}  
 .simplifymed a i{font-family:Fontawesome;width:32px;height:32px;line-height:32px;display:block}  
 .simplifymed a:hover{color:#fff;opacity:1;transform:rotate(360deg);}  
 .simplifymed .facebook{background:#3b5998}  
 .simplifymed .twitter{background:#00aced}  
 .simplifymed .googleplus{background:#dd4b39}  
 .simplifymed .pinterest{background:#ba1027}  
 .ardi {max-width:1000px;margin:0 auto;}  
 #yasin{clear:both;background:#000;margin:auto;padding:25px 20px;color:red;font-size:15px;display:block;overflow:hidden;border-top:1px solid white;position:relative}  
 #yasin a{color:red}  
 .misra{text-align:left;float:left;font-weight:1000;}  
 .gelma{text-align:right;float:right;font-weight:1000;}  
 .gelma a{color:#fff}  
 .gelma a:hover{color:#fff;}  
 .footer-column{position:relative;margin:0 auto;clear:both;font-size:14px;line-height:24px;overflow:hidden;text-align:left;border-bottom:1px solid rgba(0,0,0,0.1);}  
 .footer-column h3{position:relative;overflow:hidden;margin:0 0 10px 0;font-size:1rem;padding:0 0 10px 0;border-bottom:1px solid black;color:black}  
 .footer-column h3:after{content:'';display:inline-block;position:absolute;height:15px;top:0;margin:3px 0 12px 10px;width:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm9hdGVlW7F3Ak94m_RNjWnZuaxgH2PYkjrkj6pTc5d5_2KV85CnlI-vikfxYBYmlDgHXr82XCZVEVnPSBUrKHZj4BY0qY8U5tPkb62Jhe6utYTb9rD_WJgpYiTZ9zNrMiOP4jpu3PGB1_/s1600/repeat-bg.png)repeat;opacity:7;}  
 .footer-menu{float:left;width:31%;margin:0 20px 0 0}  
 .footer-menu p.footer2{margin:5px auto}  
 .footer-menu ul{margin:0}  
 .footer-menu ul li:before{  
     content: "\f044";  
     font-family:'FontAwesome';  
     display: inline-block;  
   width: 1.2em;}  
 .footer-menu ul li a{color:#fff}  
 .footer-menu ul li a:hover{color:#fff}  
 /* Custom Heading Widget */  
 .footer-column .footer-menu h3:before{content:'\f07c';font-family:fontawesome;font-weight:normal;display:inline-block;margin:0 5px 0 0;color:#95a5a6}  
 .footer-column .footer-menu:nth-child(1) h3:before{content:'\f109';}  
 .footer-column .footer-menu:nth-child(2) h3:before{content:'\f046';}  
 .footer-column .footer-menu:nth-child(3) h3:before{content:'\f003';}  
 /* Subscribe Footer */  
 #subscribe-footer{overflow:hidden;margin:0 0 20px 0;width:33.4%}  
 #subscribe-footer p{margin:1em 0}  
 #subscribe-footer .emailfooter{margin:auto;text-align:center;}  
 #subscribe-footer .emailfooter form{margin:0;padding:0;float:left}  
 #subscribe-footer .emailfooter input{background:rgba(255,255,255,1);padding:9px 12px;color:#999;font-size:14px;margin-bottom:10px;border:1px solid rgba(0,0,0,0.14);transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}  
 #subscribe-footer .emailfooter input:hover{border-color:rgba(0,0,0,.34);}  
 #subscribe-footer .emailfooter input:focus{color:#000;outline:none;border-color:red;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);}  
 #subscribe-footer .emailfooter .submitfooter{background:red;color:#fff;margin:0 0 0 5px;font-size:14px;cursor:pointer;border:1px solid rgba(0,0,0,0.05);border-radius:3px;transition:all .3s}  
 #subscribe-footer .emailfooter .submitfooter:active,#subscribe-footer .emailfooter .submitfooter:hover{background:red;color:#fff;outline:none;box-shadow:none}  
 .sub-wrap{margin:15px auto 0}  
 #subscribe-css{background:red;position:relative;padding:40px 30px;margin:0 6px;border:12px double #fff}  
 #subscribe-css .subscribe-wrapper{color:#000;font-size:16px;line-height:normal;margin:auto;text-align:center;font-weight:400}  
 #subscribe-css .subscribe-form{clear:both;display:block;overflow:hidden;margin:16px auto 0 auto}  
 #subscribe-css form.subscribe-form{clear:both;display:block;margin:0;overflow:hidden;border:0}  
 #subscribe-css input.subscribe-css-email-field{background:#fff;color:#000;letter-spacing:.5px;margin:10px 0;padding:15px 20px;width:100%;border:0;outline:none;border-radius:2px}  
 #subscribe-css input.subscribe-css-email-button{background:#000;color:#fff;letter-spacing:.5px;margin:10px 0;padding:15px 20px;width:100%;border:0;outline:none;border-radius:2px}  
 #subscribe-css input.subscribe-css-email-button:hover{background:#555;color:red;width:100%;box-shadow:0 3px 15px rgba(0,0,0,0.15)}  
  #subscribe-css h3{font-size:70px;}  
 #subscribe-css p.subscribe-note{margin:0 0 16px 0;padding:0 15px;text-align:center;color:#000;font-size:200%;font-style:bold;text-transform:uppercase;letter-spacing:1px;word-wrap:break-word}  
 #subscribe-css .sub-desc{text-align:center;color:#fff;font-size:18px;letter-spacing:1px}  
 /* Popular Post */  
 #PopularPosts1 ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{color:#2c4584;margin:0;padding:0;list-style:none;border:none}  
 #PopularPosts1 ul{margin:0;list-style:none;}  
 #PopularPosts1 ul li{margin:0;padding:10px 0;position:relative;transition:all .3s linear;}  
 #PopularPosts1 ul li:hover {background:rgba(255,255,255,.8);}  
 #PopularPosts1 ul li:last-child{border:0}  
 #PopularPosts1 ul li img{display:block;width:100%;height:auto}  
 #PopularPosts1 ul li .item-title a,.PopularPosts ul li a{font-size:13px;font-weight:700;line-height:1.6;}  
 #PopularPosts1 ul li .item-title a:hover,.PopularPosts ul li a:hover{color:#138be6}  
 #PopularPosts1 .item-thumbnail{margin:0 10px 0 0;overflow:hidden;z-index:2;display:block;position:relative;border-radius:0;width:90px;height:62px;float:left}  
 #PopularPosts1 .item-title{padding:0 5px}  
 #PopularPosts1 ul li:nth-child(1){border-top:none}  
 #PopularPosts1 ul li .item-snippet{color:#999;font-size:13px}  
 /* Social Media */  
 #socialcounter{overflow:hidden;margin:0 0 20px 0}  
 #socialcounter ul{margin:0}  
 #socialcounter ul a{color:#fff}  
 #socialcounter ul li.social_item-wrapper{float:left;width:48%;text-align:center;margin:0 4% 10px 0;color:#fff}  
 #socialcounter ul li a.social_item{position:relative;display:block;opacity:.9;height:50px;line-height:50px;overflow:hidden}  
 #socialcounter ul li.social_item-wrapper:nth-child(2n+2){margin:0}  
 .social_icon{float:left;line-height:50px;width:41px;font-size:1.3rem}  
 #socialcounter ul li a.social_item.social_facebook{background:#3F5B9B}  
 .fa-facebook.social_icon{background:#2E4372}  
 #socialcounter ul li.social_item-wrapper:hover .fa-facebook.social_icon{background:#3F5B9B}  
 #socialcounter ul li.social_item-wrapper:hover .social_facebook{background:#2E4372}  
 #socialcounter ul li a.social_item.social_twitter{background:#1C97DE}  
 .fa-twitter.social_icon{background:#1571A5}  
 #socialcounter ul li.social_item-wrapper:hover .fa-twitter.social_icon{background:#1C97DE}  
 #socialcounter ul li.social_item-wrapper:hover .social_twitter{background:#1571A5}  
 #socialcounter ul li a.social_item.social_youtube{background:#E22020}  
 .fa-youtube.social_icon{background:#B31919}  
 #socialcounter ul li.social_item-wrapper:hover .fa-youtube.social_icon{background:#E22020}  
 #socialcounter ul li.social_item-wrapper:hover .social_youtube{background:#B31919}  
 #socialcounter ul li a.social_item.social_rss{background:#E86321}  
 .fa-rss.social_icon{background:#C2521B}  
 #socialcounter ul li.social_item-wrapper:hover .fa-rss.social_icon{background:#E86321}  
 #socialcounter ul li.social_item-wrapper:hover .social_rss{background:#C2521B}  
 #socialcounter ul li a.social_item.social_google-plus{background:#E82C2C}  
 .fa-google-plus.social_icon{background:#BF2424}  
 #socialcounter ul li.social_item-wrapper:hover .fa-google-plus.social_icon{background:#E82C2C}  
 #socialcounter ul li.social_item-wrapper:hover .social_google-plus{background:#BF2424}  
 #socialcounter ul li a.social_item.social_instagram{background:#8E714D}  
 .fa-instagram.social_icon{background:#6F583C}  
 #socialcounter ul li.social_item-wrapper:hover .fa-instagram.social_icon{background:#8E714D}  
 #socialcounter ul li.social_item-wrapper:hover .social_instagram{background:#6F583C}  
 #socialcounter ul li a.social_item.social_pinterest{background:#CA2027}  
 .fa-pinterest.social_icon{background:#AB1B21}  
 #socialcounter ul li.social_item-wrapper:hover .fa-pinterest.social_icon{background:#CA2027}  
 #socialcounter ul li.social_item-wrapper:hover social_pinterest{background:#AB1B21}  
 /* Banner */  
 .kotak_iklan1 {position:relative;}  
 .kotak_iklan1:before{content:'300x250 Ad';position:absolute;background:rgba(25,25,25,.9);color:#fff;top:0;right:0;padding:2px 8px;font-size:80%}  
 .kotak_iklan1:hover:before{content:'Pasang iklan';}  
 .banner,.banner2{margin:0 auto;text-align:center;overflow:hidden}  
 .banner .widget,.banner2 .widget{width:100%;max-width:100%;margin:0 auto;background:#fff;text-align:center;overflow:hidden;padding:20px}  
 .banner .widget{border-bottom:1px solid rgba(0,0,0,0.1);}  
 .banner2 .widget{border-top:1px solid rgba(0,0,0,0.1);}  
 .banner img,.banner iframe,.banner2 img,.banner2 iframe{display:block;margin:0 auto;text-align:center;height:auto;}  
 .kotak_iklan{text-align:center;margin:0 auto;transition:all 1s ease-out}  
 .kotak_iklan .sidebar .widget-content,.kotak_iklan .sidebar-atas .widget-content{padding:0;border:0}  
 .kotak_iklan .sidebar .widget{margin-bottom:0;padding:0}  
 .kotak_iklan img{background:#fff;text-align:center;margin:0 auto;padding:4px;border:1px solid transparent!important;transition:all .6s ease-out}  
 .kotak_iklan img:hover{background:#fdfdfd;border:1px solid #e6e6e6}  
 .kotak_iklan2,.kotak_iklan3{text-align:center;margin:0 auto;transition:all 1s ease-out}  
 .kotak_iklan2 .sidebar .widget-content,.kotak_iklan2 .sidebar-atas .widget-content{padding:0;background:#f2f6f7;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);border:0}  
 .kotak_iklan2 .sidebar .widget,.kotak_iklan2 .sidebar-atas .widget{margin-bottom:0;padding:0}  
 .kotak_iklan2 img{text-align:center;transition:all 1s ease-out}  
 .kotak_iklan2 img:hover{transition:all .5s ease-out}  
 #HTML2 .widget-content,#HTML3 .widget-content,#HTML4 .widget-content,#HTML5 .widget-content{padding:0;}  
 /* Arlina Global Responsive */  
 @media screen and (max-width:1024px){  
  #hen{width:100%;height:auto;}  
 .tube{text-align:center; color:red; line-height:26px;}  
 .tube h3{font-size: 35px; line-height:normal; font-weight: 600; margin-bottom:26px; color:red;}  
 .tube p{font-size: 25px; display:block; line-height:38px; width:100%; margin:0 auto;}  
 .tube oro{color:orange;font-weight:bold;}  
  .tube dis{display:none}  
 .tube wp{color:#193e7a;font-weight:bold;text-decoration:none;}  
 .tube tick{color:white;font-weight:bold;font-size:25px;text-decoration:none;}  
 @media screen and (max-width:800px) {  
 .quart {-moz-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}  
 #wrapper{overflow:initial}  
 #content-wrapper{background:#fff;margin:0 auto;}  
 #footer-wrapper{border:0}  
 #header{padding:0;height:auto;line-height:normal;text-align:center;border:0;position:relative;z-index:initial;-webkit-transform:initial;transform:initial}  
 #header p.description{display:block;color:#fff}  
 #headerdua {float:none;max-width:100%;padding:20px;margin:0;}  
 #header .title{margin:0 0 5px 0;font-weight:700;}  
 #main-wrapper {float:none;border:0;width:100%;}  
 #sidebar-wrapper {padding: 0 20px;width:100%;float:none;}  
 .simplify-menu,.search-boxs{width:100%;margin:0 auto;padding:10px;}  
 .search-boxs:hover,.search-boxs:active,.search-boxs:focus{width:100%;}  
 #search-boxs{padding:0 0 10px 0}  
 #search-boxs{width:96%;float:left;padding-right:0;margin:0 2%}  
 .search-boxs{height:auto;}  
 #searchform{margin:0 10px}  
 #menu {display:block;}  
 #simplify-two{background:#fff;color:#138be6;font-size:initial;position:relative;display:block;padding:15px;text-transform:uppercase;box-shadow:none;float:none;text-align:left;border-bottom:1px solid rgba(0,0,0,0.14)}  
 #simplify-two ul{background:#fff;position:absolute;top:100%;left:0;z-index:3;height:auto;float:none;display:none}  
 #simplify-two ul > li{float:none}  
 #simplify-two ul.menus{width:100%;position:static;padding-left:20px}  
 #simplify-two li{display:block;float:none;width:auto}  
 #simplify-two li a:hover,#simplify-two ul.menus a:hover{background:#24376a;color:#fff;}  
 #simplify-two a{background:#2c4584;padding:12px;height:initial;line-height:initial;color:#fff;border:0;margin:0}  
 #simplify-two ul > li a i{color:rgba(255,255,255,.5);float:right}  
 #simplify-two input,#simplify-two label{position:absolute;top:0;left:0;display:block}  
 #simplify-two input{z-index:4}  
 #simplify-two input:checked + label{color:#fff}  
 #simplify-two input:checked ~ ul{display:block;width:100%}  
 #simplify-two li:hover > ul{width:100%}  
 #simplify-two li li {border:0;}  
 #simplify-two li li > a{background:#24376a;color:#fff;height:auto;font-size:12px;line-height:30px;padding:0 10px;}  
 #simplify-two li li:hover, #simplify-two li li a:hover {background:#2c4584;color:#fff;}  
 #simplify-two li ul {background:#2c4584;padding:0;position:relative;width:100%;left:initial;box-shadow:none;}  
 #simplify-two li:hover ul.menus,#simplify-two li:hover > ul{left:initial}  
 #simplify-two a i {float:right;}  
 #search-me{display:none}}  
 @media only screen and (max-width:768px) {  
 #headerdua {float:none;max-width:100%;}  
 #sidebar-wrapper,#main-wrapper {width:100%;padding:0 20px 20px 20px;}  
 .sidebar {padding:0;}  
 .sosial-atas li a{color:#fff}  
 .sosial-atas li a:hover,.sosial-atas li:hover a{background:rgba(0,0,0,0.1);color:#fff}  
 .page-menu ul li a:hover,.page-menu ul li:hover a{background:transparent}  
 .footer-menu,#subscribe-footer{float:none;width:auto;margin:0 20px 20px 20px}}  
 @media screen and (max-width:640px) {  
 #footer-wrapper .misra,#footer-wrapper .gelma{float:none;text-align:center}  
 #main-wrapper {width:100%;padding:0 10px 20px 10px;}  
 #sidebar-wrapper {width:100%;padding:0 20px 20px 20px;}  
 .status-msg-border {width:97%}  
 .post h2 {font-size:100%}  
 h1.post-title.entry-title,h2.post-title.entry-title{font-size:16px;margin:0}  
 #simplify-two ul{height:195px;overflow:auto;}  
 #footer-wrapper{margin:auto;border-top:1px solid rgba(0,0,0,0.1)}  
 #footer-wrapper .footbawahkiri,#footer-wrapper .footbawahkanan{float:none;text-align:center}  
 .simplifytotop{width:32px;height:32px;line-height:32px}  
 #footbawah{padding:0 10px 20px 10px;line-height:normal;background:transparent}  
 .search-boxs{background:#fff;display:block;border-bottom:1px solid rgba(0,0,0,0.14);}  
 #search-forms,#searchform,.search-button{line-height:34px}  
 #search-forms{height:34px;line-height:34px}}  
 @media screen and (max-width:500px) {  
 .quart {-moz-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}}  
 @media screen and (max-width:480px) {  
 body{background:#fff}  
 .comments .comments-content .user{line-height:2.8em}  
 .post h2{font-size:100%}  
 .post h1{font-size:120%}  
 body,.body-fauxcolumn-outer{font-size:80%}  
 #header{border:0}  
 #header p.description{line-height:normal}  
 #main-wrapper{padding:0}  
 #sidebar-wrapper{padding:0 10px}  
 .post-body{padding:10px}  
 .breadcrumbs{padding:18px 7px}  
 .widget-content{box-shadow:none;border:0}  
 #simplifynewsletter{margin:0 0 20px 0}  
 .sidebar .widget,.sidebartop .widget {margin:0;}  
 #Label1 .widget-content {padding:20px 10px;}  
 .banner .widget,.banner2 .widget{padding:10px}  
 #subscribe-footer .emailfooter input{width:100%}  
 #subscribe-footer .emailfooter .submitfooter{margin:0}  
 #subscribe-footer .emailfooter form{margin:auto;float:none}}  
 @media screen and (max-width:320px) {  
 body{background:#fff}  
 #sidebar-wrapper{padding:0 10px}  
 .widget-content{padding:12px 0}  
 #HTML2 .widget-content,#HTML3 .widget-content,#HTML4 .widget-content,#HTML5 .widget-content {padding:0}  
 #Label1 .widget-content {padding:20px 0;}}  
 @media screen and (max-width:240px) {  
 body,.body-fauxcolumn-outer {font-size:80%}  
 .simplify-menu ul li{width:50%}  
 #socialcounter ul li.social_item-wrapper{float:none;width:100%}  
 #socialcounter ul li.social_item-wrapper:nth-child(2n+2){margin:0 4% 10px 0}  
 #PopularPosts1 .item-thumbnail,.recent_posts_arlina .wrapinfo,.post-thumb{width:62px!important;height:52px!important}  
 h2.post-title.entry-title,#PopularPosts1 ul li .item-title a,.PopularPosts ul li a,ul.recent_posts_arlina li a{font-size:12px!important}  
 .recent_posts_arlina br{display:none}}  
 .status-msg-body {padding:10px 0;display:none}  
 .status-msg-wrap{display:none;font-size:14px;margin-left:1px;width:100%;color:#666}  
 .status-msg-wrap a{color:orange!important}  
 .status-msg-bg{display:none;background:#ccc;position:relative;width:99%;padding:6px;z-index:1;border:2px #999 solid}  
 .status-msg-border{display:none;border:0;position:relative;width:99%}  
 </style>  
 <style type='text/css'>  
 .post{padding:20px;margin:0;border-bottom:1px solid rgba(0,0,0,0.14);transition:all .3s}  
 .post-body{padding:0;}  
 h1.post-title.entry-title a:hover, h2.post-title.entry-title a:hover {color:#138be6;}  
 h1.post-title.entry-title,h2.post-title.entry-title{margin:0 12px 15px 0}  
 .post-thumb{position:relative;background:#f1f1f1;overflow:hidden;float:left;min-width:200px;height:auto;min-height:150px;margin:0 20px 0 0;transition:all .3s}  
 .post-thumbnail{background:#f1f1f1;width:100%;height:auto;}  
 .post-thumb img{background:#f1f1f1;}  
 .post-thumb .comment-info{position:absolute;top:0;left:0;z-index:5;color:#fff;padding:0}  
 .post-thumb .comment-info a{display:inline-block;background:red;color:#fff;padding:10px}  
 .snippets{font-size:96%;line-height:1.5;margin:0 0 8px 0}  
 .post-timestamp,.author-info,.comment-info{padding:0;margin:0 5px 0 0;}  
 .post-timestamp a abbr.published.updated{border:0;cursor:pointer}  
 .post-info{color:#999;padding:0;overflow:hidden;border:0;margin:0 0 15px;font-size:13px;}  
 .post-info a{color:#999;margin:0 5px 0 0}  
 .post-info a:hover{color:#138be6;}  
 .author-info img.avatar-photo1{height:22px;width:22px;border-radius:100%;margin:0 3px 0 0}  
 .label-info{position:absolute;left:0;top:0;z-index:2;opacity:0;visibility:hidden;transition:all .3s}  
 .post-thumb:hover .label-info{opacity:1;visibility:visible;}  
 .label-info a{display:inline-block;background:#95a5a6;color:rgba(255,255,255,.95);font-size:12px;padding:6px}  
 .label-info a:hover{background:#7f8c8d;color:rgba(255,255,255,1);}  
 /* Page Navigation */  
 #blog-pager{background:#fff;clear:both;width:auto;padding:20px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:0;}  
 .showpage a,.showpageNum a,.showpagePoint{position:relative;background:#2c4584;display:inline-block;font-size:13px;color:#fff;margin:0 4px 0 0;padding:5px 10px;line-height:1.42857143;text-decoration:none;border-radius:3px;transition:all .3s}  
 .showpageOf{float:right;color:#bdc3c7;display:inline-block;font-size:13px;margin:0;padding:6px 0;line-height:1.42857143}  
 .showpageNum:last-child a{}  
 .showpageNum a:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 -2px 2px rgba(0,0,0,0.02);transition:box-shadow 0.5s}  
 .showpage a:hover,.showpageNum a:hover{background:#2ecc71;color:#fff;position:relative;}  
 .showpagePoint,.showpagePoint:hover{background:#2ecc71;color:#fff}  
 span.label-info a.label-block:nth-child(n+2) {display:none;}  
 @media screen and (max-width:768px) {  
 .post,#blog-pager{padding:20px 0}  
 h1.post-title.entry-title a, h2.post-title.entry-title a {margin:15px 0;}}  
 @media screen and (max-width:640px) {  
 .post{margin:0 0 10px 0;padding:10px}  
 .post-thumb{width:150px;margin:0 10px 0 0;min-width:auto;min-height:auto;max-height:200px}  
 .post-thumbnail {width:100%;height:auto;}  
 h1.post-title.entry-title,h2.post-title.entry-title{margin:0 12px 15px 0}  
 h1.post-title.entry-title a, h2.post-title.entry-title a {margin:0 0 10px 0;}  
 .post-info{margin:0 0 10px}  
 #blog-pager {padding:12px 12px 22px 12px;}  
 .snippets{font-size:96%;color:#999}  
 .label-info a{font-size:12px}}  
 @media screen and (max-width:480px) {  
 .post{margin:0}  
 .post-thumb{max-height:180px;width:120px;}  
 h1.post-title.entry-title, h2.post-title.entry-title {margin:0 0 5px 0;}  
 .snippets,.label-info,.comment-info,.showpageOf{display:none}}  
 @media screen and (max-width:320px) {  
 h1.post-title.entry-title,h2.post-title.entry-title{font-size:14px}  
 .post-info{font-size:11px;color:#bbb;}  
 .post-info a{color:#bbb;}  
 .post-thumb{width:90px;}  
 .showpage a,.showpageNum a,.showpagePoint{padding:5px 8px}}  
 @media screen and (max-width:240px) {  
 .post-info{display:none}}  
 </style>  
 <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>  
 <script type='text/javascript'>  
 //<![CDATA[  
 //CSS Ready  
 function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }  
 loadCSS("//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");  
 //]]>  
 </script>  
 <script type='text/javascript'>  
 snippet_count = 80;  
 //<![CDATA[  
 function removeHtmlTag(n,e){if(-1!=n.indexOf("<")){for(var t=n.split("<"),i=0;i<t.length;i++)-1!=t[i].indexOf(">")&&(t[i]=t[i].substring(t[i].indexOf(">")+1,t[i].length));n=t.join("")}for(e=e<n.length-1?e:n.length-2;" "!=n.charAt(e-1)&&-1!=n.indexOf(" ",e);)e++;return n=n.substring(0,e-1),n+"..."}function createSnippet(n){var e=document.getElementById(n),t=snippet_count,i='<div class="snippets">'+removeHtmlTag(e.innerHTML,t)+"..."+"</div>";e.innerHTML=i}  
 //]]>  
 </script>  
 <style>  
 #Blog1 { display: none; }  
 </style>  
 <meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>
</head>  
 <body>  
    <div style="position: relative; background-image: linear-gradient(to right, #eeff00, #d0ff00, #aaff00, #00bcee, #00e3e3); min-height: 100%;">  
 <div class='clear'></div>  
 <style type="text/css">  
                     #CICodeFormatterTable td select{font-size:13px;font-weight:normal;width:20%;}  
                     #CICodeFormatterTable td{font-size:12px;font-weight:normal}  
                     #CICodeFormatter.pre{padding:0px;margin:0px;font-weight:normal;overflow:auto}                 
                </style>  
                <table id="CICodeFormatterTable" border="0" cellspacing="2" cellpadding="4" style="font-size:11px;font-family:verdana;width:100%;">  
                <tr><td style="background:#fffff;height:50px;padding:15px 0px;color:black;font-family:verdana;font-weight:bolder;font-size:15px;">Paste your Code here</td></tr>  
                <tr><td style="background:#fffff;"><textarea id="txtSourceCode" style="width:100%;;height:120px;font-family:arial;font-size:12px;"></textarea></td></tr>  
                <tr><td style="background:#fffff;height:50px;padding:25px 0px;color:black;font-family:verdana;font-weight:bolder;font-size:15px;">Code Block Formatting Options</td></tr>  
                <tr>  
                     <td style="background:#fffff;color:black;font-family:verdana;font-weight:bolder;border-left:0px solid blue;">  
                          <table width="100%" cellspacing="1" cellpadding="2" style="font-size:11px;font-family:verdana">  
                          <tr>  
                          <td width="250" style="background:#fffff">  
                          1) Use in Formatted HTML : </td><td style="background:#fffff"><select id="cbDiv">  
                                         <option selected value="true"/>&lt;div&gt;  
                                         <option value="false"/>&lt;pre&gt;</select>  
                          </td>  
                          </tr>  
                          <tr>  
                          <td width="250" style="background:#fffff">  
                          1) Convert Tab into Spaces : </td><td><select id="cbTabSize">  
                                         <option value="1" />1  
                                         <option value="2" />2  
                                         <option value="3" />3  
                                         <option value="4" />4  
                                         <option selected value="5" />5  
                                         <option value="6" />6  
                                         <option value="7" />7  
                                         <option value="8" />8  
                                         <option value="9" />9  
                                         <option value="10" />10</select>  
                          </td>  
                          </tr>  
                          <tr>  
                          <td>  
                          2) Need Line Code Numbering : </td><td><select id="cbLineNumbering">      
                                         <option value="true" />Yes  
                                         <option selected value="false" />No</select>  
                          </td>  
                          </tr>  
                          <tr>  
                               <td>  
                          3) Remove blank lines : </td><td><select id="cbRemoveBlankLines">  
                                         <option selected value="true" />Yes  
                                         <option value="false" />No</select>  
                          </td>  
                          </tr>  
                                                   <tr>  
                          <td>  
                          4) Embeded styles / Stylesheet : </td><td><select id="cbEmbededStylesheet">  
                                         <option selected value="true" />Yes  
                                         <option value="false" />No</select>  
                          </td>  
                          </tr>  
                          <tr>  
                          <td width="250">  
                          5) Code Block Width : </td><td><select id="cbCodeDivWidth" disabled>  
                                         <option value="auto" />auto width  
                                         <option selected value="99%" />Automatic  
                                         <option value="100px" />100px  
                                         <option value="150px" />150px  
                                         <option value="200px" />200px  
                                         <option value="250px" />250px  
                                         <option value="300px" />300px  
                                         <option value="350px" />350px  
                                         <option value="400px" />400px  
                                         <option value="450px" />450px  
                                         <option value="500px" />500px  
                                         <option value="550px" />550px  
                                         <option value="600px" />600px  
                                         <option value="650px" />650px  
                                         <option value="700px" />700px  
                                         <option value="750px" />750px  
                                         <option value="800px" />800px  
                                         <option value="850px" />850px  
                                         <option value="900px" />900px  
                                         <option value="950px" />950px  
                                         <option value="1000px" />1000px  
                                         </select>  
                          </td>  
                          </tr>  
                          <tr>  
                          <td width="250">  
                          6) Code Block Height : </td><td><select id="cbCodeDivHeight">  
                                         <option selected value="auto" />auto height  
                                         <option value="100%" />100%  
                                         <option value="100px" />100px  
                                         <option value="150px" />150px  
                                         <option value="200px" />200px  
                                         <option value="250px" />250px  
                                         <option value="300px" />300px  
                                         <option value="350px" />350px  
                                         <option value="400px" />400px  
                                         <option value="450px" />450px  
                                         <option value="500px" />500px  
                                         <option value="550px" />550px  
                                         <option value="600px" />600px  
                                         <option value="650px" />650px  
                                         <option value="700px" />700px  
                                         <option value="750px" />750px  
                                         <option value="800px" />800px  
                                         <option value="850px" />850px  
                                         <option value="900px" />900px  
                                         <option value="950px" />950px  
                                         <option value="1000px" />1000px  
                                         </select>  
                          </td>  
                          </tr>  
                          <td width="250">  
                          7) Show the Background : </td><td><select id="cbAlternativeBackground">  
                                         <option selected value="true" />Yes  
                                         <option value="false" />No</select>  
                          </td>  
                          </table>  
                     </td>  
                </tr>  
                <tr>  
                     <td align='right'>  
   <input onclick="showFormattedCode()" type="button" class="button5" style="font-size:18px;font-family:verdana:bold" value="GENERATE CODE"></td>  
                </tr>  
                <tr><td style="background:#fffff;height:50px;padding:20px 0px;color:black;font-family:verdana;font-weight:bolder;font-size:15px;">Copy Formatted Code and paste to your blog HTML editor page</td></tr>  
                <tr><td><textarea id="txtSourceCodeFormat" style="width:100%;;height:120px;font-family:arial;font-size:10px;"></textarea></td></tr>  
                <tr>  
                     <td align="right">  
                          &nbsp;  
                     </td>  
                </tr>  
                <tr><td style="background:#fffff;height:50px;padding:15px 0px;color:black;font-family:verdana;font-weight:bolder;font-size:15px;">Your Code Block will look like the following:</td></tr>  
           </table>  
           <div id="divSourceCodeOutPut" style="padding:0px;width:99%;height:100%">  
           </div>  
           <script language="javascript" type="text/javascript">  
 /********************************************************************************************************  
 * Development : http://techno-sahil.blogspot.com  
 * Author : Ad   
 ********************************************************************************************************/  
 var sourceCodeTextareaObj = "";  
 var sourceCodeFormattedTextareaObj = "";  
 var sourceCodeOutputDivObj = "";  
 var tabSize = "5";  
 var language="";  
 var lineNumbering = true;  
 var removeBlankLines = true;  
 var embededStylesheet = true;  
 var tag=true;  
 var blockWidth="100%";  
 var blockHeight="auto";  
 var alternativeBackground = true;  
 function CICodeFormatter(sourceCodeTextareaObj,sourceCodeFormattedTextareaObj,sourceCodeOutputDivObj){  
      this.sourceCodeTextareaObj = document.getElementById(sourceCodeTextareaObj);   
      this.sourceCodeFormattedTextareaObj = document.getElementById(sourceCodeFormattedTextareaObj);  
      this.sourceCodeOutputDivObj=document.getElementById(sourceCodeOutputDivObj);  
 }  
 CICodeFormatter.prototype.formatSourceCode=function(lang,tag,tabSize,lineNumbering,removeBlankLines,embededStylesheet,blockWidth,blockHeight,alternativeBackground){  
      this.language = lang;  
      this.tag = tag;  
      this.tabSize = tabSize;  
      this.lineNumbering = lineNumbering;  
      this.removeBlankLines = removeBlankLines;  
      this.embededStylesheet = embededStylesheet;  
      this.blockWidth = blockWidth;  
      this.blockHeight = blockHeight;  
      this.alternativeBackground = alternativeBackground;  
      switch(language){  
           case "PHP":  
                break;  
           default:  
                this.formatAnyCode();  
                break;  
      }  
 }  
 CICodeFormatter.prototype.getSourceCode = function(){  
      var sc = this.sourceCodeTextareaObj.value;  
      sc = this.escapeEntities(sc);  
      return sc;  
 }  
 CICodeFormatter.prototype.escapeEntities = function(str){  
      var sc = str;  
      var space = "";  
      for(var i=0;i<this.tabSize;i++){  
           if(this.tag=="true")  
                space+="&nbsp;";  
           else   
                space+=" ";  
      }  
      sc = sc.replace(/ /g," ");  
      sc = sc.replace(/&/g,"&amp;");  
      sc = sc.replace(/</g,"&lt;");  
      sc = sc.replace(/>/g,"&gt;");  
      sc = sc.replace(/\t/g,space);  
      return sc;  
 }  
 CICodeFormatter.prototype.trim=function(str){  
      return str.replace(/^\s+|\s+$/g,"");  
 }  
 CICodeFormatter.prototype.rightTrim=function(str){  
      return str.replace(/^\s+$/,"");  
 }  
 CICodeFormatter.prototype.formatAnyCode = function(){  
      var sourceCode = this.getSourceCode();  
      var fc="";  
      var counter=0;  
      var lines = sourceCode.split('\n');  
      var bg = "#fafafa";  
      var mxChars = "0";  
      var lineNumber = "";  
      var tmp="";  
      var lineStyle = "";  
      var codeStyle = "";  
      var parentStyle = "";  
      var styleSheet = "";  
      for(var i=0;i<lines.length;i++){  
           bg = (counter % 2 == 0 )?"#fafafa":"#ffffff";  
           tmp = (this.removeBlankLines=="true")?lines[i].replace(/&nbsp;/g,"").replace(/ /g,""):lines[i];  
           if(this.trim(tmp)!="" || this.removeBlankLines=="false"){  
                counter++;  
                if(this.embededStylesheet == "true"){  
                     lineStyle = 'style="width:30px;color:gray;"';  
                     //codeStyle = 'style="white-space : nowrap;width:auto;background:'+bg+';"';  
                }  
                if(this.lineNumbering == "true") lineNumber='<span '+lineStyle+'>'+(counter)+' :&nbsp;&nbsp;</span>';  
                if(this.tag=="true"){  
                     fc+= '<div class="CICodeLine'+(counter % 2)+'" '+codeStyle+'>'+lineNumber+''+lines[i]+"</div>";  
                }else{  
                     if(this.lineNumbering == "true"){   
                          var space ="";  
                          fc+=(counter)+': '+lines[i]+' \n';  
                     }else{  
                          fc+=" "+lines[i]+" \n";  
                     }  
                }  
           }  
      }  
      //genratting formatted source code..  
      if(this.embededStylesheet == "true"){  
           //parentStyle='style="font-family:arial;font-size:15px;border:1px dashed #000000;width:'+this.blockWidth+';height:'+this.blockHeight+';overflow:auto;background:#fafafa;"';  
           parentStyle='style="font-family:arial;font-size:15px;border:1px dashed #000000;width:'+this.blockWidth+';height:'+this.blockHeight+';overflow:auto;background:#fafafa;'+((this.tag=="false" && this.alternativeBackground=="true")?";background-image:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42tbcxz22Ju0Sls8q4lzLd0NFNkqiFFTleb9vl4mYItyFbS4zc8c1oJQ1GK0U39kh3WITVRmD3XlR9KIsM4vIgA3f3NFEb7DWoBVjxTrdjN0Rw9Td552nP9Wq-QMVhaF-KCbAh5uRAAZG/s320/codebg.gif);":"")+'padding:0px;color:#000000;text-align:left;line-height:20px;"';  
      }else{  
           styleSheet = this.getStyleSheet();                           
      }  
      if(this.tag=="true"){  
           fc = '<b style="font-family:verdana;font-size:10px;">CODE:</b><br><div style="white-space : nowrap;"><div class="CICodeFormatter" '+parentStyle+'>'+fc+'</div></div>';  
      }else{  
           //fc = '<div style="font-family:verdana;font-size:10px;font-weight:bolder;text-align:left;width:100%;">CODE:</div><pre class="CICodeFormatter" '+parentStyle+'><code>'+fc+'</code></pre>';  
           fc = '<pre '+((this.embededStylesheet == "false")?"class=\"CICodeFormatter\"":"")+' '+parentStyle+'><code '+((this.embededStylesheet == "false")?"class=\"CICodeFormatter\"":"style=\"color:#000000;word-wrap:normal;\"")+'>'+fc+'</code></pre>';  
           //fc = '<pre '+((this.embededStylesheet == "false")?"class=\"CICodeFormatter\"":"")+' '+parentStyle+'>'+fc+'</pre>';  
      }  
      this.sourceCodeFormattedTextareaObj.value=styleSheet+fc;  
      this.sourceCodeOutputDivObj.innerHTML = styleSheet+fc;  
 }  
 CICodeFormatter.prototype.getStyleSheet = function(){  
      var style = "";  
      style = "<style type=\"text/css\">\n";  
      style +="pre.CICodeFormatter{\n\tfont-family:arial;\n\tfont-size:15px;\n\tborder:1px dashed #000000;\n\twidth:"+this.blockWidth+";\n\theight:"+this.blockHeight+";\n\toverflow:auto;\n\tbackground:#fafafa;\n\tline-height:20px;\n\t"+((this.tag=="false" && this.alternativeBackground=="true")?"background-image:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42tbcxz22Ju0Sls8q4lzLd0NFNkqiFFTleb9vl4mYItyFbS4zc8c1oJQ1GK0U39kh3WITVRmD3XlR9KIsM4vIgA3f3NFEb7DWoBVjxTrdjN0Rw9Td552nP9Wq-QMVhaF-KCbAh5uRAAZG/s320/codebg.gif);":"")+"\n\tpadding:0px;\n\tcolor:#ebebeb;\n\ttext-align:left;\n}\n";  
      style +="pre.CICodeFormatter code{\n\tcolor:#ebebeb;\n\tword-wrap:normal;\n}\n";  
      if(this.tag=="true"){  
           style +="div.CICodeFormatter span{\n\twidth:30px;\n\tcolor:gray;\n}\n";  
           style +="div.CICodeFormatter div.CICodeLine1,div.CICodeLine0{\n\twidth:150em;\n\theight:20px;\n\tbackground:#fafafa;\n\twhite-space : nowrap;\n}\n";  
           style +="div.CICodeFormatter div.CICodeLine0{\n\tbackground:#ffffff;\n}\n";  
      }  
      style +="</style>\n";  
      return style;  
 }  
 </script>  
           <!--          <script language="javascript" src="CICodeFormatter.js" type="text/javascript"></script>-->  
           <script language="Javascript">  
                var cf = new CICodeFormatter("txtSourceCode","txtSourceCodeFormat","divSourceCodeOutPut");  
                /*function showFormattedCode(){  
                     cf.formatSourceCode('',  
                                              document.getElementById('cbDiv').value,  
                                              document.getElementById('cbTabSize').value,  
                                              document.getElementById('cbLineNumbering').value,  
                                              document.getElementById('cbRemoveBlankLines').value,  
                                              document.getElementById('cbEmbededStylesheet').value,  
                                              document.getElementById('cbCodeDivWidth').value,  
                                              document.getElementById('cbCodeDivHeight').value);  
                }*/  
                function showFormattedCode(){  
                     cf.formatSourceCode('',  
                                              "false",  
                                              document.getElementById('cbTabSize').value,  
                                              document.getElementById('cbLineNumbering').value,  
                                              document.getElementById('cbRemoveBlankLines').value,  
                                              document.getElementById('cbEmbededStylesheet').value,  
                                              document.getElementById('cbCodeDivWidth').value,  
                                              document.getElementById('cbCodeDivHeight').value,  
                                              document.getElementById('cbAlternativeBackground').value);  
                }  
           </script>  
 <script type='text/javascript'>  
 /*<![CDATA[*/  
 var postperpage=7;var numshowpage=3;var upPageWord ='prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/";  
 /*]]>*/  
 </script>  
 <script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/unlipage.js' type='text/javascript'></script>  
 <script type='text/javascript'>  
 function getCurrentYear(){var e=new Date;return e.getFullYear()}el=document.getElementById("current-year"),el.innerHTML=getCurrentYear();  
 function show(e){document.getElementById(e).style.display="block"}function hide(e){document.getElementById(e).style.display="none"}  
 // Slide toggle  
 $(function(){$("#simplify-click > li").click(function(i){var l=$("ul",this);return $("#simplify-click > li > ul").not(l).slideUp(),l.stop(!0,!0).slideToggle(400),!1}),$("#simplify-click > li > ul > li").click(function(i){i.stopPropagation()})});  
 </script>
 </div>
 </body>
 </html>


เค…เคฌ เคฐเคนी เคฌाเคค เค•ी เค‡เคธ Script เค•ो เค•เคนां เคชเคฐ Paste เค•เคฐเคจा เคนै เค•ैเคธे Syntax Highlighter Website เคฌเคจाเคจा เคนै। เคคो Syntax Highlighter Website เคฌเคจाเคจे เค•े เคฒिเค เค†เคชเค•ो เคจीเคšे เคฆिเค เค—เค Steps เค•ो เคชुเคฐा เค•เคฐเคจा เคนोเค—ा।


Steps to Create Syntax Highlighter Website:-


● เค…เคฌ เค†เคช Blogger เค•े Dashboard เคฎें เคœाเค เคฏा เคซिเคฐ blogger เคฒिเค–เค•เคฐ Search เค•เคฐे।

● เค†เคช New Blog เคชเคฐ Click เค•เคฐें เค”เคฐ เคซिเคฐ เคจाเคฎ Create เค•เคฐ Subdomain Create เค•เคฐเค•े Save เค•เคฐें।

● เคฏเคนाँ เคคเค• เค†เคชเค•ा เค•ाเคฎ เคนो เค—เคฏा เคนै เค†เคชเค•ा Blogger เค•ा Website Create เคนो เค—เคฏा เคนै।

● เค…เคฌ เค†เคช Theme เคชเคฐ Click เค•เคฐ Simple Blog เค•े Theme เค•ो Choose เค•เคฐ Apply เค•เคฐें।

● เค…เคฌ Arrow เคชเคฐ Click เค•เคฐ Mobile Settings เคฎें เคœाเค•เคฐ Mobile View เคธे Desktop View เค•เคฐ เคฆें।

● เคซिเคฐ เคธे Arrow เคชเคฐ Click เค•เคฐเค•े Switch to first generation classic theme เคชเคฐ Click เค•เคฐเค•े Without A backup เค•ो Choose เค•เคฐे।

● เค…เคฌ Edit Html เคชเคฐ Click เค•เคฐ Select All เค•เคฐเค•े Code เค•ो Paste เค•เคฐ เคฆे।

● เค…เคฌ Save เค•े Icon เคชเคฐ Click เค•เคฐ Save เค•เคฐ เคฆे।

Congratulations your Syntax Highlighter Website has been created successfully.


Important Notice:- เค…เค—เคฐ เค†เคชเค•ो เค‡เคธे เค…เคชเคจे เคฆुเคธเคฐे Site เคชเคฐ เคฒเค—ाเคจा เคนै เคคो เค‡เคธ Tool เค•ा Use เค•เคฐे।

IFrame Generator Tool

เคจिเคธ्เค•เคฐ्เคท:- เคคो เคฆोเคธ्เคคों เค†เคชเค•ो Syntax Highlighter Script For Blogger เค•े เคฌाเคฐे เคฎें เคฏเคน Article  เค•ैเคธा เคฒเค—ा Comment เคฎें เคœเคฐूเคฐ เคฌเคคाเคं। เคฏा เค†เคช เคญी เค•िเคธी เคช्เคฐเค•ाเคฐ เค•ा เคธुเคाเคต เคฆेเคจा เคšाเคนเคคे เคนैं, เคคो เค†เคช เคจीเคšे Comment Box เคฎें เค…เคชเคจी เคฐाเคฏ เคนเคฎเคธे Share เค•เคฐ เคธเค•เคคे เคนैं।

Post a Comment

0 Comments