Öncelikle beğendiğiniz bir şablonu (bkz: ) bilgisayarınıza indirin ve beraber düzenlemeye başlayalım. Örnek teşkil etmesi bakımından ben de şöyle bir şablonu ( indirebilirsiniz) uyarlayacağım:


Bir şablonu 3 bölüm olarak ele alabiliriz; şablonun resim dosyaları, css kodları ve html kodları. Bunlara bir de yazılarımızın, kategorilerimizin, yorumlarımızın v.s. görünmesi için Blogcu’da tanımlanmış kodları ekleyebiliriz.
1. Resim Dosyaları
İlk olarak şablonumuzun resim dosyalarını bir sunucuya yüklememiz gerekiyor ki daha sonra css kodlarımızla bu resimleri çağıracağız. Yükleme işlemini dilerseniz , gibi ücretsiz resim sunucularına yapabilirsiniz. Ancak daha sağlıklı olması bakımından Blogcu’nun sağladığı resim yükleme alanını kullanmanızı tavsiye ederim. Hemen belirteyim şablonda bulunan her resim dosyasını kullanmayacağız. Çünkü bazıları önizlemede kullanılıyor, bazıları da bizim için gereksiz. Örneğin benim düzenlediğim şablondaki resimler: banner.jpg, bgd.jpg, image.jpg, pyramid.gif, search-grey.gif. Ben bunlardan banner, bgd ve pyramid dosyalarını kullanacağım.
Resimleri bir suncuya aşağıdaki adreslerle yükledim:

• http://img478.imageshack.us/img478/8951/bannersz4.jpg
• http://img356.imageshack.us/img356/8810/bgdmp7.jpg
• http://img338.imageshack.us/img338/6189/pyramidoj8.gif

Bu adresleri bir yere kaydediyoruz. Az önce yazdığım üzere css kodlarında ihtiyacımız olacak.
2. HTML Kodları
Html kodları, css kodlarımızla bütünleşik çalışarak blogumuzda neyin nerede, hangi fonksiyonlarla olacağını göstermemize yarayacak.
Düzenlemeye başlamadan önce bölümüne girin ve eski şablonunuza ait kodları bir yere kopyalayıp kaydedin.
Şablonumuzda “index” isimli ve “Html Document” olarak tanımlı bir dosyamız mevcut (varsayılan tarayıcınız Internet Explorer ise “e” logosuyla, Firefox ise Firefox logosuyla görebilirsiniz). Bu dosyayı açıyoruz ve sayfa üzerinde sağ tıklayarak “Kaynağı Görüntüle” veya “Sayfa Kaynağını Göster” diyoruz. Açılan notepad dosyasındaki kodların tamamını seçiyoruz ve bu kodları kopyalayıp şablon düzenleme bölümüne yapıştırıyoruz.

