15.12.08

Blogger: Административная панель управления!

53 comments

Панель управления...
Космическим кораблем?


Всем доброго времени суток! Сегодня мы плавно переместимся с темы Панели навигации или Navbar(а) к попытке создания Административной Панеле Управления нашим блогом. Вещь, в общем-то совсем не обязательная, но если Маляр (Технологии Досуга) поднял эту тему - то почему бы и нет! ;)

Для тех кто еще не привык к стилю этого блога объясню, что Панель управления космическим кораблем Шатл, которую вы видете слева, никакого отношения к моему рассказу об Административной Панеле Управления иметь не будет, а жаль, потому что это могло бы быть намного более интересно. Картинку я взяла из официальной галлереи Nasa, можно будет потом сходить туда и поискать чего-нибудь еще. А пока я буду рассказывать как поставить Админку к вам в блог. Хотя это настолько просто, что рассказывать почти нечего...

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

Вот собственно код, который мы будем добавлять как Гаджет в наш блог:
<span class="notranslate item-control blog-admin pid-XXXXXXXX">
<h2>Панель Управления:</h2>
<ul>
<li><a href="http://www.blogger.com/post-create.g?blogID=YYYYYYYY">Новое СООБЩЕНИЕ</a></li>
<li><a href="http://draft.blogger.com/blog-options-basic.g?blogID=YYYYYYYY">Настройки/БЭКАП</a></li>
<li><a href="http://www.blogger.com/rearrange?blogID=YYYYYYYY">Дизайн</a></li>
<li><a href="http://www.blogger.com/moderate-comment.g?blogID=YYYYYYYY">Управление комментариями</a></li>
<li><a href="http://www.blogger.com/logout.g">Выйти</a></li>
</ul>
</span>
Только не торопитесь пожалуйста, это еще только заготовка кода. Вы её, пожалуйста, куда-нибудь [в блокнот, напримет] скопируйте, потому что мы её сейчас дорабатывать будем.

Чтобы этот код стал у нас работать:

1) Надо в первой строчке вместо XXXXXXXX поставить персональный идентификатор администратора блога (я так и не смогла найти в интернете точной расшифровки этой абревиатуры pid). Как его получить. Заходите в свой блог и из контекстного меню мыши или с помощью меню браузера вызываете просмотр исходного текста блога . И в этом исходном тексте блога ищите [используя сочетание клавиш CtrF] слово из трех букв: pid. Оно скорее всего обнаружится в виде <span class='item-control blog-admin pid-229696323'> - циферки после pid- и есть наш номер, который мы подставим вместо XXXXXXXX.

2) Далее устанавливаем Идентификатор блога BlogId. Это очень можно сделать одним из двух способов:
а) Раз уж мы все равно полезли рассматривать исходный текст нашего блога теперь мы можем поискать blogID у меня он нашелся в строчке типа <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=609368192660326797" /> и идентификатором блога будут все эти цифры после blogID=

б) другой способ определения идентификатора вашего блога еще проще: зайдите в Панель инструментов и кликните например на Дизайн и в адресной строке будет содержаться ваш BlogId:

Теперь в скрипте заменяем все YYYYYYYY на полученные цифры BlogId.

Доработка закончена полученный код уже можно вставлять в блог как HTML/JavaScript гаджет.

Вот как у меня это выглядит:
и ни только выглядит, но и работает, что очень важно!

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

Давайте быстренько разберем из чего состоит этот код для гаджета.

Кто совсем не знает HTML или забыл как на HTML описываются ссылки может подглядеть вот сюда: Blogger: Начала HTML - Ссылки!

Теги мы будем разбирать как капусту по листочкам:
1) На самом внешнем уровне у нас написан парный тег <span class="item-control blog-admin pid-XXXXXXXX"> ... </span> - определяет хитрый такой контейнер, в котором будут лежать наши ссылки по управлению блогом. Его хитрость заключается в том, что читатели его видеть не будут, а увидят его только авторы блога и то только те, кто имеет права администратора блога.

