Blogger HTML-CSS-JS Kod Penceresi Ekleme

Paylaşan Admin

11 Temmuz 2019 Perşembe

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>

Bunu Paylaş :