Sayın Windows Live Spaces müşterisi,

Bu notu, Windows Live Spaces’ın yakında kapatılacağı ile ilgili size yaptığımız bildirimlerin devamı olarak alıyorsunuz. Henüz bir işlem yapmadıysanız alanınızın içeriğini korumayı öğrenmek için lütfen okumaya devam edin. 16 Mart 2011′de alanınız kapatılacaktır. Ancak, şimdi harekete geçerseniz alanınızın içeriğini yine de koruyabilirsiniz.

Windows Live müşterilerinin Windows Live Spaces bloglarını, blog deneyimlerine bir dizi yenilik kazandıran Word.Press.com’a geçirmelerini sağlamak için birinci sınıf ve yenilikçi bir blog hizmeti olan WordPress.com ile işbirliği yapıyoruz. Mevcut blogunuzu WordPress.com’a geçirmenize veya daha sonrası için kaydetmek üzere onu karşıdan yüklemenize yardımcı olacağız. 16 Mart 2011′de mevcut alanınız kapatılacak ve gereken adımı atmadığınız sürece alanınızdaki içeriğe artık erişemeyeceksiniz. Alanınızın geçiş işlemini başlatmak için burayı tıklayın.

Windows Live hizmetlerinin yeni sürümü ile birlikte, ürünlerde bir dizi değişiklik ve yenilik yaptık. Windows Live kullanıcılarına olağanüstü bir blog çözümü sağlamak amacıyla WordPress.com ile ortaklık kurmaya karar verdik. Ancak bunların sizi etkileyeceğinin farkındayız; bu nedenle, bu e-postadaki bilgiler neler beklenebileceğini netleştirmeyi amaçlamaktadır. Windows Live’a desteğinizi devam ettirdiğiniz için teşekkür ederiz.

Müşterilerimiz tümleşik bir istatistik sistemi, taslakların sürekli olarak kaydedilmesi ve istenmeyen postayla-mücadele teknolojisi dahil daha zengin blog işlevleri talep ettiler. Olası en iyi blog deneyimini sunmak üzere size WordPress.com’un ücretsiz hizmetini sağlamak için WordPress.com ile işbirliği yapıyoruz. İçinizden Windows Live Spaces’da zaten blogları olanların bunu kullanmaya başlamasını kolaylaştırırken, diğer yandan Windows Live Spaces’da şimdiye dek oluşturmuş olduklarınızı korumanıza da yardımcı olacağız.

Alanınızı ziyaret ettiğinizde şu seçenekleriniz olacaktır:

• WordPress.com’a geçerek blogunuzu yükseltme – Blog posta ve yorumlarınızı WordPress.com’a taşımanın basit bir yolunu sunacağız.
• Blogunuzu karşıdan yükleme – Elinizde bir kopyasını tutmak için eski postalarınızı karşıdan yükleyebilirsiniz. Ayrıca hem bunu yapıp hem de sonra WordPress.com’a geçebilirsiniz.
• Alanınızı silme – Artık bir alanınızın olmasını istemediğinize karar verirseniz, onu kalıcı olarak silme seçeneğiniz vardır. İçeriğinizi kaydetmek istiyorsanız, lütfen bunu alanınızı silmeden önce yaptığınızdan emin olun.
• Blogunuzu inceleme – Yakında alanınız kapatılacak, ancak blogunuzu incelemeniz ve kendiniz için doğru kararı vermeniz için yine de biraz zamanınız olacak. WordPress.com’da yapabileceğiniz şeyler bizi çok heyecanlandırıyor ve umarız bu gelişmiş blog deneyiminden yararlanmaya karar verirsiniz.

Not: araçlar, konuk defter, listeler, notlar ve taslak postalar gibi bazı içerikler geçirilmeyecektir. Bu tür içeriğin nasıl korunacağı hakkında daha fazla bilgi için Sık Sorulan Sorular’a bakın.

Size uygun bir olasılığı seçmek için alanınıza gidin.

Posta, yorum ve bağlantılarınızın tümü aktarılır ve blog güncelleştirmelerinizi Messenger arkadaşlarınızla paylaşma seçeneğiniz olur.

WordPress.com’da, blogunuzun performansını ve kimlerin ziyaret ettiğini izlemenize yardımcı olan araçlarınız olur. Kişilerin sizi bulmasını ve sizin de kafa dengi kişileri bulmanızı sağlayan etiketleme özelliğine sahip olursunuz. Süper blog yorum özelliği ve temiz bir deneyimi sürdürmenize yardımcı olmak için istenmeyen izleme postasını önleme özelliği içerir. Diğer özelliklere (Sayfa İngilizce’dir) göz atın.

Windows Live’ı kullandığınız için teşekkürler, umarız yeni blog deneyimi hoşunuza gider.

Saygılarımızla,

Windows Live ekibi

