{ Jangan Malas Membaca Ya }
Hello teman blogger, Kali ini ane bakal menjelaskan cara gampang menciptakan kotak script responsive, Pastinya sebagian teman blogger udah tau kan apa fungsi kotak script ini, Bagi yang belum tau Kotak Script itu berfungsi untuk memasukkan script ente yang bakal ente bagikan ke orang lain, Biasanya kalo ente ngeblog dan isinya tentang Tutorial Blog, SEO, dan lain sebagainya niscaya ente harus memperlihatkan script yang nantinya akan di terapkan oleh sang pembaca. Di google banyak kok kotak script yang sederhana tapi kali ini ane bakal ngasih Kotak Script yang tampilannya keren, gampang dipasang dan yummy dilihat, Kotak script ini ane dapetin dari Arlina Design dan sudah ane praktekin di blog ane sendiri. Oke pribadi saja ane kasih tau bagaimana cara membuatnya...
Perhatikan tahap demi tahapnya
- Login ke blogger
- Masuk ke Dashboard ente
- Masuk ke Template --> Edit HTML --> Salin script di bawah ini dan taruh diatas </style>
/* CSS Prism Syntax Highlighter */ pre { padding: 50px 10px 10px 10px; margin: .5em 0; -space: pre; word-wrap: break-word; overflow: auto; background-color: #2c323c; position: relative; border-radius: 4px; max-height: 500px; } pre::before { font-size: 16px; content: attr(title); position: absolute; top: 0; background-color: #eee; padding: 10px; left: 0; right: 0; color: #fff; text-transform: uppercase; display: block; margin: 0 0 15px 0; font-weight: bold; } pre::after { content: 'Klik 2 kali untuk menyeleksi semua'; padding: 2px 10px; width: auto; height: auto; position: absolute; right: 8px; top: 8px; color: #fff; line-height: 20px; transition: all 0.3s ease-in-out; } pre:hover::after { opacity: 0; top: -8px; visibility: visible; } code { font-family: Consolas,Monaco,' Andale Mono','Courier New',Courier,Monospace; line-height: 16px; color: #88a9ad; background-color: transparent; padding: 1px 2px; font-size: 12px; } pre code { display: block; background: none; border: none; color: #e9e9e9; direction: ltr; text-align: left; word-spacing: normal; padding: 0 0; font-weight: bold; } code .token.punctuation { color: #ccc; } pre code .token.punctuation { color: #fafafa; } code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata { color: #777; } code .namespace { opacity: .8; } code .token.property,code .token.tag,code .token.boolean,code .token.number { color: #e5dc56; } code .token.selector,code .token.attr-name,code .token.string { color: #88a9ad; } pre code .token.selector,pre code .token.attr-name { color: #fafafa; } pre code .token.string { color: #40ee46; } code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string { color: #ccc; } code .token.operator { color: #1887dd; } code .token.atrule,code .token.attr-value { color: #009999; } pre code .token.atrule,pre code .token.attr-value { color: #1baeb0; } code .token.keyword { color: #e13200; font-style: italic; } code .token.comment { font-style: italic; } code .token.regex { color: #ccc; } code .token.important { font-weight: bold; } code .token.entity { cursor: help; } pre mark { background-color: #ea4f4e!important; color: #fff!important; padding: 2px; border-radius: 2px; } code mark { background-color: #ea4f4e!important; color: #fff!important; padding: 2px; border-radius: 2px; } pre code mark { background-color: #ea4f4e!important; color: #fff!important; padding: 2px; border-radius: 2px; } .comments pre { padding: 10px 10px 15px 10px; background: #2c323c; } .comments pre::before { content: 'Code'; font-size: 13px; position: relative; top: 0; background-color: #f56954; padding: 3px 10px; left: 0; right: 0; color: #fff; text-transform: uppercase; display: inline-block; margin: 0 0 10px 0; font-weight: bold; border-radius: 4px; border: none; } .comments pre::after { font-size: 11px; } .comments pre code { color: #eee; } .comments pre.line-numbers { padding-left: 10px; } pre.line-numbers { position: relative; padding-left: 3.0em; counter-reset: linenumber; } pre.line-numbers > code { position: relative; } .line-numbers .line-numbers-rows { height: 100%; position: absolute; pointer-events: none; top: 0; font-size: 100%; left: -3.5em; width: 3em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; padding: 0; } .line-numbers-rows > span { pointer-events: none; display: block; counter-increment: linenumber; } .line-numbers-rows > span:before { content: counter(linenumber); color: #999; display: block; padding-right: 0.8em; text-align: right; transition: 350ms; } pre[data-codetype='CSSku']:before { background-color: #00a1d6; } pre[data-codetype='HTMLku']:before { background-color: #3cc888; } pre[data-codetype='JavaScriptku']:before { background-color: #75d6d0; } pre[data-codetype='JQueryku']:before { background-color: #e5b460; }
- Simpan 3 Script dibawah ini tepatnya diatas </body> atau </head>
<script src='https://sites.google.com/site/akubisagila123/co-paz/SyntaxHighlighterbyco-paz.js' type='text/javascript'/>
<script> $('pre').attr('class', 'line-numbers'); Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span/>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)}) </script>
<script type='text/javascript'> var pres = document.getElementsByTagName("pre"); for (var i = 0; i < pres.length; i++) { pres[i].addEventListener("dblclick", function () { var selection = getSelection(); var range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(range); }, false); } </script>
Simpan Template anda Apa jika anda ingin menerapkannya di dalam postingan jangan lupa untuk menyertakan script dibawah ini <pre title="Cara gampang menciptakan kotak script responsive dalam postingan Blog" data-codetype ="HTMLku"><code class="language-markup"> ... instruksi HTML (yang sudah di`escape`) di sini ... </code></pre> <pre title="Cara gampang menciptakan kotak script responsive dalam postingan Blog" data-codetype ="CSSku"><code class="language-css"> ... instruksi CSS di sini ... </code></pre> <pre title="Cara gampang menciptakan kotak script responsive dalam postingan Blog" data-codetype ="JavaScriptku"><code class="language-javascript"> ... instruksi JavaScript di sini ... </code></pre> <pre title="Cara gampang menciptakan kotak script responsive dalam postingan Blog" data-codetype ="JQueryku"><code class="language-javascript"> ... instruksi jQuery di sini ... </code></pre>
Jika anda masih resah cara pemakaiannya mungkin anda harus berkomentar di blog ini
Sekian tutorial yang dapat saya sampaikan, Jika anda mengalami kesulitan mengenai tutorial yang saya buat .. Anda dapat bertanya di kolom komentar yang sudah saya sediakan.
Selamat Mencoba, Semoga Bermanfaat... ^_^
- Login ke blogger
- Masuk ke Dashboard ente
- Masuk ke Template --> Edit HTML --> Salin script di bawah ini dan taruh diatas </style>
/* CSS Prism Syntax Highlighter */ pre { padding: 50px 10px 10px 10px; margin: .5em 0; -space: pre; word-wrap: break-word; overflow: auto; background-color: #2c323c; position: relative; border-radius: 4px; max-height: 500px; } pre::before { font-size: 16px; content: attr(title); position: absolute; top: 0; background-color: #eee; padding: 10px; left: 0; right: 0; color: #fff; text-transform: uppercase; display: block; margin: 0 0 15px 0; font-weight: bold; } pre::after { content: 'Klik 2 kali untuk menyeleksi semua'; padding: 2px 10px; width: auto; height: auto; position: absolute; right: 8px; top: 8px; color: #fff; line-height: 20px; transition: all 0.3s ease-in-out; } pre:hover::after { opacity: 0; top: -8px; visibility: visible; } code { font-family: Consolas,Monaco,' Andale Mono','Courier New',Courier,Monospace; line-height: 16px; color: #88a9ad; background-color: transparent; padding: 1px 2px; font-size: 12px; } pre code { display: block; background: none; border: none; color: #e9e9e9; direction: ltr; text-align: left; word-spacing: normal; padding: 0 0; font-weight: bold; } code .token.punctuation { color: #ccc; } pre code .token.punctuation { color: #fafafa; } code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata { color: #777; } code .namespace { opacity: .8; } code .token.property,code .token.tag,code .token.boolean,code .token.number { color: #e5dc56; } code .token.selector,code .token.attr-name,code .token.string { color: #88a9ad; } pre code .token.selector,pre code .token.attr-name { color: #fafafa; } pre code .token.string { color: #40ee46; } code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string { color: #ccc; } code .token.operator { color: #1887dd; } code .token.atrule,code .token.attr-value { color: #009999; } pre code .token.atrule,pre code .token.attr-value { color: #1baeb0; } code .token.keyword { color: #e13200; font-style: italic; } code .token.comment { font-style: italic; } code .token.regex { color: #ccc; } code .token.important { font-weight: bold; } code .token.entity { cursor: help; } pre mark { background-color: #ea4f4e!important; color: #fff!important; padding: 2px; border-radius: 2px; } code mark { background-color: #ea4f4e!important; color: #fff!important; padding: 2px; border-radius: 2px; } pre code mark { background-color: #ea4f4e!important; color: #fff!important; padding: 2px; border-radius: 2px; } .comments pre { padding: 10px 10px 15px 10px; background: #2c323c; } .comments pre::before { content: 'Code'; font-size: 13px; position: relative; top: 0; background-color: #f56954; padding: 3px 10px; left: 0; right: 0; color: #fff; text-transform: uppercase; display: inline-block; margin: 0 0 10px 0; font-weight: bold; border-radius: 4px; border: none; } .comments pre::after { font-size: 11px; } .comments pre code { color: #eee; } .comments pre.line-numbers { padding-left: 10px; } pre.line-numbers { position: relative; padding-left: 3.0em; counter-reset: linenumber; } pre.line-numbers > code { position: relative; } .line-numbers .line-numbers-rows { height: 100%; position: absolute; pointer-events: none; top: 0; font-size: 100%; left: -3.5em; width: 3em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; padding: 0; } .line-numbers-rows > span { pointer-events: none; display: block; counter-increment: linenumber; } .line-numbers-rows > span:before { content: counter(linenumber); color: #999; display: block; padding-right: 0.8em; text-align: right; transition: 350ms; } pre[data-codetype='CSSku']:before { background-color: #00a1d6; } pre[data-codetype='HTMLku']:before { background-color: #3cc888; } pre[data-codetype='JavaScriptku']:before { background-color: #75d6d0; } pre[data-codetype='JQueryku']:before { background-color: #e5b460; } - Simpan 3 Script dibawah ini tepatnya diatas </body> atau </head>
<script src='https://sites.google.com/site/akubisagila123/co-paz/SyntaxHighlighterbyco-paz.js' type='text/javascript'/><script> $('pre').attr('class', 'line-numbers'); Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span/>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)}) </script><script type='text/javascript'> var pres = document.getElementsByTagName("pre"); for (var i = 0; i < pres.length; i++) { pres[i].addEventListener("dblclick", function () { var selection = getSelection(); var range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(range); }, false); } </script><pre title="Cara gampang menciptakan kotak script responsive dalam postingan Blog" data-codetype ="HTMLku"><code class="language-markup"> ... instruksi HTML (yang sudah di`escape`) di sini ... </code></pre> <pre title="Cara gampang menciptakan kotak script responsive dalam postingan Blog" data-codetype ="CSSku"><code class="language-css"> ... instruksi CSS di sini ... </code></pre> <pre title="Cara gampang menciptakan kotak script responsive dalam postingan Blog" data-codetype ="JavaScriptku"><code class="language-javascript"> ... instruksi JavaScript di sini ... </code></pre> <pre title="Cara gampang menciptakan kotak script responsive dalam postingan Blog" data-codetype ="JQueryku"><code class="language-javascript"> ... instruksi jQuery di sini ... </code></pre> Sekian tutorial yang dapat saya sampaikan, Jika anda mengalami kesulitan mengenai tutorial yang saya buat .. Anda dapat bertanya di kolom komentar yang sudah saya sediakan.
Selamat Mencoba, Semoga Bermanfaat... ^_^
Selamat Mencoba, Semoga Bermanfaat... ^_^
