Blogger HTML,CSS,JQUERY ve Javascript Kodları İçin Ayrı Bir Pencere Oluşturun

Blogger alt yapılı bir siteniz var ise html,css,jquery,javascript gibi blogger düzenleme kodlarını ayrı bir pencerede paylaşmak istiyorsanız aşağıda ki eklentiyi kullanabilirsiniz.Eğer renkler blogunuza uygun değilse CSS kodlarından rengini değiştirebilirsiniz.

Yönetim Paneli > Şablon > HTML'yi Düzenle seçeneğine tıklayıp CTRL+F yardımıyla kodunu aratın ve aşağıda ki verdiğimiz kodları kodunun üzerine yapıştırın.

/* 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: 0 0 15px 0;
font-weight: bold;
}

pre::after {
content: 'Double click to selection';
padding: 2px 10px;
width: auto;
height: auto;
position: absolute;
right: 8px;
top: 8px;
color: #fff;
line-height: 20px;
transition: all 0.3s ease-in-out;
}

pre:hover::after {
opacity: 0;
top: -8px;
visibility: visible;
}

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: #2c323c;
}

.comments pre::before {
content: 'Code';
font-size: 13px;
position: relative;
top: 0;
background-color: #f56954;
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::after {
font-size: 11px;
}

.comments pre code {
color: #eee;
}

.comments pre.line-numbers {
padding-left: 10px;
}

pre.line-numbers {
position: relative;
padding-left: 3.0em;
counter-reset: linenumber;
}

pre.line-numbers > code {
position: relative;
}

.line-numbers .line-numbers-rows {
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.5em;
width: 3em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
padding: 0;
}

.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}

.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
transition: 350ms;
}

pre[data-codetype='CSSku']:before {
background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
background-color: #e5b460;
}


Daha sonra aşağıda ki bütün kodları veya kodunun hemen üstüne yapıştırın.

<script>