Приветствую вас друзья. Я давно хотел создать страницу на своём блоге, на которой бы отображались все написанные статьи в одном месте. Так сказать, карта блога (содержание). Но как-то ничего подходящего не мог найти. Хотелось чего-нибудь оригинального, например как свой фон формы комментариев. И вот очередной раз гуляя по интернету, наткнулся на один очень интересный англоязычный блог.
Если у вас с английским всё в порядке, то можете на него заглянуть.Так вот, я нашёл то, что искал. Как только я увидел, сразу понял, что такая страница должна быть у меня на блоге. Это действительно нечто оригинальное. Работает по принципу гармошки. Нажимаете на нужную рубрику, и выпадают все статьи по данной теме. Поэтому места занимает мало на странице и не растягивается в длинную бесконечную полосу.
Плюс, если вы написали новую статью, напротив неё выставляется надпись "Nеw!!". Поэтому ваши читатели с лёгкостью найдут обновления вашего блога. Как это всё выглядит, вы можете посмотреть у меня на блоге, на странице "Все статьи блога". И если вам понравилось, то я сейчас покажу как создать оригинальную карту блога на Blogspot, и вы тоже сможете установить этот виджет у себя на блоге. И так поехали:
1) Идём в "Панель управления"
2) Заходим в "Дизайн" и нажимаем "Изменить HTML"
3) На всякий случай делаем резервное копирование шаблона
4) При помощи кнопок Ctrl+F ищем данный код: ]]>
5) И выше него вставляем код который находится ниже:
6) Сохраняем шаблон
5) И выше него вставляем код который находится ниже:
/*--------MBT TOC-----*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #1C8DFF;
background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
background: -moz-linear-gradient(top, #9dc2e7, #438cd2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}
7) Далее создаём новую страницу (не сообщение), пишем ей название, например "Карта блога", переходим в режим Html
8) И вставляем этот код:
8) И вставляем этот код:
Теперь замените ссылку моего блога на свой, и нажмите кнопку "сохранить". Всё готово, теперь вы можете перейти на вновь созданную страницу и полюбоваться своим шедевром. Так же записал для вас видео, где наглядно показал, что и как делать:
Ну вот друзья, теперь вы тоже знаете как создать оригинальную карту блога на Blogspot. Надеюсь, данная статья оказалась для вас полезной. Возможно вам так же интересно будет узнать, как вставить кнопки социальных сетей на Blogspot внизу статьи. А я с вами сегодня прощаюсь, желаю удачи и до новых встреч.
|
Хотите получать свежие статьи? |
|
Твиты пользователя @olymp63 
0 коммент.:
Отправить комментарий