TEKNOHABERCİ TEKNOLOJİ VE HABER BLOĞUDUR

BLOGCU ŞABLON NASIL YAPILIR,BLOGCUYA ŞABLON UYARLAMAK,BLOG WEBMA

23.12.2008 · Kategori: WEBMASTER BOLUMU HTML LER

Blogcu için Şablon Uyarlama, bir şablonu nasıl blogcuya uygun hale getireceğiz, blogcu şablon yapma, şablon düzenleme

Ö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: 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 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 etiketinin hemen altına
….


….
ş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.
ve

etiketleri arasına kimi bilgiler girmemiz gerekiyor. </b>…<b><%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:


”/>



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: 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 etiketlerini yazıyoruz. Kopyaladığımız css kodlarımızı da bu iki etiketin arasına yapıştırıyoruz. Yani: bölümü internet tarayıcımızın üst çubuğunda yer alan ksımı belirtir. Buraya dilerseniz
  • 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%>

Kalıcı Bağlantı Yorum (yok) Yorum yaz!

WORDPRESS TEMA İNDİRMEK İÇİN ADRESLER,WP THEMES, TEMALAR

23.12.2008 · Kategori: WEBMASTER BOLUMU HTML LER

BAŞLICA WORDPRESS THEMES,TEMALARININ İNDİRME ADRESLERİ.WP BLOĞU OLANLAR İÇİN HARİKA TEMA KAYNAK SİTELERİ :

Wordpress Başlıca Tema Adresleri



Top WordPress Themes
Theme Viewer
Wordpress Themes
Theme Porter - Wordpress Themes , Wordpress Templates
WordPress Themes - Tons Of Free WordPress Themes For Any Blog!
WordPress Theme Park » Themes
WordPress Themes, Plugins, Blog Tips, Make Money Online >> WPthemesplugin.com
Wordpress Themes, vBulletin Styles, Skins, Joomla Templates, CSS Design, Yahoo Store Design, OSCommerce
WordPress Themes
WordPress Themes
WordPress Themes by Sadish
Wordpress Themes - Free download of 2 and 3-column Wordpress themes
Free Wordpress Themes and More at Fresheezy!


* 83 güzel Wordpress teması - Smashing Magazine
* Sade Wordpress temaları - plaintxt.org · Minimalism in blogging: an experiment out of control
* Tema Canavarı - Web Templates, Flash Templates, Website Templates Design - Template Monster
* Çeşitli temalar - Fahlstad.se
* 980+ Wordpress teması - Emily Robbins
* 10 yeni, şık Wordpress teması - Smashing Magazine
* En iyi Wordpress temaları - www.clazh.com
* WP tasarımları - WordPress Themes Design
* Kişisel seçimler - SilentBits | WordPress, Themes, Plugins, News, Blogging, Design, theme wordpress, plugins wordpress, blog wordpress, template wordpress, tip wordpress, tag wordpress, free theme wordpress, tutorial wordpress, blog theme wordpress, adsense wordpress
* WordPress 1.5 Tema Yarışması Kazananları - Alex King | Denver Web Developer
* NDesign-Studio’dan temalar - N.Design Studio - Blog & Design
* 70 Beğenilmiş tema - Desperate Curiosity
* Pink for October temaları - Derek Punsalan - 5ThirtyOne
* 980 ücretsiz Wordpress teması - RomanianNewsy
* Bedava WP temaları - Darjan Panic — Freelance Graphic and Web Designer
* Güncel Wordpress temaları - Beccary
* En çok indirilen 49 Wordpress teması - www.hongkiat.com
* Top 10 Wordpress teması - by Photoshop Tutorials - SitePlane
* En iyi WP temaları - Michael Sync
* Geeks Make Me Hot - geeksmakemehot.com
* WordPress Themes- This ‘N That
* iKram Zidane tasarımları - Suspended Domain
* 50 ücretsiz tema - www.whenpenguinsattack.com
* Romow - Romow Web Directory - Internet Marketing Center
* Wordpress temaları - Thoughts on Strategy and Web Design — Leslie Franke
* Un Matched Themes - Unmatched Themes | Only the Best Free WordPress Themes
* Kaushal Sheth - Kaushal Sheth - Free Wordpress Themes and Blogger Templates » Wordpress Themes
* Wordpress Themes ZA - http://wordpressthemes.co.za
* BlogFlux - WordPress Themes - Find Blog Themes
* WP Designer - WPDesigner
* WP Bpard - Latest Themes at WPBOARD.Com
* Templates Browser - www.templatesbrowser.com
* ThemeVibes - ThemeVibes Board
* GFX Edit - GFXedit.com — xHTML/CSS Designs | Wordpress Themes
* WP Skins - Free WordPress Themes - Adsense Ready Wordpress Themes - wpSkins.org
* Desperate Curiosity
* Rockin Themes - RockinThemes.com | Free WordPress Themes | Free WordPress Templates
* OS Skins - Osskins
* Wordpress - CN - é¦�页 - WordPress ä¸*æ��æ��æ¡£
* Themesbase - FREE Templates and Themes for Download
* Wordpress Temaları - Weblog Tools Collection
* WordPress Themes,WordPress Templates and WordPress Skins
* Wordpress Loser - Wordpress Layouts - WordPress Loser
* Performancing Themes - Performancing WordPress Themes
* Forumer - Best Wordpress Themes
* WP Theme Gallery - WordPress Theme Gallery
* Wordpress WOW - Wordpress WoW - Free Wordpress Themes, Plugins , Templates and more / Home
* WP Theme Park - WordPress Theme Park » Themes
* Micfo - Free WordPress Theme by Micfo.com - WordPress Theme - Free WP Themes - Free WordPress Blog Theme
* Skins for WP - Skins for WordPress - WordPress Themes and WordPress Skins - Premium, Custom and Free
* Wordpress Theme - WordPress Theme - Find free word press themes at WordPressTheme.com
* Best WordPress Themes - Best Wordpress Themes

Kalıcı Bağlantı Yorum (yok) Yorum yaz!

« Önceki ::

Son Yazılarım

Kategorilerim

Arkadaşlarım

Bağlantılarım