Blog Yazı Yayınlarında Kullanılan Kısa Kodeksler

Blog Yazı Yayınlarında Kullanılan Kısa Kodeksler - Blog yazıları hakkında daha önce "Blog Yazı ve Yayınlarında Kullanılan Eklentiler" hakkında bilgiler paylaştık. Bu yazımızda blog yazılarında kullanılan pratik yöntemler oluşturarak daha düzenli yazı veya yayınlar oluşturmamızı sağlayacak kısa kodlamalar ile ilgili bilgelere yer vereceğiz.

Bu bilgiler ile blog yazı ve yayınlarında daha düzenli resim ve resimli açıklamalar eklentileri gibi masaüstü ve mobil cihazlar üzerinde "Google Kullanıcı Deneyimleri" politikasına uygun olacak blog yazı ve yayınlarını geliştirmemizi sağlayacaktır.

Kısa Kodeksler Hakkında Genel Bilgi

Blog sitelerinde bir biriden farklı bir çok konu paylaşılmakta, blog yayınlarını oluştururken özellikle yayınlarda resim eklemede büyük sıkıntılar yaşanmaktadır. Şimdi bu sıkıntılardan kurtulmak için hatta bu zorlukları pratik blog yayını oluşturur gibi daha kullanışlı hale getirmek ve çok farklı yayın oluşturma özelliğini de blogunuza eklemiş olacaksınız. Aşağıdaki CSS kodunu blogunuzun şablon kodları arasında bulunan </head> kodunun bir satır üzerine ekleyerek tüm özellikleri eklemiş olacaksınız.

