Menu

Blogger 6 Adet Kod Penceresi Oluşturmak

Blogger alt yapısı ile oluşturduğunuz sitenizde html,css,javascrip,jquery,php,xml gibi bütün blogger düzenleme kodlarını sitenizde paylaşmayı düşünüyorsanız kodlarınızı sayfanızın içinde ayrı bir pencerede göstermeye olanak sağlayan aşağıdaki blogger kod pencereleri işinize yarayacaktır.

Css kodları ile oynayarak site tasarımınıza uygun şekli ve renklerini de kendinize göre,zevkinize göre ayarlamak da mümkündür.

Blogger 6 Adet Kod Penceresi Oluşturmak


Ayrıca daha önce yayınladığımız aşağıdaki eklentilerde işinize yarayabilir,deneyebilirsiniz.

---6 Adet İnternetten Para Kazandırma Kitapları

---Blogger CSS3 Siyah Açılır Menu Yapma

---Blogger Yeşil Navigation Menü Tasarımı

---Blogger İçin Yüzer Sosyal Medya Widget


Blogger sayfanızda aşağıdaki gibi görünecektir.
Blogger 6 Adet Kod Penceresi Oluşturmak

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



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


Kodları ekledikten sonra şablonu kaydedin.

Blogger 6 Adet Kod Penceresi Nasıl Kullanılacak

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>


Yayınlayacağınız kod yukarıdakilerden hangisi ise örneğin CSS ise CSS yazan yerin altındaki kodu kopyalayarak sayfanızın solunda bulunan HTML butonuna tıklayıp açılan sayfaya kopyaladığınız CSS kod penceresini yapıştırınız.Sonra CSS Kodları Buraya yazan yere yayınlamak istediğiniz kodunuzu yapıştırınız.


Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " Blogger 6 Adet Kod Penceresi Oluşturmak "

Önerilen Yazı
×