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 buraya5. 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>
Yorumlar
Yorum Gönder