Сегодня я хочу представить вам Гаджет HTML/JavaScript и его возможности. Это универсальный способ установить в дизайне вашего блога всё, что вашей душе угодно. Любую картинку, видео, баннер, кнопки, текст и ссылки.
Можно, к примеру создать быстрые ссылки на подписку по RSS, на аккаунт в социальной сети и т.д. Об этом мой новый обзорный видеоурок.
Если есть вопросы по этому гаджету, задавайте в комментариях.
31
Светлана, добрый день. Прошу помощи по настройке гаджета Галерея фотографий (http://www.allblogtools.com/tricks-and-hacks/how-to-add-images-gallery-widget-with-jquery-hover-zoom-to-your-blogger/). Самостоятельно разобралась с "вытягиванием" фотографий в одну линию, с подписями при наведении мыши на фотографию, с оптимизацией размеров фотографий для этой галереи. Но остаются вопросы : не работает переход по ссылке при клике на фотографию (ссылки рабочие, проверено в постах), не могу центрировать галерею (вроде везде left заменила на center, но все сдвинуто к левой границе), при наведении мыши на фотографию фото увеличивается до заданного размера (я поняла где этот размер задается), но обрезается невидимыми границами гаджета и становится почти не видна. Вот моя галерея : http://mycozyhobby.blogspot.com/
Спасибо.
Доброго времени суток, Катерина!
Во-первых, мне непонятно про какой гаджет идёт речь и что за ссылка, которую вы мне дали.
Во-вторых, каждый раз, как я захожу на ваш блог, он ооочень долго грузится, в частности из-за огромного количества изображений, а вы ещё картинок решили добавить.
Все картинки в сообщениях надо убирать под кат, либо уменьшать количество постов на Главной, иначе посетитель так и не дождётся и уйдёт.
Да, и я решила проверить ваши ссылки, но я сейчас пишу коммент, но до сих пор ничего не загрузилось, крутится и крутится. Поэтому, к сожалению, ни чем не могу помочь.
Светлана. спасибо за быструю реакцию на мой вопрос. Не совсем поняла, возьметесь ли вы помочь и надо ли продолжать...1. У меня и моих знакомых блог открывается моментально на разных компьютерах и при разных скоростях интернета, может быть именно сейчас какой-то сбой и поэтому так долго у вас грузится? 2. В моем блоге и нужны картинки - это же результаты моей работы, а не пошлые украшательства как у очень многих и не реклама. 3. Практически все статьи "открывающиеся", то есть по максимуму все спрятано.
Если у вас все-таки найдется время еще раз попробовать разобраться с моей проблемой, пробую уточнить : виджет называется gallery-widget-with-jquery-hover-zoom-to-your-blogger, первая ссылка на сайт allblogtools.com, где представлен этот гаджет и описано как и что делать. Ну и практически все работает кроме трех моментов, про которые я и написала вам : центрирование гаджета, "обрезание" фотографий при их увеличении в момент наведения курсора и переход по клику - не происходит ничего.
Спасибо, если еще раз попробуете помочь.
У меня медленный интернет, Катерина, и происходит это при каждом посещении. Я понимаю, что это результаты работы и всё такое, но я насчитала 9 сообщений на Главной. Это много! Оставьте хотя бы 5.
По поводу гаджета, я установила на тестовый блог, он не работает. Пишите разработчикам или используйте простую таблицу. Вставьте в гаджет HTML/JavaScripr этот код:
<center><table>
<tr>
<td>
<a href="ссылка_№1"><img src="ссылка_на_изображение_№1" title="имя_ссылки_№1" /></a>
</td>
<td>
<a href="ссылка_№2"><img src="ссылка_на_изображение_№2" title="имя_ссылки_№2" /></a>
</td>
</tr>
</table></center>
Колонок добавьте сколько нужно, ссылки на страницы, ссылки на изображения и названия добавьте. Не так эффектно, но зато работает. Можно посмотреть, конечно, как можно осуществить увеличение при наведении, но это не сегодня.
Света, спасибо. Опробую ваш код. Если найду решение своего вопроса, скину вам работающий вариант. Может кому-то будет интересно.
Код с увеличением картинок при наведении:
<style>
img.big {
cursor: pointer;
max-width: 100px;
}
img.big:hover {
max-width: none;
}
</style>
<center><table>
<tr>
<td>
<a href="ссылка_№1"><img
class="big" src="ссылка_на_изображение_№1" title="имя_ссылки_№1" /></a>
</td>
<td>
<a href="ссылка_№2"><img
class="big" src="ссылка_на_изображение_№2" title="имя_ссылки_№2" /></a>
</td>
</tr>
</table></center>
Всё, что выделено нужно поменять. Установить нужный размер в пикселях и ссылки добавить. Всё работает проверяла лично.
Если же вас, Катерина, всё же интересует гаджет, о котором вы писали, обращайтесь к разработчикам.
Светлана, спасибо!
Пожалуйста, Катерина!
Гаджет, который вас интересует, пока будет расположен под шапкой, так и будет обрезан, попробуйте его перенести над сообщениями блога, как на картинке и всё измениться.
Катерина, если вам всё еще интересно как сделать, чтобы картинки не обрезались в вашем гаджете, есть ещё вариант. Вставьте код не в гаджет, а непосредственно в шаблон после последнего вхождения <b:include name='description'/>. Я их четыре насчитала в шаблоне.
Света, огромное спасибо за внимание к моему вопросу. Сразу хотела попробовать, но такого текста "" у меня в шаблоне нету ни одного. Попробую сначала вашу более раннюю подсказку : разместить гаджет в боковой панели.
Света, очень хорошо смотрится галерея в боковой колонке моего так сказать тестового блога (ничего не обрезается), но там (черт побери) другой шаблон...Фотографии красиво выстраиваются в два столика без всяких изменений размеров (ширина колонки в шаблоне 320)...Как только вставляю гаджет в свой блог (ширина колонки 220) и уменьшаю размеры фото в тексте гаджета (уменьшила уже от 110 до 50рх) - все в один столбик! хотя размеры окошек заметно уменьшены. 50*2=100 а размер колонки 220, ну должно же без вопросов влезть даже в 3 столбика уже! Сижу копаюсь дальше, странно...
Вставьте код непосредственно в шаблон, под описание. Что у вас нет в шаблоне, кода <b:include name='description'/>? Если вы его не нашли, то вы просто не поставили галочку "Расширить шаблоны виджета".
Света, здравствуйте. Расширила шаблоны виджета, нашлись все 4 "вхождения". В тестовом блоге : первую "часть" галереи оставляю перед ]]>, вторую "часть" (которая была перед /head) и третью - сами "столбики со ссылками" помещаю после 4 вхождения : появляется галерея под шапкой блога , но в один вертикальный столбец, при том, что ширина галереи прописана как и была по максимуму - 1000рх.
В моем блоге при этом не появляется НИЧЕГО и НИКАК вообще, никаких видимых изменений. Копаюсь дальше...
Попробуйте этот код, Катерина, в гаджет HTML установить:
<style type="text/css">
.st {
width:100px;
border:3px solid #ffffff;
}
.st:hover {
width:120px;
margin-bottom:-26px;
}
</style>
<center><div style="padding:25px;">
<a href="url-ссылки#1"><img class="st" src="url-картинки#1" title="название#1"/></a>
<a href="url-ссылки#2"><img class="st" src="url-картинки#2" title="название#2"/></a>
</div></center>
Как обычно всё, что выделено заменяйте, добавляйте: <a href="url-ссылки"><img class="st" src="url-картинки" title="название"/></a> столько, сколько картинок
Света, этот код работает в обоих блогах. Картинки показаны в ряд. НЕ увеличиваются по наведению мыши. Переход по ссылкам происходит нормально. Изменение первого параметра width не приводит к изменению размеров фотографии. Если только вас саму не разобрало желание разобраться с моим вопросом, снимаю эту проблему. Оставляю пока "обрезанную" галерею в верхнем подшапочном гаджете. Спасибо!
Катерина, всё работает, как и предыдущие варианты. Посмотрите в тестовом блоге: gadgethtml.blogspot.com
Добрый день, Светлана.
На вкладке Дизайн-Добавить гаджет окно вставки Html/java script не отображается. Подскажете. где его найти? Спасибо
Смотрите должен быть после гаджета "Окно поиска".
здравствуйте светлана! создала вкладку summer trip
http://lizavetrova.blogspot.com/
вот теперь мне интересно как сделать так, чтобы на этой страничке можно было сделать не одно, а много сообщений, как на главной. или как отправлять туда сообщения с ярлыками с главной страницы?
заранее благодарю)
Liza, статические страницы не могут иметь структуру блога. Если вы хотите создать вкладки для сообщений с определенным ярлыком, то зайдите в панели Страницы > Создать страницу > Веб-адрес, как на картинке. Вам откроется окно, в которое введёте заголовок страницы (summer trip) и в URL ссылку на нужный ярлык.
спасибо большое! разобралась все получилось)
И снова здравствуйте, Светлана! у меня к вам появился еще один небольшой вопрос: как оформить панель навигации? ну то есть вставить разные картинки с текстом. И еще один вопрос на засыпку, правда не совсем по теме: почему у блога может быть только до 100 читателей?
Liza, надо сказать, что все вопросы не по теме))).
Откуда такая инфа, что у блога может быть только до 100 читателей? Я видела блоги, у которых несколько десятков тысяч читателей. А про панель навигации с картинками не поняла вашего вопроса.
светлана, а как вам можно картинки скинуть, чтобы показать панель навигации, какую я хочу и "100 читателей"?
Закачайте в Picasa и пришлите мне ссылки.
http://3.bp.blogspot.com/-wYDSo2GuXDg/Tw7Q5hZeIGI/AAAAAAAABaY/6Oia7YY6SPc/s1600/12112332.png
светлана, скажите, как сделать такое меню (чтобы было на картинках)и границы круглые?
Варианта три: в Фотошопе нарисовать, либо шаблон такой же найти, а ещё вариант заглянуть в исходный код этой страницы и слизать часть кода.
Ага, ничего не поняла. Давайте по порядку
1)как я поняла надо сделать картинки для меню. а куда их потом вставлять? можно поподробнее?)
2)а что, собственно говоря, включает в себя шаблон?
просто мне бы не хотелось повторять все. меня интересуют только круглые (или какие нибудь другие края) и картинки в меню как делать.
Я вижу, мадам Аноним, вы вообще не в теме. Изучайте весь блог с самого первого сообщения. Могу дать вам индивидуальную консультацию по Skype, если хотите, стоить это будет 1000 руб. в час.
Светлана, здравствуйте! Помогите, пожалуйста! Я опробую скачанный шаблон http://nullza.ru/download-mega-mag-responsive-magazine-blogger-template/
на тестовом блоге и споткнулась на подключении слайдера
file:///D:/%D0%97%D0%B0%D0%BF%D0%B8%D1%81%D0%BA%D0%B8/%D0%9A%D0%BE%D0%B4%D1%8B%20%D0%BC%D0%B5%D0%BD%D1%8E/Meg%20Mag%20Responsive%20Blogger%20Template/Theme%20Documentation%20(Meg%20Mag%20Responsive%20Blogger%20Template)/Readme.html
В инструкции написано: "вставьте Blogger Tag Name в гаджет HTML/JavaScript"
Подскажите, пожалуйста, что именно туда надо вставлять?
Галина, я думаю, вопрос не ко мне, а к разработчику.
Отправить комментарий