<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Життя і заробіток в інтернеті &#187; CSS</title>
	<atom:link href="http://kopaweb.org.ua/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://kopaweb.org.ua</link>
	<description>Цікавий світ манімейкінгу</description>
	<lastBuildDate>Sun, 05 Feb 2012 19:26:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Створюэмо красиву кнопку в CSS3</title>
		<link>http://kopaweb.org.ua/2011/10/stvoryuemo-krasyvu-knopku-v-css3/</link>
		<comments>http://kopaweb.org.ua/2011/10/stvoryuemo-krasyvu-knopku-v-css3/#comments</comments>
		<pubDate>Tue, 25 Oct 2011 13:42:49 +0000</pubDate>
		<dc:creator>kopaweb</dc:creator>
				<category><![CDATA[Дизайн]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[web 2.0]]></category>
		<category><![CDATA[дизайн]]></category>
		<category><![CDATA[кнопка]]></category>

		<guid isPermaLink="false">http://kopaweb.org.ua/?p=1949</guid>
		<description><![CDATA[Створюючи хороший СДЛ сайт ми багато часу проводимо над роботою з його дизайном. Хочеться щоб він виглядав просто ідеально, тому увагу приділяємо навіть дрібницям. Зазвичай все потрібно підправляти в Photoshop, але зараз я розкажу як створити дуже красиву кнопку за допомогою всього лиш CSS3. Для початку задамо основу для нашої кнопки: Зріжемо гострі кути заокругливши [...]]]></description>
			<content:encoded><![CDATA[<p>Створюючи хороший СДЛ сайт ми багато часу проводимо над роботою з його дизайном. Хочеться щоб він виглядав просто ідеально, тому увагу приділяємо навіть дрібницям. Зазвичай все потрібно підправляти в Photoshop, але зараз я розкажу як створити дуже красиву кнопку за допомогою всього лиш CSS3.</p>
<p>Для початку задамо основу для нашої кнопки:</p>
<pre class="brush: css; title: ; notranslate">
border: 1px solid #5d9046;
color: #fff;
text-transform: uppercase;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
width: 156px;
font-size: 14px;
font-weight: bold;
padding: 8px 0;
text-align: center;
display: block;
</pre>
<div id="attachment_1955" class="wp-caption aligncenter" style="width: 421px"><a href="http://kopaweb.org.ua/wp-content/uploads/2011/10/knopka-1.jpg"><img class="size-full wp-image-1955 " title="knopka-1" src="http://kopaweb.org.ua/wp-content/uploads/2011/10/knopka-1.jpg" alt="Результат після першого кроку" width="411" height="130" /></a><p class="wp-caption-text">Результат після першого кроку</p></div>
<p>Зріжемо гострі кути заокругливши їх:</p>
<pre class="brush: css; title: ; notranslate">
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
</pre>
<div id="attachment_1958" class="wp-caption aligncenter" style="width: 428px"><a href="http://kopaweb.org.ua/wp-content/uploads/2011/10/knopka-2.jpg"><img class="size-full wp-image-1958 " title="knopka-2" src="http://kopaweb.org.ua/wp-content/uploads/2011/10/knopka-2.jpg" alt="Результат після другого кроку" width="418" height="142" /></a><p class="wp-caption-text">Результат після другого кроку</p></div>
<p>Для краси додамо нашій кнопці тінь:</p>
<pre class="brush: css; title: ; notranslate">
text-shadow: 1px 1px 1px #666;
-moz-box-shadow: 0 1px 3px #111;
-webkit-box-shadow: 0 1px 3px #111;
box-shadow: 0 1px 3px #111;
</pre>
<div id="attachment_1960" class="wp-caption aligncenter" style="width: 333px"><a href="http://kopaweb.org.ua/wp-content/uploads/2011/10/knopka-3.jpg"><img class="size-full wp-image-1960 " title="knopka-3" src="http://kopaweb.org.ua/wp-content/uploads/2011/10/knopka-3.jpg" alt="Результат після третього кроку" width="323" height="94" /></a><p class="wp-caption-text">Результат після третього кроку</p></div>
<p>Ну і наостанок зробимо колір кнопки градієнтним.</p>
<pre class="brush: css; title: ; notranslate">
background: -moz-linear-gradient(top, #3F8EB5 0%, #1D76A0 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3F8EB5), color-stop(100%,#1D76A0)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F8EB5', endColorstr='#1D76A0',GradientType=0 ); /* ie */
</pre>
<div id="attachment_1963" class="wp-caption aligncenter" style="width: 423px"><a href="http://kopaweb.org.ua/wp-content/uploads/2011/10/knopka-4.jpg"><img class="size-full wp-image-1963 " title="knopka-4" src="http://kopaweb.org.ua/wp-content/uploads/2011/10/knopka-4.jpg" alt="Фінальна версія кнопки" width="413" height="128" /></a><p class="wp-caption-text">Фінальна версія кнопки</p></div>
<p>Ось і готова наша кнопочка в ситі web 2.0. Якщо погратися ще із <strong>:hover</strong>, то можна придати їй ще більшої краси.<span id="more-1949"></span></p>
<p>Маленьке місто &#8211; великий потенціал. <a href="http://vademaar.name/posluhy">seo Тернополь</a> просування сайтів в інтернеті професіоналом із Тернополя.</p>
]]></content:encoded>
			<wfw:commentRss>http://kopaweb.org.ua/2011/10/stvoryuemo-krasyvu-knopku-v-css3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Оптимізовуємо блог на WordPress. Частина 1</title>
		<link>http://kopaweb.org.ua/2010/07/optymizovujemo-bloh-na-wordpress-ch1/</link>
		<comments>http://kopaweb.org.ua/2010/07/optymizovujemo-bloh-na-wordpress-ch1/#comments</comments>
		<pubDate>Tue, 20 Jul 2010 16:20:05 +0000</pubDate>
		<dc:creator>kopaweb</dc:creator>
				<category><![CDATA[SEO]]></category>
		<category><![CDATA[Вебмастерінг]]></category>
		<category><![CDATA[All in SEO]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[description]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[title]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[внутрішня оптимізація]]></category>
		<category><![CDATA[оптимізація]]></category>
		<category><![CDATA[ЧПУ]]></category>

		<guid isPermaLink="false">http://kopaweb.org.ua/?p=734</guid>
		<description><![CDATA[Багато хто вважає, що готові двигуни сайтів тяжще просувати під висококонкурентні запити. Але це зовсім правдиво. Навіть звичайний блог на Wordpress можна запросто просунути в ТОП по ВЧ запитам. Але для цього потрібно добре оптимізувати двигун. Трохи розкажу, про оптимізацію Wordpress. 1. Технічна оптимізація WordPress. - Посилання з ЧПУ. Щоб налаштувати ЧПУ, заходимо в меню НАЛАШТУВАННЯ &#8211; &#62; ПОСТІЙНІ [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_735" class="wp-caption alignleft" style="width: 303px"><a href="http://kopaweb.org.ua/wp-content/uploads/2010/07/wordpress_tags.jpg"><img class="size-full wp-image-735" title="Оптимізація блога на WordPress" src="http://kopaweb.org.ua/wp-content/uploads/2010/07/wordpress_tags.jpg" alt="Оптимізація блога на WordPress" width="293" height="293" /></a><p class="wp-caption-text">Оптимізація блога на WordPress</p></div>
<p>Багато хто вважає, що готові двигуни сайтів тяжще просувати під висококонкурентні запити. Але це зовсім правдиво. Навіть звичайний блог на Wordpress можна запросто просунути в ТОП по ВЧ запитам. Але для цього потрібно добре оптимізувати двигун. Трохи розкажу, про оптимізацію Wordpress.</p>
<p><strong>1. Технічна оптимізація WordPress.</strong></p>
<p>- Посилання з ЧПУ.</p>
<p>Щоб налаштувати ЧПУ, заходимо в меню НАЛАШТУВАННЯ &#8211; &gt; ПОСТІЙНІ ПОСИЛАННЯ, і змінюємо значення по замовчуванню на URL, який складається з  місяця публікації і назви статті.</p>
<p>- Оптимізація метатегів title и description.</p>
<p>Стандартні тайтли і діскріпшн легко оптимізовувати через плагін All in SEO, як тільки Ви активуєте у ньому Plugin Status: Enabled, Ваші заголовки і діскріпшн зразу оптимізуються.</p>
<p>- Оптимізація посилань &#8220;далі..&#8221; .</p>
<p>Хто знає HTML на рівні початківця, легко зможуть відредагувати так, щоб стандартне посилання &#8220;далі..&#8221; містило в собі назву новини. Це покращить внутрішню оптимізацію блога.</p>
<p>- Оптимізація зображень.</p>
<p>Про <a href="http://kopaweb.org.ua/2010/07/optymizatsiya-kartynok/">Оптимізацію зображень та картинок</a> я розповідав уже в одній із попередніх статтей.</p>
<p><strong>2. Оптимізація шаблона.</strong></p>
<p>-  Хлібні крихти.</p>
<p>Про хлібні крихти я також розповідав у своїх статтях: <a href="http://kopaweb.org.ua/2010/07/pokraschennya-ranzhuvannya-hlibnymy-kryhtamy-chastyna-1/">частина 1</a>, <a href="http://kopaweb.org.ua/2010/07/pokraschennya-ranzhuvannya-hlibnymy-kryhtamy-chastyna-2/">частина 2</a>. Для WordPress є плагін Yoast Breadcrumbs.</p>
<p>- Теги заголовків.</p>
<p>Тут все просто. На головній сторінці в тезі &lt;h1&gt; вписуємо назву блога. На сторінці новини в тезі &lt;h1&gt; повинно бути вписано назву новини. Якщо у Вашому шаблоні не так, то виправити це потрібно у файлах post.php і page.php.</p>
<p>- Оптимізуйте код.</p>
<p>У фалах шаблона не повинно бути кодів javascript та CSS, це потрібно підключати з допомогою зовнішніх файлів. Це дозволить браузерам кешувати велику частину сторінки. А пошуковим ботам легше Вас проіндексувати.</p>
<p>- Збільшити швидкодію.</p>
<p>З допомогою плагіну WP-Super-Cache Ви зможете значно пришвидшити роботу Вашого блогу.</p>
<p><a href="http://kopaweb.org.ua/2010/08/optymizovujemo-bloh-na-wordpress-chastyna-2/">Оптимізовуємо блог на WordPress. Частина 2</a></p>
<p><span id="more-734"></span></p>
<p><a href="http://www.web-promo.com.ua/">раскрутка сайта</a> с нуля, и для хорошых проэктов. Будьте всегда первыми.</p>
]]></content:encoded>
			<wfw:commentRss>http://kopaweb.org.ua/2010/07/optymizovujemo-bloh-na-wordpress-ch1/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>HTML і CSS валідатори</title>
		<link>http://kopaweb.org.ua/2010/06/html-i-css-validatory/</link>
		<comments>http://kopaweb.org.ua/2010/06/html-i-css-validatory/#comments</comments>
		<pubDate>Sun, 06 Jun 2010 07:16:02 +0000</pubDate>
		<dc:creator>kopaweb</dc:creator>
				<category><![CDATA[SEO]]></category>
		<category><![CDATA[Вебмастерінг]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[валідатори]]></category>
		<category><![CDATA[Веб-інструменти]]></category>
		<category><![CDATA[Кроссбраузерність]]></category>

		<guid isPermaLink="false">http://kopaweb.org.ua/?p=670</guid>
		<description><![CDATA[Провіряйте свій HTML/CSS код на валідність! Дехто говорить, що валідність не впливає на позицію у видачі, але більшість говорить зовсім інше – впливає, і з врахуванням того що код не тяжко привести у валідний стан – для чого залишати шанс пошуковим системам  недооцінювати наш сайт. Отримати код, який відповідає усім стандартам по таких пунктах: Кроссбраузерність [...]]]></description>
			<content:encoded><![CDATA[<p>Провіряйте свій HTML/CSS код на валідність! Дехто говорить, що валідність не впливає на позицію у видачі, але більшість говорить зовсім інше – впливає, і з врахуванням того що код не тяжко привести у валідний стан – для чого залишати шанс пошуковим системам  недооцінювати наш сайт.</p>
<p>Отримати код, який відповідає усім стандартам по таких пунктах:</p>
<p><strong>Кроссбраузерність</strong> – сторінка з валідним кодом буде виглядати одинаково у всіх браурезар.</p>
<p><strong>SEO</strong> – вплив на позицію у видачі.</p>
<p><strong>Чистий код</strong> – швидкість загрузки сторінки.</p>
<p>Веб-інструменти-валідатори:</p>
<p><a href="http://validator.w3.org/">W3C Markup Validation Service</a> – стандартний валідатор HTML;</p>
<p><a href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> &#8211; стандартний валідатор CSS;</p>
<p><a href="http://www.contentquality.com/">Cynthia Says</a> – перевір, чи відповідає Ваш сайт стандартам Section 508 і WCAG;</p>
<p><a href="http://htmlhelp.com/tools/validator/">WDG HTML Validator</a> – перевірка декількох сторінок і всього сайту.</p>
]]></content:encoded>
			<wfw:commentRss>http://kopaweb.org.ua/2010/06/html-i-css-validatory/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

