Доброго времени суток, товарищи блоговоды! В моей статье о поисковой оптимизации блога на сервисе от Blogspot я уже поднимал тему создания карты блога. И все было хорошо, но только до определенного момента. Народ начал жаловаться, что карта моего блога не работает. Я удивился, опечалился, задумался и решил, дабы не тратить время на разборки с предыдущим скриптом, поискать другой подходящий под мои нужды. В процессе усердного гугления выяснилось, что, в целом, все решения являются типовыми и выбирать приходится только само оформление карты. Тут возникли некоторые трудности. Все опробованные скрипты просто ужасно смотрятся в контексте моего блога. Понятное дело, что карта сайта нужна только для лучшей индексации поисковым роботом, но жертвовать красотой я никак не собираюсь.
Прочитав код, который мне предлагают, я выяснил, что вся "красотенюшка" хранится в CSS файле, который находится "гдетотам". Забиваем в адресную строку браузера линк на цээсэску и получаем ее содержимое. Не мудрствуя лукаво, производим магические жесты CTR+C, CTR+V. Вставляем содержимое css в наш код, обрамляем тегами <style></style>, выпиливаем уже ненужный линк на старую css и, вымыв руки с мыло и помолясь, лезем править стили оформления. Тут нам пригодятся небольшие знания css. Благо они у нас имеются :-) .
В ходе несложной хирургической операции( выпилил все фоновые цвета), мной был получен следующий код :
<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 12px;
}
.gfg-title {
font-size: 14px;
font-weight : bold;
color : #3366cc;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-subtitle {
font-size: 12px;
font-weight : bold;
color : #3366cc;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 5px;
}
.gfg-subtitle a {
color : #3366cc;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}
.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
margin-top : 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
position : relative;
}
.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}
.gfg-horizontal-root .gfg-title {
font-weight : bold;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
display : none;
}
/*
* FeedControl customizations.
*/
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
margin-right : 3px;
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
}
.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}
.gfg-collapse-open {
background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}
</style>
<script src="http://blogtoc-cometa.googlecode.com/files/blogtoc_wa.js">
</script>
<script src="http://ВАШ-БЛОГ.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
Ай, молодец!-сказал я себе и накатал по этому поводу опус.
Большое спасибо ребятам, которые указали на нерабочий скрипт и ребятам который его предоставили в безвозмездное пользование и растерзание (надуюсь они не в обиде).
Прочитав код, который мне предлагают, я выяснил, что вся "красотенюшка" хранится в CSS файле, который находится "гдетотам". Забиваем в адресную строку браузера линк на цээсэску и получаем ее содержимое. Не мудрствуя лукаво, производим магические жесты CTR+C, CTR+V. Вставляем содержимое css в наш код, обрамляем тегами <style></style>, выпиливаем уже ненужный линк на старую css и, вымыв руки с мыло и помолясь, лезем править стили оформления. Тут нам пригодятся небольшие знания css. Благо они у нас имеются :-) .
В ходе несложной хирургической операции( выпилил все фоновые цвета), мной был получен следующий код :
<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 12px;
}
.gfg-title {
font-size: 14px;
font-weight : bold;
color : #3366cc;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-subtitle {
font-size: 12px;
font-weight : bold;
color : #3366cc;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 5px;
}
.gfg-subtitle a {
color : #3366cc;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}
.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
margin-top : 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
position : relative;
}
.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}
.gfg-horizontal-root .gfg-title {
font-weight : bold;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
display : none;
}
/*
* FeedControl customizations.
*/
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
margin-right : 3px;
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
}
.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}
.gfg-collapse-open {
background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}
</style>
<script src="http://blogtoc-cometa.googlecode.com/files/blogtoc_wa.js">
</script>
<script src="http://ВАШ-БЛОГ.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
Ай, молодец!-сказал я себе и накатал по этому поводу опус.
Большое спасибо ребятам, которые указали на нерабочий скрипт и ребятам который его предоставили в безвозмездное пользование и растерзание (надуюсь они не в обиде).
Попробую:)
ОтветитьУдалитьhttp://vertoprakhov.blogspot.com/
ОтветитьУдалитьЭто мой блог , что я ни делаю всегда белый экран, помогите пожалуйста сделать карту блога.
все сделал,теперь посмотрим,но все равно спасибо.
ОтветитьУдалитьподскажите плиз, а вставлять весь большой код или только тот где ВАШ-БЛОГ указан? У меня почему то никакой карты нет?
ОтветитьУдалитьКусок кода, выделенный золотым цветом - стили оформления. Их тоже надо копировать и, если есть соответствующие знания, можно править на свой вкус. Если не править - будет выглядеть как у меня.
Удалитьне совсем поняла, меняю HTML сразу вставлять то что золотым цветом? А то что белым вообще не надо?
УдалитьНичего не понимаю, нет у меня таких списков как у вас
УдалитьЭтот комментарий был удален автором.
ОтветитьУдалитьне работает
ОтветитьУдалить