Blogger Kod Penceresi

Kod kutusunu blog hesabınızda kullanabilmek için;

1. Kumanda Paneli > Şablon> HTML Düzenle yolunu izliyoruz.

2. Ctrl+F tuşları ile ]]></b:skin> kodunu aradıyoruz.

3. ]]></b:skin> kodunun hemen üst kısmına aşağıdaki kodları ekleyin ve şablonu kaydedin.

4. Eğer kod kutusu renklerini ve arka plan rengini değiştirecekseniz aşağıda ki kodları not defterine kopyalayıp yapıştırın ve kodun sonunda bulunan çerçeve kodlarının renk bölümünden renk kodlarını değiştirin.

/*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;
}

Şimdi makaleniz içerisinde kod paylaşımı yaparken HTML kısmına tıklayarak aşağıdaki kodları kullanıyorsunuz;
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>


Ya da her defasında ayrı ayrı kullanmak için aşağıdaki kodu kullanabilirsiniz...



<pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code>Kodlar Buraya Yazılacak</code></pre>

Örnek:

Kodlar Buraya Yazılacak

<textarea class="bginput" style="width: 500px; height: 200px;" rows="5" cols="42" name="bloggerwebtasarim.blogspot.com/, html kodları">KOD YADA YAZI BURAYA EKLENECEK</textarea>

Örnek:
KOD YADA YAZI BURAYA EKLENECEK