Перегляд із закладками у Блоггері

Перегляд змісту із закладками або  tab view  є чудовим способом для максимально ефективного використання дорогоцінної площі екрана на вашому...

Перегляд змісту із закладками або tab view є чудовим способом для максимально ефективного використання дорогоцінної площі екрана на вашому блозі. Ми вже використали цей прийом у Блозі ТРЗУ, звівши у один "табулятор" чотири гаджета: "Кращі завжди", "Кращі за місяць", "Новини", "Архів". Дивіться (праворуч) як це діє, читайте (нижче) як це зробити.

Є досить небагато підручників, де показано, як створити вкладки за допомою CSS і JQuery. Проте, більшість з них вимагають змінити код шаблону блогу. Додатково до цього ви також повинні вручну додати вміст кожної вкладки.

На щастя, з цим уроком вам не доведеться йти через всі ці труднощі. Все, що вам потрібно зробити, це додати наш "табулятор" (tabber) коду в HTML/Javascript гаджет. Після додавання, він буде трансформувати існуючі гаджети Blogger вашого блогу у вигляді закладок, автоматично!

Дивись demo тут.

Нижче наведені деякі з особливостей "табулятора":
  1. Можна розмістити необмежену кількість гаджетів.
  2. Зберігає зовнішній вигляд гаджетів з вкладками.
  3. Повністю автоматизовано для простоти установки і видалення. Якщо вам не подобається, що робить "табулятор", просто видаліть його HTML/JavaScript гаджет.  

