Blog Yazı ve Yayınlarında Kullanılan Eklentiler

Blog Yayınlarında Düzenli Yazı ve İçerik Oluşturma Teknikleri
Bu yazımızda blog yayınlarınızı oluştururken ve yayınladığınızda blog sayfalarınızın ve yayınlarınızın daha düzenli görünmesini sağlayacak küçük ev aletleri gibi pratik seçenekler sunan küçük CSS ve HTML kodlarıdır.

Aşağıdaki bilgileri öncelikle okumanızı ve sonra blogunuzda uygılamayı deneyin. Aşağıdaki kodları blogunuza uygulamak için;

Bilgi: Blogger hesabınızda oturum açın ve blogunuzun kumanda panelinde bulunan Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları açın ve aşağıdaki adımları takip ederek uygulamaya çalışın.

a. CSS Kodlarını Ekleme: Aşağıdaki CSS kodlarını blogunuzun şablon kodları arasına eklemek için, şablon kodları sayfasında CTRL+F yardımıyla ]]></b:skin> yada </style> kodlarını bulun ve CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.

b. HTML Kodları Ekleme ve Kullanımı: Aşağıdaki HTML kodları blogunuzda yayın oluştururken size yardımcı olabilecek kodlardır. Blogunuzda yeni bir yayın oluşturmak için Yeni yayın butonuna tıklayarak blogunuzun editör sayfasını açın. Editör sayfasının sol üst köşesinde bulunan aşağıdaki resimde gördüğünüz gibi HTML butonuna tıklayın. Blogunuzun yayınlarında kullanmak istediğiniz HTML kodları blogunuzun editör sayfasındaki HTML sayfasına ekleyin.

Blog Yazılarında Kullanılan Küçük CSS Kodları

1. Blogunuzda yazılarınızı güçlendirmek ve daha iyi anlaşılmasını sağlamak için, sıralı ve sırasız yazı oluşturmamızı sağlayan aşağıdaki HTML kodlarını kullanıyoruz.

a- Sıralı Blog Yazısı CSS Kodları: Aşağıdaki CSS kodlarını yukarıda anlattığımız gibi blogunuzun şablon kodları arasına ekleyin. Sıralı yazı oluşturmak için dikkat etmeniz gerek etiket <ol> - </ol> etiketleridir.

*, *:before, *:after, input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
ol {
    counter-reset: li;
    list-style: none;
    font: 15px 'Roboto','lucida sans';
    padding: 0;
}
ol {
    list-style: decimal outside;
}
ol, ul {
    list-style: none;
}
.post ol li:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -2.5em;
    width: 2em;
    text-align: center;
}
.post ol li {
    position: relative;
    display: block;
    padding: 2px 0;
    margin: .2em 0 .2em 1.5em;
    background: #fff;
    color: #666;
    text-decoration: none;
    transition: all .3s;
}

b- Sıralı Blog Yazısı HTML Kodları: Aşağıdaki HTML kodları kullanarak sıralı bir blog yazısı oluşturabilirsiniz. Tek yapmanız gerek <li> yazılarınız </li> arasına yazılarınızı eklemeniz. Numaralar otomatik olarak görünecektir.

<ol>
<li>Yazı</li>
<li>Yazı</li>
<li>Yazı</li>
<li>Yazı</li>
<li>Yazı</li>
</ol>

c- Sıralı Blog Yazısı Örnek Kullanımı: Gördüğünüz gibi sadece yazıları ekleyerek yayınların daha düzenli görünmesi için sıralı bir yazı oluşturduk.

1. Blogger Giriş
2. Blogger Tanıtım
3. Blogger Yardım
4. Blogger Hesap
5. Blogger Site

Sırasız Blog Yazısı Oluşturma: Yukarıda sıralı blog yazılarının numaralı görünmesini sağlamıştık. Şimdi bu sıralamayı numarasız olarak nasıl oluşturulduğunu görelim;

a- Sırasız Blog Yazısı CSS Kodları: Aşağıdaki CSS kodlarını blogunuzun şablon kodları arasına yukarıdaki gibi ekleyin.

ul {
    list-style: disc outside;
}
ul, dl {
    margin: .2em 0em .2em 1em;
}
ol, ul {
    list-style: none;
}
li {
    margin: 0;
}
.post-body li {
    list-style-type: square;
}

b- Sırasız Blog Yazısı HTML Kodları: Blog yazılarında sırasız bir yazı yani numarasız bir yazı oluşturmak için, aşağıdaki HTML kodda gördüğünüz gibi <ul> yazılarınız </ul> etiketlerini kullanmalısınız.