Blogger pratik kısa kodeks CSS kodlarını blogunuzun şablon kodları arasına eklemek için, blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Açılan sayfada CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodlarını </head> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
* {-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;}.blogger-row:after,.blogger-row:before {display: table;content: " ";}.blogger-row:after {clear: both;}.text-center {text-align: center;}.blogger-row p {margin: 0 0 10px;}.blogger-row img {border: 3px solid #eee;}.blogger-row img {max-width: 100%;vertical-align: middle;}hr {margin-top: 20px;margin-bottom: 20px;border: 0;border-top: 1px solid #eee;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}
.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}
.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}.lead {margin-bottom: 20px;font-size: 16px;font-weight: 300;line-height: 1.4;}.blogger-row a.btn {text-decoration: none !important;}.blogger-row .btn{border-radius:0;margin:0 5px 5px 0;-webkit-transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s}.blogger-row .btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.blogger-row .btn{display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent}.blogger-row .btn-success:focus{color:#fff;background-color:#449d44;border-color:#255625}.blogger-row .btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439}
.blogger .row{margin-left:-20px;margin-right:-20px;padding:0 5px}.blogger .row{margin-right:-15px;margin-left:-15px}.stn-lg-1,.stn-lg-10,.stn-lg-11,.stn-lg-12,.stn-lg-2,.stn-lg-3,.stn-lg-4,.stn-lg-5,.stn-lg-6,.stn-lg-7,.stn-lg-8,.stn-lg-9,.stn-md-1,.stn-md-10,.stn-md-11,.stn-md-12,.stn-md-2,.stn-md-3,.stn-md-4,.stn-md-5,.stn-md-6,.stn-md-7,.stn-md-8,.stn-md-9,.stn-sm-1,.stn-sm-10,.stn-sm-11,.stn-sm-12,.stn-sm-2,.stn-sm-3,.stn-sm-4,.stn-sm-5,.stn-sm-6,.stn-sm-7,.stn-sm-8,.stn-sm-9,.stn-xs-1,.stn-xs-10,.stn-xs-11,.stn-xs-12,.stn-xs-2,.stn-xs-3,.stn-xs-4,.stn-xs-5,.stn-xs-6,.stn-xs-7,.stn-xs-8,.stn-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.stn-xs-1,.stn-xs-10,.stn-xs-11,.stn-xs-12,.stn-xs-2,.stn-xs-3,.stn-xs-4,.stn-xs-5,.stn-xs-6,.stn-xs-7,.stn-xs-8,.stn-xs-9{float:left}.stn-xs-12{width:100%}.stn-xs-11{width:91.66666667%}.stn-xs-10{width:83.33333333%}.stn-xs-9{width:75%}.stn-xs-8{width:66.66666667%}.stn-xs-7{width:58.33333333%}.stn-xs-6{width:50%}.stn-xs-5{width:41.66666667%}.stn-xs-4{width:33.33333333%}.stn-xs-3{width:25%}.stn-xs-2{width:16.66666667%}.stn-xs-1{width:8.33333333%}}
@media (min-width:768px){.stn-sm-1,.stn-sm-10,.stn-sm-11,.stn-sm-12,.stn-sm-2,.stn-sm-3,.stn-sm-4,.stn-sm-5,.stn-sm-6,.stn-sm-7,.stn-sm-8,.stn-sm-9{float:left}.stn-sm-12{width:100%}.stn-sm-11{width:91.66666667%}.stn-sm-10{width:83.33333333%}.stn-sm-9{width:75%}.stn-sm-8{width:66.66666667%}.stn-sm-7{width:58.33333333%}.stn-sm-6{width:50%}.stn-sm-5{width:41.66666667%}.stn-sm-4{width:33.33333333%}.stn-sm-3{width:25%}.stn-sm-2{width:16.66666667%}.stn-sm-1{width:8.33333333%}}
@media (min-width:992px){.stn-md-1,.stn-md-10,.stn-md-11,.stn-md-12,.stn-md-2,.stn-md-3,.stn-md-4,.stn-md-5,.stn-md-6,.stn-md-7,.stn-md-8,.stn-md-9{float:left}.stn-md-12{width:100%}.stn-md-11{width:91.66666667%}.stn-md-10{width:83.33333333%}.stn-md-9{width:75%}.stn-md-8{width:66.66666667%}.stn-md-7{width:58.33333333%}.stn-md-6{width:50%}.stn-md-5{width:41.66666667%}.stn-md-4{width:33.33333333%}.stn-md-3{width:25%}.stn-md-2{width:16.66666667%}.stn-md-1{width:8.33333333%}}
@media (min-width:1200px){.stn-lg-1,.stn-lg-10,.stn-lg-11,.stn-lg-12,.stn-lg-2,.stn-lg-3,.stn-lg-4,.stn-lg-5,.stn-lg-6,.stn-lg-7,.stn-lg-8,.stn-lg-9{float:left}.stn-lg-12{width:100%}.stn-lg-11{width:91.66666667%}.stn-lg-10{width:83.33333333%}.stn-lg-9{width:75%}.stn-lg-8{width:66.66666667%}.stn-lg-7{width:58.33333333%}.stn-lg-6{width:50%}.stn-lg-5{width:41.66666667%}.stn-lg-4{width:33.33333333%}.stn-lg-3{width:25%}.stn-lg-2{width:16.66666667%}.stn-lg-1{width:8.33333333%}}@media (min-width: 768px) {.stn-sm-6 {width: 50%;float:left}}
</style>
</b:if>

A- Blog Yazı ve Yayınlarına Resim Ekleme: Blog yazı ve yayınlarında resimlerin yanında açıklama veya bilgi paylaşmak ve bu resim ve yayınların blog yayınlarında yan yana düzenli durması için kısa CSS kodekslerden faydalanırız. Aşağıdaki paylaştığımız CSS kodları ile demo görünümündeki gibi yayınlarınıza resim ekleyebilirsiniz. Bu eklemiş olduğunuz resimler masaüstü ve mobil cihazlara duyarlı olması yayınlarınızın bozulmamasına ve ekran boyutuna uygun görünümü alması ile daha kullanışlı hale gelmektedir.

NOT : Bu yayındaki kodları kullanmadan önce tüm yazıları mutlaka okuyun.
Pratik kısa kodeksler sayesinde blog yayınlarınızın tüm cihazlar üzerinde otomatik olarak ekran boyutuna göre şekillenerek yayınlarınızın düzenli görünmesini sağlayacaktır. Yukarıdaki CSS kodlarını blogunuza ekledikten sonra, aşağıdki HTML kodları blog yayınlarınıza ekleyerek düzenli blog yayınları oluşturmaya başlayabilirsiniz. Tüm özellikleri incelemek için HTML kodların altında bulunan Ön İzleme butuna tıklayın.