Установка

  1. Перейдіть до Дизайн > Елементи Сторінки і клікніть Додати Гаджет.
  2. Оберіть HTML/Javascript віджет.
  3. Залиште порожнім поле Назва.
  4. Скопіюйте код і вставте його у поле вмісту.

    <style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #bbb;
    }
    .tabber h2 {
     float: left;
     margin: 0 1px 0 0;
     font-size: 12px;
     padding: 3px 5px;
     border: 1px solid #bbb;
     margin-bottom: -1px; /*--Pull tab down 1px--*/
     overflow: hidden;
     position: relative;
     background: #e0e0e0;
     cursor:pointer;
     -moz-border-radius:5px 5px 0 0;
     border-radius:5px 5px 0 0;
    }
    html .tabber h2.active {
     background: #fff;
     border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
    }
    .tabber .widget-content {
     border: 1px solid #bbb;
     padding: 10px;
     background: #fff;
     clear:both;
     margin:0;
    }
    .codewidget, #codeholder {
     display:none;
    }
    </style>
     
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $('#codeholder').bloggerTabber ({
      tabCount : 3
     });
    });
    </script>
     
    <!-- to make sure the widget works, do not alter the code below -->
    <div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">widget</a></p></div>

    • Видаліть рядок, призначений для завантаження JQuery бібліотеки, якщо ви вже завантажили її в іншому місці у Вашому блозі (рядок містить "libs/jquery/1.6.0/jquery.min.js"). Підказка: Якщо ваш блог має слайдер, сайклер або щось з ефектом фейдингу, швидше за все, він працює на JQuery..
    • Вкажіть кількість гаджетів, які ви хочете включити в закладки в рядку, що містить "tabCount : 3".
    • Колір фону за замовчуванням білий (#FFF). Ви можете змінити його в рядку коду, що містить "background: #fff;". Застосувати же колір для фону активної вкладки та нижньої межі можна у рядках, що містять "background: #fff; border-bottom: 1px solid #fff;".
  5. Встановіть HTML/Javascript гаджет вище гаджетів, які ви хочете "табулювати".
     tabbed contents view elements
  6. Натисніть кнопку Зберегти та переглядати ваш блог.
Після установки
  • Переконайтеся, що ви дали назву кожному елементу керування (гаджету), який ви хочете "табулювати". "Табулятор" не буде працювати належним чином без назв гаджетів.
  • Зменшити ширини вкладок так, щоб усі вкладки вписувались в один рядок. Це може бути досягнуто за допомогою короткої назви гаджета.
  • Можливо, вам доведеться зменшити ширину табульованого віджету, щоб підігнати їх до загального вікна табулятора.
  • Не забудьте спробувати себе в Internet Explorer (IE). Цей гаджет може привести в IE до помилки "Операція перервана" для деяких нестандартних шаблонів. Якщо це так, то цей гаджет не для вас.
Насолоджуйтеся!

Джерело:

http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html

Пов`язані

Кнол - одиниця знання

Цю статтю знайдуть корисною ті, хто воліє розширити свій  авторський інструментарій з підготовки публікацій з використанням інтернет-технологій. Google Knol один з нових сервісів Гугл, запущений ...

Громадське обговорення проекту Закону України ’’Про громадські організації’’

Міністерство юстиції України повідомляє про оприлюднення з 5 серпня 2010 року на своєму сайті проекту Закону України "Про громадські організації" для забезпечення вивчення та врахування думки гр...

Подача матеріалів

Перед подачею матеріалів  Необхідною передумовою Вашої роботи як Автора Блогу ТРЗУ є:  Наявність реєстрації (облікового запису) у Google. Якщо Ви не маєте облікового зап...

Дописати коментар Default Comments

emo-but-icon
:noprob:
:smile:
:shy:
:trope:
:sneered:
:happy:
:escort:
:rapt:
:love:
:heart:
:angry:
:hate:
:sad:
:sigh:
:disappointed:
:cry:
:fear:
:surprise:
:unbelieve:
:shit:
:like:
:dislike:
:clap:
:cuff:
:fist:
:ok:
:file:
:link:
:place:
:contact:

Переклад

Кількість переглядів

352364

АктуальніОстанніЗавжди

Останні

Нічна Вахта: Атомна енергетика в Україні та світі

 Етер на Українському радіо 27.9.2021Ведучий передачі «Нічна Вахта» на Українському радіо Дмитро Лавров провів розмову з Олегом Бондаренком на тему "Атомна енергетика в Україні та світі"Розмова в...

"Розвиток відчуження" чи відновлення після катастрофи

Наприкінці 2020 року Уряд України оприлюднив інформацію про початок громадського обговорення Стратегії розвитку територій зони відчуження і зони безумовного (обов’язкового) відселення, що зазнали раді...

Загрози безпечної експлуатації АЕС України

Звернення громадських організацій з приводу загроз навколо безпечної експлуатації АЕС і незалежності Держатомрегулювання!Секретарю РНБОДанілову Олексію М'ячеславовичуШановний Олексію М'ячеславовичу!Не...

Crisis - a chance to become stronger / Криза - шанс стати сильнішим

CRISIS - A CHANCE TO BECOME STRONGERКРИЗА - ШАНС СТАТИ СИЛЬНІШИМAre you considering building a start-up? Are you concerned about how to be successful in such a venture, especially during the crisis&nb...

Пожежі у зоні відчуження і уроки Чорнобиля

Знов пожежі у Чорнобильській Зоні Відчуження оголили проблеми, яких ми і досі не подолали. Цього разу очевидною проблемою буквально стала якість повітря, а також його моніторинг. Вірніше відсутні...

Офіційне звернення НЕЦУ стосовно будівництва енергоблоків №№ 3, 4 ХАЕС

Національний екологічний центр України звертається до Прем’єр-міністра України у зв’язку із оприлюдненням ДП «НАЕК «Енергоатом» Звіту з оцінки впливу на довкілля будівництва енергоблоків №№ 3, 4 Х...

Відкрита заява Громадської ради при Державній інспекції ядерного регулювання України

Громадська рада при Державній інспекції ядерного регулювання України 12 лютого 2019 року виступила з відкритою заявою наступного змісту: На засіданні Громадської Ради при Державній інспекції яде...

Модуль знань про Чорнобиль

Якщо ти досі переконаний, що наука - це нудно і нецікаво, то учасники програми «Модуль знань» українського радіо можуть змінити твою думку. Інтерв’ю ведучих Людмили Ляхевич, Андрія Любіча та Ольги ...

10 найкращих розширень для Google Chrome. Ваш браузер може більше.

Коли стандартного набору функцій у браузері не вистачає, його можливості можна розширити за допомогою плагінів. НВ зібрало десять розширень для Google Crome, які полегшать та прискорять роботу в ін...

Архів блогу

item