20 невероятно полезных css сниппетов

Приветствую вас на своем блоге. Сегодня подготовлена невероятно полезная статья из множества фрагментов CSS кода. Точнее из 20 полезных css вкусностей.

Данные решения, я надеюсь, сведут к минимуму головные боли и разочарования, а также сэкономит ваше время при написании CSS. Добавляйте статью в закладки и подписывайтесь на вкусные обновления блога. :neutral:

Теперь я собираю css сниппеты в 1 месте ;)

css-snippets css сниппеты

Давайте начнем.

Сброс стилей от html5doctor.com специально для на html5.

Подробнее о файле сброса стиле можно почитать в статье Урок 5.1 Сброс стилей: reset.css

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {

margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section
{
 display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */

ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */

mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */

hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

Clear хак – удаление обтекания блоков

/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}

.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
} 

Согласованный и предсказуемый размер шрифта в Rem (единица размера шрифта в css3)

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

Полный стиль для @face-font

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf')  format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}

Хак для IE6-8

Хаки для каждого браузера Ie с 6 версии до 8 :).

body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}

Кроссбраузерная прозрачность

selector {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5;      /* khtml, old safari */
-moz-opacity: 0.5;       /* mozilla, netscape */
opacity: 0.5;           /* fx, safari, opera */
}

Удаление контура вокруг ссылок для webkit браузеров

input[type="text"]:focus {
outline: none;
}

Кроссбраузерная минимальная высота (min-height)

Аналогично можно поступить с шириной ;)

#div {
min-height: 500px;
height:auto !important;
height: 500px;
}

Краткий стиль селекта font

/*font: font-style font-variant font-weight font-size/line-height font-family;*/

font: italic small-caps bold 15px/30px Helvetica, sans-serif;
 

Заглавная буква

Помните эту первую красивую букву в сказках? Так вот как это можно сделать:

p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

Вертикальное выравнивание по центру

.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}

Кроссбраузерный text-shadow (включая IE)

Делайте тень у текста для всех браузеров.

p {
text-shadow: #000000 0 0 1px;
zoom:1;
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";
}

Кроссбраузерный box-shadow (включая IE)

.shadow {
-moz-box-shadow: 0 0 4px #000;
-webkit-box-shadow: 0 0 4px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
box-shadow: 0 0 4px #000;
}

Скрыть текст над картинкой с помощью text-indent

h1 {
background: url(img/image.jpg) no-repeat;
height: 100px;
width: 500px;
display: block;
text-indent: -9999px;
}

Исправляем баг в IE6-7: двойной отступ

ul li {
float: left;
margin-left: 5px;
*display: inline; /*IE7 and below*/
_display: inline; /*IE6 and below*/
}

Удалить полосы прокрутки textarea в IE

textarea {
overflow:auto;
}

Изменения стиля выделенному тесту

::selection {
color: white;
background-color: red;
}

::-moz-selection {
color: white;
background-color: red;
}

Стиль для ссылок: внещних, mail и pdf-файлов

/* external links */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}

Стили для разных девайсов (по ширине экрана)

Как сделать мобильный вариант сайта? Да, просто подмените css файл для каждого устройства.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Пк и ноутбуков ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Больших экранов ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Можно прописать разные стили в отдельные файлы для каждого девайса, например:

<head>
<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">

</head>

Шрифты с помощью Google Font API

Вставьте код между тегами <head></head>

/* <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> */
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
 

Используйте стиль шрифта в css

/*CSS selector {
font-family: 'Font Name', serif;
}*/

font-family: 'Tangerine', serif;

по мотивам

Надеюсь данная статья помогла Вам в освоении и улучшении своих навыков верстки сайта.

Не забудьте поделиться с друзьями ;).

с/у УтБ

Спонсор статьи:  Продвижение и раскрутка сайтов от веб-студии Z-studio.
На десерт сегодня Guitar Hero в парламенте Великобритании :mrgreen:

Эстафета: Как я верстаю

Приветствую вас, пользователь. Сегодня я хотел бы начать эстафету на тему «Как я верстаю сайты» или просто «как я верстаю». Любой желающий может принять участие. В конце статьи я составлю список всех тех, кто принял участие, т.е. от меня для Вас совершенно бесплатная ссылка. Кстати, не забудьте напомнить в своей статье зачинщика. :???: Читать дальше

Цвет: html таблица, программы

Навигация.

  1. Таблица html кодов цветов, буквенное написание и коды цветов в RGB
  2. Таблица «безопасных» цветов (студия А. Лебедева)
  3. Программы для работы с цветом

Таблица html кодов цветов, буквенное написание и коды цветов в RGB

