Итак, на повестке дня 5 вопросов:
1. как скрыть стандартный гаджет "Subcribe"
2. как поменять стандартные иконки гаджетов.
3. как сделать, чтобы гаджеты были слева, а не справа по умолчанию
4. как поменять иконку загрузки страницы сайта
5. как в меню ссылки сделать картинками
1
Гаджет "Subscribe" стандартными средствами платформы blogspot не убрать, удалить из кода теоретически можно, но сложно, я не разбирался даже. Вот он на скрине:
Самым простым и проверенным способом является простое его скрытие. Для этого заходим в админку вашего блога -> Шаблон -> кнопка Настроить -> Дополнительно -> Добавить CSS и вставляем код ниже:
#gadget-dock div.gadget-item:last-child, #spk{
display: none !important;
}Сохраняем, смотрим на свой сайт, гаджет подписки пропал:
Данный код скрывает только последний гаджет, обычно во всех шаблонах это гаджет подписки.
2
Кому надоели стандартные иконки гаджетов их можно поменять на такие какие вам нравятся. Для этого ваши иконки нужно залить на Google+ (есть там сервис "фото"), затем в Добавить CSS (где это находится читаем в первом примере) добавляем:.ss, #gadget-dock>div:nth-of-type(1) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(2) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(3) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(4) .gadget-icons img{
display: none !important;
}
#gadget-dock>div:nth-of-type(1) .gadget-icons{
background: url(https://lh5.googleusercontent.com/-352vCCovNUE/UkcPMQfGT0I/AAAAAAAAA1w/1D2FruNnRq4/s22-no/blogger2.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(2) .gadget-icons{
background: url(https://lh3.googleusercontent.com/-qybFzGeimfQ/UkcPMSoWyDI/AAAAAAAAA2M/pLXnA_P280A/s22-no/blogmarks-logo2.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(3) .gadget-icons{
background: url(https://lh3.googleusercontent.com/-jeN_do19S0w/UkcPMUZM88I/AAAAAAAAA10/Av27v12Rcac/s22-no/delicious2.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(4) .gadget-icons{
background: url(https://lh4.googleusercontent.com/-ByVTPXK14f8/UkcPNBfiSuI/AAAAAAAAA2A/tsgiFH0Rl9s/s22-no/facebook-logo2.png) no-repeat center !important;
}
соответственно, ссылку на картинку вставляете свою
background: url(ЗДЕСЬ_ССЫЛКА_НА_КАРТИНКУ) no-repeat center !important;но для пробы можете вставить мой код полностью. Так же цифры в скобках означают номер гаджета, отсчет идет сверху вниз. К примеру если вы хотите заменить иконки только второго и пятого гаджета вставляете код:
.ss, #gadget-dock>div:nth-of-type(2) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(5) .gadget-icons img{
display: none !important;
}
#gadget-dock>div:nth-of-type(2) .gadget-icons{
background: url(https://lh5.googleusercontent.com/-352vCCovNUE/UkcPMQfGT0I/AAAAAAAAA1w/1D2FruNnRq4/s22-no/blogger2.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(5) .gadget-icons{
background: url(https://lh4.googleusercontent.com/-ByVTPXK14f8/UkcPNBfiSuI/AAAAAAAAA2A/tsgiFH0Rl9s/s22-no/facebook-logo2.png) no-repeat center !important;
}
3
Если кому не нравится, что общий виджет с гаджетами "Обо мне", "Архивы", "Ярлыки" и т.п. находятся справа, можно его разместить слева. Заходим Добавить CSS и вставляем код ниже:.gadget-container {
-moz-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
-webkit-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
-ms-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
-o-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
margin-right: 100% !important;
right: -100px !important;
left: 0px !important;
}
.gadget-container:hover, .gadget-item.ss:hover, .gadget-item:hover .gadget-container, .gadget-selected .gadget-container {
right: auto !important;
}
#gadget-dock:hover, #gadget-dock.gadget-notifying, #gadget-dock.gadget-opening{
left: 0px !important;
}
#gadget-dock {
-moz-transition: left 0.15s ease-in-out 0s;
-webkit-transition: left 0.15s ease-in-out 0s;
-ms-transition: left 0.15s ease-in-out 0s;
-o-transition: left 0.15s ease-in-out 0s;
left: -40px;
}Сохраняем, должно получиться как у меня на скрине:
Только учтите, что расположив их слева, возможно помешаете раскрывающемуся списку видов шаблонов вверху в меню, кнопка "Classic", на скрине видно.
4
Вставив этот код, можно поменять иконку загрузки сайта на любую свою картинку:.blogger-gear, .overview-sspe {
background-image: url('https://lh6.googleusercontent.com/-KopG-Ib6VKc/UkccFBh2hCI/AAAAAAAAA3c/i80YUKk5BDU/w114-h117-no/loading43.gif') !important;
height: 117px !important;
width: 114px !important;
}Код вставляете в пункт настройки шаблона Добавить CSS, ссылку на картинку заменяете на свою. У меня получилось так (на скрине как было и как стало):
5
Этот способ для тех, кто хочет в меню ссылки заменить красивыми картинками, для начала их заливаем на Google+, высота их должна соответствовать высоте меню, по умолчанию это 25px. Затем в пункте Добавить CSS добавляем код:#pages.tabs ul{
margin-left: 5px !important;
}
#header .tabs li {
display: inline-block;
height: auto;
line-height: auto;
margin: 0px;
}
#pages.tabs ul li:nth-child(1) a:link{
background: url('https://lh4.googleusercontent.com/-xzjmdGoO1HA/UkcoYf5g3FI/AAAAAAAAA5I/p_277px-lOk/w100-h25-no/homepage2.png') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
height: 25px;
}
#pages.tabs ul li:nth-child(3) a:link{
background: url('https://lh3.googleusercontent.com/-lNAUhWpcA48/Ukcm50TbKKI/AAAAAAAAA4E/Vz_FjqsyztQ/w100-h25-no/prosto.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
height: 25px;
}
#pages.tabs ul li:nth-child(4) a:link{
background: url('https://lh4.googleusercontent.com/-1Q38W0FYOG8/Ukcm6WihAMI/AAAAAAAAA4Q/5GuEll8hoPI/s40-no/russian.gif') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 40px !important;
height: 40px;
}Ссылки на фото меняете на свои. Размер картинки так же вносите свои (параметры width и height). Так же цифры в скобках означают порядковый номер ссылки, отсчет идет слева направо. Я захотел поменять только первую, третью и четвертую ссылки, заметьте, что последняя картинка-ссылка имеет размер меньший чем была сама ссылка на ее месте (по предыдущим скринам это видно).
В статье использованы материалы с сайта www.southernspeakers.net
Демо: тестовый блог