<ul>
<li>Yazı</li>
<li>Yazı</li>
<li>Yazı</li>
<li>Yazı</li>
<li>Yazı</li>
</ul>

Sırasız Blog Yazısı Örnek Kullanımı: Gördüğünüz gibi <ul> yazılarınız </ul> etiketlerini kullanarak sırasız bir yazı oluşturduk.

• Blogger Giriş
• Blogger Tanıtım
• Blogger Yardım
• Blogger Hesap
• Blogger Site

2. Blog yazılarınızda terim kullanıyorsanız özellikle bilimsel yazılarınızı oluşturmak için kullanılan sub ve sup> etiketlerinın kodları aşağıdadır. sub terimlerin altta görünmesini, sup ise üstte görünmesini sağlamaktadır.

a- Sub ve sup Blog Yazısı CSS Kodları: Sub CSS kodlarını blogunuzun şablon kodları arasına ekleyin.

sup,sub{vertical-align:baseline;position:relative;top:-.4em;font-size:86%;}
sub{top:.4em;}

b- Sub ve sup Blog Yazısı HTML Kodları:

<sub>Sub</sub>
<sup>Sup</sup>

c- Sub ve Sup Blog Yazısı Örnek Kullanımı:
Örnek: Blog yayınlarında _Sub kullanımı.
Örnek: Blog yayınlarında ^Sup kullanımı.

3. Blog Yazılarında Üstü Çizili Yazı Oluşturma: Blog yazılarında üstü çizili yazı oluşturmak için, sadece aşağıdaki HTML kodu kullanmanız yeterli olacaktır.

<span style="text-decoration:line-through;">Yazım hatalarını bulun</span>

Örnek: Yazım hatalarını bulun

4. Blog yazılarınızda çok kullanışlı olabilecek butonlar. Blog yazı ve yayınlarına destek olabilecek ek bilgiler veya sayfaların bağlantılarını URL eklemek için için aşağıdaki butonları kullanabilirsiniz. a- Blog Yazısı Butonları CSS Kodları: Blog yazılarınızda butonları kullanmak için, aşağıdaki CSS kodlarını blogunuza ekleyin.