Blogger Pratik Kısa Kodeks HTML Kodları

HTML kodlar içerisinde bulunan resim kodu buraya yerine eklemek istediğiniz resim URL'sini ekleyin, başlık oluşturduğunuz açıklama veya yayın başlığını ekleyin, açıklama ve kısa açıklama açıklama veya bilgiyi ekleyin, böylece belirtilen yerleri oluşturduğunuz yayına göre değiştirin.

1- Blog yayınlarında 3 resmi/görseli yan yana ekleme HTML kodu;

<div class="blogger-row">
<div class="stn-md-4">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1">
</a>
</div>
<div class="stn-md-4">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1">
</a>
</div>
<div class="stn-md-4">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1">
</a>
</div>
</div>

Örnek Sayfa

2- Gazete sayfaları veya önemli açıklamalar eklemek için kullanılan HTML kod;

<div class="blogger-row" style="background:#777;color:#fff">
<br>
<div class="stn-md-4">
<a style="padding:0 0 20px;display:inline-block">
<img border="0" src="resim kodu buraya" imageanchor="1">
</a>
</div><div class="stn-md-8">
<p>
Açıklama veya metin.
</p>
<p>
Açıklama veya metin.
</p>
<p>
Açıklama veya metin.
</p>
<p>
Açıklama veya metin.
</p>
<p>
Açıklama veya metin.
</p>
</div>
</div>

Örnek Sayfa

3- Blog yayınlarında ızgara sistemi üzerine resim ve açıklama ekleme HTML kodu;

<div class="blogger-row text-center">
<div class="stn-md-4 stn-sm-6 stn-xs-12">
<div class="galeri-item">
<div class="galeri-thumb">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1"/>
</a>
</div>
<div class="galeri-details">
<h4>Başlık</h4>
<p>
Kısa açıklama
</p>
</div>
</div>
</div>
<div class="stn-md-4 stn-sm-6 stn-xs-12">
<div class="galeri-item">
<div class="galeri-thumb">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1"/>
</a>
</div>
<div class="galeri-details">
<h4>Başlık</h4>
<p>
Kısa açıklama
</p>
</div>
</div>
</div>
<div class="stn-md-4 stn-sm-6 stn-xs-12">
<div class="galeri-item">
<div class="galeri-thumb">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1"/>
</a>
</div>
<div class="galeri-details">
<h4>Başlık</h4>
<p>
Kısa açıklama
</p>
</div>
</div>
</div>
<div class="stn-md-4 stn-sm-6 stn-xs-12">
<div class="galeri-item">
<div class="galeri-thumb">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1"/>
</a>            
</div>
<div class="galeri-details">
<h4>Başlık</h4>
<p>
Kısa açıklama
</p>
</div>
</div>
</div>
<div class="stn-md-4 stn-sm-6 stn-xs-12">
<div class="galeri-item">
<div class="galeri-thumb">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1"/>
</a>
</div>
<div class="galeri-details">
<h4>Başlık</h4>
<p>
Kısa açıklama
</p>   
</div>
</div>
</div>
<div class="stn-md-4 stn-sm-6 stn-xs-12">
<div class="galeri-item">
<div class="galeri-thumb">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1"/>
</a>
</div>
<div class="galeri-details">
<h4>Başlık</h4>
<p>
Kısa açıklama
</p>   
</div>
</div>
</div>
</div>
<br>
<hr>
<br>
<div class="blogger-row" style="background:#C0393B;color:#fff">
<div class="stn-md-12">
<h3><code>Not: Önemli Başlık</code></h3>
<p>
Açıklama
</p>
<br>
</div>
</div>

Örnek Sayfa

4- Blog yayınlarında icon ve resim ekleyerek yayın oluşturma HTML kodu;