Написание Цвет R G B Код цвета для HTML
Snow Snow 255 250 250 #FFFAFA
GhostWhite GhostWhite 248 248 255 #F8F8FF
WhiteSmoke WhiteSmoke 245 245 245 #F5F5F5
Gainsboro Gainsboro 220 220 220 #DCDCDC
FloralWhite FloralWhite 255 250 240 #FFFAF0
OldLace OldLace 253 245 230 #FDF5E6
Linen Linen 250 240 230 #FAF0E6
AntiqueWhite AntiqueWhite 250 235 215 #FAEBD7
PapayaWhip PapayaWhip 255 239 213 #FFEFD5
BlanchedAlmond BlanchedAlmond 255 235 205 #FFEBCD
Bisque Bisque 255 228 196 #FFE4C4
PeachPuff PeachPuff 255 218 185 #FFDAB9
NavajoWhite NavajoWhite 255 222 173 #FFDEAD
Moccasin Moccasin 255 228 181 #FFE4B5
Cornsilk Cornsilk 255 248 220 #FFF8DC
Ivory Ivory 255 255 240 #FFFFF0
LemonChiffon LemonChiffon 255 250 205 #FFFACD
Seashell Seashell 255 245 238 #FFF5EE
Honeydew Honeydew 240 255 240 #F0FFF0
MintCream MintCream 245 255 250 #F5FFFA
Azure Azure 240 255 255 #F0FFFF
AliceBlue AliceBlue 240 248 255 #F0F8FF
lavender lavender 230 230 250 #E6E6FA
LavenderBlush LavenderBlush 255 240 245 #FFF0F5
MistyRose MistyRose 255 228 225 #FFE4E1
White White 255 255 255 #FFFFFF
Black Black 0 0 0 #000000
DarkSlateGray DarkSlateGray 47 79 79 #2F4F4F
DimGrey DimGrey 105 105 105 #696969
SlateGrey SlateGrey 112 128 144 #708090
LightSlateGray LightSlateGray 119 136 153 #778899
Grey Grey 190 190 190 #BEBEBE
LightGray LightGray 211 211 211 #D3D3D3
MidnightBlue MidnightBlue 25 25 112 #191970
NavyBlue NavyBlue 0 0 128 #000080
CornflowerBlue CornflowerBlue 100 149 237 #6495ED
DarkSlateBlue DarkSlateBlue 72 61 139 #483D8B
SlateBlue SlateBlue 106 90 205 #6A5ACD
MediumSlateBlue MediumSlateBlue 123 104 238 #7B68EE
LightSlateBlue LightSlateBlue 132 112 255 #8470FF
MediumBlue MediumBlue 0 0 205 #0000CD
RoyalBlue RoyalBlue 65 105 225 #4169E1
Blue Blue 0 0 255 #0000FF
DodgerBlue DodgerBlue 30 144 255 #1E90FF
DeepSkyBlue DeepSkyBlue 0 191 255 #00BFFF
SkyBlue SkyBlue 135 206 235 #87CEEB
LightSkyBlue LightSkyBlue 135 206 250 #87CEFA
SteelBlue SteelBlue 70 130 180 #4682B4
LightSteelBlue LightSteelBlue 176 196 222 #B0C4DE
LightBlue LightBlue 173 216 230 #ADD8E6
PowderBlue PowderBlue 176 224 230 #B0E0E6
PaleTurquoise PaleTurquoise 175 238 238 #AFEEEE
DarkTurquoise DarkTurquoise 0 206 209 #00CED1
MediumTurquoise MediumTurquoise 72 209 204 #48D1CC
Turquoise Turquoise 64 224 208 #40E0D0
Cyan Cyan 0 255 255 #00FFFF
LightCyan LightCyan 224 255 255 #E0FFFF
CadetBlue CadetBlue 95 158 160 #5F9EA0
MediumAquamarine MediumAquamarine 102 205 170 #66CDAA
Aquamarine Aquamarine 127 255 212 #7FFFD4
DarkGreen DarkGreen 0 100 0 #006400
DarkOliveGreen DarkOliveGreen 85 107 47 #556B2F
DarkSeaGreen DarkSeaGreen 143 188 143 #8FBC8F
SeaGreen SeaGreen 46 139 87 #2E8B57
MediumSeaGreen MediumSeaGreen 60 179 113 #3CB371
LightSeaGreen LightSeaGreen 32 178 170 #20B2AA
PaleGreen PaleGreen 152 251 152 #98FB98
SpringGreen SpringGreen 0 255 127 #00FF7F
LawnGreen LawnGreen 124 252 0 #7CFC00
Green Green 0 255 0 #00FF00
Chartreuse Chartreuse 127 255 0 #7FFF00
MedSpringGreen MedSpringGreen 0 250 154 #00FA9A
GreenYellow GreenYellow 173 255 47 #ADFF2F
LimeGreen LimeGreen 50 205 50 #32CD32
YellowGreen YellowGreen 154 205 50 #9ACD32
ForestGreen ForestGreen 34 139 34 #228B22
OliveDrab OliveDrab 107 142 35 #6B8E23
DarkKhaki DarkKhaki 189 183 107 #BDB76B
PaleGoldenrod PaleGoldenrod 238 232 170 #EEE8AA
LtGoldenrodYello LtGoldenrodYello 250 250 210 #FAFAD2
LightYellow LightYellow 255 255 224 #FFFFE0
Yellow Yellow 255 255 0 #FFFF00
Gold Gold 255 215 0 #FFD700
LightGoldenrod LightGoldenrod 238 221 130 #EEDD82
goldenrod goldenrod 218 165 32 #DAA520
DarkGoldenrod DarkGoldenrod 184 134 11 #B8860B
RosyBrown RosyBrown 188 143 143 #BC8F8F
IndianRed IndianRed 205 92 92 #CD5C5C
SaddleBrown SaddleBrown 139 69 19 #8B4513
Sienna Sienna 160 82 45 #A0522D
Peru Peru 205 133 63 #CD853F
Burlywood Burlywood 222 184 135 #DEB887
Beige Beige 245 245 220 #F5F5DC
Wheat Wheat 245 222 179 #F5DEB3
SandyBrown SandyBrown 244 164 96 #F4A460
Tan Tan 210 180 140 #D2B48C
Chocolate Chocolate 210 105 30 #D2691E
Firebrick Firebrick 178 34 34 #B22222
Brown Brown 165 42 42 #A52A2A
DarkSalmon DarkSalmon 233 150 122 #E9967A
Salmon Salmon 250 128 114 #FA8072
LightSalmon LightSalmon 255 160 122 #FFA07A
Orange Orange 255 165 0 #FFA500
DarkOrange DarkOrange 255 140 0 #FF8C00
Coral Coral 255 127 80 #FF7F50
LightCoral LightCoral 240 128 128 #F08080
Tomato Tomato 255 99 71 #FF6347
OrangeRed OrangeRed 255 69 0 #FF4500
Red Red 255 0 0 #FF0000
HotPink HotPink 255 105 180 #FF69B4
DeepPink DeepPink 255 20 147 #FF1493
Pink Pink 255 192 203 #FFC0CB
LightPink LightPink 255 182 193 #FFB6C1
PaleVioletRed PaleVioletRed 219 112 147 #DB7093
Maroon Maroon 176 48 96 #B03060
MediumVioletRed MediumVioletRed 199 21 133 #C71585
VioletRed VioletRed 208 32 144 #D02090
Magenta Magenta 255 0 255 #FF00FF
Violet Violet 238 130 238 #EE82EE
Plum Plum 221 160 221 #DDA0DD
Orchid Orchid 218 112 214 #DA70D6
MediumOrchid MediumOrchid 186 85 211 #BA55D3
DarkOrchid DarkOrchid 153 50 204 #9932CC
DarkViolet DarkViolet 148 0 211 #9400D3
BlueViolet BlueViolet 138 43 226 #8A2BE2
Purple Purple 160 32 240 #A020F0
MediumPurple MediumPurple 147 112 219 #9370DB
Thistle Thistle 216 191 216 #D8BFD8
Snow1 Snow1 255 250 250 #FFFAFA
Snow2 Snow2 238 233 233 #EEE9E9
Snow3 Snow3 205 201 201 #CDC9C9
Snow4 Snow4 139 137 137 #8B8989
Seashell1 Seashell1 255 245 238 #FFF5EE
Seashell2 Seashell2 238 229 222 #EEE5DE
Seashell3 Seashell3 205 197 191 #CDC5BF
Seashell4 Seashell4 139 134 130 #8B8682
AntiqueWhite1 AntiqueWhite1 255 239 219 #FFEFDB
AntiqueWhite2 AntiqueWhite2 238 223 204 #EEDFCC
AntiqueWhite3 AntiqueWhite3 205 192 176 #CDC0B0
AntiqueWhite4 AntiqueWhite4 139 131 120 #8B8378
Bisque1 Bisque1 255 228 196 #FFE4C4
Bisque2 Bisque2 238 213 183 #EED5B7
Bisque3 Bisque3 205 183 158 #CDB79E
Bisque4 Bisque4 139 125 107 #8B7D6B
PeachPuff1 PeachPuff1 255 218 185 #FFDAB9
PeachPuff2 PeachPuff2 238 203 173 #EECBAD
PeachPuff3 PeachPuff3 205 175 149 #CDAF95
PeachPuff4 PeachPuff4 139 119 101 #8B7765
NavajoWhite1 NavajoWhite1 255 222 173 #FFDEAD
NavajoWhite2 NavajoWhite2 238 207 161 #EECFA1
NavajoWhite3 NavajoWhite3 205 179 139 #CDB38B
NavajoWhite4 NavajoWhite4 139 121 94 #8B795E
LemonChiffon1 LemonChiffon1 255 250 205 #FFFACD
LemonChiffon2 LemonChiffon2 238 233 191 #EEE9BF
LemonChiffon3 LemonChiffon3 205 201 165 #CDC9A5
LemonChiffon4 LemonChiffon4 139 137 112 #8B8970
Cornsilk1 Cornsilk1 255 248 220 #FFF8DC
Cornsilk2 Cornsilk2 238 232 205 #EEE8CD
Cornsilk3 Cornsilk3 205 200 177 #CDC8B1
Cornsilk4 Cornsilk4 139 136 120 #8B8878
Ivory1 Ivory1 255 255 240 #FFFFF0
Ivory2 Ivory2 238 238 224 #EEEEE0
Ivory3 Ivory3 205 205 193 #CDCDC1
Ivory4 Ivory4 139 139 131 #8B8B83
Honeydew1 Honeydew1 240 255 240 #F0FFF0
Honeydew2 Honeydew2 224 238 224 #E0EEE0
Honeydew3 Honeydew3 193 205 193 #C1CDC1
Honeydew4 Honeydew4 131 139 131 #838B83
LavenderBlush1 LavenderBlush1 255 240 245 #FFF0F5
LavenderBlush2 LavenderBlush2 238 224 229 #EEE0E5
LavenderBlush3 LavenderBlush3 205 193 197 #CDC1C5
LavenderBlush4 LavenderBlush4 139 131 134 #8B8386
MistyRose1 MistyRose1 255 228 225 #FFE4E1
MistyRose2 MistyRose2 238 213 210 #EED5D2
MistyRose3 MistyRose3 205 183 181 #CDB7B5
MistyRose4 MistyRose4 139 125 123 #8B7D7B
Azure1 Azure1 240 255 255 #F0FFFF
Azure2 Azure2 224 238 238 #E0EEEE
Azure3 Azure3 193 205 205 #C1CDCD
Azure4 Azure4 131 139 139 #838B8B
SlateBlue1 SlateBlue1 131 111 255 #836FFF
SlateBlue2 SlateBlue2 122 103 238 #7A67EE
SlateBlue3 SlateBlue3 105 89 205 #6959CD
SlateBlue4 SlateBlue4 71 60 139 #473C8B
RoyalBlue1 RoyalBlue1 72 118 255 #4876FF
RoyalBlue2 RoyalBlue2 67 110 238 #436EEE
RoyalBlue3 RoyalBlue3 58 95 205 #3A5FCD
RoyalBlue4 RoyalBlue4 39 64 139 #27408B
Blue1 Blue1 0 0 255 #0000FF
Blue2 Blue2 0 0 238 #0000EE
Blue3 Blue3 0 0 205 #0000CD
Blue4 Blue4 0 0 139 #00008B
DodgerBlue1 DodgerBlue1 30 144 255 #1E90FF
DodgerBlue2 DodgerBlue2 28 134 238 #1C86EE
DodgerBlue3 DodgerBlue3 24 116 205 #1874CD
DodgerBlue4 DodgerBlue4 16 78 139 #104E8B
SteelBlue1 SteelBlue1 99 184 255 #63B8FF
SteelBlue2 SteelBlue2 92 172 238 #5CACEE
SteelBlue3 SteelBlue3 79 148 205 #4F94CD
SteelBlue4 SteelBlue4 54 100 139 #36648B
DeepSkyBlue1 DeepSkyBlue1 0 191 255 #00BFFF
DeepSkyBlue2 DeepSkyBlue2 0 178 238 #00B2EE
DeepSkyBlue3 DeepSkyBlue3 0 154 205 #009ACD
DeepSkyBlue4 DeepSkyBlue4 0 104 139 #00688B
SkyBlue1 SkyBlue1 135 206 255 #87CEFF
SkyBlue2 SkyBlue2 126 192 238 #7EC0EE
SkyBlue3 SkyBlue3 108 166 205 #6CA6CD
SkyBlue4 SkyBlue4 74 112 139 #4A708B
LightSkyBlue1 LightSkyBlue1 176 226 255 #B0E2FF
LightSkyBlue2 LightSkyBlue2 164 211 238 #A4D3EE
LightSkyBlue3 LightSkyBlue3 141 182 205 #8DB6CD
LightSkyBlue4 LightSkyBlue4 96 123 139 #607B8B
SlateGray1 SlateGray1 198 226 255 #C6E2FF
SlateGray2 SlateGray2 185 211 238 #B9D3EE
SlateGray3 SlateGray3 159 182 205 #9FB6CD
SlateGray4 SlateGray4 108 123 139 #6C7B8B
LightSteelBlue1 LightSteelBlue1 202 225 255 #CAE1FF
LightSteelBlue2 LightSteelBlue2 188 210 238 #BCD2EE
LightSteelBlue3 LightSteelBlue3 162 181 205 #A2B5CD
LightSteelBlue4 LightSteelBlue4 110 123 139 #6E7B8B
LightBlue1 LightBlue1 191 239 255 #BFEFFF
LightBlue2 LightBlue2 178 223 238 #B2DFEE
LightBlue3 LightBlue3 154 192 205 #9AC0CD
LightBlue4 LightBlue4 104 131 139 #68838B
LightCyan1 LightCyan1 224 255 255 #E0FFFF
LightCyan2 LightCyan2 209 238 238 #D1EEEE
LightCyan3 LightCyan3 180 205 205 #B4CDCD
LightCyan4 LightCyan4 122 139 139 #7A8B8B
PaleTurquoise1 PaleTurquoise1 187 255 255 #BBFFFF
PaleTurquoise2 PaleTurquoise2 174 238 238 #AEEEEE
PaleTurquoise3 PaleTurquoise3 150 205 205 #96CDCD
PaleTurquoise4 PaleTurquoise4 102 139 139 #668B8B
CadetBlue1 CadetBlue1 152 245 255 #98F5FF
CadetBlue2 CadetBlue2 142 229 238 #8EE5EE
CadetBlue3 CadetBlue3 122 197 205 #7AC5CD
CadetBlue4 CadetBlue4 83 134 139 #53868B
Turquoise1 Turquoise1 0 245 255 #00F5FF
Turquoise2 Turquoise2 0 229 238 #00E5EE
Turquoise3 Turquoise3 0 197 205 #00C5CD
Turquoise4 Turquoise4 0 134 139 #00868B
Cyan1 Cyan1 0 255 255 #00FFFF
Cyan2 Cyan2 0 238 238 #00EEEE
Cyan3 Cyan3 0 205 205 #00CDCD
Cyan4 Cyan4 0 139 139 #008B8B
DarkSlateGray1 DarkSlateGray1 151 255 255 #97FFFF
DarkSlateGray2 DarkSlateGray2 141 238 238 #8DEEEE
DarkSlateGray3 DarkSlateGray3 121 205 205 #79CDCD
DarkSlateGray4 DarkSlateGray4 82 139 139 #528B8B
Aquamarine1 Aquamarine1 127 255 212 #7FFFD4
Aquamarine2 Aquamarine2 118 238 198 #76EEC6
Aquamarine3 Aquamarine3 102 205 170 #66CDAA
Aquamarine4 Aquamarine4 69 139 116 #458B74
DarkSeaGreen1 DarkSeaGreen1 193 255 193 #C1FFC1
DarkSeaGreen2 DarkSeaGreen2 180 238 180 #B4EEB4
DarkSeaGreen3 DarkSeaGreen3 155 205 155 #9BCD9B
DarkSeaGreen4 DarkSeaGreen4 105 139 105 #698B69
SeaGreen1 SeaGreen1 84 255 159 #54FF9F
SeaGreen2 SeaGreen2 78 238 148 #4EEE94
SeaGreen3 SeaGreen3 67 205 128 #43CD80
SeaGreen4 SeaGreen4 46 139 87 #2E8B57
PaleGreen1 PaleGreen1 154 255 154 #9AFF9A
PaleGreen2 PaleGreen2 144 238 144 #90EE90
PaleGreen3 PaleGreen3 124 205 124 #7CCD7C
PaleGreen4 PaleGreen4 84 139 84 #548B54
SpringGreen1 SpringGreen1 0 255 127 #00FF7F
SpringGreen2 SpringGreen2 0 238 118 #00EE76
SpringGreen3 SpringGreen3 0 205 102 #00CD66
SpringGreen4 SpringGreen4 0 139 69 #008B45
Green1 Green1 0 255 0 #00FF00
Green2 Green2 0 238 0 #00EE00
Green3 Green3 0 205 0 #00CD00
Green4 Green4 0 139 0 #008B00
Chartreuse1 Chartreuse1 127 255 0 #7FFF00
Chartreuse2 Chartreuse2 118 238 0 #76EE00
Chartreuse3 Chartreuse3 102 205 0 #66CD00
Chartreuse4 Chartreuse4 69 139 0 #458B00
OliveDrab1 OliveDrab1 192 255 62 #C0FF3E
OliveDrab2 OliveDrab2 179 238 58 #B3EE3A
OliveDrab3 OliveDrab3 154 205 50 #9ACD32
OliveDrab4 OliveDrab4 105 139 34 #698B22
DarkOliveGreen1 DarkOliveGreen1 202 255 112 #CAFF70
DarkOliveGreen2 DarkOliveGreen2 188 238 104 #BCEE68
DarkOliveGreen3 DarkOliveGreen3 162 205 90 #A2CD5A
DarkOliveGreen4 DarkOliveGreen4 110 139 61 #6E8B3D
Khaki1 Khaki1 255 246 143 #FFF68F
Khaki2 Khaki2 238 230 133 #EEE685
Khaki3 Khaki3 205 198 115 #CDC673
Khaki4 Khaki4 139 134 78 #8B864E
LightGoldenrod1 LightGoldenrod1 255 236 139 #FFEC8B
LightGoldenrod2 LightGoldenrod2 238 220 130 #EEDC82
LightGoldenrod3 LightGoldenrod3 205 190 112 #CDBE70
LightGoldenrod4 LightGoldenrod4 139 129 76 #8B814C
LightYellow1 LightYellow1 255 255 224 #FFFFE0
LightYellow2 LightYellow2 238 238 209 #EEEED1
LightYellow3 LightYellow3 205 205 180 #CDCDB4
LightYellow4 LightYellow4 139 139 122 #8B8B7A
Yellow1 Yellow1 255 255 0 #FFFF00
Yellow2 Yellow2 238 238 0 #EEEE00
Yellow3 Yellow3 205 205 0 #CDCD00
Yellow4 Yellow4 139 139 0 #8B8B00
Gold1 Gold1 255 215 0 #FFD700
Gold2 Gold2 238 201 0 #EEC900
Gold3 Gold3 205 173 0 #CDAD00
Gold4 Gold4 139 117 0 #8B7500
Goldenrod1 Goldenrod1 255 193 37 #FFC125
Goldenrod2 Goldenrod2 238 180 34 #EEB422
Goldenrod3 Goldenrod3 205 155 29 #CD9B1D
Goldenrod4 Goldenrod4 139 105 20 #8B6914
DarkGoldenrod1 DarkGoldenrod1 255 185 15 #FFB90F
DarkGoldenrod2 DarkGoldenrod2 238 173 14 #EEAD0E
DarkGoldenrod3 DarkGoldenrod3 205 149 12 #CD950C
DarkGoldenrod4 DarkGoldenrod4 139 101 8 #8B658B
RosyBrown1 RosyBrown1 255 193 193 #FFC1C1
RosyBrown2 RosyBrown2 238 180 180 #EEB4B4
RosyBrown3 RosyBrown3 205 155 155 #CD9B9B
RosyBrown4 RosyBrown4 139 105 105 #8B6969
IndianRed1 IndianRed1 255 106 106 #FF6A6A
IndianRed2 IndianRed2 238 99 99 #EE6363
IndianRed3 IndianRed3 205 85 85 #CD5555
IndianRed4 IndianRed4 139 58 58 #8B3A3A
Sienna1 Sienna1 255 130 71 #FF8247
Sienna2 Sienna2 238 121 66 #EE7942
Sienna3 Sienna3 205 104 57 #CD6839
Sienna4 Sienna4 139 71 38 #8B4726
Burlywood1 Burlywood1 255 211 155 #FFD39B
Burlywood2 Burlywood2 238 197 145 #EEC591
Burlywood3 Burlywood3 205 170 125 #CDAA7D
Burlywood4 Burlywood4 139 115 85 #8B7355
Wheat1 Wheat1 255 231 186 #FFE7BA
Wheat2 Wheat2 238 216 174 #EED8AE
Wheat3 Wheat3 205 186 150 #CDBA96
Wheat4 Wheat4 139 126 102 #8B7E66
Tan1 Tan1 255 165 79 #FFA54F
Tan2 Tan2 238 154 73 #EE9A49
Tan3 Tan3 205 133 63 #CD853F
Tan4 Tan4 139 90 43 #8B5A2B
Chocolate1 Chocolate1 255 127 36 #FF7F24
Chocolate2 Chocolate2 238 118 33 #EE7621
Chocolate3 Chocolate3 205 102 29 #CD661D
Chocolate4 Chocolate4 139 69 19 #8B4513
Firebrick1 Firebrick1 255 48 48 #FF3030
Firebrick2 Firebrick2 238 44 44 #EE2C2C
Firebrick3 Firebrick3 205 38 38 #CD2626
Firebrick4 Firebrick4 139 26 26 #8B1A1A
Brown1 Brown1 255 64 64 #FF4040
Brown2 Brown2 238 59 59 #EE3B3B
Brown3 Brown3 205 51 51 #CD3333
Brown4 Brown4 139 35 35 #8B2323
Salmon1 Salmon1 255 140 105 #FF8C69
Salmon2 Salmon2 238 130 98 #EE8262
Salmon3 Salmon3 205 112 84 #CD7054
Salmon4 Salmon4 139 76 57 #8B4C39
LightSalmon1 LightSalmon1 255 160 122 #FFA07A
LightSalmon2 LightSalmon2 238 149 114 #EE9572
LightSalmon3 LightSalmon3 205 129 98 #CD8162
LightSalmon4 LightSalmon4 139 87 66 #8B5742
Orange1 Orange1 255 165 0 #FFA500
Orange2 Orange2 238 154 0 #EE9A00
Orange3 Orange3 205 133 0 #CD8500
Orange4 Orange4 139 90 0 #8B5A00
DarkOrange1 DarkOrange1 255 127 0 #FF7F00
DarkOrange2 DarkOrange2 238 118 0 #EE7600
DarkOrange3 DarkOrange3 205 102 0 #CD6600
DarkOrange4 DarkOrange4 139 69 0 #8B4500
Coral1 Coral1 255 114 86 #FF7256
Coral2 Coral2 238 106 80 #EE6A50
Coral3 Coral3 205 91 69 #CD5B45
Coral4 Coral4 139 62 47 #8B3E2F
Tomato1 Tomato1 255 99 71 #FF6347
Tomato2 Tomato2 238 92 66 #EE5C42
Tomato3 Tomato3 205 79 57 #CD4F39
Tomato4 Tomato4 139 54 38 #8B3626
OrangeRed1 OrangeRed1 255 69 0 #FF4500
OrangeRed2 OrangeRed2 238 64 0 #EE4000
OrangeRed3 OrangeRed3 205 55 0 #CD3700
OrangeRed4 OrangeRed4 139 37 0 #8B2500
Red1 Red1 255 0 0 #FF0000
Red2 Red2 238 0 0 #EE0000
Red3 Red3 205 0 0 #CD0000
Red4 Red4 139 0 0 #8B0000
DeepPink1 DeepPink1 255 20 147 #FF1493
DeepPink2 DeepPink2 238 18 137 #EE1289
DeepPink3 DeepPink3 205 16 118 #CD1076
DeepPink4 DeepPink4 139 10 80 #8B0A50
HotPink1 HotPink1 255 110 180 #FF6EB4
HotPink2 HotPink2 238 106 167 #EE6AA7
HotPink3 HotPink3 205 96 144 #CD6090
HotPink4 HotPink4 139 58 98 #8B3A62
Pink1 Pink1 255 181 197 #FFB5C5
Pink2 Pink2 238 169 184 #EEA9B8
Pink3 Pink3 205 145 158 #CD919E
Pink4 Pink4 139 99 108 #8B636C
LightPink1 LightPink1 255 174 185 #FFAEB9
LightPink2 LightPink2 238 162 173 #EEA2AD
LightPink3 LightPink3 205 140 149 #CD8C95
LightPink4 LightPink4 139 95 101 #8B5F65
PaleVioletRed1 PaleVioletRed1 255 130 171 #FF82AB
PaleVioletRed2 PaleVioletRed2 238 121 159 #EE799F
PaleVioletRed3 PaleVioletRed3 205 104 137 #CD6889
PaleVioletRed4 PaleVioletRed4 139 71 93 #8B475D
Maroon1 Maroon1 255 52 179 #FF34B3
Maroon2 Maroon2 238 48 167 #EE30A7
Maroon3 Maroon3 205 41 144 #CD2990
Maroon4 Maroon4 139 28 98 #8B1C62
VioletRed1 VioletRed1 255 62 150 #FF3E96
VioletRed2 VioletRed2 238 58 140 #EE3A8C
VioletRed3 VioletRed3 205 50 120 #CD3278
VioletRed4 VioletRed4 139 34 82 #8B2252
Magenta1 Magenta1 255 0 255 #FF00FF
Magenta2 Magenta2 238 0 238 #EE00EE
Magenta3 Magenta3 205 0 205 #CD00CD
Magenta4 Magenta4 139 0 139 #8B008B
Orchid1 Orchid1 255 131 250 #FF83FA
Orchid2 Orchid2 238 122 233 #EE7AE9
Orchid3 Orchid3 205 105 201 #CD69C9
Orchid4 Orchid4 139 71 137 #8B4789
Plum1 Plum1 255 187 255 #FFBBFF
Plum2 Plum2 238 174 238 #EEAEEE
Plum3 Plum3 205 150 205 #CD96CD
Plum4 Plum4 139 102 139 #8B668B
MediumOrchid1 MediumOrchid1 224 102 255 #E066FF
MediumOrchid2 MediumOrchid2 209 95 238 #D15FEE
MediumOrchid3 MediumOrchid3 180 82 205 #B452CD
MediumOrchid4 MediumOrchid4 122 55 139 #7A378B
DarkOrchid1 DarkOrchid1 191 62 255 #BF3EFF
DarkOrchid2 DarkOrchid2 178 58 238 #B23AEE
DarkOrchid3 DarkOrchid3 154 50 205 #9A32CD
DarkOrchid4 DarkOrchid4 104 34 139 #68228B
Purple1 Purple1 155 48 255 #9B30FF
Purple2 Purple2 145 44 238 #912CEE
Purple3 Purple3 125 38 205 #7D26CD
Purple4 Purple4 85 26 139 #551A8B
MediumPurple1 MediumPurple1 171 130 255 #AB82FF
MediumPurple2 MediumPurple2 159 121 238 #9F79EE
MediumPurple3 MediumPurple3 137 104 205 #8968CD
MediumPurple4 MediumPurple4 93 71 139 #5D478B
Thistle1 Thistle1 255 225 255 #FFE1FF
Thistle2 Thistle2 238 210 238 #EED2EE
Thistle3 Thistle3 205 181 205 #CDB5CD
Thistle4 Thistle4 139 123 139 #8B7B8B
grey11 grey11 28 28 28 #1C1C1C
grey21 grey21 54 54 54 #363636
grey31 grey31 79 79 79 #4F4F4F
grey41 grey41 105 105 105 #696969
grey51 grey51 130 130 130 #828282
grey61 grey61 156 156 156 #9C9C9C
grey71 grey71 181 181 181 #B5B5B5
gray81 gray81 207 207 207 #CFCFCF
gray91 gray91 232 232 232 #E8E8E8
DarkGrey DarkGrey 169 169 169 #A9A9A9
DarkBlue DarkBlue 0 0 139 #00008B
DarkCyan DarkCyan 0 139 139 #008B8B
DarkMagenta DarkMagenta 139 0 139 #8B008B
DarkRed DarkRed 139 0 0 #8B0000
LightGreen LightGreen 144 238 144 #90EE90

