Как в ставить слайдер карусель на блогспот

Как добавить Рекомендуемое Slider Сообщение содержимое в Blogger

1.Войдите вашей панели инструментов Blogger ----> макета ---> Изменить HTML

2.Scroll туда, где вы видите </ HEAD> тег.

3.Copy ниже код и вставьте его непосредственно перед </ head> тег.

Слайдер контента на блогспот(blogspot)

Слайдер для контента для блога на blogger

1.Войдите вашей панели инструментов Blogger ----> макета ---> Изменить HTML

2.Scroll туда, где вы видите </ HEAD> тег.

3.Copy ниже код и вставьте его непосредственно перед </ head> тег.

Слайдер картинок на блогспот

Вот так выглядит галерея картинок на блогспот

1.Войдите на приборной панели блоггера -> макета -> Изменить HTML

2.Scroll туда, где вы видите </ HEAD> тег.

3.Copy ниже код и вставьте его непосредственно перед </ head> тег.

Как создать слайд-шоу JQuery на блогспот

Вид слайдера мы видим на фото

Инструкция по внедрению:

Шаг # 1
Войти в Blogger, перейдите по ссылке Дизайн -> Изменить HTML и знак флажок "Расширить шаблоны виджета"
Шаг № 2
Теперь найдем (CTRL + F) этот код в шаблон:

</head>

И тут же перед ним, вставьте следующий код:

слайдер Рекомендуемые записи Slider для Blogger

Instructions To Follow:
STEP #1
Log in to Blogger, go to Design -> Edit HTML and mark the tick box "Expand Widget Templates"
STEP #2
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

#jFlowSlide{ background:#f8f8f8; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }

.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }

.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }

слайдеры для блогспот (blogger),карусель для блоггер

Избранные материалы Slider для Blogger помощью JQuery

Инструкции, чтобы следовать:
Шаг # 1
Войти в Blogger, перейдите по ссылке Дизайн -> Изменить HTML и знак флажок "Расширить шаблоны виджета"



Шаг № 2
найти (CTRL + F) этот код в шаблон:

]]> </ B: кожа>

И тут же перед ним, вставьте следующий код:

]]></b:skin>

And immediately before it, paste this code:

#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}

#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}

#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}

STEP #2
Now find (CTRL+F) this code in the template:

Как разместить рекламный блок в любом месте блога на блогспот

Сделаем самый  простой вариант  вывода блока рекламы с помощью сss.
Сделаем несколько простых действий
  При размещении на каждой странице задайте для контейнера глобальный стиль в "Настройки" -> "Дизайн" ->"Дизайнер шаблонов" -> "Дополнительно" -> "Добавить CSS" и добавляем код стиля для контейнера, назовем его к примеру "reklama"

.reklama {
 display: block;
 float: right;
 height: 220px;
 position: relative;
 margin: 10px;
 width: 220px;
}


Можете также задать фон блока или контур,если хотите его дополнительно выделить. Тогда при размещении рекламного кода нежно будет просто указать:

<div class="reklama'>
...............Код/Скрипт баннера или объявления............</div>