<div class="blogger-row">
<div class="stn-md-6 stn-sm-12 stn-xs-12">
<div class="stn-xs-2">
<i class="fa fa-pencil" style="font-size: 32px; color:#3c763d" aria-hidden="true"></i>
</div>
<div class="stn-xs-10">
<h3 style="margin-top:0">Markalaşma</h3>
<p>
Kısa açıklama
</p>
<br>
</div>
</div>
<div class="stn-md-6 stn-sm-12 stn-xs-12">
<div class="stn-xs-2">
<i class="fa fa-code" style="font-size: 32px; color:#3c763d;" aria-hidden="true"></i>
</div>
<div class="stn-xs-10">
<h3 style="margin-top:0">Web Tasarım</h3>
<p>
Kısa açıklama
</p>
<br>
</div>
</div>
<div class="stn-md-6 stn-sm-12 stn-xs-12">
<div class="stn-xs-2">
<i class="fa fa-search" style="font-size: 32px; color:#3c763d" aria-hidden="true"></i>
</div>
<div class="stn-xs-10">
<h3 style="margin-top:0">SEO</h3>
<p>
Kısa açıklama
</p>
</div>
</div>
<div class="stn-md-6 stn-sm-12 stn-xs-12">
<div class="stn-xs-2">
<i class="fa fa-mobile" style="font-size: 32px; color:#3c763d" aria-hidden="true"></i>
</div>
<div class="stn-xs-10">
<h3 style="margin-top:0">Mobil Uygulamalar</h3>
<p>
Kısa açıklama
</p>
</div>
</div>
</div>
<br>
<hr>
<br>
<div class="blogger-row text-center">
<div class="stn-md-12">
<p>
Açıklama veya metin
</p>
<br>
</div>
<div class="stn-md-6">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1"/>
</a>
</div>
<div class="stn-md-6">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1"/>
</a>
</div>
</div>

Örnek Sayfa

5- Blog yayınlarında resimli uzun ve kısa açıklama ekleme HTML kodu;

<div class="blogger-row" style="background-color:#16A095;color:#fff">
<div class="stn-lg-8 stn-md-7 stn-sm-12">
<h2>Başlık</h2>
<p>
açıklama veya metin
</p>
<p>
açıklama veya metin
</p>
<p>
açıklama veya metin
</p>
</div>
<div class="stn-lg-4 stn-md-5 stn-sm-12">
<a style="padding:20px 0 20px 20px;display:block">
<img border="0" src="resim kodu buraya" imageanchor="1"/>
</a>
</div>
</div>
<br>
<p>
Açıklama veya metin
</p>
<br>
<div class="blogger-row text-center" style="background:#16A095;color:#FFF">
<br>
<div class="stn-md-6">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1">
</a>
<h4>Dijital Tasarım</h4>
<p>
Kısa açıklama.
</p>
<br>
</div>
<div class="stn-md-6">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1">
</a>
<h4>Web Tasarım</h4>
<p>
Kısa açıklama.
</p>
<br>
</div>
</div>

Örnek Sayfa

6- Maddesel ve uzun yayınlar oluşturmak için kullanılan HTML kodu;

<div class="blogger-row">
<div class="stn-md-6 text-center">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1"/>
</a>
</div>
<br class="hidden-br hidden-md">
<div class="stn-md-6">
<p>
Açıklama veya metin
</p>
<p>
Açıklama veya metin
</p>
</div>
</div>

Örnek Sayfa

7- Blog yayınlarına önemli açıklama ve açıklama resimleri ekleme HTML kodu;

<div class="blogger-row">
<div class="stn-md-8 stn-sm-12">
<h2>Başlık</h2>
<p>
Açıklama veya metin
</p>
<p>
Açıklama veya metin
</p>
</div>
<div class="stn-md-4 stn-sm-12">
<h2>Başlık</h2>
<p>
<strong>
Açıklama
</strong>
</p>
</div>
</div>
<br>
<div class="blogger-row">
<div class="stn-lg-8 stn-md-7 stn-sm-12">
<h2>Başlık</h2>
<p>
Açıklama veya metin
</p>
</div>
<div class="stn-lg-4 stn-md-5 stn-sm-12">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1">
</a>
</div>
</div>

Örnek Sayfa

8- Blog yayınlarında alt alta resimli açıklama ekleme HTML kodu;