.blog-buton{list-style:none;text-align:center;border:0;margin:10px 0;clear:both;text-decoration:none}
.blog-buton ul {margin:0;padding:0}
.blog-buton li{display:inline;margin:0 3px;padding:0;list-style:none}
.blog-buton li a.url-demo,.blog-buton li a.url-download{position:relative;display:inline-block;vertical-align:top;height:36px;line-height:36px;padding:0 20px;font-size:13px;color:#fff;text-align:center;text-decoration:none;border-radius:2px;cursor:pointer}
.blog-buton li a.url-demo{background:#28a1e9}
.blog-buton li a.url-download{background:#f49d45}
.blog-buton li a.url-demo:hover {background-color:#1097e7;color:#fff}
.blog-buton li a.url-download:hover {background-color:#e7944f;color:#fff;}

b- Blog Yazısı Butonları HTML Kodları: Blog yayınlarınıza butonları eklemek için, aşağıdaki HTML kodları blogunuzun editör sayfasında HTML bölüme ekleyin. Butonların HTML kodu arasında bulunan # bağlantıların URL eklendiği aralıktır. Yazılarınızı yayınlamadan önce bağlantıların eklendiğinden emin olun.

<ul class="blog-buton">
<li><a class="url-demo" href="#">ÖNİZLEME</a></li>
<li><a class="url-download" href="#">İNDİR</a></li>
</ul>

c- Blog Yazısı Butonları Örnek Kullanımı:

• ÖNİZLEME
• İNDİR

5. Blog Yazılarına Spoiler Ekleme: Blog yazılarınızda bağlantı veya URL kullanmak yerine, farklı bir blog yazısı paylaşma eklentisi olan Spoiler'ın ne kadar kullanışlı olduğunu ve blog yazılarınıza zenginlik katabilecek ek bilgilerin kullanımını artıran bir eklentidir. Spoiler çalışma sistemi aşağıdaki HTML kodlarda gördüğünüz gibi Spoiler kumanda butonu ve Spoiler sisteminin çalışmasını sağlayan kısa HTML kodlar ile blog yazılarının daha dikkat çekici olmasının yanında blogunuzun daha kullanışlı olmasını sağlamaktadır.

a- Blog Spoiler CSS Kodları:

#blog-spoiler {text-align:center;margin:20px auto;}
#blog-spoiler button{position:relative;display:inline-block;vertical-align:top;height:36px;line-height:36px;padding:0 20px;font-size:13px;color:#fff;text-align:center;text-decoration:none;border-radius:2px;cursor:pointer;background:#e94e36;border:0}
#blog-spoiler button:hover, #blog-spoiler button:focus {background:#d5452f;color:#fff;outline:none;}
#spoilerpanel {padding:1px;text-align:left;background:#fafafa;border-radius:2px;}
#spoilerpanel {padding:24px;display:none;}
#spoilerpanel img {background:#f5f5f5;margin:10px auto;}
.blog-tivigo{position:relative;display:block;-webkit-column-count:3;-moz-column-count:3;column-count:3;}
.blog-tivigo img{-webkit-backface-visibility:hidden;margin-bottom:15px;max-width:100%;}
.blog-tivigo br {display:none;}

b- Blog Spoiler HTML Kodları:

<div id="blog-spoiler"><button>Spoiler Görüntüle</button></div>
<div id="spoilerpanel">
---BLOG YAZI, RESİM VEYA VİDEO İÇERİKLERİNİZ---
</div>

c- Blog Spoiler jQuery Kodu: Bu eklenti yukarıdaki eklentilerden tek farkı bir komut dosyası ile çalışmasıdır. Bu komut dosyasını yani Spoiler jQuery dosyasını blogunuzun şablon kodları arasında bulunan </body> kodunun hemen bir satır üzerine ekleyin. </body> kodu blog şablon kodlarınızın en alt kısmında olabilir.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
$(document).ready(function() {
    $("#blog-spoiler").click(function() {
        $("#spoilerpanel").slideToggle("normal");
    });
});
</script>
</b:if>

d- Blog Spoiler Örnek Kullanımı: Biz burada Spoiler içerisinde resim paylaştık, siz Spoiler içerisinde yazı, resim veya video paylaşabilirsiniz. Tek yapmanız gereken yukarıdaki Spoiler HTML kod içerisine yayınlarınızı eklemek yeterli olacaktır.

6. Blog Yazılarında Tablo Kullanma: Blog yazılarınızda grup yada küme oluşturmak için, genelde terim, finansal yada birim gibi paylaşımlarda tablo kullanılır. Blog yazılarınızın düzenle olması için bu gibi yazılarda da tablo kullanma ihtiyacı vardır. Şimdi blog yazılarınıza bir tablo eklemek için aşağıdaki adımları takip ederek uygulayın.

a- Blog Yazı Tablosu CSS Kodları: Blog yazılarına tablo eklemek için öncelikle aşağıdaki CSS kodlarını blogunuzun şablon kodlarına ekleyin.

.post table{width:100%;text-align:left}
.post tr{width:100%}
.post th {color:#fff;background:#f49d44;padding: 10px;border:2px solid #e89e52;}
.post td{background:#fefefe;border:2px solid #ededed;padding:10px;}

b- Blog Yazı Tablosu HTML Kodları: Blog yazılarında tablonun görünmesini sağlayan aşağıdaki HTML kodları blog yayınlarınızı hazırlarken yine blogunuzun editör sayfasındaki HTML bölüme ekleyin. Tabloda görünecek bilgileri güncellemeyi unutmayın.

<table>
<tbody>
<tr>
<th>
<span>Tablo Başlık 1</span>
</th>
<th>
<span>Tablo Başlık 2</span>
</th><th>
<span>Tablo Başlık 3</span>
</th></tr><tr><td>
<span>Bölme 1</span>
</td><td>
<span>Bölme 2</span>
</td><td>
<span>Bölme 3</span>
</td></tr>
<tr class="even">
<td>
<span>Bölme 1</span>
</td><td>
<span>Bölme 2</span>
</td><td>
<span>Bölme 3</span>
</td></tr>
<tr><td>
<span>Bölme 1</span>
</td><td>
<span>Bölme 2</span>
</td><td>
<span>Bölme 3</span>
</td></tr>
</tbody>
</table>

c- Blog Yazı Tablosu Kullanma Örneği:

Tablo Başlık 1	Tablo Başlık 2	Tablo Başlık 3
Bölme 1	Bölme 2	Bölme 3
Bölme 1	Bölme 2	Bölme 3
Bölme 1	Bölme 2	Bölme 3

Blog yazılarınızda kullanabileceğiniz bazı kısa bilgileri ve eklentileri sizlerle paylaştık, bu yazımızla ilgili olarak ve yazımızda paylaştığımız eklentiler ile ilgili görüş veya herhangi bir soru için yorum bırakabilirsiniz.