Geçtiğimiz günlerde net te gezinirken bir kardeşimizin blog 'unda bir uygulama tarifi gördüm. Orda kodları yazarken açıklama ihtiyacı hissetmiş. Kodları yer yer eksik yazmak zorunda kalmış. Bende bir zamanlar bu işin nasıl yapıldığını epeyce araştırdığımı hatırlıyorum. Bende bu konuyla ilgili bir yazı yazmadığımı gördüm. İşte ordan burdan derken bu konuyu da anlatmaya karar verdim. Evet, bazen yazılarımız içerisinde zaman zaman web tasarımı ile ilgili birşeyler anlatırken html/css kod yayınlama ihtiyacı duyarız. Bunu yapabilmemiz için bir kaç yol var ben bunlardan en kullanışlı olanlardan kendi kullandığım üç yöntemi anlatacağım.JOOMLA, WORDPRESS, DRUPAL gibi blog yayınlama programlarının bu iş için ek araçları var. Yani onlarda bu iş için hem seçenek çok hem de bu iş bayağı basit hale getirilmiş.
Ama bunu blogger da biz de yaparız. Hatta MAFİAMAX adlı blogda yayınlayacağınız kodları JS ile değişik renklerle nasıl yayınlayacağınızı da çok güzel anlatmış resimlerlede göstermiş arkadaş. Oraya da bakın derim.Renkli örnekler de şurada..
Ama bunu blogger da biz de yaparız. Hatta MAFİAMAX adlı blogda yayınlayacağınız kodları JS ile değişik renklerle nasıl yayınlayacağınızı da çok güzel anlatmış resimlerlede göstermiş arkadaş. Oraya da bakın derim.Renkli örnekler de şurada..
1.YÖNTEM : pre elementi kullanarak...!
Burada bir noktaya dikkatinizi çekmek istiyorum. Direk pre elementini kullanırsanız blogunuzda yayınlamaya çalıştığınız HTML/CSS kod kümeleri çok küçük ve düzensiz yayınlanacak. Mesela uzun kod satırları bir alt satıra kayarak devam etme yerine blogunuzun dışına çıkacak. Hem okunmayacak hemde çirkin görünecek. Bu problemide yine CSS yoluyla çözeceğiz. Aşağıdaki CSS kod kümesini blogumuzun HTML kodları içindeki
etiketleri arasında yer alan CSS style kod kümeleri arasına yerleştireceğiz. Yeri önemli değil. Esasında .post-body kod kümelerinin bulunduğu yere koyarsanız ileride aradığınızda kolay bulursunuz. Ben aşağıdaki resimdeki yere yerleştirdim.
Şimdi aşağıdaki kod kümesini resimdeki gibi yerleştirin. Daha sonra da yaptığınız bu değişikliğin etkin olması için kaydedin. Şimdi biz pre elementi ile yayınlayacağımız kod kümelerine yazı stili, yazı boyutu, yazı rengi ve satırsonu aşağı satıra kayma(overlow)özelliklerini kazandırmış olduk. Hatta backround rengini de değiştirebilir yada resim bile kullanabiliriz. Daha sonra pre elementini kullanarak istediğiniz kodları yayınlayın.
.post-body pre {
background-color:#f6f6f6;
overflow: auto;
repeat-y;
padding: 0px 0px 0px 5px;
color:#000000;
font-size: 12px;
font-family: Courier New;
}
Aşağıda ki gibi kodları yazmanız halinde Yayınlamak istediğimiz kodları aynen yayınlarız.
UYGULAMA BİÇİMİ :
UYGULAMA BU ŞEKİLDE YAYINLANACAK :
buraya aşağıdaki gibi dilediğiniz kodu yazabilirsiniz
.thinborder{
float:left;
border:solid 1px yellowgreen;
padding:5px;
margin-right:5px;
}
.pullout{
width:30%;
padding:10px;
background-color:yellowgreen;
color:#F5F5F5;
float:right;
font: bold 14pt/1em Arial,Helvetica, sans-serif;
text-align:left;
letter-spacing: 0.05em;
margin:5px;
clear: both;
}
2.YÖNTEM : textarea elementi kullanarak...!
UYGULAMANIN SONRAKİ YAYINLANMIŞ BİÇİMİ :
3. YÖNTEM code elementi kullanarak...!
Gördüğünüz gibi her iki yöntemde gayet basit. Burada ayrıca 3.bir yöntemden de bahsedeceğim bu yöntemde blogunuzun CSS Style kodlarına aşağıda örnekte verildiği gibi bir class kod kümesi ilave edeceğiz.Bu kodları
</head>
tagı üstündeki css style kodları bölümüne bu class kod kümesini yerleştireceğiz.
.code {
display:block;
font-family:Courier New;
font-size:9pt;
width:400px;
overflow:auto;
repeat-y;
max-height:400px;
margin:5px 10px;
padding: 2px 15px 2px 25px;
background:url(http://i73.photobucket.com/albums/i235/aziz52/code-1.gif) no-repeat left top; }
Daha sonra HTML veya CSS kodlarını şu şekilde yazacağız.
Not: Aşağıda HTML kod yazım biçimini size gösterebilmek için mecburen açılış "<" ve kapanış ">" tırnaklarını başta ve sonda yazmadım. Yoksa bunu size göstermem biraz zor olacaktı. Siz bu tırnakları koymayı ihmal etmeyin.
Not: Aşağıda HTML kod yazım biçimini size gösterebilmek için mecburen açılış "<" ve kapanış ">" tırnaklarını başta ve sonda yazmadım. Yoksa bunu size göstermem biraz zor olacaktı. Siz bu tırnakları koymayı ihmal etmeyin.
span class="code">
.thinborder{
float:left;
border:solid 1px yellowgreen;
padding:5px;
margin-right:5px;}
.pullout{width:30%;
padding:10px;
background-color:yellowgreen;
color:#F5F5F5;
float:right;
font: bold 14pt/1em Arial,Helvetica, sans-serif;
text-align:left;
letter-spacing: 0.05em;
margin:5px;
clear:both;
}
/span
Dikkat ederseniz yukarıdaki style kod kümesi içinde bir backround resimi var sizde bunun gibi veya başka bir background resimi kullanabilirsiniz. Benim kulandığım resim aşağıdaki resimdir. Resim height="500" width="500" ölçülerinde.
Yazdığımız kodlar bu backround üzerinde görünecek. Siz bu kod kümesini iki class kod kümesi olarak yazabilir her kümeye ayrı bir background resmi kullanabilirsiniz. Mesela CSS kodları için code HTML içinse code1 gibi class kod kümesi adı kullanabilirsiniz. Hepinize kolay gelsin.
1 yorum:
sitenizdeki yazılar ve makaleleri sürekli takip ediyorum, Joomla web tasarımı olarak işlerinizde kolaylıklar dilerim.
Yorum Gönder