Posts

Showing posts from February, 2019

pre code 2

I’ve received a few requests on how to highlight the syntax of snippets of in a blog like I have. Here is an example snippet of SCSS code, so you can see exactly what I’m referring to ...Masukan Kode HTML Disini (masuk Compose dulu)... /* CSS Prism Syntax Highlighter */ pre {     padding: 50px 10px 10px 10px;     margin: .5em 0;     white-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: ...

pre code

HTML ... code html yg ingin dalam block ... CSS /* CSS Simple Pre Code */ pre {     background: #fff;     white-space: pre;     word-wrap: break-word;     overflow: auto; } pre.code {     margin: 20px 25px;     border: 1px solid #d9d9d9;     border-radius: 2px;     position: relative;     box-shadow: 0 1px 1px rgba(0,0,0,.08); } pre.code label {     font-family: sans-serif;     font-weight: normal;     font-size: 13px;     color: #444;     position: absolute;     left: 1px;     top: 16px;     text-align: center;     width: 60px;     -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     pointer-events: none; } pre.code code { ...

demo321

.post-body { -webkit-user-select : none ; -khtml-user-select : none ; -moz-user-select : none ; -ms-user-select : none ; user-select : none ; }

demo 2

HTML <button>Press Me!</button> CSS button { width:20px; height:28px; color:#fff; font-size:28px; padding:11px 15px; border-radius:5px; background:#14ADE5; } JS <button onclick="myFunction()">Post</button> <script> function myFunction() { document.write(5 + 6); } </script> Jquery $(document).ready(function{ jQuery.cssRule(".post", "display", "block"); });

demo 1

<script language='javascript'> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script>

Pre code demo

This css script might be useful to all - It is not for syntax highlighting but works well for presenting the source code in original format : <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee; font-size: 12px; border: 1px dashed #999999; line-height: 14px; padding: 5px; overflow: auto; width: 100%"> <code style="color:#000000;word-wrap:normal;"> <<<<<<<YOUR CODE HERE>>>>>>> </code> </pre>

Pre Code Demo in Blogger Blog Post

When new study made ​​a post about tutorial Blogger that include codes CSS , HTML , or Javascript , I use the Pre code tag . Pre Code used to display HTML code and the other is the reason for Pre Code tags already available at the post editor with quotes on the menu editor posts. HTML <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> CSS .grid { display: grid; grid-template-rows: repeat(6, 1fr); grid-template-columns: repeat(12, 1fr); grid-gap: 10px; } .box { color: white; font-size: 4vw; padding: 10px; background: gold; text-align: center; } .box:nth-child(1) { grid-column: span 12; } .box:nth-child(2), .box:nth-child(3) { grid-column: span 6; } .box:nth-child(4), .box:nth-child(5), .box:nth-child(6) { grid-column: span 4; } .box:nth-child(7), .box:nth-child(8), .box:nth-child(9), .box:nth-child(10) { grid-colu...

Blogger Responsive Table Demo : Blogger Gadget Demo

How to make responsive table in blogger? View detail tutorial on article How to Create A Responsive Table In Blogger With HTML and CSS3 Caption Table Name Address Email Phone Number David Beckham Manchester, England davidbeckham@example.com 021-01010xxx Mike Tyson California, US miketyson@example.com 021-9198199189291929 Justin Bieber New York, US justinbierber@example.com 021-2929292929101019 Selena Gomez Texas, US selena.gomez@example.com 021-819199191991919