The Bizarre code box is an unusual type of design. I enjoyed designing this code box where I've customized it to the fullest. In this code box, I've hidden the scroll bar. But therefore, it is functional.
Previously I mention it adds the feature of the syntax highlighter and copy to the clipboard button.
This code box is functional where I've added a special effect to it. When you bring the mouse cursor to the box it automatically moves from top to bottom.
how to add a bizarre code box in blogger
Before jump into this make sure to back up your theme. Also, Read this How to Backup your Blogger Template.
1. Login into your blogger Dashboard.
2. Then on the left-hand side go to the Theme.
3. On the Customize button, click the Down arrow.
4. Then select the Edit HTML.
5. Now press "Ctrl + F " to search and find <head> tag.
<!-- code provide by wizard point start -->
<link href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>$(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>
<!-- wizard point -->
<!-- code provide by wizard point end --> 6. After you have found it just past the code below <head> tag.
7. Type and search for "]]></b:skin>" tag.
8. Just above the "]]></b:skin>" add this CSS code.
#clpmsg,
#clpmsg::before,
.clpbrd {
position: absolute
}
pre {
background: #474949;
max-height: 250px;
overflow: hidden;
border-top-left-radius: 37px 140px;
border-top-right-radius: 23px 130px;
border-bottom-left-radius: 110px 19px;
border-bottom-right-radius: 120px 24px;
display: block;
border: solid 3px #6e7491;
line-height: normal;
padding-left: 2em;
width: 70%;
margin: 10px auto 0;
font-size: 17px;
transform: rotate(-1deg);
box-shadow: 3px 15px 8px -10px rgba(0, 0, 0, 0.3);
transition: all 0.13s ease-in;
padding-bottom: 1em;
}
pre:hover {
overflow-x: scroll;
overflow-y: scroll;
transform: translateY(-10px) rotate(1deg);
box-shadow: 3px 15px 8px -10px rgba(0, 0, 0, 0.3);
}
pre::-webkit-scrollbar {
display: none;
}
pre:hover pre{
transform: translateY(4px) rotate(-5deg);
}
pre:before,
pre:after {
color: #515d9c;
font-size: 15px;
position: absolute;
}
.clpbrd {
background: #fff;
border: 1px solid #d5d5d5;
padding: 2px;
border-radius: 3px;
width: 25px;
height: 25px;
cursor: pointer;
top:20px;
right: 30px;
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
opacity: 0
}
pre .clpbrd:hover #clpmsg,
pre:hover .clpbrd {
opacity: 1
}
pre .clpbrd:active,
pre .clpbrd:hover {
background-color: #ddd;
background-image: none;
border-color: #b5b5b5;
transition: .3s;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15)
}
pre .clpbrd:focus {
text-decoration: none;
border-color: #51a7e8;
outline: 0;
box-shadow: 0 0 5px rgba(81, 167, 232, .5)
}
#clpmsg {
background-color: #000;
color: #fff;
padding: 3px 5px;
border-radius: 3px;
word-break: initial;
height: 17px;
top: -1px;
right: 31px;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out
}
#clpmsg::before {
content: "";
border: 10px solid;
top: 2px;
border-color: transparent transparent transparent #000;
right: 0;
margin-right: -15px;
width: 0;
height: 0
}
.hljs{display:block;background:#474949;color:#d1d9e1}.hljs-comment,.hljs-quote{color:#969896;font-style:italic}.hljs-addition,.hljs-keyword,.hljs-literal,.hljs-selector-tag,.hljs-type{color:#c9c}.hljs-number,.hljs-selector-attr,.hljs-selector-pseudo{color:#f99157}.hljs-doctag,.hljs-regexp,.hljs-string{color:#8abeb7}.hljs-built_in,.hljs-name,.hljs-section,.hljs-title{color:#b5bd68}.hljs-class .hljs-title,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#fc6}.hljs-name,.hljs-section,.hljs-strong{font-weight:700}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-subst,.hljs-symbol{color:#f99157}.hljs-deletion{color:#dc322f}.hljs-formula{background:#eee8d5}.hljs-attr,.hljs-attribute{color:#81a2be}.hljs-emphasis{font-style:italic}9. In the last step find the </body> tag.
10. Just above the </body> tag past the code.
<!-- script By https://wizardpoint.blogspot.com end-->
<script>function showTooltip(elem){$("<span id='clpmsg'>Copied</span>").prependTo(elem),$(elem).children().first().delay(1e3).fadeOut(1e3,function(){$(this).remove()})}$("<button class='clpbrd' data-clipboard-action='copy' data-clipboard-target='pre code'><i class='far fa-clone'/></button>").insertBefore("pre code");var clipboard=new ClipboardJS(".clpbrd",{target:function(trigger){return trigger.nextElementSibling}});clipboard.on("success",function(e){e.clearSelection(),showTooltip(e.trigger)});var TopOffset=parseInt($(".clpbrd").css("top"));$("pre").scroll(function(){$(".clpbrd").css({top:$(this).scrollTop()+TopOffset})});</script>
<!-- script By https://wizardpoint.blogspot.com end-->Now to Implement this code
First, you need to convert your code you want to implement.1. Go to HTML entity encoder/decoder. And convert your code.
2. Now, Go to your post where you want to add Code and just select the "Html view option" and insert the code as mention below.
<pre><code>
Your code goes here..........
</code></pre>Happy coding!
Tags:
Blogger