Blogger Kod Çerçevesi Örnekleri

Blogger Kod Çerçevesi Örnekleri
Blogger Kod Çerçevesi Örnekleri
0

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.

[codesyntax lang=”php”]

<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" />

[/codesyntax]

 

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:

[codesyntax lang=”php”]

<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>

[/codesyntax]

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.

Bu Yazıya Tepkiniz Ne Oldu?
  • 0
    be_end_m
    BEĞENDİM
  • 0
    alki_
    ALKIŞ
  • 0
    _a_kin
    ŞAŞKIN
  • 0
    k_t_
    KÖTÜ
  • 0
    berbat
    BERBAT

1959 yılında Samsunda doğdu. 1989-2005 Yılları arasında Temsa, Mitsubishi, Sabancı Holding grubunda Otomotiv, Bilgi işlem ve Yazılım bölümlerinde Müdür olarak çalıştı. Adnan Güney, şu anda, Network Dizayn Yazılım ve Tasarım koordinatörü olarak çalışmalarına devam etmekte. Ayrıca Blogger, Wordpress, Tumblr, Google sites gibi alanlara ilgili olup, uzun yıllardır SEO ve Alexa üzerinde çalışmakta.

Yazarın Profili
İlginizi Çekebilir

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir