Notification texts go here. Contact Us Buy Now!
$10.00
10
$000

Get your blog ready With details you won't find anywhere.

How to Create a Beautiful Code Frame for Your Blogspot

abdalrahman
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

The beautification of your blog must be of interest to everyone, right. Your blog is beautiful when all the components in the blog must be beautiful, right? Then the article is one of them. Today I will show you how to add a code frame for your blog.



How to create a frame containing code for a blog .


Step 1: Select Theme -> Edit HTML.

Step 2 Paste the following CSS in the style tag - /style or above the tag /b:skin

pre {    padding: .5em 1em;    margin: .5em 0;    white-space: pre;    word-wrap: normal;    overflow: auto;    background-color: #1B2426;}code {    font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, Monospace;    line-height: 16px;    color: #B43D3D;    background-color: #eee;    border: 1px solid #ddd;    padding: 1px 2px;}pre code {    display: block;    background: none;    border: none;    color: #B9BDB6;    direction: ltr;    text-align: left;    word-spacing: normal;    padding: 0 0;}code .token.punctuation {    color: #83405A;}pre code .token.punctuation {    color: #B9BDB6;}code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {    color: #435A4D;}code .namespace {    opacity: .8;}code .token.property,code .token.tag,code .token.boolean,code .token.number {    color: #5BA1CF;}code .token.selector,code .token.attr-name,code .token.string {    color: #986A7C;}pre code .token.selector,pre code .token.attr-name,pre code .token.string {    color: #E0E8FF;}code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {    color: #E0E8FF;}code .token.operator {    color: #878A85;}code .token.atrule,code .token.attr-value {    color: #48D30F;}pre code .token.atrule,pre code .token.attr-value {    color: #48E638;}code .token.keyword {    color: #47A1CF;    font-style: italic;}code .token.comment {    font-style: italic;}code .token.regex {    color: #B43D3D;}code .token.important {    font-weight: bold;}code .token.entity {    cursor: help;}


Step 3: Add the following JavaScript above the /head or /body tag.

<script>//<![CDATA[/** * Prism: Lightweight, robust, elegant syntax highlighting * MIT license http://www.opensource.org/licenses/mit-license.php/ * @author Lea Verou http://lea.verou.me */ ! function () { var a = /blang(?:uage)?-(?!*)(w+)b/i, b = self.Prism = { languages: { insertBefore: function (a, c, d, e) { e = e || b.languages; var f = e[a], g = {}; for (var h in f) if (f.hasOwnProperty(h)) { if (h == c) for (var i in d) d.hasOwnProperty(i) && (g[i] = d[i]); g[h] = f[h] } return e[a] = g }, DFS: function (a, c) { for (var d in a) c.call(a, d, a[d]), "[object Object]" === Object.prototype.toString.call(a) && b.languages.DFS(a[d], c) } }, highlightAll: function (a, c) { for (var f, d = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'), e = 0; f = d[e++];) b.highlightElement(f, a === !0, c) }, highlightElement: function (d, e, f) { for (var g, h, i = d; i && !a.test(i.className);) i = i.parentNode; if (i && (g = (i.className.match(a) || [, ""])[1], h = b.languages[g]), h) { d.className = d.className.replace(a, "").replace(/s+/g, " ") + " language-" + g, i = d.parentNode, /pre/i.test(i.nodeName) && (i.className = i.className.replace(a, "").replace(/s+/g, " ") + " language-" + g); var j = d.textContent.trim(); if (j) { j = j.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/u00a0/g, " "); var k = { element: d, language: g, grammar: h, code: j }; if (b.hooks.run("before-highlight", k), e && self.Worker) { var l = new Worker(b.filename); l.onmessage = function (a) { k.highlightedCode = c.stringify(JSON.parse(a.data)), k.element.innerHTML = k.highlightedCode, f && f.call(k.element), b.hooks.run("after-highlight", k) }, l.postMessage(JSON.stringify({ language: k.language, code: k.code })) } else k.highlightedCode = b.highlight(k.code, k.grammar), k.element.innerHTML = k.highlightedCode, f && f.call(d), b.hooks.run("after-highlight", k) } } }, highlight: function (a, d) { return c.stringify(b.tokenize(a, d)) }, tokenize: function (a, c) { var d = b.Token, e = [a], f = c.rest; if (f) { for (var g in f) c[g] = f[g]; delete c.rest } a: for (var g in c) if (c.hasOwnProperty(g) && c[g]) { var h = c[g], i = h.inside, j = !!h.lookbehind || 0; h = h.pattern || h; for (var k = 0; k < e.length; k++) { var l = e[k]; if (e.length > a.length) break a; if (! (l instanceof d)) { h.lastIndex = 0; var m = h.exec(l); if (m) { j && (j = m[1].length); var n = m.index - 1 + j, m = m[0].slice(j), o = m.length, p = n + o, q = l.slice(0, n + 1), r = l.slice(p + 1), s = [k, 1]; q && s.push(q); var t = new d(g, i ? b.tokenize(m, i) : m); s.push(t), r && s.push(r), Array.prototype.splice.apply(e, s) } } } } return e }, hooks: { all: {}, add: function (a, c) { var d = b.hooks.all; d[a] = d[a] || [], d[a].push(c) }, run: function (a, c) { var d = b.hooks.all[a]; if (d && d.length) for (var f, e = 0; f = d[e++];) f(c) } } }, c = b.Token = function (a, b) { this.type = a, this.content = b }; if (c.stringify = function (a) { if ("string" == typeof a) return a; if ("[object Array]" == Object.prototype.toString.call(a)) { for (var d = 0; d < a.length; d++) a[d] = c.stringify(a[d]); return a.join("") } var e = { type: a.type, content: c.stringify(a.content), tag: "span", classes: ["token", a.type], attributes: {} }; "comment" == e.type && (e.attributes.spellcheck = "true"), b.hooks.run("wrap", e); var f = ""; for (var g in e.attributes) f += g + '="' + (e.attributes[g] || "") + '"'; return "<" + e.tag + ' ") + '" ' + f + ">" + e.content + "</" + e.tag + ">" }, !self.document) return void self.addEventListener("message", function (a) { var c = JSON.parse(a.data), d = c.language, e = c.code; self.postMessage(JSON.stringify(b.tokenize(e, b.languages[d]))), self.close() }, !1); var d = document.getElementsByTagName("script"); d = d[d.length - 1], d && (b.filename = d.src, document.addEventListener && !d.hasAttribute("data-manual") && document.addEventListener("DOMContentLoaded", b.highlightAll)) } (), Prism.languages.markup = { comment: /&lt;!--[wW]*?--(&gt;|&gt;)/g, prolog: /&lt;?.+??&gt;/, doctype: /&lt;!DOCTYPE.+?&gt;/, cdata: /&lt;![CDATA[[wW]+?]]&gt;/i, tag: { pattern: /&lt;/?[w:-]+s*[wW]*?&gt;/gi, inside: { tag: { pattern: /^&lt;/?[w:-]+/i, inside: { punctuation: /^&lt;/?/, namespace: /^[w-]+?:/ } }, "attr-value": { pattern: /=(('|")[wW]*?(2)|[^s>]+)/gi, inside: { punctuation: /=/g } }, punctuation: //?&gt;/g, "attr-name": { pattern: /[w:-]+/g, inside: { namespace: /^[w-]+?:/ } } } }, entity: /&amp;#?[da-z]{1,8};/gi }, Prism.hooks.add("wrap", function (a) { "entity" === a.type && (a.attributes.title = a.content.replace(/&amp;/, "&")) }), Prism.languages.css = { comment: //*[wW]*?*//g, atrule: /@[w-]+?(s+.+)?(?=s*{|s*;)/gi, url: /url((["']?).*?1)/gi, selector: /[^{}s][^{}]*(?=s*{)/g, property: /(b|B)[a-z-]+(?=s*:)/gi, string: /("|')(\?.)*?1/g, important: /B!importantb/gi, ignore: /&(lt|gt|amp);/gi, punctuation: /[{};:]/g }, Prism.languages.markup && Prism.languages.insertBefore("markup", "tag", { style: { pattern: /(&lt;|<)style[wW]*?(>|&gt;)[wW]*?(&lt;|<)/style(>|&gt;)/gi, inside: { tag: { pattern: /(&lt;|<)style[wW]*?(>|&gt;)|(&lt;|<)/style(>|&gt;)/gi, inside: Prism.languages.markup.tag.inside }, rest: Prism.languages.css } } }), Prism.languages.javascript = { comment: { pattern: /(^|[^\])(/*[wW]*?*/|//.*?(r?n|$))/g, lookbehind: !0 }, string: /("|')(\?.)*?1/g, regex: { pattern: /(^|[^/]) / ( ? ! / )( [. + ?] | \. | [ ^ /rn])+/[gim]{0,3}(?=s*($|[rn,.;})]))/g, lookbehind: !0 }, keyword: /b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)b/g, "boolean": /b(true|false)b/g, number: /b-?(0x)?d*.?d+b/g, operator: /[-+]{1,2}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}||?||?|*|//g, ignore: /&(lt|gt|amp);/gi, punctuation: /[{}[];(),.:]/g }, Prism.languages.markup && Prism.languages.insertBefore("markup", "tag", { script: { pattern: /(&lt;|<)script[wW]*?(>|&gt;)[wW]*?(&lt;|<)/script(>|&gt;)/gi, inside: { tag: { pattern: /(&lt;|<)script[wW]*?(>|&gt;)|(&lt;|<)/script(>|&gt;)/gi, inside: Prism.languages.markup.tag.inside }, rest: Prism.languages.javascript } } }), Prism.languages.java = { comment: { pattern: /(^|[^\])(/*[wW]*?*/|//.*?(r?n|$))/g, lookbehind: !0 }, string: /("|')(\?.)*?1/g, keyword: /b(abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while)b/g, "boolean": /b(true|false)b/g, number: /b0b[01]+b|b0x[da-f]*.?[da-fp-]+b|bd*.?d+[e]?[d]*[df]b|Wd*.?d+b/gi, operator: { pattern: /([^.]|^)([-+]{1,2}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}||?||?|*|/|%|^|(&lt;){2}|($gt;){2,3}|:|~)/g, lookbehind: !0 }, ignore: /&(lt|gt|amp);/gi, punctuation: /[{}[];(),.:]/g }; //]]></script>


Step 4: Save the topic and you're done.


Using .


To use it, just add the following code to the text:

<pre><code></code></pre>

: HTML code

<pre><code></code></pre>

: Mã CSS

<pre><code></code></pre>

: Mã Javascript

Read Also

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.