http://35rus.ru/htmlcolor.php

Таблица «безопасных» цветов (студия А. Лебедева)

255.255.204 255.255.153 255.255.102 255.255.51 255.255.0 204.204.0
FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00
           
255.204.102 255.204.0 255.204.51 204.153.0 204.153.51 153.102.0
FFCC66 FFCC00 FFCC33 CC9900 CC9933 996600
           
255.153.0 255.153.51 204.153.102 204.102.0 153.102.51 102.51.0
FF9900 FF9933 CC9966 CC6600 996633 663300
           
255.204.153 255.153.102 255.102.0 204.102.51 153.51.0 102.0.0
FFCC99 FF9966 FF6600 CC6633 993300 660000
           
255.102.51 204.51.0 255.51.0 255.0.0 204.0.0 153.0.0
FF6633 CC3300 FF3300 FF0000 CC0000 990000
           
255.204.204 255.153.153 255.102.102 255.51.51 255.0.51 204.0.51
FFCCCC FF9999 FF6666 FF3333 FF0033 CC0033
           
204.153.153 204.102.102 204.51.51 153.51.51 153.0.51 51.0.0
CC9999 CC6666 CC3333 993333 990033 330000
           
255.102.153 255.51.102 255.0.102 204.51.102 153.102.102 102.51.51
FF6699 FF3366 FF0066 CC3366 996666 663333
           
