Blogger Kod Penceresi Oluşturmak

Bu eklenti css veya html kod paylaşımı yapan blogcular için iyi bir eklenti kodları ayrı bir pencerede göstermeye olanak sağlıyor. Ayrıca bu eklentiyi bende kullanıyorum. Örnekler aşağıda zaten.

Şablon - Html'yi düzenle - Ctrl + F yardımı ile ]]></b:skin> kodunu bulun ve hemen üstüne aşağıdaki verdiğim kodları ekleyin.

.codeview { 

font-family: Arial, Helvetica, sans-serif; 

color: #CC0000; 

margin : 15px 35px 15px 15px; 

padding : 10px; 

clear : both; 

list-style-type : none; 

border-top : 2px solid #cccccc; 

border-right : 2px solid #cccccc; 

border-bottom : 2px solid #cccccc; 

border-left : 2px solid #cccccc; 

background-color: #FFFFFF; 

} 

.codeview li { 

font-size : 13px; 

line-height : 24px; 

font-family : 

"Courier New", "MS Sans Serif", sans-serif, serif; 

color : #333333; 

font-weight : normal; 

margin : 0; 

padding : 0; 

}

Kodları göstereceğiniz yere aşağıdaki kodları eklemeniz yeterli.

<div class="codeview"> 

Kodlarınız buraya gelecek... 

</div>

Farklı Bir Kod Penceresi

Bu kod penceresinin özelliği görünüş bakımından şık  html, css, php, javascript, xml, jquery bunları ayrıştırma özelliği mevcut alternatifli bir kod penceresi diyelim.

Şablon - Html'yi düzenle - Ctrl + F yardımı ile ]]></b:skin> kodunu bulun ve hemen üstüne aşağıdaki verdiğim kodları ekleyin.

/*Tema Vanila untuk Postingan Blogger by: Oto Website */
pre {
background-color:white;
background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
-webkit-background-size:30px 30px;
-moz-background-size:30px 30px;
-ms-background-size:30px 30px;
-o-background-size:30px 30px;
background-size:30px 30px;
background-repeat:repeat;
font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
color:#333;
border:2px solid #666;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
position:relative;
padding:0 7px;
margin:10px 5px;
overflow:auto;
word-wrap:normal;
white-space:pre;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
position:relative;
}
pre[data-codetype] {
padding:29px 1em 7px 1em;
}
pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
position:absolute;
top:0;
right:0;
left:0;
background-color:#666;
padding:0 7px;
font:bold 11px/20px Arial,Sans-Serif;
color:white;
}
pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;}
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;}
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}
pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
pre[data-codetype="CSS"]:before {background-color:#7B990C;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#395540;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#FF0C39;
}

Kodları ekledikten sonra şablonu kaydedin.

Kodları eklemek için aşağıdaki kodları kullanın

HTML

<pre data-codetype="HTML">HTML kodları Buraya</pre>

CSS

<pre data-codetype="CSS">CSS Kodları Buraya</pre>

Javascript

 <pre data-codetype="JavaScript">JavaScript Kodları Buraya</pre>

Jquery

<pre data-codetype="JQuery">JQuery Kodları Buraya</pre>

PHP

<pre data-codetype="PHP">PHP Kodları Buraya</pre>

XML

<pre data-codetype="XML">XML Kodları Buraya</pre>