Ana içeriğe atla

Blogger kod kutusu ekleme

Blogger'a kod kutusu nasıl eklenir

Blogger kod kutusu Codebox adıyla da bilinen kod paylaşımı eklenti paylaşımı gibi paylaşımlarda bulunan arkadaşların çok fazla kullandığı bir araç tema tasarımcılarının temaya özel yapmış olduğu çok güzel çok özellikli kod kutularıda var tabiki  ama onları kullanmak biraz kod bilgisi gerektiren bir iş olduğu için yeni başlayan arkadaşlar kullanmakta zorluk çekebilir.

Blogger kod kutusu anlatımına geçelim

Blogger kod kutusu
Blogger Codebox kod kutusu
Sizlere kendimce tasarladığım çok basit ve görsel anlamda da şık sayılabilecek kadar güzel kullanımı kolay kullanışlı bir kod kutusu sunacağım örnek sağ kısımda <pre data-codetype="HTML">HTML kodları Buraya</pre> gibi uzun uzun kodlar yazmanıza gerek yok kod paylaşmak için.

Sizleri bu zahmetten kurtarıcam  sadece bir kereliğe mahsus vermiş olduğum kodları temanıza ekliyeceksiniz ve sonra bir daha uğraşmıyacaksınız özellikle çok sık kod paylaşıyorsanız çok işinize yarayacak bir kod kutusu kullanımı kolay demiştim sadece yapmanız gereken <pre> Kodlar Buraya </pre> yazıp paylaşmak istediğiniz kodları kod dönüştürücü ile dönüştürdükten sonra ikisinin ortasına yapıştıracaksınız hepsi bukadar basit.

Üst kısımda da dediğim gibi kodlarınızı paylaşmadan önce kod dönüştürücü ile dönüştürmek zorundasınız yoksa kodlarınız kod şeklinde değilde neyin kodunu paylaşıyorsanız o şekilde görünecektir yada güzel düzenli bir şekilde görünmeyecektir.

Blogger kod kutusu kurulumu

Lafı daha fazla uzatmadan gelelim blogger kod kutusu kurulumuna blogger kontrol paneline girin Tema bölümününe tıklayın HTML'yi Düzenle kısmına tıklayın ve açılan kısımda CTRL F kombinasyonu ile
]]></b:skin> kodunu aratın kodu bulduktan sonra hemen üst kısmına aşağıdaki kodları yapıştırın temanızı kayıt edip çıkış yapabilirsiniz.