255.153.204 255.51.153 255.0.153 204.0.102 153.51.102 102.0.51
FF99CC FF3399 FF0099 CC0066 993366 660033
           
255.102.204 255.0.204 255.51.204 204.102.153 204.0.153 153.0.102
FF66CC FF00CC FF33CC CC6699 CC0099 990066
           
255.204.255 255.153.255 255.102.255 255.51.255 255.0.255 204.51.153
FFCCFF FF99FF FF66FF FF33FF FF00FF CC3399
           
204.153.204 204.102.204 204.0.204 204.51.204 153.0.153 153.51.153
CC99CC CC66CC CC00CC CC33CC 990099 993399
           
204.102.255 204.51.255 204.0.255 153.0.204 153.102.153 102.0.102
CC66FF CC33FF CC00FF 9900CC 996699 660066
           
204.153.255 153.51.204 153.51.255 153.0.255 102.0.153 102.51.102
CC99FF 9933CC 9933FF 9900FF 660099 663366
           
153.102.204 153.102.255 102.0.204 102.51.204 102.51.153 51.0.51
9966CC 9966FF 6600CC 6633CC 663399 330033
           
204.204.255 153.153.255 102.51.255 102.0.255 51.0.153 51.0.102
CCCCFF 9999FF 6633FF 6600FF 330099 330066
           
153.153.204 102.102.255 102.102.204 102.102.153 51.51.153 51.51.102
9999CC 6666FF 6666CC 666699 333399 333366
           
51.51.255 51.0.255 51.0.204 51.51.204 0.0.153 0.0.102
3333FF 3300FF 3300CC 3333CC 000099 000066
           
102.153.255 51.102.255 0.0.255 0.0.204 0.51.204 0.0.51
6699FF 3366FF 0000FF 0000CC 0033CC 000033
           
0.102.255 0.102.204 51.102.204 0.51.255 0.51.153 0.51.102
0066FF 0066CC 3366CC 0033FF 003399 003366
           
153.204.255 51.153.255 0.153.255 102.153.204 51.102.153 0.102.153
99CCFF 3399FF 0099FF 6699CC 336699 006699
           
102.204.255 51.204.255 0.204.255 51.153.204 0.153.204 0.51.51
66CCFF 33CCFF 00CCFF 3399CC 0099CC 003333
           
153.204.204 102.204.204 51.153.153 102.153.153 0.102.102 51.102.102
99CCCC 66CCCC 339999 669999 006666 336666
           
204.255.255 153.255.255 102.255.255 51.255.255 0.255.255 0.204.204
CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC
           
153.255.204 102.255.204 51.255.204 0.255.204 51.204.204 0.153.153
99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999
           
102.204.153 51.204.153 0.204.153 51.153.102 0.153.102 0.102.51
66CC99 33CC99 00CC99 339966 009966 006633
           
102.255.153 51.255.153 0.255.153 51.204.102 0.204.102 0.153.51
66FF99 33FF99 00FF99 33CC66 00CC66 009933
           
153.255.153 102.255.102 51.255.102 0.255.102 51.153.51 0.102.0
99FF99 66FF66 33FF66 00FF66 339933 006600
           
204.255.204 153.204.153 102.204.102 102.153.102 51.102.51 0.51.0
CCFFCC 99CC99 66CC66 669966 336633 003300
           
51.255.51 0.255.51 0.255.0 0.204.0 51.204.51 0.204.51
33FF33 00FF33 00FF00 00CC00 33CC33 00CC33
           
102.255.0 102.255.51 51.255.0 51.204.0 51.153.0 0.153.0
66FF00 66FF33 33FF00 33CC00 339900 009900
           
204.255.153 153.255.102 102.204.0 102.204.51 102.153.51 51.102.0
CCFF99 99FF66 66CC00 66CC33 669933 336600
           
153.255.0 153.255.51 153.204.102 153.204.0 153.204.51 102.153.0
99FF00 99FF33 99CC66 99CC00 99CC33 669900
           
204.255.102 204.255.0 204.255.51 204.204.153 102.102.51 51.51.0
CCFF66 CCFF00 CCFF33 CCCC99 666633 333300
           
204.204.102 204.204.51 153.153.51 153.153.102 153.153.0 102.102.0
CCCC66 CCCC33 999966 999933 999900 666600
           
255.255.255 204.204.204 153.153.153 102.102.102 51.51.51 0.0.0
FFFFFF CCCCCC 999999 666666 333333 000000
           

Программы для работы с цветом

Run Pixie – программа для анализа цвета. Просто наведите на необходимый объект и узнайте какого он цвета.

Внимание! Статья будет постоянно обновляться, поэтому подписывайтесь на обновления!

с/у УтБ

27 отличных зарубежных сайтов, использующие HTML5

Меня радует, что с каждым днем все больше сайтов использует Html5. C html5 приходят новые возможности, доступные для веб-разработчика, позволяет использовать более чистую и мощную размет, которая по сути благо для пользователей. Хоть html5 еще на стадии развития и мы на пороге очень интересных введений, но уже сегодня Вы можете оценить 27 отличных сайтов на html5. Читать дальше

7 простых способов добавить социальные кнопки на сайт

Иногда прочитав интересный материал, Вы с удовольствием хотите поделиться с друзьями прочитанным, так? И когда на сайте отсутствуют социальные кнопки для комфортной отправки ценной информации – это плохо. Ко всему сказанному, надо добавить, что социальные сети очень неплохой источник трафика, если подходить с умом ;)

Ранее я уже рассказывал, как добавить социальные кнопки часть 1 и часть 2, в который мы использовали css спрайты. Сегодня же поговорим о сервисах и плагинах, облегчающие нам жизнь.

Пожалуй, начнем.

Social Media Widget

Social Media Widgetплагин wordpress имеющий 3 варианта размеров иконок  (16, 32, 64) социальных сетей, 4 анимации и 4 разных стиля.

social media widget социальные кнопки

Плагин поддерживает следующие соцсети:

  • Facebook
  • Google+
  • Twitter
  • MySpace
  • FriendFeed
  • Orkut
  • Hyves
  • LinkedIn
  • aSmallWorld
  • Flickr
  • Picasa Web Albums
  • YouTube
  • Skype
  • Digg
  • Reddit
  • Delicious
  • StumbleUpon
  • Tumblr
  • Buzz
  • Google Talk
  • Vimeo
  • Blogger
  • WordPress
  • Yelp
  • Last.fm
  • Pandora
  • UStream
  • IMDb
  • Hulu
  • Flixter
  • FourSquare
  • Meetup
  • Tungle.me
  • PlanCast
  • SlideShare
  • DeviantArt
  • iTunes Ping
  • Live365
  • Digital Tunes
  • Soundcloud
  • BandCamp
  • Etsy
  • Better Business Bureau
  • Merchant Circle
  • Ebay
  • Steam
  • RSS
  • E-mail

Думаю, заметен ориентир на западные сайты.

Easy buttons

