28 Mayıs 2013 Salı

Blogger Tasarım Eklentileri

Blog yazamaya yeni başlayanlar için tasarım ve blogda yapılacak düzenlemeler her zaman göz korkutucu ve çok fazla teknolojik bilgi gerektiren adımlar olarak görünür.
Blogspot, WordPress gibi sistemler artık kullanıcı odaklı olup,  üyelerin tasarım ya da kodlama desteği almadan kendi başlarına değişiklik yapabilmelerine olanak vermektedir. Bugün size blogunuza ekleyeceğiniz ufak bir kod ile görsellerinizin çerçevesiz (border), sade ve sınırlara bağlı kalmadan yayınlamanızı sağlayacak kod önerilerinde bulunacağız.
Eğer görsellerinizi eklediğinizde otomatik olarak çerçeve (border) ekleniyorsa aşağıdaki kodları birkaç adımda ekleyerek blogunuzun tasarımında ufak bir dokunuş yapabilirsiniz.
Tek İçerikte İmaj Çerçevesini Kaldırma:
Eğer sadece bir yazınıza özel görsellerinizin kenarındaki çerçeveyi kaldırmak istiyorsanız aşağıdaki adımları izleyin.
1- Postunuza bir resim yükleyin.
2- Resmi yükledikten sonra sol üst köşesinden HTML seçin.
3- Şimdi aşağıdaki gibi görünen kodu HTML’den bulun.
<a href=”http://bumhaber.hurriyet.com.tr/-i5o6GCL7k90/UV5oofqK-RI/AAAAAAAADWE/qPJogdgsH5Y/s1600/Remove-Border.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://4.bp.blogspot.com/-i5o6GCL7k90/UV5oofqK-RI/AAAAAAAADWE/qPJogdgsH5Y/s320/Remove-Border.jpg” /></a>
4-  Şimdi görsellerinizin sınırını kaldırmak için yukarıdaki koda  style=”border-style:none;”  kodunu ekleyin, kopyaladığınız kodu <img> etiketinin içine eklemeye dikkat edin.
Ör:
<a href=”http://bumhaber.hurriyet.com.tr/-i5o6GCL7k90/UV5oofqK-RI/AAAAAAAADWE/qPJogdgsH5Y/s1600/Remove-Border.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img style=”border-style:none;”border=”0″ src=”http://4.bp.blogspot.com/-i5o6GCL7k90/UV5oofqK-RI/AAAAAAAADWE/qPJogdgsH5Y/s320/Remove-Border.jpg” /></a>
5 – Değişiklikleri kaydederek işlemi tamamlayın.
Tüm Yazılarınızda İmaj Çerçevesini Kaldırma:
Bu yöntemi kullanarak içeriklerinize yer alan görsellerdeki  tüm sınır kaldırabilir ve gelecekte de yazacağınız yazıların da çerçevesiz yayınlanmasını sağlayabilirsiniz.
1 – Panelinizden Template (Şablon) bölümüne gidin.
2 – Blog şablonunun bir yedeğini alın.
3 – HTML Düzenle ‘yi tıklatın.
4 – Şimdi aşağıdaki şablona benzer bir kodu HTML bölümünüzden bulun. (Kodu bulmakta zorlanıyorsanız ctrl +F ile kodun bir kısmını koplayarak kod içinde arama yapabilirsiniz)
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
 padding: $(image.border.small.size);
 background: $(image.background.color);
 border: 1px solid $(image.border.color);
 -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
 -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
 box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
5- Aşağıda verilen kod ile değiştirin.
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}
 6-  Son olarak yaptığınız değişiklikleri kaydedin.
Bu ve bunun gibi küçük dokunuşlarla blogunuzun tasarımına katkıda bulunabilirsiniz.
İyi Bloglamalar!