Итак, на повестке дня 5 вопросов:
1. как скрыть стандартный гаджет "Subcribe"
2. как поменять стандартные иконки гаджетов.
3. как сделать, чтобы гаджеты были слева, а не справа по умолчанию
4. как поменять иконку загрузки страницы сайта
5. как в меню ссылки сделать картинками
Самым простым и проверенным способом является простое его скрытие. Для этого заходим в админку вашего блога -> Шаблон -> кнопка Настроить -> Дополнительно -> Добавить CSS и вставляем код ниже:
#gadget-dock div.gadget-item:last-child, #spk{
display: none !important;
}
Сохраняем, смотрим на свой сайт, гаджет подписки пропал:
Данный код скрывает только последний гаджет, обычно во всех шаблонах это гаджет подписки.
.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;
}
.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", на скрине видно.
.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, ссылку на картинку заменяете на свою. У меня получилось так (на скрине как было и как стало):
#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
Демо: тестовый блог