<div class="blogger-row">
<div class="stn-lg-4 stn-md-5 stn-sm-12">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1">
</a>
</div>
<div class="stn-lg-8 stn-md-7 stn-sm-12">
<h4>Başlık</h4>
<p>
Açıklama veya metin
</p>
</div>
</div>
<br>
<div class="blogger-row">
<div class="stn-lg-4 stn-md-5 stn-sm-12">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1">
</a>
</div>
<div class="stn-lg-8 stn-md-7 stn-sm-12">
<h4>Başlık</h4>
<p>
Açıklama veya metin
</p>
</div>
</div>
<br>
<div class="blogger-row">
<div class="stn-lg-4 stn-md-5 stn-sm-12">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1">
</a>
</div>
<div class="stn-lg-8 stn-md-7 stn-sm-12">
<h4>Başlık</h4>
<p>
Açıklama veya metin
</p>
</div>
</div>
<br>
<div class="blogger-row">
<div class="stn-lg-4 stn-md-5 stn-sm-12">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1">
</a>
</div>
<div class="stn-lg-8 stn-md-7 stn-sm-12">
<h4>Başlık</h4>
<p>
Açıklama veya metin
</p>
</div>
</div>

Örnek Sayfa

9- Blog yayınlarınızda içerik ile ilgili detaylı bilgiler paylaşmak için kullanılan HTML kodu;

<div class="blogger-row">
<div class="stn-md-7">
<h3>Başlık</h3>
<p>
Açıklama veya metin
</p>
<p>
Açıklama veya metin
</p>
<ul>
<li>Açıklama veya metin</li>
<li>Açıklama veya metin</li>
<li>Açıklama veya metin</li>
</ul>
</div>
<div class="stn-md-5">
<a>
<img border="0" src="resim kodu buraya" imageanchor="1"/>
</a>
</div>
</div>

Örnek Sayfa

10- Blog yayınlarının birden fazla resmi sağ ve sola ekleyerek yayın oluşturma HTML kodu;

<div class="blogger-row">
<div class="stn-md-6 stn-sm-6">
<a>
<img class="img-responsive" src="resim kodu buraya">
</a>
</div>
<div class="stn-md-6 stn-sm-6">
<h3>Başlık</h3>
<p>
Açıklama veya metin
</p>
</div>
</div>
<br>
<div class="blogger-row">
<div class="stn-md-6 stn-sm-6">
<h3>Başlık</h3>
<p>
Açıklama veya metin
</p>
</div>
<div class="stn-md-6 stn-sm-6">
<a>
<img class="img-responsive" src="resim kodu buraya"/>
</a>
</div>
</div>

Örnek Sayfa

11- Resimler ve butonlar ekleyerek özel bir blog yayın oluşturmak için kullanılan HTML kodu;

<div class="blogger-row">
<div class="stn-md-6">
<a>
<img src="resim kodu buraya" border="0">
</a>
</div>
<div class="stn-md-6">
<h1>Başlık</h1>
<p class="lead">
Kısa açıklama
</p>
<a href="#" class="btn btn-success">
Buton
</a>
<br>
<br>
<div class="blogger-row">
<div class="stn-sm-6">
<h4>Başlık</h4>
<p>
Kısa açıklama
</p>
</div>
<div class="stn-sm-6">
<h4>Başlık</h4>
<p>
Kısa açıklama
</p>
</div>
</div>
</div>
</div>
<br>
<div class="blogger-row">
<div class="stn-sm-6 stn-sm-6">
<a>
<img data-selector="img" class="img-responsive" src="resim kodu buraya">
</a>
</div>
<div class="stn-sm-6 stn-sm-6">
<a>
<img data-selector="img" class="img-responsive" src="resim kodu buraya">
</a>
</div>
</div>

Örnek Sayfa

Blogger Pratik Kodeksler Hakkında Kısa Bilgiler

Yukarıdaki HTML kodlara farklı tasarımlar kazandırmak için CSS kodlarında değişiklikler yapabilirsiniz. HTML kod içerisinde açıklamaların eklendiği <p> Açıklama veya metin </p> etiketlerinde yazıları iki tarafa yaslamak için <p style="text-align: justify;"> Açıklama veya metin </p> style kodu ekleyerek yapabilirsiniz. Eğer yazıları ortalamak istiyorsanız <p style="text-align: center;"> Açıklama veya metin </p> style kodunu ekleyin. Bu yayın hakkında görüşlerinizi bizimle paylaşmak için yorum yapabilirsiniz. Bize destek olmak için b yayını sosyal ağ sayfalarınızda arkadaşlarınızla paylaşarak bize destek olabilirsiniz.