Красивый виджет с рубриками сайта без плагина

Здравствуйте дорогие читатели и гости сайта «Тестируем шаблон». Рада новой встрече на блоге.

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

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

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

Так вот, сервис который я нечаянно нашла находится по адресу http://cooltext.com/  Можно сказать, это бесплатный генератор графики с хорошим ассортиментом и приятной, простой настройкой необходимых логотипов и кнопок.

На фото ниже посмотрите какие логотипы (читай : любой красивый текст с оригинальной формой) вы можете сделать: и это только разновидности, настройки цвета и стиля делают этот перечень практически бесконечным

А перечень кнопочек поскромнее. Для примера я выбрала стиль кнопки «Водитель-лихач».

И первое слово которое пришло на ум Wink вписала в поле для текста. В этой кнопке можно поменять очень многие параметры: размер шрифта, цвет текста,

форма и цвет кнопки, толщина, стиль тени и внешний эффект (выпуклость, гладкость)

И вот когда  кнопка вами полностью отредактирована, мы не будем нажимать на кнопочку внизу «Создать кнопку», так как нам за код этой кнопки предлагают завести аккаунт, а точнее зарегистрироваться.  Мы просто делаем так как на фото ниже: кнопка ведь готова, а лишние ссылки с кода на этот сайт нам не нужны.

Использовав данный стиль кнопки, я сделала на первом своем сайте вот такой баннер

А создав кнопочки для рубрик, сначала использовала их для плагина Category & Page I c o n s

но кнопки получились достаточно крупными для иконок, и двойное название некрасиво смотрелось, а так как я использовала плагин  Category & Page I c o n s  только для иконок рубрик, то я решила его просто отключить, а рубрики вывести в форме баннера с помощью вот такого кода: здесь представлен код для вывода одной рубрики. Если вы хотите сделать баннер, допустим, для пяти-шести рубрик, то просто размножьте этот код.

<center><a href=»http://test-shablon.ru/category/dizajn-sajta/» target=_blank><img src=»http://test-shablon.ru/wp-content/uploads/2012/08/RenderedImage-14.png» border=»0″ title=»Просмотреть все записи в рубрике Дизайн сайта» width=150 height=60></a></center>

Выделено синим-  адрес рубрики ;

выделено красным-адрес картинки ( URL ссылки )

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

Аккуратно вносим свои данные в данный код, не добавляя никаких лишних ковычек. Скопировать код для одной рубрики  можно из окошечка ниже, по количеству рубрик размножить в HTML редакторе для редактирования. 

<center><a href="http://test-shablon.ru/category/dizajn-sajta/" target=_blank><img src="http://test-shablon.ru/wp-content/uploads/2012/08/RenderedImage-14.png" border="0" title="Просмотреть все записи в рубрике Дизайн сайта" width=150 height=60></a></center>

Вид и работу моего виджета без плагина можно посмотреть в сайтбаре блога.

Я довольна внешнем видом  виджета и тем, что могу вместо плагина Category & Page I c o n s,  активировать что-то еще полезное и интересное.

О других интересных находках мы поговорим в следующих статьях рубрики «Дизайн блога». С вами была Юлия, до новых встреч.

:heart: Расскажи другу, пусть тоже дизайном займется :good:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • LinkedIn
  • Digg
  • Blogger
  • Блог Li.ру
  • Сто закладок
  • RSS
  • Одноклассники

Об авторе Юлия

Меня зовут Юлия. Этот сайт я начала из-за моей проснувшейся и непонятной любви к рассмотрению настроек шаблонов. Сама я пока создавать темы на Вордпресс не умею, но надеюсь, что это когда-нибудь случится. Пишите в комментариях свои вопросы: я обязательно отвечу. Ну и замечания тоже приветствуются-))
Метки: . Закладка Постоянная ссылка.

