Adding Pre code in Blogger Site
We have great collection of amazing looking video theme, You can download any theme you like for free. By using these themes, your blog is with an extraordinary feel of professionalism and style. Meanwhile continue reading Adding Pre code in Blogger Site.
Read Also!
Pre code is used when you want to emphasize and organize codes in your blog post. Though you can used blockqoute but Pre code looks more professional and at the same time it gives your visitors the emphasis what kind of code you are sharing.
Pre code has unique feature such as, you can specify the kind of code your sharing e.g. CSS, JAVASCRIPT and HMTL, display in professional way and easy to select script by double click on Pre code block.
Adding Pre code in Blogger Site
This widget is powered by Font awesome version 4.3.0 so first we need to add font awesome file to your blogger template.
Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard.
Step #2: Click Theme --> Edit HTML.
Step #3: Find <head> by Pressing CTRL + F (Windows) or CMD + F (MAC)
Step #4: Now paste the below code below/after <head> tag.
Step #5: Now find ]]></b:skin> by Pressing CTRL + F (Windows) or CMD + F (MAC)
Step #6: Copy and paste the below code above /before ]]></b:skin>
Step #7: Now find </body> by Pressing CTRL + F (Windows) or CMD + F (MAC)
Step #8: Copy and paste the below code above /before </body>
Step #9: save your template.
How to use Pre code in your Blog Post?
Note: Editor should be in HTML view..
Conclusion
Congrats !! You have made it. Now you have learned How to Add Pre code in Blogger Site. Hope you liked this tutorial, if you enjoyed then please share it with your friends, please stay tuned with Us for more such awesome tutorials. Happy Blogging!
Pre code has unique feature such as, you can specify the kind of code your sharing e.g. CSS, JAVASCRIPT and HMTL, display in professional way and easy to select script by double click on Pre code block.
Adding Pre code in Blogger Site
This widget is powered by Font awesome version 4.3.0 so first we need to add font awesome file to your blogger template.
Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard.
Step #2: Click Theme --> Edit HTML.
Step #3: Find <head> by Pressing CTRL + F (Windows) or CMD + F (MAC)
Step #4: Now paste the below code below/after <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Step #5: Now find ]]></b:skin> by Pressing CTRL + F (Windows) or CMD + F (MAC)
Step #6: Copy and paste the below code above /before ]]></b:skin>
/* CSS Pre Code */
pre {
background: #444444;
white-space: pre;
word-wrap: break-word;
overflow: auto;
}
pre.code {
margin: 20px 25px;
border-radius: 4px;
border: 1px solid #292929;
position: relative;
}
pre.code label {
font-family: sans-serif;
font-weight: bold;
font-size: 80%;
color: #3C99F9;
position: absolute;
left: 1px;
top: 15px;
text-align: center;
width: 60px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
pointer-events: none;
}
pre.code code {
font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
display: block;
margin: 0 0 0 60px;
padding: 15px 16px 14px;
border-left: 1px solid #555;
overflow-x: auto;
font-size: 13px;
line-height: 19px;
color: #ddd;
}
pre::after {
content: "double click to selection";
padding: 0;
width: auto;
height: auto;
position: absolute;
right: 18px;
top: 14px;
font-size: 12px;
color: #ddd;
line-height: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
transition: all 0.3s ease;
}
pre:hover::after {
opacity: 0;
visibility: visible;
}
pre.css code {
color: #4899CE;
}
pre.html code {
color: #EF662A;
}
pre.javascript code {
color: #F4C22B;
}
Step #7: Now find </body> by Pressing CTRL + F (Windows) or CMD + F (MAC)
Step #8: Copy and paste the below code above /before </body>
<script type='text/javascript'>
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
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>
Step #9: save your template.
How to use Pre code in your Blog Post?
Note: Editor should be in HTML view..
<pre class='code html'><label><i class='fa fa-html5 fa-lg'></i> HTML</label><code>
Add HTML code here
</code></pre>
<pre class='code css'><label><i class='fa fa-css3 fa-lg'></i> CSS</label><code>
Add CSS code here
</code></pre>
<pre class='code javascript'><label><i class='fa fa-code fa-lg'></i> JS</label><code>
Add JavaScript code here
</code></pre>
Conclusion
Congrats !! You have made it. Now you have learned How to Add Pre code in Blogger Site. Hope you liked this tutorial, if you enjoyed then please share it with your friends, please stay tuned with Us for more such awesome tutorials. Happy Blogging!
Comment +