Önizlemeden bakarsanız yandaki gibi bir görünüm elde edeceksiniz.
3. CSS Kodları
Şablonumuzun asıl görüntüsüne kavuşması için css kodlarını kullanacağız. Css kodları şablon dosyanız içerisinde büyük bir ihtimalle “style” adı altında bulunur. Kodları notepad ile veya kodların görüntülenmesinde bir sorun yaşarsanız ile açabilirsiniz. Css kodlarımızın da tamamını seçiyor ve kopyala diyoruz. Az önce Blogcu şablon düzenleme bölümüne yapıştırdığımız html kodlarımızda </head> etiketinin hemen altına <style> ve </style> etiketlerini yazıyoruz. Kopyaladığımız css kodlarımızı da bu iki etiketin arasına yapıştırıyoruz. Yani:
….
</head>
<style>
css kodlarımız
</style>
….
şeklinde olacak.
Bu işlemin ardından tekrar önizleme yaparsanız şablonumuzun yavaş yavaş şekillendiğini ancak bazı eksiklerimizn de olduğunu göreceksiniz.
Şablonumuza ait resim dosyalarını bir sunucuya yüklemiştik ve adreslerini kaydetmiştik. Şimdi o resim dosyalarını kullanacağız. Şablona eklediğimiz css kodları arasında yukarıda 1. bölümde kalın harflerle yazdığım resim dosyalarını aratıyorum. Şablon düzenleme bölümünde CTRL+F tuşlarına basarak arama bölümüne resim dosyalarınızın orijinal isimlerini ve uzantılarını yazın. Bulunan kodları ki bunlar parantez içinde yazılıdır, resimleri yüklediğimiz adreslerle değişitriyoruz. Örneğin bgd.jpg şeklinde bir arama yaptım. Karşıma çıkan satır;
background: #2e2e2e url(images/bgd.jpg) center repeat-y;
Burada değiştireceğim kısım parantez içinin tamamı. Yani yukarıdaki
http://img356.imageshack.us/img356/8810/bgdmp7.jpg
adresimi parantez içine yapıştırıyorum. Elde ettiğim kod ise;
background: #2e2e2e url(http://img356.imageshack.us/img356/8810/bgdmp7.jpg) center repeat-y;
Bu şekilde kullandığınız tüm resim dosyalarının isimlerini arıyor ve ilgili bölümleri yüklediğiniz adresler ile değiştiriyorsunuz. Dikkat etmeniz gereken nokta ise bir resmin birden fazla yerde kullanılmış olabileceği. Dolayısıyla aramam yaparken aramayı birkaç kez tekrar etmeniz yararınıza olacaktır.
4. Blogcu’da Tanımlanmış Kodlar
Şablonumuz görsel olarak tamamlanmış durumda. Bu son adımda yazının başında belirttiğim gibi blogumuzla ilgili çeşitli bölümleri göstermek için Blogcu’ya has bazı hazır kodları blogumuza ekleyeceğiz.
Kodların üst bölümünden gelişi güzel bir sıralamayla başlıyoruz.
<head> ve </head> etiketleri arasına kimi bilgiler girmemiz gerekiyor. <title>…</title> bölümü internet tarayıcımızın üst çubuğunda yer alan ksımı belirtir. Buraya dilerseniz <%Title%> kodunu girerek Blogcu ayarlarında belirlediğiniz başlığı kullanabilir veya kendiniz bir şeyler yazabilirsiniz. Her şablonda olmamasına rağmen ekleyeceğiniz bu bölüme ekleyebileceğiniz veya varsa düzeltebileceğiniz bazı kodları vermek istiyorum:
<meta name=”description” content=”<%Description%>”/>
<meta name=”keywords” content=”anahtar kelimeleriniz”/>
<meta name=”author” content=”site sahibi”/>
Elbette bu kodlara tercihleriniz doğrultusunda çeşitli eklemeler yapmak mümkün.
Şablonların hemen hemen hepsinde bir yönlendirme menüsü mevcut. Bu bölümlerde yapacağınız değişiklikleri de şöyle sıralayabiliriz:

• Ana Sayfanız için <%MainPageURL%>
• Arşiv sayfanız için <%ArchiveURL%>
• Profil sayfanız için <%ProfileURL%>
• İletişim için <%Email%>
• RSS beslemeniz için <%SiteFeedURL%>

kodlarını kullanabilirsiniz. Örnek vermek gerekirse benim düzenledim şablonda
<a href=”About.html”>About</a> şeklinde bir bölüm var. Ben bu bölümü
<a href=”<%ProfileURL%>”>Hakkımda</a> şeklinde değiştirebilirim. Yine burada yapacağınız düzenlemeler size kalmış.
Uyarlayacağımız bir diğer bölüm de yan menü. Benim şablonumda yan menü “Links” şeklinde başlıyor. Ancak ben burada “Kategoriler”imin görünmesini istiyorum. <h2>…</h2> etiketleri arasındaki bölüme görünmesini istediğim bölümün adını yazıyorum (”h2″ css kodlarında bir tanımlamadır, sizin düzenlediğiniz şablonda farklı bir tanımlama kullanılmış olabilir). Yapacağım işlem ise şöyle:
<h2>Kategoriler</h2>
<ul><%Kategorilerim%></ul>
Şablonun orijinal halini bozmadan yalnızca <ul>…</ul> etiketleri arasındaki linkleri sildim ve benim kategorilermi göstermeye yarayan kodu ekledim.
Sizin yine aynı bölüme ekleyebileceğiniz kodlar ise şöyle:

• Son yazılarınız için <RecentEntry><li><%RecentEntryTitle%></li></RecentEntry>
• Yazılarınıza yapılan yorumlar için <%SonYorumlar%>
• Arkadaşlarınızı göstermek için ise <Friends><li><a href=”<%FriendURL%>” target=”_blank” title=”<%FriendUsername%>”><%FriendUsername%></a></li></Friends>

Bu değişiklikleri de yaptıktan sonra yazılarınızı nasıl gösterceğinizi anlatmaya çalışacağım. Şablonda yazılarınızın yer aldığı bölüm genellikle content şeklinde tanımlanır.
<div id=”content”> veya <div class=”content”> şeklindeki kodu gördükten sonra </div> etiketine kadar bütün bölümü silin. Bu sildiğiniz bölüm genellikle “Lorem ipsum…” bölümüdür. Buraya ekleyeceğiniz kodlar ise;
<IfMainPage><Entry>
<h2><%EntryTitle%></h2><p>
<%EntryBody%>
<p align=”left”>
<IfCategoriesAllowed> <%EntryDate%> | Kategori:
<%EntryCategory%>
|</IfCategoriesAllowed>
<IfCommentsAllowed><a href=’<%EntryURL%>’>Yorum</a> (<%EntryCommentCount%>) |</IfCommentsAllowed>
<IfCommentPostAllowed><a href=’<%CommentPostURL%>’>Yorum Yaz</a></IfCommentPostAllowed> | <a href=’<%EntryURL%>’>Kalıcı Bağlantı</a></Entry>
<p align=”center”><strong><EarlierLink><span class=”bigtext1″><Önceki Yazılar</span></EarlierLink>
<span class=”bigtext1″>
|
<LaterLink>Sonraki Yazılar></LaterLink>
</span></strong>
<p>
</IfMainPage>
<!– ARSIV SAYFASI –>
<IfArchivePage><h1 class=”warning”>Arşiv</h1>
<%ArchiveInfo%></IfArchivePage>
<IfEntryPage><Entry>
<h2><%EntryTitle%></h2>
<p><%EntryBody%> <p align=”left”>
<IfCategoriesAllowed> <%EntryDate%> | Kategori:
<%EntryCategory%>
| </IfCategoriesAllowed>
<a href=’<%EntryURL%>’>Yorum</a> (<%EntryCommentCount%>) |
<IfCommentPostAllowed><a href=’<%CommentPostURL%>’>Yorum Yaz</a></IfCommentPostAllowed><br />
<a href=’<%EntryURL%>’>Kalıcı Bağlantı</a> | <SendThisLink>Arkadaşına Gönder</SendThisLink>
</p>
<br />
<p align=”center”><strong><EarlierLink><span class=”bigtext1″>Önceki Sayfa</span></EarlierLink>
<span class=”bigtext1″>
|
<%CurrentPage%>
:
<%TotalPages%>
|
<LaterLink>Sonraki Sayfa</LaterLink>
</span></strong>
<p>
<ol class=”commentlist”><Comment>
<blockquote> <li class=alt>
<img src=”<%CommentAuthorAvatar%>” align=”left” width=”40″ height=”40″/> <b>Yazan</b>:
<%CommentAuthor%>
<%CommentAuthorIP%>
| <b>Tarih</b>:
<%CommentDate%><br />
<b> Konu</b>:
<%CommentTitle%><br />
<small><%CommentBody%></small>
<p class=info><a href=’<%CommentURL%>’>Bağlantı ></a>
<CommentEdit>Düzenle></CommentEdit><CommentDelete>Sil</CommentDelete></p>
</li></blockquote></Comment></IfCommentsAllowed></ol>
<IfCommentsAllowed><IfCommentPostAllowed></IfPages>
</IfCommentPostAllowed></IfCommentsAllowed>
</Entry></IfEntryPage>
Oldukça karışık göründüğünün farkındayım ancak kodların yanlarında Türkçe bağlantıları olduğu için hangi kodun neyi göstermeye yaradığını çözebilirsiniz. Burada da değişiklikler yapmanız mümkün. Örneğin yaznın başlığının altında kategorisinin görünmesini istemiyorsanız ilgili bölümü silebilir veya yerini değiştirebilirsiniz. Takdir edersiniz ki yapabileceğiniz varyasyonları anlatmak oldukça uzun olur. Dolayısıyla deneme-yanılma yoluyla kendi görünümünüzü yakalayabilirsiniz.
Son olarak bu işlemin ardından alt bölümde de (footer) istediğiniz değişiklikleri yapabilirsiniz.