[pre { background-image: linear-gradient(rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent); background-size: 100% 50px; border:solid #1eb093;line-height:16px;color:#000;border-width:4px;font-family:monospace;font-size:14px;padding:4px 7px;background-color:#EEE;border-radius:6px;max-height:500px;overflow:auto;}]


Blogger kod kutusu ayarı

1-Yukarıda kırmızı ile belirttiğim border solid #1eb093 kod kutusunun çerçevesidir siz istediğiniz rengi ayarlayabilirsiniz.

2-Yukarıda kırmızı ile belirttiğim line height:16px kodların satır aralarındaki boşluğu belirtir isterseniz onuda değiştirebilirsiniz.

3-Yukarıda kırmızı ile belirttiğim color: #000 kodlarınızın rengini belirtir isterseniz onuda değiştirebilirsiniz.

4-Yukarıda kırmızı ile belirttiğim border-width:4px kod kutusunun çerçeve kalınlığını belirtir isterseniz onuda değiştirebilirsiniz.

5-Yukarıda kırmızı ile belirttiğim font-family:monospace kodlarınızın yazı tipini belirtir isterseniz onuda değiştirebilirsiniz.

6-Yukarıda kırmızı ile belirttiğim font-size:14px kodlarınızın yazı boyutudur isterseniz onuda değiştirebilirsiniz.

7-Yukarıda kırmızı ile belirttiğim padding:4px 7px üst ve sol kenar açılarını belirtir bu boyut idealdir. ama isterseniz onuda değiştirebilirsiniz.

8-Yukarıda kırmızı ile belirttiğim background-color:#EEE kod kutusunun arka planını belirtir isterseniz onuda değiştirebilirsiniz.

9-Yukarıda kırmızı ile belirttiğim border-radius:6px kod kutusunun oval kenarlarını belirtir isterseniz onuda değiştirebilirsiniz.

10-Yukarıda kırmızı ile belirttiğim max-height:500px kod kutusunun yüksekliğini belirtir ve idealdir.

Yukarıdan aşağıya kadar sayfa boyunca uzayan kod kutuları bence hoş görünmemekte hemde kodları kopyalamak isteyen kişi için zorluk çıkarır kodu kopyalıyım derken komple sayfa içeriğide kopyalanır onun için 500px yeterlidir tam sayfanın orta kısmında kalır hemde kolay kopyalama işlemi yapılır.

Aslında çok basit bir konuyu tam detaylı bir şekilde açıkladığımı düşünüyorum yinede yapamayan yada bir sorun ile karşılaşan olursa yorum yaparak bildirebilir yada iletişim sayfasından bana ulaşabilirsiniz kodları kullanıcak arkadaşlara şimdiden hayırlı olsun diyeyim. Kodları bloğunuzda paylaşmak isterseniz 
Blogdan indir'den alıntı olduğunu belirtirseniz sevinirim. Takipde kalın yazılarımı okumaya devam edin.


Yorumlar

Bu blogdaki popüler yayınlar

Boomads ile Ünlü Markalardan Reklam Almak

Merhaba değerli bloggerlar diye başlamak istiyorum çünkü bu yazı tamamen sizi ilgilendiriyor. Şüphesiz sitelerden çok para kazanmak oldukça zor olsa da, akmasa da damlıyor diye tabir ettiğimiz kadar bir gelir elde ediliyor bloglarımız için. Öncelikle Boomads nedir bunun açıklamasını yapmalıyız. Hatta resmi olarak yaptıkları açıklamayı burada yayınlayayım. Öncelikle Boomads nedir bunun açıklamasını yapmalıyız. Hatta resmi olarak yaptıkları açıklamayı burada yayınlayayım. Boomads Nedir? Boomads uluslararası içerik pazarlama firmasıdır. Avrupa’nın en büyük yayıncı kuruluşlarıyla beraber, reklamverenler ile özgün içerik üreticileri ve kendi alanlarında fikir önderi olan kişileri biraraya getiren platformlar kurar. Boomads markanızın tüm dijital yayın ihtiyaçlarını karşılayan bir platform sunar. Markanız için özgün içerik üretimi ve etkileşimi yüksek yüzlerce blogger üzerinden dağıtımını sağlıyoruz. Peki yayıncılar için boomads nedir? Yani biz bloggerlar için. Yayıncılar Blogunuzdan, Facebo...

Blogger’ın Az Bilinen 4 Özelliği

İnternette blog açmanızı, yazmanızı, yönetmenizi sağlayan ücretsiz ve kullanımı en kolay platformu olan Blogger'ın tüm imkanlarından faydalanıyor muyuz? Bence çoğumuzun varlığından bile haberdar olmadığı pek çok özelliği var Blogger'ın. Bu yazıda çok az bilinen ve hemen hemen hiç kullanılmayan 4 Blogger özelliğinden bahsedeceğim. Keyifli  okumalar. 1. Kayıt Şablonu Özelliği Bu özellik yeni bir yazı yazmak için yazı panelini açtığınızda önceden girdiğiniz bir metnin ve kodun otomatik olarak orada yer almasını sağlar. Kayıt şablonu olarak eklediğiniz bir metin veya kod her yeni yazmak istediğinizde otomatik olarak çıkacaktır. Böylece her yazıda bulunmasını istediğiniz şeyi unutma derdine çare bulmuş olursunuz. Kayıt şablonu olarak istediğiniz metni veya kodu ekleyebilirsiniz ancak birkaç öneride bulunmak gerekirse: - Bu içerik Serdar Kara tarafından oluşturulmuştur.İçeriğin izinsiz ya da kaynak belirtilip link verilmeksizin kopyalanması 5846 sayılı Fikir ve Sanat Eserleri Kanunu...

Samanyolu galaksisinin en detaylı fotoğrafı çekildi

 Dünya corona virüsü salgını, kıtlık, iklim krizi, siyasi gerilim ve ekonomik darboğaz gibi "gündelik" sorunlarla mücadele ederken Avrupa Uzay Ajansı (ESA) aslında bunların ne kadar ufak olduğunu gözler önüne serdi. ESA, Samanyolu'nun en kapsamlı haritasını yayınladı. Avrupa Uzay Ajansı Dünya’nın içinde bulunduğu Samanyolu galaksisinin en kapsamlı ve detaylı 3 boyutlu haritasını kamuoyuna lanse etti. Avrupa Uzay Ajansı’nın 2013 yılından beri yıldızları analiz ve takip eden Gaia isimli uzay teleskobundan elde edilen verilerle paylaştığı harita bugüne kadar astronomlar tarafından yayınlanan en kapsamlı ve detaylı harita olarak kayıtlara geçti. Bu harita ile birlikte Samanyolu’nun yeni detaylarına ulaşmayı hedefleyen bilim insanları böylelikle galaksinin ne kadar büyük bir hızla genişlediğini ve zamanın başlangıcından beri ne ölçekte büyüdüğünü bulmayı amaçlıyor. Bilim insanlarının yayınladığı haritada 1.8 milyardan fazla yıldız bulunuyor. Avrupa Uzay Ajansı, “Gaia’dan elde ...