Easy buttons еще один плагин социальных сетей для wordpress. Особенности:

  • 3 стиля кнопок
  • Выбор позиции Сверху (top) или снизу (bottom)
  • Социальные кнопки на выбор (некоторые можно скрыть)
  • Горизонтальная или вертикальная позиция
  • Атрибут Rel=«nofollow» в ссылках

Пример можно посмотреть на странице автора справа вверху плавающая панелька.

социальные кнопки на сайт

Share this

Share this – сервис публикации ваших статей. Имеется плагин для wordpress, joomla, друпал.

share this плагин социльных сетей wordpress

Addthis

Addthis -  сервис социальных кнопок для wordpress, joomla и других платформ. Чем то похоже с share this.

social buttons addthis социальные кнопки

Social Share Buttons for WordPress

Social Share Buttons for WordPress плагин социальные кнопки для wordpress имеет простые настройки, 9 соцсетей, 2 языка (русский и английский)

social share buttons кнопки социальных сетей добавить

Поделиться от Яндекс

Поделиться от Яндекскнопка поделиться с друзьями от Яндекс, включает в себя следующие социальные сети:

  • Я.ру
  • Вконтакте
  • Facebook
  • Twitter
  • Одноклассники
  • МойМир
  • Livejournal
  • Friendfeed
  • Мой круг

поделиться с друзьями кнопки соцсетей от яндекс

Share42.com

Share42.com – бесплатные сервис, который генерирует скрипт с выбранными Вами иконками социальных сетей и размерами. Очень

удобный и простой сервис в использовании: просто кликайте на необходимые иконки и размер. Инструкция по установке имеется на сайте. Советую если Вы хотите простой и удобный скрипт публикации ваших статей в социальных сетях.

share42.com сервис кнопок социальных сетей

Надеюсь, данные сервисы были Вам полезны. Используйте их с умом, обязательно добавляйте социальные кнопки. ;)

Всех девушек с наступающим 8 марта! Будьте также прекрасны как и весна!

УтБ поздравляет всех девушек с 8 марта

Постовой:Любите игры онлайн? Попробуйте casino онлайн.

На десерт сегодня презентация страны, в которой я живу  ;)

Топ-10 бесплатных способов увеличить посещаемость сайта

И снова приветствую вас посетитель, не бойтесь вас уже посчитали и google analytics добавил +1 к моей посещалке. :) А Вы хотите, чтоб у Вас посещаемость постоянно росла и увеличивалась? Конечно, хотите, если Вы читаете мой блог и, в частности, данную статью. Сегодня я расскажу Вам об основных методах/способах повышения посещаемости на вашем супер интересном сайте/блоге :).

Лирическое отступление.

Обычно основной поток посещений на сайт идет с поисковиков. Поэтому продвижение (имею ввиду Seo) – направленно в сторону улучшения вашего сайта под поисковые системы – ПС. Но основная речь сегодня будет идти не о поиcковиках и seo, (хотя я и включил его как один из методов), рассмотрим другие не менее интересные способы увеличить посещаемость своего сайта.

Хочу предупредить, что каждый из методов описан поверхностно. Думаю, на каждый из них можно и по статье написать.

Ну-с, поехали.

1 способ. Отличный контент.

Думаю, эту фразу вы слышите постоянно: «Главное, уникальный контент.», «уникальный текст» и т. д. и т. п. Тут просто по другому нельзя :) хороший, уникальный контент гарантирует вам популярность (может не такую большую). Другое дело если текста отличные, а руки мягко говоря не оттуда, то сами понимаете :). Сегодня, только с отличными текстами сложно заявить о себе и «уехать» далеко, но для этого и существует другие 9 способов.

Тут я много написал (примерно еще 1500 символов), но затем понял, что получается. Взять на вооружение можно такую формулу: завлекающий заголовок + полезный текст + интересная тема + красивое оформление + способ подачи = отличный контент на Вашем сайте. (выводил формулу всю ночь :) )

2 способ. Активность на форумах, социальных сетях.

Действительно отличный способ заявить о себе как о хорошем специалисте. Кто скажет, что Max, sonika плохо знают wordpress ? И как специалисты они помогают всем пользователям форума о wordpress.

facebook

Помогайте людям на форумах, где-то можно и ссылочку свою по теме дать. Начать можно и с вопросов-ответов google и mail.ru. Только не спамьте ;) Добавляйте друзей (лучше если они блоггеры ;) ), общайтесь и друзья всегда помогут.

3 способ. Постинг / Автопостинг

Неплохой способ привлечения посетителей на свой сайт. При выполнении первого способа и третьего может получится отличный результат.

Насчет, автопостинга я бы конечно так сразу не говорил, а вот грамотный постинг совсем другое:

  • социальные сети для веб-мастеров— созданы для постинга статей с блогов. Так что дерзайте ;)
  • другие сайты по типу reddit.com и digg.com в интернете, куда можно также запостить ссылку, главное правильно подать, ведь там народ особый :) и не забывайте никто не любит спам (например, отличный ресурс pikabu) Можно также использовать и форумы например, webmasters.ru, серч имеют специальный раздел «Дайджест блогосферы»сюда можно запостить анонс свой статьи.переходы на мой блог
  • Ну и конечно, обычные социальные сети: твиттер (как настроить автопостинг твиттера через feedburner), вконтакте, фейсбук и т. д. Наш третий способ будет наиболее эффективен, если будет выполняться второй метод ;)
  • Rss лента, лента последних статей. Представьте свой виджет rss ленты на серче :) пример, последние статьи блога Маула на форуме maultalk.ru

4 способ. Оптимизация под ПС

Огромный океан не рассказанного под данным методом. В общем, достигается он внутренней и внешней оптимизацией (на деле конечно звучит очень легко :) ):

аудит сайта собственными силамиВ общем, так просто все не рассказать, но часто это основной источник привлечения пользователей на свой сайт. Могу посоветовать посмотреть основные этапы действия оптимизации (то что можно сделать своими руками ) на seochecklist.ru от devaka.

И кстати, данный метод необязательно платный. Внутреннюю оптимизацию можно вполне сделать самому.

5 способ. Интересный и качественный дизайн

lazurnoe интересный дизайн сайтаСчитайте, что дизайн сайта это ваша фишка, Вас будут узнать по нему. Яркий пример, спасатель дельфинов Wildo, ему и Жак Ив Кусто завидует :)

Вспомните сайт отдыха на черном море, а кто не знает смотрим , (нажмите на чайку и Вы точно захотите поделиться с другими ) Вот так вот сотни людей заходят на сайт, потому что он им чем то интересен. Берем на вооружение. ;)

Качественный дизайн по крайней мере не отпугнет ваших посетителей :)

6 способ. Рейтинги, каталоги, комментирование

Рейтинг блогов (примеров много: blograte.ru, top.mail.ru и т.д.) еще один способ привлечь посетителей и ссылку :) Зачем рейтинг? Так именно он покажет у кого длиннее кто как работает :).

то-10 бесплатных методов повышения посещаемости

Каталоги — чтобы не говорили, но каталоги (не все конечно) дают эффект, не только в виде ссылки, но и в виде переходов. Например, с resurs.kz насчитано более 700 переходов на мой блог за пару месяцев.

Dofollow блоги — комментирование doffolow блогов убивает 2-х зайцев:

  •  способствует появлению обратных ссылок
  •  переходы на ваш сайт

Dofollow блогНапример, добавив меня в список dofollow блогов, Сосновский тем самым обеспечил меня ссылкой со своего блога + переходы (кстати, иногда относительно неплохие)

С другой стороны и все чаще подумываю о том, чтобы убрать dofollow. Но это палка о двух концах :) и тема для отдельной статьи.

Комментирование.

Взгляните на главную страницу многих блогов, и Вы увидите виджет «Топ комментаторов». Что это нам дает? Правильно переходы, а иногда и ссылка с главной страницы ;)

Не забываем также комментировать и ссылаться на другие сайты. Например,на блоге devaka.ru, есть такой блог с ответными ссылками, если Вы ссылались на его блок :)

ссылки на другие сайты

7 способ. 3-Р: Рассылка, Rss лента, Реклама

Данный способ имеет секретное название «Три Р» :)

Рассылка:

Достаточно неплохой способ привлечь посетителей, часто данным способом грешат сайты скидок :) И поверьте у них это получается сам ловился ))

Можно воспользоваться бесплатной рассылкой на сервисах subscribe.ru, unisender.com/ru, mail.ru и др.

- Rss лента :

«Заставляем» подписываться пользователей на вашу rss ленту, и они будут постоянно приходить к вам, если конечно выполняется первый способ ;)

подписать на обновления блога по rss

В последнее время медленно, но верно увеличиваются клики по ссылкам моей rss-ленты. Конечно, тут все зависит от количества подписанных на ваш сайт.

- Реклама:

Рекламируйте свой сайт/блог. Не стесняйтесь, главное не переходите в спам) Обычно в настройках соц сетей, форумов есть строка в профайле сайт, обязательно вписывайте свой сайт. В нужным ситуациях спросите как нововведение на вашем сайте, пусть люди посоветуют, возможно Вы меняли дизайн блога :). Многие любят критиковать при этом нечего не делают, но нам то все равно, пусть развивают дискуссии в комментариях, а мы будем считать посетителей.

Оффлайн реклама с грамотным подходом сделает вас и ваш сайт мега популярным :). Например, автор блога terehoff.com Алексей часто бывает на SEO конференциях, знакомится с новыми людьми и т. д., а также пишет отчеты.

8 способ. Расширение тематики

как глобатор убегал от негров в гарлемеТут все просто и очевидно. Не нужно зацикливаться только на одном :) Seo блог с легкостью может стать на время местом крутых тачек, или рассказать вам о том, как можно убежать от негров афро-американцев в Гарлеме ;)

Ярким, примером может быть блог Михаила Шакина, это не только блог о seo и дизайне, но и о приключениях глобатора в Америке. Кстати, многие читают именно эти статьи ;)

9 способ. Халява.

скачать беплатно или халява :)Все знают, что эта тема пройдет, так как почти все любят бесплатное, оно так и манит нас, например, Вы многие перешли почитать данную статью, потому как в заголовок я добавил словосочетание «бесплатных методов» :), а Яндекс «говорит», что запросов на бесплатное около 178 миллионов!

Вы можете написать seo программы, как юзер zver777, либо бесплатно выставить исходники интересного скрипта (плагин для WordPress, как Dimox), многие собирают «белые» каталоги и раздают. Главное, чтоб ваш продукт был нужен и полезен ;)

10 способ. Конкурсы
Конкурсы всегда привлекали посетителей и заставляли авторов «начать движение». Вот прям как эта статья, которую Вы читаете. Да, да, данная статья участвует в конкурсе «TOP-10» от Сергея Шелвина с призовым фондом в 500$!. Надеюсь на Вашу поддержку ;) Благодарите лайками и твитами :lol:

В просторах всегда идут какие-нибудь конкурсы, эстафеты, акции, которые привлекут определенное количество трафика на ваш сайт, а если Вы еще и постараетесь, то обязательно победите ;)

В конце статьи хотел бы пожелать успехов всем участникам конкурса, надеюсь статья оказалась полезной и не такой длинной, я, кстати, еще себя сдерживал :)

MarkDay.ru – сообщество оптимизаторов, вебмастеров и манимейкеров

MarkDay.ru – сообщество оптимизаторов, вебмастеров и манимейкеров.

с/у УтБ :-?

Извините, но на в разделе конкурсы нету десертных видео :(

Урок 5.1 Сброс стилей: reset.css

Сегодня давайте разберемся с таким часто встречающимся термином сброс стилей для сайта. Думаю, Вы часто встречали такой файл как reset.css, либо в css что то подобное * {margin:0; padding:0; } (вспомните Урок 5. Блочная верстка сайта: css файл. ) Если Вы хотите заниматься версткой сайта, то думаю надо также разобраться что это и с чем его едят. А если не хотите заниматься версткой , то для понимая что к чему также будет полезно. ;)

Давайте для начала рассмотрим пример без использования сброса стилей и со сбросом каскадный таблиц стилей. Увидели разницу?

Да, браузер для каждого html тега имеет стиль по умолчанию и что еще радостнее так они еще могут отличаться. Это с одной стороны плохо, потому как мы все знаем, что браузеры, как маленькие дети – за ними не уследишь, каждый имеет свои характер стили. Поэтому сбрасывая стиль, мы начинаем с чистого листа. Единственным минусом, наверное, дополнительный файл/строки в css файле, а значит увеличение размера.

Для того, чтобы начать работу с чистого листа, необходимо «обнулить» все стили по умолчанию, так? Ок, если Вы вспомните урок 5 по верстке сайтов, то вспомните как мы это делали, с помощью универсального кода:

* {
margin:0;
padding:0;
}

Есть? Отлично, теперь Вы понимаете для чего эта строчка там.

Давайте взглянем на нашу демо страницу с универсальным сбросом стилей сайта.

Заметили отличия? Совершенно верно мы сбросили только отступы, у таблиц осталась рамка, у заголовков стили font, а если углубляться то много еще чего. Но на первой демке был полный сброс, давайте теперь посмотрим как его сделать.

Reset.css

Плавно мы пришли к файлу reset.css. Самым популярным сбросом стилей для сайта (тот самый, что мы видели в примере) и одновременно наиболее полным является т. н. reset файл от Эрика Мейера. В статье CSS Tools: Reset CSS можете почитать о его достижении при создании данного кода:

/*
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

Обычно данные стили выделяют в отдельный файл — reset.css. Зачем спросите Вы, для того чтобы по 100 раз не прописывать его на всех сайта, можно просто добавлять на разных проектах ссылку на данный файл:

<link href="http://site.kz/css/reset.css" rel="stylesheet" type="text/css" />

Согласитесь удобно. Но если у вас один блог/сайт, добавляйте в общий файл (style.css, template.css и т. д.), ничего страшного.

Еще одно общее условие для всех сбросов стилей — размещение в самом начале в стилях. Тут очевидная ситуация: для начала необходимо обнулить все стиле, а затем уже задавать тегам свои стили.

Css файл сканируется сверху вниз! Поэтому из 2-х одинаковых классов при равных условиях приоритетным будет тот, что находится ниже.

Мой файл reset.css

Смотря на файл от Эрика Мейера, Вам может в голову прийти такая мысль. У меня на сайт не используется и половина таких тегов, можно ли их не использовать? Сам Э. Майер говорит о том, что каждый может и должен его изменять под себя. Так что обязательно меняйте, модернизируйте экспериментируйте и пользуйтесь. ;)

Если Вы не используете html 5, удалите данный блок /* HTML5 display-role reset for older browsers */ …. { display:block; }

Yahoo reset.css

Из вышеизложенного понятно, что каждый может изменять и использовать свой reset файл, например, имени самого себя :)

Вот поэтому и у Yahoo есть свое видение на данную тему.

Можно взглянуть на наш пример в стиле Yahoo и увидеть отличия, сравнить и возможно Вам понравится данный сброс стилей.

Подключиться к стилям Яхуу можно добавив данную строку:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

Можно сохранить себе на хостинг.

Конечно, существуют и другие reset файлы, но напомню. Что самым часто используемым среди html верстальщиков является сброс стилей от Э. Майера, обычно, конечно, измененный. ;) Для первых шагов, думаю, будет достаточно простого его использования, либо есть всегда универсальный метод.

Теперь в комментариях прошу поделиться своим опытом по использованию сброса стилей, каким Вы пользуетесь?

Надеюсь данная статья была вам полезна. Подписывайтесь на обновления Уроков по блочной верстке сайтов.

с/у УтБ

Постовой: coding4.net – разработка игр на XNA и Silverlight

На десерт сегодня трейлер к фильму “Социальная сеть 2″, что то мне кажется, что это очередное псевдопродолжение, а как Вы думаете?

Feedburner: автопостинг в twitter

Сегодня мы поговорим об автопостинге в твиттер через сервис feedburner.com. В одной из статей я говорил с вами о сервисе feedburner и его важности. Теперь покопаемся в настройках сервиса от google. Зачем это необходимо?

Ранее мы «ускоряли» индексацию сайта с помощью ping сервисов, rss ленты, теперь добавим сервис твиттера, как один из методов, так как поисковые пауки можно сказать живут в twitter’e и вероятность индексации поисковиком новой статьи на вашем сайте повышается плюс переходы людей по вашей ссылки. Поэтому в комплексе применяемых методов автопостинг/постинг в twitter’e ваших новоиспеченных статей будет однозначно положительно влиять на сайт в целом.

А если Вы до сих пор не зарегистрированы в twitter’e и считаете это не нужным, то, думаю, можно дальше не читать. :)

А для тех, кто остался с нами, давайте перейдем к настройкам автопостинга. Но, для начала Вы уже должны были установить rss ленту на feebburner и зарегистрироваться в твиттере.

  • Давайте, перейдем в feedburner.com и выберем необходимую rss ленту Вашего сайта.
  • Пройдите в раздел Публикуй.автопостинг в твиттер через feedburner
  • В левой колонке найдите строку Socializeавтопостинг в твиттер через feedburner
  • Теперь необходимо активировать услугу. Нажмите кнопку «Активировать»в самом низу вкладки Socialize.activation-twitter-feedburner
  • Нажмите кнопку «Add a twitter account»add-twitter
  • Авторизуйтесь в твитер аккаунте и ответьте на вопрос: «Открыть приложению Google доступ к вашей учётной записи?» – Авторизоваться. Окно автоматически закроется, в feedburner добавится твитер аккаунт. Можно добавить сколько угодно аккаунтов.

Основное мы сделали, теперь настройки по вкусу.

Смотрим на рисунок и запоминаем настройки (цифры на картинке соответствуют цифрам в скобках, речь о которых идет в тексте):

social-feedburner-twitter автопостинг в твиттер через сервис google feedburner

Formatting Options

«Post content» ( 1 ) контент твита может быть:

  • только заголовок статьи;
  • заголовок и контент статьи (естественно не весь текст :) ) ;
  • только текст статьи;

Включить ссылку в твит (2). Иногда смотрю на твиты, вроде интересный заголовок, но куда переходить?? Не забываем ставить галочку, чтобы получить желаемый результат от twitter’a.

По умолчанию, автопостинг в твитер будет занимать максимальное количество символов, т. е. до 140 символов, но поставив галочку (3) на Leave room for retweets, Вы оставляете место для ретвитов.

Hash tags (4) Отмечаются символом # – хэш тег. Есть 2 варианта хэш тегов в feedburner:

  • Don’t add any hash tags – хэш теги не добавляются.
  • Create hash tags from item categories – хэш тег создаются исходя из категории/меток.

Параметр «Use inline hash tags» (5) – предполагает расположение хэш тегов в тексте твита, а не в конце как по умолчанию. (при выборе отображения только заголовка)

Additional text. В твит можно добавить собственный текст (6): например, RT please – с просьбой ретвитнуть. Можно выбрать расположение текста (7) вначале или в конце. Можно написать, что-типа: вот и новая статья … Тут я Вам не советник, у каждого свои тараканы в голове :)

Item Selection

Если у Вас на сайте новости добавляются чуть ли не ежеминутно, то думается вряд ли кто-то станет читать ваш аккаунт в twitter’e. Поэтому в настройках можно ограничить автопостинг? чтобы не засорять ленту.

Например, «Item limit: Post up to new 5 items per feed update» — Ограничение твитов в количестве 5 элементов.

«Item order: Order items by» – сортировать элементы по

  • дате публикации
  • их расположению в rss ленте

«Keyword filter» выбор автопостинга твитов по ключевому слову, Only post items containing a keyword in — которое содержится только в категории/заголовке/тексте/во всем элементе.

Теперь смотрим как это все будет выглядеть :

автопостинг в твиттер через feedburner

Убедились, что красиво ? :) Жмем сохранить и все.

автопостинг в твиттер через feedburner

Надеюсь данная статья оказалась Вам полезной. Не забудьте нажать на ретвит и добавить меня в свою френдленту ;)

с/у УтБ

 

На десерт сегодня мегавидео :) набравшее 419 миллионов просмотров(!), честно без комментариев, но американцам походу делать то нечего )))

Обзор: техподдержка хостинг-компаний

Итак, наконец-то я дописал таки продолжение обзора по хостинг – компаниям. Параллельно меня учили как это делать, показали сайт как хостобзор.ру. На данном сервисе Вы можете легко сравнить выбранные хостинги от разных фирм. Так то россиянам в этом смысле повезло :). Казахстанские хостинг-компании либо не хотят добавляться, либо не знают об этом ресурсе. Ну, поэтому и актуальность сего поста будет оставаться дольше :)

В просторах интернета мне встретились 16 хостинг-компаний Казахстана (по крайней мере они так себя позиционируют), так сказать у них можно купить казахстанский хостинг. Переходить к окончательным выводам по первому/поверхностному анализу нельзя, поэтому я решил их проверить на качество обслуживания.

Надеюсь, на мои письма отвечали не такие работники :)

support Техподдержка казахстанских хостинг-компаний

Что я делал? После 12 ночи по времени Астаны, я писал в техподдержку с тем или иным вопросом, фиксировал время отправки, затем фиксировал время ответа, разница (т. е. скорость ответа явились ключевым моментом:) ) Эксперимент был проведен во второй половине декабря 2011 года. Не претендую на чистоту эксперимента (в количестве отправленных mail’ ов), но я не жульничал, да и зачем мне это? :)