2) На следующем уровне мы определяем ненумерованный список для чего используем парный тег <ul> .... </ul> В общем, дело конечно вкуса, но мне нравится использовать списки, помогает структурировать информацию.

3) На следующем по вложенности уровне мы видим описание элемента списка это еще один парный тег <li> ... </li>

4) И на последнем уровне, наконец, определяем, что элементом списка у нас является ссылка. Ссылка записывается парным тегом a: <a href="http://куда идти">На какой текст кликать (он - этот текст, на который мы кликаем называется еще якорным текстом) </a>

Теперь если мы захотим чего-нибудь удалить из этого гаджета мы будем удалять элемент списка и если захотим добавить в него еще какую-нибудь полезную ссылку мы будем добавлять её как элемент списка, т.е. окруженную тегами <li> </li>

Ну, вот на сегодня и всё. Я показала как можно вставить админку прямо в ваш блог. И мы узнали как можно описать ненумерованный список на HTML. Если что было непонятно спрашивайте.

Всем удачи во ВСЕМ!
Света

PS В статье использованы материалы: Google Help: Conditional "new post" links

PPS Забыла упомянуть, что тег <h2>Панель Управления:</h2>, который присутствует в начале кода всего лишь значит написать текст "Панель Управления" в стиле заголовков боковой панели нашего блога.

PPPS И под конец открою вам маленькую тайну: Начала я писать эту статью по просьбе Маляра, но в процессе написания очень прониклась идеей иметь административную панель прямо в блоге и теперь мне с ней очень удобно! :)



Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