23 комментария: Красивый виджет с рубриками сайта без плагина

  1. Елена пишет:

    Юль! Ну обалдеть просто! Как ты так быстро со всеми этими штучками разбираешься. Я за тобой категорически не успеваю все повторять, а хочется.
    Я только себе постоянно в уме записываю Пункт 1, 2, 3….
    А еще я заметила у тебя классные крутящиеся кнопочки в левом верхнем углу!

    Heart

    • Юлия пишет:

      Леночка, на самом деле, все очень просто, если этим заниматься, а крутящиеся кнопочки я недавно поставила(такие прикольные :yahoo: ): мне кажется никто кроме тебя и не заметил :whistle: Мы наверное и правда очень похожи по характеру Wink

  2. Елена пишет:

    Юльчик! А где кнопочки для ПОДЕЛИТЬСЯ. Только твит вверху нашла iPad

  3. Irina пишет:

    Юль! У тебя видно техническое образование. Прямо волшебница какая-то! За тобой не успеть! Когда ты -то успеваешь все узнать, разобраться и еще и выложить на сайте для таких безграмотных как я…
    У меня твой сайт как школа… для подготовишек.

    • Юлия пишет:

      Ирочка, ты меня вообще засмущала. Я ведь вроде о самом простом рассказываю, вообщем что вижу, то пою, как тот чукча Happy-Grin А образование у меня вообще медицинское Who-s-the-man

  4. mrs.interesno пишет:

    Такие кнопки с рубриками уж точно не останутся не замеченными. :good:
    Только надо тогда название рубрик не очень растягивать, а то придется кнопки на полстраницы делать. :)

  5. Анна пишет:

    Юлечка, я полностью согласна со всеми комментариями. Вы — юольшая умница, я уже вам это писала. Открытие для меня — ваше медицинское образование!!! Никогда бы не подумала, что медик так здорово может разбираться в технических вопросах. Как вы во всём этом разбираетесь, ещё и обучая других? Ну нет слов, чтобы выразить вам свой восторг и восхищение!!!!! Я сегодня ЦЕЛЫЙ ВЕЧЕР И ПОЛНОЧИ читала ваш блог. Только познакомилась со статьями, а вот применять буду завтра. Не всё сразу, конечно, но постепенно, если хватит на это ума и способностей, буду применять у себя на блоге. А ведь я прочитала далеко не все статьи!!!! СПАСИБО ВАМ!!! :heart: :rose:

    • Юлия пишет:

      Анечка, спасибо огромное,но я знаю еще очень мало, но постепенно надеюсь узнать еще много интересного и написать об этом. Ведь как бывает, если человек начинает что-то изучать, то понимает, что он оказывается вообще ничего не знает-))Так получается и у меня…

  6. Надежда пишет:

    Очень красивый и заметный виджет. Он многим пригодится.И мне в том числе.Спасибо,Юля,благодаря,Твоему сайту экономится столько времени.Самой не приходится искать и разбираться.

    • Юлия пишет:

      Наденька, зная твои способности :rose: ты ведь находишь такие интересные вещицы, что я тоже с удовольствием ими пользуюсь. Спасибо :yes:

  7. Марат пишет:

    Хороший програмулина, поможет украсить блог.

  8. Надежда пишет:

    Классный сервис,красивая подача. Супер,Юля.

  9. Liza пишет:

    И рубрики, и крутящиеся социальные кнопочки заметила сразу. Класс!!! Вот уже час гуляю по Вашему сайту. Всё так замечательно!!!

  10. Ирина пишет:

    Добрый день,Юля.Я только недавно начала создавать свой сайт и, т.к. решила все сделать сама ( а я в этом полный НОЛЬ!), то стала рыться в ин-те и наткнулась на Ваш сайт. Юля, хочу сказать ОГРОМНОЕ СПАСИБО!!! Ваш сайт мне ОЧЕНЬ помогает: от темы Вояж, до всяких классных полезностей. Сейчас решила сделать красивыми рубрики, но что-то не выходит. Во-первых, на сайте cooltext кнопочки можно сделать только на английском, а у Вас текст русский, а во-вторых, не поняла, куда нужно вставить код для баннера, чтобы вместо рубрик выводились красивые кнопочки. Буду очень вам благодарна, если напишете разъяснения для ЧАЙНИКОВ. Ирина

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

[+] Жми на плюс- Открой тайник- Чтоб прикольный СМАЙЛ возник!
:bye: 
:good: 
:negative: 
:scratch: 
:wacko: 
:yahoo: 
B-) 
:heart: 
:rose: 
:-) 
:whistle: 
:yes: 
:cry: 
:mail: 
:-( 
:unsure: 
;-)