Oyun

[Oyun][bleft]

Program

[Program][bleft]

Film

[Film][twocolumns]

Blogger HTML-CSS-JS Kod Penceresi Ekleme

Blogger HTML-CSS-JS Kod Penceresi Ekleme
Merhaba arkadaşlar, özellikle içeriklerinde kod paylaşan bloggerler için görsel açıdan oldukça önemli faydalı bulduğum HTML,CSS,Javascript,XML,JQuerry ve PHP kodlarınız için kod penceresini paylaşıyorum.Umarım hoşunuza gider.

CANLI ÖRNEK

HTML
HTML kodları Buraya Gelecek

CSS
CSS Kodları Buraya Gelecek

Javascript
JavaScript Kodları Buraya Gelecek

Jquery
JQuery Kodları Buraya Gelecek

PHP
PHP Kodları Buraya Gelecek

XML
XML Kodları Buraya Gelecek

1.Adım : Blogger Kontrol Panelimize giriyoruz ve ŞABLON/HTML'yi DÜZENLE ye giriyoruz.Dilerseniz el ile veya CTRL F ile ]]></b:skin> kodunu arıyoruz. Aşağıdaki kodu hemen üstüne kopyalayıp yapıştırıyoruz.



/*HTML-CSS-JS-JQuerry-PHP kod pencereleri */
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;
}

2.Adım : İçeriğinize hangi kod dilini eklemek istiyorsanız(HTML,CSS,JS vb.) o kod satırını seçiyoruz ve içeriğimize ekliyoruz.Aşağıdaki kodları bilgisayarınızda bir yere kaydedin.İhtiyac duydukça kullanırsınız.

 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>

Hiç yorum yok:

Yorum Kuralları
*Lütfen yanlızca yazı ile ilgili yorumlar yazınız.
*Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın.
*Bir Google Hesabınız yoksa Yorumlama Biçimi seçeneklerinden "Anonim" tıklayıp yorum yapabilirsiniz.

HTML

[HTML][twocolumns]

Wordpress

[Wordpress][twocolumns]

CSS

[CSS][twocolumns]