tag:blogger.com,1999:blog-78341844027642846752024-02-20T03:03:09.103+02:00itЗаметки по IT для новичковNatahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.comBlogger34125tag:blogger.com,1999:blog-7834184402764284675.post-8057995703193042742019-03-13T11:22:00.000+02:002019-03-13T11:22:39.271+02:00Как запретить ссылки в комментариях WordPress<div dir="ltr" style="text-align: left;" trbidi="on">
Столкнулась с проблемой при администрировании одного сайта на WordPress - спамеры слишком много оставляют комментарии к постам. И мало того, что комментарии не понятно о чем, так еще и в каждом ссылка.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitBSJxBTGxbC76bE3yuGuapJqgYrACD8OzDifrXnjEqo-gui2f1BXChYfXOi2Jr5Dfxf4lStuFCEr_leFh6cY4RWl5lN3WE8j7J6Xa-rXR415Tmeg5lB_QDThLIojXeoCVjQKQVAE8vauL/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2019-03-13+11.24.56.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="874" data-original-width="1348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitBSJxBTGxbC76bE3yuGuapJqgYrACD8OzDifrXnjEqo-gui2f1BXChYfXOi2Jr5Dfxf4lStuFCEr_leFh6cY4RWl5lN3WE8j7J6Xa-rXR415Tmeg5lB_QDThLIojXeoCVjQKQVAE8vauL/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2019-03-13+11.24.56.png" /></a></div>
<br />
<br />
Чем плохо когда ссылки активные? Такие ссылки в комментариях открыты к индексации, и значит будут передавать «вес» вашей страницы. Чтобы избежать этой проблемы, можно закрыть внешние ссылки от поисковых систем или применить маленький код, который удалит html-теги и оставит URL в виде обычного текста.<br />
<br />
Решения в интернете уже давно опубликованы. Чтобы не рыться каждый раз, добавлю себе сюда в блог.<br />
<br />
Код, представленный ниже, нужно скопировать, и вставить их в файл «functions.php» активной темы WordPress. Пишут, что разместить код нужно в самом конце, перед закрывающимся тегом ?><br />
Не забываем сохранить изменения.<br />
<br />
<h4 style="text-align: left;">
Решение 1</h4>
<br />
remove_filter('comment_text', 'make_clickable', 9);<br />
<div>
<br /></div>
<h4 style="text-align: left;">
Решение 2</h4>
<br />
// ЗАПРЕТ ССЫЛОК В КОММЕНТАХ<br />
function remove_link_comment($link_text) {<br />
return strip_tags($link_text);<br />
}<br />
add_filter('pre_comment_content','remove_link_comment');<br />
add_filter('comment_text','remove_link_comment');<br />
<br />
<br />
<br />
К слову, лично у меня в редакторе WordPress закрывающегося тега вообще нет, так что добавлю просто в конец файла, надеюсь будет работать.<br />
<br /></div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-71305599237639164732018-06-03T13:58:00.001+03:002018-06-03T14:18:53.500+03:00Галерея фото из Instagram<div dir="ltr" style="text-align: left;" trbidi="on">
Решила для себя написать простую инструкцию как отобразить галерею фоток из Инстаграма. О какой галерее идет речь, можно посмотреть в моем блоге по рукоделию <a href="http://creative.nata.cv.ua/" target="_blank">creative.nata.cv.ua</a>, внизу страницы там есть раздел "Одежда для кукол".<br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYho2J-dshAZ8VJGbDs6P47qwkIvlzEfiTF9QazxZPJDXsIEQZoMYyJ_XTO-32iKqPYYNAFylsBAii1o6HzsrVp_xPSXAi7g0bQFKZkQyOVAX7mKjRcAR4iN48p2TJ1sDdyMCiQ8PvXrYH/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+11.44.17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="730" data-original-width="1289" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYho2J-dshAZ8VJGbDs6P47qwkIvlzEfiTF9QazxZPJDXsIEQZoMYyJ_XTO-32iKqPYYNAFylsBAii1o6HzsrVp_xPSXAi7g0bQFKZkQyOVAX7mKjRcAR4iN48p2TJ1sDdyMCiQ8PvXrYH/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+11.44.17.png" /></a></div>
<div>
<br /></div>
<div>
Эта галерея у меня в блоге уже была, но в какой-то момент она поломалась и пришлось вспоминать все заново. Лучший способ опять не забыть - написать шпаргалку. Может быть и еще кому-то пригодятся мои заметки.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Виджет lightwidget</h3>
<div>
Для галереи у меня был выбран виджет с сайта <a href="https://lightwidget.com/" target="_blank">https://lightwidget.com/</a> На сайте сть бесплатные и платные функции, лично мне бесплатного функционала вполне хватает. </div>
<div>
<br /></div>
<div>
Итак, открываем сайт <a href="https://lightwidget.com/" target="_blank">https://lightwidget.com/</a><br />
Здесь сразу же доступна форма конструктора галереи:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJPiqiY3dyt2LJNWi73r0Oj2krM-JfdRHcI8bESH8jOIyQUn8Ex3SgIT5fqueFFWiN_gLihpoSV_9h1bn_3mJMGn80t0DBbF8w18MNWzC3XCkNC5VW8Mqe07U3H19PzgD-kxDuryK3Vetz/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+12.36.46.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="940" data-original-width="1411" height="425" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJPiqiY3dyt2LJNWi73r0Oj2krM-JfdRHcI8bESH8jOIyQUn8Ex3SgIT5fqueFFWiN_gLihpoSV_9h1bn_3mJMGn80t0DBbF8w18MNWzC3XCkNC5VW8Mqe07U3H19PzgD-kxDuryK3Vetz/s640/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+12.36.46.png" width="640" /></a></div>
<div>
<br /></div>
<div>
Для пользования сервисом нужно залогиниться через кнопку "Log in with Instagram". При логине запрашивается доступ к фото и видео из вашего профиля инстаграма:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQV1OECTT_fAC0hh9Fns9CR3vtyRXh6l5pzgK8I1aQIdBU6h4Q4XUeoqZFYIBvIvv3OeJv90kLb5cVnnbwjRR8gbgkqJLhFLl2_YlOStyrNeIRHOR4RKBx-5vEvSuoGJca71zIgkY7QbZQ/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+11.45.02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="939" data-original-width="1205" height="498" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQV1OECTT_fAC0hh9Fns9CR3vtyRXh6l5pzgK8I1aQIdBU6h4Q4XUeoqZFYIBvIvv3OeJv90kLb5cVnnbwjRR8gbgkqJLhFLl2_YlOStyrNeIRHOR4RKBx-5vEvSuoGJca71zIgkY7QbZQ/s640/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+11.45.02.png" width="640" /></a></div>
<div>
<br /></div>
<div>
После логина будут отображаться фотки из профиля инстаграма и далее можно заполнять форму для настройки виджета. Форма очень простая, так что тут без комментариев, заполню как мне нужно:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmkEyK1IdPBLZ8Rez_FpNCC-GSSi7X3tKFjLdzB-Avt8wr-FgnJeJE2UxvEj4iAeIt4szR2e90bBS6WHh7zZOIDESnwrIkWuga1kM-cqWtZ_R4D4kJSb2ouBbV7nivFWoHMmGVeqyzDRaO/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+11.48.56.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="940" data-original-width="1411" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmkEyK1IdPBLZ8Rez_FpNCC-GSSi7X3tKFjLdzB-Avt8wr-FgnJeJE2UxvEj4iAeIt4szR2e90bBS6WHh7zZOIDESnwrIkWuga1kM-cqWtZ_R4D4kJSb2ouBbV7nivFWoHMmGVeqyzDRaO/s640/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+11.48.56.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjUqtylPB8G3dKgeocMBYsIewSw-3YiA8Vff_RoDl-Y5pfhsyk878pIfFDQP77a45HEbDonzdBo9bx4e3pbIA0i2Z0RuspQYfDDsnRyxBVKlZcGyTSpCyD-gkU17BQAnvnjmp_8VxYUAnF/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+11.49.12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="940" data-original-width="1411" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjUqtylPB8G3dKgeocMBYsIewSw-3YiA8Vff_RoDl-Y5pfhsyk878pIfFDQP77a45HEbDonzdBo9bx4e3pbIA0i2Z0RuspQYfDDsnRyxBVKlZcGyTSpCyD-gkU17BQAnvnjmp_8VxYUAnF/s640/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+11.49.12.png" width="640" /></a></div>
<div>
<br /></div>
<div>
В поле "Type of widget" доступны три варианта: Grid, Slideshow, Columns (Pinterest style). Мне нужен Slodeshow.</div>
<div>
<br /></div>
<div>
Под формой две кнопки: "Preview" - генерирует виджет и справа показывает результат, кнопка "Get Code!" позволяет получить код виджета:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNzicR-ur3t3oCZxwPL7NhZjfXHeKm2pGaln7HvkN2YI4cEKrhvsxVaxHmTDy-uVaOG-ngJcCXcANgWleHzkjEs4fRuwFrD8zweq0OCfDtI-uAUdPCzeiI9jiHE-xkn2aLQd3wHSDUiq26/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+11.44.40.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="940" data-original-width="1207" height="498" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNzicR-ur3t3oCZxwPL7NhZjfXHeKm2pGaln7HvkN2YI4cEKrhvsxVaxHmTDy-uVaOG-ngJcCXcANgWleHzkjEs4fRuwFrD8zweq0OCfDtI-uAUdPCzeiI9jiHE-xkn2aLQd3wHSDUiq26/s640/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+11.44.40.png" width="640" /></a></div>
<div>
<br /></div>
<div>
Копируем сгенерированный код в буфер обмена и дальше вставляем этот код в шаблон блога. У меня в дизайне блога для этой галереи есть специальный блок section-ads2:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisTF3rqMBnz4rkyo19oOPOBwke_NkBp3Bf8RquSY2VQ3kSkrAWTD_LwT4J8PXmsJ_iDK9IgQKtojQCPVBJ5xfvrTQUlcdlqfoqPYZVXAdQvto9i8xv1o8p4meAoLUkPP0q5yuCDeq7jTAy/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+11.46.31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="871" data-original-width="1600" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisTF3rqMBnz4rkyo19oOPOBwke_NkBp3Bf8RquSY2VQ3kSkrAWTD_LwT4J8PXmsJ_iDK9IgQKtojQCPVBJ5xfvrTQUlcdlqfoqPYZVXAdQvto9i8xv1o8p4meAoLUkPP0q5yuCDeq7jTAy/s640/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+11.46.31.png" width="640" /></a></div>
<div>
<br /></div>
<div>
Нажимаю "изменить" и вставляю код сюда:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLkI0pi-9QR8ilemoehwhj3foQ5FVdvKBDn1hcbOFS3wJJGotHpdcRSYN5drdsPtdU3JzY4QWaH3KcUQHIg_OqY5G6g5jEBD6jsSkiYGpCuhPd1QSys84QmxEAdaWkMYblbduirVYA53d7/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+11.48.05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="844" data-original-width="736" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLkI0pi-9QR8ilemoehwhj3foQ5FVdvKBDn1hcbOFS3wJJGotHpdcRSYN5drdsPtdU3JzY4QWaH3KcUQHIg_OqY5G6g5jEBD6jsSkiYGpCuhPd1QSys84QmxEAdaWkMYblbduirVYA53d7/s640/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+11.48.05.png" width="558" /></a></div>
<div>
<br /></div>
<div>
На этом все. Сохраняем код, открываем блог и любуемся результатом.</div>
<div>
<br /></div>
<div>
Кстати, на сайте <a href="https://lightwidget.com/" target="_blank">https://lightwidget.com/</a> хранятся все сгенерированные виджеты, их в любой момент можно посмотреть или исправить.</div>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Виджет snapwidget</h3>
<div>
Еще пару слов про другой сервис, который я начала пробовать, но до конца не доделала, не понравилось.</div>
<div>
<br /></div>
<div>
Это сайт <a href="https://snapwidget.com/" target="_blank">https://snapwidget.com</a>. Регистрация здесь осуществляется через логин/емейл или форму фейсбука. Настройки виджета в бесплатной версии весьма скромные.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJZ_0L80ff9Rju6RaX2A3rUvncFN07mJtIsGko_Llq0kCS3-zy6YoRbGL_BtibuftUJpr7367i7pE4R13qpn66SSyH1r4F25aQt-r1G6SiUx3PntEGLj9QkTfR17PiweWxywHpnKwQo54Q/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+13.38.13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1266" data-original-width="1415" height="357" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJZ_0L80ff9Rju6RaX2A3rUvncFN07mJtIsGko_Llq0kCS3-zy6YoRbGL_BtibuftUJpr7367i7pE4R13qpn66SSyH1r4F25aQt-r1G6SiUx3PntEGLj9QkTfR17PiweWxywHpnKwQo54Q/s400/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+13.38.13.png" width="400" /></a></div>
<br />
Виджет со скроллингом тоже есть:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEGl5aegS_3Wxod23LkOxIUKtwbP64tcbfuc9cRV6x0mcfbXZS1ETSfqz0tkycIKB5DHEPGPFdjlOphZ0nnYDWzbHR1DcoDLUjfyVEN9rcSvR-gKI0brCgl4j3OlyBM2wr_Bi8gf8fyTWr/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+14.20.44.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="868" data-original-width="1600" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEGl5aegS_3Wxod23LkOxIUKtwbP64tcbfuc9cRV6x0mcfbXZS1ETSfqz0tkycIKB5DHEPGPFdjlOphZ0nnYDWzbHR1DcoDLUjfyVEN9rcSvR-gKI0brCgl4j3OlyBM2wr_Bi8gf8fyTWr/s400/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2018-06-03+14.20.44.png" width="400" /></a></div>
<br />
Но мне результат совсем не понравился, так что к себе на сайт я даже не пыталась встраивать этот виджет.</div>
<div>
<br /></div>
<div>
<div>
Наверняка есть и другие сервисы для генерации кода инстаграм-галереи, если знаете что-то более удобное - пишите. У себя оставила lightwidget.com, меня он вполне устраивает. </div>
<div>
<br />
<br /></div>
<div>
© KiNata<br />
03/06/2018</div>
<div>
</div>
</div>
</div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-83216686298057795072017-10-08T00:34:00.003+03:002017-10-08T00:34:54.198+03:00Шаблоны для интернет-магазина на blogger (обновлено)<div dir="ltr" style="text-align: left;" trbidi="on">
Ранее я уже делала заметку с шаблонами для интернет-магазина (<a href="http://it.nata.cv.ua/2016/03/blogger-templates-commerce.html" target="_blank">Шаблоны для интернет-магазина на blogger</a>), теперь вот пришло время поискать что появилось нового на просторах интернета.<br />
<br />
Итак, первые два шаблона продублирую из предыдущего поста и к ним добавлю несколько новых шаблонов.<br />
<br />
<h3 style="text-align: left;">
BetaCommerce</h3>
<div>
Этот шаблон предназначен для интернет-магазина. Здесь есть каталог товаров и весь необходимые функционал для работы магазина - возможность поместить товар в корзину, оформить и оплатить заказ.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwBk2v3y0QxKV9dZPTgadZK2JkkOZ2qAcVb5SzAsuokEG1fozuNpDUkzkvfDPYStlpBAcA32bT0PPs7VdHYhfebTWXnLQBUfHvd_P_NX9JX7kD3khizc1G56J2HjpZ8zVQ4QJSBAKkyKGj/s1600/BetaCommerce-Shopping-Blogger-Template.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwBk2v3y0QxKV9dZPTgadZK2JkkOZ2qAcVb5SzAsuokEG1fozuNpDUkzkvfDPYStlpBAcA32bT0PPs7VdHYhfebTWXnLQBUfHvd_P_NX9JX7kD3khizc1G56J2HjpZ8zVQ4QJSBAKkyKGj/s1600/BetaCommerce-Shopping-Blogger-Template.jpg" /></a> </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a class="demolink" href="http://betacommerce.blogspot.com/" rel="nofollow" style="background: rgb(244, 126, 126); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(231, 105, 105); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">demo</a><span style="background-color: #f6f6f6; color: #262829; font-family: "georgia" , "times new roman" , "times" , serif; font-size: 14px; line-height: 24px;"> </span><a class="moredemo" href="http://www.templateism.com/2014/10/betacommerce-shopping-blogger-template.html" rel="nofollow" style="background: rgb(74, 170, 165); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(58, 154, 149); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">more info</a></div>
<br />
<br />
<h3 style="text-align: left;">
Mega Shop</h3>
<div>
Этот респонсивный дизайн идельно подойдет для интернет-магазины одежды или похожей тематики. Среди возможностей шаблона есть просмотр каталога товаров, помещение товара в корзину, оплата заказа.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVNyg2wKqLcDIvajPdSGDqN9DBfTpWcnhFUzjvvryL9t9vm5-nf-BuhaSPjNmcU6rFE2kmy9VUXMPiOsxBHvuDpz3yW0hed7tUmjmQF2gvhytSu4haHVZdNLn9xAtjnTE0yo7b7xY3aQyN/s1600/mega-shop-ecommerce-responsive-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVNyg2wKqLcDIvajPdSGDqN9DBfTpWcnhFUzjvvryL9t9vm5-nf-BuhaSPjNmcU6rFE2kmy9VUXMPiOsxBHvuDpz3yW0hed7tUmjmQF2gvhytSu4haHVZdNLn9xAtjnTE0yo7b7xY3aQyN/s1600/mega-shop-ecommerce-responsive-blogger.png" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a class="demolink" href="http://megashoptheme.blogspot.com/" rel="nofollow" style="background: rgb(244, 126, 126); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(231, 105, 105); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">demo</a><span style="background-color: #f6f6f6; color: #262829; font-family: "georgia" , "times new roman" , "times" , serif; font-size: 14px; line-height: 24px;"> </span><a class="moredemo" href="http://www.templateism.com/2015/10/mega-shop-ecommerce-responsive-blogger-template.html" rel="nofollow" style="background: rgb(74, 170, 165); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(58, 154, 149); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">more info</a></div>
<br />
<br />
<h3 style="text-align: left;">
Storemag Online Shop Blogger Template</h3>
<div>
Этот шаблон подходит для любого интернет-магазина или любого веб-сайта электронной коммерции. Респонсивный дизайн и функционал, позволяющий работать с корзиной товаров, делает тему идеальным шаблоном веб-сайта для продвижения и продажи продукта.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU34RfqCeAf3mT8Nv8H7Jw6wEoIpfuv45iZ6DmCYqT24fnj3BRDIzbj9K5KJgeh-eoQF8Eb8K4Lz0SLzkkwc1iZqDL0Z3G7P5-j2J9_-HG6z0kNoknLYbuYAy1JQerBBkDVOCSR0H0xcbQ/s1600/Storemag-Blogger-Template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="418" data-original-width="700" height="237" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU34RfqCeAf3mT8Nv8H7Jw6wEoIpfuv45iZ6DmCYqT24fnj3BRDIzbj9K5KJgeh-eoQF8Eb8K4Lz0SLzkkwc1iZqDL0Z3G7P5-j2J9_-HG6z0kNoknLYbuYAy1JQerBBkDVOCSR0H0xcbQ/s400/Storemag-Blogger-Template.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a class="demolink" href="http://storemag.blogspot.com/" rel="nofollow" style="background: rgb(244, 126, 126); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(231, 105, 105); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">demo</a><span style="background-color: #f6f6f6; color: #262829; font-family: "georgia" , "times new roman" , "times" , serif; font-size: 14px; line-height: 24px;"> </span><a class="moredemo" href="http://www.protemplateslab.com/storemag-blogger-template/" rel="nofollow" style="background: rgb(74, 170, 165); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(58, 154, 149); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">more info</a></div>
<br />
<br />
<h3 style="text-align: left;">
Sora Store Blogger Template</h3>
<div>
Sora Store - это тоже респонсивный шаблон. Шаблон простой в использовании, полностью настраивается и подходит для любого магазина электронной коммерции. Работает на любом экране: настольный компьютер, планшет, мобильный телефон.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirv0YalZi-4lysVfJufxy0q2VMhgBUkUFLx4p5B5NeUKlqPHd_8Uys6JY_ucnyN635tjMN_68AYQ_eRK_bMTk7iJa9m5I8Jx60Bj53vpLvDc2nkfE4bQ79r8DjjCMul-A22pZGkqbOAsUd/s1600/Sora-Store-Blogger-Template1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="418" data-original-width="700" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirv0YalZi-4lysVfJufxy0q2VMhgBUkUFLx4p5B5NeUKlqPHd_8Uys6JY_ucnyN635tjMN_68AYQ_eRK_bMTk7iJa9m5I8Jx60Bj53vpLvDc2nkfE4bQ79r8DjjCMul-A22pZGkqbOAsUd/s400/Sora-Store-Blogger-Template1.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a class="demolink" href="http://sora-store-soratemplates.blogspot.com/" rel="nofollow" style="background: rgb(244, 126, 126); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(231, 105, 105); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">demo</a><span style="background-color: #f6f6f6; color: #262829; font-family: "georgia" , "times new roman" , "times" , serif; font-size: 14px; line-height: 24px;"> </span><a class="moredemo" href="http://www.protemplateslab.com/sora-store-blogger-template/" rel="nofollow" style="background: rgb(74, 170, 165); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(58, 154, 149); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">more info</a></div>
<br />
<br />
<br />
<h1 class="name post-title entry-title" itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing" style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: BebasNeueRegular, arial, Georgia, serif; font-size: 28px; font-weight: normal; list-style: none; margin: 0px 0px 10px; outline: none; padding: 0px;">
<br /></h1>
Ну и на досуге можно еще посмотреть дизайны, подходящие для магазинов: <a href="http://www.techclient.com/online-shopping-store-blogger-templates/" target="_blank">25+ Best Free Online Shopping Store Blogger Templates</a><br />
<br />
<br />
<br />
<br />
<br /></div>
</div>
</div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-9009437559296001102016-06-22T15:22:00.000+03:002016-06-22T15:52:53.860+03:00Как удалить контакты Skype из адресной книги телефона<div dir="ltr" style="text-align: left;" trbidi="on">
В телефонной книге смартфона по умолчанию отображаются все контакты из skype, а также некоторых других социальных сетей. Но у большинства таких контактов не подключен номер телефона, тогда зачем мне эти контакты в моей телефонной книге?<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcw9CBly8N4RnKE-OF4AID06h8J5w8H31ySZ5Z20X9guOSOuaLqYu3P_WkiIiDM4eUu5s6UrUG4LLAdD14yvbkFWEL1yivD8lXEX8BbX2CKVZfunXkDAR5w16WQcSPJEt65dWeAUEtQSM/s1600/sony-contacts.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="476" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcw9CBly8N4RnKE-OF4AID06h8J5w8H31ySZ5Z20X9guOSOuaLqYu3P_WkiIiDM4eUu5s6UrUG4LLAdD14yvbkFWEL1yivD8lXEX8BbX2CKVZfunXkDAR5w16WQcSPJEt65dWeAUEtQSM/s640/sony-contacts.JPG" width="640" /></a></div>
<br />
<div>
<br /></div>
<div>
Все эти контакты присутствуют в общем списке контактов, а на вкладке "Группы" они объединены в отдельную группу:<br />
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgntz0poZo8h-KuaBivbrva_b-txdANXzsNt77QTO8AXa8JvtTYrkLT9XFGST8sKUzUVRVpuChFObts5RJGdVTvRxJCcCMOjIpCLB4sP9bchAcQLqD49izYOacXtB7xsiWTd0JbmS-QCRrO/s1600/sony-contacts1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgntz0poZo8h-KuaBivbrva_b-txdANXzsNt77QTO8AXa8JvtTYrkLT9XFGST8sKUzUVRVpuChFObts5RJGdVTvRxJCcCMOjIpCLB4sP9bchAcQLqD49izYOacXtB7xsiWTd0JbmS-QCRrO/s400/sony-contacts1.jpg" width="225" /></a></div>
<div>
<br />
<div>
<br /></div>
<div>
Дабы не засорять телефон ненужной информацией пришлось искать метод как удалить эти контакты. Поиск в интернете выдает некоторые советы, порой весьма странные. </div>
<div>
<br /></div>
<h4 style="text-align: left;">
Совет 1. Удалить ненужную группу контактов</h4>
<div>
Это был самый простой совет. На вкладке "Группы" это сделать можно, но это не приведет к нужному результату, т.к. удалится только группа, а сами контакты, входящие в эту группу, останутся в телефонной книге.</div>
<div>
<br /></div>
<h4 style="text-align: left;">
Совет 2. Удалить приложение скайпа, а потом удалить ненужные контакты</h4>
<div>
Метод странный если вам все-таки нужен скайп в телефоне. Но тем не менее в качестве эксперимента я попробовала и этот метод. Результат меня тоже не устроил. Во-первых, для удаления всех контактов нет никакой групповой команды, т.е. придется удалять каждый контакт по отдельности. А, во-вторых, оказалось, что в телефоне Sony Xperia Z3 Compact в принципе отсутствует возможность удаления этих контактов. При попытке удалить контакт скайпа телефон мне сообщил что не может это сделать:</div>
</div>
</div>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbFNqO0fjSj9-umvsun8-TqrobAsF4WSlzIV4871oyR-GsZK6VWDHau0Nf9sBRzpyx9ckQpL2Uwoy0FPlxkoRncaBX5Ec28ikAWCytrYDaUVmYkA1MgUgAuct3HlgRgLCdErj3fvY-WbqV/s1600/sony-contacts2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbFNqO0fjSj9-umvsun8-TqrobAsF4WSlzIV4871oyR-GsZK6VWDHau0Nf9sBRzpyx9ckQpL2Uwoy0FPlxkoRncaBX5Ec28ikAWCytrYDaUVmYkA1MgUgAuct3HlgRgLCdErj3fvY-WbqV/s320/sony-contacts2.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRiPH-jmYbzcji1dAp3QdtpdJIyn8-bM_uiO62CvkxdrnQcUXmKTTcP6ESVH4rHQsJgbBx1eOcib7ubbE7jYJgztClcuJsdOyX4h9YMz1faJIiNUDEsHetucZvwGXG6FN7AAsk6dWJq4hs/s1600/sony-contacts3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRiPH-jmYbzcji1dAp3QdtpdJIyn8-bM_uiO62CvkxdrnQcUXmKTTcP6ESVH4rHQsJgbBx1eOcib7ubbE7jYJgztClcuJsdOyX4h9YMz1faJIiNUDEsHetucZvwGXG6FN7AAsk6dWJq4hs/s320/sony-contacts3.jpg" width="320" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<h4 style="text-align: left;">
Совет 3. Включить фильтр контактов в адресной книге</h4>
<div>
Суть этот метода достаточно простая - фильтровать контакты, отображаемые в телефоне. Для этого надо открыть адресную книгу, выбрать команду "Настройки - Фильтр", затем в группе "Отобразить контакты" надо просто отключить галочку напротив названия вашего скайп-аккаунта:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsy-X-DDcviTcLxCiNnpRlAZAnaBfFwSjFWsW8PCLyOHjUUxgaG056HzfAyROK6TwyzeIdsNEw_4Sy7njfLXMKcW7pgBoT7AEd0Ei6sih4buFauvAT7yNQZyTlzFvrSvFzPM9UX9oF0X1j/s1600/sony-contacts4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsy-X-DDcviTcLxCiNnpRlAZAnaBfFwSjFWsW8PCLyOHjUUxgaG056HzfAyROK6TwyzeIdsNEw_4Sy7njfLXMKcW7pgBoT7AEd0Ei6sih4buFauvAT7yNQZyTlzFvrSvFzPM9UX9oF0X1j/s400/sony-contacts4.jpg" width="225" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Этот метод работает, после этого нет контактов из скайпа, как и нет соответствующей группы:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGlqaZkhNavOD3clr60tOpnnbJSYtuGcj8WqWo1fiWDHqPrSIZoHjl6TBYxpG5pqA56Ig0EAEG3ElP3jBbGKqcfls2cbxijUy3aOh8MUUiP0U9qvGN9NPVSitFE0yZo-F0qwr_vy3pZXQO/s1600/sony-contacts5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGlqaZkhNavOD3clr60tOpnnbJSYtuGcj8WqWo1fiWDHqPrSIZoHjl6TBYxpG5pqA56Ig0EAEG3ElP3jBbGKqcfls2cbxijUy3aOh8MUUiP0U9qvGN9NPVSitFE0yZo-F0qwr_vy3pZXQO/s400/sony-contacts5.jpg" width="225" /></a></div>
<div>
<br /></div>
<div>
Но через какое-то время у меня почему-то эти контакты опять появились. То ли какой-то сброс телефона был, то ли еще что-то. В общем пришлось продолжить поиски решения проблемы.</div>
<div>
<br /></div>
<h4 style="text-align: left;">
Совет 4. Отключить отображение этих контактов в skype</h4>
<div>
Это уже мой личный совет, результат которого меня полностью устроил. Суть состоит в том, чтобы отключить копирование контактов из скайпа в записную книжку телефона. Для этого надо открыть приложение скайпа, зайти в настройки и там найти группу команд "Контакты". Здесь нам нужна команда "Копировать в записную книжку":</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzSwD2E8oj9MIcRhvQszmrALRbBH67lXYQGi33dAKA41v0_L2Grgh0qxmGgNdrUNxp0ybu8EnQIQ6PG1ohCdxOH-vjMkHsLrPydY_A60SDQtTX7UgDk2cbn6EZK7zkWuHCr0mcNHfKjiIs/s1600/sony-contacts6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzSwD2E8oj9MIcRhvQszmrALRbBH67lXYQGi33dAKA41v0_L2Grgh0qxmGgNdrUNxp0ybu8EnQIQ6PG1ohCdxOH-vjMkHsLrPydY_A60SDQtTX7UgDk2cbn6EZK7zkWuHCr0mcNHfKjiIs/s400/sony-contacts6.jpg" width="225" /></a></div>
<div>
<br /></div>
<div>
Эта опция содержит два возможных варианта - копировать или нет контакты в записную книжку. Выбираем "Не копировать контакты" и нажимаем ОК:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO9mWauLarpdIhhAXHnkcpoM-Xevr_YMXv-GhuwH1Vk0dPmH5XduHTN7lR2rG-vqg85s-bwGcYq_4NfjF9g8c25IsFop6lDnFbNNPBAUN1h7l_bfoTfK1lLlQOutbN2FKj5ADYMxGFeXNU/s1600/sony-contacts7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO9mWauLarpdIhhAXHnkcpoM-Xevr_YMXv-GhuwH1Vk0dPmH5XduHTN7lR2rG-vqg85s-bwGcYq_4NfjF9g8c25IsFop6lDnFbNNPBAUN1h7l_bfoTfK1lLlQOutbN2FKj5ADYMxGFeXNU/s400/sony-contacts7.jpg" width="225" /></a></div>
<div>
<br /></div>
<div>
Все, после этого контакты из скайпа, а также сама группа контактов скайпа, исчезнут из телефона.</div>
<div>
<br /></div>
<div>
<br /></div>
</div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com16tag:blogger.com,1999:blog-7834184402764284675.post-4040705956300988742016-04-21T11:33:00.002+03:002016-04-21T11:49:52.392+03:00Подключение fancybox к блогу<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9MxkWPyUJUMYZ92DTKnf6-V71W5mGVQvPhfZBJOqdBWAaELC_0bDcP2nSHTTzMt9pPxcrtrBygPJH1seiWaERYQ-6ImzZEQU-mn5pLbzscgYqHW_I6SmLc5zuH5qhimD6Tcj3ofqKPfwB/s1600/fancybox-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="427" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9MxkWPyUJUMYZ92DTKnf6-V71W5mGVQvPhfZBJOqdBWAaELC_0bDcP2nSHTTzMt9pPxcrtrBygPJH1seiWaERYQ-6ImzZEQU-mn5pLbzscgYqHW_I6SmLc5zuH5qhimD6Tcj3ofqKPfwB/s640/fancybox-blogger.png" width="640" /></a></div>
<div>
<br /></div>
В стандартных шаблонах для blogger по умолчанию все изображения открываются во всплывающем окне, при этом используется технология lightbox. Но, к сожалению, в новых шаблонах, созданных сторонними разработчиками, такая возможность отсутствует. Альтернативным вариантом может быть подключение библиотеки fancybox. Рассмотрим, как это сделать.<br />
<div>
<br /></div>
<div>
Для реализации задуманного пришлось перепробовать разные варианты, пока все не заработало как надо. </div>
<div>
<br /></div>
<div>
Итак, для подключения fancybox надо выполнить следующие шаги:</div>
<div>
<br /></div>
<div>
1. Открыть код шаблона командой Шаблон - Изменить HTML.</div>
<div>
<br /></div>
<div>
2. Проверить, подключен ли в шаблоне jQuery, в большинстве случаев современные шаблоны уже включают строку для подключения этой библиотеки:<br />
<br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"></script> </span><br />
<br /></div>
<div>
3. В конце шаблона перед тегом </body> добавить код:<br />
<br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"><script src="https://sites.google.com/site/fowziey/jquery.fancybox-1.3.4.js" type="text/javascript"></script></span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"><script type="text/javascript"> </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;">//<![CDATA[ </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;">$(document).ready(function() {</span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;">//build a selector that targets all links ending in an image extension</span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;">var thumbnails = 'a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]';</span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"><br /></span>
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;">//add "fancybox" class to those (this step could be skipped if you want) and group them under a same "rel" to enable previous/next buttons once in Fancybox</span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;">jQuery(thumbnails).addClass("fancybox").attr("rel","lightbox");</span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"><br /></span>
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;">//call fancybox</span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;">jQuery('.fancybox').fancybox();</span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;">});</span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;">//]]> </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"></script></span><br />
<br /></div>
<div>
4. Перед тегами <span class="Apple-style-span" style="background-color: white; color: #222222; font-size: 15px; line-height: 21px;">]]></span><span class="Apple-style-span" style="background-color: white; color: #222222; font-size: 15px; line-height: 21px;"><i></b:skin> </i></span>добавить код со стилями:<br />
<br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;">#fancybox-loading { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: fixed; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> top: 50%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: 50%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: 40px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: 40px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> margin-top: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> margin-left: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> cursor: pointer; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> overflow: hidden; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> z-index: 1104; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> display: none; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-loading div { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: absolute; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> top: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: 40px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: 480px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-overlay { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: absolute; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> top: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: 100%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> z-index: 1100; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> display: none; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-tmp { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> padding: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> margin: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> border: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> overflow: auto; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> display: none; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-wrap { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: absolute; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> top: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> padding: 20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> z-index: 1101; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> outline: none; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> display: none; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-outer { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: relative; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: 100%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: 100%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background: #fff; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-content { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> padding: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> outline: none; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: relative; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> overflow: hidden; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> z-index: 1102; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> border: 0px solid #fff; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-hide-sel-frame { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: absolute; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> top: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: 100%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: 100%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background: transparent; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> z-index: 1101; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-close { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: absolute; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> top: -15px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> right: -15px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: 30px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: 30px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background: transparent url('https://sites.google.com/site/fowziey/fancybox.png') -40px 0px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> cursor: pointer; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> z-index: 1103; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> display: none; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-error { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> color: #444; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> font: normal 12px/20px Arial; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> padding: 14px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> margin: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-img { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: 100%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: 100%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> padding: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> margin: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> border: none; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> outline: none; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> line-height: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> vertical-align: top; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-frame { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: 100%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: 100%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> border: none; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> display: block; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-left, #fancybox-right { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: absolute; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> bottom: 0px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: 100%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: 35%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> cursor: pointer; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> outline: none; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background: transparent url('https://sites.google.com/site/fowziey/fancy_blank.gif'); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> z-index: 1102; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> display: none; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-left { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: 0px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-right { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> right: 0px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-left-ico, #fancybox-right-ico { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: absolute; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> top: 50%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: -9999px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: 30px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: 30px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> margin-top: -15px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> cursor: pointer; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> z-index: 1102; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> display: block; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-left-ico { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-position: -40px -30px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-right-ico { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-position: -40px -60px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-left:hover, #fancybox-right:hover { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> visibility: visible; /* IE6 */ </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-left:hover span { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: 20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-right:hover span { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: auto; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> right: 20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-bg { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: absolute; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> padding: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> margin: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> border: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: 20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: 20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> z-index: 1001; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-bg-n { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> top: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: 100%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-image: url('https://sites.google.com/site/fowziey/fancybox-x.png'); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-bg-ne { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> top: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> right: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-position: -40px -162px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-bg-e { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> top: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> right: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: 100%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-image: url('https://sites.google.com/site/fowziey/fancybox-y.png'); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-position: -20px 0px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-bg-se { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> bottom: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> right: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-position: -40px -182px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-bg-s { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> bottom: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: 100%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-image: url('https://sites.google.com/site/fowziey/fancybox-x.png'); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-position: 0px -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-bg-sw { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> bottom: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-position: -40px -142px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-bg-w { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> top: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: 100%; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-image: url('https://sites.google.com/site/fowziey/fancybox-y.png'); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-bg-nw { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> top: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-position: -40px -122px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-title { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> font-family: Helvetica; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> font-size: 12px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> z-index: 1102; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-title-inside { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> padding-bottom: 10px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> text-align: center; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> color: #333; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background: #fff; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: relative; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-title-outside { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> padding-top: 10px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> color: #fff; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-title-over { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: absolute; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> bottom: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> color: #FFF; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> text-align: left; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-title-over { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> padding: 10px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background-image: url('https://sites.google.com/site/fowziey/fancy_title_over.png'); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> display: block; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-title-float { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: absolute; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> left: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> bottom: -20px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: 32px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-title-float-wrap { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> border: none; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> border-collapse: collapse; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> width: auto; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-title-float-wrap td { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> border: none; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> white-space: nowrap; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-title-float-left { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> padding: 0 0 0 15px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background: url('https://sites.google.com/site/fowziey/fancybox.png') -40px -90px no-repeat; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-title-float-main { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> color: #FFF; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> line-height: 29px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> font-weight: bold; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> padding: 0 0 3px 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background: url('https://sites.google.com/site/fowziey/fancybox-x.png') 0px -40px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-title-float-right { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> padding: 0 0 0 15px; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> background: url('https://sites.google.com/site/fowziey/fancybox.png') -55px -90px no-repeat; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> /* IE6 */ </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_close.png', sizingMethod='scale'); } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_nav_left.png', sizingMethod='scale'); } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_nav_right.png', sizingMethod='scale'); } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_over.png', sizingMethod='scale'); zoom: 1; } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_left.png', sizingMethod='scale'); } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_main.png', sizingMethod='scale'); } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_right.png', sizingMethod='scale'); } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> height: expression(this.parentNode.clientHeight "px"); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-loading.fancybox-ie6 { </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> position: absolute; margin-top: 0; </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> top: expression( (-20 (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) 'px'); </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> #fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_loading.png', sizingMethod='scale'); } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> /* IE6, IE7, IE8 */ </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie .fancybox-bg { background: transparent !important; } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_n.png', sizingMethod='scale'); } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_ne.png', sizingMethod='scale'); } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_e.png', sizingMethod='scale'); } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_se.png', sizingMethod='scale'); } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_s.png', sizingMethod='scale'); } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_sw.png', sizingMethod='scale'); } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_w.png', sizingMethod='scale'); } </span><br />
<span style="color: orange; font-family: "verdana" , sans-serif; font-size: x-small;"> .fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_nw.png', sizingMethod='scale'); }</span><br />
<div>
<br /></div>
<br /></div>
<div>
Это все изменения в шаблоне. Теперь можно создать пост с изображениями и проверить как открываются изображения.</div>
<div>
<br /></div>
<div>
Использованные материалы:<br />
http://www.stylifyyourblog.com/2011/05/adding-fancybox-to-blogger.html<br />
http://stackoverflow.com/questions/9760381/start-fancybox-on-all-anchor-tags-with-image-inside</div>
<div>
<br /></div>
<div>
<br /></div>
</div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-18506320787087497282016-04-20T14:03:00.003+03:002016-04-20T14:08:56.113+03:00Подключение шрифтов кириллицы в шаблонах blogger<div dir="ltr" style="text-align: left;" trbidi="on">
Статья о том, как в блоге исправить отображение кириллических шрифтов, если был использован шаблон, поддерживающий только шрифты с латиницей.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKF6l4IE0IFcDwSm-ueyoA6lko2XGcktSI1fkb1BIiAhLdlFb5o51j856ASQbgds39SdP8AOkc56p773vMb7ZuiiFlyGtDz4oYp85I9ukGhyIFkAg3tvNswTdtViL4VGCEbWYPjJ_Tw86J/s1600/cyr-font1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="274" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKF6l4IE0IFcDwSm-ueyoA6lko2XGcktSI1fkb1BIiAhLdlFb5o51j856ASQbgds39SdP8AOkc56p773vMb7ZuiiFlyGtDz4oYp85I9ukGhyIFkAg3tvNswTdtViL4VGCEbWYPjJ_Tw86J/s400/cyr-font1.JPG" width="400" /></a></div>
<br />
<br />
<br />
<a name='more'></a><br />
<br />
Зачастую шаблоны для blogger представлены на англоязычных сайтах, поэтому и шрифты в них подключены с латиницей. Если использовать такой шаблон в блоге, где информация представлена на русском языке, то шрифты отображаются не правильно. Вот пример, где первая часть строки написана шрифтом Times, а часть, выделенная желтым цветом - Lato:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggwrRtsKlMde-vsUYzNe8zvYktn92E95EUBonEC2axXD3aelrFfHO84A68TfeKtba32EgIgPmuncqUL4nRB_dRdKtlOnqQNdw76OahHqda3HZT_-IvBtO-v-zykg2p6d3C0NqlZryL7vHx/s1600/cyr-fonts2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="34" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggwrRtsKlMde-vsUYzNe8zvYktn92E95EUBonEC2axXD3aelrFfHO84A68TfeKtba32EgIgPmuncqUL4nRB_dRdKtlOnqQNdw76OahHqda3HZT_-IvBtO-v-zykg2p6d3C0NqlZryL7vHx/s400/cyr-fonts2.JPG" width="400" /></a></div>
<br />
Шрифт Lato вообще не поддерживает кириллицу и точного аналога среди Google Fonts ему найти не удалось, поэтому придется использовать другой шрифт.<br />
<br />
<br />
<h3 style="text-align: left;">
Подключение шрифта Open Sans</h3>
Самым подходящим для основного текста страниц я нахожу шрифт Open Sans. У этого шрифта в наборе есть как латиница, так кириллица, нужно просто правильно подключить этот шрифт.<br />
<br />
Для начала открываем HTML код шаблона (Шаблон - Изменить HTML), делаем поиск строки fonts.googleapis.com и смотрим, какие вообще шрифты используются в шаблоне (сейчас я делаю блог с использованием шаблона Voux Slider Blogger Template, который можно скачать отсюда: https://gooyaabitemplates.com/voux-slider-blogger-template/). В этом шаблоне используются разные шрифты:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1urLBwLh1qj_vOa8gexQo_r3K_qkEK_DlmPJ2yFhXa5kkjlbKC3B9r1NlrFkxbddNL3tCUVZqpJLr7MfIXc5pM7hNa2Yumngh4RyHATQxvBmBeApqLkrxFb1WbuZbrWtilu_ufgz_BVzS/s1600/cyr-font3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1urLBwLh1qj_vOa8gexQo_r3K_qkEK_DlmPJ2yFhXa5kkjlbKC3B9r1NlrFkxbddNL3tCUVZqpJLr7MfIXc5pM7hNa2Yumngh4RyHATQxvBmBeApqLkrxFb1WbuZbrWtilu_ufgz_BVzS/s640/cyr-font3.JPG" width="640" /></a></div>
<br />
Для начала заменим шрифт Lato на Open Sans, а потом похожие действия проделаем с остальными шрифтами. Возможно для заголовков получится найти другой интересный шрифт с поддержкой кириллицы.<br />
<br />
Итак, в коде HTML вместо последней строки подключения шрифта Lato пишем такой код:<br />
<span style="background-color: #cccccc;"><br /></span>
<span style="background-color: #cccccc; font-family: "verdana" , sans-serif;"><link href='http://fonts.googleapis.com/css?family=Open+Sans%3A300%2C400%2C700%2C400italic&amp;subset=latin,cyrillic' id='default_body_font-css' media='all' rel='stylesheet' type='text/css'/> </span><br />
<br />
После этого делаем замену "Lato" на "Sans Open" по всему шаблону:<br />
<br />
<span style="background-color: #cccccc; font-family: "verdana" , sans-serif;"> font-family:"Lato";</span><br />
<br />
меняем на<br />
<span style="font-family: "verdana" , sans-serif;"><br /></span>
<span style="background-color: #cccccc; font-family: "verdana" , sans-serif;"> font-family:"Open Sans";</span><br />
<br />
Если есть еще какие-то строки, относящиеся к шрифтам, то в них тоже делаем замену. Например, в этом шаблоне еще были строки наподобие этой:<br />
<br />
<span style="background-color: #cccccc; font-family: "verdana" , sans-serif;"><Variable name="body.font" description="Font" type="font" default="normal normal 14px Lato" value="normal normal 14px Lato"/></span><br />
<br />
Сохраняем шаблон, перегружаем сайт и смотрим результат. Теперь текст должен выглядеть нормально:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirB8EFU-49QRdBSD1i6CzVNHZNPj-VgDPfVrnV65fl1R9D3JNj3zIjnof3bp7qLDd4JnXKBFWWrGN_xuM3xu_UZr6r-Wos8-dG-uVHglfL6dOx5xl-RYtr7zQGTKqqEJbYesLDyrvKeDSd/s1600/cyr-font4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirB8EFU-49QRdBSD1i6CzVNHZNPj-VgDPfVrnV65fl1R9D3JNj3zIjnof3bp7qLDd4JnXKBFWWrGN_xuM3xu_UZr6r-Wos8-dG-uVHglfL6dOx5xl-RYtr7zQGTKqqEJbYesLDyrvKeDSd/s400/cyr-font4.JPG" width="400" /></a></div>
<br />
<br />
<h3 style="text-align: left;">
Подключение шрифта Ubuntu</h3>
Кроме основного текста проблемы есть еще в заголовках сообщений:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCJBKRrE9e3NXbnxZIf-CGrQHar-pHAsErs_zbNJLa6SFcEefqVe0uiCncZoqgcgVoC5PYTfhaAI8BzWY-jHhV_3bYUeuv_p2U-4rdIBfI-wnPwy5Zc3GDJdABq6ySKbljfs_ZN8edhoWv/s1600/cyr-font5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCJBKRrE9e3NXbnxZIf-CGrQHar-pHAsErs_zbNJLa6SFcEefqVe0uiCncZoqgcgVoC5PYTfhaAI8BzWY-jHhV_3bYUeuv_p2U-4rdIBfI-wnPwy5Zc3GDJdABq6ySKbljfs_ZN8edhoWv/s400/cyr-font5.JPG" width="400" /></a></div>
<br />
Здесь используется шрифт Montserrat, я вместо него хочу использовать Ubuntu. Для этого меняю строку:<br />
<span style="background-color: #cccccc; font-family: "verdana" , sans-serif;"><link href='http://fonts.googleapis.com/css?family=Montserrat%3A400%2C700&amp;ver=4.2.4' id='default_headings_font-css' media='all' rel='stylesheet' type='text/css'/></span><br />
<br />
на следующую:<br />
<span style="background-color: #cccccc; font-family: "verdana" , sans-serif;"><link href='http://fonts.googleapis.com/css?family=Ubuntu%3A400%2C700&amp;subset=latin,cyrillic' id='default_headings_font-css' media='all' rel='stylesheet' type='text/css'/></span><br />
<br />
Кроме этого соответственно делаю соответствующие замены по всему шаблону - вместо Montserrat везде должно быть Ubuntu.<br />
<br />
Кстати, у нового шрифта нужно проверить какие типы начертания доступны (bold 400, bold 700, italic). Подбор шрифтов и изучение всех характеристик удобно делать на странице Google Fonts: <a href="https://www.google.com/fonts/" target="_blank">https://www.google.com/fonts/</a><br />
<br />
Итак, сохраняем шаблон и проверяем результат:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinW7eYXrqKlPREowmMxV1Yb4vieDNB_uUXm_eVwftcUJ8wwEFUQbCvZmNrJImcoaYCzKIUNVnp9dQDqUDcjJ0TzMKWFLN14ktRVRUkzL4FEvIxpuTQX0NYLlseNY39N8MMyhx6AflX2dI_/s1600/cyr-font5b.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="46" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinW7eYXrqKlPREowmMxV1Yb4vieDNB_uUXm_eVwftcUJ8wwEFUQbCvZmNrJImcoaYCzKIUNVnp9dQDqUDcjJ0TzMKWFLN14ktRVRUkzL4FEvIxpuTQX0NYLlseNY39N8MMyhx6AflX2dI_/s400/cyr-font5b.JPG" width="400" /></a></div>
<br />
<br />
<h3 style="text-align: left;">
Замена шрифту Raleway</h3>
Еще одна проблема есть в заголовках виджетов:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOIxUe8dZz36WwbRAHKPgJNoyLZ-QIUMJf025pD9tEHsoe_IXo-VJIFkw9P2QfojSuASQYoVwglzZtv-XLPbIwXly_3jXWMIGLikPx66R5kcucQwKS0o3DyZb7QdSrijJUSfEdg7s69Z5u/s1600/cyr-font6.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOIxUe8dZz36WwbRAHKPgJNoyLZ-QIUMJf025pD9tEHsoe_IXo-VJIFkw9P2QfojSuASQYoVwglzZtv-XLPbIwXly_3jXWMIGLikPx66R5kcucQwKS0o3DyZb7QdSrijJUSfEdg7s69Z5u/s400/cyr-font6.JPG" width="400" /></a></div>
<br />
Здесь я попробую использовать шрифт Neucha вместо Raleway. В принципе можно использовать тоже Ubuntu или даже Open Sans, чем меньше разных шрифтов на сайте, тем лучше, но все-таки оставлю простор для творчества. Если останется третий шрифт, то потом при желании легче будет делать замену по всему шаблону.<br />
<br />
В коде смотрю как именно подключается этот шрифт:<br />
<span style="background-color: #cccccc; font-family: "verdana" , sans-serif;"><link href='http://fonts.googleapis.com/css?family=Bad+Script|Raleway:400,500,600,700,300|Lora:400' rel='stylesheet' type='text/css'/><span class="Apple-tab-span" style="white-space: pre;"> </span></span><br />
<br />
Меняю эту строку на такую:<br />
<span style="background-color: #cccccc; font-family: "verdana" , sans-serif;"><link href='http://fonts.googleapis.com/css?family=Neucha:400&amp;subset=latin,cyrillic' rel='stylesheet' type='text/css'/></span><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
А далее по всему шаблону делаю замену Raleway на Ubuntu:<br />
<span style="background-color: #cccccc; font-family: "verdana" , sans-serif;">font-family: Ubuntu;</span><br />
<br />
<br />
<br />
Кстати, в шаблоне был подключен еще один шрифт - Domine:<br />
<span style="background-color: #cccccc; font-family: "verdana" , sans-serif;"><link href='http://fonts.googleapis.com/css?family=Domine%3A400%2C700&amp;ver=4.2.4' id='default_para_font-css' media='all' rel='stylesheet' type='text/css'/></span><br />
но этот шрифт нигде не используется, поэтому эту строку просто удаляю.<br />
<br />
Все, сохраняем шаблон и смотрим результат. Теперь все выглядит прекрасно.<br />
<br /></div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com1tag:blogger.com,1999:blog-7834184402764284675.post-21238082722238912172016-04-09T23:01:00.001+03:002016-04-10T22:37:33.715+03:00Как добавить Facebook Open Graph мета теги к блогу<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvGDhKDlftB5iIZomSuEGGYSu8OcKt_IXp-b-l-ABWdU550UqgEb1JAfhW0iZtbritu8qMovV0BsMcEIHdeiBnF5Y-fMiC0bgFztlYm5iPipQ_hjZU95L7jxUBHdDmSYrf3b9oCitQoru/s1600/How-To-Add-Facebook-Open-Graph-To-Blogger-Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvGDhKDlftB5iIZomSuEGGYSu8OcKt_IXp-b-l-ABWdU550UqgEb1JAfhW0iZtbritu8qMovV0BsMcEIHdeiBnF5Y-fMiC0bgFztlYm5iPipQ_hjZU95L7jxUBHdDmSYrf3b9oCitQoru/s400/How-To-Add-Facebook-Open-Graph-To-Blogger-Blog.png" width="400" /></a></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-stretch: inherit; line-height: 28.8px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
При попытке поделиться постом блоггера в фейсбуке обычно не правильно отображается информация, а именно: не подгружается картинка и не добавляется описание сайта. Чтобы исправить это, необходимо добавить в исходный код страницы метатеги, необходимые для соц.сетей. Ниже описано как именно это сделать. </div>
<div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-stretch: inherit; line-height: 28.8px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<br /></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-stretch: inherit; line-height: 28.8px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
В оригинале статьи (<span style="background-color: transparent; text-align: left;">http://www.technohalf.com/2015/01/how-to-add-facebook-open-graph-to-blogger-blog.html) описаны некоторые особенности, а также то, где брать ID для вашего приложения. Я же здесь привожу не всю статью целиком, а только ее часть.</span></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-stretch: inherit; line-height: 28.8px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<br /></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-stretch: inherit; line-height: 28.8px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<br /></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-stretch: inherit; line-height: 28.8px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Для facebook существуют специальные open-graph мета теги, которые должны быть размещены на странице между тегами <span style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: 600; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><head> </head></span>. Эти теги позволяют задать заголовок, описание и изображение для сообщения, которым вы собираетесь поделиться в социальной сети.</div>
<span style="background-color: white; font-family: "open sans" , sans-serif; line-height: 28.8px;">Базовые </span><span style="background-color: white; border: 0px; box-sizing: border-box; font-family: "open sans" , sans-serif; font-stretch: inherit; font-weight: 600; line-height: 28.8px; margin: 0px; padding: 0px; vertical-align: baseline;">Open Graph</span><span style="background-color: white; font-family: "open sans" , sans-serif; line-height: 28.8px;"> теги включают:</span><br />
<ul style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-stretch: inherit; line-height: 1.4; list-style: inherit; margin: 0.5em 0px; padding: 0px 2.5em; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 0.25em; padding: 0px; text-align: justify; vertical-align: baseline;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: 600; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">og:title</span> = заголовок, например, "Как добавить Facebook Open Graph мета теги к блогу"</li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 0.25em; padding: 0px; text-align: left; vertical-align: baseline;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: 600; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">og:url</span> = URL сообщения, например, "http://it.nata.cv.ua/2016/04/how-to-add-facebook-open-graph-to.html"</li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 0.25em; padding: 0px; text-align: justify; vertical-align: baseline;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: 600; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">og:description</span> = описание сообщения</li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 0.25em; padding: 0px; text-align: justify; vertical-align: baseline;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: 600; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">og:image</span> = URL изображения размером минимум 200×200 пикселей</li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 0.25em; padding: 0px; text-align: justify; vertical-align: baseline;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: 600; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">og:type</span> = article (если не указывать, то по умолчанию будет “веб-сайт”)</li>
</ul>
<div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-stretch: inherit; line-height: 28.8px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Чтобы задать параметры мета тегов выполните следующие шаги:</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-stretch: inherit; line-height: 28.8px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
1. Откройте меню Blogger > Dashboard > Template > Edit HTML</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-stretch: inherit; line-height: 28.8px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
2. В редакторе в самом верху найдите следующий код, начинающийся с html xmlns:</div>
<pre class="language-markup" rel="HTML" style="background: rgb(7, 7, 7); border-radius: 0.3em; border: 0px; box-sizing: border-box; color: #4f4f4e; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-stretch: inherit; line-height: 28.8px; margin-bottom: 1em; margin-top: 1em; overflow: auto; padding: 0px; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px; vertical-align: baseline;"><code class="language-markup" style="border: 0px; box-sizing: border-box; color: #e2e2e2; direction: ltr; display: block; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 15px; tab-size: 4; vertical-align: baseline; word-spacing: normal;"><html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'></code></pre>
<div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-stretch: inherit; line-height: 28.8px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
3. Добавьте <span style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: 600; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">xmlns:og='http://ogp.me/ns#'</span> перед закрытием этого тега. Если нужных строк вы не нашли, то просто вставьте следующий код после <head>:</div>
<pre class="language-markup" rel="HTML" style="background: rgb(7, 7, 7); border-radius: 0.3em; border: 0px; box-sizing: border-box; color: #4f4f4e; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-stretch: inherit; line-height: 28.8px; margin-bottom: 1em; margin-top: 1em; overflow: auto; padding: 0px; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px; vertical-align: baseline;"><code class="language-markup" style="border: 0px; box-sizing: border-box; color: #e2e2e2; direction: ltr; display: block; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 15px; tab-size: 4; vertical-align: baseline; word-spacing: normal;"><html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
<span style="border: 0px; box-sizing: border-box; color: lime; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">xmlns:og='http://ogp.me/ns#'></span>
</code></pre>
<div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-stretch: inherit; line-height: 28.8px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
4. На предыдущем шаге вы добавили тег протокола фейсбука, который необходим для дальнейшего добавления Open Graph мета тегов в блог. Найдите тег <head> и добавьте после него следующий код:</div>
<pre class="language-markup" rel="HTML + XML" style="background: rgb(7, 7, 7); border-radius: 0.3em; border: 0px; box-sizing: border-box; color: #4f4f4e; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-stretch: inherit; line-height: 28.8px; margin-bottom: 1em; margin-top: 1em; overflow: auto; padding: 0px; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px; vertical-align: baseline;"><code class="language-markup" style="border: 0px; box-sizing: border-box; color: #e2e2e2; direction: ltr; display: block; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 15px; tab-size: 4; vertical-align: baseline; word-spacing: normal;"><meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta property='og:image:width' content='1200'/>
<meta property='og:image:height' content='630'/>
<b:else/>
<meta content='<span style="border: 0px; box-sizing: border-box; color: lime; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">logo-link</span>' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='og:description'/>
</b:if>
<meta content='<span style="border: 0px; box-sizing: border-box; color: lime; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">app_id</span>' property='fb:app_id'/>
<meta content='<span style="border: 0px; box-sizing: border-box; color: lime; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">fb_admins</span>' property='fb:admins'/></code></pre>
<span style="background-color: white; font-family: "open sans" , sans-serif; line-height: 28.8px; text-align: justify;">5. В коде вы должны заменить "logo-link" на путь к изображению, представляющему логотип вашего блога. Изображение должно быть размерами минимум 200 х 200 пикселей, максимальным сжатием 3:1, формата PNG, JPEG или GIF. Кроме этого необходимо в коде заменить параметры </span><span style="background-color: white; border: 0px; box-sizing: border-box; font-family: "open sans" , sans-serif; font-stretch: inherit; font-weight: 600; line-height: 28.8px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">app_id</span><span style="background-color: white; font-family: "open sans" , sans-serif; line-height: 28.8px; text-align: justify;"> и </span><span style="background-color: white; border: 0px; box-sizing: border-box; font-family: "open sans" , sans-serif; font-stretch: inherit; font-weight: 600; line-height: 28.8px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">fb_admins</span><span style="background-color: white; font-family: "open sans" , sans-serif; line-height: 28.8px; text-align: justify;"> на значения, которые предоставляет фейсбук при создании приложения. Как именно создавать в фейсбуке приложение описано в оригинале статьи.</span><br />
<br />
Некоторые мои замечания:<br />
- мета тег fb_admins я в код вообще не добавляла,<br />
- не добавляла также и теги для размера картинки (og:image:width и og:image:height)<br />
<br />
<br />
<br /></div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-52033797307444017432016-03-22T22:06:00.000+02:002016-03-22T23:15:12.680+02:00Шаблоны для интернет-магазина на blogger<div dir="ltr" style="text-align: left;" trbidi="on">
Вообще многие технологию blogger считают несерьезной, но, тем не менее, с помощью этой платформы вполне можно создать полноценный интернет-магазин, в котором будет присутствовать возможности добавления товаров в корзину и оплаты товара.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYWutIrOkwdV2nrKiqjU_PupqZQqYlQQ7bx91bVx_rUX-uCYIbYEVblRP2u3UUEmFZk2PDCN6PKWi4a_zDKu_q6JuJ4QOU3km4dTKVstOO7pvWJYRzy2xqZ_u9NGxp9JI4Q1aWFy3m2EtZ/s1600/shopia-free-ecommerce-theme.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYWutIrOkwdV2nrKiqjU_PupqZQqYlQQ7bx91bVx_rUX-uCYIbYEVblRP2u3UUEmFZk2PDCN6PKWi4a_zDKu_q6JuJ4QOU3km4dTKVstOO7pvWJYRzy2xqZ_u9NGxp9JI4Q1aWFy3m2EtZ/s1600/shopia-free-ecommerce-theme.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<a name='more'></a><br />
Правда для полноценной оплаты требуется подключать специальные модули, виджеты или другие сервисы. Например, для приема платежей придется помучаться с подключением посредников PayPal или каких-то других платежных систем. В интернете можно найти статьи с подробным описанием подключения и настройки таких систем, целью же этого поста является подборка подходящих шаблонов.<br />
<br />
Некоторые шаблоны уже были описаны в других постах, но здесь они продублированы, чтобы они были все рядом. Так же, если потом попадется еще какой-то интересный шаблон, то он будет добавлен в эту подборку.<br />
<br />
<h3 style="text-align: left;">
BetaCommerce</h3>
<div>
Этот шаблон предназначен для интернет-магазина. Здесь есть каталог товаров и весь необходимые функционал для работы магазина - возможность поместить товар в корзину, оформить и оплатить заказ.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwBk2v3y0QxKV9dZPTgadZK2JkkOZ2qAcVb5SzAsuokEG1fozuNpDUkzkvfDPYStlpBAcA32bT0PPs7VdHYhfebTWXnLQBUfHvd_P_NX9JX7kD3khizc1G56J2HjpZ8zVQ4QJSBAKkyKGj/s1600/BetaCommerce-Shopping-Blogger-Template.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwBk2v3y0QxKV9dZPTgadZK2JkkOZ2qAcVb5SzAsuokEG1fozuNpDUkzkvfDPYStlpBAcA32bT0PPs7VdHYhfebTWXnLQBUfHvd_P_NX9JX7kD3khizc1G56J2HjpZ8zVQ4QJSBAKkyKGj/s1600/BetaCommerce-Shopping-Blogger-Template.jpg" /></a> </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a class="demolink" href="http://betacommerce.blogspot.com/" rel="nofollow" style="background: rgb(244, 126, 126); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(231, 105, 105); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">demo</a><span style="background-color: #f6f6f6; color: #262829; font-family: "georgia" , "times new roman" , "times" , serif; font-size: 14px; line-height: 24px;"> </span><a class="moredemo" href="http://www.templateism.com/2014/10/betacommerce-shopping-blogger-template.html" rel="nofollow" style="background: rgb(74, 170, 165); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(58, 154, 149); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">more info</a></div>
<br />
<br />
<h3 style="text-align: left;">
Mega Shop</h3>
<div>
Этот респонсивный дизайн идельно подойдет для интернет-магазины одежды или похожей тематики. Среди возможностей шаблона есть просмотр каталога товаров, помещение товара в корзину, оплата заказа.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVNyg2wKqLcDIvajPdSGDqN9DBfTpWcnhFUzjvvryL9t9vm5-nf-BuhaSPjNmcU6rFE2kmy9VUXMPiOsxBHvuDpz3yW0hed7tUmjmQF2gvhytSu4haHVZdNLn9xAtjnTE0yo7b7xY3aQyN/s1600/mega-shop-ecommerce-responsive-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVNyg2wKqLcDIvajPdSGDqN9DBfTpWcnhFUzjvvryL9t9vm5-nf-BuhaSPjNmcU6rFE2kmy9VUXMPiOsxBHvuDpz3yW0hed7tUmjmQF2gvhytSu4haHVZdNLn9xAtjnTE0yo7b7xY3aQyN/s1600/mega-shop-ecommerce-responsive-blogger.png" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a class="demolink" href="http://megashoptheme.blogspot.com/" rel="nofollow" style="background: rgb(244, 126, 126); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(231, 105, 105); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">demo</a><span style="background-color: #f6f6f6; color: #262829; font-family: "georgia" , "times new roman" , "times" , serif; font-size: 14px; line-height: 24px;"> </span><a class="moredemo" href="http://www.templateism.com/2015/10/mega-shop-ecommerce-responsive-blogger-template.html" rel="nofollow" style="background: rgb(74, 170, 165); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(58, 154, 149); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">more info</a></div>
<br />
<br />
<br />
<h3 style="text-align: left;">
Заготовки шаблонов</h3>
Если вы обладаете достаточными навыками верстки, то можете попробовать свои силы в создании шаблона для нужной вам технологии, будь то Blogger, WordPress или любой другой. Вот пример одного такого шаблона:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwe8YDfFI84D-TAjF3jm0VqOyuVBFdwAmvp6LJwcAVbHxafSG35tAVGsGKfok4tP9_EAezeC0F1e70uH5Ky2a7wsnCgISRZRV7LYBX4MgZBVSuRXBAFJdk7bqkH0pJ1VbyqtAmAAozS08y/s1600/shopia-free-ecommerce-theme.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwe8YDfFI84D-TAjF3jm0VqOyuVBFdwAmvp6LJwcAVbHxafSG35tAVGsGKfok4tP9_EAezeC0F1e70uH5Ky2a7wsnCgISRZRV7LYBX4MgZBVSuRXBAFJdk7bqkH0pJ1VbyqtAmAAozS08y/s400/shopia-free-ecommerce-theme.png" width="400" /></a></div>
<br />
Скачать этот шаблон можно здесь: <a href="http://morepsd.ru/2015/07/shopia-free-ecommerce-theme/" target="_blank">http://morepsd.ru/2015/07/shopia-free-ecommerce-theme/</a> <br />
<br />
На том же сайте есть еще несколько psd-шаблонов: <a href="http://morepsd.ru/tag/%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD/" target="_blank">http://morepsd.ru/tag/интернет-магазин/</a><br />
<br />
<br />
<br /></div>
</div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com8tag:blogger.com,1999:blog-7834184402764284675.post-47038445533393635842016-02-09T22:04:00.002+02:002016-02-09T22:17:33.126+02:00Шаблон для туристического сайта<div dir="ltr" style="text-align: left;" trbidi="on">
Нашла очень красивый шаблон для туристического сайта, возьму на заметку, может быть когда-то смогу позволить себе купить такой дизайн. Да, именно купить. Этот дизайн платный, стоит 17$, но думаю оно того стоит.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqIsDl8XiP0YCWDWG6EmpPay8uKr9vzZ1nOO2k6tsY2hd86EcHegzy-MbNfi2y3VzVRicLb_4uo5BO14oC-vySVs7dFEYN6g5zo1sB2Svokobft4pMDm0kk-ZYyvvP4bXl4RD-cHXiUDXx/s1600/berg-travel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqIsDl8XiP0YCWDWG6EmpPay8uKr9vzZ1nOO2k6tsY2hd86EcHegzy-MbNfi2y3VzVRicLb_4uo5BO14oC-vySVs7dFEYN6g5zo1sB2Svokobft4pMDm0kk-ZYyvvP4bXl4RD-cHXiUDXx/s1600/berg-travel.jpg" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
На самом деле этот шаблон предназначен не только для туристического сайта. В нем есть более чем 45 вариантов применения: сайты для спорта, кулинарии, строительства, медицины и т.д. </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAX_4GGMBGH3TbugYJV8M3iHvye7ay6C1II8SV0um75y7DghY7yplpED2s_Qev88cHNH_enZXxnBxO2zWPji_VH3tk_Rh-ZcdpD5jRCxJ67tloaSxsG3Yb6epETovlwUDTK2rCBl6UQ2Kc/s1600/berg-template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAX_4GGMBGH3TbugYJV8M3iHvye7ay6C1II8SV0um75y7DghY7yplpED2s_Qev88cHNH_enZXxnBxO2zWPji_VH3tk_Rh-ZcdpD5jRCxJ67tloaSxsG3Yb6epETovlwUDTK2rCBl6UQ2Kc/s1600/berg-template.jpg" /></a></div>
<div>
<br /></div>
<div>
</div>
<div>
Внутри шаблона различные варианты HTML-файлов, секций, форм, иконок и т.д. Шаблон позволяет создать как многостраничный сайт, так и одностраничный. Вот так выглядит одностраничный туристический дизайн:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp3NjDypS-DM_ICdARJ-DxD57MWIVHk2RYABCkdrTSmrvsztGgd62XLMEsFNQnhFwgU8eztiIx1Ck4JpjZZzlt9qKcGNhZGehs2tLFpPpE72ZwMpC6NqFN7Uay0XkR93QiqpgQdrm8VSf1/s1600/berg-travel-template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp3NjDypS-DM_ICdARJ-DxD57MWIVHk2RYABCkdrTSmrvsztGgd62XLMEsFNQnhFwgU8eztiIx1Ck4JpjZZzlt9qKcGNhZGehs2tLFpPpE72ZwMpC6NqFN7Uay0XkR93QiqpgQdrm8VSf1/s1600/berg-travel-template.jpg" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Есть две версии для разных CMS: для WordPress и для Drupal.<br />
Посмотреть работу шаблона и скачать его можно по этим ссылкам:</div>
<div>
<br /></div>
<div style="text-align: center;">
<a class="btn-icon live-preview" href="http://themeforest.net/item/berg-multipurpose-one-page-multi-page-template/full_screen_preview/12060911" rel="nofollow" role="button" style="-webkit-font-smoothing: antialiased; background: gray; border-radius: 4px; border: none; box-sizing: border-box; color: white; cursor: pointer; display: inline-block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; margin: 0px 10px 0px 0px; padding: 5px 20px; text-decoration: none;" target="_blank">Demo</a><a class="btn-icon screenshots" data-view="screenshotGallery" href="http://themeforest.net/item/berg-multipurpose-one-page-multi-page-template/12060911" role="button" style="-webkit-font-smoothing: antialiased; background: gray; border-radius: 4px; border: none; box-sizing: border-box; color: white; cursor: pointer; display: inline-block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; margin: 0px 10px 0px 0px; padding: 5px 20px; text-decoration: none;" target="_blank">More info</a></div>
<div style="text-align: center;">
<br /></div>
<div>
<br /></div>
</div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com1tag:blogger.com,1999:blog-7834184402764284675.post-20070220296695171832016-02-06T20:07:00.000+02:002016-02-09T23:20:33.344+02:00Шаблоны для blogger<div dir="ltr" style="text-align: left;" trbidi="on">
Несколько симпатичных шаблонов для блогов, созданных на технологии blogger.com. Все они респонсивные и бесплатные, так что можно смело пробовать. Правда как обычно в них используются английские шрифты, так что если блог будет на русском, то придется исправлять шаблон.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJKV5_5ZRWMUsjoY4-vdK6UqxrhcKUXWuh_CbFLZmT1SC4Wux-4LVi7YETEtbVakvV8hSANt6L-pK-YvQ9bx7L5rVPdGh7syKMuHjmI6N-k4XH1eiv8TuAxBxm1I-FE62ZRCr065OE9Gd/s1600/comp-table.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJKV5_5ZRWMUsjoY4-vdK6UqxrhcKUXWuh_CbFLZmT1SC4Wux-4LVi7YETEtbVakvV8hSANt6L-pK-YvQ9bx7L5rVPdGh7syKMuHjmI6N-k4XH1eiv8TuAxBxm1I-FE62ZRCr065OE9Gd/s1600/comp-table.jpg" /></a></div>
<br />
<br />
<a name='more'></a><br />
<h3 style="text-align: left;">
Personal Mag</h3>
<div>
Шаблон, подходящий для персонального блога, галереи или сайта новостей.<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmGRbLZ3Qqo3FH0O7QoQ4A_Onfjo4FdOcz6hnkxb6tHg3xibEB7-aigcYGuqVqRaXyExfzG3yB-M0Uw2e0oQWwJYeiLUJSZeuN5GxrvnXsJNECec7337bvJlzHCa8lghw6dy2E363WRhmO/s1600/Personal-Mag-Blogger-Template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmGRbLZ3Qqo3FH0O7QoQ4A_Onfjo4FdOcz6hnkxb6tHg3xibEB7-aigcYGuqVqRaXyExfzG3yB-M0Uw2e0oQWwJYeiLUJSZeuN5GxrvnXsJNECec7337bvJlzHCa8lghw6dy2E363WRhmO/s1600/Personal-Mag-Blogger-Template.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a class="demolink" href="http://personalmagtheme.blogspot.com/" rel="nofollow" style="background: rgb(244, 126, 126); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(231, 105, 105); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">demo</a><span style="background-color: #f6f6f6; color: #262829; font-family: "georgia" , "times new roman" , "times" , serif; font-size: 14px; line-height: 24px;"> </span><a class="moredemo" href="http://www.templateism.com/2014/04/personal-mag-responsive-blogger-template.html" rel="nofollow" style="background: rgb(74, 170, 165); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(58, 154, 149); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">more info</a></div>
<div>
<br /></div>
<h3 style="text-align: left;">
<br /><br /> Red Hood</h3>
<div>
Шаблон, подходящий для персонального блога или сайта новостей. На главной странице предусмотрено много всяких отдельных блоков - реклама отдельных постов или новостей, избранные статьи и метки, цитаты, а также слайдер с логотипами партнеров или спонсоров.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4K9-vXTeaeL9IsATsadDYAYcR1hJ2dFEUKnX0IB_kh-VXCc9FmKYtSJZhSU0LzEoI22_j4R4ar8BxNOo8hEG0fibCu5__u5Suwa6s27E1w1k_6Ca3l9SAWK1B8GenWqXMKamApEs3a7qv/s1600/Red-Hood-Portfolio-Blogger-Template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4K9-vXTeaeL9IsATsadDYAYcR1hJ2dFEUKnX0IB_kh-VXCc9FmKYtSJZhSU0LzEoI22_j4R4ar8BxNOo8hEG0fibCu5__u5Suwa6s27E1w1k_6Ca3l9SAWK1B8GenWqXMKamApEs3a7qv/s1600/Red-Hood-Portfolio-Blogger-Template.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a class="demolink" href="http://rdesigntheme.blogspot.com/" rel="nofollow" style="background: rgb(244, 126, 126); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(231, 105, 105); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">demo</a><span style="background-color: #f6f6f6; color: #262829; font-family: "georgia" , "times new roman" , "times" , serif; font-size: 14px; line-height: 24px;"> </span><a class="moredemo" href="http://templateism.com/blogger-templates/RedHood-Portfolio-Framework.zip" rel="nofollow" style="background: #08c; border-color: rgb(227, 237, 244) rgb(227, 237, 244) #08c; border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">download</a></div>
<br />
<br />
<h3 style="text-align: left;">
Minimal</h3>
<div>
Этот шаблон тоже подходит для персонального блога, в нем сочетаются простота и элегантность дизайна, именно эти качества и присущи принципу минимализма.<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNo7lm1xLWkRAa9B1ozuiji8ZbCbXkXapX6SWIJLv7f9T7FnJHhaSRChyphenhyphenThOF3fzFK2xe4CfvcNJWZXrq66_XMjG_Q_enAXxkV4EwkKawa1iOiXi-XkUqqWjPpJqRy_UA9nE6O3SuFuTy6/s1600/Minimal-Free-Responsive-Blogger-Template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNo7lm1xLWkRAa9B1ozuiji8ZbCbXkXapX6SWIJLv7f9T7FnJHhaSRChyphenhyphenThOF3fzFK2xe4CfvcNJWZXrq66_XMjG_Q_enAXxkV4EwkKawa1iOiXi-XkUqqWjPpJqRy_UA9nE6O3SuFuTy6/s1600/Minimal-Free-Responsive-Blogger-Template.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a class="demolink" href="http://minimal-demo-themexpose.blogspot.com/" rel="nofollow" style="background: rgb(244, 126, 126); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(231, 105, 105); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">demo</a><span style="background-color: #f6f6f6; color: #262829; font-family: "georgia" , "times new roman" , "times" , serif; font-size: 14px; line-height: 24px;"> </span><a class="moredemo" href="http://www.themexpose.com/2015/03/minimal-clean-responve-blogger-template.html" rel="nofollow" style="background: rgb(74, 170, 165); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(58, 154, 149); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">more info</a></div>
<br />
<br />
<h3 style="text-align: left;">
25 pixel</h3>
<div>
А этот шаблон будет удобен для сайта-фотогалереи. Здесь на главную страницу вынесены только изображения, так что ничто пользователя не будет отвлекать от просмотра галереи.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj872yFdKE6sKR-rmGfYXqNZANCR5b7gzYMMzlKc29w8G5bg9dfWAt02k31X9AltW6vJQ2E2iP9siM-m8B4BHezTl565oJpVlG-zhrozek2Zf_HJPsvjlL2dakKyZoyyUTWCZlQ1w8mSbI4/s1600/25-pixel-Free-Photography-Blogger-Template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj872yFdKE6sKR-rmGfYXqNZANCR5b7gzYMMzlKc29w8G5bg9dfWAt02k31X9AltW6vJQ2E2iP9siM-m8B4BHezTl565oJpVlG-zhrozek2Zf_HJPsvjlL2dakKyZoyyUTWCZlQ1w8mSbI4/s1600/25-pixel-Free-Photography-Blogger-Template.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a class="demolink" href="http://25pixel-btemplates.blogspot.com/" rel="nofollow" style="background: rgb(244, 126, 126); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(231, 105, 105); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">demo</a><span style="background-color: #f6f6f6; color: #262829; font-family: "georgia" , "times new roman" , "times" , serif; font-size: 14px; line-height: 24px;"> </span><a class="moredemo" href="http://btemplates.com/download/4684/" rel="nofollow" style="background: rgb(74, 170, 165); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(58, 154, 149); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">download</a></div>
<br />
<br />
<br />
<h3 style="text-align: left;">
BetaCommerce</h3>
<div>
Этот шаблон предназначен для интернет-магазина. Здесь есть каталог товаров и весь необходимые функционал для работы магазина - возможность поместить товар в корзину, оформить и оплатить заказ.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwBk2v3y0QxKV9dZPTgadZK2JkkOZ2qAcVb5SzAsuokEG1fozuNpDUkzkvfDPYStlpBAcA32bT0PPs7VdHYhfebTWXnLQBUfHvd_P_NX9JX7kD3khizc1G56J2HjpZ8zVQ4QJSBAKkyKGj/s1600/BetaCommerce-Shopping-Blogger-Template.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwBk2v3y0QxKV9dZPTgadZK2JkkOZ2qAcVb5SzAsuokEG1fozuNpDUkzkvfDPYStlpBAcA32bT0PPs7VdHYhfebTWXnLQBUfHvd_P_NX9JX7kD3khizc1G56J2HjpZ8zVQ4QJSBAKkyKGj/s1600/BetaCommerce-Shopping-Blogger-Template.jpg" /></a> </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a class="demolink" href="http://betacommerce.blogspot.com/" rel="nofollow" style="background: rgb(244, 126, 126); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(231, 105, 105); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">demo</a><span style="background-color: #f6f6f6; color: #262829; font-family: "georgia" , "times new roman" , "times" , serif; font-size: 14px; line-height: 24px;"> </span><a class="moredemo" href="http://www.templateism.com/2014/10/betacommerce-shopping-blogger-template.html" rel="nofollow" style="background: rgb(74, 170, 165); border-color: rgb(227, 237, 244) rgb(227, 237, 244) rgb(58, 154, 149); border-radius: 4px; border-style: solid; border-width: 0px 0px 2px; color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; margin: 50px 0px 0px 5px; outline: 0px; padding: 10px 25px; text-decoration: none;" target="_blank">more info</a></div>
<br /></div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-10600948651303266972016-01-06T14:56:00.000+02:002016-01-06T14:58:11.084+02:00Необычный дизайн сайта<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDehyphenhyphenxnqnAHehPuLPQZDHW75cO0WFjHUBHUhDhDu9gyy963ToagWcauf17K07jNcBZCJyZlpApDeHoiBQivp_vGaEF-TRL_EdiFHrjkfH2UH5ebajabJR8sdZfuQg1K8IObKHS-OPkOt91/s1600/highway-one-roadtrip.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="430" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDehyphenhyphenxnqnAHehPuLPQZDHW75cO0WFjHUBHUhDhDu9gyy963ToagWcauf17K07jNcBZCJyZlpApDeHoiBQivp_vGaEF-TRL_EdiFHrjkfH2UH5ebajabJR8sdZfuQg1K8IObKHS-OPkOt91/s640/highway-one-roadtrip.JPG" width="640" /></a></div>
<br />
В свою копилку интересных ссылок хочется положить один сайт - <a href="http://www.exsus.com/highway-one-roadtrip" target="_blank">http://www.exsus.com/highway-one-roadtrip</a>. На сайте используется очень необычный дизайн в сочетании с анимацией, поэтому сайт и запоминается.<br />
<div>
<br /></div>
<div>
Это микросайт, разработанный ньюкаслским агентством «Shout Digital» для туристического агентства «Exsus» (компания специализируется на дорогом отдыхе и организации медовых месяцев).<br />
<br />
За рулем классического «Кадиллак Эльдорадо» 1959 года выпуска (Cadillac Eldorado), вы посетите все знаменитые места калифорнийского побережья. На первый взгляд, все эффекты кажутся простыми, но как только вы начнете скроллинг, перед вами откроется истинная магия.<br />
<br />
На моем планшете все жутко тормозит, но это наверное единственный сайт, который я просмотрела до конца :)<br />
<br /></div>
</div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-53027448116077262482015-12-25T00:13:00.000+02:002015-12-25T00:13:07.410+02:00Интернет-магазин на etsy<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnA3yDmihjUhyphenhyphene2KWE6WJkr4wAiS7W4ERjdGJHviLefuIveRIayuandrWDKb1D2Uu5GB9lY2EbdItfrZqI5H5H0egVru_Ah31ItX2JXwLNCJoGZ6hBAPbx0k7ItazOFUJ_ViocrlRN3dWF/s1600/etsy-home.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnA3yDmihjUhyphenhyphene2KWE6WJkr4wAiS7W4ERjdGJHviLefuIveRIayuandrWDKb1D2Uu5GB9lY2EbdItfrZqI5H5H0egVru_Ah31ItX2JXwLNCJoGZ6hBAPbx0k7ItazOFUJ_ViocrlRN3dWF/s400/etsy-home.JPG" width="400" /></a></div>
Etsy - это международная платформа для создания интернет-магазинов, и даже более того, здесь есть еще много всяких сопутствующих сервисов - блоги, мастер-классы, группы пользователей и прочее.<br />
<br />
<br />
<a name='more'></a>В основном здесь размещают свои товары англоязычные пользователи. Для русскоязычных пользователей есть "ярмарка местеров", здесь все описания товаров представлены на русском языке. На etsy тоже можно создать сайт на русском, но все-таки наиболее распространенный язык английский.<br />
<br />
Создать свой магазин легко. И в интернете есть много разных пошаговых описаний. Не буду повторяться, а напишу, что вот здесь есть подробная инструкция: <a href="http://www.happinesswithinyou.com/etsy-magazin-kak-otkryt-na-chto-obratit-vnimanie/" target="_blank">http://www.happinesswithinyou.com/etsy-magazin-kak-otkryt-na-chto-obratit-vnimanie/</a><br />
<br />
Если вы просто заходите на etsy.com и регистрируетесь, то за каждый размещенный товар придется платить по 0.2$. Но есть возможность пройти регистрацию с испльзованием чей-то реферальной ссылки и получить возможность бесплатно разместить 40 товаров. И это очень хорошая возможность. При этом еще вы сделаете полезность тому человеку, чью ссылку вы используете, он тоже получит возможность бесплатно разместить 40 товаров. <br />
<br />
Если вдруг захотите получить такой бонус, то можете воспользоваться моей ссылочкой: <br />
<div class="invite-link" style="text-align: center;">
<h3>
<span style="font-size: small;"><a href="http://etsy.me/1MxO3Gl" target="_blank">http://etsy.me/1MxO3Gl</a></span></h3>
</div>
<div class="invite-link">
</div>
<div class="invite-link">
После создания магазина необходимо сделать минимальные настройки - задать язык для магазина, указать способы оплаты, подключить возможность получать деньги за проданный товар (например, подключить PayPal, правда на Украине нет возможность принимать оплату на аккаунт PayPal, поэтому придется воспользоваться сайтом-посредником). Ну и еще желательно сделать некоторые настройки магазина - установить логотип, описать условия доставки товара и всякую другую информацию. В итоге вроде бы магазин создать просто, но, с другой стороны, вот эти все мелкие настройки займут какое-то ваше время.</div>
<div class="invite-link">
<br /></div>
<div class="invite-link">
Могу сказать что я еще не до конца со всеми штуками там разобралась, да и дальше магазином надо заниматься, рекламировать его, продвигать. В итоге может уйти больше времени, чем сделать какую-то поделку своими руками. Но я все же надеюсь потихоньку им заниматься</div>
<div class="invite-link">
</div>
<div class="invite-link">
В общем на данный момент магазин создан, и вот его адрес: </div>
<div class="invite-link">
<a href="https://www.etsy.com/shop/KinataCreative" target="_blank">https://www.etsy.com/shop/KinataCreative</a></div>
<div class="invite-link">
. </div>
<div class="invite-link">
</div>
</div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-21239145216538550812015-12-15T01:19:00.000+02:002018-05-19T00:32:21.197+03:00Многоязычный блог<div dir="ltr" style="text-align: left;" trbidi="on">
Так уж сложилось, что в blogger нет поддержки нескольких языков. В других cms есть, а здесь разработчики почему-то посчитали, что пользователям не нужно делать блог одновременно на разных языках. Это, безусловно, очень плохо, и пользователям приходится искать обходные пути.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9EqfReL332l3DhH1rgVFuQorbK40NdbtNqv3SlAxiZnTsPNuHKTiyT6d-t4xcbBhlSjXXTtT3n776Zyya1uwkrwM-8fCFaACUQAbvCLXhJmb2THPPYuB8Tm7t_h7UZILzUqwljAZWILE0/s1600/welcome-word-in-different-languages.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9EqfReL332l3DhH1rgVFuQorbK40NdbtNqv3SlAxiZnTsPNuHKTiyT6d-t4xcbBhlSjXXTtT3n776Zyya1uwkrwM-8fCFaACUQAbvCLXhJmb2THPPYuB8Tm7t_h7UZILzUqwljAZWILE0/s400/welcome-word-in-different-languages.jpg" width="400" /></a></div>
<br />
<a name='more'></a><br />
Есть несколько способов сделать блог на нескольких языках:<br />
<ol style="text-align: left;">
<li>Вести одновременно два блога, в каждом подготавливать статьи на нужном языке. С одной стороны это хорошо, потому, что каждый блог будет однозначно иметь правильные настройки (отображение даты, меню и заголовки). Но, с другой стороны, этот вариант означает двойную работу, ведь надо одновременно вести два блога. К каждому блогу можно подвлючить отдельное доменное имя (с приставкой en или ru).</li>
<li>Изменить шаблон блога так, чтобы можно было писать текст статей на друх языках. Этот вариант удобней с точки зрения общего управления блога (вам придется вести только один блог), но переключение языков будет работать только на текст статьи, а общие настройки блога, заголовки и ключевые слова останутся на двух языках.</li>
</ol>
<br />
Какой вариант выбрать - зависит от потребностей. В любом случае придется чем-то пожертвовать. Да и решения эти никак не назовешь изящными, просто blogger уж слишком простая штука. Остановимся подробнее на втором варианте.<br />
<br />
<h3 style="text-align: left;">
Создание постов на двух языках</h3>
На одном англоязычном ресурсе была найдена подробная инструкция с примером поддержки двух языков - итальянского и английского: <a href="http://polytimenerd.blogspot.com/2012/06/multilanguage-posts-in-your-blog.html%C2%A0" target="_blank">http://polytimenerd.blogspot.com/2012/06/multilanguage-posts-in-your-blog.html </a><br />
<br />
В моем случае мне нужно два языка - английский и русский, все основные надписи, даты и заголовки я оставлю на английском.<br />
<br />
1. В настройках сайта проверяем чтобы был включен по умолчанию английский язык.<br />
<br />
2. Открываем меню "Дизайн", где-то вверху добавляем гаджет HTML/JavaScript с таким кодом:<br />
<br />
<span style="font-family: "courier new" , "courier" , monospace;"><script language="Javascript"></span><br />
<span style="font-family: "courier new" , "courier" , monospace;">function getElementsByClass(searchClass,node,tag) {</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> var classElements = new Array();</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> if ( node == null )</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> node = document;</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> if ( tag == null )</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> tag = '*';</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> var els = node.getElementsByTagName(tag);</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> var elsLen = els.length;</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> for (i = 0, j = 0; i < elsLen; i++) {</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> if ( pattern.test(els[i].className) ) {</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> classElements[j] = els[i];</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> j++;</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> }</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> }</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> return classElements;</span><br />
<span style="font-family: "courier new" , "courier" , monospace;">}</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><br /></span>
<span style="font-family: "courier new" , "courier" , monospace;">function show_en() {</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> var ru = getElementsByClass('lang:russian', null, null);</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> var en = getElementsByClass('lang:english', null, null);</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><br /></span>
<span style="font-family: "courier new" , "courier" , monospace;"> for(i = 0; i < ru.length; i++) {</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> ru[i].style.display = 'none';</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> }</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><br /></span>
<span style="font-family: "courier new" , "courier" , monospace;"> for(i = 0; i < en.length; i++) {</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> en[i].style.display = 'block';</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> }</span><br />
<span style="font-family: "courier new" , "courier" , monospace;">}</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><br /></span>
<span style="font-family: "courier new" , "courier" , monospace;">function show_ru() {</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> var ru = getElementsByClass('lang:russian', null, null);</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> var en = getElementsByClass('lang:english', null, null);</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><br /></span>
<span style="font-family: "courier new" , "courier" , monospace;"> for(i = 0; i < ru.length; i++) {</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> ru[i].style.display = 'block';</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> }</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><br /></span>
<span style="font-family: "courier new" , "courier" , monospace;"> for(i = 0; i < en.length; i++) {</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> en[i].style.display = 'none';</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> }</span><br />
<span style="font-family: "courier new" , "courier" , monospace;">}</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"></script> </span><br />
<br />
3. В том месте, где должен быть размещен переключатель языков, вставляем еще один гаджет HTML/JavaScript с таким кодом:<br />
<br />
<span style="font-family: "courier new" , "courier" , monospace;">Show post in language:<br /><br /><a href="#" onclick="show_en();">English</a><br /><a href="#" onclick="show_ru();">Русский</a></span><br />
<br />
4. Открываем меню "Тема", нажимаем кнопку "Изменить HTML" и к тег <body> изменям так, чтобы здесь была команда для выбора по умолчанию английского языка:<br />
<br />
<span style="font-family: "courier new" , "courier" , monospace;"><body onload='show_en();'></span><br />
<br />
5. Когда создаем новый пост, то первым делом переключаемся в режим HTML и вставляем такой шаблон сообщения:<br />
<br />
<span style="font-family: "courier new" , "courier" , monospace;"><div class="lang:english"><br />English content<br /></div><br /><div class="lang:russian"><br />Russian content<br /></div></span><br />
<br />
После этого переключаемся из HTML режима обратно в редактор и вместо фраз "English content" и "Russian content" вставляем текст сообщения на соответствующем языке.<br />
<br />
Что из всего этого у меня получилось можно посмотреть на этом блоге: <a href="http://creative.nata.cv.ua/" target="_blank">http://creative.nata.cv.ua/</a><br />
<br />
<br />
<h3 style="text-align: left;">
Другие решения</h3>
Интересный вариант был предложен тут <a href="http://www.cemspot.com/2013/01/how-do-you-set-blogger-to-work.html" target="_blank">http://www.cemspot.com/2013/01/how-do-you-set-blogger-to-work.html</a><br />
<br />
В этом случае речь идет о переводе на разные языки меню, при этом меню являются ссылками на поиск по определенным меткам. Например, ссылка меток с турецким языком будет выглядеть так: <span style="background-color: white; color: #555555; font-family: "arial" , "helvetica" , sans-serif; font-size: 12px; line-height: 20px;"><li><a href='/search/label/TR'>Türkçe</a></li></span><br />
<br />
<br /></div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com6tag:blogger.com,1999:blog-7834184402764284675.post-25259737252660448232015-12-14T15:08:00.001+02:002015-12-14T15:08:59.664+02:00Создание 3D вращения предметов<div dir="ltr" style="text-align: left;" trbidi="on">
В интернет-магазинах, продающих какой-то товар, временами можно встретить демонстрацию товара в 3D, т.е. с возможностью покрутить мышкой изображение и рассмотреть предмет с разных сторон.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://photo-monster.ru/content/lessons/1949/6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://photo-monster.ru/content/lessons/1949/6.jpg" height="440" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<a name='more'></a><br />
<br />
Это интересный метод демонстрации товара, ведь можно рассмотреть его со всех сторон, и соответственно составить более правильное представление о товаре. Но вот как именно делаются такие вещи - это вопрос.<br />
<br />
Я когда-то пробовала делать 3D-панорамы из фотографий своих путешествий, правда принцип фотографирования здесь несколько другой. Если при съемке предмета вы фотографируете предмет с разных сторон, то при съемке панорамы вы стоите в центре и делаете серию фотографий вокрег себя. Но дальнейшая обработка фотографий очень похожая - все фотографии нужно отредактировать на предмет яркости и цветопередачи, сделать кадрирование.<br />
<br />
Вот ссылки мои примеры:<br />
<br />
Панорама Праги (вид с Петршинской башни)<br />
<a href="http://nata.cv.ua/portfolio/pan360/praga.htm" target="_blank">http://nata.cv.ua/portfolio/pan360/praga.htm</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzX7JByrb67Kq-usSlR_C71bRZT-7v4R-2XrA_iorjCaSa277tqCE7XFoQTd92eg-WqEZSj8a4YVNMGk-jjbPLt1hjsP9suLBaiFKJP9GWQQv1q-nkaCZom_H_ifnE7eQgZLtbOC18Q9My/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2015-12-14+14.52.36.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="420" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzX7JByrb67Kq-usSlR_C71bRZT-7v4R-2XrA_iorjCaSa277tqCE7XFoQTd92eg-WqEZSj8a4YVNMGk-jjbPLt1hjsP9suLBaiFKJP9GWQQv1q-nkaCZom_H_ifnE7eQgZLtbOC18Q9My/s640/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2015-12-14+14.52.36.png" width="640" /></a></div>
<br />
<br />
Центр Праги<br />
<a href="http://nata.cv.ua/portfolio/pan360/praga-center.htm" target="_blank">http://nata.cv.ua/portfolio/pan360/praga-center.htm</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtEQTzY9EHGUPOZUhYDLDsOtWi_yNtQrmxia3dbhUrsoIyRR42K-Qme89TkeUL9WhwcL_HVvd0CJBzqW3OyiOPl19a1YnBlPwuRiQJuhh4JqxNv2_l_KU1Qj6btUH_A6opzNhYtK7YYaBA/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2015-12-14+15.01.01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="420" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtEQTzY9EHGUPOZUhYDLDsOtWi_yNtQrmxia3dbhUrsoIyRR42K-Qme89TkeUL9WhwcL_HVvd0CJBzqW3OyiOPl19a1YnBlPwuRiQJuhh4JqxNv2_l_KU1Qj6btUH_A6opzNhYtK7YYaBA/s640/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2015-12-14+15.01.01.png" width="640" /></a></div>
<br />
Греция, Агиа-Марина<br />
<a href="http://nata.cv.ua/portfolio/pan360/agmarina.htm" target="_blank">http://nata.cv.ua/portfolio/pan360/agmarina.htm</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGKwiFjzTRfbKuNhUQHKt6Bc4MNfRrTlPB05FHyMtvPn2jYLicQ-NYE4c8tkba-ZB6_aAVUKT6D6RDYkVaW6LF0xmy1zJEm5B6tH42iISV8Czb69axPoa3ioGMykZ6p9nT3ndukso4vO9g/s1600/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2015-12-14+15.03.00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="420" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGKwiFjzTRfbKuNhUQHKt6Bc4MNfRrTlPB05FHyMtvPn2jYLicQ-NYE4c8tkba-ZB6_aAVUKT6D6RDYkVaW6LF0xmy1zJEm5B6tH42iISV8Czb69axPoa3ioGMykZ6p9nT3ndukso4vO9g/s640/%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582+2015-12-14+15.03.00.png" width="640" /></a></div>
<br />
<br />
Конечно мои панорамы в итоге получились не самого лучшего качества, но это не важно, потому что целью было попробовать. Да и программа, которую я использовала, делала итоговый файл в флеш-формате, что для меня всегда было недостатком. Нет, конечно флеш во многом полезен и привлекателен, но постоянные падения плагинов в браузере и отсутствие поддержки флеш-технологии на многих планшетах позволяют задуматься о других средствах.<br />
<br />
И вот совсем недавно я нашла интересный урок как же можно сделать 3D-вращение для выбранного предмета. В этом кратком уроке рассказано как именно делать съемку предмета, как и чем потом обработать фотографии, и главное - как потом соединить все фотографии чтобы в итоге получить 3D-демонстрацию.<br />
<br />
Очень хочется когда-то такое попробовать сделать. Урок находится по адресу: <a href="http://photo-monster.ru/lessons/read/sozdanie-3d-vrascheniya-predmetov.html" target="_blank">http://photo-monster.ru/lessons/read/sozdanie-3d-vrascheniya-predmetov.html</a><br />
<br />
<br /></div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-78321272289890320112015-12-13T20:29:00.001+02:002015-12-13T20:30:29.151+02:00Флешка-трансформер<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Yb1HjBkUwHykDNB_ixtyZFsauyoh78bg6VyMhKu5KUecqW8DLWnjnlCE5xN0EqtolWa2IFEd3R-tWYulrpB0wt4wZjTFSwizjg-V1IvJbtFJB4OJnCmVVLPstj3J-dBaRA9ty0MB1bGo/s1600/ravage_flash.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Yb1HjBkUwHykDNB_ixtyZFsauyoh78bg6VyMhKu5KUecqW8DLWnjnlCE5xN0EqtolWa2IFEd3R-tWYulrpB0wt4wZjTFSwizjg-V1IvJbtFJB4OJnCmVVLPstj3J-dBaRA9ty0MB1bGo/s1600/ravage_flash.jpg" /></a></div>
<br />
Вот такая флешка мне попалась в интернете, такая черная пантера-трансформер. Правда информация старая, как и размер флешки (всего-то 2 Гб), но пожалуй размер тут не так важен, когда можно просто сидеть играться с этим трансформером.<br />
<br />
<a name='more'></a><br /><br />
Источник: http://www.engadget.com/2009/05/19/transformers-usb-flash-drive-is-ready-to-ravage-your-files-brin/<br />
<br />
<br /></div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-76984051982703957892015-11-22T19:20:00.003+02:002015-11-22T19:20:53.049+02:00Галерея Fancybox со стилями Twitter Bootstrap<div dir="ltr" style="text-align: left;" trbidi="on">
На сайтах довольно часто используется галерея Fancybox. Это практичная галерея, "обросшая" различным полезным функционалом, и к тому же она кроссбраузерная.<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bayguzin.ru/assets/images/2015/04/image_twitter_boot.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://bayguzin.ru/assets/images/2015/04/image_twitter_boot.jpg" height="221" width="400" /></a></div>
<br />
<br />
Подробнее с библиотекой можно ознакомиться на сайте http://fancyapps.com/. Там же есть инструкция как галерею подключить на сайт. Однако, если у вас сайт сделан на Twitter Bootstrap, то придется кое-что переделывать.<br />
<br />
Но, как правило, если тебе в голову что-то приходит, то уже наверняка есть где-то готовое решение. И сейчас это не исключение. На одном сайте была найдена статья с описанием того, как к Fancybox подключить стили отTwitter Bootstrap. Статья находится здесь: <a href="http://bayguzin.ru/main/skriptyi/slajderyi/gallery-fancybox-bootstrap.html" target="_blank">http://bayguzin.ru/main/skriptyi/slajderyi/gallery-fancybox-bootstrap.html</a><br />
<br />
Галерею можно подключить в двух вариантах. Первый - классическая галерея. Выглядеть на странице будет так:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bayguzin.ru/assets/images/2015/04/imtwiboot1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://bayguzin.ru/assets/images/2015/04/imtwiboot1.jpg" height="165" width="320" /></a></div>
<br />
Второй вариант - галерея «Masonry», при которой картинки разного размера выравниваются относительно бутстраповской сетки:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bayguzin.ru/assets/images/2015/04/image_twitter_boot.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://bayguzin.ru/assets/images/2015/04/image_twitter_boot.jpg" height="177" width="320" /></a></div>
<br />
На сайте можно посмотреть демонстрацию работы таких вариантов галерей и скачать скрипты.<br />
<br />
<br /></div>
</div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-6883780615731028882015-10-30T15:13:00.000+02:002015-10-30T16:51:49.682+02:00Как за несколько часов создать лендинг страницу<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_cDhyphenhyphenSpLJElYVs5mO4_1o9YXW3L9i0J7M0CcbrBTqcuTx_xg2XWVyc19gMYc3cXmxoB5yiFk5ei2iv12LrKL4rac2NsbtPNgPm7xt9ZwbNpmHLqHws6zYo0XukND3zIjdaoUF64lu_0Si/s640/repetitor.PNG" width="640" /></div>
<br />
Допустим перед вами стоит задача создать прототип сайта для рекламы
каких-то услуг или товара. К таким страницам последнее время все чаще
применяют понятия лендинга, или лендинг страницы (от англ. landing
page).<br />
<br />
<a name='more'></a><br />
Если говорить простыми словами, то лендинг страница - это весь сайт на одной странице. Здесь располагается информация о компании, услугах, товарах, отзывы, контакты и т.п. Но в более широком понятии это не просто страница, а это целая наука,
ведь основная задача такой страницы привлечь клиента, а значит для
создания такой страницы нужно еще грамотно продумать идеологию. Т.е.
начинать надо с изучения целевой аудитории, продумывания какое общее
впечатление на посетителя должна производить такая страница, выбора
цветовой гаммы, структуры отдельных секций страницы. Но пока все это опустим и поговорим как именно создать такую страницу.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="488" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF41WfdOzNTySbVlbqN1-RDYEZSLbdiNmuchb6eEhFMpu12jG_CJ8mEx_pwVegpmjajvW0TaoBe16uNI68cjivdv0ByZT7kfxXmfNPUgYie8Eagz5l7fG64PtEPt28Ll5kCwOqeiK-SY70/s640/bootstrap-site-samples.PNG" width="640" /></div>
<br />
<br />
<br />
Вообще для создания любого сайта мне нравится Bootstrap фрейморк. Он включает в себя правила по разметке страницы, причем поддерживаются все мобильные устройства, содержит все необходимые стили в своем наборе для оформления заголовков, текстов, таблиц, форм, а также компоненты для быстрого создания меню и еще много всего. В общем, очень удобно и красиво. Ознакомиться с Bootstrap можно на официальной странице <a href="http://getbootstrap.com/" target="_blank">http://getbootstrap.com/</a>, там же и скачать необходимый набор файлов.<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="444" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnLhpOrhRV4qGv3oBBxUKM_r8LTBWZNsbDcs0Xa-VMdoAP94iQT_DKJbdURN8tnVUicatXdey4BSOdNY2uLA3S4eHOQolugYArOmNN9fN8H6Ls7q5Awnaa-9N4_O38WFjZk1G7dJz7opXf/s640/bootstrap-site.PNG" width="640" /></div>
<br />
<br />
Можно создавать страницу вручную с использованием обычного текстового редактора, например, Notepad++, но конечно гораздо удобнее использовать какой-то конструктор.<br />
<br />
Недавно я открыла для себя одну такую программу - Pingendo. Эта программа предназначена для создания прототипов сайтов, хотя, если постараться, то можно создать и целый сайт, состоящий из набора статических страниц. В ней есть минимальный набор инструментов для определения основных блоков на странице - меню, заголовок страницы, слайдер, блоки для расположения информации на странице шириной в нужное количество колонок, блог галереи, перечня сотрудников компании, а также футер, в котором есть ссылки на аккаунты в социальных сетях.<br />
<br />
Скачать программу можно с сайта <a href="http://pingendo.com/" target="_blank">http://pingendo.com/</a> Программа на английском языке и никакого руководства у них на сайте нет. Наверное считается, что программа настолько простая, что ей вообще не требуется никакого руководства. И действительно, интерфейс программы интуитивно понятен, за короткое время можно ознакомиться со всеми инструментами и сразу приступить к созданию прототипа своего сайта.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="398" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOXVP8VdcOXvtOXXjq46fG8GnkNtF9ElqBgxeozXVgebZ7Rl5DEcsrF8zTQkFe5Y3WOfz8EHeyFjZtAvfytjCMDAZJKvnOsgS1R-gKJMcmMTkPYPIrXFHriG0ZhKZTe_NJ0yoEgHhvjnNN/s640/pingendo-scr1.png" width="640" /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_sgVaeWtwGva-cLJJyyJV6JZQsE4ArWp_EdqfBRukAuwtFjCkFA4_F0hCnqq1GDogGT2iAcLvF6p9m9c-YMdNA5AoCpfCrwyiZrqCgt2H9r5J-X-isBL1ZBr7dT6qutRI18GMPE0yJQlf/s1600/pingendo-screen1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a></div>
Слева в программе находится панель с шаблонами для размещения на форме секций и отдельных компонентов, справа - панель для настройки свойств отдельных элементов. Можно задавать выравнивания для текста, выбирать цвет, управлять режимами отображения на разных устройствах и т.д. По центру расположен визуальный редактор, где сразу отображаются все изменения на странице, а внизу есть еще две вкладки для редактирования кода HTML и CSS, и эту область для удобства можно растянуть. Стили CSS здесь записываются с помощью языка стилей LESS, его можно исправлять, но также в конце можно дописать свои стили.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="398" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1b-Wrcn7ptcZ2vbdY_ZcuVZAY2xfA7TSc_mw6K4YV_C31p2gGqk1HM7H6GwQATSBulMdy1l-GAMuEIjo2GHIdGvdzCfg4OSlCJ3hnliCdF4vl6_PH006O54L912CJR-tg75RbA8IPmKHD/s640/pingendo-scr4.png" width="640" /></div>
<br />
Если вы не знакомы с Bootstrap, то эту программу можно использовать для обучения. Ведь при изменениях в окне конструктора, все изменения тут же отображаются в окне HTML. Код HTML можно исправлять и вручную, и тогда смотреть как изменится сама страница.<br />
<br />
При размещении на странице отдельных секций, таких как галерея, перечень сотрудников компании и т.д., в окне отображаться пустые блоги вместо картинок и какой-то заранее заготовленный текст, зачастую это текст "Lorem ipsum...".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="398" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfzuuE2DY8JRZTmDfddI13njJB0LCa7dbySmFK8X7czviUHsTVixmGLjd9aX4xSCV91AqWGqhT-gsMIOKFw21ZSEzcOrGrZ3S7oPEmeeAPBfEo5TcBrWEgjtIT3L5wxd1LenyHZO7eLh6K/s640/pingendo-scr2.png" width="640" /></div>
<br />
Чтобы представить страницу более наглядно, можно воспользоваться картинками, которые расположены на сервере программы и включены в программу. Если у вас еще нет подготовленных картинок для вашего сайта, то это действительно удобно.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="398" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw543bBLFifESboNhmtzvzXJE5_lr0VH24vylf2sE35h2bLp39gc5FkI4TG4TAr33Wckv2pdUMnc3UUSksxshyphenhyphen3q9eiAMN6pMnv388fYYPrCff0edzKcLqo1Mn5e65N67QH6ZpvHb2zsRa/s640/pingendo-scr5.png" width="640" /></div>
<br />
В программе можно выбрать цветовую гамму для сайта, но набор цветов здесь крайне ограничен, так что скорее всего придется редактировать CSS. Еще можно подобрать шрифты, а программе для этого предлагаются целые наборы, где подобраны некоторые шрифты для заголовка и основного текста. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="398" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8YBTH4oXT2qESJR8tlLvMmZRZcfnuhy2H-4Q3BHhNW6HGCa1I_x8_Labk03xR-cRUFYxq07I_d7axisJ8PgksvqsBuAFlH4kOiHrFrFPRI2ydQegwezAp_gqgbDt0M6GkrwhN3hF2qL1p/s640/pingendo-scr6.png" width="640" /></div>
<br />
Но тут нужно сделать оговорку, что все эти шрифты рассчитаны на
латиницу, поэтому когда вы будете добавлять текст на странице на русском
языке, то он будет отображаться обычным шрифтом, который содержит
кириллицу, например, шрифтом Times New Roman. Но знания HTML, CSS и
принципы подключения на сайт сторонних шрифтов помогут решить и эту
проблему.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="398" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNYpUZduVnY7VB-7my3VHVv0qMhFU0yaZfzQf1qJBi2N5-b0blvwtImk25Ff7JSHo_F5X17vcM9josXNWhl6qQW-Aju1XpuvlUr4bgHbunakO4Kjk6XnRkIBXhtEEEkobgjgMozouaLoUF/s640/pingendo-repetitor.PNG" width="640" /></div>
<br />
<br />
В целом мне программа очень понравилась. Она простая, удобная, и позволяет реализовать многие задумки. И как-то незаметно я ей увлеклась настолько, что у меня получился законченный продукт, т.е. это уже не просто прототип, а законченная страница с работающими ссылками.<br />
<br />
Посмотреть итоги моей работы с этой программой можно тут: <a href="http://nata.cv.ua/portfolio/repetitor/" target="_blank">http://nata.cv.ua/portfolio/repetitor/</a><br />
Можно посмотреть как оно выглядит на других устройствах - планшетах или мобильных телефонах.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhehV8n4PPvCTYPn8yA4EYlEXJD5asaZz7HANOeJhQ0Fu1sVQ0psRWENqWlGCBiI4kB5kXJMkvOeNAQ2CO8SN_3pVvAKZuikHkPJlVJLtJ8uxyMCnNWcVgH3ZQjcMRnepiUwhAp6H3w-F6k/s640/mobile.jpg" width="640" /></div>
<br />
<br />
<br />
Если же все-таки захочется ознакомиться с обучающими материалами, то их в интернете тоже можно найти, как на английском, так и на русском. Есть и видео уроки, например, вот одно видео на YouTube, в котором барышня в течении часа рассказывает и показывает возможности программы. Правда кроме самой программы присутствует еще и информация не по теме. В начале видео рассказывается о том, что такое landing page, это полезно посмотреть если вы еще не слышали что это за вид страниц. Далее информация про создание домена у конкретного провайдера и загрузка файлов на сервер - вот это как-то тут смотрится не в тему, ведь у каждого может быть свой домен. И потом барышню понесло по поводу важности файла favicon.ico, опять же не в тему. Конкретно по программе - в видео подробно рассказывается как задавать параметры страницы (title, description, шрифты), создавать меню с навигацией, как на страницу добавить блок отзывов, футер. Но, скажу честно, я это видео нашла уже после того, как создала себе сайт, так что смотреть ли его или разбираться самому - решать каждому. В любом случае ссылку на видео даю:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/BXwbQFjLrS0/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/BXwbQFjLrS0?feature=player_embedded" width="320"></iframe></div>
<br />
<br />
На этом пока все. Если вы знаете похожий инструмент, напишите мне, будет интересно попробовать что-то другое, хотя на данный момент меня и эта программа вполне устраивает.<br />
<br />
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
</o:OfficeDocumentSettings>
</xml><![endif]--><br />
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves/>
<w:TrackFormatting/>
<w:PunctuationKerning/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>RU</w:LidThemeOther>
<w:LidThemeAsian>X-NONE</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
<w:SplitPgBreakAndParaMark/>
<w:EnableOpenTypeKerning/>
<w:DontFlipMirrorIndents/>
<w:OverrideTableStyleHps/>
</w:Compatibility>
<m:mathPr>
<m:mathFont m:val="Cambria Math"/>
<m:brkBin m:val="before"/>
<m:brkBinSub m:val="--"/>
<m:smallFrac m:val="off"/>
<m:dispDef/>
<m:lMargin m:val="0"/>
<m:rMargin m:val="0"/>
<m:defJc m:val="centerGroup"/>
<m:wrapIndent m:val="1440"/>
<m:intLim m:val="subSup"/>
<m:naryLim m:val="undOvr"/>
</m:mathPr></w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="true"
DefSemiHidden="true" DefQFormat="false" DefPriority="99"
LatentStyleCount="267">
<w:LsdException Locked="false" Priority="0" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Normal"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="heading 1"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 2"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 3"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 4"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 5"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 6"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 7"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 8"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 9"/>
<w:LsdException Locked="false" Priority="39" Name="toc 1"/>
<w:LsdException Locked="false" Priority="39" Name="toc 2"/>
<w:LsdException Locked="false" Priority="39" Name="toc 3"/>
<w:LsdException Locked="false" Priority="39" Name="toc 4"/>
<w:LsdException Locked="false" Priority="39" Name="toc 5"/>
<w:LsdException Locked="false" Priority="39" Name="toc 6"/>
<w:LsdException Locked="false" Priority="39" Name="toc 7"/>
<w:LsdException Locked="false" Priority="39" Name="toc 8"/>
<w:LsdException Locked="false" Priority="39" Name="toc 9"/>
<w:LsdException Locked="false" Priority="35" QFormat="true" Name="caption"/>
<w:LsdException Locked="false" Priority="10" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Title"/>
<w:LsdException Locked="false" Priority="1" Name="Default Paragraph Font"/>
<w:LsdException Locked="false" Priority="11" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtitle"/>
<w:LsdException Locked="false" Priority="22" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Strong"/>
<w:LsdException Locked="false" Priority="20" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Emphasis"/>
<w:LsdException Locked="false" Priority="59" SemiHidden="false"
UnhideWhenUsed="false" Name="Table Grid"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Placeholder Text"/>
<w:LsdException Locked="false" Priority="1" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="No Spacing"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 1"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 1"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 1"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 1"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 1"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Revision"/>
<w:LsdException Locked="false" Priority="34" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="List Paragraph"/>
<w:LsdException Locked="false" Priority="29" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Quote"/>
<w:LsdException Locked="false" Priority="30" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Quote"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 1"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 1"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 1"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 1"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 1"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 1"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 1"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 2"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 2"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 2"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 2"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 2"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 2"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 2"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 2"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 2"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 2"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 2"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 3"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 3"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 3"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 3"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 3"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 3"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 3"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 3"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 3"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 3"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 3"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 3"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 3"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 4"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 4"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 4"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 4"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 4"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 4"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 4"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 4"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 4"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 4"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 4"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 4"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 4"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 4"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 5"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 5"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 5"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 5"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 5"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 5"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 5"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 5"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 5"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 5"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 5"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 5"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 5"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 5"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 6"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 6"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 6"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 6"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 6"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 6"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 6"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 6"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 6"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 6"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 6"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 6"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 6"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 6"/>
<w:LsdException Locked="false" Priority="19" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Emphasis"/>
<w:LsdException Locked="false" Priority="21" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Emphasis"/>
<w:LsdException Locked="false" Priority="31" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Reference"/>
<w:LsdException Locked="false" Priority="32" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Reference"/>
<w:LsdException Locked="false" Priority="33" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Book Title"/>
<w:LsdException Locked="false" Priority="37" Name="Bibliography"/>
<w:LsdException Locked="false" Priority="39" QFormat="true" Name="TOC Heading"/>
</w:LatentStyles>
</xml><![endif]--><!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Обычная таблица";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-fareast-language:EN-US;}
</style>
<![endif]--><span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt; line-height: 115%; mso-ansi-language: RU; mso-ascii-theme-font: minor-latin; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-latin; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">©</span> KiNata <br />
30.10.2015<br />
<br />
<br />
<br />
<br />
<br /></div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-18953298440338398152015-10-22T18:35:00.001+03:002015-10-22T19:54:24.548+03:00Типы сайтов<div dir="ltr" style="text-align: left;" trbidi="on">
При заполнении брифа на создание сайта есть отдельный пункт - предполагаемый тип сайта. В сети Интернет уже существует множество сайтов, все они имеют различный вид, выполняют различные задачи. А какой же сайт нужен именно вам? Давайте попробуем разобраться какие типы сайтов бывают.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiwVk9ZdK88xfslU8MYjWakPsnk-xEyFamIyG-9MSUJKGPvrijRScW33Z8yZm3JYTUEoz959DeXZR5Yvz-YychDhyzD5CXncuM_mzhQaqWGzvHqCLWj-57gFBmdFZ2o8fLu85_UQq5xh5/s1600/tipy_saitov.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiwVk9ZdK88xfslU8MYjWakPsnk-xEyFamIyG-9MSUJKGPvrijRScW33Z8yZm3JYTUEoz959DeXZR5Yvz-YychDhyzD5CXncuM_mzhQaqWGzvHqCLWj-57gFBmdFZ2o8fLu85_UQq5xh5/s1600/tipy_saitov.jpg" /></a></div>
<br />
<br />
<a name='more'></a><br />
На данный момент нет единой системы классификации типов сайтов. Сайта можно разделять по доступности (открытые и закрытые), по физическому расположению (расположенные в сети Интернет или локальные), по технологическому исполнению (статические и динамические), по типам макетов (фиксированной ширины, резиновый или адаптивный макет). Кроме этого сайты также можно разделить по схеме предоставления информации, и именно такую классификацию мы и рассмотрим дальше.<br />
<br />
Каждая веб-студия может определять свои типы сайтов, но все-таки есть некоторые общепринятые названия.<br />
<br />
<br />
<h3 style="text-align: left;">
Сайт-визитка</h3>
Сайт-визитка - это такой себе справочник о фирме. Это может быть небольшой сайт, который используется для рекламы и продвижения отдельного товара или продукции фирмы в целом. Такой сайт содержит небольшое количество страниц (обычно от 1 до 10) и минимальное содержание, которое включает в себя основные сведения о компании, контактные данные, иногда прайс для скачивания.<br />
<br />
<h3 style="text-align: left;">
Корпоративный сайт</h3>
Такой сайт содержит полную информацию о компании, услугах или продукции, важных событиях компании. Он отличается от сайта-визитки полнотой представленной информации, а с точки зрения функционала он включает различные функциональные инструменты для работы с содержанием (контентом). Например, сайт может включать календарь событий, фотогалерею, блог, форум, систему поиска, иногда форму с возможностью заказа товара на сайте. Корпоративный сайт выполняет функции по привлечению клиентов и партнеров, повышения престижа и рейтинга компании.<br />
<br />
<h3 style="text-align: left;">
<span class="fontBold">Информационный сайт</span></h3>
<span class="fontBold">Информационный сайт</span> содержит достаточно большой объем информации. Такой сайт чем-то напоминает энциклопедию или специализированный журнал, он включает в себя множество различных
тематических разделов меньшего размера. <br />
<br />
<h3 style="text-align: left;">
Промо-сайт</h3>
Промо-сайт - это сайт, созданный специально для продвижения какого-либо продукта, услуги, мероприятия или основного сайта компании. Создание такого ресурса включает в себя создание стильного дизайна, индивидуальных систем навигации, подключение необходимых программных модулей, а структура такого сайта должна выполнять функцию рекламного проспекта или буклета, и привлекать внимание клиентов. На сайте размещается информация о компании, рода деятельности, продвигаемых услугах, контактные данные. Отдельно сообщается информация об акции, с указанием сроков и места проведения, условий участия, новостей и т.д. Промо-сайт обычно содержит небольшое количество страниц (до 10 страниц).<br />
<br />
<h3 style="text-align: left;">
Сайт-витрина</h3>
Бюджетным вариантом рекламы Вашей компании является сайт-витрина. Если Вы хотите продавать в Интернете один конкретный товар или группу товаров, то этот тип сайтов идеально подходит для Вас. На таких страницах находится вся информация, необходимая для того, чтобы клиент увидел, заинтересовался и купил данный товар, не отвлекаясь на новости и ссылки. Это структурированный каталог продукции Вашей компании. Но этот каталог организованный таким образом (фото, описание, цена), чтобы клиент сделал как можно меньше кликов, для того, чтобы найти нужный товар. Главное назначение сайта-витрины – продавать.<br />
<br />
<h3 style="text-align: left;">
Интернет-магазин</h3>
В отличие от сайта-витрины, где клиент может увидеть наличие всех товаров, с помощью интернет-магазина клиент может еще и сделать заказ, выбрать вариант расчета, способ получения заказа и получить счет на оплату. Такой сайт должен быть удобным и функциональным, чтобы посетитель мог легко найти то, что ему нужно, отправить товар в корзину и оформить покупку в несколько кликов. Интернет-магазин существенно уменьшит Ваши расходы, так как не надо арендовать помещение для магазина, не надо платить заработную плату сотрудникам. Среди других преимуществ: огромная аудитория, возможность размещать неограниченный ассортимент товаров, своевременно реагировать на изменения на рынке, учитывать потребности клиентов и другие.<br />
<br />
<h3 style="text-align: left;">
Каталог товаров</h3>
Каталог товаров аналогичен интернет магазину, отличие только в том что у каталога нет корзины заказов и другого функционала, который есть в интернет магазине. Это просто страницы с описанием товаров, и контакты для связи, чтобы можно было связаться с продавцом.<br />
<br />
<h3 style="text-align: left;">
Новостной сайт, СМИ</h3>
Этот тип сайта относится к категории больших новостных порталов. Здесь публикуется очень много информации, разделенной на категории. Основная тематика таких сайтов - новости разного рода. Это могут быть городские новости, региональные или мировые. <br />
<br />
<h3 style="text-align: left;">
Блог</h3>
Блоги содержат статьи и заметки, выражающие личное мнение автора. Это своего рода виртуальный дневник, который размещается на специальном ресурсе, предоставляющем возможности добавления записей, комментирования, составление списка друзей, закладок понравившихся сайтов и т.д. Сегодня блоги - это не только способ самовыражения, но и возможность применения в коммерческих и деловых интересах. Например, блоги используются компаниями как доски новостей, анонсов и объявлений, в нем могут публиковаться интересные истории, сценки из повседневной жизни фирмы и прочая занимательная информация.<br />
<br />
<h3 style="text-align: left;">
Фотогалерея или портфолио</h3>
Такие сайты предназначены для размещения изображений, картинок и других иллюстраций. Такие сайты могут использоваться для организации выставок и оформления галерей.<br />
<br />
<h3 style="text-align: left;">
Социальная сеть</h3>
Социальная сеть - это сервис, который предназначен для поиска, установления контактов и общения между пользователями системы. Последнее время на смену таким сайтам пришли социальные сети.<br />
<br />
<h3 style="text-align: justify;">
</h3>
<h3 style="text-align: justify;">
Лендинг</h3>
<div style="text-align: justify;">
Лендинг-пейдж (англ. landing page), она же посадочная страница, она же целевая страница - это сейчас модный тип сайта. Это определенным образом созданная интернет-страница, целью которой является привлечение клиентов и увеличение аудитории. Обычно такая страница имеет информацию о товаре или услуге. При создании такой страницы дизайнеры решают одновременно стилевую и техническую задачу, ведь на одну страницу нужно вместить всю информацию о заказчике.</div>
<div style="text-align: justify;">
<br /></div>
<br />
<br />
-----<br />
При подготовке материала использованы ресурсы:<br />
https://ru.wikipedia.org/wiki/%D0%A1%D0%B0%D0%B9%D1%82<br />
http://deweb.com.ua/ru/blog/tipy-saytov<br />
http://scbali.com/ru/web-studiya/tipy-saitov.html<br />
http://goodwebs.ru/vidy-i-tipy-sajtov/<br />
<br />
<br /></div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-50517602804940541932015-09-30T00:36:00.000+03:002016-02-09T22:57:58.696+02:00Flat дизайн (плоский дизайн)<div dir="ltr" style="text-align: left;" trbidi="on">
Flat дизайн (плоский дизайн) – один из основных трендов сегодня, как в сфере веб-дизайна, так и технологиях создания пользовательских интерфейсов. Из недавних примеров наиболее заметными будут: решительный шаг компании Microsoft в этом направлении, с ее Windows 8 и новый дизайн Google, с явной демонстрацией желания углубиться в минимализм.<br />
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOMVXJj_39891JTEu7TZ07tpNlN-zEwOwqcWvSpp7yLzjSeB5yX8oQBEPN_OFtAuW4CBVbjJWxft7XWFzWjUM_JqS4QsfpYqetFGEglKul52xq-yZo4ugF5ERo9Ko5FhUCQ-LlcMzNktJL/s1600/basic-flat-design-principles-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOMVXJj_39891JTEu7TZ07tpNlN-zEwOwqcWvSpp7yLzjSeB5yX8oQBEPN_OFtAuW4CBVbjJWxft7XWFzWjUM_JqS4QsfpYqetFGEglKul52xq-yZo4ugF5ERo9Ko5FhUCQ-LlcMzNktJL/s1600/basic-flat-design-principles-1.jpg" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
Приведем примеры элементов, определяющих стиль плоского дизайна.<br />
<br />
<div class="entry clearfloat">
<div style="text-align: center;">
<br /></div>
<h2>
<strong>Жизнь после Web 2.0</strong></h2>
Мы уходим от реалий дизайна web 2.0
в виде закруглённых форм элементов со всевозможными эффектами — 3D,
тени, блики и отражения, градиенты, тиснения. Словом всего, что создает
глубину и объем. Большие, яркие элементы управления, глянец, применение
текстур и прочие подобные способы проявления оригинальности уступают
дорогу простому, двумерному представлению визуальных объектов.<br />
<br />
<strong>Float Design</strong><br />
<div style="text-align: center;">
<a href="http://www.floatdesign.net/"><img alt="основные принципы плоского дизайна" class="aligncenter wp-image-2926" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-principles-2.jpg" height="285" title="flat-design" width="540" /></a></div>
<div style="text-align: left;">
<strong><br /></strong></div>
<h2>
<strong>Типографика в основе стиля</strong></h2>
Заметьте, что это основа построения «плоского» сайта. Простота
элементов Flat дизайна, как и сами принципы минимализма усиливают
значимость типографики. Текстовым контентом возможно в принципе заменить
некоторую часть тяжелой графики или изображений. Сегодня уже на многих
сайтах типографика стала основным элементом
дизайна. Естественно, раз дизайн в стиле флэт зачастую минималистичен,
то и характер шрифтов нужно согласовывать с общей схемой, стилем и
композицией. Так, например часто используется верхний регистр для
элементов навигации или заголовков.<br />
<strong>Coderwall</strong><br />
<div style="text-align: center;">
<a href="https://coderwall.com/futureal"><img alt="плоский дизайн: основные принципы " class="aligncenter wp-image-2927" src="http://seo-design.net/wp-content/uploads/2013/07/basic-flat-design-principles-3.jpg" height="270" title="Flat дизайн" width="540" /></a><br />
<br /></div>
<h2>
<strong>Цветовая палитра плоского дизайна</strong></h2>
Flat дизайн также движется в сторону расширения цветового разнообразия.
Веб-дизайнеры все больше используют палитру цветов для реализации,
пожалуй, основного принципа дизайна: сайт должен отличаться от себе
подобных.<br />
<br />
<strong>Minimal Monkey</strong><br />
<div style="text-align: center;">
<a href="http://minimalmonkey.com/"><img alt="плоский дизайн: цвета " class="aligncenter wp-image-2928" src="http://seo-design.net/wp-content/uploads/2013/07/basic-flat-design-principles-4.jpg" height="280" title="flat design" width="540" /></a><br />
<br /></div>
<h2>
<strong>Свободное пространство, большие элементы</strong></h2>
Плоский дизайн от начала до конца имеет минималистичную
основу, а значит, перенимает и его основные принципы: крупные блоки
контента, большие элементы, много свободного пространства, отсутствие
излишней суеты и вычурности.<br />
<strong>Beard Design</strong><br />
<div style="text-align: center;">
<a href="http://bearddesign.in/"><img alt="плоский дизайн:иконки, кнопки и иллюстрации" class="aligncenter wp-image-2929" src="http://seo-design.net/wp-content/uploads/2013/07/basic-flat-design-principles-5.jpg" height="300" title="иконки, кнопки и иллюстрации" width="540" /></a><br />
<br /></div>
<h2>
<strong>Плоский дизайн иконок, кнопок, иллюстраций</strong></h2>
<div>
Кнопки, иконки, значки и иллюстрации также принимают двумерный вид.
Они должны соответствовать заданному стилю на всех страницах сайта,
передавать настроение самого сайта и быть легки для понимания любому
пользователю.<br />
<div>
Подбор цвета для иконок, как и самих иконок – непростая задача. Можно
использовать чистые цвета. Стремясь украсить дизайн, нужно подумать и о
том, как сделать сайт удобным в пользовании. С одной стороны важно не нарушить стиль, а с другой – необходимо сделать иконки заметными. Посетитель не должен прилагать усилий, отыскивая их. В иллюстрациях стремимся к минимализму, избегая столь популярных прежде 3D эффектов.<br />
<br /></div>
</div>
<strong>We Are Pandr</strong><br />
<h2 style="text-align: left;">
</h2>
<h2 style="text-align: left;">
<a href="http://wearepandr.com/"><img alt="примеры сайтов с флэт дизайном" class="aligncenter wp-image-2930" src="http://seo-design.net/wp-content/uploads/2013/07/basic-flat-design-principles-6.jpg" height="285" title="Flat дизайн " width="540" /></a></h2>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<h2 style="text-align: left;">
Примеры шаблонов сайтов с плоским дизайном Flat UI</h2>
<div style="text-align: center;">
<a href="http://ru.wix.com/website-template/view/html/753?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F26&bookName=create-master-c&galleryDocIndex=4"><img alt="Flat дизайн: примеры шаблонов сайтов " class="aligncenter wp-image-2953" src="http://seo-design.net/wp-content/uploads/2013/07/flat_design_templates-1.jpg" height="380" title="flat дизайн: template wix" width="540" /></a></div>
<div style="text-align: center;">
<a href="http://ru.wix.com/website-template/view/html/753?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F26&bookName=create-master-c&galleryDocIndex=4"><img alt="примеры шаблонов сайтов с плоским (флет) дизайном " class="aligncenter wp-image-2955" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-templates-2.jpg" height="300" title="flat дизайн: template wix" width="540" /></a></div>
<div style="text-align: center;">
<a href="http://ru.wix.com/website-template/view/html/753?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F26&bookName=create-master-c&galleryDocIndex=4"><img alt="плоский дизайн: примеры шаблонов сайтов " class="aligncenter wp-image-2959" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-templates-wix-3.jpg" height="380" title="flat дизайн: template wix" width="540" /></a></div>
<div style="text-align: center;">
<a href="http://ru.wix.com/website-template/view/html/1015?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F4&bookName=create-master-c&galleryDocIndex=1"><img alt="Flat дизайн: примеры шаблонов сайтов " class="aligncenter wp-image-2960" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-template-wix-4.jpg" height="530" title="flat дизайн: template wix" width="540" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<h2>
Примеры сайтов в стиле Flat-дизайна</h2>
<div style="text-align: left;">
<strong>Identity</strong><a href="http://teru82.wix.com/identity#%21graphics/c125p"><img alt="дизайн в стиле флэт " class="aligncenter wp-image-2962" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-1.jpg" height="380" title="дизайн wix" width="540" /></a></div>
<div style="text-align: left;">
<strong>83 Design Collective</strong><a href="http://www.83designcollective.com/"><img alt="флэт дизайн: примеры сайтов " class="aligncenter wp-image-2963" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-2.jpg" height="350" title="flat дизайн wix" width="540" /></a></div>
<div style="text-align: left;">
<strong>Frunatic</strong><a href="http://www.frunatic.com/"><img alt="плоский дизайн: примеры сайтов " class="aligncenter wp-image-2964" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-3.jpg" height="380" title="flat дизайн wix" width="540" /></a></div>
<div style="text-align: left;">
<strong>The Umbrella Group<a href="http://www.theumbrellagroup.net/"><img alt="Flat дизайн" class="aligncenter wp-image-2968" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-4.jpg" height="400" title="flat дизайн wix" width="540" /></a></strong></div>
<div style="text-align: left;">
<strong> Slcl Foundation<a href="http://2012.slcl.org/programs.html"><img alt="примеры флэт дизайна" class="aligncenter wp-image-3503" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-5.jpg" height="300" title="Flat design examples" width="540" /></a></strong></div>
<div style="text-align: left;">
<strong>My Felt</strong><a href="http://www.myfelt.de/"><img alt="примеры флэт дизайна" class="aligncenter wp-image-3504" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-6.jpg" height="310" title="Flat design examples" width="540" /></a></div>
<div style="text-align: left;">
<strong>Behzad</strong><a href="http://behzad.me/"><img alt="Flat дизайн: пример сайта" class="aligncenter wp-image-3505" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-7.jpg" height="325" title="Flat design example" width="540" /></a></div>
<div style="text-align: left;">
<strong>Atlant<a href="http://jaarverslag.atlant.nl/2012/"><img alt="flat дизайн: примеры" class="aligncenter wp-image-3506" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-8.jpg" height="325" title="Flat design examples" width="540" /></a> </strong></div>
<strong>Simple as Milk<a href="http://simpleasmilk.com/"><img alt="Примеры плоского дизайна" class="aligncenter wp-image-3507" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-9.jpg" height="300" title="Flat design examples" width="540" /></a> </strong><br />
<div style="text-align: left;">
<strong>Weranda Family</strong><a href="http://werandafamily.com/"><img alt="Примеры flat дизайна" class="aligncenter wp-image-3510" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-10.jpg" height="310" title="Flat design examples" width="540" /></a></div>
<div style="text-align: left;">
<strong>Kitchen Sink Studios</strong><a href="http://kitchensinkstudios.com/"><img alt="Примеры flat дизайна" class="aligncenter wp-image-3513" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-12.jpg" height="285" title="Flat design examples " width="540" /></a></div>
<div style="text-align: left;">
<strong>Coffee Surfing</strong><a href="http://coffeesurfing.illy.com/wps/wcm/connect/cs_en/home#/home/"><img alt="Примеры flat дизайна" class="aligncenter wp-image-3525" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-13.jpg" height="265" title="flat-design-examples" width="540" /></a></div>
<div style="text-align: left;">
<strong>Sunny7</strong><a href="http://sunny7.ua/"><img alt="Примеры дизайна: плоское меню" class="aligncenter wp-image-3670" src="http://seo-design.net/wp-content/uploads/2013/07/flat-menu-design-14.jpg" height="370" title="Примеры flat дизайна " width="540" /></a></div>
<div style="text-align: left;">
<strong>Krivaja Homes</strong><a href="http://www.krivajahomes.com/"><img alt="Примеры дизайна: плоское меню" class="aligncenter wp-image-3671" src="http://seo-design.net/wp-content/uploads/2013/07/flat-menu-design-15.jpg" height="340" title="Примеры flat дизайна " width="540" /></a></div>
<div style="text-align: left;">
<strong>Spring Summer</strong><a href="http://springsummer.dk/#/werkstette"><img alt="Примеры flat дизайна" class="aligncenter wp-image-3729" src="http://seo-design.net/wp-content/uploads/2013/07/springsummer-16.jpg..jpg" height="290" title="Примеры flat дизайна" width="540" /></a></div>
<div style="text-align: left;">
<strong>RIT Rochester Institute of Technology</strong><a href="http://www.rit.edu/studentaffairs/iss/"><img alt="флэт дизайн" class="aligncenter wp-image-4083" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-17.jpg" height="315" title="flat дизайн" width="540" /></a></div>
<div style="text-align: left;">
<strong>Snow Bird</strong><a href="http://www.snowbird.com/winter/" target="_blank"><img alt="флэт дизайн" class="aligncenter wp-image-4084" src="http://seo-design.net/wp-content/uploads/2013/07/flat-design-18.jpg" height="319" title="flat дизайн" width="540" /></a></div>
<div style="text-align: left;">
<strong>LEDbow</strong><a href="http://ledbow.cz/"><img alt="эффектный плоский адаптивный дизайн" class="aligncenter wp-image-4940" src="http://seo-design.net/wp-content/uploads/2013/07/effective-flat-rsponsive-design-19.jpg" height="341" title="Flat дизайн: примеры" width="540" /></a></div>
<br /></div>
<br />
<br />
Источник:<br />
http://seo-design.net/design/5-basic-flat-design-principles<br />
<br />
<br /></div>
</div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-24881794180448176902015-09-30T00:29:00.003+03:002015-11-10T14:54:51.198+02:00Бриф на создание сайта<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2DuDD4XjnF59T5_s5S_zH3Oed1IpjpMaeGTCjewjdzUtUNwo2ryytNUIQCliJmlUzT8fRn6_bYnCBrX6iEJLSNPQbGbQjhcUQ7qm9dK6DPLP_pwx0Ik7HEB8U1uy1xigDlrZ3KK2O7Jrh/s1600/brief.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="500" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2DuDD4XjnF59T5_s5S_zH3Oed1IpjpMaeGTCjewjdzUtUNwo2ryytNUIQCliJmlUzT8fRn6_bYnCBrX6iEJLSNPQbGbQjhcUQ7qm9dK6DPLP_pwx0Ik7HEB8U1uy1xigDlrZ3KK2O7Jrh/s640/brief.jpg" width="640" /></a></div>
<br />
Бриф представляет из себя анкету с вопросами, ответы на которые определяют задачу разработки веб-сайта. Эта анкета содержит вопросы касаемо продукции/услуг компании, целей веб-проекта, типа сайта, а также дизайна и функциональности ресурса. <br />
<br />
<a name='more'></a><br />
Правильно и подробно заполненный бриф позволяет определить приблизительную стоимость работ по созданию сайта. Окончательная стоимость может быть сделана только после предоставления и
подробного описания задач и согласования всех необходимых моментов и
пожеланий.<br />
<br />
Важно понимать, что бриф не является Техническим Заданием на создание сайта. ТЗ является
серьёзным документом, требующим больше времени на проработку и
являющейся критерием оценки всех выполненных работ. Однако, если необходимо
создать относительно простой сайт, тогда можно не составлять Техническое Задание, а только
заполнить бриф.<br />
<br />
Заполнив один раз бриф, вы можете разослать его в несколько
дизайн-студий. И тогда вы не будете тратить время на объяснения одной и той же
задачи разным менеджерам. Изучив данный документ, студии сделают оценку объёма работ и рассчитают их стоимость. А вам
останется только выбрать студию, чьи услуги вам покажутся самыми лучшими
по цене и качеству.<br />
<br />
<br />
<h3 style="text-align: left;">
Особенности заполнения брифа</h3>
Чтобы заполнить бриф, вам достаточно только ответить на имеющиеся там вопросы. Но среди всего списка вопросов есть важные, оказывающие влияние на окончательную стоимость всех работ.<br />
<ul style="text-align: left;">
<li><b>Контактные данные</b>. Да, контакты абсолютно не влияют на стоимость, но их наличие позволяет заказчику и разработчику держать связь и вовремя обмениваться информацией.</li>
<li><b>Цель создания сайта и его аудитория</b>. Вы должны определить для себя, зачем вам сайт, какие задачи вы перед ним ставите, и для какой целевой аудитории он будет рассчитан.</li>
<li><b>Тип сайта</b>. Сайтов много, кокой именно нужен вам: сайт-визитка, промо-сайт, интернет-магазин или сайт по индивидуальному заказу. У каждого сайта имеется своя сложность реализации и определённая нижняя граница стоимости.</li>
<li><b>Примеры понравившихся сайтов</b>. Это пожалуй, один из самых важных вопросов, дающих наглядный ответ. Найдите 5-6 сайтов в Интернете, дизайн, структура и наполнение, которых вам нравятся. Дайте ваши комментарии, что вам нравиться в этих сайтах, а что нет.</li>
<li><b>Требования к дизайну сайта</b>. Также не маловажный вопрос, каждый дизайн сайта имеет отличия по качеству, сложности и, разумеется, цене. Добротный, типовой дизайн разрабатывается в течение 2-4 дней от 50$. Эксклюзивные решения, когда требуется выезд фотографа, разработка анимации и т. д. может разрабатываться свыше 20 дней и иметь стоимость от 900$. И это только дизайн!</li>
<li><b>Список разделов сайта</b>. Здесь важно перечислить все разделы и страницы, которые вы планируете в будущем разместить на сайте. Желательно перечислять разделы в виде списка, чтобы было возможно понять последовательность вложения страниц и связь между ними. И возле каждого раздела, кратко опишите информацию, которая будет там размещаться.</li>
<li><b>Особенности функционала сайта</b>. Здесь опишите ваши пожелания по работе сайта. Любая задача, которая требует нестандартное решение, влияет на стоимость работ. И лучше знать об этом заранее.</li>
<li><b>Структура главной страницы</b>. Опишите подробно информацию, которую вы планируете разместить на главной странице своего будущего сайта. Необходимо перечислить все разделы меню, рубрики, баннеры, контакты, формы поиска и другие возможные элементы сайта, которые вы хотите видеть на главной странице. Вся эта информация поможет дизайнеру выполнить свою работу.</li>
<li><b>Языковые версии</b>. Укажите основной язык сайта. Планируете вы иметь мультиязычный сайт, где будет необходим перевод текста.</li>
<li><b>Материалы для сайта.</b> В этом разделе перечислите все материалы, которые планируете предоставить для разработки сайта. Например: материалы для страниц, логотип, баннеры, фотографии, прайс-листы и т. д. Вся информация должна быть предоставлена в электронном виде и хорошего качества.</li>
</ul>
<br />
В интернете можно найти множество вариантов брифов, но, как правило, каждый создает какой-то свой вариант.<br />
<br />
<br />
-----<br />
<br />
<br />
При подготовке материала использованы ресурсы:<br />
http://realstudio.com.ua/brif-na-sozdanie-sata.html<br />
https://yadi.sk/i/mpiZxe6OaJLZ9<br />
http://deaction.com/DMA-brief.pdf<br />
http://awebia.com/sites/default/files/brief_awebia_interactive.pdf<br />
<br />
<br />
<br /></div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com7tag:blogger.com,1999:blog-7834184402764284675.post-29731599183333738652015-09-29T15:55:00.002+03:002015-09-29T16:02:49.714+03:00Этапы создания веб-сайта<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih07NEosdKk7QE00boaWr0XjGdjDT2FWUcxJux8vc1GGbPsztt8Iyz5tl2_d-39ANAuvRl8IQBX0OwThEJ695i27TOEVmB4BnytnsMuhAN34kAnkup_34X0Qdga3BjAFDePZu6bUlxPwx1/s1600/web-design-planning.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih07NEosdKk7QE00boaWr0XjGdjDT2FWUcxJux8vc1GGbPsztt8Iyz5tl2_d-39ANAuvRl8IQBX0OwThEJ695i27TOEVmB4BnytnsMuhAN34kAnkup_34X0Qdga3BjAFDePZu6bUlxPwx1/s640/web-design-planning.jpg" width="640" /></a></div>
<br />
Создание сайта - это достаточно формализуемый и управляемый процесс с предсказуемым результатом, состоящий из нескольких последовательных этапов, каждый из которых является в определенной степени независимым.<br />
<br />
<a name='more'></a><br />
<br />
Эта независимость дает заказчику возможность выбирать схему работы и исполнителя каждого этапа. И между заказчиком и исполнителем заключается либо один договор на разработку сайта в целом, либо несколько договоров с разными исполнителями на выполнение отдельных этапов работы.<br />
<br />
Итак, разделим весь процесс разработки сайта на отдельные этапы:<br />
<ol style="text-align: left;">
<li>Постановка задачи</li>
<li>Разработка и утверждение дизайна веб-сайта</li>
<li>Интеграция дизайна и системы управления сайтом</li>
<li>Публикация сайта в Интернет </li>
<li>Заполнение сайта материалами </li>
<li>Поддержка сайта </li>
</ol>
<br />
<h3 style="text-align: left;">
1-й этап: Постановка задачи</h3>
Прежде, чем что-то делать, надо представлять, а что, собственно, необходимо получить? Поэтому на первом этапе необходимо выяснить, какой сайт вы хотите, а точнее, какие задачи вы хотите решать при помощи этого сайта.<br />
<br />
Хотите ли вы, чтобы сайт "продавал" ваши продукты и услуги? Или вам необходимо, чтобы ваши партнеры получали информацию самостоятельно? Или, вы хотите, чтобы посетители сайта просто говорили "Круто!" глядя на навороченный дизайн одной единственной страницы сайта? Ну, чтобы вроде как бассейн в офисе - толку никакого, а все диву даются...<br />
<br />
Сайты создаются для разных целей и для достижения этих целей существуют разные способы. На основании того, что вам необходимо, выбираются варианты достижения ваших целей. На этом этапе создается структура будущего сайта и проектируется бизнес-логика.<br />
<br />
В рамках обсуждения проекта выяснятся, за какой срок это можно реализовать решение задачи и какой бюджет потребуется. В результате выполнения 1-го этапа вы получаете описание структуры сайта, схему навигации по сайту и технические требования к сайту.<br />
<br />
Обычно 1-й этап требует 8-15 дней на выяснение необходимых деталей и получение материалов, необходимых для постановки задачи на разработку сайта и написание полноценного технического задания. Иногда сама постановка задачи является серьезной проблемой, решение которой требует больше времени и дополнительных ресурсов.<br />
<br />
<br />
<h3 style="text-align: left;">
2-й этап: Разработка и утверждение дизайна веб-сайта</h3>
После утверждения постановки задания на разработку сайта наступает второй этап - разработка дизайна сайта. Ориентируясь на техническое задание по разработке сайта исполнитель представляет 1-2 эскиза разных вариантов дизайна, из которых вы выберите наиболее подходящий.<br />
<br />
Этот вариант дорабатывается с учетом ваших замечаний. В результате выполнения этого этапа работы вы получаете так называемую "нарезку сайта" - то есть, готовый шаблон, который может быть использован как основа для разработки отдельных страниц сайта.<br />
Этот этап обычно занимает 2-3 недели.<br />
<br />
Для упрощения процесса создания дизайна, а также для снижения затрат, можно воспользоваться готовыми шаблонами дизайнов. При использовании готового шаблона этот этап занимает 2-3 дня.<br />
<br />
Какие преимущества при покупке готового дизайна? Основные преимущества - это цена и время. Вы получаете возможность купить дизайн стоимостью от 15$ до 50$ и купить его прямо сейчас. Вы можете выбрать тот дизайн, который вам понравится, и не нанимать студию дизайна для длительной и дорогой разработки.<br />
<br />
Если же посмотреть на вопрос немного шире, то можно сказать, что возможность выбирать дизайн помогает лучше представить, какой будет ваш сайт, что вы от него ждете, какая будет структура и для чего он вам вообще. И хотя, как вы видите, в дизайне пункты еще называются не так как вы хотите, или логотип не вашей компании, но все же, наличие дизайна помогает сделать более правильный и быстрый выбор. Вы заранее знаете как примерно будет выглядеть веб-сайт.<br />
<br />
У вас может возникнуть вопрос: "а вдруг этот шаблон будет использовать кто-то другой?". Безусловно, это возможно, но, во-первых, в Интернете более 3 000 000 000 страниц и вероятность увидеть похожий дизайн достаточно мала. Во-вторых, даже если вам изготовят индивидуальный дизайн не факт, что кто-то не "повторит" его на другом сайте.<br />
<br />
<h3 style="text-align: left;">
3-й этап: Интеграция дизайна и системы управления сайтом</h3>
Этот этап возникает, если вы хотите получить сайт, который можно отнести к категории "продвигающих". Этот сайт по определению требует некой программной системы управления, поскольку при большом количестве обновляемого материала ручная публикация будет съедать массу времени вашего персонала.<br />
<br />
Хорошая система управления сайтом (CMS - Content Management System - система управления содержимым) помимо этого также решает задачи анализа аудитории на вашем сайте, задачи целевого воздействия на конкретные части этой аудитории, а также предоставляет другие функциональные возможности.<br />
<br />
Для запуска сайта на основе выбранной CMS требуется предварительная интеграция дизайна и модулей системы. Этот этап обычно занимает от 5 дней. В сложных случаях, когда помимо интеграции дизайна приходится заниматься определенной автоматизацией работы сайта, это может занять более длительный срок, который оговаривается заранее.<br />
<br />
<h3 style="text-align: left;">
4-й этап: Публикация сайта в Интернет</h3>
Для публикации сайта нужно решить две задачи. Первая задача состоит в выборе адреса сайта или, более правильно, его имени (домена). В большинстве случаев самый очевидный и правильный способ состоит в использовании домена, совпадающего с названием компании или торговой марки.<br />
<br />
Вторая задача - это выбор физического размещения вашего сайта. Понятие "опубликовать сайт в Интернет" на самом деле означает простую вещь (мы специально утрируем, чтобы дать общее представление) - кто-то имеющий свой сервер постоянно подключенным к Интернет предоставляет вам место на этом компьютере, чтобы ваш сайт стал доступен для посетителей. Эта услуга называется "хостингом".<br />
<br />
Самое интересное состоит в том, что реальное расположение сервера не имеет никакого значения. Вы можете иметь русскоязычный сайт с русским доменом, а сервер, например, реально может располагаться в США. Это никак не помешает вашим посетителям, поскольку они будут искать ваш сайт по имени, а не по физическому расположению.<br />
<br />
Вы можете самостоятельно заняться подбором хостинга и имени домена, а можете доверить это исполнителю.<br />
<br />
<h3 style="text-align: left;">
5-й этап: Заполнение сайта материалами</h3>
Помимо разработки дизайна сайта и наладки системы управления содержимым сайта возникает задача наполнения сайта материалами. Иногда какие-то материалы у заказчика уже есть (готовые рекламные буклеты, статьи, материалы для выставок и т.д.) и их только надо привести в форму, предназначенную для публикации на сайте, а иногда никаких готовых материалов нет, а есть только общее представление и пожелания о таких материалах.<br />
<br />
В случае готовых материалов исполнитель оказывает услуги по их технической подготовке и публикации на сайте. Подобные работы имеют фиксированную цену исходя из общего объема материалов.<br />
<br />
В случае, когда готовых материалов нет, исполнитель может помочь с их составлением. Это творческая работа, она, конечно, требует больше ресурсов, чем просто перевод документов в необходимый для публикации формат, но вполне вероятно, что в целом это будет для вас более выгодно, чем тратить время своих сотрудников на написание основных текстов для сайта.<br />
<br />
<h3 style="text-align: left;">
6-й этап: Поддержка сайта</h3>
Помимо заполнения сайта материалами, в небольших компаниях возникают сложности с поддержкой сайта. Что подразумевается под поддержкой? Это прежде всего добавление новых статей, новостей и прочие изменения содержимого сайта. Чем больше и чаще обновляются материалы сайта, тем эффективнее индексируется поисковыми системами, и как следствие, его чаще находят потенциальные потребители.<br />
<br />
Небольшие компании не всегда имеют необходимые человеческие ресурсы для поддержки сайта. Поэтому, в случае необходимости, исполнитель может взять поддержку сайта на себя. За фиксированную месячную оплату он будет публиковать готовые новости и статьи, которые вы пришлете в удобной для вас форме, будет сам составлять текст подобных документов и публиковать на вашем сайте, либо будет вносить изменения в сайт, если это будет необходимо.<br />
<br />
<br />
Оригинал: http://www.info-expert.ru/development/stages.php<br />
<br /></div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-80200603737622428972015-09-27T20:11:00.000+03:002015-09-29T16:07:10.707+03:00Бесплатные адаптивные BootStrap шаблоны<div dir="ltr" style="text-align: left;" trbidi="on">
Bootstrap — мощный и элегантный, интуитивно понятный фронт-енд
фреймворк, разработанный командой Twitter. Это open-source CSS и
JavaScript среда разработки современных интернет проектов. Относительно
молодая платформа веб-разработки, безусловно заслуживающая изучения,
предлагает множество полезных вещей: стили компонентов интерфейса
(заголовки, вкладки, навигационные панели…) и HTML-элементов (кнопоки,
формы, шрифты…), адаптивные queries, JS-плагины и т.д. Основанный на
принципе «Сначала мобильные» (Mobile first), фреймворк изначально был
задуман для упрощения и ускорения процесса разработки сайтов. Сегодня
BootStrap с размахом используется на веб пространстве рунета. Во многих
случаях, темы на бутстрап это идеальный вариант для тех, кого интересуют
шаблоны адаптивного дизайна и тех, кому необходимо создать приличный
современный сайт с минимальными затратами. Правильно подобранный
BootStrap HTML шаблон не разочарует того, кто решил использовать его под
коммерческий проект или того, кому нужен простой бутстрап шаблон
(…ищущим bootstrap шаблоны бесплатно), так как благодаря легко
настраиваемому инструментарию всегда есть возможность для внесения
изменений или доработки под свои нужды. Замечательная особенность
бутстрап шаблонов в том, что самостоятельно разобраться и осуществить
это под силу даже тому, у кого нет большого опыта в программировании и
оформлении сайта. К тому же всегда можно натянуть BootStrap на любую
CMS, например интегрировав его компоненты в WordPress шаблон.
Профессионалов бутсраперов в этом фреймворке привлекает возможность
повторно использовать наработки, создавая при этом приличного вида
проекты.<br />
<br />
В этом посте собраны отобранные бесплатные адаптивные
BootStrap HTML шаблоны из различных интернет-источников.<br />
<br />
<br />
<h3 style="text-align: left;">
Stylish Portfolio</h3>
A stylish Bootstrap portfolio theme.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRgtqw3LzSyH89lUe7f_sfKONU-oQ5sYvz9p2ZkskyQR8PSKPk-hTsX3jzzWkUH0GaytHLkS0bgc1_rhp_eo87-pLjT1Sj0CULL1a2o6MxSAeIDtMaLiRh-TPmhsVCyhvYPpSIOkWA0f82/s1600/start-bootstrap-stylish-portfolio.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="417" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRgtqw3LzSyH89lUe7f_sfKONU-oQ5sYvz9p2ZkskyQR8PSKPk-hTsX3jzzWkUH0GaytHLkS0bgc1_rhp_eo87-pLjT1Sj0CULL1a2o6MxSAeIDtMaLiRh-TPmhsVCyhvYPpSIOkWA0f82/s640/start-bootstrap-stylish-portfolio.jpg" width="640" /></a></div>
<div style="text-align: center;">
<a href="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/" target="_blank">Демо</a> | <a href="http://startbootstrap.com/template-overviews/stylish-portfolio/" target="_blank">More info</a></div>
<br />
<h3 style="text-align: left;">
Creative</h3>
A one page creative theme.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFx2SVnagwyqtniBdnk7cReIU_W4Hgv2Hcly4plmt4bw5JHLRNOZX-VUwRtOIUrpTUVvLr37qUx9tTWMCJ6KITP2tR19Cmko88q_Dpnveo-07IL-xNGat6f6OxMCLURBusSF_pb-KCkChz/s1600/start-bootstrap-creative.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="417" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFx2SVnagwyqtniBdnk7cReIU_W4Hgv2Hcly4plmt4bw5JHLRNOZX-VUwRtOIUrpTUVvLr37qUx9tTWMCJ6KITP2tR19Cmko88q_Dpnveo-07IL-xNGat6f6OxMCLURBusSF_pb-KCkChz/s640/start-bootstrap-creative.jpg" width="640" /></a></div>
<div style="text-align: center;">
<a href="http://ironsummitmedia.github.io/startbootstrap-creative/" target="_blank">Демо</a> | <a href="http://startbootstrap.com/template-overviews/creative/" target="_blank">More info</a></div>
<br />
<h3 style="text-align: left;">
Free Business Responsive Bootstrap Template</h3>
Бесплатный Bootstrap шаблон, который подойдет для демонстрации вашей коллекции, например, фотографий или для создания художественной галереи. В этом шаблоне неплохое оформление галереи и расширенные возможности навигации по превью внутри лайтбокса — можно использовать клавиатуру для просмотра изображений.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivFXEnXoLTzhPjB54as4EclkzMg8tJPoZd89cu0VYs16U8vcJ4E0Jp0uBN0JG0rJX6j2TXQpOxyxL3MdbNQLZq7V6rexWWLoDg8_YqMTT2JT4VIGMvoaXJQeuiPkrBJhrKzGpoCDuxFduV/s1600/Free-Business-Responsive-Bootstrap-Template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="476" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivFXEnXoLTzhPjB54as4EclkzMg8tJPoZd89cu0VYs16U8vcJ4E0Jp0uBN0JG0rJX6j2TXQpOxyxL3MdbNQLZq7V6rexWWLoDg8_YqMTT2JT4VIGMvoaXJQeuiPkrBJhrKzGpoCDuxFduV/s640/Free-Business-Responsive-Bootstrap-Template.jpg" width="640" /></a></div>
<div style="text-align: center;">
<a href="http://html5templatesdreamweaver.com/free/bootstrap-classic-green/html/index.html" target="_blank">Демо</a> | <a href="http://html5templatesdreamweaver.com/free/download/bootstrap-classic.zip" target="_blank">Скачать</a></div>
<br />
<br />
<h3 style="text-align: left;">
Sprint</h3>
Этот шаблон с профессиональной HTML5/CSS3 разметкой можно использоваться для различных сайтов. Наиболее интересна цветовая схема шаблона. Сочетание зеленого, черного и белого цветов, вместе с черно-белыми фотографиями позволят выделиться представленным проектам. Используя зеленый цвет для иконок в разделе сервисов, вы действительно сделаете их и ваши указанные «ОТЛИЧИЯ» заметными. Еще один оригинальный элемент дизайна: светящийся индикатор текущего положения в виде зеленой линии с маленьким шариком. Этот простой шаблон удачно разделен на 5 секций — начиная с галереи, размещенной в пределах «первого экрана» и заканчивая формой контактов.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7vEjyHItK3m5a4QzDSHbP2RVwAy2QuukPHzx0aX5tJnszxUJgCeVmV7WT1GDIE1cUDgqLQ4y5wbe0IGhAIykuia9WTW8Yv_MzM0PhXC7LytStYV8AXZwYH0kmYcKoPpVDAziLfx09V2-q/s1600/sprint-free-bootstrap-html5-template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="521" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7vEjyHItK3m5a4QzDSHbP2RVwAy2QuukPHzx0aX5tJnszxUJgCeVmV7WT1GDIE1cUDgqLQ4y5wbe0IGhAIykuia9WTW8Yv_MzM0PhXC7LytStYV8AXZwYH0kmYcKoPpVDAziLfx09V2-q/s640/sprint-free-bootstrap-html5-template.jpg" width="640" /></a></div>
<div style="text-align: center;">
<a href="http://www.templatemo.com/templates/templatemo_401_sprint/" target="_blank">Демо</a> | <a href="http://www.templatemo.com/download/templatemo_401_sprint" target="_blank">Скачать</a></div>
<br />
<br />
<h3 style="text-align: left;">
Progressus – elegant agency/business template</h3>
Progressus – привлекательный адаптивный бизнес шаблон, основанный на Bootstrap – HTML/CSS фреймворке. 7 макетов страниц для основных задач, стильный адаптивный дизайн, выполненный исключительно качественно от начала до конца.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYMQDXTGVONH6cqJWQzQtC1ol9wKDItqBo-ndbZ-J8XxssfrivCdO-DQu-qgWMVRNMevC2SG70w5Zhn-PimH6bk2R9zz83V7uq9slUxBKt8YZXbzgVeSgunWTWLxK_cCsZWV3mNrkS2Ou/s1600/progressus-business-html-template-for-free.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="403" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYMQDXTGVONH6cqJWQzQtC1ol9wKDItqBo-ndbZ-J8XxssfrivCdO-DQu-qgWMVRNMevC2SG70w5Zhn-PimH6bk2R9zz83V7uq9slUxBKt8YZXbzgVeSgunWTWLxK_cCsZWV3mNrkS2Ou/s640/progressus-business-html-template-for-free.jpg" width="640" /></a></div>
<div style="text-align: center;">
<a href="http://www.gettemplate.com/demo/progressus/index.html" target="_blank">Демо</a> | <a href="http://www.gettemplate.com/downloads/progressus.zip" target="_blank">Скачать</a></div>
<br />
<br />
<h3 style="text-align: left;">
Коллекции</h3>
50+ бесплатных адаптивных BootStrap HTML-шаблонов<br />
<a href="http://seo-design.net/templates/free-responsive-bootstrap-html-templates" target="_blank">http://seo-design.net/templates/free-responsive-bootstrap-html-templates</a><br />
<br />
Bootstrap portfolio themes and templates<br />
<a href="http://startbootstrap.com/template-categories/portfolios/" target="_blank">http://startbootstrap.com/template-categories/portfolios/</a><br />
<br />
<br /></div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com1tag:blogger.com,1999:blog-7834184402764284675.post-76343415796829582912015-09-27T18:17:00.002+03:002015-09-29T12:22:10.476+03:00Использование условных тегов в Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
Условные теги позволяют отображать элементы только на определённых веб-страницах, не задействовав весь блог в целом. И в отличии от свойства <a href="http://shpargalkablog.ru/2012/04/display-block-inline-css.html#none">display: none;</a>, не просто их скрывают, а удаляют из исходного кода.
<br />
Для того, чтобы понять что такое условные теги, я приведу простой пример
<br />
<pre><<b class="vydelit">b:if cond</b>='погода <b class="vydelit">==</b> дождливая'>
я остаюсь дома
<b class="vydelit"><b:else/></b>
иду гулять
</b:if></pre>
Что можно интерпретировать как: "Если (<b class="vydelit">b:if cond</b>) погода дождливая, то я остаюсь дома, иначе (<b class="vydelit">b:else</b>) иду гулять".
<br />
<br />
Когда мы вместо равенства указываем <b class="vydelit">!=</b>, то получается наоборот:
<br />
<pre><b:if cond='погода <b class="vydelit">!=</b> дождливая'>
я остаюсь дома
<b:else/>
иду гулять
</b:if></pre>
"Если погода <b class="vydelit">не</b>дождливая, то я остаюсь дома, иначе иду гулять".
<br />
<br />
Может быть как больше ситуаций (несколько раз употребляться <b class="vydelit">b:else</b>), так и только одна:
<br />
<pre><b:if cond='погода == дождливая'>
я остаюсь дома
<b class="vydelit"></b:if></b></pre>
Обязательно должно присутствовать окончание условия <b class="vydelit"></b:if></b>.
<br />
<h2 id="blogger">
Наиболее полезные условия Blogger</h2>
<a href="http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=47270">Для Blogger есть много разных условий</a>, но наиболее интересными является тип групп страниц (<b class="vydelit">data:blog.pageType</b>). Он может принимать пять значений:
<br />
<ul>
<li><a href="http://shpargalkablog.ru/2011/08/stranicy-blogger.html">Cтраницы</a>
<pre><b:if cond='data:blog.pageType == &quot;static_page&quot;'></pre>
</li>
<li>Сообщения
<pre><b:if cond='data:blog.pageType == &quot;item&quot;'></pre>
</li>
<li>архив
<pre><b:if cond='data:blog.pageType == "archive"'></pre>
</li>
<li><a href="http://shpargalkablog.ru/2012/03/404.html">404 ошибка</a>
<pre><b:if cond='data:blog.pageType == &quot;error_page&quot;'></pre>
</li>
<li>остальные страницы, в том числе <a href="http://shpargalkablog.ru/">Главная</a>, <a href="http://shpargalkablog.ru/2011/03/yarlyki-blogger.html">ярлыки</a> и <a href="http://shpargalkablog.ru/2010/08/knopki-navigatsii.html">навигация</a>
<pre><b:if cond='data:blog.pageType == "index"'></pre>
<ul>
<li>отдельно для ярлыков
<pre><b:if cond="data:blog.searchLabel" ></pre>
</li>
<li>отдельно для <a href="http://shpargalkablog.ru/">Главной</a>
<pre><b:if cond='data:blog.url == data:blog.homepageUrl'></pre>
</li>
</ul>
</li>
</ul>
Чтобы задать условие одной конкретной странице используем <b class="vydelit">data:blog.url</b>:
<br />
<pre><b:if cond='data:blog.url == "http://адрес_вашей_строницы/"'></pre>
При этом <code class="vydelit">http://адрес_вашей_строницы/</code> должен быть с доменом .com (см. <a href="http://shpargalkablog.ru/2010/09/optimizatsiya-blogger.html#region">про региональные домены в Blogger</a>):
<br />
<pre><s>http://zarabotokiinternet.blogspot<b class="vydelit">.ru</b>/2011/02/uslovnye-tegi-v-blogger.html</s>
http://zarabotokiinternet.blogspot<b class="vydelit">.com</b>/2011/02/uslovnye-tegi-v-blogger.html</pre>
Другие более сложные выражения (<a href="http://buzz.blogger.com/2015/05/adding-new-expressions-to-blogger.html">+, -, <, >, <=, >=</a> и <a href="http://buzz.blogger.com/2015/06/even-more-expansions-to-blogger.html">b:elseif, b:switch, b:case, b:eval и b:with</a>) не так часто имеют место быть, но более функциональны. Если вы справитесь и с ними, то можно смело изучать JavaScript :)
<br />
<h2 id="fon">
Разный фон на разных страницах</h2>
Рассмотрим как сделать фон статистических страниц отличный от основного.
<br />
В <a class="shab" href="http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html">шаблоне</a> перед <b class="vydelit"></head></b> добавляем:
<br />
<pre><b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
body {
background: url(<b class="vydelit">адрес_изображения</b>);
}
.body-fauxcolumns .cap-top {
background: transparent;
}
.widget ul li, .widget #ArchiveList ul.flat li {
border-top: none;
}
</style>
</b:if>
</pre>
<style type="text/css">
body {
background: #eceada;
}
.body-fauxcolumns .cap-top {background: transparent;}
.widget ul li, .widget #ArchiveList ul.flat li {border-top: none;}
.post-outer {background: #fff;}</style>Строку <code class="vydelit">.widget ul li, .widget #ArchiveList ul.flat li {border-top: none;}</code> нужно указывать не для всех шаблонов, а только для тех, у кого есть пунктирные линии - разделители в гаджетах.<br />
<h2 id="del">
Как убрать с Главной конкретную страницу в Blogspot</h2>
Каждое сообщение имеет свой id. Его можно узнать на странице публикации поста в строке браузера
<br />
<div style="margin: 0px auto; overflow: auto; text-align: center; width: 550px;">
<img alt="id сообщения blogger" height="141" src="http://1.bp.blogspot.com/-s2iaWVu6CSI/TzTCFk3Ic6I/AAAAAAAACro/f377wqhcLoE/s1600/id-post-blogger.png" width="616" /></div>
В <a class="shab" href="http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html">шаблоне</a> есть такой участок кода:<br />
<pre><b:includable id='post' var='post'>
........содержание........
</b:includable></pre>
его мы заменяем на<br />
<pre><b:includable id='post' var='post'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.id != &quot;<b class="vydelit">1873004851645451173</b>&quot;'>
........содержание........
</b:if>
<b:else/>
........содержание........
</b:if>
</b:includable>
</pre>
<b class="vydelit">1873004851645451173</b> - это <b class="vydelit">id</b> из скриншота выше.
<br />
Поскольку мы поставили условие <code class="vydelit">data:blog.url == data:blog.homepageUrl</code>, то страница, уйдя с Главной, будет видна по ссылке "Предыдущие". Если определить условие как <code class="vydelit">data:blog.pageType == "index"</code>, то мы не увидим сообщение ни на Главной, ни по ссылке "Предыдущие", ни на страницах ярлыка, таких как <code class="vydelit">http://shpargalkablog.ru/search/label/feed</code>. А если — <code class="vydelit">data:blog.pageType != "item"</code>, то пост найдём лишь по его адресу, например, <code class="vydelit">http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html</code>.<br />
<br />
<br />
Источник: http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html<br />
<br />
Полезные ссылки:<br />
<ul style="text-align: left;">
<li>Теги виджетов для дизайна<br /><a href="https://support.google.com/blogger/answer/46995?hl=ru" target="_blank">https://support.google.com/blogger/answer/46995?hl=ru</a></li>
<li>Выражения в тегах шаблонов<br /><a href="https://support.google.com/blogger/answer/6214580?hl=ru&ref_topic=12449" target="_blank">https://support.google.com/blogger/answer/6214580?hl=ru&ref_topic=12449</a></li>
<li>Layouts Data Tags<br /><a href="https://support.google.com/blogger/answer/47270" target="_blank">https://support.google.com/blogger/answer/47270</a></li>
</ul>
<br />
<br />
<br /></div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0tag:blogger.com,1999:blog-7834184402764284675.post-37508517602766722242015-09-25T00:54:00.001+03:002016-04-20T11:41:55.560+03:00Как стать дизайнером без специального образования?<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Карен Ченг — бывшая сотрудница Microsoft, которая совсем недавно не имела ни малейшего понятия о дизайне, рассказала о том, как смогла самостоятельно освоить профессию дизайнера и даже получить работу. И все это без специального образования.<br />
<br />
<br />
<a name='more'></a><br /></div>
Карен стала довольно известной после своего ролика «
<a href="http://www.youtube.com/watch?v=daC2EPUh22w&feature=player_embedded" target="_blank">Как научиться танцевать за год</a>». Бросив работу на корпорацию (Карен занималась продуктами Office), девушка начала заниматься танцами, за 12 месяцев продемонстрировав грандиозный успех. Сейчас Карен — единственный дизайнер в компании Exec. Она получила это место, не имея никакого специального дизайнерского образования — всё сама, своими силами.<br />
Карен не кривит душой: она начала учиться дизайну прямо во время работы на Microsoft. Девушка признаёт, что не дотягивает до людей с дипломами магистров дизайна, но всё-таки кое-что умеет, раз её взяли на работу.<br />
<br />
В Exec Карен выполняет широкий спектр работ: визуальный дизайн, печатка, веб, мобильные приложения. Так что давайте с вами поймём, как всего этого добиться в сжатые сроки.<br />
<i>Прим. редакции: книги и курсы, которые советует Карен, англоязычные. Мы не считаем это проблемой, ведь проблема — это незнание базового английского в 2013 году. Поэтому если захотите перевод, то вам придётся самостоятельно провести небольшой рисёрч.</i><br />
<h2>
1. Научитесь видеть</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKUf_5WT3bVV7WgOQiZfkwS-ls946mCqwgJCP_GAUwAHp8SGdYK5_VEE5-FVu1jOGd0r2ve5XWoYWMqcfIzoG7QPaoPTh7v_1gHxcoqJXfndyr6dwsiA-rqwCMXQvYMi-ax8YAgYTILKg/s1600/kak-stat-dizajnerom-bez-specialnogo-obrazovaniya1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKUf_5WT3bVV7WgOQiZfkwS-ls946mCqwgJCP_GAUwAHp8SGdYK5_VEE5-FVu1jOGd0r2ve5XWoYWMqcfIzoG7QPaoPTh7v_1gHxcoqJXfndyr6dwsiA-rqwCMXQvYMi-ax8YAgYTILKg/s1600/kak-stat-dizajnerom-bez-specialnogo-obrazovaniya1.jpg" /></a></div>
<br />
Самую большую ошибку совершают тогда, когда стремятся овладеть Photoshop слишком быстро. Знание Photoshop не сделает из вас дизайнера, как покупка кистей не сделает из вас художника. Начинать следует с основ.<br />
Сперва научитесь рисовать.<br />
<ul>
<li>Вам не нужно сидеть в одной комнате с кучкой таких же чайников, пытаясь нарисовать голую тётку. </li>
<li>Вам вообще не нужно особо преуспевать в рисовании, просто изучите базовые вещи, чтобы уметь набрасывать кое-что карандашиком.</li>
<li>Для этого вам следует сделать одну вещь: купить книгу <a href="http://www.amazon.com/You-Can-Draw-30-Days/dp/0738212415/ref=sr_1_1?ie=UTF8&qid=1371607474&sr=8-1&keywords=you+can+draw+in+30+days">You Can Draw in 30 days</a> и практиковаться по ней по полчаса в день на протяжении месяца. Это одна из лучших книг по рисованию. </li>
</ul>
Изучите основы графического дизайна.<br />
<ul>
<li>Начните с книги <a href="http://www.amazon.com/Picture-This-How-Pictures-Work/dp/1587170302/ref=sr_1_1?s=books&ie=UTF8&qid=1371607522&sr=1-1&keywords=picture+this">Picture This</a>. Она основана на сказке о Красной Шапочке, но одновременно учит основам графдизайна и рисунка.</li>
<li>Изучайте цвета, шрифты, сетку. Если в пределах доступности есть курсы — смело записывайтесь.</li>
<li>Каждый день занимайтесь по <a href="http://psd.tutsplus.com/articles/web/50-totally-free-lessons-in-graphic-design-theory/" target="_blank">этим урокам</a>.</li>
</ul>
Изучите основы UX.<br />
<ul>
<li>Об этом написаны десятки книг. На верный путь вас направят эти две:</li>
<li><a href="http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107/ref=sr_1_1?s=books&ie=UTF8&qid=1371607869&sr=1-1&keywords=the+design+of+everyday+things">The Design of Everyday Things</a></li>
<li><a href="http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=sr_1_1?s=books&ie=UTF8&qid=1371607999&sr=1-1&keywords=don%27t+make+me+think">Don’t Make Me Think!</a></li>
</ul>
Научитесь писать.<br />
<ul>
<li>В этом отличие никудышного дизайнера: все эскизы заполнены приевшейся «рыбой» Lorem Ipsum. У хорошего дизайнера всё хорошо и с коммуникацией. Он продумывает весь пользовательский опыт, включая каждое слово. Пишите для людей. Не пишите тем канцелярским языком, который вы использовали для успешной сдачи работ в университете.</li>
<li>Прочтите <a href="http://www.amazon.com/Made-Stick-Ideas-Survive-Others/dp/1400064287/ref=sr_1_1?s=books&ie=UTF8&qid=1371608230&sr=1-1&keywords=made+to+stick">Made to Stick</a>, эта вещь научит вас проникать в умы читателей.</li>
<li>На сайте <a href="http://voiceandtone.com/">Voice and Tone</a> полно примеров хороших текстов (<i>может, что-то такое и на русском есть?</i>).</li>
</ul>
<h2>
2. Научитесь использовать Photoshop и Illustrator</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe3I5JH7L4aYraYllQFXUZYzk1JgQPu0rNFdGrJAVxALSJ6a2nXTaS4UO9prNmTrZ15n6C_qAwKFfch2JROTbe-1qkTlVqn01YuDuSxhFGjJyUHEpdHa6ZLMJJAp94siwuz6aFLzuIt4zi/s1600/kak-stat-dizajnerom-bez-specialnogo-obrazovaniya2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe3I5JH7L4aYraYllQFXUZYzk1JgQPu0rNFdGrJAVxALSJ6a2nXTaS4UO9prNmTrZ15n6C_qAwKFfch2JROTbe-1qkTlVqn01YuDuSxhFGjJyUHEpdHa6ZLMJJAp94siwuz6aFLzuIt4zi/s1600/kak-stat-dizajnerom-bez-specialnogo-obrazovaniya2.jpg" /></a></div>
<h2>
</h2>
Ура, теперь вы достаточно шарите в визуалке и UX. И вы готовы изучать Photoshop. Вообще-то, лучше начинать с Illustrator, а потом уже двигаться к Photoshop. Именно Illustrator используется при создании логотипов и иконок.<br />
Учим Illustrator.<br />
<ul>
<li>Существуют тысячи книг, онлайн-курсов, мастер-классов. Выберите что-то, что подходит именно вам. Вот две книги, которые могут помочь особенно:</li>
<li><a href="http://www.amazon.com/Adobe-Illustrator-CS6-Classroom-Book/dp/032182248X/ref=sr_1_1?s=books&ie=UTF8&qid=1371608559&sr=1-1&keywords=adobe+illustrator+classroom+in+a+book">Adobe Illustrator Classroom in a Book</a> — довольно скучная, но если вы осилите хотя бы половину, то будете уже недурно знать программу.</li>
<li><a href="http://www.amazon.com/Vector-Basic-Training-Systematic-Precision/dp/0321749596/ref=sr_1_1?s=books&ie=UTF8&qid=1371608619&sr=1-1&keywords=Vector+basic+training">Vector Basic Training</a> – эта книга научит вас делать действительно приятные глазу вещи в Illustrator.</li>
<li>Теперь кое-что повеселее — эти онлайн-уроки помогут делать очень крутые штуки, вот два <a href="http://vector.tutsplus.com/tutorials/text-effects/creating-an-environmentally-friendly-green-type-treatment/" target="_blank">самых</a> <a href="http://vector.tutsplus.com/tutorials/illustration/how-to-create-a-landscape-wallpaper-for-your-desktop/" target="_blank">клёвых</a>.</li>
</ul>
Учим Photoshop.<br />
<ul>
<li>Здесь, конечно, миллиард материалов. Большинство из них — полный кал. К счастью, есть на самом деле высококлассные сайты, например, <a href="http://psd.tutsplus.com/" target="_blank">PSDTuts</a> и <a href="https://tutsplus.com/" target="_blank">TutsPlus</a>.</li>
<li>Есть отличный <a href="http://psd.tutsplus.com/tutorials/interface-tutorials/mobile-ui-how-to-redesign-the-spendometer-iphone-app-part-1/" target="_blank">мануал</a> по созданию приложения под iPhone в Photoshop.</li>
<li>Есть ещё один мануал — он про <a href="http://webdesign.tutsplus.com/tutorials/basics-create-a-clean-magazine-blog-theme-day-1-design/" target="_blank">макет сайта</a>.</li>
<li>Выбирайте час или два в день на занятия по этим материалам, и вы поразитесь, насколько быстрым будет ваш прогресс.</li>
</ul>
<h2>
3. Изучайте что-то более узкое</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMvEJwiKoRRVTyUv6awOGJF4Ul1YiYuhqRVSo10GATugN05McfTe_vx0RMRUfCjmQxZfaqMQ4MgYG1ipjJuBfdzhPwNMkLR87mGe7f_qLIakJG2IhgytQBJCChfr0NyzLjiIb_MNLbO6u/s1600/kak-stat-dizajnerom-bez-specialnogo-obrazovaniya3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMvEJwiKoRRVTyUv6awOGJF4Ul1YiYuhqRVSo10GATugN05McfTe_vx0RMRUfCjmQxZfaqMQ4MgYG1ipjJuBfdzhPwNMkLR87mGe7f_qLIakJG2IhgytQBJCChfr0NyzLjiIb_MNLbO6u/s1600/kak-stat-dizajnerom-bez-specialnogo-obrazovaniya3.jpg" /></a></div>
<br />
Хотите рисовать мобильные приложения, сайты, инфографику? Покопайтесь в этом, а потом выберите, что вам нравится больше.<br />
Дизайн логотипов.<br />
<ul>
<li>Узнайте, как сделать логотип, который не стыдно показывать: <a href="http://www.amazon.com/Logo-Design-Love-Creating-Identities/dp/0321660765/ref=sr_1_1?ie=UTF8&qid=1371614766&sr=8-1&keywords=logo+design+love">Logo Design Love</a>.</li>
<li>Вам захочется делать нечто большее, чем просто логотипы. Научитесь строить всю структуру бренда, от сайта до визиток. В этом может помочь одна книга — <a href="http://www.amazon.com/Designing-Brand-Identity-Essential-Branding/dp/1118099206/ref=sr_1_1?s=books&ie=UTF8&qid=1371615083&sr=1-1&keywords=designing+brand+identity">Designing Brand Identity</a>.</li>
</ul>
Дизайн мобильных приложений.<br />
<ul>
<li>Начните с этого <a href="http://psd.tutsplus.com/tutorials/interface-tutorials/mobile-ui-how-to-redesign-the-spendometer-iphone-app-part-1/" target="_blank">мануала</a>, чтобы немного окунуться в визуальный дизайн приложений.</li>
<li>Прочитайте эту короткую, но очень крепкую книгу про дизайн iPhone-приложений: <a href="http://www.amazon.com/Tapworthy-Designing-Great-iPhone-Apps/dp/1449381650/ref=sr_1_1?ie=UTF8&qid=1371619592&sr=8-1&keywords=tapworthy">Tapworthy</a>. Она о том, как сделать не только красивое, но и удобное в использовании приложение.</li>
<li>Пробегитесь по приложениям в своём смартфоне. Окиньте их взглядом критика: что там работает хорошо, а что не очень?</li>
</ul>
Веб-дизайн.<br />
<ul>
<li>Прочтите <a href="http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=sr_1_1?ie=UTF8&qid=1371615719&sr=8-1&keywords=don%27t+make+me+think">Don’t Make Me Think</a>, чтобы узнать, как сделать сайт, которым удобно пользоваться.</li>
<li>Прочтите <a href="http://www.amazon.com/Principles-Beautiful-Web-Design/dp/098057689X/ref=sr_1_1?s=books&ie=UTF8&qid=1371615763&sr=1-1&keywords=principles+of+beautiful+web+design">The Principles of Beautiful Web Design</a>, если вы хотите, чтобы ваш сайт выглядел хорошо.</li>
<li>Соберите список сайтов, которые, по вашему мнению, отлично выглядят. Выпишите себе, что у них общего.</li>
</ul>
Теперь о насущном вопросе, нужно или не нужно знать HTML/CSS, чтобы быть дизайнером: это зависит от работы. Знание основ разработки даст вам преимущество на рынке труда, конечно же. Даже если вы не хотите становиться веб-разработчиком, эта база не помешает: вы хотя бы будете знать, что реализуемо, что нет. Есть очень много крутых ресурсов для изучения HTML и CSS:<br />
<ul>
<li>Один из лучших бесплатных: <a href="http://webdesign.tutsplus.com/">Web Design Tuts</a>.</li>
<li>Один из лучших платных (25 баксов в месяц, это ок) — <a href="http://teamtreehouse.com/">Treehouse</a>. Если вы начинаете с нуля, и хотите доходчивых объяснений — то это то, что доктор прописал.</li>
</ul>
<h2>
4. Собирайте портфолио</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNYjCj5wk-VB76rUIrd6MjxAO33Wwx8MdeEXfVSyqWcewSOR8Ij9nmZkmnu6UlaY2qiNDzCjcUZVdjV19QELKI5zFUZK2QoP4Lt6_8iP_ocGRAfoY85-dRE7HLutN-A4XMTS3Jyp22_kki/s1600/kak-stat-dizajnerom-bez-specialnogo-obrazovaniya4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNYjCj5wk-VB76rUIrd6MjxAO33Wwx8MdeEXfVSyqWcewSOR8Ij9nmZkmnu6UlaY2qiNDzCjcUZVdjV19QELKI5zFUZK2QoP4Lt6_8iP_ocGRAfoY85-dRE7HLutN-A4XMTS3Jyp22_kki/s1600/kak-stat-dizajnerom-bez-specialnogo-obrazovaniya4.jpg" /></a></div>
<br />
Чтобы найти работу, не обязательно посещать какое-то крутое учебное заведение. Но портфолио — обязательно. Как начать собирать портфолио, если вы только встали на тернистый дизайнерский путь? Хорошая новость в том, что вам необязательно работать над настоящими проектами и с настоящими клиентами, чтобы у вас было, что положить в папочку. Делайте что-то своё:<br />
<ul>
<li>Разрабатывайте забавные принты для футболок.</li>
<li>Найдите дурно сделанные сайты и попытайтесь их редизайнить.</li>
<li>Есть идея для мобильного приложения? Так набросайте его.</li>
<li>Присоединитесь к одной из команд на всяких Стартап-Уикендах в качестве дизайнера.</li>
<li>Попробуйте делать небольшие штучки на <a href="http://99designs.com/" target="_blank">99 designs</a>.</li>
<li>Выполняйте упражнения из книги <a href="http://www.amazon.com/Creative-Workshop-Challenges-Sharpen-Design/dp/1600617972/ref=sr_1_1?ie=UTF8&qid=1371616567&sr=8-1&keywords=creative+workshop">Creative Workshop</a>.</li>
<li>Найдите местную НКО и попроситесь дизайнировать у них.</li>
</ul>
Поборите в себе желание включить в портфолио абсолютно всё, что вышло из-под вашего пера. Там нужно выставить только самые лучшие работы.<br />
Крадите, крадите и крадите. Не беспокойтесь о том, чтоб быть оригинальным — это придёт со временем, когда вы уже немного освоите ремесло. Когда учишься играть на музыкальном инструменте, то всегда сначала играешь чужие песни, а потом начинаешь придумывать свои. В
<a href="http://www.amazon.com/Steal-Like-Artist-Things-Creative/dp/0761169253/ref=sr_1_1?s=books&ie=UTF8&qid=1371616653&sr=1-1&keywords=steal+like+an+artist" target="_blank">дизайне</a> то же самое.<br />
На сайте
<a href="http://dribbble.com/" target="_blank">Dribbble</a> вы найдёте немало источников вдохновения. В разработке под iOS помогут <a href="http://pttrns.com/">pttrns</a>, а при веб-дизайне — <a href="http://patterntap.com/">patterntap</a>.<br />
<h2>
5. Устройтесь на работу дизайнером</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0IqtrLrplg4QWjPUzEjs8vhuPJXAawbtgK2s2IhkKubbFdkX7anDsWDeqPwonol3dKE-lnr-BO0fZOIHuwHZLqnY_PitgtsWPa_MDKP31YcsctxP21CGA2euJsWOQPBhRehktyWBCQPQ2/s1600/kak-stat-dizajnerom-bez-specialnogo-obrazovaniya5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0IqtrLrplg4QWjPUzEjs8vhuPJXAawbtgK2s2IhkKubbFdkX7anDsWDeqPwonol3dKE-lnr-BO0fZOIHuwHZLqnY_PitgtsWPa_MDKP31YcsctxP21CGA2euJsWOQPBhRehktyWBCQPQ2/s1600/kak-stat-dizajnerom-bez-specialnogo-obrazovaniya5.jpg" /></a></div>
<br />
Когда я начинала изучать дизайн, я отправилась на тренинг по поиску работы. Я зашла в комнату, а там уже было полно дизайнеров, куда более опытных, чем я — 5, 10, 15 лет опыта. И они все искали работу. Это выглядело устрашающе. Я, пытающаяся изучать дизайн самостоятельно, против всех этих столпов.<br />
И вот, 6 месяцев спустя, у меня есть работа. Между мной и всеми прочими дизайнерами было одно ключевое отличие: я знала, как работать с разработчиками.<br />
Это крупнейший фактор, который делает вас конкурентоспособным на рынке труда. Изучите основы проектирования, HTML и CSS. Дизайнеры в IT-индустрии крайне востребованы и хорошо оплачиваемы.<br />
Вот где стоит искать работу. Если у вас нет опыта общения с разработчиками, попробуйте его получить. На стартап-уикендах, хакатонах,
<a href="http://collabfinder.com/" target="_blank">через интернет</a>.<br />
Создайте личный сайт и сделайте своё портфолио его центральной частью.<br />
Используйте связи — рассказывайте всем вокруг, что ищете работу дизайнером. Никогда не знаешь, куда тебя заведёт социальный граф.<br />
Изучите компании, где вам хотелось бы работать. Поищите в LinkedIn или «Моём Круге» людей, которые там заняты. Поговорите с ними, они могут вам помочь. Связи — лучший способ попасть на работу (
<i>здесь не имеется в виду старинная русская забава, которая называется «блат» — прим. ред.</i>)<br />
<h2>
Когда получите работу, не прекращайте учиться</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimAjZVMWUAX-LCIWb8uHbsKkw_OPwTRdSMjBAdM4zddAddJ_znYCZCutgeDHJ9b8LHoLdFPS5QjqOaHUgPF0hwtAcKoMlQjyAauEC0Bqjbox_BO_Co9CUExozL40ScUKm7ZhBdlss1xuvP/s1600/kak-stat-dizajnerom-bez-specialnogo-obrazovaniya6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimAjZVMWUAX-LCIWb8uHbsKkw_OPwTRdSMjBAdM4zddAddJ_znYCZCutgeDHJ9b8LHoLdFPS5QjqOaHUgPF0hwtAcKoMlQjyAauEC0Bqjbox_BO_Co9CUExozL40ScUKm7ZhBdlss1xuvP/s1600/kak-stat-dizajnerom-bez-specialnogo-obrazovaniya6.jpg" /></a></div>
<br />
Я работаю в Exec уже год и узнала много нового. Я нахожу дизайнеров круче себя и учусь у них. Я использую онлайн-курсы <a href="http://www.skillshare.com/classes?school=design">Skillshare</a>, <a href="https://generalassemb.ly/">General Assembly</a>, <a href="http://teamtreehouse.com/">Treehouse</a>, и <a href="https://tutsplus.com/">TutsPlus</a>. Я работаю над побочными проектами. Я зависаю в профильной секции в книжном.<br />
Ещё есть куча всего, что можно узнать. Держите ухо востро!<br />
<br />
Источник: https://vc.ru/p/kak-stat-dizaynerom-bez-spetsialnogo-obrazovaniya-na-primere-zvezdyi-youtube <br />
<br /></div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com1tag:blogger.com,1999:blog-7834184402764284675.post-29900771436846955102015-09-18T20:15:00.000+03:002015-09-29T16:07:01.693+03:00Шаблоны для blogger. Коллекция 2015<div dir="ltr" style="text-align: left;" trbidi="on">
Небольшая коллекция шаблонов, которые можно применить к блогам, созданным на технологии blogger, а также для популярного WordPress. <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_tqyd2lcOsA19VNhgW9I_jPVBIi63b4HZ4cP7xQ3BhfYPvdk9eyglg-pcwDD3_BKnqdakptAtgcswz1vd6HlqBBqQy-3t80UpOT9TgDej_wsGSGH-KLmbccRKTn3T4pq6NwnMfURf0RX/s1600/hero-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_tqyd2lcOsA19VNhgW9I_jPVBIi63b4HZ4cP7xQ3BhfYPvdk9eyglg-pcwDD3_BKnqdakptAtgcswz1vd6HlqBBqQy-3t80UpOT9TgDej_wsGSGH-KLmbccRKTn3T4pq6NwnMfURf0RX/s1600/hero-blogger.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<br />
<a name='more'></a><br />
<h3 style="text-align: left;">
Responsive themes</h3>
Следующие темы включают в себя дополнительный дизайн для мобильных устройств.<br />
<br />
<h4 style="text-align: left;">
Inventive </h4>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5GSzhwOGf15_1-3AKJV5ms-9zRHYsE-Z5AuKI3hGh8Jx9aF4v3yClw2Og5dGYldSVY_H7KEnE9Ev3zsgsWG-lG0VfGFWn0heILs14ug8DW0RudWrotRTmCqWiMEeXLy-IL4rO1mqQop0f/s1600/Inventive-Portfolio-Blogger-Template.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5GSzhwOGf15_1-3AKJV5ms-9zRHYsE-Z5AuKI3hGh8Jx9aF4v3yClw2Og5dGYldSVY_H7KEnE9Ev3zsgsWG-lG0VfGFWn0heILs14ug8DW0RudWrotRTmCqWiMEeXLy-IL4rO1mqQop0f/s1600/Inventive-Portfolio-Blogger-Template.jpg" /></a> <a class="shortc-button small black external" href="http://gooyaabitemplates.com/livepreview/inventive/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black external" href="https://app.box.com/s/oy70u8w05yef6czigmompi2zhlqm36d0" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Download</a><br />
<br />
<br />
<br />
<h4 style="text-align: left;">
Gridz </h4>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiktv6hZfHQAsVfJAGnvFABpqvYA7uhhbNfRaApdurwHCzgGZYFq5ZqrFY36QHUtqDY-B0GPL6dNw0uWWVL7YfROqGSl2Rv-SFUpQTfz0JqG9heyQlKmfAGZa_2G-tBoOcnK3mTWfr3O0Fl/s1600/Gridz-responsive-blogger-template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiktv6hZfHQAsVfJAGnvFABpqvYA7uhhbNfRaApdurwHCzgGZYFq5ZqrFY36QHUtqDY-B0GPL6dNw0uWWVL7YfROqGSl2Rv-SFUpQTfz0JqG9heyQlKmfAGZa_2G-tBoOcnK3mTWfr3O0Fl/s1600/Gridz-responsive-blogger-template.png" /></a> <a class="shortc-button small black external" href="http://gridz-themexpose.blogspot.com/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a href="http://www.themexpose.com/2015/06/gridz-responsive-blogger-template.html" target="_blank"><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span></a><a class="shortc-button small black external" href="http://www.themexpose.com/2015/06/gridz-responsive-blogger-template.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">More info</a><br />
<br />
<br />
<h4 style="text-align: left;">
<b>Creative</b></h4>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxueWKb-GG7jYykJ3820sVpc3Mmro9ZWf7YnhYjiL1zFG5P4o4uhDPJE8wDUKDdItfrZH7kXTkNbaFgKmr3PpzfYG9U08pRqgCyAS6X1hFg7jeDz2yZNDSDyB_F3YF0ayr9a9gJbTc2A4N/s1600/Creative-Clean-Responsive-Blogger-Template3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxueWKb-GG7jYykJ3820sVpc3Mmro9ZWf7YnhYjiL1zFG5P4o4uhDPJE8wDUKDdItfrZH7kXTkNbaFgKmr3PpzfYG9U08pRqgCyAS6X1hFg7jeDz2yZNDSDyB_F3YF0ayr9a9gJbTc2A4N/s1600/Creative-Clean-Responsive-Blogger-Template3.jpg" /></a><b> </b><a class="shortc-button small black external" href="http://creative-demo-themexpose.blogspot.in/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black external" href="http://www.themexpose.com/2015/01/creative-clean-responsive-blogger.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">More info</a><br />
<br />
<h4 style="text-align: left;">
Xmax</h4>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsSFLHTejRi-f4XaXC9DvHKyXojPGfIiRFgxBihgFoFFFSyEXAUpu_WiCNUtaOM4LCqDLXF7mpelij1HgwZQhb_XMEjvGevvvCNlasB8VA9RRWvMzC18-eX91hiUccMBWg1kLZeolpQCVm/s1600/Xmax-free-one-page-portfolio-blogger-template.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsSFLHTejRi-f4XaXC9DvHKyXojPGfIiRFgxBihgFoFFFSyEXAUpu_WiCNUtaOM4LCqDLXF7mpelij1HgwZQhb_XMEjvGevvvCNlasB8VA9RRWvMzC18-eX91hiUccMBWg1kLZeolpQCVm/s1600/Xmax-free-one-page-portfolio-blogger-template.jpg" /></a> <a class="shortc-button small black external" href="http://xmax-theme.blogspot.com/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black external" href="http://www.templateism.com/2014/06/xmax-one-page-portfolio-blogger-template.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">More info</a><br />
<br />
<br />
<h4 style="text-align: left;">
Madone </h4>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGI_KwmVtpTXyCC0xfBQd_gP7DOhcUJMc3Lp3PyLEWubiI8totIPE7Q2KhTYEnMXboImMqTlyrqQ9w08_gXAeetz1oJ72oK-IpS4S5nYupVIobBOHHrv6pKWrTC0RJVhnJgZ6ef9Onxaoz/s1600/Madone-Responsive-Blogger-Template.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGI_KwmVtpTXyCC0xfBQd_gP7DOhcUJMc3Lp3PyLEWubiI8totIPE7Q2KhTYEnMXboImMqTlyrqQ9w08_gXAeetz1oJ72oK-IpS4S5nYupVIobBOHHrv6pKWrTC0RJVhnJgZ6ef9Onxaoz/s1600/Madone-Responsive-Blogger-Template.jpg" /></a> <a class="shortc-button small black external" href="http://madone-soratemplates.blogspot.in/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black external" href="http://www.soratemplates.com/2015/08/madone-blogger-templates.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Download</a><br />
<br />
<h4 style="text-align: left;">
CockTail</h4>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW5OeAzreeqEcRdeiCmRXcf8KlrwpPKPEsNrHDKS3B7JrmECBKVNNWeMw64WExFtOKB4xpECC9cr94w0zod3mw4Gig-YaazgcJ3_VTFclzbAEeGdtkXGuIBolySTQvRQI5IO9UD5D6rQND/s1600/CockTail+Blogger+Template.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW5OeAzreeqEcRdeiCmRXcf8KlrwpPKPEsNrHDKS3B7JrmECBKVNNWeMw64WExFtOKB4xpECC9cr94w0zod3mw4Gig-YaazgcJ3_VTFclzbAEeGdtkXGuIBolySTQvRQI5IO9UD5D6rQND/s1600/CockTail+Blogger+Template.jpg" /></a> <a class="shortc-button small black external" href="http://cocktail-soratemplates.blogspot.com/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black external" href="http://www.soratemplates.com/2015/01/cocktail-blogger-templates.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">More info</a><br />
<br />
<h4 style="text-align: left;">
Gossip</h4>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnKCUUEaEA5pxuRkABySnStlroKVaGLk2ujsMM64cUixV1bVIBCQmcvUByZxXO4ghoSHlQm4dcRjbtEcSIDDP2Xi3B0W3gWUvSE9NgYyr8nZwy2772sZ9Wj6ta0ik-k5kjLh9xehLfhjea/s1600/Gossip+scrnsht.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnKCUUEaEA5pxuRkABySnStlroKVaGLk2ujsMM64cUixV1bVIBCQmcvUByZxXO4ghoSHlQm4dcRjbtEcSIDDP2Xi3B0W3gWUvSE9NgYyr8nZwy2772sZ9Wj6ta0ik-k5kjLh9xehLfhjea/s1600/Gossip+scrnsht.jpg" /></a> <a class="shortc-button small black external" href="http://demo.veethemes.com/demo?theme=Gossip" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> </span><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;">| </span></span><a href="http://www.veethemes.com/2015/01/gossip-creative-magazine-blogger.html" target="_blank"><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span></a><a class="shortc-button small black external" href="http://www.veethemes.com/2015/01/gossip-creative-magazine-blogger.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">More info</a></div>
<br />
<h4 style="text-align: left;">
VIPfolio Responsive Portfolio</h4>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMY8tqV0BXmDWO4tLxOhQu-lEpxvenpLHOTCWm0xNXFZlEoGX4Xak1gcizeAsXuIEcXuRZ0xYnR4QH1xFErBsRbbF638l-2_hRLnI2H91CCBGn-xV4a44xb-vUutg0Cvx8IskWlkbsmwbi/s1600/vipfolio-responsive-portfolio.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMY8tqV0BXmDWO4tLxOhQu-lEpxvenpLHOTCWm0xNXFZlEoGX4Xak1gcizeAsXuIEcXuRZ0xYnR4QH1xFErBsRbbF638l-2_hRLnI2H91CCBGn-xV4a44xb-vUutg0Cvx8IskWlkbsmwbi/s1600/vipfolio-responsive-portfolio.png" /></a> <a class="shortc-button small black external" href="http://my.weblogtemplates.net/preview/index?theme=vipfolio" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a href="http://www.weblogtemplates.net/2014/03/vip-responsive-portfolio-blogger.html" target="_blank"><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span></a><a class="shortc-button small black external" href="http://www.weblogtemplates.net/2014/03/vip-responsive-portfolio-blogger.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">More info</a><br />
<br />
<h4 style="text-align: left;">
Phantom</h4>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRt-LzPphL4z9c6cVw0apACn1vKlkh6IJtAVTWxNRotbhe1ghB6POVgB71Uk9rJYvf8fWj21a0w3dbKxa_97E6MibeyXtEGpEFp61jO1UjMOpyqd58cbdxw0Y8QhhB2ScL3Dwj_DBwzYC-/s1600/Phantom-Free-Responsive-Blogger-Template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRt-LzPphL4z9c6cVw0apACn1vKlkh6IJtAVTWxNRotbhe1ghB6POVgB71Uk9rJYvf8fWj21a0w3dbKxa_97E6MibeyXtEGpEFp61jO1UjMOpyqd58cbdxw0Y8QhhB2ScL3Dwj_DBwzYC-/s1600/Phantom-Free-Responsive-Blogger-Template.jpg" /></a> <a class="shortc-button small black external" href="http://allyssapermatalestari.blogspot.in/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> </span><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;">| </span><a class="shortc-button small black external" href="http://arlinadesign.blogspot.in/2015/06/phantom-free-responsive-blogger-template.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">More info</a> </div>
<div style="text-align: left;">
<br /></div>
<h4 style="text-align: left;">
ReDesign</h4>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGO2A28vBbKNFkhtUMcOIV4F3WZblxfyQEBccaWOUE88-_vEuWEzwxLuyq3WVc9IXtHxa0gsaXWe9tVV5cBf8u7AUTXQTSz1hXaIq6lhCK87DlNeY4DcV2jIftJ4c-zS3wiYXLu4RsGrG6/s1600/ReDesign-Responsive-Blogger-Template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGO2A28vBbKNFkhtUMcOIV4F3WZblxfyQEBccaWOUE88-_vEuWEzwxLuyq3WVc9IXtHxa0gsaXWe9tVV5cBf8u7AUTXQTSz1hXaIq6lhCK87DlNeY4DcV2jIftJ4c-zS3wiYXLu4RsGrG6/s1600/ReDesign-Responsive-Blogger-Template.jpg" /></a> <a class="shortc-button small black external" href="http://redesign-sbt.blogspot.in/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> </span><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;">| </span><a class="shortc-button small black external" href="http://gooyaabitemplates.com/download/ReDesign-Free-Version.zip" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Download</a> <br />
<br />
<br />
<br />
<br />
<h3 style="text-align: left;">
Non-Responsive themes</h3>
<h4 style="text-align: left;">
Modern Blog</h4>
<div style="text-align: left;">
На мобильном устройстве этот шаблон выглядит так же как и на компьютере. </div>
<div style="text-align: left;">
<br /></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLdxG09gwFbXL-CnyBf-2A2sniP442jLU9IvB5xOvA0bOY0rZSc47mYVevEjZ3vI3ICZq3GTfuPOJRwVBaBFE9IDUvFdr6nHdRWvfxze-EE3YL2GFUvlZMDUhITwLPzd-QfLppb8MjTuK4/s1600/modern-blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLdxG09gwFbXL-CnyBf-2A2sniP442jLU9IvB5xOvA0bOY0rZSc47mYVevEjZ3vI3ICZq3GTfuPOJRwVBaBFE9IDUvFdr6nHdRWvfxze-EE3YL2GFUvlZMDUhITwLPzd-QfLppb8MjTuK4/s1600/modern-blog.jpg" /></a>
<a class="shortc-button small black external" href="http://modernblog-soratemplates.blogspot.in/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black external" href="http://www.soratemplates.com/2013/06/modernblog-blogger-template.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Download</a><br />
<br />
<br />
<h4 style="text-align: left;">
Scopic</h4>
<div style="text-align: left;">
На мобильном устройстве этот шаблон выглядит с дизайном, предлагаемым blogger по умолчанию.</div>
<div style="text-align: left;">
</div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjumB4xDWN1BgDob7bpa4EgDVLIoswziodFc-GT4XuyiN93SNDATH6fZn_tQw8TQYcTXuhuVOamc8ZLN3BH1fQE0L_3eTCHViET79NeF4dySQDuEbhQ-Vcbq2IBxnD9FSONHglsMImFtrHV/s1600/scopic.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjumB4xDWN1BgDob7bpa4EgDVLIoswziodFc-GT4XuyiN93SNDATH6fZn_tQw8TQYcTXuhuVOamc8ZLN3BH1fQE0L_3eTCHViET79NeF4dySQDuEbhQ-Vcbq2IBxnD9FSONHglsMImFtrHV/s1600/scopic.jpg" /></a> <a class="shortc-button small black external" href="http://scopic-template.blogspot.in/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black external" href="http://www.templatetrackers.com/2014/04/scopic-blogger-theme.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Download</a><br />
<br />
<br />
<h4 style="text-align: left;">
Aurana</h4>
<div style="text-align: left;">
На мобильном устройстве этот шаблон выглядит так же как и на компьютере. </div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY0or991VW-eV2a9KZAY08hblw5X4ACDeXq2TJ40g7EehHAVE04U5sasrLArHDmJvTYLpNk8iFYL_NQVqrl9ZRe8nXv7qcgpamUax7xXaB6e0UE5Y3sXJXfDasxlypb82eXDMKjrVrAa2Q/s1600/aurana.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY0or991VW-eV2a9KZAY08hblw5X4ACDeXq2TJ40g7EehHAVE04U5sasrLArHDmJvTYLpNk8iFYL_NQVqrl9ZRe8nXv7qcgpamUax7xXaB6e0UE5Y3sXJXfDasxlypb82eXDMKjrVrAa2Q/s1600/aurana.jpg" /></a> </div>
<a class="shortc-button small black external" href="http://aurana-soratemplates.blogspot.in/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black external" href="https://app.box.com/s/uy9a2renlzpr8h6zhobs" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Download</a><br />
<h4 style="text-align: left;">
</h4>
<h4 style="text-align: left;">
</h4>
<div style="text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<h4 style="text-align: left;">
<b>Pebbles Portfolio</b></h4>
<div style="text-align: left;">
На мобильном устройстве этот шаблон выглядит так же как и на компьютере. </div>
<div style="text-align: left;">
</div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT3KTt3sJ_sYlT4p3ArWiGyFbUJJZpHoSLKi9dcLVOdGQcSnqNXzpCtE0B729d4zuvTWjU4VEaB2zy88V2CvhD4EDB55VjThqRy03MjWceyINdGmwbj3lW8BC53Hs5FbOpcT3O6T_PLHJH/s1600/Pebbles-Portfolio-blogger-template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT3KTt3sJ_sYlT4p3ArWiGyFbUJJZpHoSLKi9dcLVOdGQcSnqNXzpCtE0B729d4zuvTWjU4VEaB2zy88V2CvhD4EDB55VjThqRy03MjWceyINdGmwbj3lW8BC53Hs5FbOpcT3O6T_PLHJH/s1600/Pebbles-Portfolio-blogger-template.jpg" /></a> <a class="shortc-button small black external" href="http://demo.oddthemes.com/?theme=Pebbles" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black external" href="http://www.oddthemes.com/2015/07/pebbles-portfolio-blogger-template.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">More info</a><br />
<br />
<br />
<h4 style="text-align: left;">
<b>Revoltify V2 Responsive Blogger Templates</b></h4>
<div style="text-align: left;">
Ссылка на демо у них перестала работать, поэтому не понятно как выглядит этот сайт в реальности.</div>
<div style="text-align: left;">
<b><br /></b></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrtPKyZ7TTMcSoLoB20OlMPCGbT2nGCzSUDCPyqzb_nK806a4pbt_uATS-xm9vkNOr0cIMS76g37_WJmGEeIw0CdKqWCmkCp74Vucy-Ls6wGQ5qBQLmm-Z_iJPQktvw013ipYEo55ZaQ4r/s1600/Revoltify+Responsive+Blogger+Template+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrtPKyZ7TTMcSoLoB20OlMPCGbT2nGCzSUDCPyqzb_nK806a4pbt_uATS-xm9vkNOr0cIMS76g37_WJmGEeIw0CdKqWCmkCp74Vucy-Ls6wGQ5qBQLmm-Z_iJPQktvw013ipYEo55ZaQ4r/s1600/Revoltify+Responsive+Blogger+Template+2.png" /></a> <span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> </span><a class="shortc-button small black external" href="http://www.kaizentemplate.com/2015/01/revoltify-v2-responsive-blogger-template.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">More info</a><br />
<br />
<br />
<h3 style="text-align: left;">
</h3>
<h4 style="text-align: left;">
Minimal - Clean & Responsive Blogger Template</h4>
<div style="text-align: left;">
<span style="font-weight: normal;">На мобильном устройстве этот шаблон выглядит с дизайном, предлагаемым blogger по умолчанию.</span></div>
<div style="text-align: left;">
<span style="font-weight: normal;"> </span> </div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi8IYbcCArsebGhsW_pTAHHOTcJ6VXvzhanayBf_7XVoM1ODgK0Cu4d11zIGpgtxaJaJo68pqWEjvOI4Jzcn-svnpe8QRT3ixPeGQ8p1_-nigTBYFLnwzzYh0xvhgGR3V-BYYdJtgCoEaS/s1600/Minimal-clean-responsive-blogger-templates.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi8IYbcCArsebGhsW_pTAHHOTcJ6VXvzhanayBf_7XVoM1ODgK0Cu4d11zIGpgtxaJaJo68pqWEjvOI4Jzcn-svnpe8QRT3ixPeGQ8p1_-nigTBYFLnwzzYh0xvhgGR3V-BYYdJtgCoEaS/s1600/Minimal-clean-responsive-blogger-templates.png" /></a> <a class="shortc-button small black external" href="http://demo.themexpose.com/?theme=Minimal" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black external" href="http://www.themexpose.com/2015/03/minimal-clean-responve-blogger-template.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">More info</a><br />
<div style="text-align: left;">
<br /></div>
<br />
<div style="text-align: left;">
<h4 style="text-align: left;">
BetaCommerce Shopping</h4>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgSUFXJOAqizdTcS9IgFlZ66HtqkilL46Jg6Qwu6m9OtHGiDD2KeWHEA9qcSB0Mprodv5lal2Vqq-C5UH7-N2Il-B05Efbx7ojOFxbTUrBOzvGoUXU5_1wZOytizZUaSnjT-SmZm2sgh5r/s1600/BetaCommerce-Shopping-Blogger-Template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgSUFXJOAqizdTcS9IgFlZ66HtqkilL46Jg6Qwu6m9OtHGiDD2KeWHEA9qcSB0Mprodv5lal2Vqq-C5UH7-N2Il-B05Efbx7ojOFxbTUrBOzvGoUXU5_1wZOytizZUaSnjT-SmZm2sgh5r/s1600/BetaCommerce-Shopping-Blogger-Template.png" /></a> <a class="shortc-button small black external" href="http://www.templateism.com/p/preview.html?url=http://betacommerce.blogspot.com/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black external" href="http://www.templateism.com/2014/10/betacommerce-shopping-blogger-template.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">More info</a></div>
<br />
<div style="text-align: left;">
<h4 style="text-align: left;">
Brand Mag UX</h4>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtg6fNDGz_yiHy4G5djNERaObiPEaA1PBuMSNINM2U6_E3F-0CjPOHPKNkpwErBbwDzrc8ZGgq1UY7kEctLCcc5vLPnNot5oaAd1OhAp5mjA8y60dhJlwq1lmq6fMdoVXKuIuNPc3xvbU/s1600/Brand-Mag-UX-Responsive-Blogger-Template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtg6fNDGz_yiHy4G5djNERaObiPEaA1PBuMSNINM2U6_E3F-0CjPOHPKNkpwErBbwDzrc8ZGgq1UY7kEctLCcc5vLPnNot5oaAd1OhAp5mjA8y60dhJlwq1lmq6fMdoVXKuIuNPc3xvbU/s1600/Brand-Mag-UX-Responsive-Blogger-Template.png" /></a> <a class="shortc-button small black external" href="http://www.templateism.com/p/preview.html?url=http://promagtheme.blogspot.com/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black external" href="http://www.templateism.com/2013/12/brand-mag-ux-responsive-blogger-template.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">More info</a><br />
<br />
<h4 style="text-align: left;">
ShotMag</h4>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJEMVPbEPfXP-jnpsLTzUpZHuUX_PCFeG9l1VaMqFf_Y2lQk18ShMg3TFUjAr_KRRSITB0ztmJwRQ6A-kG4l-EBa5RBlKaq8pGXppNIpDInjEUhSZpIUgOnuNcGs16xZEHzP6DqhlAFLvv/s1600/shotmage_preview_banner.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJEMVPbEPfXP-jnpsLTzUpZHuUX_PCFeG9l1VaMqFf_Y2lQk18ShMg3TFUjAr_KRRSITB0ztmJwRQ6A-kG4l-EBa5RBlKaq8pGXppNIpDInjEUhSZpIUgOnuNcGs16xZEHzP6DqhlAFLvv/s1600/shotmage_preview_banner.jpg" /></a> <a class="shortc-button small black external" href="http://shotmagtemplate.blogspot.com/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black external" href="http://www.sneeit.com/2014/05/shotmag-minimalist-blogger-template-for-photoblog.html" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">More info</a></div>
<br /></div>
<div style="text-align: left;">
<h3 style="text-align: left;">
WordPress themes</h3>
<h4 style="text-align: left;">
SinglePro – Free Html5 Responsive One Page Template </h4>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6TRtYPEUYlGytLNw6ds3nf23LbETpcOEqKmxJAcTW8Ed8qRPH1C1W5xTIRXFwGXRcWc3FyrdsPHXq0ZKesWN_F_DbClxKy-yCdkXiKts_eoZafFLcsIUGvX6JGhSUi6HIx4drbkjBdeFc/s1600/SinglePro-Multipurpose-Business-one-page-Website-Template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6TRtYPEUYlGytLNw6ds3nf23LbETpcOEqKmxJAcTW8Ed8qRPH1C1W5xTIRXFwGXRcWc3FyrdsPHXq0ZKesWN_F_DbClxKy-yCdkXiKts_eoZafFLcsIUGvX6JGhSUi6HIx4drbkjBdeFc/s1600/SinglePro-Multipurpose-Business-one-page-Website-Template.jpg" /></a> <a class="shortc-button small black external" href="http://wpfreeware.com/preview/singlepro/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black external" href="http://www.wpfreeware.com/singlepro-free-bootstrap-one-page-business-portfolio-theme/" rel="nofollow" style="-webkit-transition: background 0.4s; background-color: white; background-image: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;" target="_blank">More info</a><br />
<br />
<br />
<h3 style="text-align: left;">
Коллекции</h3>
<h4 style="text-align: left;">
<a href="http://makeitcg.com/responsive-blogger-templates/2781/" target="_blank">60+ Free Responsive Blogger Templates</a></h4>
Although Blogger provides
solutions to maintain your reach to the mobile users, but it is not as
flexible as RWD. But there are folks who have been creating responsive
templates for Blogger platform as well, and this is the round up of such
excellent contributions.<br />
<a href="http://makeitcg.com/responsive-blogger-templates/2781/" target="_blank">http://makeitcg.com/responsive-blogger-templates/2781/</a><br />
<br />
<h4 style="text-align: left;">
<a href="http://makeitcg.com/portfolio-blogger-templates/2889/" target="_blank">10+ Awesome Portfolio Blogger Templates</a></h4>
Get the perfect look for
your portfolio with this showcase of beautiful portfolio Blogger
templates – including demo and free download links.<br />
<a href="http://makeitcg.com/portfolio-blogger-templates/2889/" target="_blank">http://makeitcg.com/portfolio-blogger-templates/2889/</a><br />
<br />
<br />
<h4 style="text-align: left;">
<a href="https://www.freshdesignweb.com/free-responsive-blogger-templates/" target="_blank">70+ Free Responsive Blogger Templates 2015</a></h4>
Best free responsive
blogger templates 2015 for start up blog in 2015 that are released
recently from any useful freebie blog. Though, those powerful blogger
templates you will see great option and responsive layouts.<br />
<a href="https://www.freshdesignweb.com/free-responsive-blogger-templates/" target="_blank">https://www.freshdesignweb.com/free-responsive-blogger-templates/</a><br />
<br />
<br />
<h4 style="text-align: left;">
<a href="http://www.cssauthor.com/blogger-templates-2015/" target="_blank">200+ Best Free Responsive Blogger Templates 2015</a></h4>
Today in this post we are showcasing the best free responsive blogger templates 2015. Our aim is to provide the latest blogger templates for our readers. All these blogger templates are in many categories, we have done the categorisation pretty well.<br />
<a href="http://www.cssauthor.com/blogger-templates-2015/" target="_blank">http://www.cssauthor.com/blogger-templates-2015/</a><br />
<br />
<br />
<br /></div>
</div>
Natahttp://www.blogger.com/profile/10197605793500077421noreply@blogger.com0