S: WordPress.com nedir?
Y: WordPress.com, Windows Live Spaces’a benzeyen ücretsiz bir blog sitesidir. WordPress.com’da, deneyiminizi özelleştirmek üzere olağanüstü tema ve pencere öğeleri, blogunuzun performansını ve kimlerin ziyaret ettiğini izlemenize yardımcı olan araçlar bulacaksınız. Kişilerin sizi bulmasını ve sizin de kafa dengi kişileri bulmanızı sağlayan etiketleme özelliğine sahip olursunuz. Süper blog yorum özelliği ve temiz bir deneyimi sürdürmenize yardımcı olmak için istenmeyen izleme postasını önleme özelliği içerir.

S: Windows Live Spaces içeriğime ne olacak ve neleri geçirebileceğim?
Y: Windows Live Spaces’da şu an bulunan farklı işlevlerin ve bunlardan neler bekleyebileceğinizin listesi aşağıda verilmiştir:

• Bloglar ve yorumlar: Geçiş yapmayı veya karşıdan yüklemeyi seçerseniz, blog içeriğiniz (eklenen fotoğraf, video ve yorumlar dahil) de sizinle birlikte gelir.
• Fotoğraflar: Blogunuzun parçası olmayıp Windows Live’a ait olan fotoğraflar SkyDrive’da kalmaya devam eder, dilerseniz onları başkalarıyla paylaşmayı da sürdürebilirsiniz. Blogunuzu geçirmeyi seçerseniz, blogunuzun parçası olan fotoğraflar da geçirilir. Fotoğraflarınızı paylaşan diğer hizmetler tarafından sağlanan başka herhangi bir modül eklerseniz, bunlar geçirilmeyecektir.
• Ziyaretçiler sizi bulacakları yeri bilecekler: Geçiş yaparsanız, blogunuza ve ilgili makalelerinize yapılan varolan bağlantılar çalışmaya devam eder ve ziyaretçileriniz WordPress.com’daki yeni konumunuza yönlendirilir. Ayrıca Windows Live Messenger’a son eklediğiniz postalarla arkadaşlarınıza güncel bilgi sağlamaya da devam edebilirsiniz.
• Özel bloglar: Özel blogunuz varsa, geçiş sırasında başka bir seçeneği belirlemediğiniz sürece blogunuz özel olarak işaretlenir. Blogunuzu eski Windows Live Messenger arkadaşlarınızla paylaşabilir veya yalnızca birkaç kişiyi WordPress.com’a davet etmeyi seçebilirsiniz.
• Araçlar, konuk defteri, listeler, notlar ve taslak postalar: Ne yazık ki bunları taşıyamazsınız. Taslak postalarınızı sonraki aylarda yayımlamayı ve geçişten önce liste ve notlardaki içeriği blogunuza taşımayı göz önünde bulundurabilirsiniz.
• Profil ve Kişiler modülleri: Bu bilgiler Windows Live’da kalır. Yeni blogunuzu Profilinize ekleyebilir ve arkadaşlarınızla paylaşabilirsiniz.

S: Şu andan başlayarak Windows Live Spaces’ın kapatıldığı tarihe kadar neler bekleyebilirim?
Y: Şu anda ve 16 Mart 2011′e kadar geçmiş postaları incelemeye devam edebilir, daha sonrası için kaydetmek üzere içeriği karşıdan yükleyebilir ve blogunuzu WordPress.com’a yükseltebilirsiniz. 16 Mart 2011′de, Windows Live Spaces kapanacak ve blogunuza artık erişemeyecek veya onu geçiremeyeceksiniz.

S: Nereden daha fazla bilgi edinebilirim?
Y: Windows Live Spaces kullanan bir çocuğun ebeveyni misiniz? Özel blogunuz var mı? Windows Live Spaces’a içerik yayımlamak için Writer’ı mı kullanıyorsunuz? Başka sorularınız var mı? Ek bilgi ve kaynaklar için Yardım Merkezi‘mizi ziyaret edin.

If you’re a programmer, you must have some basic knowledge about phothoshop, layers, slicing and obviously Wordpress. Anyway, if you’re an intermediate – advanced level webdesigner, I’m sure you’ll find this useful.

Step 1 – Let’s begin

Open the .psd file.

First, hide all the layers containing text, links or content images. Leave the design as clean as possible, just show the containers. As you can see below, I’m showing the background, the header, the main content container and the sidebar background. Of course you must have a folder to put all the images in, also I’m creating two directories inside /images these are /jpgs and /pngs to store JPEG and PNG files respectively.

A good practice is start coding a small framework on a blank .html file and then apply a single stylesheet to it, after that, you can move forward and turns these files into a full Wordpress theme.

Step 2 – The main background

