-->
Cara Memasang Syntax Highlighter di Postingan Blogger
Selasa, 01 Januari 2019




Bahastutorial.com - Syntax Highlighter Blogger adalah sebuah kolom yang di isi dengan kode html javascript css ataupun note. Disini kita akan membahas dan mempercantik Syntax Highlighter khusus blogger dengan perpaduan css dan javascript. Syntax Highlighter Sama Seperti Blockquote.Namun Syntax Highlighter Blogger mempunyai kelebihan dari segi css ataupun code bisa langsung di copy dengan one klik atau satu klik.

Cara Penerapan :

1 Masuk Ke Blogger
2 Pilih Template/Tema
3 Kemudian Masuk Ke Edit Html
4 Kode CSS Simpan Di Atas Kode </head>
5 Kode Javascript Simpan Di Atas Kode </body>
6 Kode HTML Simpan Di Postingan/Halaman Page (Mode HTML Bukan Compose)


 

 
  

/* ===== CSS Syntax Highlighter Bahastutorial.com =====*/

code[class*=&quot;language-&quot;],pre[class*=&quot;language-&quot;]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,&#39;Andale Mono&#39;,&#39;Ubuntu Mono&#39;,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;Font-size:15px;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;max-height:300px}
pre[class*=&quot;language-&quot;]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em;border-left:10px solid #1e90ff;box-shadow:0 0 0 2px #f2f2f2}
:not(pre)&gt;code[class*=&quot;language-&quot;],pre[class*=&quot;language-&quot;]{background:#272822}
:not(pre)&gt;code[class*=&quot;language-&quot;]{padding:.1em;border-radius:.3em;white-space:normal}
.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}
.token.punctuation{color:#f8f8f2}
.namespace{opacity:.7}
.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#f92672}
.token.boolean,.token.number{color:#ae81ff}
.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a6e22e}
.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}
.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#e6db74}
.token.keyword{color:#66d9ef}
.token.regex,.token.important{color:#fd971f}
.token.important,.token.bold{font-weight:700}
.token.italic{font-style:italic}
.token.entity{cursor:help}
pre[class*=&quot;language-&quot;].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}
pre[class*=&quot;language-&quot;].line-numbers&gt;code{position:relative;white-space:inherit}
.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.line-numbers-rows&gt;span{pointer-events:none;display:block;counter-increment:linenumber}
.line-numbers-rows&gt;span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
div.code-toolbar{position:relative}
div.code-toolbar&gt;.toolbar{position:absolute;top:.5em;right:20px;transition:opacity 0.3s ease-in-out;opacity:0}
div.code-toolbar:hover&gt;.toolbar{opacity:1}
div.code-toolbar&gt;.toolbar .toolbar-item{display:inline-block}
div.code-toolbar&gt;.toolbar a{cursor:pointer}
div.code-toolbar&gt;.toolbar button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
div.code-toolbar&gt;.toolbar a,div.code-toolbar&gt;.toolbar button,div.code-toolbar&gt;.toolbar span{color:#1e90ff;font-size:15px;padding:5px 20px 5px 20px;background:#f5f2f0;background:none;Border:1px solid #f2f2f2;border-radius:.5em}
div.code-toolbar&gt;.toolbar a:hover,div.code-toolbar&gt;.toolbar a:focus,div.code-toolbar&gt;.toolbar button:hover,div.code-toolbar&gt;.toolbar button:focus,div.code-toolbar&gt;.toolbar span:hover,div.code-toolbar&gt;.toolbar span:focus{color:white;text-decoration:none}
/* ------------------------------------ */

/* ===== CSS Material Tabs =====*/
[ripple] {
  z-index: 1;
  position: relative;
  overflow: hidden;
}
[ripple] .ripple {
  position: absolute;
 
  width: 12px;
  height: 12px;
  border-radius: 100%;
  -webkit-animation: ripple 1.6s;
          animation: ripple 1.6s;
 background: #4285F4;
}

@-webkit-keyframes ripple {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.2;
  }
  100% {
    -webkit-transform: scale(40);
            transform: scale(40);
    opacity: 0;
  }
}

@keyframes ripple {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.2;
  }
  100% {
    -webkit-transform: scale(40);
            transform: scale(40);
    opacity: 0;
  }
}
.tabs {
  z-index: 15px;
  position: relative;
  background: #FFFFFF;
  width: 95%;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 10px 0px 10px 10px;
  overflow: hidden;
border:1px solid #f2f2f2;
 box-shadow: 0px .5vh 5px 0px rgba(0,0,0,.25);
border-right: solid 2px rgba(255, 255, 255, 0.4);
border-top: solid 2px rgba(255, 255, 255, 0.4);
}
.tabs-header {
  position: relative;
  background: #333333;
  overflow: hidden;
height:80px;
border-bottom:2px solid #f2f2f2;
}
.tabs-header .border {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #4285F4;
  width: auto;
  height: 5px;
  transition: 0.3s ease;
margin-left:0px;

}
.tabs-header ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: calc(100% - 68px);
padding-left:0px;
margin-bottom:10px;
margin-top: 10px;
list-style:none;
}
.tabs-header li {
  transition: 0.3s ease;
list-style:none;
}
.tabs-header a {
  z-index: 1;
  display: block;
  box-sizing: border-box;
  padding: 10px 10px 10px 20px;
  color: #FFFFFF;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;

}
.tabs-nav {
  position: absolute;
  top: 0;
  right: 0;
  background: #4285F4;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 10px 10px 0px 10px;
  color: #FFFFFF;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tabs-nav:before {
  content: &#39;&#39;;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.tabs-nav i {
  border-radius: 100%;
  cursor: pointer;
bottom:5px;
}
.tabs-content {
  position: relative;
  padding: 15px 20px 0px 20px;
  transition: 0.3s ease;
  overflow: hidden;
margin-bottom:20px;

}
.tabs-content:after {
  content: &#39;&#39;;
  position: absolute;
  bottom: -1px;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  box-shadow: 0 0 20px 10px #FFFFFF;

}
.tabs-content .tab {
  display: none;
}
.tabs-content .tab.activetab {
  display: block;

}
/* ------------------------------------ */



 

 
  <script>
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-([\w-]+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof r?new r(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function(e,t){var r=n.util.type(e);switch(t=t||{},r){case"Object":if(t[n.util.objId(e)])return t[n.util.objId(e)];var a={};t[n.util.objId(e)]=a;for(var l in e)e.hasOwnProperty(l)&&(a[l]=n.util.clone(e[l],t));return a;case"Array":if(t[n.util.objId(e)])return t[n.util.objId(e)];var a=[];return t[n.util.objId(e)]=a,e.forEach(function(e,r){a[r]=n.util.clone(e,t)}),a}return e}},languages:{extend:function(e,t){var r=n.util.clone(n.languages[e]);for(var a in t)r[a]=t[a];return r},insertBefore:function(e,t,r,a){a=a||n.languages;var l=a[e];if(2==arguments.length){r=arguments[1];for(var i in r)r.hasOwnProperty(i)&&(l[i]=r[i]);return l}var o={};for(var s in l)if(l.hasOwnProperty(s)){if(s==t)for(var i in r)r.hasOwnProperty(i)&&(o[i]=r[i]);o[s]=l[s]}return n.languages.DFS(n.languages,function(t,n){n===a[e]&&t!=e&&(this[t]=o)}),a[e]=o},DFS:function(e,t,r,a){a=a||{};for(var l in e)e.hasOwnProperty(l)&&(t.call(e,l,e[l],r||l),"Object"!==n.util.type(e[l])||a[n.util.objId(e[l])]?"Array"!==n.util.type(e[l])||a[n.util.objId(e[l])]||(a[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,l,a)):(a[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,null,a)))}},plugins:{},highlightAll:function(e,t){n.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,r){var a={callback:r,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};n.hooks.run("before-highlightall",a);for(var l,i=a.elements||e.querySelectorAll(a.selector),o=0;l=i[o++];)n.highlightElement(l,t===!0,a.callback)},highlightElement:function(t,r,a){for(var l,i,o=t;o&&!e.test(o.className);)o=o.parentNode;o&&(l=(o.className.match(e)||[,""])[1].toLowerCase(),i=n.languages[l]),t.className=t.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,t.parentNode&&(o=t.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l));var s=t.textContent,u={element:t,language:l,grammar:i,code:s};if(n.hooks.run("before-sanity-check",u),!u.code||!u.grammar)return u.code&&(n.hooks.run("before-highlight",u),u.element.textContent=u.code,n.hooks.run("after-highlight",u)),n.hooks.run("complete",u),void 0;if(n.hooks.run("before-highlight",u),r&&_self.Worker){var g=new Worker(n.filename);g.onmessage=function(e){u.highlightedCode=e.data,n.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,a&&a.call(u.element),n.hooks.run("after-highlight",u),n.hooks.run("complete",u)},g.postMessage(JSON.stringify({language:u.language,code:u.code,immediateClose:!0}))}else u.highlightedCode=n.highlight(u.code,u.grammar,u.language),n.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,a&&a.call(t),n.hooks.run("after-highlight",u),n.hooks.run("complete",u)},highlight:function(e,t,a){var l={code:e,grammar:t,language:a};return n.hooks.run("before-tokenize",l),l.tokens=n.tokenize(l.code,l.grammar),n.hooks.run("after-tokenize",l),r.stringify(n.util.encode(l.tokens),l.language)},matchGrammar:function(e,t,r,a,l,i,o){var s=n.Token;for(var u in r)if(r.hasOwnProperty(u)&&r[u]){if(u==o)return;var g=r[u];g="Array"===n.util.type(g)?g:[g];for(var c=0;c<g.length;++c){var h=g[c],f=h.inside,d=!!h.lookbehind,m=!!h.greedy,p=0,y=h.alias;if(m&&!h.pattern.global){var v=h.pattern.toString().match(/[imuy]*$/)[0];h.pattern=RegExp(h.pattern.source,v+"g")}h=h.pattern||h;for(var b=a,k=l;b<t.length;k+=t[b].length,++b){var w=t[b];if(t.length>e.length)return;if(!(w instanceof s)){if(m&&b!=t.length-1){h.lastIndex=k;var _=h.exec(e);if(!_)break;for(var j=_.index+(d?_[1].length:0),P=_.index+_[0].length,A=b,x=k,O=t.length;O>A&&(P>x||!t[A].type&&!t[A-1].greedy);++A)x+=t[A].length,j>=x&&(++b,k=x);if(t[b]instanceof s)continue;I=A-b,w=e.slice(k,x),_.index-=k}else{h.lastIndex=0;var _=h.exec(w),I=1}if(_){d&&(p=_[1]?_[1].length:0);var j=_.index+p,_=_[0].slice(p),P=j+_.length,N=w.slice(0,j),S=w.slice(P),C=[b,I];N&&(++b,k+=N.length,C.push(N));var E=new s(u,f?n.tokenize(_,f):_,y,_,m);if(C.push(E),S&&C.push(S),Array.prototype.splice.apply(t,C),1!=I&&n.matchGrammar(e,t,r,b,k,!0,u),i)break}else if(i)break}}}}},tokenize:function(e,t){var r=[e],a=t.rest;if(a){for(var l in a)t[l]=a[l];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var r=n.hooks.all;r[e]=r[e]||[],r[e].push(t)},run:function(e,t){var r=n.hooks.all[e];if(r&&r.length)for(var a,l=0;a=r[l++];)a(t)}}},r=n.Token=function(e,t,n,r,a){this.type=e,this.content=t,this.alias=n,this.length=0|(r||"").length,this.greedy=!!a};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return r.stringify(n,t,e)}).join("");var l={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o=Object.keys(l.attributes).map(function(e){return e+'="'+(l.attributes[e]||"").replace(/"/g,"&quot;")+'"'}).join(" ");return"<"+l.tag+' class="'+l.classes.join(" ")+'"'+(o?" "+o:"")+">"+l.content+"</"+l.tag+">"},!_self.document)return _self.addEventListener?(n.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),r=t.language,a=t.code,l=t.immediateClose;_self.postMessage(n.highlight(a,n.languages[r],r)),l&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return a&&(n.filename=a.src,n.manual||a.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:/<!DOCTYPE[\s\S]+?>/i,cdata:/<!\[CDATA\[[\s\S]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.languages.css,Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<style[\s\S]*?>)[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css",greedy:!0}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(?:true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,"function":/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<<?=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"},constant:/\b[A-Z][A-Z\d_]*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\${[^}]+}/,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}}}),Prism.languages.javascript["template-string"].inside.interpolation.inside.rest=Prism.languages.javascript,Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<script[\s\S]*?>)[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript",greedy:!0}}),Prism.languages.js=Prism.languages.javascript;
!function(){if("undefined"!=typeof self&&self.Prism&&self.document){var t=[],e={},n=function(){};Prism.plugins.toolbar={};var a=Prism.plugins.toolbar.registerButton=function(n,a){var o;o="function"==typeof a?a:function(t){var e;return"function"==typeof a.onClick?(e=document.createElement("button"),e.type="button",e.addEventListener("click",function(){a.onClick.call(this,t)})):"string"==typeof a.url?(e=document.createElement("a"),e.href=a.url):e=document.createElement("span"),e.textContent=a.text,e},t.push(e[n]=o)},o=Prism.plugins.toolbar.hook=function(a){var o=a.element.parentNode;if(o&&/pre/i.test(o.nodeName)&&!o.parentNode.classList.contains("code-toolbar")){var r=document.createElement("div");r.classList.add("code-toolbar"),o.parentNode.insertBefore(r,o),r.appendChild(o);var i=document.createElement("div");i.classList.add("toolbar"),document.body.hasAttribute("data-toolbar-order")&&(t=document.body.getAttribute("data-toolbar-order").split(",").map(function(t){return e[t]||n})),t.forEach(function(t){var e=t(a);if(e){var n=document.createElement("div");n.classList.add("toolbar-item"),n.appendChild(e),i.appendChild(n)}}),r.appendChild(i)}};a("label",function(t){var e=t.element.parentNode;if(e&&/pre/i.test(e.nodeName)&&e.hasAttribute("data-label")){var n,a,o=e.getAttribute("data-label");try{a=document.querySelector("template#"+o)}catch(r){}return a?n=a.content:(e.hasAttribute("data-url")?(n=document.createElement("a"),n.href=e.getAttribute("data-url")):n=document.createElement("span"),n.textContent=o),n}}),Prism.hooks.add("complete",o)}}();
!function(){if(("undefined"==typeof self||self.Prism)&&("undefined"==typeof global||global.Prism)){var i=function(i){return Prism.plugins.autolinker&&Prism.plugins.autolinker.processGrammar(i),i},a={pattern:/(.)\bdata:[^\/]+\/[^,]+,(?:(?!\1)[\s\S]|\\\1)+(?=\1)/,lookbehind:!0,inside:{"language-css":{pattern:/(data:[^\/]+\/(?:[^+,]+\+)?css,)[\s\S]+/,lookbehind:!0},"language-javascript":{pattern:/(data:[^\/]+\/(?:[^+,]+\+)?javascript,)[\s\S]+/,lookbehind:!0},"language-json":{pattern:/(data:[^\/]+\/(?:[^+,]+\+)?json,)[\s\S]+/,lookbehind:!0},"language-markup":{pattern:/(data:[^\/]+\/(?:[^+,]+\+)?(?:html|xml),)[\s\S]+/,lookbehind:!0}}},n=["url","attr-value","string"];Prism.plugins.dataURIHighlight={processGrammar:function(i){i&&!i["data-uri"]&&(Prism.languages.DFS(i,function(i,e,r){n.indexOf(r)>-1&&"Array"!==Prism.util.type(e)&&(e.pattern||(e=this[i]={pattern:e}),e.inside=e.inside||{},"attr-value"==r?Prism.languages.insertBefore("inside",e.inside["url-link"]?"url-link":"punctuation",{"data-uri":a},e):e.inside["url-link"]?Prism.languages.insertBefore("inside","url-link",{"data-uri":a},e):e.inside["data-uri"]=a)}),i["data-uri"]=a)}},Prism.hooks.add("before-highlight",function(n){if(a.pattern.test(n.code))for(var e in a.inside)if(a.inside.hasOwnProperty(e)&&!a.inside[e].inside&&a.inside[e].pattern.test(n.code)){var r=e.match(/^language-(.+)/)[1];Prism.languages[r]&&(a.inside[e].inside={rest:i(Prism.languages[r])})}Prism.plugins.dataURIHighlight.processGrammar(n.grammar)})}}();
!function(){if("undefined"!=typeof self&&self.Prism&&self.document){if(!Prism.plugins.toolbar)return console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."),void 0;var o=window.ClipboardJS||void 0;o||"function"!=typeof require||(o=require("clipboard"));var e=[];if(!o){var t=document.createElement("script"),n=document.querySelector("head");t.onload=function(){if(o=window.ClipboardJS)for(;e.length;)e.pop()()},t.src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js",n.appendChild(t)}Prism.plugins.toolbar.registerButton("copy-to-clipboard",function(t){function n(){var e=new o(i,{text:function(){return t.code}});e.on("success",function(){i.textContent="Berhasil di Copy!",r()}),e.on("error",function(){i.textContent="Press Ctrl+C to copy",r()})}function r(){setTimeout(function(){i.textContent="Ulangi Copy"},5e3)}var i=document.createElement("a");return i.textContent="Copy All",o?n():e.push(n),i})}}();
</script>
<script>
$(document).ready(function() {
  // Intial Border Position
  var activePos = $(".tabs-header .activetab").position();

  // Change Position
  function changePos() {
    // Update Position
    activePos = $(".tabs-header .activetab").position();

    // Change Position & Width
    $(".border")
      .stop()
      .css({
      left: activePos.left,
      width: $(".tabs-header .activetab").width()
    });
  }

  changePos();

  // Intial Tab Height
  var tabHeight = $(".tab.activetab").height();

  // Animate Tab Height
  function animateTabHeight() {
    // Update Tab Height
    tabHeight = $(".tab.activetab").height();

    // Animate Height
    $(".tabs-content")
      .stop()
      .css({
      height: tabHeight + "px"
    });
  }

  animateTabHeight();

  // Change Tab
  function changeTab() {
    var getTabId = $(".tabs-header .activetab a").attr("tab-id");

    // Remove Active State
    $(".tab")
      .stop()
      .fadeOut(300, function() {
      // Remove Class
      $(this).removeClass("activetab");
    })
      .hide();

    $(".tab[tab-id=" + getTabId + "]")
      .stop()
      .fadeIn(300, function() {
      // Add Class
      $(this).addClass("activetab");

      // Animate Height
      animateTabHeight();
    });
  }

  // Tabs
  $(".tabs-header a").on("click", function(e) {
    e.preventDefault();

    // Tab Id
    var tabId = $(this).attr("tab-id");

    // Remove Active State
    $(".tabs-header a")
      .stop()
      .parent()
      .removeClass("activetab");

    // Add Active State
    $(this)
      .stop()
      .parent()
      .addClass("activetab");

    changePos();

    // Update Current Itm
    tabCurrentItem = tabItems.filter(".activetab");

    // Remove Active State
    $(".tab")
      .stop()
      .fadeOut(300, function() {
      // Remove Class
      $(this).removeClass("activetab");
    })
      .hide();

    // Add Active State
    $('.tab[tab-id="' + tabId + '"]')
      .stop()
      .fadeIn(300, function() {
      // Add Class
      $(this).addClass("activetab");

      // Animate Height
      animateTabHeight();
    });
  });

  // Tab Items
  var tabItems = $(".tabs-header ul li");

  // Tab Current Item
  var tabCurrentItem = tabItems.filter(".activetab");

  // Next Button
  $("#nexticon").on("click", function(e) {
    e.preventDefault();

    var nextItem = tabCurrentItem.next();

    tabCurrentItem.removeClass("activetab");

    if (nextItem.length) {
      tabCurrentItem = nextItem.addClass("activetab");
    } else {
      tabCurrentItem = tabItems.first().addClass("activetab");
    }

    changePos();
    changeTab();
  });

  // Prev Button
  $("#previcon").on("click", function(e) {
    e.preventDefault();

    var prevItem = tabCurrentItem.prev();

    tabCurrentItem.removeClass("activetab");

    if (prevItem.length) {
      tabCurrentItem = prevItem.addClass("activetab");
    } else {
      tabCurrentItem = tabItems.last().addClass("activetab");
    }

    changePos();
    changeTab();
  });

  // Ripple
  $("[ripple]").on("click", function(e) {
    var rippleDiv = $('<div class="ripple" />'),
        rippleOffset = $(this).offset(),
        rippleY = e.pageY - rippleOffset.top,
        rippleX = e.pageX - rippleOffset.left,
        ripple = $(".ripple");

    rippleDiv
      .css({
      top: rippleY - ripple.height() / 2,
      left: rippleX - ripple.width() / 2,
      background: $(this).attr("ripple-color")
    })
      .appendTo($(this));
    window.setTimeout(function() {
      rippleDiv.remove();
    }, 1500);
  });
});
</script>

 

<div id="flippy">
<button>BUKA TUTORIAL</button></div>
<div id="flippanel">
<div class="texty">
<div class="tabs">
<div class="tabs-header">
<div class="border">
</div>
<ul>
<li class="activetab"><a href="https://www.blogger.com/blogger.g?blogID=8508612041369103351#tab-1" ripple-color="#4285F4" ripple="ripple" tab-id="1">CSS</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=8508612041369103351#tab-2" ripple-color="#4285F4" ripple="ripple" tab-id="2">JS</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=8508612041369103351#tab-3" ripple-color="#4285F4" ripple="ripple" tab-id="3">HTML</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=8508612041369103351#tab-4" ripple-color="#4285F4" ripple="ripple" tab-id="4">CARA</a></li>
</ul>














<nav class="tabs-nav">
<i class="fa fa-chevron-left" id="previcon" ripple-color="#FFF" ripple="ripple" style="padding-right: 5px;"></i>
<i class="fa fa-chevron-right" id="nexticon" ripple-color="#FFF" ripple="ripple" style="padding-left: 5px;"></i>
</nav></div>
<div class="tabs-content">
<div class="tab activetab" tab-id="1">
<pre><code class="language-css">
Isi Dengan Css</code></pre>



</div>
<div class="tab" tab-id="2">
<pre><code class="language-javascript">
Isi Dengan Javascript
</code></pre>



</div>
<div class="tab" tab-id="3">
<pre><code class="language-html">
Isi Dengan HTML

</code></pre>



</div>
<div class="tab" tab-id="4">
Cara Pemasangan :
1) Simpan Kode Css Tepat Di Atas kode ]]&gt;&lt;b:skin&gt;
2) Simpan Kode Javascript Tepat D


