Показаны сообщения с ярлыком дизайн блога. Показать все сообщения
Показаны сообщения с ярлыком дизайн блога. Показать все сообщения

пятница, 22 февраля 2013 г.

Разноцветная кнопка читать далее на blogger

Несмотря на то, что я убрал на своем блоге функцию "Читать далее" ( внешняя ссылка), в этом посте для тех, кто решил размещать на главной странице блога только анонсы, я предлагаю создать интересную фишку: сделать так, что бы при наведении курсора на кнопку, она меняла цвет.
Расскажу я про нее только тем, кто приобретет вытяжки плоские 50 см на сайте "Евромойка", так как без вытяжки, кнопка на вашем блоге не будет менять цвет. Шутка...
Итак , пред вашими очами код:

.jump-link a {
    border-top: 1px solid #7171a3;
    background:#0069d1;
    background: -webkit-gradient(linear,right top,right bottom, from(#a3cdf7), to(#0069d1));
    background: -webkit-linear-gradient(top,#a3cdf7, #0069d1);
    background: -moz-linear-gradient(top, #a3cdf7,#0069d1);
    background: -ms-linear-gradient(top, #a3cdf7, #0069d1);
    background: -o-linear-gradient(top, #a3cdf7, #0069d1);
    padding: 9px 45px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: #ffffff;
    font-size: 12px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: middle;
    }
 .jump-link a:hover {
    border-top-color: #b0a1f3;
    background: #b0a1f3;
    color: #ffffff;
    }
 .jump-link a:active {
    border-top-color: #0099ff;
    background: #0099ff;
    }
.jump-link {
float:right;
}
Теперь решим, куда его поставить. Для совершения этой операции ( вы приобрели уже плоскую вытяжку?!), нужно взять этот  код подмышку и отнести его в настройки шаблона блога.

Настройки-Шаблон- Изменить HTML
  Не забывая установить галочку  на расширения шаблона и нажав волшебные кнопочки Ctrl+F находим уютное местечко.

 И перед ним устанавливаем принесенный подмышкой хранящийся в буфере обмена вышеуказанный код.
 На этом операция будет завершеня. Если вы не забудете нажать внизу страницы "Сохранить", разумеется.
О цвете кнопки, надеюсь позаботитесь сами, сделав редактирование в части
"color". 

В коде - цвет кнопки - голубой.

пятница, 12 октября 2012 г.

О сайтах на InstantCMS

Как важен для вебмастера его опыт и время его пребывания в интернете! О чем это я? Да все о том же: выборе движков, шаблонов, CMS для своих сайтов...
Недавно обнаружил для себя прекрасный сервис InstantCMS, который предлагает, за весьма умеренные цены, создавать личные сайты любой тематики. Посмотрел и восхитился! Если бы знал о нем, наверняка заказал сайт на этом сервисе и не морочал бы голову по конструированию сайтов на WordPress.
Впрочем, даже в этом случае, можно перевести  уже созданный сайт на CMS от Instant, а так же приобрести (если платные) или просто установить (есть бесплатные) модули instantcms, среди которых некоторые просто необходимы для современного сайта и его продвижения:
"Самые комментируемые статьи", "Самые читаемые посты блогов", "Слайдер новостей" и т.п. 
Поражает своей красотой и современностью дизайн создаваемых этой кампанией сайтов и встроенных блоков на основе вышеуказанных модулей.
Не предполагая подробного рассказа о услугах сервиса InstantCMS, но что бы дать представление о мерах предоставляемых им  услуг, ограничусь самыми основными, из которых многое можно понять:
Сервис предлагает, как я уже говорил, создание качественных, с великолепным дизайном (смотрите образцы на сайте) веб-сайтов на основе системы управления контентом InstantCMS. Создают проекты  любых типов:  Сайты-визитки, блоги, порталы, интернет-магазины, корпоративные сайты. Очень солидная фирма, которая сотрудничает с любым типом клиентов - частные лица, физические лица, фирмы.

Виды производимых работ:
    дизайн и верстка

    разработка сайта и наполнение контентом

    поиск подходящего хостера и домена

    помощь в управлении сайтом через панель управления


      Надумаете ли менять свою CMS или нет, станете ли создавать сайт с нуля - дело личное. Но посетить страницу InstantCMS - рекомендую. Чтобы сравнить свои сайты с образцами... :)

      суббота, 29 сентября 2012 г.

      Создание выпадающего меню на Blogspot

      Обычно такое меню делают для архивов, но я хочу рассказать о том, как подобное меню можно создать для любой страницы вашего блога. Для примера давайте выберем наиболее популярный из них - рубрики. Обычно выставляют на показ все и, наверное, правильно делают, так как навигационные функции при этом выигрывают и не каждый посетитель сможет разобраться в функции выпадающего меню.
      В чем  действительный выигрыш - место на странице  такой блок занимает   значительно меньше. Функцию выпадающего меню на своем блоге  я сделал для архивовов, можете увидеть. А как сделать для рубоик?  Делается это очень просто, например как та же, как доставка грузов по Москве и России компанией Транс Логистик , а может быть еще проще.
      "Шагаем" в "Дизайн", "Добавить виджет" и выбираем  HTML/JavaScript.

      Теперь нужно вставить код. такого вида
      <div class=»widget-content»>
      <br />
      <select name=»menu» onchange=»window.open(this.options[this.selectedIndex].value,’_blank’)» size=»1″ style=»width: 160px;»><option selected=»selected» value=»0″>
      <option value=»URL  страницы«>Название рубрики</option>
      ..... далее перечисляем все нужные страницы ваших рубрик (по выбору или все) ....
      </select><br />
      <br />
      <br /></div>
      Например для страницы моей рубрики " SEO-оптимизация", она будет выглядеть так:
      <option value=» http://mixajluta.blogspot.com/search/label/SEO-%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F«>SEO-оптимизация</option>
      Все: сохраняем виджет и располагаем блок на блоге  в нужном для вас месте.
      Удачи!

      четверг, 30 августа 2012 г.

      Устанавливаем кнопку "Вверх" на Blogger

      И все таки замечательный хостинг blogspot - хотя теперь я вплотную работаю с сайтами с движком WordPress, но заметил, что работа его сервера очень четкая и быстрая, а возможности просто удивительны.  Вот, оказывается на блоггере можно установить кнопку "Вверх" и делается это очень просто и быстро.
      Кстати о серверах, есть один замечательный сервис выделенный сервер от Hostpro.ua, который позволяет пользователю иметь оперативную память до 16 Гб и услуги не дорогие...
      Но, вернемся к нашему блоггеру и пресловутой кнопке "Веерх". Как я уже упоминал, устанавливается она очень просто в панели управления: "Дизайн" -- "Добавить гаджет" -- "HTML/JavaScript".

      Далее устанавливаем примерно  такой  код:
       <a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Вверх">
      <img border="0" alt="Back to TOP"  src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdqaSfveO1Rttcr6tMz_7381p5HBFKveafXcYE1b8SkE0aPdv3GNzwwD4XzLT8ui0WYzg7uRO6kORMaPQ8gr5zO9olVYuV3L26yk9ntoyCHBqyxh0pEsAB2vFHL-mQ9RjHZfaQmjxUoB9W/s128/73224921.png"/> </a>
      (красным я выделил адрес своей залитой на сервер картинки, вы можете выбрать свою)
      Добавленнй гаджет можно перетянутьв любое место, но его не будет видно, а сама картинка установится, согласно кода, в нижнем правом углу страниц блога. Пожелаете  установить кнопку слева, замените в коде  right на left
       Можно изменить параметры пикселей и другие. Экспериментируйте!
      Вот как выглядит эта кнопка-картинка у меня:
      Вы можете выбрать по симпатичнее и с надписью, только анимированная не подойдет.
      Желаю удачи!

      воскресенье, 25 марта 2012 г.

      О кнопке "Читать далее", автомат мега джек и прочем

      Давно хотел об этом рассказать. Итак, для этого воспользуемся редактором изменения зписей в шаблоне, однако перед тем как начать,  сделайте резервную копию своего шаблона(мало ли что!):   "Дизайн ---> Изменить HTML" , в первых строчках вы увидите "Загрузить весь шаблон" .

      Теперь выставьте галочку "Расширить шаблоны виджета".
      Далее с помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне:

      <data:post.jumpText/>

          * Вот как выглядит  весь код:

      <b:if cond='data:post.hasJumpLink'>
      <DIV class='jump-link'>
      <A expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></A>
      </DIV>
      </b:if>
       Вместо этой строки, выделенной красным текстом, добавьте ссылку на изображение, загрузив ее на сервер или найдя подходящую в интернете.
      Пример:

      <b:if cond='data:post.hasJumpLink'>
      <DIV class='jump-link'>
      <A expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img border="0" src="http://s018.radikal.ru/i511/1201/08/56f2e16bd505.png" /></A>
      </DIV>
      </b:if>

      Заодно расскажу:
      Во первых:  если вас интересует довольно несложный и быстрый заработок в интернете - об
        этом можете  узнать на   автомат мега джек , а ознакомившись, немало заработать.
       Во вторых:  как сделать, что бы при наведении курсором на ссылки в блоге, они отражались всеми цветами радуги.

      1. Заходим в Дизайн ---> Изменить HTML

      2. С помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне:

      </head>

      3. Перед ней вставим вот  такой код:

      <script src='http://bloggerhelp.ru/uploads/demo/rainbow.js'/>

      4. Вуаля!

      Желаю успеха!

      Понравился блог - подпишись на обновления!

      Введите Ваш emai-адрес:

      Популярные сообщения

      Related Posts Plugin for WordPress, Blogger...