Archive Pages Design$type=blogging

Cara Memasang Kode Pre (syntax highlighter) Pada Postingan Blog

M emasang kode pre pada postingan blog sangat berguna sekali terutama untuk blog yang memposting artikel yang bersifat tutorial selain dapa...


Memasang kode pre pada postingan blog sangat berguna sekali terutama untuk blog yang memposting artikel yang bersifat tutorial selain dapat memperindah tampilan postingan juga dapat mempermudah manusia dalam membaca kode-kode yang kita tuliskan dalam membuat postingan, nah untuk memasangnya diblog sobat cukup sobat ikuti saja langkah-langkahnya dbawah ini.
Cara Memasang Kode Pre Pada Postingan Blog
Cara Memasang Kode Pre Pada Postingan Blog

Memasang Kode Pre Pada Postingan Blog


Buka Blogger Dashboard > Klik Template > Edit HTML 
Cari tag </style> dalam template dan di diatasnya terapkan kode CSS di bawah ini :
 

  /* CSS Syntax Highlighter */
pre {padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#333c3f;position:relative;border-radius:4px;}
pre::before {font-size:16px;content:attr(title);position:absolute;top:0;background-color:#eee;padding:10px;left:0;right:0;color:#666;text-transform:uppercase;
display:block;margin:0 0 15px 0;font-weight:bold;border:1px solid #d0d0d0;}
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:#333;}
.comments pre::before {content:'Code';font-size:13px;position:relative;top:0;
background-color:#e25633;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 code {color:#eee;}

Terakhir tambahkan kode Javascript berikut tepat sebelum kode </body>

 <script src='//cdn.rawgit.com/bloggerism/js/sobekloh/prism.js' type='text/javascript'></script> 

Simpan template



Untuk dapat menerapkannya di postingan sobat cukup memasang kode berikut didalam postingan sobat


<pre title="HTML"><code class="language-markup"> KODE DISINI </code></pre>
<pre title="CSS"><code class="language-css"> ... CSS CODE HERE ... </code></pre>
<pre title="Javascript"><code class="language-javascript"> ... JAVASCRIPT CODE HERE ... </code></pre>

Selesai dan selamat mencoba...

COMMENTS

Nama

Animasi Blogger Button Css Javascript jQuery Sider Sosial Media Syntax Highlighter Template Tips Tutorial Windows 10
false
ltr
item
Simple Tutorial: Cara Memasang Kode Pre (syntax highlighter) Pada Postingan Blog
Cara Memasang Kode Pre (syntax highlighter) Pada Postingan Blog
http://1.bp.blogspot.com/-fu308TKctgA/VbcQMcmXAPI/AAAAAAAAAGs/xWOc1pwg2Js/s400/programming.jpg
http://1.bp.blogspot.com/-fu308TKctgA/VbcQMcmXAPI/AAAAAAAAAGs/xWOc1pwg2Js/s72-c/programming.jpg
Simple Tutorial
http://mirandahardy.blogspot.com/2015/07/cara-memasang-kode-pre-syntax.html
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/2015/07/cara-memasang-kode-pre-syntax.html
true
4419251694985783704
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago