Son Yazılar
Beni takip edenler genelde Css tema çevirisi yaptığımı bilirler. Ama son zamanlarda benden Magazin tarzı tema çevirisi yapmam yönünde bir çok istek aldım. Bu isteklere cevapsız kalmak olmaz diyerek hoşuma giden ve Blogger için çevrilmemiş temaları çeviri sırasına aldım.
Magazin tarzı temalardan ilk çevirisini yaptığım SkinPress tarafından hazırlanan ve ücretsiz dağıtılanBlueMania Wordpress temasıdır.
BlueMania teması web 2.0 tarzını çok iyi bir şekilde yansıtıyor. Blog başlığı büyük ve kalın harflerle oluşturulduğundan göz alıcı bir başlık tasarımı yapabilirsiniz.
Blog başlığının hemen altında bulunan dinamik özellikli yazı alanı ise blogunuza ayrı bir görsellik katarak ziyaretçilerinizin blogunuza hayran kalmazını sağlar. Yine dinamik yazı alanının hemen sağında bulunan Rss ikonunu isterseniz kendinize göre kişiselleştirebilirsiniz.
BluaMania teması 2 sütunlu bir yapıya sahiptir. Sidebar sağ tarafta bulunmaktadır. Yazı alanı geniş olduğundan yazılarınız ziyaretçiler tarafından daha rahat okunabilmektedir.
Özellikler
- Featured Post bölümü, buraya koymuş olduğunuz resimli veya düz yazı şeklindeki mesajlar rotasyon halinde ekrana gelir.
- Başlık yanına 468x60 reklam alanı
- Sidebar 125x125 reklam banner alanı
Yapılandırma
Navbar Menü :
<div id='mainmenu'>
<ul>
<li class='first current_page_item'><a alt='home' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li class='page_item page-item-2'><a href='#' title='About'>About</a>
<ul>
<li class='page_item page-item-36'><a href='#' title='test1'>Test1</a></li>
<li class='page_item page-item-40'><a href='#' title='Test3'>Test3</a></li>
<li class='page_item page-item-42'><a href='#' title='Test4'>Test4</a></li>
</ul>
</li>
<li class='page_item page-item-12'><a href='#' title='Contact'>Contact</a></li>
<li class='page_item page-item-13'><a href='#' title='Advertise'>Advertise</a></li>
<li class='page_item page-item-14'><a href='http://www.teknomobi.net/' title='themes'>themes</a></li>
</ul>
</div>
Header Reklam Alanı 468x60 :
<div id='header_banner'><div class='banner'/> Adsense Kodu Buraya Gelecek</div>
Featured Post :
<div id='board'>
<div id='board_left'>
<div id='board_items'>
<div id='board_body'>
<h2>Featured Posts</h2>
<div id='board_carusel'>
<div class='belt'>
<div class='board_item'>
<!-- board_item -->
<p><img alt='Colorbox Blogger Tutorial' src='http://i31.tinypic.com/bds8eo.png'/><strong><a href='http://www.teknomobi.net/2009/08/colorbox-jquery-ligthbox-in-blogger.html'>Colorbox Blogger Tutorial</a></strong> earn how to use the platform before colorbox told blogger application. Application of the most familiar application of Colorbox lightbox is a clone. Colorbox application and speed, and usability, but also work seamlessly in all browsers because of my profile, my priority....</p>
<p class='more'><a href='http://www.teknomobi.net/2009/08/colorbox-jquery-ligthbox-in-blogger.html'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><strong><a href='http://marro.ws/'>Marro.ws is web-clipping tool</a></strong> We are visiting internet and saving some things everyday. If you are reading an article on internet and like just two sentences of this article, what will you do?
Do you use Delicious to save the link of article? Or will you save the link to your bookmarks?...</p>
<p class='more'><a href='http://marro.ws/'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><img alt='Home Refinance Loan' src='http://i27.tinypic.com/2hmiqg4.png'/><strong><a href='http://www.skinpress.com/demo/home-refinance-loan/'>Home Refinance Loan</a></strong> Our homes are our biggest assets. A fruit borne out of many years of hard work, earnings and dreams! But, are you still paying the same higher interest rates on the home loan you have availed few years...</p>
<p class='more'><a href='http://www.skinpress.com/demo/home-refinance-loan/'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><strong><a href='http://www.skinpress.com/demo/an-image-in-a-post/'>An image in a post</a></strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam...</p>
<p class='more'><a href='http://www.skinpress.com/demo/an-image-in-a-post/'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><strong><a href='http://www.skinpress.com/demo/cash-out-refinance/'>Cash-Out Refinance</a></strong> For many, their homes are just not dwellings that protect them against rain, sun, and wind. But they are piggy banks, which can be used to raise some urgent money, even if the home still lays collateral...</p>
<p class='more'><a href='http://www.skinpress.com/demo/cash-out-refinance/'>Readmore</a></p>
<!-- /board_item -->
</div> </div>
</div>
</div>
<ul id='board_carusel_nav'>
<li id='board_carusel_nav_1'><a class='selected' href='javascript:stepcarousel.stepTo('board_carusel', 1)'>1</a></li>
<li id='board_carusel_nav_2'><a href='javascript:stepcarousel.stepTo('board_carusel', 2)'>2</a></li>
<li id='board_carusel_nav_3'><a href='javascript:stepcarousel.stepTo('board_carusel', 3)'>3</a></li>
<li id='board_carusel_nav_4'><a href='javascript:stepcarousel.stepTo('board_carusel', 4)'>4</a></li>
<li id='board_carusel_nav_5'><a href='javascript:stepcarousel.stepTo('board_carusel', 5)'>5</a></li>
</ul>
</div>
</div>
<div id='header_rss'>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Rss'><img alt='Rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_I4Oz8pbQu4lziREhObr7QSheo-veEu23LQk6RWQncsgMVADGeNOehU9qvuzqlX_pItASJBHY8Fe5dlSdkB9G3OjVk7ojlEHK6yL9smU4w5kR12mfBbYvffWOor8-7oNObMx6BAnr5SA/s1600/button_rss.png'/></a>
</div>
</div>
Sidebar 125x125 Reklam Alanı :
<div id='sidebar_ads'><div><a href='http://www.skinpress.com/' title='SkinPress'><img alt='skinpress' src='http://i27.tinypic.com/2hmiqg4.png'/></a></div><div><a href='http://www.teknomobi.net/' title='TeknoMobi'><img alt='teknomobi,blogger,blogger templates' src='http://i28.tinypic.com/2q9fmt4.jpg'/></a></div><div><a href='http://marro.ws/' title='Marrows'><img alt='social web' src='http://i25.tinypic.com/2ujmf00.png'/></a></div><div><a href='http://teknodergi.org/' title='TeknoDergi'><img alt='teknodergi,drupal' src='http://i27.tinypic.com/vytfn7.jpg'/></a></div></div>
Bilgilendirme : İndirdiğiniz dosyanın içinde bulunan klasörlerde Resim dosyaları ve Featured Post bölümünün Js dosyaları bulunmaktadır. Blogunuzun daha hızlı açılması için resim ve js dossyalarını kendi ücretsiz host alanınıza yükleyebilirsiniz. İleride doğacak sorunlardan bu sayede kurtulabilirsiniz.
Bu yazımda Blogger kullanıcıları için ufak bir css ipucu vereceğim. Blogunuz da yayınladığınız yazıların başlıklarını istediğiniz gibi özelleştirebilirsiniz. Tamamını büyük harf - küçük harf veya sadece ilk harflerinin büyük olmasını sağlayabilirsiniz. Bu işlemleri nasıl mı yapacağız? Aşama aşama anlatayım o zaman!..
İlk olarak bloğunuzda Css kodlarınız arasında yazı başlığı ile ilgili kod bölümünü tespit etmeniz gerekmektedir. Nasıl mı tespit edeceğiz diye sorarsanız bunun bir kaç değişik yöntemi var. Genellikle temalarda yazı başlığı ile ilgili Css kodu aşağıdaki kod öbekleri gibi oluyor;
.post h2 {
font-family: Arial, Georgia, Sans-serif;
font-size: 16px;
margin:0 5px;
text-align:left;
.post .title {
height: 42px;
padding: 8px 0 0 20px;
letter-spacing: -.5px;
color: #8AB52B;
Eğer blog temanızda bunlara benzer bir kod öbeği yoksa h1, h2, h3 kodlarını arayabilirsiniz. Neden derseniz başlık yazıları bu kodlar ile belirleniyor. Blogger için çevirdiğim bir Css temasında ne yazık ki yukarıda verdiğim bölümler yoktu, daha doğrusu burada anlattığım harf düzenini tema kodlarında uygulayamıyordum benimde aklıma yazı başlığının hangi heading kodunu kullandığı geldi ve o kodu bulup ufak bir ekleme ile istediğim değişikliği yaptım;
h1, h2, h3 {
font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
font-weight: Bold;
padding: 10px;
color: #444;
}
h1 {
font-size: 2.9em;
}
h2 {
font-size: 2.5em;
color: #88AC0B;
}
h3 {
font-size: 1.6em;
font-weight: normal;
padding: 16px 10px 4px 10px;
}
Yukarıda görülen kod öbeğinde benim değişiklik yapacağım bölüm h2 öbeği…
"LOREM IPSUM DOLOR SIT AMET" örneğindeki gibi yazı başlıklarınızın tamamının büyük harf olmasını istiyorsanız.
text-transform:uppercase
"lorem ipsum dolor sit amet" örneğindeki gibi yazı başlıklarınızın tamamının küçük harf olmasını istiyorsanız
text-transform:lowercase
"Lorem Ipsum Dolor Sit Amet" örneğindeki gibi yazı başlıklarınızda ki sözcüklerin sadece ilk harflerinin büyük harf olmasını istiyorsanız.
text-transform:capitalize
değerlerini atamalısınız. Bu değeri atadıktan sonra kod öbeğiniz aşağıdaki gibi olacaktır.
Örnek : Yazı başlığındaki sözcüklerin sadece ilk harfi büyük olması için kod öbeğimiz;
.post h2 {
font-family: Arial, Georgia, Sans-serif;
font-size: 16px;
margin:0 5px;
text-align:left;
text-transform:capitalize
veya
h2 {
font-size: 2.5em;
color: #88AC0B;
text-transform:capitalize
}
Not : Bu yazı Blog Dergisi eylül sayısı için hazırlanmıştır. Blog Dergisi bu ay dopdoplu bir içerikle okuyucularının beğenisine sunulmuştur. Okumanız önemle tavsiye olunur.
Bilgi için : Blog Dergisi Birinci Sayı, İkinci Sayı
Türkiye'de blog yazarları arasında en fazla tanınanlardan bir tanesi olan Sunipeyk iki gün önce çok güzel bir yazı hazırlamış. Yazının başlığı "Bir blog'da olması gereken 10 özellik". Bu yazıyı ilk olarak FriendFeed üzerinde gördüm ve hemen yazıyı okudum.
Sunipeyk wordpress blogları için hazırlamış bu yazıyı... FriendFeed'de bu yazı ile ilgili yapılan yorumlarda Blogger için de bu tür bir yazıya ihtiyaç duyulduğunu gördüm. Blogger ile ilgili belirli birdeneyim ve eklenti bilgisine sahip olmamdan yola çıkarak Sunipeyk'in hazırladığı yazının Blogger versiyonunu sizler ile paylaşmak istiyorum.
Bir blogger blogunda olması gereken 10 özellik;
- Yazının kaç kere okunduğunu gösteren eklenti
Page View Counter Bir önceki yazımda bu özelliği bloggere nasıl ekleyebileceğinizi anlattım. - Yorumlara abone olma
Bu özelliği blogger bloglarına eklemek çok kolay, yeni sayfa öğesi ekle kısmında Abone ol widgetını ekleyebilirsiniz. - Benzer yazılar eklentisi
Bu eklentiyi blogger bloglarınızda bir kaç şekilde kullanabiliyorsunuz. Şuan en revaçta olan Resimli Benzer Yazılar eklentisidir. Bu eklentiyi blogunuza kolayca eklemek için LinkWithin'i kullanabilirsiniz. - FriendFeed eklentisi
Bu eklentinin genel amacı FriendFeed'e düşen yazılarınıza gelen yorumların blogunuzda yazının altında görünmesidir. Bu eklentiyi blogger blogunuza nasıl ekleyeceğinizi buradan öğrenebilirsiniz. - FeedBurner entegrasyonu
Blogunuzun Rss akışışını daha iyi bir şekilde yapılandırmanızı sağlar. Blogger blogları için zorunlu olamsına gerek yok. Çünkü blogger atom özelliği sayesinde otomatik rss bağlantısı sağlıyor. Fakat daha iyi bir istatistik için FeedBurner tavsiye ederim. - iPhone eklentisi
Blogunuzu iPhone telefonlarında daha düzgün görünmesini sağlayan bir eklentidir. Blogger için ne yazık ki tam olarak bu eklentiyi çalıştırma şansı yok. Fakat çok Mobify.me kullanarak mobil telefonlarda blogunuzu optimize edebilirsiniz. - İletişim formu
Blogunuza iletişim formu eklemek için bir çok alternatif bulunmaktadır. Ben kendi blogumda Zohokullanmaktayım. Siz isterseniz Jotform'u da kullanabilirsiniz. - Çevrim içi ziyaretçi eklentisi
O an blogunuzda kaç kişinin olduğunu gösteren bir eklentidir. Bu eklenti için en iyi seçimwhos.amung.us olacaktır. - Hakkında, iletişim, ve varsa reklam şartları için bilgi sayfası
Bu sayfaları normal bir yazı gibi blogunuza ekleyip ana sayfa da bağlantı linklerini verebilirsiniz. - Paylaş-Share eklentileri
Blogger için bu eklentinin bir çok alternatifi bulunmaktadır. Benim burada yaptığım anlatım işinizi görecektir. Alternatif olarak daha sade bir eklenti istiyorsanız Add Toany'e göz atmanızı tavsiye ederim.
Blogger bloglarında olması gereken 10 adet özelliği Sunipeyk'in belirlediklerine paralel olarak bu şekilde hazırladım. Umarım beğenirsiniz.
Blogger alt yapısını kullandığınız blogunuzda meta tag bilgilerini sadece ana sayfada göstermek isterseniz yapmanız gereken Description ve KEYWORDS meta bilgilerini ana sayfada tanımlamaktır. Bunu yapabilmek için özel bir kod kullanıyoruz. Eğer blogunuza dah önce meta bilgileri eklediyseniz aşağıda verdiğim yönteme göre yeniden düzenleyebilirsiniz.
İlk yapmanız gereken blogunuzun kodlarında aşağıda verdiğim kodlar arasında meta bilgileri var mı? Öncelikli olarak bunu kontrol edelim.
<head>
<b:skin><![CDATA[/*
Eğer yukardaki kodların arasında herhangi bir meta tag kodu yoksa
<head>
kodunun hemen altına aşağıdaki kodu koyabilirsiniz.
<b:if cond='data:blog.pageType != "item"'>
<meta content='Bu alana blog bilginiz gelecek.' name='Description'/>
</b:if>
ve
<b:if cond='data:blog.pageType != "item"'>
<meta content='buraya aralarına virgül koyarak etiketleri koyacaksınız' name='KEYWORDS'/>
</b:if>
Bu işlemi yaptıktan sonra meta tag bilgileri artık sadece ana sayfanızda görülecektir. Blogger bloglarında herhangi bir olumsuzluğa yol açmamaktadır. Ama ekleyip eklememek yinede size kalmış...
Blogger yani blogspot, dünyada ücretsiz bloglama için tartışmasız lider durumda. Blog yazarlarının her ne kadar kendi ücretli blogları olsada bir tanede muhakkak blogger’dan ücretsiz blog açmışlardır. Her blogger’da isterki kendi blogunun diğerlerinden farklı ve güzel görünmesini.
Bende sizler için tasarımı ile olsun, göze hoş gelmesi ile olsun ve kullanışlılığıyla olsun 33 adet blogger temasını değişik sitelerden toplayıp bir araya getirdim. Demolarına bakarak beğendiğinizi indirebilirsiniz.
Temalar çeşitli Ücretsiz Blogger Tema sitelerinden tarafımdan tarafından en iyileri seçilerek derlenmiştir. Eğer bu listede yer almasını istediğiniz başka temalarda var ise onlarıda belirtirseniz eklerim.
İsterseniz 33 temanın tamamını aşşağıdaki indir butonuna indirebilirsiniz. 1,77 mb
En iyi 33 blogger teması (1,7 MiB, 1.188 kez indirildi.)
Rar Pass: blog.isakoc.com
İsterseniz aşşağıdan tema resimlerine ve demolarına tek tek bakarak beğendiğinizi indirebilirsiniz.
1 – Solitude
2 – Abrasive
3 – Dreamy
4 – Flower Blog
5 – Wiking
6 – Paperview
7 – The Conservative American
8 – Black Grass
9 – Acid Rain
10 – Magasin Cuatro
11 – Dark Forest
12 – Dark Flower
13 – Bcute
14 – Smell Like Facebook
15 – April
16 – Elegant Grunge
17 – Woody
18 – Compositio
19 – Ele
20 – Dark Mistry
21 – Fusion
22 – Cosmo+
23 – Magazeen
24 – Infinity
25 – Revolution Elements
26 – ZinePress
27 – Zinmag Remedy
28 – Vibrant
29 – Turn Out Mag
30 – Techlure
31 – Zinmag Primus
32 – Smoky
33 – Notepad Chaos
-
Son Yorumlar
-
Öne Çıkanlar