Показаны сообщения с ярлыком МОИ УРОКИ. Показать все сообщения
Показаны сообщения с ярлыком МОИ УРОКИ. Показать все сообщения

воскресенье, 13 сентября 2015 г.

Красивое оформление ярлыков для Blogspot.

В этом уроке мы рассмотрим как можно красиво оформить раздел ЯРЛЫКИ.
Мне такой эффект понравился, во всяком случае смотрится на много красивее, чем родной гаджет ЯРЛЫКИ. Вот так выглядят  РАЗДЕЛЫ БЛОГА у меня. Если навести курсор на  раздел, то ярлычок будет двигаться и менять цвет.
 Цвет ярлычков можно менять под свой дизайн.

Если вам понравился такой вариант гаджета ЯРЛЫКИ, тогда приступим к установке. Наверняка у вас уже установлен такой гаджет.
Для новичков скажу, как это сделать.
*****
 Заходим в НАСТРОЙКИ = выбираем ДИЗАЙН = ДОБАВИТЬ ГАДЖЕТ
и из предложенных вариантов выбираем -ярлыки.
  Добавленный гаджет перемещайте в нужное место и нажмите на ПРОСМОТР.
Если вас всё устраивает, жмите на СОХРАНИТЬ РАСПОЛОЖЕНИЕ.
*****


 Сразу заострю ваше внимание, что предложенный код,
 работает если выбран стиль ОБЛАКО.
 При варианте СПИСОК этот код не подходит.
 
 КОПИРУЕМ ЭТОТ КОД
 В коде меняйте цветовые значения на свои, они  выделены  разным цветом.
Зайдите на Блоге в раздел  Онлайн Генератор цвета  и подберите нужный цвет.

.label-size a { margin:0 4px 6px 0; padding: 5px; text-transform: uppercase; border: solid 1px #3E496B; box-shadow: 1px 1px 2px #333 inset; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#990000; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #0F1650; } .label-size a:hover { border:1px solid #DCE5F4; text-decoration: none; -moz-transition: all 0.7s ease-out;  -moz-transform: rotate(7deg); color: #333; background-color: #3957A1; box-shadow: 1px 1px 2px #333; }

После всех изменений заходим во вкладку шаблон-изменить HTML. и перед строкой ]]></b:skin> вставляем скопированный код.



КАК НАЙТИ НУЖНУЮ СТРОКУ В ШАБЛОНЕ
Кликаем мышкой в любом месте шаблона и жмём на клавиатуре  CTRL+F
Появится окошко (смотрите скриншот) в это окошко вставляем скопированный участок кода который выделен у нас красным цветом и жмём Enter
таким образом, с помощью клавиш CTRL+F мы находим нужный нам участок кода.
В данном случае у нас это  ]]></b:skin>

После установки кода, непосредственно в шаблон, обязательно нажмите просмотреть шаблон и убедитесь, что всё получилось. Не забудьте сохранить. Остаётся только зайти посмотреть блог и порадоваться новому дизайну гаджета ярлыки.


Всегда перед тем как что-то менять в шаблоне не забывайте
делать резервное копирование!
==========================
Понравилась статья? Поделитесь с друзьями

Красивое оформление ярлыков для Blogspot.

В этом уроке мы рассмотрим как можно красиво оформить раздел ЯРЛЫКИ.
Мне такой эффект понравился, во всяком случае смотрится на много красивее, чем родной гаджет ЯРЛЫКИ. Вот так выглядят  РАЗДЕЛЫ БЛОГА у меня. Если навести курсор на  раздел, то ярлычок будет двигаться и менять цвет.
 Цвет ярлычков можно менять под свой дизайн.

Если вам понравился такой вариант гаджета ЯРЛЫКИ, тогда приступим к установке. Наверняка у вас уже установлен такой гаджет.
Для новичков скажу, как это сделать.
*****
 Заходим в НАСТРОЙКИ = выбираем ДИЗАЙН = ДОБАВИТЬ ГАДЖЕТ
и из предложенных вариантов выбираем -ярлыки.
  Добавленный гаджет перемещайте в нужное место и нажмите на ПРОСМОТР.
Если вас всё устраивает, жмите на СОХРАНИТЬ РАСПОЛОЖЕНИЕ.
*****


 Сразу заострю ваше внимание, что предложенный код,
 работает если выбран стиль ОБЛАКО.
 При варианте СПИСОК этот код не подходит.
 
 КОПИРУЕМ ЭТОТ КОД
 В коде меняйте цветовые значения на свои, они  выделены  разным цветом.
Зайдите на Блоге в раздел  Онлайн Генератор цвета  и подберите нужный цвет.

