Итак, на повестке дня 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-LJr7Abw43yrEnv2oZfYpaz28_7XrTYAz3jUlE7MYGkj-dxXZ7-LMRUeMsa5KrxZH9-CejpG2uM7UP3nwchev2GnAyiYSdx6Sr83pD6CvyOhbcz9lW8bkFeEKWdG8lQGnCopdnOAuEDM/s22-no/blogger2.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(2) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIZufqE0nsDlAGbiXsXkrRsISJ26_43ElAL_Q_0r2FypQ-BgOosY00fNg3u3qT2qpgQ7XlJx4uiy4nSO-YKp3u-3I-0Ik2b4na5m1pPKozUe2FqdFjCIUAAvB7Lu_lfT-Yk2EQ4Q3Wdg4/s22-no/blogmarks-logo2.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(3) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgurVnCX2LfNgi1XPiAxvQrK79CSROP7XdOFOvvNCVS_pAyRfi0hWzLq_yL_RHFJWGORCJCSqYDSZkkgzQvFaXWVT2wsXsqqBncAxYGGEeRfWGwng3_IqviqJVC-GrTWlFjPhlsqT-G1K4/s22-no/delicious2.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(4) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbp5y6YrpbHolvkrp6-unnj11QVIw2Le45xEZVyvJ9Ma4Dx_0wN8mL5SojVGw-ar9QcQq4U4fn0nH7lkoEcXrposRx7AvP7DuAmjT6aGhqgjiVnX_4SSvqPx9_7L2EC6TCRi2tOYfVT3I/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-LJr7Abw43yrEnv2oZfYpaz28_7XrTYAz3jUlE7MYGkj-dxXZ7-LMRUeMsa5KrxZH9-CejpG2uM7UP3nwchev2GnAyiYSdx6Sr83pD6CvyOhbcz9lW8bkFeEKWdG8lQGnCopdnOAuEDM/s22-no/blogger2.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(5) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbp5y6YrpbHolvkrp6-unnj11QVIw2Le45xEZVyvJ9Ma4Dx_0wN8mL5SojVGw-ar9QcQq4U4fn0nH7lkoEcXrposRx7AvP7DuAmjT6aGhqgjiVnX_4SSvqPx9_7L2EC6TCRi2tOYfVT3I/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCYYn-6fFXU5HADz9ytaojTKu1O4bEp0jXGpsq4XycjuLkurEEsvjZ5htx1GW68-LPlZtP8KXOI-lq8HMHzhMKwRD3p7cpiLtPa0ne8SZ4PdRBuzfGXZxfIWa8iZuLvbe4J0jAECkD9vs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6LvA-d8gCMm79ozJf4VtTp6LxGsQkalEOyVAqu3hD9NgsNuJeywggY5420Y7r1ELhYlgk9-nQqXs4K5hB3Is_zzIjZdjFxdQc9doNGtTf-Gn8t07dG219HYVntGvDcGBDXyDxkjiYEA/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0_naOjV2oA_lMyqfjeSiBAJmIk-OA2T6NjSH5KTfRqxisuoHE7UFtK9Y0auEE-EqAalIm-h582aRleq_ycMcRqFM2kw_3RFcpYapo0ad0pZJ5Atx1RD7or34LL0ZRdBbMuSkkfitrv0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh85Q1n25DSDAYEDTAi3CQn3zhjqkKHF8ovsRcjxNLZr-rmRk9XVw1Eeifd_ZtvrMEZ3rOyK7xO5bbtGxkBkwaQvwQk2ZpE3hZR19lL3a5nIKhnvmuvAR3UaP8qmdrf7I_lfX4-utbl9YI/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
Демо: тестовый блог