Для серьезным проектов, важно быстро и оперативно среагировать на ту или иную проблему, так что делаем выводы для себя.

Вся работа зафиксирована в отчете google docs.

В документе имеется колонка «Виды оплаты». То есть сервисы оплаты поддерживаемые компанией.

В итоге получились следующие места по скорости ответа техподдержки:

  1. altynhost.kz
  2. nurhost.kz
  3. hoster.kz
  4. gohost.kz
  5. dnr.kz

Просьба не ругать своих работников :) Вся информация содержится в документах, выводы делать Вам, но что хотелось бы отметить:

  • многие имеют онлайн консультанта, а те кто не имеет надо бы подумать об этом. При этом только у 1 компании консультант (онлайн) работает ночью.
  • большинство фирм используют систему тикетов, очень удобная штука.
  • nurhost.kz является филиалом hoster.by, кстати ответ на mail пришел от них
  • ps.kz единственная компания, которая извинилась за долгий ответ :)
  • я не регистрировался на сайтах, а писал как интересующийся пользователь

Надеюсь Вам это информация была полезна. Всем удачи и не болейте ;)

с/у УтБ

Порадовало видео о превосходстве firefox :)

Обзор бесплатного seo софта – free soft. Часть 1

Приветствую всех посетителей блога gtalk.kz. Давай сегодня поговорим о важной составляющей любого веб-мастера и seoшника. Конечно, это софт, или программы. Наличие тех или иных программ, позволяет нам более правильно принять решение, зарабатывать деньги и т.д.

Сегодня я решил сделать обзор бесплатного seo софта для вас ;). Предварительно разделив весь софт на небольшие категории.Важное условие всех программ из списка их бесплатность. Если Вы не нашли программу, распространяемую под знаком free, отпишитесь, и я с удовольствием ее добавлю. (Но для начала дождитесь второй части ;) )

И так, как всегда меньше слов больше дела. Начнем.

Содержание:

Программы для анализа сайта

  1. Site-Reporter Free 3,0 free – программа для анализа не только своих сайтов, но и сайтов конкурентов.
  2. Site-Auditor – программа-анализатор видимости в поисковиках
  3. SeoRank Portable – проверка показателей сайта
  4. YCCY
  5. iAnalysis
  6. Datacol SEO
  7. Определяйка – программа для массового анализа сайтов
  8. Dwatcher
  9. Page Promoter

Программы анализа ключевых слов

  1. СловоЁБ – эффективный анализ ключевых слов
  2. Словодёр – парсер подсказок
  3. YAST Keywords
  4. KeyWordKeeper – программа для работы с базами ключевых слов
  5. KeyWasher – программа для обработки ключевых слов
  6. StringConverter
  7. KeyMaster
  8. “Магадан” lite

Проверка позиций сайта, проверка PR и ТиЦ

  1. Seo Analizator
  2. Ya Monitor
  3. Free Monitor for Google
  4. Google Parser
  5. Yandex Title Highlight Words Parser
  6. PaRaMeter
  7. SESpider

Добавление в поисковики. Addurl – адурилка

  1. WebM_AddUrl_2
  2. HWaddurl (почти free)
  3. sIndexer
  4. GoGoAddUrl

Другие программы

  1. SiteMap Generator: программа для создания карты сайта
  2. Fast Blog Finder – поиск dofollow блогов
  3. Title сборщик – программа для массового сбора title с сайтов
  4. Post Manager

Программы для анализа сайта:

Site-Reporter Free 3,0 free

– программа для анализа не только своих сайтов, но и сайтов конкурентов.

site reporter free 3.0 скачать программу для продвижения
Основные возможности программы:

  • Определение позиций сайта
  • Определение параметров сайта
  • Пакетный анализ сайтов
  • Анализ конкуренции ключевых запросов
  • Создание подробных отчетов
  • Подбор ключевых запросов
  • Регистрация сайта в поисковых системах:
  • Яндекс  Google  Rambler  Nigma  Aport  Meta  Yahoo!  Bing

Скачать программу Site-Reporter Free 3,0 free

Site-Auditor

программа-анализатор видимости в поисковиках.

Можно получить следующую информацию:

  • Индексы цитирования Яндекса – ТИЦ и Google – PageRank;
  • Количество страниц, проиндексированных поисковыми системами Яндекс, Рамблер, Google, Апорт и Yahoo.
  • Количество ссылок на сайт, обнаруженных поисковыми системами Google, Яндекс, Yahoo.
  • Данные о наличии сайта в каталогах Яндекс, Рамблер Top100, Апорт и DMOZ.
  • Если на сайте будут обнаружены счетчик Рамблер Top100, утилита соберет данные о количестве посетителей и просмотренных страниц за последние 7 дней.
  • Если будут обнаружены счетчики статистических систем Top.Mail.ru, LiveInternet (Rax), SpyLog, HotLog, то будут даны ссылки на страницы этих поисковых систем.
  • И многое другое

Скачать программу site auditor

SeoRank Portable

– проверка показателей сайта

Обзор бесплатного сео софта Seorankportable

Основные возможности:

  • Выбор необходимых параметров проверки
  • Проверка количества страниц в индексе Yahoo и количество обратных ссылок с уникальных доменов
  • Проверка наличия сайта в каталоге Dmoz
  • Проверка даты регистрации и окончания срока регистрации домена
  • Возможность ввода каптчи без прерывания проверки
  • Загрузка URL-ов из текстового файла и добавление списком
  • Поддержка большого количества проверямых URL-ов
  • Проверка YAP (количество проиндексированных страниц в поисковой системе Yandex)
  • Проверка Яндекс тИЦ , проверка Google PR
  • Проверка наличия сайта в Яндекс каталоге и категории
  • Проверка количества страниц в индексе Yahoo и количество обратных ссылок с уникальных доменов
  • Проверка наличия сайта в каталоге Dmoz
  • Проверка даты регистрации и окончания срока регистрации домена
  • Могопоточность при проверке
  • Экспорт результата в HTML, Excel и табулированный текст

Скачать SeoRank Portable

YCCY

Скачать YCCY seo софт

Программа для комплексной проверки сайта. Есть несколько модулей:

  • Модуль INDEXATOR (проверка сайта на разные параметры: RP, Alexa Rank, Тиц Яндекса и т.д.)
  • Модуль WHOIS PAID (проверка домена Whois)
  • Модуль NAME GENERATOR (генератор доменных имен)
  • Модуль PageRankDC (проверка PR по дата-центрам)

Скачать YCCY

iAnalysis

iAnalysis скачать бесплатно seo софт

Программа позволяет осуществить мониторинг сайта в Google, Яндекс, Rambler, Yahoo, а так же отображает показатели сайтов, такие как Google PageRank и Яндекс тИЦ.

Скачать iAnalysis

Datacol SEO

Скачать бесплатно Datacol SEO

Основные возможности программы:

  • - Индексация страницы в Yandex, в Google;
  • - Количество проиндексированных страниц домена в Yandex, в Google;
  • - PR, тИЦ;
  • - Количество обратных ссылок на страницу по Yahoo;
  • - Количество обратных ссылок на домен по Yahoo;
  • - Наличие сайта в Яндекс Каталоге, в DMOZ;
  • - Количество внутренних ссылок на странице;
  • - Количество исходящих ссылок на странице.

Скачать Datacol SEO

Определяйка

– программа для массового анализа сайтов

Скачать определяйка seo софт

Думаю, из самого названия становится ясно, что программа предназначена для анализа параметров сайта.

В программе имеется возможность сохранения истории анализов и экспорта полученных результатов. Для программы характерны высокая скорость работы, большое количество анализируемых данных, широкие возможности применения программы. Есть возможность работы через прокси. Также программа работает с сервисом Антикапча.

Скачать программу Определяйка

Dwatcher

        dwatcher скачать бесплатно сео софт

Программа представляет собой монитор, ежедневно получающий информацию о состоянии вашего сайта в различных поисковых системах, таких как:

  • Яндекс
  • Google
  • Рамблер
  • Yahoo

Скачать Dwatcher

Page Promoter

Скачать Page Promoter продвижение сайта софт

Данная программа для анализа, оптимизации, продвижения и мониторинга сайтов. Текущее состояние не поддерживается!

Скачать Page Promoter

Программы анализа ключевых слов:

СловоЁБ

– эффективный анализ ключевых слов

СловоЕБ отличный парсер ключевых слов

СловоЁБ – это новый программный продукт, позволяющий эффективно парсить и обрабатывать слова. Среди основных инструментов СловоЁБа числятся:

1) парсинг сервиса Yandex.Wordstat: “плоский” и “объемным” поиск;

2) статистика LiveInternet: раскладка по популярности запросов в поисковых системах;

3) статистика Web Effector: бюджет, региональность, сроки продвижения и CPC запросов.

4) позволяет определять целевую страницу под запрос в Яндекс и Гугл.

Программа поддерживает ручную обработку капчи Яндекса, а также работу через прокси-серверы. В качестве альтернативы многопоточности выступает опция “Множитель скорости”. Программа автоматически уменьшает время таймаута на количество добавленных прокси-серверов, в результате чего достигается не худшее увеличение скорости обработки данных.

Скачать СловоЕБ

Словодёр

Словодер софт подбора ключевые слова

Словодёр — новый эффективный парсер поисковых подсказок. Основной конек Словодёра — развернутый результат. Так, только на нулевом уровне парсинга можно получить уже больше тысячи подсказок. Что уж говорить о поиске “в глубину”.

Программа поддерживает работу через прокси-сервер, работает с популярными поисковыми системами, причем, в многопоточном режиме. Это означает, что одновременно анализируются данные со всех отмеченных ПС.

Скачать   Словодер

YAST Keywords

yast keyword софт подбора ключевых слов

Программа YAST Keywords предназначена для автоматизации рутинных операций по поиску ключевиков и анализу их частотности, составлению семантического ядра сайта, а так же подбору эффективных фраз для показа контекстной рекламы.

Скачать YAST Keywords

KeyWordKeeper

– программа для работы с базами ключевых слов.

KeyWord keeper скачать seo софт

Простая программа для работы с ключевыми словами вашего сайта.

KeyWordKeeper создан для обработки txt-баз ключевых слов. Богатые возможности программы постоянно дополняются и исправляются. Незаменимая утилита в работе! Программа под Windows (тестировалась под Windows XP 32bit SP2 и Windows Vista 64bit SP1), установки не требует, просто скопируйте exe-шник в директорию с Вашей базой. Перед тем как использовать, настоятельно рекомендую потратить пару минут, прочитать мануал к программе. Просто в некоторых модулях (например, в модуле “Создание выборки”) тяжело самостоятельно догадаться до полного алгоритма работы.