53 комментария:

  1. Светлана! Огромное Вам спасибо, за детальный "разбор полетов"! Панель установилась легко и работает отлично. Действительно очень удобно. Рекомендую всем!
    Благодаря описанию кода, нашел свою ошибку в первоначальной установке. Это пресловутый "pid". В место него я вставлял просто "ID".
    Еще раз СПАСИБО!!!
    Успехов!

    P.S: Меня зовут Сергей. Приятно познакомиться :)

    ОтветитьУдалить
  2. Очень приятно, Сергея! - А я -Света! :)))

    Очень рада, что у вас все теперь заработало!

    Счастливо и удачи!
    Света

    ОтветитьУдалить
  3. pid в коде нет... Но работает и без него.. вроде...
    Спасибо!)

    ОтветитьУдалить
  4. Действительно, нет, Скеггльёльд!

    Ваш шаблон был переделан из Вордпрессовского, поэтому скорее всего и нету... А без pid у меня тоже работало, а потом когда я села писать эту статью, я переделала все по науке ;).

    Удачи!
    Света

    ОтветитьУдалить
  5. Панель управления у меня установилась, но после того как я нажал на выход, а потом снова зашёл в свой аккаунт, панель в блоге исчезла... Хотя в настройках гаджетов она отображается. Странно...

    ОтветитьУдалить
  6. И действительно странноо.... [i'm_blogger].

    С первого взгляда никаких идей. Если у вас показывается иконка для быстрого редактирования статей, панель управления тоже должна быть видна. Мне вот тоже после переконнекчивания иногда приходится заходить в блог через Панель инструментов - Посмотреть блог, а после этого до того как я нажму "Выход" панель управления остается во всех блогах на месте.

    Удачи вам и ждем новостей!
    Света

    ОтветитьУдалить
  7. Добрый день
    Подскажите что надо изменить в
    #navbar-iframe {
    height:0px;
    visibility:hidden; <--?
    display:none; <--?
    }
    чтоб navbar был виден всегда, какие значения?

    ОтветитьУдалить
  8. И второй момент-
    при внедрении скрипта панели "ломается" архитектура гаджета ADMIN
    http://narva-est.blogspot.com/

    ОтветитьУдалить
  9. Petrovich, доброго времени суток!

    Чтобы показывать NavBar ВСЮ эту конструкцию:

    #navbar-iframe {
    height:0px;
    visibility:hidden;
    display:none;
    }

    мы просто удаляем.

    Света

    ОтветитьУдалить
  10. ...при внедрении скрипта панели "ломается" архитектура гаджета ADMIN
    http://narva-est.blogspot.com/

    Petrovich, а какой именно скрипт вы внедряете?... Что до гаджета ADMIN я посмотрела на исходник вашего блога. У вас там похоже список ссылок-команд (новый мессадж, макет для админа) не окружен span-тегами.

    Поставьте:
    <span class='item-control blog-admin'>
    перед началом списка и

    </span> в конце - Панель Администратора должна сптятаться от постороних глаз.

    Удачи!
    Света

    ОтветитьУдалить
  11. C Navbar всё сработало, спасибо!
    Внедряю разработанную вами панель админа HTML/JavaScript - действовал по инструкции < / span> прописал как следует
    Дефект в следующем http://picasaweb.google.com/leantosltd
    1 - модуль About me имеет округлую форму
    2 - модуль админа сверху искажен
    3 - это то что я вижу как админ блога
    название гаджета ADMIN сдвигается вправо. Как будто координаты изменяются.
    Шаблон красивый, иначе бы плюнул.

    ОтветитьУдалить
  12. Да, шаблон красивый, Petrovich!


    "...это то что я вижу как админ блога" - у меня такое подозрение, что я вижу тоже самое как читатель вашего блога - т.е. вы ничего не прячете(!), но хорошая новость - что ничего и не искажается.

    В настоящее время у вас служебные ссылки в графе "adminka" и под сообщениями (после подписаться на Сообщения (Atom)). - попробуйте их спрятать. В некоторых шаблонах когда прячешь содержимое гаджета - гаджет все-равно появляется - только пустой. В таких шаблонах я обычно добавляю код админки внутрь какого-нибудь уже существующего гаджета типа HTNL/Java-Script (ну, там счетчики всякие банеры, а под ними моя спрятанная админка).

    Хотя можно и не прятать!

    Удачи!
    Света

    ОтветитьУдалить
  13. Я извиняюсь, но куда этот код надо вставить, а то я его по всему шаблону тыкаю то в хэд то в боди, и ничего не происходит, только пишет что не может внести изменения(
    Помогите пожалуйста, объясните как оно надо, а то очень наверно удобная штука эта панелька.

    ОтветитьУдалить
  14. Иосиф, доброго времени суток!

    А я его вообще не в шаблон предлагаю ставить этот код, а сделать из него Гаджет. Также как вы добавляли гаджет "Архив".

    Панель инструментов -- Макет а там Добавить гаджет
    тип гаджета выбираем Html/JavaScript
    Заголовок Гаджета оставляем пустым, а в тело вставляем код.

    Удачи!
    (Будут вопросы - пишите...)

    Света

    ОтветитьУдалить
  15. Здравствуйте уважаемая Светлана... Подскажите пожалуйста можно ли изменить шрифт боковой панели не меняя шрифта основного текста блога?

    ОтветитьУдалить
  16. Здравствуйте, Unter!

    Да, можно... надо будет написать пост на эту тему.

    А в вашем случае. Ставите галочку на Расширить шаблоны виджета. Ищем строчку #sidebar-wrapper
    и там внутри фигурных скобок задаем параметры шрифта. Все что хотите color, font, font-size, font-family, font-weight. Ну, все что придет в голову, на все что фантазии хватит.

    Удачи и спрашивайте если что нужно,
    Света

    ОтветитьУдалить
  17. Вот тоже вставлял в код страницы - отображалось криво, а на счет того, что нужно делать именно гаджет - прочитал только в комментах.
    В общем все сделал, все работает. Спс, Светочка).
    Попробую найти пост как менять шаблон

    ОтветитьУдалить
  18. Доброго времени суток, Shtolcman!

    Спасибо за добрые слова. А что до гаджета, что вставляем код в Html/JavaScript гаджет у меня там в статье таким полужирным синим шрифтом в середине статьи написано:

    "Доработка закончена полученный код уже можно вставлять в блог как HTML/JavaScript гаджет."

    но похоже не очень заметно.... Может в следующий раз такие фразы blink (мигающими) делать? ;)

    А комментарии вообще полезно читать - я их рассматриваю как совместное творчество с читателями -- обычно очень расширяет статью.

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

    Удачи!
    Света

    ОтветитьУдалить
  19. Спасибо большое Светлана за ответ по шрифтам..Насчет панели управления - очень удобно и доволен (жаль посетители не видят:)) только вот в последнее время часто она стала пропадать (это то насчет чего писал i'm_blogger ) - происходит это как правило после обновления firefox почему то в других браузерах - IE и Opera показываеться всегда - потом как правиило возникает неожиданно вновь - летучий голландец прямо какой то.

    ОтветитьУдалить
  20. Доброго времени суток, Unter!

    У меня FireFox, он время от времени почему-то теряет авторизацию, тогда приходится идти на Панель управления вводить пароль - and back to businesses (и снова в деле) ;)

    Спасибо за комментарий,
    всегда рада вас видеть!
    Света

    ОтветитьУдалить
  21. Хотел еще добавить - разобрался в причине - Панель управления НЕ будет работать если браузер НЕ передает поле "Referer" - (проверил в Opera и Firefox) его "срезают" многие фаерволлы или отключают сами в целях безопасности"
    (как симптом - пропадает также кнопа Quick Edit)

    ОтветитьУдалить
  22. Точно, Unter!

    А еще симптом или последствие: когда на Blogger'е (http://www.blogger.com/home) просят авторизоваться :(

    ОтветитьУдалить
  23. Спасибо! Искал именно это!

    ОтветитьУдалить
  24. Спасибо за комментарий, Hamster Slayer!

    Удачи и приходите еще!
    Света

    ОтветитьУдалить
  25. Света! Здравствуйте! Я спрятала в своем новом блоге панель управления, и теперь не знаю, как туда попасть, чтобы добавить ее прямо в блог (((

    Вот тут http://trudowoeprawo.blogspot.com/

    Любовь -Тэххи

    ОтветитьУдалить
  26. Любочка, вы прелесть!

    Удачи вам!
    Света
    :)))

    ОтветитьУдалить
  27. Здравствуйте, Светлана! У меня почему-то не работает внутрення панель навигации в блоге Путь к себе http://01071957.blogspot.com/ Из-за этого не могу убрать навбар (((

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

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

    ОтветитьУдалить
  28. Светлана, мне понравилось дополнение в Ваших постах: "Понравился пост - добавь в закладки, чтобы не потерять:----". Ну очччень полезно! А кодом не поделитесь, как это сделать?
    Буду очень признательна!

    ОтветитьУдалить
  29. Любовь, здравствуйте!

    Присылайте мне на email код, который вы вставляете для панели управления и подробно напишите что именно не работает.

    Лично я административной панелью не пользуюсь, хотя она у меня есть. Я всегда иду сразу по адресу: http://www.blogger.com/home И там у меня есть все что надо.

    Удачи!
    Света

    ОтветитьУдалить
  30. Доброго времени суток, Людмила Викторовна!

    Взять код для "Одной Кнопки" можно здесь: http://odnaknopka.ru/get/

    В Макете Добавить гаджет типа Html/JavaScript в котором разместить слова про понравившийся пост и вставить полученный JavaScript код. Затем гаджет "перетащить" под область поста и нажать Сохранить.

    Как перетаскивать гаджеты я показывала на видео здесь: http://blogger4you.blogspot.com/2009/07/blogger-move-gadgets-all-over-layout.html

    Удачи во всем!
    Света

    ОтветитьУдалить
  31. коряво получается
    вернул как было

    ОтветитьУдалить
  32. Какая штучка полезная и удобная! Света, спасибо!

    ОтветитьУдалить
  33. Спасибо, Диана!

    Вы подтверждаете мысль, что вкусы (а может руки) у всех разные - Вот у Dobry web - коряво почему-то получилось?...

    Удачи во всем!
    Света

    ОтветитьУдалить
  34. Доброго времени суток Светлана!
    Когда делаешь перевод на другой язык,от гугл. то эта скрытая панель видна для всех, в переводе. Вот как то так.

    ОтветитьУдалить
  35. Здравствуйте, Doyalhari das!

    Спасибо огромное за очень полезный комментарий!!!

    У себя я правда это повторить не смогла, возможно потому что перевожу с русского на любой другой язык, но вам верю. Согласно, Google Translate следует добавить notranslate как класс элемента который мы переводить не хотим. Подробности здесь: http://blogger4you.blogspot.com/2009/10/blogger-google-translator-gadget

    Внесла изменения в код. Будет время поэкспериментируйте, пожалуйста.

    Удачи во всем!
    Света

    ОтветитьУдалить
  36. Кстати, вашу скрытую панель тоже видно, а так же количество визитов. Похоже что покажет все что скрыто. Копируем ваш адрес blogger4you.blogspot.com, идем сюда http://www.google.ru/language_tools?hl=ru и вставляем ваш адрес в "Перевести эту страницу". Вот результат http://pic.ipicture.ru/uploads/091009/zTIIoC8yi5.jpg. С какого языка переводить, на какой, не важно. А как применить на практике notranslate, я так и не понял. Если у вас что то получится, напишите пожалуйста.

    ОтветитьУдалить
  37. Замечательно, Doyalhari das!

    Вы все объяснили, а то я никак не могла её у себя увидеть. Дело в том что у себя в блоге (если вы заметили) я установила новейший гугловский переводчик. Вот здесь об этом писала: http://blogger4you.blogspot.com/2009/10/blogger-google-translator-gadget.html Переводит действительно хорошо и с ним есть особые правила обращения так вот эта notranlate - из их числа. Т.е. идея если кто-то иноязычный заходит ко мне в блог и нажимает перевести, то он получит приличный перевод и административная панель (у меня там, впрочем, как вы видите секретов особых нет - наоборот некоторые из помещенных в спрятанной области ссылок я собираюсь сделать общедоступными)... так вот административная панель при переводе сделанным переводчиком установленным здесь не видна, я туда добавила - Вам спасибо слово notranslate. Как и куда добавила - смотрите код в этой статье я в него тоже добавила этот notranslate.

    Как ситуацию исправить в общем виде я не знаю (внешний переводчик даже Google'а еще не такой хороший, как тот который можно встроить у себя в блог). Что я хочу сказать, у меня встроен переводчик, так что я полагаю, что читатель воспользуется именно им (а сним я уже смогла договориться ;)). И есть еще надежда, что свой переводчик для сайтов, где нет встроенного переводчика они доведут до тех же стандартов.

    Совет один поставить новый переводчик от Google, тот самый о котором я немного выше говорила.

    Надеюсь, что хоть что-то в моем ответе будет полезно.

    Удачи во всем!
    Света

    ОтветитьУдалить
  38. Света, спасибо огромное за то, что вы вообще ведете этот блог и объясняете нам чайникам как нам же самим облегчить жизнь себе и нашим чиателям)))
    Давно начала изучать ваш блог с самого начала с помощью архива. Вот сейчас воспользовалась Панелью инструментов, которую вы тут предложили. Правда у меня нет первого параметра ни в одном из моих блогов, но и без него как выяснилось все прекрасно работает. Спасибо огромное.

    ОтветитьУдалить
  39. Здравтвуйте, Екатерина (bestia_cat)!

    Хорошо, что все заработало!

    Хотя не понятно, почему вы не нашли первый Id

    Для блога Мой мир:

    pid-738686115
    blogID=1592152278073279726

    Еще раз повторюсь, что смотрим мы не в Html-коде шаблона, а в браузере через опцию View Source (впрочем, в разных браузерах она по разному называется).

    Удачи во всем и спасибо за комментарий!
    Света

    ОтветитьУдалить
  40. Добрый день. замечательная статья, спасибо огромное:-)... Интересный сайт хорошо описали

    ОтветитьУдалить
  41. Ура!!!!! Всё получилось! Двое суток билась, искала первые цифры. Сегодня нашла. Всё работает замечательно. Огромный Вам поклон. Я уже так много от Вас понапихапла в свой блог - и то, что надо, и то, без чего можно прожить. Просто интересно, что у меня всё получается.

    ОтветитьУдалить
  42. Светлана у меня почему то не удается скрыть навбар, не подскажете почему?
    И еще Вы не подскажете почему в панели инструментов в новой панеле Bloggera нет доступа к текущему шаблону и соответственно нет возможности управлять шаблонов, вносить в него изменения и т.д. как в старой версии? При нажатии на шаблон появляется черный экран с серым логотипом блоггера в центре и все. Это касается сайта http://maman-lima.com/. Буду очень признательная если получу от Вас помощь и содействие. С уважением Лилия.

    ОтветитьУдалить
  43. Лилия, здравствуйте!

    Доступ к редактированию Html-шаблона блога по прежнему есть. Они его только немного спрятали. Об этом я писала вот здесь: http://blogger4you.blogspot.com/2011/07/blogger-in-draft-new-design.html

    Удачи во всем!
    Света
    PS И не забывайте, что вы всегда можете вернуться к старому интерфейсу Blogger'а ;)

    ОтветитьУдалить
  44. Светлана, в том то и дело, что когда я нажимаю Шаблон у меня появляется полностью черный экран с серым логотипом Блоггера посередине и все.. больше ничего нет. А в других своих блогах кроме этого maman-lima.com все нормально. Вот почему меня волнует вопрос почему именно с этим блогом возникли такие проблемы, может что нибудь подскажете?

    ОтветитьУдалить
  45. Светлана я поменяла шаблон, теперь все нормально.

    ОтветитьУдалить
  46. Светлана здравствуйте! Возможно Вы сможете мне помочь?! Как сделать так, чтобы пользователь зашедший на мой блог смог добавить изображение в мой ПОСТ с компьютера или по url, но не смог редактировать пост. Как сформировать для шаблона комментариев скрипт из частей текстового редактора - добавить фото и ссылку на него?

    ОтветитьУдалить
  47. Спасибо большое!=) Все работает и радует глаз=)

    ОтветитьУдалить
  48. Светлана, здравствуйте!
    Пожалуйста подскажите что нужно исправить если после установки виджета Админ. панели нормально открывается только пункт "Нов. сообщение", "Настройки Бэкап"-выдает ошибку 404, "Дизайн" открывается в старом интерфейсе, "Управление коментариями"- тоже выдает ошибку 404
    С уважением, Геннадий.

    ОтветитьУдалить
  49. Светлана, здравствуйте!
    Ну очень хочется узнать почему не полностью работает виджет панели управления. Нормально открывается только пункты "Нов. сообщение"и "Дизайн".
    Когда открываю "Настройки /Бэкап" и "Управление коментариями"- выдает ошибку 404,

    ОтветитьУдалить
    Ответы
    1. К сожалению, код работал для "старой панели управления" Блоггера, с тех пор они многое переделали, если есть необходимость, мы тоже можем поправить ссылки...

      Удалить
  50. Здравствуйте, не знаю точно, куда надо было писать, но у меня возникла проблема: открываю свой блог 15liuba.blogspot.com и у меня видна только правая моя боковая панель блога (слева!). Такое чувство, что что-то сбилось в настройках, пробовала менять там внешний вид - нет результата. Уже не знаю, что и делать... Простите, если написала не туду, но, может, поможете советом!

    ОтветитьУдалить

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