Blog veya sitede içerikler içindeki görselleri daha belirgin ve şık göstermeye ne dersiniz? Blogger sitenizdeki görselleri "Polaroid Fotoğraf Çerçeveleri" içinde gösterin. Blogger görseller için polaroid çerçeveler oluşturma bir kaç basit adımla resimlerinize uygulayın.
Yazdığınız içeriklerde konu ile alakalı görsel kullanımı oldukça önemli bir kriter olduğu bilinir. İçerik ile alakalı görsel kullanımı içeriği destekleyici bir unsur olarak görülür. Hem okuyucu hemde arama motorları içinde görseller önemli olmaktadır.
İçeriği destekleyicisi olarak kullanılan resimleri seo içinde optimize etmeliyiz. Arama motorları okuyucu gibi görselleri algılayamaz. Görseller ve resimler için seo uyumlu olmak için görselin adı, boyutu, alt etiketi gibi kriterleri bulunuyor. Görselleri seo için optimize ettiğinizden emin olun.
Görsel ve resimleri okuyucu için optimize etmeye ne dersiniz? Blogger'da görseller için polaroid çerçeveler oluşturarak okuyucu için optimize edin. Polaroid çerçeve içinde görselleri daha belirgin ve şık bir şekilde gösterin.
İnsanlar arama motorları gibi değildir gördüklerini anlama ve kavrama yeteneği bulunuyor. Güzel şeyleri kim sevmek ki... Blogger görseller için polaroid çerçeve sayesinde görselleri daha güzel bir şekilde sunun. Basit bir sunum aksine daha ilgi çekici olacaktır.
Blogger Görseller İçin Polaroid Çerçeveler Oluşturma Nasıl Uygulanır?
Blogger'da polaroid çerçeve uygulamak iki aşamalı adımdan oluşmaktadır. Birinci adım görünüm için css kodlarını sitenize eklemek. İkinci adım ise görsellere polaroid çerçeve uygulamak.
Polaroid Çerçeve Css Kodları
Blogger'da oturum açın tema ve html düzenle diyerek tema kaynak kodlarında ]]></b:skin> veya </style> arayın. Bulduğunuz ]]></b:skin> veya </style> hemen üstüne aşağıdaki kodları ekleyiniz.
/* Görsel max boyut */ 400px olarak ayarlanmıştır. Görsel boyutu 400px aşmayacaktır ancak sizin uyguladığınız bir boyutu aşmaması için 400px yerine 100% kullanmanızı öneririz.{alertInfo}
figure, figcaption {
display: block;}
#polaroid{
width:100%;
padding:0px 10px;
margin:auto;
text-align: center;}
#polaroid figure{
position:relative;
width: auto;
max-width: 400px; /* Görsel max boyut */
margin: 20px auto 0px;
padding: 6px 8px 10px 8px;
display:inline-block;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
background-color: #eee6d8;
-webkit-transform:rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-backface-visibility:hidden;}
#polaroid figure:nth-child(even) {
margin:20px 18px 20px 25px;
-webkit-transform:rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility:hidden;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);}
#polaroid figure:before {
content: '';
display: block;
position: absolute;
left: 5px;
top: -10px;
width: 75px;
height: 25px;
z-index: 1;
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);}
#polaroid figure:nth-child(even):before {
left:unset;
right:10px;
top:-10px;
width: 55px;
height: 25px;
z-index: 1;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);}
#polaroid img{
max-width: 100%;
width: 100%;
height: auto;}
#polaroid figcaption{
text-align:center;
font-family: cursive, Arial, Helvetica, sans-serif;
color:#454f40;
font-style:italic;
letter-spacing:0.09em;
margin-top:10px;}{codeBox}
Görsellere Polaroid Çerçeve Uygulama
Blogger sitenizde polaroid çerçeve oluşturmanın içinci adımı ise resimleri uygun hale getirmeniz gerekmektedir. Resimleri aşağıdaki gibi yapılandırma yapmanız gerekmektedir.
<div id="polaroid"> kapsayıcı görevi gördüğünden bir kaç resmi alt alta veya yan yana göstermek istediğinizde resimleri <figure> </figure> arasına yerleştirin. Örnek kullanımlarını aşağıda belirteceğiz.{alertInfo}
<div id="polaroid">
<figure>
<img src="resim url" alt="resim alt etiketi" title="resim başlığı"/>
<figcaption>Çerçeve alt başlık</figcaption>
</figure>
</div>{codeBox}
Birden fazla resim için polaroid çerçeve uygulamak için aşağıdaki gibi düzenleyiniz.
<div id="polaroid">
<figure>
<img src="resim url" alt="resim alt etiketi" title="resim başlığı"/>
<figcaption>Çerçeve alt başlık</figcaption>
</figure>
<figure>
<img src="resim url" alt="resim alt etiketi" title="resim başlığı"/>
<figcaption>Çerçeve alt başlık</figcaption>
</figure>
<figure>
<img src="resim url" alt="resim alt etiketi" title="resim başlığı"/>
<figcaption>Çerçeve alt başlık</figcaption>
</figure>
</div>{codeBox}
Görselleri uygun şekilde düzenledikten sonra aşağıdaki gibi görünmesi sağlanır. Ancak unutmamanız gereken ise görsel boyutları büyük ise farklı şekilde görünebilir. Görsel ve resim boyutlarını uygun şekilde ayarlayınız. Mobilde ise alt alta görüneceklerdir.
Blogger görseller için polaroid çerçeveler oluşturma artık öğrendiniz. Polaroid çerçeve oluşturmak artık sizin yaratıcılığınıza kalmış bir durum olacaktır. Görsel boyutları ile oynayarak farklı tasarımları oluşturabilirsiniz.