kaynak :

arkadaşlar bu konu hakkında ben de bilgiliyim halledemediğiniz ya da aklınızın karıştığı noktalar olursa sorun elimden geldiğince yardımcı olmaya çalışırım.kolay gelsin

__________________
konularımı ç-alırken lütfen altına nikimi yazarak alınız.yoksa eklediğiniz sitede deşifre edilirsiniz

teknohaberci bende bi blog açmayı düşünüyorum bana yardımcı olurmusun

__________________

elimden geldiğince olurum tabi ama ne gibi bir yardım istediğine bağlı blogcudan açacaksan faydam dokunur

__________________
konularımı ç-alırken lütfen altına nikimi yazarak alınız.yoksa eklediğiniz sitede deşifre edilirsiniz

açtım siteyi It is a Blogcu - Blogcu bana orjinal grefiği az siteyi kasmıcak bi şablon lazım yapa bilirsek çok süper olur

__________________

paylaşımın için sağol teknohaberci

çalışmalara başla bu konu çok yarayacak işine

__________________
konularımı ç-alırken lütfen altına nikimi yazarak alınız.yoksa eklediğiniz sitede deşifre edilirsiniz

bana mı diyosun teknohaberci anlamadım?

bu mesajın cvbı o

__________________
konularımı ç-alırken lütfen altına nikimi yazarak alınız.yoksa eklediğiniz sitede deşifre edilirsiniz

bende blogcuya üye oldum bi bakın webdizayn5.blogcu.com

__________________
webdizayn5.blogcu.com

arkadaşım tama süepr bir anlatım olmuş da bazı resimlerin yerleri kayıyor onu nasıl yapcaz bea

reklam yasak ....gereksiz mesajlar silindi. resimlerin yerleriyle oynadınız mı...şablon ayarlarında sorun vardır..kodları verin bi bakalım oke.

__________________
konularımı ç-alırken lütfen altına nikimi yazarak alınız.yoksa eklediğiniz sitede deşifre edilirsiniz

Reklam yapma niyetinde değildim ama siz öyle sandıysanız canınız sağolsun.

Selametle.

__________________
minare.net --- blogdizel.com

resimleri başka bir sunucuya yükledin düzeldi teşekkür ederim çok işime yaradı bu konu binlerce kezz teşekkürler

kissdesing den şablon aldım çift kolon bunu duzenlemek istiyorum blogcuda çalışması için html ye çevrilmesi gerek bunu bilenler yada konu hakkında bilgisi olanlar özel mesaj atsınlar bizde öğrenelim

konuyu okuyun anlarsınız okumadınız mı ?

__________________
konularımı ç-alırken lütfen altına nikimi yazarak alınız.yoksa eklediğiniz sitede deşifre edilirsiniz