Let’s start slicing the images. There’s several ways of slicing in photoshop, I prefer use the Crop tool, because it works just fine on these kind of designs ( is the easiest way IMO), but at this point you’ll not need to crop anything, just hide everything except the City Background and the Fill layer (color: #000000).

Then hit Command (Ctrl) + Option (Alt) + Shift + S to activate the Save for web options. Select the file type as .jpg and set the Quality value to 70. Hit Save and put it under /images/jpgs folder.

Step 3 – Ready to slice

Now one of the funniest things of the entire process, Slicing!. First hide all the background layers, including the city picture, and the black background, also hide the logo. Try to get something like the image below.

Step 4 – Slicing background images

Once you had only the content layers visible, Save your document with another name, and on Layers palette go to Merge Visible, this way you’ll merge all the layers but preserving the transparent background (Do not Flatten the image). Next, using the Slice or Crop tool cut the header image, the content background (1px height is fine, I’m making it bigger just for visual purposes), the sidebar background (1px height), the sidebar footer, and the footer background. See the image below to check the measurements. You must use the Guides to cut the images on the right way. Save each image as a PNG-24 file using the Save for Web options, you can use the names suggested below.

By saving the backgrounds as PNGs files we’ll be able to give our design a floating effect. If you’re using IE6… don’t worry, just switch to Firefox, Chrome, or IE7 for a while, we’ll take care of IE6 next time.

Step 5 – The HTML framework

Now let’s start coding. First we’ll need a html framework to work with and a single css file, then we’ll convert that html file into a wordpress theme.

Start with the head tag.

<head>  	<title>GenerationX</title> 	<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head>

We’ll divide the layout this way:

All your html containers must be inside a div called “page”:

<body>	<div id="page">
		<!--Insert the layout here-->

	</div> <!--End of "page"--></body>

Let’s add the header:

<div id="header">
	<div id="headerimg">
		Page title
	</div>

	<div id="top_nav">
		<ul>
			<li>Home</li>
			<li>About</li>
		</ul>

	</div>
</div> <!--End of "header"-->

The main content will include the posts and the sidebar:

<div id="content">

   <div class="blogcontent">
   <div class="post">
   <div class="post_title">
   <h2><a href="#">Sample Post</a></h2>

   <small>November 2nd, 2008 | by admin | <a href="#">Lorem ipsum</a>| <a href="#">Category 1</a>| <a href="#">Uncategorized</a></small>

   </div> <!--End of "post title"-->
   <!--Comments-->
   <div class="postmetadata">
   <a href="#">2</a>

   </div>
   <br class="space" />

   <div class="entry">
   <p>
   <a href="#">

   <img class="alignleft" title="pic-02" src="images/jpgs/pic-01.jpg" border="0" alt=""/>
   </a>

   But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human. No one rejects, dislikes, or avoids <a href="#">pleasure</a> itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
   </p>

   <a href="#" class="more-link">Read more &raquo;</a>
 </div> <!--End of "entry"-->

   </div> <!--End of "post"-->
   </div> <!--End of "blogcontent"-->
 <div id="sidebar">

   <ul>
   <li class="categories">
   <h2>Categories</h2>
   <ul>
   <li><a href="#">Lorem ipsum</a> (2)</li>

   <li><a href="#">Category 2</a> (1)</li>
   <li><a href="#">Sample category 3</a> (15)</li>
   </ul>

   </li>

   <li class="archives">
   <h2>Archives</h2>
   <ul>
   <li><a href="#">November 2008</a> (2)</li>
   </ul>

   </li>
 <li class="linkcat">
   <h2>Blogroll</h2>
   <ul class='blogroll'>
   <li><a href="http://wordpress.org/development/">Development Blog</a></li>
   <li><a href="http://wordpress.org/extend/themes/">Themes</a></li>
   <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li>
   </ul>
   </li>
   </ul> <!--End of sidebar's list-->

   <div id="search">
   <form>
   <label class="hidden">Search for:</label>
   <div>
   <input type="text" value="" name="s" id="s" />
   <input type="submit" id="searchsubmit" value="Search" />
   </div>
   </form>
   </div> <!--End of "search"-->

   </div> <!--End of "sidebar"-->

 <div class="bottom_sidebar">
   <a href="#">RSS feed</a>
   </div>
   </div> <!--End of "content"-->

Then the footer:

<br style="clear: both;" />

 <div id="footer">
 <div class="column1">
 Author
 <br />
 <a href="#">Author's link</a><br />
 <a href="#">License</a>
 <div class="bottom">
 Slogan
 </div>
 </div>
 <div class="column2">
   <h2>Recent posts</h2>
   <ul>
   <li><a href="#">Sample post</a></li>
   <li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
   </ul>
   </div>

   <div class="column2">
   <h2>Pages</h2>
   <ul>
   <li><a href="#" title="About">About</a></li>

   <li><a href="#" title="About">About</a></li>
   </ul>
   </div>
   </div>

Step 6 – Browsing

As we have our main layout already coded, let’s test it into a browser, for this tutorial I’m using the last release of Firefox. At this point you should have something like the image below.

Step 7 – Containers and positions

Now start creating the .css file. First you must set the containers in their proper place, that could be a hard work the first times, but with practice it’s really easy. You must play with height, width and float values.

First you must define your css classes and ids and set some commons styles as links and paragraphs. Check the .html file of step 5 and look at the class names. Besides, at this point you may use bright background colors to see if your containers are in the right place. Check the Step 4, there’re the sizes of the background images.

body
   {
   margin: 0px;
   padding: 0px;
   text-align: center;
   }

h1, h2, h3, ul, li, p, form
   {
   margin: 0px;
   padding: 0px
   }

hr
   {
   display: none;
   }

a{
   text-decoration:none;
   }

a:hover{
   text-decoration:underline;
   }

.space
   {
   clear: both;
   }

#page
   {
   margin: 0px auto;
   padding: 0;
   width: 960px;
   }

#header
   {
   background:#CCCCCC;
	height: 308px;
   width: 960px;
   text-align: center;
   }

#headerimg
   {
   margin: 0px;
   text-align: left;
   }

#top_nav
   {
   background-color:#0066CC;
   height: 45px;
   padding-left: 105px;
   text-align: left;
   }

 #top_nav ul
   {
   list-style: none;
   }

   #top_nav li
   {
   display: inline;
   }

   #top_nav li a:hover
   {
   }

#content
   {
   background: #009933;
   float: left;
   text-align: left;
   }

.blogcontent
   {
   float: left;
   padding: 10px 0px;
   width: 635px;
   }

.post
   {
   text-align: left;
   }

 .post h2
   {
   padding: 0px;
   }

 .post .post_title
   {
   float: left;
   width: 90%;
   }

   .post_title h2, a
   {
   padding: 0px;
   margin: 0px;
   }

   .post_title a
   {
   text-decoration: none;
   }

   .post_title a:hover
   {
   }

   .post_title small
   {
   }

   .post_title small a
   {
   padding: 0px;
   margin: 0px;
   }

   .post .postmetadata
   {
   float: right;
   height: 34px;
   padding: 12px 5px;
   width: 35px;
   }

   .postmetadata a
   {
   text-decoration: none;
   }

   .postmetadata span
   {
   padding-left:5px;
   }

.entry
   {
   }

 .entry a
   {
   padding: 0px;
   margin: 0px;
   }

   .entry a:hover
   {
   }

   .entry blockquote
   {
   border: 2px dashed #042748;
   }

   .entry img
   {
   float: left;
   }

   .entry ul
   {
   }

   .entry li
   {

   }

   .entry ol li
   {
   list-style: decimal;
   }

   .entry p
   {
   text-align: justify;
   padding: 0px;
   }

   .entry span
   {
   }

#sidebar
   {
   background-color:#6666CC;
   float: left;
   padding: 0px 20px;
   text-align: left;
   width: 285px;
   }

 #sidebar ul
   {
   list-style: none;
   margin: 0px;
   }

   #sidebar li
   {
   margin: 0px;
   }

   #sidebar li h2
   {
   margin: 0px;
   }

 #sidebar ul ul
   {
   list-style: none;
   margin: 0px;
   }

   #sidebar ul ul li
   {
   margin: 0px;
   }

   #sidebar ul ul li a
   {
   }

   #sidebar ul ul li a:hover
   {
   }

.bottom_sidebar
   {
   background-color:#006666;
   float: right;
   height: 90px;
   width: 310px;
   }

#search
   {  }

 #search input
   {

 }

#search #searchsubmit
   {
   background: #b1b1b1;
}

#footer
   {
   background:#999966;
   height: 200px;
   text-align: left;
   width: 960px;/*909*/
   }

 #footer .column1
   {
   background:#FF3333;
   float: left;
	width: 300px;
   }

   .column1 .bottom
   {

}

   .column1 a
   {
   text-decoration: none;
   }

   #footer .column2
   {
   background-color:#006699;
   float: left;
   width: 250px;
   }

   .column2 h2
   {
   }

   .column2 ul
   {
   list-style: none;
   }

   .column2 a
   {
   text-decoration: none;
   }

Test your html file into your browser. You should have something like the image below.

Step 8 – Adding background images

Now add your background images. This time we’ll use PNGs files for the most backgrounds, because our city background must be fixed and we want a floating illusion effect. Remember Step 4? Now match those images with the css containers.

body
   {
 background: #000000 url('./images/jpgs/bg-image.jpg') fixed no-repeat bottom center;
 margin: 0px;
 padding: 0px;
 text-align: center;
 }

 #header
   {
   background: url('./images/pngs/header-960x308.png') no-repeat top left;
   height: 308px;
   width: 960px;
   text-align: center;
   }

#content
   {
   background: url('./images/pngs/bg-635x1.png') repeat-y top left;
   float: left;
   text-align: left;
   }

#sidebar
   {
   background: url('./images/pngs/bg-325x1.png') repeat-y top left;
   float: left;
   padding: 0px 20px;
   text-align: left;
   width: 285px;
   }

.bottom_sidebar
   {
   background: url('./images/pngs/bottom-325x90.png') no-repeat bottom center;
   float: right;
   padding: 0px 0px 0px 15px;
   height: 90px;
   text-align: left;
   width: 310px;
   }

#footer
   {
   background: url('./images/pngs/footer-960x200.png') no-repeat top left;
   height: 200px;
   text-align: left;
   width: 960px;
   }

Test the result in your browser.

Step 9 – Adding foreground images

Now replace the logo, navigation links, comments background, graphic slogan and rss icon, for their respective images.

<div id="header">
 	<div id="headerimg">
 		<a href="#"><img alt="Generation X" border="0" src="./images/pngs/logo-480x135.png" /></a>

 	</div>
 	<div id="top_nav">
 		<ul>
 			<li><a href="#"><img alt="Home" border="0" src="./images/pngs/home.png" /></a></li>
 			<li><a href="#"><img alt="About" border="0" src="./images/pngs/about.png" /></a></li>

 		</ul>
 	</div>
 </div>

.
.
.

 <div class="bottom_sidebar"> 		<a href="#"><img alt="0" border="0" src="./images/pngs/rss.png" /></a> </div>

.
.
.

<div class="bottom"> 		<img alt="" border="0" src="./images/pngs/footer-115x51.png" /></div>

And the css to make the images fit:

#headerimg
{
	 height: 185px;
	 margin: 0px;
	 padding: 55px 0px 0px 45px;
	 text-align: left;
 }

#top_nav
{
	 height: 45px;
	 padding-left: 105px;
	 text-align: left;
}

#top_nav li a:hover
{
   background: url('./images/pngs/hover.png') no-repeat bottom center;
}

.bottom_sidebar
{
 	background: url('./images/pngs/bottom-325x90.png') no-repeat bottom center;
 	float: right;
 	padding: 0px 0px 0px 15px;
 	height: 90px;
 	text-align: left;
 	width: 310px;
 }

.post .postmetadata{	background: url('./images/pngs/bg-45x58.png') no-repeat top left;	float: right;	height: 34px;	padding: 12px 10px;	width: 25px;}

 #footer .column1
 {
	float: left;
	font: normal 10px Arial;
	padding: 0px 0px 0px 80px;
	width: 300px;
 }

 .column1 .bottom
 {
 	padding: 50px 0px 0px 40px;
 }

At the end you should get something like this image:

Step 10 – Text styles

We’re close to finish the mock-up, now we need to add the text styles for the content (posts), sidebar and footer. Play with typography and colors as you want. The most important at this point is to place the text in a right place, for this you must take care about padding and margin values, i.e. for the list items on the sidebar I set a left padding of 20 pixels and 0 px margin:

 #sidebar li    {margin: 0px;   padding: 0px 0px 0px 20px;   }

You can just copy the css style below:

body
   {
 background: #000000 url('./images/jpgs/bg-image.jpg') fixed no-repeat bottom center;
 color: #333;
 margin: 0px;
 padding: 0px;
 text-align: center;
 }
h1, h2, h3, ul, li, p, form
   {
   margin: 0px;
   padding: 0px
   }
hr
   {
   display: none;
   }
a{
   text-decoration:none;
   }
a:hover{
   text-decoration:underline;
   }
.space
   {
   clear: both;
   }
#page
   {
   margin: 0px auto;
   padding: 0;
   width: 960px;/*909*/
   }
#header
   {
   background: url('./images/pngs/header-960x308.png') no-repeat top left;
   height: 308px;
   width: 960px;/*909*/
   text-align: center;
   }
#headerimg
   {
   height: 185px;
   margin: 0px;
   padding: 55px 0px 0px 45px;
   text-align: left;
   }
#top_nav
   {
   height: 45px;
   padding-left: 105px;
   text-align: left;
   }
 #top_nav ul
   {
   list-style: none;
   }

   #top_nav li
   {
   display: inline;
   }

   #top_nav li a:hover
   {
   background: url('./images/pngs/hover.png') no-repeat bottom center;
   }
#top_sidebar
   {
   color: #fff;
   font-weight: bold;
   height: 10px;
   padding-right: 155px;
   text-align: right;
   }
#content
   {
   background: url('./images/pngs/bg-635x1.png') repeat-y top left;
   float: left;
   text-align: left;
   }
.blogcontent, .widecolumn
   {
   float: left;
   padding: 10px 0px;
   width: 635px;
   }
 .blogcontent form
   {
   color: #fff;
   padding: 10px 50px 0px 90px;
   }

   .blogcontent input
   {
   background-color: transparent;
   border: 1px solid #214b73;
   color: #fff;
   }

   .blogcontent #searchsubmit
   {
   background: #b1b1b1;
   color: #214b73;
   font-weight: bold;
   padding: 2px;
   }

   .blogcontent h2
   {
   color: #fff;
   font: bold 18px  Georgia, Arial;
   padding: 0px 50px 0px 90px;
   }

   .blogcontent small a
   {
   font-size: 18px;
   padding: 0px 50px 0px 90px;
   }
.post
   {
   padding: 0px 50px 0px 90px;
   text-align: left;
   }
 .post h2
   {
   color: #fff;
   padding: 0px;
   }

 .post .post_title
   {
   float: left;
   width: 90%;
   }

   .post_title h2, a
   {
   color: #b31414;
   font: normal 24px Georgia, Arial;
   padding: 0px;
   margin: 0px;
   }

   .post_title a
   {
   text-decoration: none;
   }

   .post_title a:hover
   {
   color: #fff;
   }

   .post_title small
   {
   color: #385673;
   font: normal 12px Georgia, Arial;
   }

   .post_title small a
   {
   color: #385673;
   font: normal 12px Georgia, Arial;
   padding: 0px;
   margin: 0px;
   }

   .post .postmetadata
   {
   background: url('./images/pngs/bg-45x58.png') no-repeat top left;
   float: right;
   height: 34px;
   padding: 12px 10px;
   width: 25px;
   }

   .postmetadata a
   {
   color: #416fa3;
   text-decoration: none;
   }

   .postmetadata span
   {
   color: #416fa3;
   font: normal 24px Georgia, Arial;
   padding-left:5px;
   }
 .entry
   {
   color: #c3c3c3;
   font: normal 12px Arial;
   padding: 20px 0px;
   }
 .entry a
   {
   color: #385673;
   font: normal 12px Georgia, Arial;
   padding: 0px;
   margin: 0px;
   }

   .entry a:hover
   {
   color: #69c;
   }

   .entry blockquote
   {
   border: 2px dashed #042748;
   padding: 8px;
   }

   .entry img
   {
   float: left;
   padding: 0px 20px 0px 0px;
   }

   .entry ul
   {
   padding-left: 20px;
   }

   .entry li
   {
   list-style: url('./images/pngs/bull-list.png');
   }

   .entry ol li
   {
   list-style: decimal;
   }

   .entry p
   {
   text-align: justify;
   padding: 0px;
   }

   .entry span
   {
   color: #b31414;
   }
#sidebar
   {
   background: url('./images/pngs/bg-325x1.png') repeat-y top left;
   float: left;
   padding: 0px 20px;
   text-align: left;
   width: 285px;
   }
 #sidebar ul
   {
   list-style: none;
   margin: 0px;
   padding: 5px 0px;
   }

   #sidebar li
   {
   margin: 0px;
   padding: 0px 0px 0px 20px;
   }

   #sidebar li h2
   {
   color: #fff;
   font: normal 18px Rockwell, Georgia, Arial;
   margin: 0px;
   padding: 10px 0px;
   }
  #sidebar ul ul
   {
   list-style: none;
   margin: 0px;
   }

   #sidebar ul ul li
   {
   margin: 0px;
   padding: 0px 0px 0px 30px;
   }

   #sidebar ul ul li a
   {
   color: #69c;
   font: normal 12px Arial;
   text-decoration: none;
   }

   #sidebar ul ul li a:hover
   {
   color: #b31414;
   }
 .bottom_sidebar
   {
   background: url('./images/pngs/bottom-325x90.png') no-repeat bottom center;
   float: right;
   padding: 0px 0px 0px 15px;
   height: 90px;
   text-align: left;
   width: 310px;
   }

#search
   {
   font: bold 12px Arial;
   color: #fff;
   padding: 0px 0px 15px 15px;
   }
 #search input
   {
   background-color: transparent;
   border: 1px solid #214b73;
   color: #fff;
   }
 #search #searchsubmit
   {
   background:#0B192C;
   color: #FFFFFF;
   font-weight: bold;
   padding: 2px;
   }
#footer
   {
   background: url('./images/pngs/footer-960x200.png') no-repeat top left;
   color: #fff;
   height: 200px;
   text-align: left;
   width: 960px;
   }
 #footer .column1
   {
   float: left;
   font: normal 10px Arial;
   padding: 0px 0px 0px 80px;
   width: 300px;
   }

   .column1 .bottom
   {
   padding: 50px 0px 0px 40px;
   }

   .column1 a
   {
   color: #fff;
   font: normal 12px Arial;
   text-decoration: none;
   }

   #footer .column2
   {
   float: left;
   font: normal 12px Arial;
   padding: 35px 0px 0px 0px;
   width: 250px;
   }

   .column2 h2
   {
   color: #457db9;
   font: normal 20px Rockwell;
   }

   .column2 ul
   {
   list-style: none;
   }

   .column2 a
   {
   color: #fff;
   font: normal 12px Arial;
   text-decoration: none;
   }

Now you should have something like following image. The mock up is ready; now let’s turn this into a Wordpress template.

Step 11 – Wordpress Template

First you’ll need to duplicate the template files into a new folder inside /wp-content/themes . You can copy and paste all the files of “default” theme into a new folder that we call “generationx”.

The process now is really simple, just replace all the static content on your html file for the wordpress functions and save them into their respective files. First paste into /generationx folder your style.css file, replacing the original one.

Let’s start with header.php file, this is what you have into you .html mockup:

<head>
 <title>GenerationX</title>
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>
<div id="page">

	<div id="header">
 		<div id="headerimg">
 			<a href="#"><img alt="Generation X" border="0" src="./images/pngs/logo-480x135.png" /></a>

 		</div>
 		<div id="top_nav">
 			<ul>
 				<li><a href="#"><img alt="Home" border="0" src="./images/pngs/home.png" /></a></li>
 			<li><a href="#"><img alt="About" border="0" src="./images/pngs/about.png" /></a></li>

			 </ul>
	 	</div>
	</div> <!-- end of header -->

You’ll need to turn that into the following code on header.php file, for this use the original header.php file to see where to put the code in:

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

   <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

   <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<style type="text/css" media="screen">
</style>

<?php wp_head(); ?>
</head>
<body>
   <div id="page">

		<div id="header">
   		<div id="headerimg">

			   <a href="<?php echo get_option('home'); ?>/"><img alt="Generation X" border="0" src="./wp-content/themes/generationx/images/pngs/logo-480x135.png" /></a>
			</div>

   		<div id="top_nav">
   			<ul>
				   <li><a href="<?php echo get_option('home'); ?>"><img alt="Home" border="0" src="./wp-content/themes/generationx/images/pngs/home.png" /></a></li>

				   <li><a href="?page_id=2"><img alt="About" border="0" src="./wp-content/themes/generationx/images/pngs/about.png" /></a></li>

			   </ul>
		   </div>
		 </div>

As you can see I’m converting the static content of href, texts, paths and turn them into a dynamic content using the wordpress functions.

Now you must repeat that on every single .php file into the theme folder. This is maybe the hardest part of the entire process, because there’s a lot of files and tiny details.

The main files are:

• index.php – includes the famous “loop”. You’ll need to change this tag there: <div id=”content”>
• header.php – includes the html heading data and these tags: <head>, <body> and the header containers like logo and navigation bar.
• sidebar.php – includes all the sidebar contents like Categories, archives, blogroll, search form and RSS icon.
• footer.php – includes the closing tags for <div id=”page”> </body> and </html>
• page.php – it has the “pages” template
• single.php – it has the “single” post template

Our html mockup is an easy way to follow the wordpress structure, but turning the static content into dynamic wordpress isn’t a quick job, it will take you several hours of testing and debugging.

To run this custom template, login into your Wordpress admin panel, go to Design > Themes and select your brand new GenerationX template, activate it and see how it looks.

Here’s the step by step HTML source code

Tutorial files

I’m Alvaro Guzman and in part 1 I’ll show you how to design a modern web interface from scratch using Photoshop and stock pictures. You can download the finished psd file at the end of this tutorial. Firstly let’s have a look at the finished psd mock up:

The Finished Mock Up

Step 1

Let’s get started, first create a new blank document and draw some guides to delimite your design, 960px width is just fine, then increase your canvas size to see how it looks on wider resolutions, maybe to 1200-1260px. Do the same with the Height, start with 800px then increase the height to 1000px at least.

Step 2

Now paste this image as a background, resize and place it in the bottom of our design. Create a new layer above the image then select two tones of purple-blue as foreground and background colors then go to Filter > Render > Clouds. Next apply “City” layer a Gradient Layer Mask to merge it with the clouds. Then put a black background behind the merged image and to finish the main background add another Gradient Layer Mask to the resultant image.

Step 3

For the header background, draw a Rounded corner rectangle above all the layers, then apply to it a Gradient overlay effect, use the colors shown below.

Step 4

Now paste this image above the rectangle, change the paper layer Blending Mode to Vivid Light and Opacity to 50%. Command (Ctrl) + Click the rectangle layer and by going to Select > Modify > Contract, contract the selection a little bit, hot Command (Ctrl) + Shift + I to inverse the selection and delete all the extra paper. You can also add some layer effects to the rounded rectangle as an Outer Glow or maybe a Stroke effect, it’s up to you.

Step 5

Let’s add the logo, I’m adding the text “Generation X” (Rockwell typeface) because I’m a huge fan of 90’s culture. Then apply to each text layer the Following layer effects, just notice the Stroke color should change depending the text color.

Step 6

Now draw a rounded rectangle as the sidebar background, set the Fill value to 75% and apply a Stroke effect on it.

Step 7

Repeat the previous step with the content background. At this point we have the basic layout.

Step 8

Now let’s add some graphic details and support images, first paste this picture of a nice cassette avobe all the layers of the design, I added some text on it using my tablet. Then select the tiny transparent plastic in the middle of the cassette, cut it and paste it just in the same place but dow its opacity to 50% or 60%. Then, merge both images and place the cassette just above the sidebar.

Step 9

This is a quick trick to create shadows, duplicate the object and put it behind the original, press Command (Ctrl) + U and set the Lightness value to -100, then apply a Gaussian Blur to the copy.

Step 10

Paste this paper image and put it below the header background on layers palette, this will be our navigation bar. Use the Lasso tool to extract the image.

Step 11

Create a new layer above the paper, make an eliptical selection and fill it with black, then apply to it a Gaussian Blur filter and down the layer Opacity to 75%.

Step 12

Duplicate the paper layer and rotate it a little bit, the apply to it a drop shadow to make it pop. Then you can add the text of your links, you can use a grunge or handwritten typeface.

Step 13

Now at the bottom of our sidebar add the RSS icon, I’m using one of these icons. Also add some related text, using “Rockwell condensed” typeface.

Step 14

Following just add the sidebar text, I’m keeping simple this time. “Rockwell” for the titles and “Georgia” for the links.

Step 15

Then add some posts, Combine different typefaces. I’m using “Georgia” for the titles, and “Arial” for the content, also added a tiny paper sheet to put the comments over, and a support image for each post (2px white border).

Also I’m adding the copyright information in this step.

Step 16

Now duplicate the technique of header’s background but this time as a footer background image.

Step 17

Add the footer’s text, I’m adding two containers for Recent Posts and Pages.

Step 18

Just if you want to, add more graphic details on the footer, like this piece of paper containing a simple slogan.

Step 19

An that’s it! a simple and quick way to mix grunge and modern style to design a inovative blog theme. Try your own!

Downloads

Download the photoshop psd file

Kurulum

* ilk olarak dosyayı buradan ( .rar ) indiriniz.
* İndirdiğiniz dosyada ki kod.txt’deki kodu temanızda ikonların nerede görünmesini istiyorsanız oraya yaptırınız.
* Flags klasörünü ana dizininize atınız.

Ekleyeceğiniz kod:

<?php
function curPageURL() {
$pageURL = ‘http’;
if ($_SERVER["HTTPS"] == “on”) {$pageURL .= “s”;}
$pageURL .= “://”;
if ($_SERVER["SERVER_PORT"] != “80″) {
$pageURL .= $_SERVER["SERVER_NAME"].”:”.$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}
$url=curPageURL();
$lang = array();
$lang['en']=”English”;
$lang['de']=”German”;
$lang['it']=”Italian”;
$lang['el']=”Greek”;
$lang['fr']=”France”;
$lang['pl']=”Polish”;
$lang['ru']=”Russian”;
$lang['es']=”Spannish”;
$lang['uk']=”Ukrainian”;
$lang['bg']=”Bulgarian”;
$lang['nl']=”Dutch”;
$lang['fi']=”Finnish”;
$lang['hi']=”Hindi”;
$lang['ja']=”Japanese”;
$lang['no']=”Norwegian”;
foreach($lang AS $key=>$val) {
?>
<a href=”http://translate.google.com/translate?prev=hp&hl=en&u=<?=$url?>&sl=tr&tl=<?=$k ey?>” target=”_blank” name=”<?=$val?>” title=”<?=$val?>”>
<img src=”/flags/<?=$key?>.gif” border=0 align=”absmiddle” alt=”<?=$val?>” title=”<?=$val?>”>&nbsp;
</a>
<?php
}
?>

Demo için Web sitemizin sağ üst köşesine bakabilirsiniz.

Wordpress Sidebar Tema Ayarları

Wordpress Sidebar Kodları

1.En Son Eklenen Konular:
-Genelde en başa bloğunuza eklediniz son konuları çıkartmak istersiniz.

Yukarıda anlattığım gibi temanıza entegre ederseniz son 15 konu çıkıcaktır..limit=15 değerini limit=xx yaparak kaç konu çıkarmak istediğinizi kendiniz ayarlıyabilirsiniz.
2.Kategoriler
-Sitenizdeki kategorileri listelemek için kullanabileceğiniz bir kod.

-Yukardaki kodlarda sadece konu ekli kategorileri listelemektedir..
‘all’ kodunu kullanarak tüm kategorileri listeleyebilirsiniz..
3.Yorumlar
-Wordpress 2.5 ten önceki sürümlerde eklentiyle yapılan son yorumların yeni sürümdeki kodları.

4.Etiket Sistemi (Tag Cloud)
-Yine yorum sistemi gibi geliştirilen wp 2.5 sürümünden sonra scriptte hazır olarak gelen etiket sistemi.

Üstteki kod şu biri büyük biri küçük çıkıyor ya ondan (yani hangi tag fazla kullanıldıysa büyük hangisi az kullanıldıysa küçük ) Boyutunu 8 ve 22 yi değiştirerek ayarlıyabilirsiniz.
Benzer bir uygulama:
Wordpress 2.3 tag fonksiyonları – wp_generate_tag_cloud – Günlük Haftalık Aylık

5.Link Sistemi (Blogroll)
-Paneldeki blogroll yazan şey yani link ekleme sistemi.

6.Arşivleme Sistemi:
-Aylara Göre Arşiv Listelemesi

7.Sayfaları Gösterme:

Ayrıca Bunun Dışında Kullanmak istediğiniz eklentileride yukarıdaki temada gösterdiğim gibi kullanabilirsiniz.
Örneğin sayfa sayaç,search metter gibi eklentilerin kodlarınıda bu şekilde sidebarınıza ekleyebilirsiniz

İçerisinde 337 yazı ve 2,020 etiket bulunmaktadır. Ön izleme resimleri yazı içeriğine widht ve height değerleri “0″ olarak eklenmiştir. Bundan dolayı yazı içerisinde görünmez. Tüm wordpress sitelerinizde rahatlıkla kullanabilirsiniz

DEMO

RapidShare: 1-CLICK Web hosting – Easy Filehosting

FOLIO!DEA | Live Demo

Download:

Uploading | Depositfiles | Mirrors

Latest version: 3.0
Release date: 1/31/09
Tags: three-columns, fixed-width, threaded-comments
Widget-ready: Yes
Compatible up to: WP 2.8

Download:

Uploading | Depositfiles | Mirrors

Latest version: 1.0
Release date: 2/4/09
Tags: three-columns, fixed-width, threaded-comments
Widget-ready: Yes
Compatible up to: WP 2.8
Metro Theme Package:$59.95
Pro Plus All-Theme Package:$199.95

Uploading | Depositfiles | Mirrors