.label-size a { margin:0 4px 6px 0; padding: 5px; text-transform: uppercase; border: solid 1px #3E496B; box-shadow: 1px 1px 2px #333 inset; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#990000; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #0F1650; } .label-size a:hover { border:1px solid #DCE5F4; text-decoration: none; -moz-transition: all 0.7s ease-out;  -moz-transform: rotate(7deg); color: #333; background-color: #3957A1; box-shadow: 1px 1px 2px #333; }

После всех изменений заходим во вкладку шаблон-изменить HTML. и перед строкой ]]></b:skin> вставляем скопированный код.



КАК НАЙТИ НУЖНУЮ СТРОКУ В ШАБЛОНЕ
Кликаем мышкой в любом месте шаблона и жмём на клавиатуре  CTRL+F
Появится окошко (смотрите скриншот) в это окошко вставляем скопированный участок кода который выделен у нас красным цветом и жмём Enter
таким образом, с помощью клавиш CTRL+F мы находим нужный нам участок кода.
В данном случае у нас это  ]]></b:skin>

После установки кода, непосредственно в шаблон, обязательно нажмите просмотреть шаблон и убедитесь, что всё получилось. Не забудьте сохранить. Остаётся только зайти посмотреть блог и порадоваться новому дизайну гаджета ярлыки.


Всегда перед тем как что-то менять в шаблоне не забывайте
делать резервное копирование!
==========================
Понравилась статья? Поделитесь с друзьями

пятница, 11 сентября 2015 г.

Красивое оформление заголовка на Blogspot,

Всем доброе время суток.
В этом уроке мы рассмотрим как можно красиво оформить заголовок сообщения.
Такой эффект обязательно привлечёт внимание ваших посетителей.
  На блоге такая фишка смотрится очень эффектно. Если навести курсор на  заголовок сообщения, получим такую красивую подсветку.
 

Цвета можно поменять под свой дизайн.
То, что выделено синим цветом, а именно, значение #00BFFF- отвечает за цвет фона.
КОПИРУЕМ ЭТОТ КОД

h3{
font-family: Times New Roman !important;
font-style:italic !important;
}
.post h3 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.post h3:hover {
color: #00BFFF;
border-left:10px solid#75A6CB ;
border-right:10px solid#75A6CB ;
box-shadow:0px 0px 13px#75A6CB;
-webkit-box-shadow:0px 0px 13px #75A6CB;
-moz-box-shadow:0px 0px 13px#75A6CB;
}
blockquote {
background: #4159A6 url() no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "GEORGIA", Times, serif;
border:1px solid #DCDCDC;
}
blockquote:hover {
background: #4159A6 url() no-repeat right bottom ;
color:#0CADF1;
}
blockquote p {
margin: 0;
padding-top:10px;
}
 
 Если удалить значение italic , тогда шрифт будет прямой, а не курсив.
После всех изменений заходим во вкладку шаблон-изменить HTML.
 Находим  строку  ]]></b:skin> и сразу над ней вставляем скопированный код.

 
КАК НАЙТИ НУЖНУЮ СТРОКУ В ШАБЛОНЕ

Кликаем мышкой в любом месте шаблона и жмём на клавиатуре  CTRL+F
Появится окошко (смотрите скриншот) в это окошко вставляем скопированный участок кода который выделен у нас красным цветом и жмём Enter
таким образом, с помощью клавиш CTRL+F мы находим нужный нам участок кода.

  Жмём ПРОСМОТР, и если  всё нормально, сохраняем, возвращаемся и видим, что все заголовки постов в красивом оформлении.

Зайдите на Блоге в раздел  Онлайн Генератор цвета  и подберите нужный цвет.
Всегда перед тем как что-то менять в шаблоне не забывайте делать резервное копирование!

==========================
Понравилась статья? Поделитесь с друзьями

Красивое оформление заголовка на Blogspot,

Всем доброе время суток.
В этом уроке мы рассмотрим как можно красиво оформить заголовок сообщения.
Такой эффект обязательно привлечёт внимание ваших посетителей.
  На блоге такая фишка смотрится очень эффектно. Если навести курсор на  заголовок сообщения, получим такую красивую подсветку.
 

Цвета можно поменять под свой дизайн.
То, что выделено синим цветом, а именно, значение #00BFFF- отвечает за цвет фона.
КОПИРУЕМ ЭТОТ КОД

h3{
font-family: Times New Roman !important;
font-style:italic !important;
}
.post h3 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.post h3:hover {
color: #00BFFF;
border-left:10px solid#75A6CB ;
border-right:10px solid#75A6CB ;
box-shadow:0px 0px 13px#75A6CB;
-webkit-box-shadow:0px 0px 13px #75A6CB;
-moz-box-shadow:0px 0px 13px#75A6CB;
}
blockquote {
background: #4159A6 url() no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "GEORGIA", Times, serif;
border:1px solid #DCDCDC;
}
blockquote:hover {
background: #4159A6 url() no-repeat right bottom ;
color:#0CADF1;
}
blockquote p {
margin: 0;
padding-top:10px;
}
 
 Если удалить значение italic , тогда шрифт будет прямой, а не курсив.
