Blog Yayınlarında Izgara Sistemi Kullanma

Blog Yayınlarında Izgara Sistemi Kullanma - Blog sitenizde yayınlarınızı wordpress'te olduğu gibi ızgara sistemi ile de oluşturabilirsiniz. Bu özellik blog yayınlarında kullandığımız tablo sistemi gibi yayın içeriklerinin daha düzenli ve anlaşılır olmasını sağlamaktadır.

Bu kısa kodeksler ile blog yazılarınızı hazırlamanızda size kolaylık sağlaması için hazırlanmıştır. Bir önceki yazımızda "Blog Yazı Yayınlarında Kullanılan Kısa Kodeksler" yayınımızda blog yayınlarında ızgara sitemi üzerine resim eklemeyi anlatmıştık. Blog yayınlarına eklediğimiz görsellerin ile yazılarının görüntü olarak uyumlu olmasını sağlamak için bilgiler vereceğim.

Bir önceki yayınımız olan "Blog Yazı Yayınlarında Kullanılan Kısa Kodeksler" içerisinde bulunan CSS kodlarını blogunuza eklediyseniz, bu yayınımızdaki CSS kodlarını blogunuza yüklemenize gerek yoktur.

Blogger yayınlarında ızgara sistemi kullanma kodeksleri

1- Blogger ızgara sistemi CSS kodu: Aşağıdaki HTML kodları blog yayınlarınızda kullanmak için öncelikle CSS kodlarını blogunuzun şablon kodları arasına eklemeniz gerekmektedir. Blogger hesabınızda oturum açın ve blogunuzun kumanda panelinde bulunan Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Şablon kodları sayfasında CTRL+F yardımıyla ]]></b:skin> veya </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

CSS kodları

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
:after, :before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
hr {margin-top: 20px;margin-bottom: 20px;border: 0;border-top: 1px solid #eee;}
.blogger-row:after,.blogger-row:before {display: table;content: " ";}
.blogger-row:after {clear: both;}
.blogger-row h4 {font-weight: 600;line-height: 1.1;color: inherit;margin-top: 10px;margin-bottom: 10px;font-size: 18px;}
.stn-sm-8,.stn-sm-3,.stn-sm-4,.stn-sm-6 {position:relative;min-height:1px;padding-right:15px;padding-left:15px}
@media (min-width: 768px) {.stn-sm-8 {width: 66.66666667%;float:left}
.stn-sm-6 {width: 50%;float:left}.stn-sm-4{width:33.33333333%;float:left}
.stn-sm-3 {width:25%;float:left}}

2- Blogger ızgara sistemi HTML kodları: Yukarıdaki CSS kodlarını blogunuza ekledikten sonra, blog sitenizde yeni yayın oluşturduğunuzda yazılarınızı bölümlere ayırarak kullanmak için aşağıdaki HTML kodlardan faydalanabilirsiniz. Ön izleme butonuna tıklayarak 5 farklı yayın oluşturma örneklerini inceleyebilirsiniz. Ön izleme sayfasındaki gibi HTML kodlar aşağıda sıralanmaktadır.

Sütun 1/2

<div class="blogger-row">
<div class="stn-sm-6">
<h4>Sütun 1/2</h4>
<p>
Açıklama veya metin
</p>
</div><div class="stn-sm-6">
<h4>Sütun 1/2</h4>
<p>
Açıklama veya metin
</p>
</div>
</div>

Sütun 1/3

<div class="blogger-row">
<div class="stn-sm-4">
<h4>Sütun 1/3</h4>
<p>
Açıklama veya metin
</p>
</div>
<div class="stn-sm-4">
<h4>Sütun 1/3</h4>
<p>
Açıklama veya metin
</p>
</div>
<div class="stn-sm-4">
<h4>Sütun 1/3</h4>
<p>
Açıklama veya metin
</p>
</div>
</div>

Sütun 1/4

<div class="blogger-row">
<div class="stn-sm-3">
<h4>Sütun 1/4</h4>
<p>
Açıklama veya metin
</p>
</div>
<div class="stn-sm-3">
<h4>Sütun 1/4</h4>
<p>
Açıklama veya metin
</p>
</div>
<div class="stn-sm-3">
<h4>Sütun 1/4</h4>
<p>
Açıklama veya metin
</p>
</div>
<div class="stn-sm-3">
<h4>Sütun 1/4</h4>
<p>
Açıklama veya metin
</p>
</div>
</div>

Sütun 2/3 - Sütun 1/3

<div class="blogger-row">
<div class="stn-sm-8">
<h4>Sütun 2/3</h4>
<p>
Açıklama veya metin
</p>
</div>
<div class="stn-sm-4">
<h4>Sütun 1/3</h4>
<p>
Açıklama veya metin
</p>
</div>
</div>

Sütun 1/3 - Sütun 2/3

<div class="blogger-row">
<div class="stn-sm-4">
<h4>Sütun 2/3</h4>
<p>
Açıklama veya metin
</p>
</div>
<div class="stn-sm-8">
<h4>Sütun 1/3</h4>
<p>
Açıklama veya metin
</p>
</div>
</div>

Örnek Sayfa

Yukarıdaki HTML kodlarında blogunuza uygun olarak değişiklikler yapmak için, CSS kodları içerisinde bulunan class="stn-sm-4" ve class="blogger-row" gibi class kod gruplarında değişiklikler yapabilirsiniz. Bu yayın ile ilgili herhangi bir soru veya görüşleriniz için yorum siteminden soru ve görüşlerinizi paylaşabilirsiniz.