Blogger kod ekleme Bloggera kod kutusu nasıl eklenir?How to add code box in blogger Otomatik kod kutusu codebox

Blogger codebox kod kutusu ekleme

admin20 Eylül 20180 Comment36

Blogger’a kod kutusu nasıl eklenir?

Herdefasında blogspot blogunuza html kodlar eklemek için ekstra bir uğraşa gerek yok.
Sabit bir kod bloğu eklemek için blogger’ın bize sunduğu seçenekler ile halledebiliriz.
Blogger isteğe göre css şablon düzenleme seçeneği sunar.
Blogger’da kalıcı kod kutusu kullanmak ve eklemek için aşağıdaki adımları okumanız yeterli.

Adım 1: Blogger’a giriş yapın,değişiklik yapmak istediğiniz blogu seçin.

Adım 2: Ardından Tema’ya tıklayın.

Adım 3: Ardından Özelleştir’e tıklayın.

Adım 4: Şimdi farklı bir pencere görünüyor olmalı buradan Gelişmiş –> CSS ekle

Adım 5: Sağ tarafta açılan boş kutucuğa bu kodu ekleyin ve sağ üst köşede bulunan Blog’a Uygula butonuna tıklayın.

.codebox { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px ‘Courier New’, Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .codebox:hover { background-repeat:no-repeat; }

Adım 5: Blogger yayınlarınızda kodlarınızı eklemek için kullanacağınız code box için aşağıdaki ufak kod parçacığını kullanmaznız gerekir.

<div class=”codebox”>
Kodlar buraya
</div>

Bunun için öncelikle kayıtlar,Yeni yayın yaparken Sol üst kısımda HTML Seçimine geçiş yapmanız gerekir.

Ayrıca herdefasında tek tek uğraşmak isterseniz,extra blogger kod kutusu ekleme,kod penceresi kaynak kodlarınıda kullanabilirsiniz tercih sizin 🙂

Kod 1

<div style=”background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;”>
<pre style=”margin: 0; line-height: 125%”>
Kodlar buraya
</pre>
</div>

Kod 2

<pre style=”border-radius: 3px 3px 3px 3px; border: 1px solid rgb(204, 204, 204); box-shadow: 0px 0px 5px rgb(204, 204, 204) inset; font-family: Arial,Helvetica,sans-serif; margin-bottom: 10px; margin-top: 10px; max-height: 180px; overflow: auto; padding: 5px;”>
<code>
Kodlar buraya
</code>
</pre>

Kod 3 veya en basitinden

<pre style=’color:#000020;background:#f6f8ff;’>
Kodlar buraya
</pre>

otomatik kod kutusu codebox
Blogger kod kutusu ekleme
How to add code box in blogger
Blogger’a kod kutusu nasıl eklenir?