После всех изменений заходим во вкладку шаблон-изменить HTML.
 Находим  строку  ]]></b:skin> и сразу над ней вставляем скопированный код.

 
КАК НАЙТИ НУЖНУЮ СТРОКУ В ШАБЛОНЕ

Кликаем мышкой в любом месте шаблона и жмём на клавиатуре  CTRL+F
Появится окошко (смотрите скриншот) в это окошко вставляем скопированный участок кода который выделен у нас красным цветом и жмём Enter
таким образом, с помощью клавиш CTRL+F мы находим нужный нам участок кода.

  Жмём ПРОСМОТР, и если  всё нормально, сохраняем, возвращаемся и видим, что все заголовки постов в красивом оформлении.

Зайдите на Блоге в раздел  Онлайн Генератор цвета  и подберите нужный цвет.
Всегда перед тем как что-то менять в шаблоне не забывайте делать резервное копирование!

==========================
Понравилась статья? Поделитесь с друзьями

пятница, 4 сентября 2015 г.

Как ставить нумерацию страниц в Blogger (Blogspot)

Кто ведёт Блог на Blogger (Blogspot), знают что стандартный вид навигации
отображён ссылками: Следующие; Главная страница; Предыдущие;
Мне кажется, что это очень не удобно для посетителей.
Сегодня я хочу показать вам, как сделать удобную систему навигации
нумерацию страниц для Вашего блога. У меня это выглядит так.

 Теперь давайте разберёмся, как поставить нормальную постраничную навигацию
с помощью простого Java Scriptа.
Сделать это совсем не трудно и много времени не займёт.


Заходим в НАСТРОЙКИ = выбираем ДИЗАЙН = ДОБАВИТЬ ГАДЖЕТ
В открывшемся окне выбираем HTML/JavaScript Добавить



 Вставляем свой код и жмём СОХРАНИТЬ .
ДОБАВИТЬ ГАДЖЕТ
В открывшемся окне выбираем HTML/JavaScript = Добавить
Вставляем свой код сохраняем гаджет и перетаскиваете его
 под Сообщения блога, как показано на первом рисунке.
 
КОПИРУЕМ ЭТОТ КОД

<style>.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}</style><script type='text/javascript'>
var home_page_url = location.href;
var pageCount=7;
var displayPageNum=3;
var upPageWord ='Назад';
var downPageWord ='Вперёд';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
  html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span  class="showpageOf"> Страниц ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
 thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
 html = labelHtml+'1</a></span>';
}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>
<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>


- В коде нумерации страниц Вы можете внести изменения и подстроить под себя.

var pageCount=4 - Количество сообщений на главной странице.

var displayPageNum=100 - Количество страниц, которые будут показаны в гаджете.

Синим цветом выделены цвета гаджета, которые вы также можете изменить. 
Зайдите на Блоге в раздел  Онлайн Генератор цвета  и подберите нужный цвет.

==========================
Понравилась статья? Поделитесь с друзьями

Как ставить нумерацию страниц в Blogger (Blogspot)

Кто ведёт Блог на Blogger (Blogspot), знают что стандартный вид навигации
отображён ссылками: Следующие; Главная страница; Предыдущие;
Мне кажется, что это очень не удобно для посетителей.
Сегодня я хочу показать вам, как сделать удобную систему навигации
нумерацию страниц для Вашего блога. У меня это выглядит так.

 Теперь давайте разберёмся, как поставить нормальную постраничную навигацию
с помощью простого Java Scriptа.
Сделать это совсем не трудно и много времени не займёт.


Заходим в НАСТРОЙКИ = выбираем ДИЗАЙН = ДОБАВИТЬ ГАДЖЕТ
В открывшемся окне выбираем HTML/JavaScript Добавить



 Вставляем свой код и жмём СОХРАНИТЬ .
ДОБАВИТЬ ГАДЖЕТ
В открывшемся окне выбираем HTML/JavaScript = Добавить
Вставляем свой код сохраняем гаджет и перетаскиваете его
 под Сообщения блога, как показано на первом рисунке.
 
КОПИРУЕМ ЭТОТ КОД

<style>.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}</style><script type='text/javascript'>
var home_page_url = location.href;
var pageCount=7;
var displayPageNum=3;
var upPageWord ='Назад';
var downPageWord ='Вперёд';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
  html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span  class="showpageOf"> Страниц ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
 thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
 html = labelHtml+'1</a></span>';
}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>
<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>