Скачать KeyWordKeeper

KeyWasher

KeyWasher – программа для обработки ключевых слов

KEYwasher программа подбора ключей

Если хотите навести порядок в своих ключевых словах, то софт от юзера zver777 то, что надо ;)

Программа умеет:

  • - Удалять одинаковые ключевые слова
  • - Удалять мусор из строк
  • - Удалять ключевые слова со словами из чёрного списка(может удалять всю строку или только “плохое слово”)
  • - Выбирать строки с определённым количеством слов
  • - Сортировать строки
  • - Делать выборку по словам
  • - Возможность соединять и разбивать на части текстовые файлы

Скачать KeyWasher
StringConverter

StringConverter

StringConverter скачать программу бесплатно для ключевых слов

Наверное, Вы когда-нибудь встречали подобные символы “”, “!” и [ ]. Некоторые их используют, некоторые нет, но знать про них должен каждый уважающий себя пользователь контекстной рекламы.

Программа StringConverter призвана помочь и заметно ускорить рутинную работу по использованию данных символов, при подборе ключей.

Основные возможности программы:

  • Возможность сохранения пяти различных схем преобразования
  • Быстрое переключение между схемами по хоткею
  • Импорт списка ключевых слов из файла
  • Обработка ключевых слов из буфера обмена по хоткею
  • Сохранение результатов в файл и/или буфер обмена
  • Работа из трея

Скачать StringConverter 

KeyMaster

Программа KeyMaster предназначена для работы с ключевыми словами. Для работы необходим .NET Framework 4

Keymaster скачать бесплатно сео soft

Скачать KeyMaster

“Магадан” lite

seo софт бесплатно Магадан lite

«Магадан» — это набравшая большую популярность в Рунете программа для удобного автоматического сбора и обработки статистики показов ключевых слов Яндекс.Директа. Есть платная версия PRO.

Скачать «Магадан» lite

Проверка позиций сайта, проверка PR и ТиЦ:

Seo Analizator

– программа для определения позиция вашего сайта в ПС и парсинга подсказок.

Seo analizator seo софт для продвижения сата

Seo analizator – это программа предназначенная для облегчения труда оптимизатора. Программа позволяет за короткое время определить сео параметры Вашего сайта. Программа отличается от подобных своей скоростью определения параметров. Очень удобный и понятный интерфейс. Все результаты можно сохранять в файлы. У программы несколько основных функций.

Скачать Seo analizator

Ya Monitor

Программа для проверки позиций в Яндекс

Операционная система: Windows 98/2000/XP/Vista

Ya monitor скачать бесплатно seo софт выдача Yandex

Ya Monitor – это очень простая и удобная SEO-утилита, выполняющая мониторинг позиций веб-сайта (или нескольких) в такой популярной отечественной поисковой системе как Яндекс. Поддерживаются опции импорта, экспорта, множество URL-ов и работа с прокси.

Основные возможности Ya Monitor

  • Мониторинг положения сайта в Yandex
  • Поддерживает множество URL-ов
  • Работает через прокси
  • Экспорт результатов в CSV
  • Импорт ключевых слов из файла
  • Поддержка Юникода
  • Имитирует деятельность человека

Скачать Ya Monitor

Free Monitor for Google

Программа для проверки позиции сайта в Google, с помощью нее, например, можно смотреть московскую выдачу по запросу SEOCAFEинфошность.

Операционная система: Windows 98/2000/XP/Vista

Free Monitor for google выдача запросов например seocafeинфошность

Эта маленькая утилита – возможно, лучший инструмент для проверки и мониторинга позиций в Google. Она показывает положение сайта в Гугл по выбранным ключевым словам, а также состояние топ-листингов на текущий момент. Поддерживаются любые языки и около 30 дата-центров Google. Легка в освоении и полностью бесплатна.

Основные возможности Free Monitor for Google

  • Мониторинг положения сайта в Google
  • Поддерживает более 50 стран
  • Поддерживает множество URL-ов
  • Работает через прокси
  • Экспорт результатов в CSV
  • Импорт ключевых слов из файла
  • Поддерживает работу через Google Web API 1
  • Поддержка Юникода

Скачать Free Monitor for google

Google Parser

Комментарии излишне. Программа парсить выдачу с google.

Google parceк выдача запросов google

Скачать Google Parser

Yandex Title Highlight Words Parser

Yandex Title скачать бесплатно программа парсит выдачу яндекса

Программа парсит выдачу Яндекса и предоставляет возможность дополнительно выделять только подсвеченные в титлах слова.

Скачать Yandex Title Highlight Words Parser (433)

PaRaMeter

Проверка Google PageRank всех ваших сайтов одним щелчком!

Операционная система: Windows 98/2000/XP/Vista

parametr бесплатный seo софт

PaRaMeter (от слов “PageRank Meter”) позволяет вам автоматически проверить такой параметр как PageRank. Безусловно, это можно сделать и вручную, однако PaRaMeter позволяет сэкономить ваше время, более удобен и не требуeт установки Google Toolbar на ваш компьютер.

Скачать PaRaMeter

SESpider

SESpider — определение позиций сайта.

sespider скачать софт для продвижения сайта

  • На данный момент программа работает с 9-ю поисковыми системами. В их числе: Google.ru, Yandex.ru, Rambler.ru, Mail.ru, Google.com, Google.com.ua,Google.lv, Yahoo.com, Live.com.
  • 2 алгоритма поиска позиций.
  • 4 языка (английский, русский, латышский, украинский)
  • Есть возможность использовать proxy (может быть полезно для людей со статическим IP)
  • Обход капчи.
  • Возможность импорта проектов из semonitor и Site-Auditor.
  • Определение самых релевантных и количества страниц на сайте по заданым ключевым словам (фразам).
  • Проверка данных по сайту Google Pr, Yandex тИЦ, Число страниц в индексе Google, Число страниц в индекске Yandex, В каталоге Yandex.

Скачать SESpider
Есть руководство по пользованию

Добавление в поисковики. Addurl – адурилка

В некоторых программах данная функция идет по умолчанию, но есть программы, реализованные специально для этого.

WebM_AddUrl_2 адурилка

addurl добавления сайта в поисковики, пинг сервисы

Программа для быстрого “загона” ваших сайтов в ПС Yandex и Google ( добавление в адурилку  )

Возможности:

  • Многопоточная работа
  • Поддержка Antigate
  • Подробный отчёт о работе
  • Добавление сайта в Yandex, в Google
  • Пинг сайта в различные ПС Подробнее о пинг сервисах.

Скачать 

Оказался не таким и Free. :) Администрация форума webma****s.ru запретила размещать Free Soft на других блогах, сайтах :) !!!!

HWaddurl (почти free)

hwaddurl адурилка регистрация в поисковиках
Программа для автоматического добавления сайта в addurl поисковиков:

  • Addurl для поисковой системы Google
  • Addurl для поисковой системы Bing
  • Addurl для поисковой системы Yandex
  • Addurl для поисковой системы Rambler
  • Addurl для поисковой системы Gogo
  • Addurl для поисковой системы Webalta
  • Addurl для поисковой системы Nigma
  • Addurl для поисковой системы Turtle
  • Пинг (ок 100 сервисов) подробнее о ping сервисах

Ключ для ввода 5ef114ffad6b592b1a3339482435a1aa на год. (с официального сайта)

Скачать HWaddurl 

sIndexer

sindexer как ускорить индексацию сайта
sIndexer v1.2 поможет вам быстро проиндексировать новые сайты или страницы, которые отсутствуют в индексе поисковых систем.

Внимание! Для работы требуется .NET Framework 4!

Скачать sIndexer 

GoGoAddUrl

Программа для массового добавления сайтов в аддурилку gogo.ru

gogoaddurl добавление в поисковик сайта

Название программы говорит само за себя. Только зачем нужно создавать программу для добавления только в gogo.ru ? Ну, да ладно, как говорится, на халяву… :)

Скачать GoGoAddUrl

Другие программы

SiteMap Generator

программа для создания карты сайта

sitemap generator карта сайта

На выходе программа создаёт:

  • - список ссылок (Links Extractor);
  • - карту сайта для Google в формате xml (Google Sitemap / XML);
  • - карту сайта для Yahoo (Yahoo map / Text);
  • - карту сайта в формате HTML;
  • - карту сайта в формате CSV;
  • - список неработающих ссылок (Failed URLs);
  • - файл robots.txt;

Скачать SiteMap Generator

Fast Blog Finder

поиск dofollow блогов

поиск dofollow блогов

Возможности Fast Blog Finder:

  • поиск блогов с использованием ключевых слов и ключевых фраз;
  • определение PR блога;
  • определение типа блогов: dofollow или nofollow;
  • показ количества ссылок в комментариях к странице;
  • публикация комментариев прямо из интерфейса программы;
  • загрузка собственных списков блогов и определение их типа;
  • создание каталогов и подкаталогов для сортировки списков блогов;
  • наличие встроенной проверки правописания для комментариев;
  • отправка прокомментированных страниц с социальные закладки;
  • добавление доменов блогов в черный список и исключение их из результатов поиска;
  • экспорт списков блогов в различные форматы файлов;
  • сокращение до минимума трат времени на поиск тематических блогов и их комментирование;
  • увеличение трафика с поисковых машин на сайт;
  • получение естественных ссылок на сайт.

Скачать Fast Blog Finder 

Title сборщик

Программа для массового сбора title с сайтов

Ttile сборщик программа для сбора заголовков сайта

Данный софт предназначен для сбора title с сайтов. Введите просто свой сайт по типу http://site.kz и ок.

Скачать Title сборщик 

Post Manager

post manager скачать seo софт

Программа для учета и обмена постовыми.
Post Manager умеет:

  • Хранить информацию о партнерах (с кем и как поменяли, контактные данные, максимально допустимое количество ссылок);
  • Проверять наличие постовых;
  • Проверять, закрыта ли ссылка от индексации;
  • Сколько ссылок доступно для индексации на странице.

Скачать Post Manager

Saitrix! Полный анализ сайтов из Я. Вебмастера.

saitrix полный анализ сайта

По данным webmaster.yandex.ru программа показывает следующие:

  • - Значение тиц;
  • - Страниц в поиске;
  • - Количество ссылающихся сайтов;
  • -Последние посещение робота на сайте;
  • - Количество страниц загруженное роботом;
  • - Количество страниц исключено роботом.

Скачать Saitrix

Список использованной литературы

форум webmasters.ru
юзер zver777

Ждите продолжение! Если Вам понравилась статья, поделитесь с друзьями и подписывайтесь на обновления! Скоро выход второй части ;)

с/у УтБ

На десерт сегодня интересная реклама от Audi, эхх, мечта, а не машина :)