TeknoMobi | Profesyonel ve Ücretsiz Blogger Tema

Yeni bir Css tema çevirisi ile karşnızdayım. Blogger için çevirisini yaptığım temamızın adı Ormeggiare.

Ormeggiare teması turuncu ve beyaz renk ağırlıklı olarak tasarlanmış. Renk uyumu çok güzel olmuş. İki sütunlu yapıya sahip ve sidebar sağ taraftadır.

Tarayıcı uyumluluğu : Firefox 3-3,5,Google Chrome 2-3, Safari 3-4, Opera 9-10, İnternet Explorer 6-7-8

Lisans Koşulları : Creative Commons Attribution 2.5 License

blogger temaplate, css template, ormeggiare template

Kurulum Klavuzu

1. Menü bölümünde düzenleme yapmak için html kodlarında aşağıdaki bölümü bulun ve gerekli değişikliği isteğinize göre yapın.

 <div id='menu'>

<ul>

<li class='current_page_item'><a alt='home' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>

<li><a href='#'>Blog</a></li>   

<li><a href='#'>About</a></li>

<li><a href='http://www.blogcuforum.net/' title='BlogcuForum'>Forum</a></li>

<li><a href='#'>Contact</a></li>

<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>

<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>

</ul>

</div>

2. Temaya otomatik devamını oku eklentisi standart olarak eklenmiştir. Bu eklenti ile ilgili detaylı bilgiye bu yazımdan ulaşabilirsiniz.

Ormeggiare Blogger Tema: Demo/Önizleme , İndir

English Statement

With a new translation Css At your theme. The theme for the blogger's name Ormeggiare translation.

Predominantly orange and white color theme Ormeggiare designed. Tonality was very good. Two-column structure, and the sidebar on the right side.

Browser Compatibility : Firefox 3-3.5, Google Chrome 2-3, Safari 3-4, Opera 9-10, İnternet Explorer 6-7-8

Lisans Conditions : Creative Commons Attribution 2.5 License

İnstallation Guide

1. Menu to edit the html code in the following section and make necessary changes according to your request.

 <div id='menu'>

<ul>

<li class='current_page_item'><a alt='home' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>

<li><a href='#'>Blog</a></li>   

<li><a href='#'>About</a></li>

<li><a href='http://www.blogcuforum.net/' title='BlogcuForum'>Forum</a></li>

<li><a href='#'>Contact</a></li>

<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>

<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>

</ul>

</div>

2. Theme as a standard plug-in automatically read more added. Detailed information about this plugin can be found in this.

Ormeggiare Blogger Template : Demo/Preview , Download

Daha önce TamBirBlog'da Blogger Otomatik Devamını Oku Bağlantısı-2 adı altında yayınlanan eklentiyi bazı blogger kullanıcılarından gelen istek üzerine biraz daha kullanışlı hale getirmeye çalıştım.

Devamını oku kısmının arka planına css kodları ile kullanışlı bir arkaplan atadım. Şimdi bazıları çıkıp biz kendimiz direk resim ile de yapabilirdik diyebilirler. Ama resim ile eklendiğinde w3 doğrulamasında hata olarak görebiliyor. En temizi css kodları ile arkaplan (backround)belirlemek.

Otomatik Devamını Oku Eklentisinin Kurulum Aşamaları

1. Css kodlarınızın en altına aşağıdaki kodları ekleyin.

 /* Devamını oku          */

.links {

display: block;

width: 130px;

height: 33px;

margin-top: 20px;

padding-top: 7px;

background: url(http://i30.tinypic.com/papo5.gif) no-repeat right top;

text-align: center;

text-transform: uppercase;

font-size: 10px;

color: #F3F4F4;

}

/* -------------------------------- */

Arkaplanda kullandığım resmi değiştirmek isterseniz. Üstteki http://i30.tinypic.com/papo5.gif resim dosyasının yerine kendi hazırladığınız resmin bağlantısını verebilirsiniz.

2. Tema kodları arasında </head&gt; kodunun hemen üstüne aşağıdaki kodları yerleştiriyoruz.



<script type='text/javascript'>var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 100;

img_thumb_width = 120;

</script>

<script src='http://tm52.weebly.com/uploads/1/3/6/1/1361393/summary-post.js' type='text/javascript'/>

Yukarıdaki kodda bulunan summary-post javascript dosyasını buraya sağ tıklayıp farklı kaydet diyerek summary-post.js dosyasını bilgisayarınıza indirin. Ardından kendi googlepages sayfanıza veya alternatif bir hosta yükleyip yukarıda bulunan http://tm52.weebly.com/uploads/1/3/6/1/1361393/summary-post.js bağlantı linki ile değiştirin.

3. Son aşama olarak temanızın kodları arasında <data:post.body/> kodunu bulup aşağıdaki kod ile değiştirin.



<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");

</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url' class='links'> Devamını oku "<data:post.title/>"</a></span>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Yukarıdaki aşamalar tarafımdan test edilerek yayınlanmıştır. Bütün tarayıcılarda sorunsuz çalışmaktadır.

Bu yazı hazırlanırken yararlanılan kaynaklar : TamBirBlog (Blogger Otomatik Devamını Oku Bağlantısı-2)