8 Mayıs 2012 Salı

Blogger Kod �er�evesi �rnekleri

Posted by Unknown On 18:18 No comments

Blogger Kod �er�evesi �rne�i
Blogger blog yaz�lar�n�zda "HTML" kodunu blog �ablonunuzda hi�bir CSS kodu kullanmadan kullanabilece�iniz,Kod �er�evesi �rneklerini a�a��da a��klamal� olarak g�sterilmektedir. Blogger bloglarda kod �er�evesi kullan�lmad���n� biliyorsunuzdur.Kod yazman�z gerekti�inde HTML �ablonunuz bu kodlar� kabul etmemektedir.Yapt���m ara�t�rma sonucunda genelde CSS kodunu HTML �ablonunuza ekleyerek ve yaz� edit�r�n�ze yine bir kod yazarak ancak kodlar�n�z� ekleyebilece�inizi g�rd�m.Bloglar�m�za her�eyi kod koyarakm� yapmam�z gerekiyor d���ncesi ile ara�t�rd�m. Bu ara�t�rma sonucu farkl� bir yol buldum.Test blogumdada bu konuyu biraz irdeleyerek kopyala yap��t�r mant��� ile olabilece�ini teyid ettim.A�a��da verdi�im �rnekle HTML �ablonunuzda hi�bir de�i�iklik yapmadan bloglar�n�zda istedi�iniz gibi kullanabilece�iniz kod �rnekleri bulunmakta.
Bu kodlama hakk�nda sizi biraz bilgilendirmek isterim.


�ncelikle sizinde kendinizi test edebilece�iniz, kodlar� ayr��t�r�p ne olup ne olmad���n� anlaman�z a��s�ndan kendinize bir test blogu yapman�z� tavsiye ederim.Yeni a�aca��n�z bir test blogunda bir�ok deneme yan�lma i�lemini ger�ekle�tirebilir, geni�lik ,y�kseklik ayarlar�n� anlamaya �al��abilirsiniz.Renkleri, kenar �izgi kal�nl�klar� ve arka plan uygulamar� hakk�nda hert�rl� bilgiyi g�rsel teorik ve pratik olarak yapt���n�zda kendinizi geli�tirmi� olursunuz.
Yap�lacak i�lemler :
1. Test blogu a�t�k. Yada kulland���n�z blogunuza taslak olarak kaydedin.Gerekli oldu�unda taslak k�sm�ndan kopyala yap��t�r yapabilirsiniz.Se�im sizin karar�n�zda.
2.Test blo�umdaki HTML kodu ile yapt���m Kod �er�evesi g�rselini, hemen alt k�s�mdada HTML kod g�rselini verece�im.
3.Bu kodlar� nas�l kullanacaks�n�z
a. Kopyala yap��t�r mant��� ile 
b.Yaz� edit�r�ndeki sol �ste HTML ve Olu�tur mant��� ile uygulama yapabilirsiniz.Benim �nerim en basit olan� kopyala yap��t�r olan�d�r.Hangi uygulama kolay�n�za geliyorsa onu uygulayabilirsiniz.
c.Bu i�lemlere ba�lamadan �nce sa� tarafa bak�n orada Se�enekler sekmesiniz g�receksiniz.
A��n o sekmeyi. HTML'yi oldu�u gibi g�ster ve Yaz�lan HTML'yi yorumla se�enekleri mevcut.Bizim amac�m�z kod g�stermek oldu�undan HTML'yi oldu�u gibi g�ster se�ene�inin i�aretli olmas�d�r.Yorumlamay� se�erseniz yapt���n�z kodlar�n �ekli de�i�ecek hi�bir kullan�m alan� kalmayacakt�r.
�imdi kod �rneklerini g�relim :
1.Google Drive ile yap�lan kod �rne�i.Google Drive ile �er�evenin nas�l yap�ld���n� blogger kod �er�evesi ba�l�kl� ve �er�eve ayarlar� ba�l�kl� yaz�lar�m� okuyarak daha net anlayabilirsiniz.



Kod buraya

2. Yukar�da g�rd���n�z �er�eve'nin kod a��l�m� �er�eve i�inde a�a��da g�r�lmekte.�er�eveyi kopyala yap��t�r yapt�m.Test blogumdanda kodu ald�m ve buradaki �er�eve i�ine koydum.
A�a��da k�rm�z� i�ine ald���m alan (Kod buraya) kodlar�n�z� koyman�z gereken aland�r.�ekil 1 de g�r�len �er�evenin kod hali bu �ekilde.Kumanda panelinde hi�bir CSS kodu kullanmad�m.
3.�er�evenin ilk ayarlar�n�z Google Drive de yap�yorsunuz.Sonra bu alana ta��yorsunuz. Taslak olarak devaml� kullanmak i�in blogunuzda yada test blogunuzda sakl�yorsunuz.

<b id="internal-source-marker_0.5021826503798366"></b><br /> <div dir="ltr"> <b id="internal-source-marker_0.5021826503798366"><br class="Apple-interchange-newline" /></b><br /> <table style="border-bottom-style: none; border-collapse: collapse; border-color: initial; border-image: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial; width: 624px;"><colgroup><col width="*"></col></colgroup><tbody> <tr style="height: 0px;"><td style="border-bottom-color: rgb(170, 170, 170); border-bottom-style: dotted; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(170, 170, 170); border-left-style: dotted; border-left-width: 1px; border-right-color: rgb(170, 170, 170); border-right-style: dotted; border-right-width: 1px; border-top-color: rgb(170, 170, 170); border-top-style: dotted; border-top-width: 1px; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 7px; vertical-align: top;"><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Kod buraya</span></td></tr> </tbody></table> <b id="internal-source-marker_0.5021826503798366"> </b></div> <br class="Apple-interchange-newline" />




4. Bu kod �rne�ide farkl�, yaz�lan kod dikey uzant� �ubu�u ile gezdirilebiliyor.�lk olarak �er�evemizi g�relim.



HTML-Kodu:
Kod buraya



5. Yapt���m�z �er�evenin kodunu g�relim. Burada da kopyala yap��t�r mant��� kulland�m.Tex yaz�lar k�rm�z� ile belirtilmi�tir.



HTML-Kodu:
<div style="clear: both; margin-top: 5px; margin: 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
HTML-Kodu:</div>
<pre class="alt2" dir="ltr" style="border: 1px inset; height: 34px; margin: 0px; overflow: auto; padding: 6px; text-align: left; width: 410px;"><span style="color: navy;">
Kod buraya</span></pre>
</div>


Dikkat ederseniz her ikisindede kod var.�stedi�inizi kullanabilirsiniz.Konu hakk�nda bir fikriniz, �neriniz varsa l�tfen belirtin.��lemleri m�mk�n oldu�unca basitle�tirmeye �al���yorum.Sizde bu konudaki �nerilerinizi yorum k�sm�ndan yazabilirsiniz.


0 yorum:

Yorum Gönder