- В коде нумерации страниц Вы можете внести изменения и подстроить под себя.

var pageCount=4 - Количество сообщений на главной странице.

var displayPageNum=100 - Количество страниц, которые будут показаны в гаджете.

Синим цветом выделены цвета гаджета, которые вы также можете изменить. 
Зайдите на Блоге в раздел  Онлайн Генератор цвета  и подберите нужный цвет.

==========================
Понравилась статья? Поделитесь с друзьями

воскресенье, 23 августа 2015 г.

Программа для создания Аудиоплеера WebAudioPlus.

 Хочу познакомить вас, с простой и очень удобной программой в которой можно сгенерировать симпатичные кнопки аудиоплеера. В программе "WebAudioPlus" можно сделать кнопки флеш плеера с голосовой записью и кнопки плеера с музыкой в формате MP3. 



Сегодня мы научимся делать плеер с музыкой, который потом можно будет использовать в своих флеш открытках, в постах, в блоге или на сайте. Чтобы много не расписывать, я сделала скиншоты. Надеюсь что всё будет понятно. 



В программе есть несколько вариантов готовых кнопок. Можно поменять цвет (Buton color) и вид плеера (поставив галочку где указано на скрине). Плеер получается на прозрачном фоне, так что цвет подбирайте под дизайн своего поста или флешки. Если надо сделать на каком то фоне, тогда добавте цвет из второй колонки (Background color) 





Если вас заинтересовала эта программа,
 можете скачать её совершенно бесплатно.
https://cloud.mail.ru/public/7L6N/wB8hZ2jfK

ДОПОЛНЕНИЕ
В программе есть один нюанс. Когда кнопку плеера вставляете в свою флешку, в программе AleoFlash_Intro_Banner_Maker, появляется лишний элемент, вот такой квадратик. Его можно легко убрать в программе Sothink SWF Quicker или Adobe Flash CS.
лишний элемент (304x123, 47Kb)
Загружаем плеер в программу Sothink SWF Quicker.
Кликаем мышкой по лишнему элементу, чтобы он у нас выделился.
Затем на клавиатуре жмём Delete и удаляем его.
Чтобы сохранить готовый плеер, жмём Export.
убираем лишний элемент (620x363, 243Kb)
При загрузке в программу Sothink SWF Quicker, плеер может иметь вид прямоугольного белого файла. Чтобы увидеть натуральный вид плеера, надо кликнуть по второму кружочку (смотрите скрин)
плеер (615x364, 237Kb)

Смотрите подробный урок "Снимаем логотип с плеера в программе Sothink SWF Quicker"
==========================
Понравилась статья? Поделитесь с друзьями

Программа для создания Аудиоплеера WebAudioPlus.

 Хочу познакомить вас, с простой и очень удобной программой в которой можно сгенерировать симпатичные кнопки аудиоплеера. В программе "WebAudioPlus" можно сделать кнопки флеш плеера с голосовой записью и кнопки плеера с музыкой в формате MP3. 



Сегодня мы научимся делать плеер с музыкой, который потом можно будет использовать в своих флеш открытках, в постах, в блоге или на сайте. Чтобы много не расписывать, я сделала скиншоты. Надеюсь что всё будет понятно. 



В программе есть несколько вариантов готовых кнопок. Можно поменять цвет (Buton color) и вид плеера (поставив галочку где указано на скрине). Плеер получается на прозрачном фоне, так что цвет подбирайте под дизайн своего поста или флешки. Если надо сделать на каком то фоне, тогда добавте цвет из второй колонки (Background color) 





Если вас заинтересовала эта программа,
 можете скачать её совершенно бесплатно.
https://cloud.mail.ru/public/7L6N/wB8hZ2jfK

ДОПОЛНЕНИЕ
В программе есть один нюанс. Когда кнопку плеера вставляете в свою флешку, в программе AleoFlash_Intro_Banner_Maker, появляется лишний элемент, вот такой квадратик. Его можно легко убрать в программе Sothink SWF Quicker или Adobe Flash CS.
лишний элемент (304x123, 47Kb)
Загружаем плеер в программу Sothink SWF Quicker.
Кликаем мышкой по лишнему элементу, чтобы он у нас выделился.
Затем на клавиатуре жмём Delete и удаляем его.
Чтобы сохранить готовый плеер, жмём Export.
убираем лишний элемент (620x363, 243Kb)
При загрузке в программу Sothink SWF Quicker, плеер может иметь вид прямоугольного белого файла. Чтобы увидеть натуральный вид плеера, надо кликнуть по второму кружочку (смотрите скрин)
плеер (615x364, 237Kb)

Смотрите подробный урок "Снимаем логотип с плеера в программе Sothink SWF Quicker"
==========================
Понравилась статья? Поделитесь с друзьями