</div>
</div>
</div>

</div>
</div>



Kode Yang Di Edit

ISI DENGAN CSS = Masukan Dengan Kode Css Kalian

ISI DENGAN JAVA SCRIPT = Masukan Dengan Kode JS Kalian

ISI DENGAN HTML = Masukan Dengan Kode HTML Kalian

ISI DENGAN NOTE = Masukan Dengan Kode Note Atau Tutorial Pemasangan Kalian



Bagaimana tutorial kali ini yang di bahas di situs Bahastutorial.com apakah bermanfaat atau sangat berguna buat kalian yang telah mengunjungi situs Bahastutorial.com?Semoga tutorial kali ini sangat bermanfaat buat kalian pengunjung setia situs Bahastutorial.com .. Apabila masi ada yang kurang ngerti dari tutorial di atas silahkan sampaikan dalam kolom komentar ..

kami siap untuk membantu kalian agar kalian nyaman saat mengunjungi situs web Bahastutorial.com. Apabila kalian ingin mengcopy paste Tutorial ini .. Silahkan kalian meminta ijin terlebih dahulu dengan cara meminta izin dalam kolom komentar ..

Apabila tidak meminta izin terlebih dahulu maka dari pihak Bahastutorial.com siap menindak atau melaporkan atas kejahatan me copy paste .. Terima kasih ditunggu ya tutorial selanjutnya salam dari Bahastutorial.com
★ ★ ★ ★ ★

Aturan Komentar : Tanyakan Di Kolom Komentar Apabila Ada Yang Kurang Jelas. Komentar Dengan Sopan . Apabila Ada Yang Kurang Sopan. Admin Akan Otomatis Hapus Komentar Anda.

  • cara berkualitas seo - Pengunjung - 8 Januari 2019 pukul 23.00

    Mantap infonya gan :)
    Infomenarik.site

  • Abu Haqqi - Pengunjung - 13 Januari 2019 pukul 06.28

    mantap gan tutorialnya, tp lbh mantap lg kalau ada demonya juga

  • BAHASTUTORIAL.COM - Pengunjung - 13 Januari 2019 pukul 06.34

    Ada demonya gan .. coba liat ke bawah kalo lewat seluler .. soalnya demonya ada di sidebar gan..

Comment Sekarang
Langganan: Posting Komentar (Atom)