Много полезностей юзерам: Газетный стиль, гаджет для блога с кнопкой

Гаджет для блога на платформе Blogger (он же blogspot) который называется “газетный стиль”. Покопавшись изрядно в разных предложениях гаджет для блога и газетный стиль, в скриптах и CSS нашел в нем некоторые недостатки которые подправил под себя как говориться и выкладываю здесь уже конечный результат.
Первое, – не ставьте со сторонних сайтов по возможности скрипты в которых вы видите только оформление скрипта(сценария) без самого тела скрипта. Обычно так делают чтобы код выглядел намного меньше в статье. Как это понять ? Например вы видите кусок кода который вам предлагают поставить, видите что он небольшой и в нем есть ссылка (или несколько ) на бесплатные хостинги и ссылка заканчивается на .js Это значит что файл с написанным скриптом залит куда то на чей-то личный хостинг. И если что-то случиться с аккаунтом куда залит этот скрипт то на вашем сайте или блоге код перестанет работать. Чтобы этого не случилось делайте так,- когда находите в скрипте подобные ссылки проходите по ним скопировав в адресную строку вашего браузера и нажав ввод. И просто скопируйте с той страницы где окажитесь все что там есть в предварительно созданный блокнот которому потом присвоите расширение .js или то что вам надо будет. И вот этот готовый файлик закиньте на свой бесплатный или платный хостинг с открытым входом это может быть популярный “народ ру” или как я например кладу на бесплатный хостинг Dropbox , хороший бесплатный до 2 Гб хостинг – платный если выше 2 Гб. Просто пройдите по ссылке Dropbox и зарегистрируйтесь на сайте введя свой имейл и пароль для регистрации, скачаете программку которую надо там скачать и установите себе – через эту программу будете с легкостью закидывать на этот хостинг ваши файлы. (Да, сайт на английском ! но не бойтесь ! – там все понятно интуитивно, но если нет то поставьте себе в браузер встроенный переводчик и нет проблем больше с англоязычными сайтами !) Можно положить туда на Dropbox бесплатно до 2 Гб – за каждого реферала дают лишних 250 мб и так до 8 Гб бесплатно можно будет пользоваться. Скрипты и прочее весят ничтожно мало поэтому лучше кидать все на ДропБокс, потому что “народ ру” говорят не всегда корректно работает и не годиться для многих файлов нашего типа. Подробности читайте в статье бесплатный хостинг для кодов и файлов. Вобщем с этим разобрались.
Переходим к непосредственно к самому гаджет для блога который называется “газетный стиль” для Blogger.
Итак, как он выглядит вы можете посмотреть на моем сайте на главной странице. Гаджет для блога под названием “газетный стиль” автоматически берет первые строки всех ваших последних статей и первую картинку которая ему попадется в вашей статье,- поэтому если используете смайлики помните, что если смайл попадется первым он и будет выводиться гаджетом как превью поэтому следите чтобы первой была картинка, а не смайл. Выбрать сколько таких “обрезанных” статей будет выводиться регулируйте в настройках сообщений в “дизайн” там поставьте нужное количество выводимых на главной странице сообщений.
Ниже представленные коды не надо вам никуда заливать кроме кнопок которые вы захотите сделать под себя.
Чтобы поставить себе его на блог проделайте следующие несложные действия :

Для начала как всегда сделайте резервную копию вашего шаблона и блога на всякий случай если что-то пойдет не так, это делается всегда когда вы захотите что-то поменять в шаблоне : нажмите в вашей панели управления блогом “шаблон” и нажмите кнопку “резервное копирование” там нажмите “загрузить” и выберите куда положить копию (на рабочий стол например), и жмите ОК. Все копия шаблона готова – переименуйте ее поставьте дату и надпись “шаблон” чтоб знать что это такое и не забыть. Копия блога делается из вкладки “настройки”-“другое”-“экспорт блога” и тоже сохраните копию. Все готово.
Далее для добавления гаджет для блога зайдите в “шаблон”-“изменить html“-поставить галочку на “расширить шаблон виджета” и в вашем браузере нажав комбинацию клавиш Ctrl+f в выскочившем поле поиска введите ]]></b:skin> и найденный кусок кода будет найден
теперь прямо перед кодом ]]></b:skin> добавьте скопировав этот код:
.preview{float:left;; padding:5px;margin:0px 20px 3px 0px !important ;height:188px;width:221px;}
.noimage{float:left;padding:5px;margin:0px 20px 3px 0px !important ;height:188px;width:221px;}

Важно ! после этого всегда когда вам надо будет добавить что-то перед ]]></b:skin> вам нужно будет добавлять не перед ]]></b:skin> а перед 2-мя строчками CSS кода который видите выше. Иначе последующие изменения могут не работать. Здесь ничего сложного просто не забудьте, и если что-то не будет работать проверьте туда ли вы добавили ваш код.

Далее с помощью тех же клавиш Ctrl+f найдите тег </head> и перед ним вставьте следующий код :


<script type='text/javascript'> var thumbnail_mode = 
&quot;no-float&quot; 
; summary_noimg = 700; summary_img = 470; img_thumb_height =178; 
img_thumb_width = 211; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<");
  for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
  }
  strx =  s.join("");
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2;
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
 strx = strx.substring(0,chop-1);
 return strx+'...';
}
function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) {
  imgtag = '<span class="preview"><img src="'+img[0].src+'" 
width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" 
style="margin:5px" alt="preview"/></span>';
  summ = summary_img;
 }
 if(img.length<1) {
  imgtag = '<span class="noimage"><img 
src="http://lh5.ggpht.com/_pt7i0nbIOCY/TKIRvjcw20I/AAAAAAAACzc/Eb6lfJS1a
Xs
/no-image_thumb%5B1%5D.png" width="211px" height="178px" 
style="margin:5px" alt="preview"/></span>';
  summ = summary_img;
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + 
'</div>';
 div.innerHTML = summary;
}
//]]>
</script>

Далее найдите через Ctrl+f строку <data:post.body/> или в некоторых шаблонах такой код : <p><data:post.body/></p> – удалите этот код и на его место аккуратно вставьте ниже приведенный код :
<b:if cond='data:blog.pageType == "static_page"'><br/> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/> "); </script> <span class='more'><a expr:href='data:post.url'>Read more</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> </b:if>
Нажмите на “сохранить” в вашем шаблоне.
Все готово , НО !

В вашем гаджете газетный стиль для blogspot нет еще кнопки “читать далее” – просто надпись!

Делаем кнопку спрайт на гаджет газетный стиль для Blogger

Сначала вам чтобы сделать кнопку на газетный стиль надо на любом сервисе создания кнопок онлайн или в фотошопе если умеете сделать кнопку “читать далее” я пользуюсь для этих вещей онлайн сервисом

это сервис онлайн где можно просто и легко сделать кнопки на сайт , логотип в шапку сайта подпись и прочее … как говориться легко и просто. Хоть сайт и на английском но все интуитивно понятно, если кому не понятно пользуйтесь встроенные переводчики для вашего браузера. Вобщем заходим в данном сервисе во вкладку Button( кнопки ) и делаем две кнопки одинаковой формы и надписью но с разным фоном – чтоб вид был что бы у вас в гаджет для блога на странице оно выглядело как одна кнопка например зеленого цвета а когда подводишь курсор мыши к кнопке она бы меняла цвет например на желтый ,- цвета и формы кнопок можете подобрать какие вам будет угодно . Сохраняете кнопки себе на компьютер.

Далее наши кнопки надо залить на какой-нибудь хостинг бесплатный который поддерживает форматы png gif tiff ico favicon и подобные им – среди русскоязычных таких не встречал, поэтому пользуюсь для этого хорошим немецким сервисом

выбираете свой формат из предложенных кнопок на сайте – жмете на ту кнопку – указываете свой файл и жмете ок- вам выдает сразу же ссылки по которым скачать ваш файл.
Все это сделали теперь остается только поставить наши кнопочки на сайт.
Чтобы добавить любую кнопку спрайт нашего типа надо добавить 2 части кода – одну перед тегом </head> в вашем шаблоне :

Где как сами видите первая ссылка это путь к картинке которая отображается всегда на вашем сайте, а вторая ссылка это путь к картинке которая появляется когда вы подводите стрелку мыши к вашей кнопке.
Вторая часть кода добавляется между тегами <body> и </body> добавляется строка
<p><a class="rollover"> </a></p>
В нашем случае вы в первой части кода изменяете ссылки на свои ссылки на ваши картинки кнопок и добавляете код перед тегом </head> в вашем шаблоне ваш код.
А вторую часть кода вставляете так :

Находите в шаблоне место : <a expr:href='data:post.url'>Read more</a>
и заменяете его на
<a class='rollover' expr:href='data:post.url'/>

Вот и все теперь у вас стоят ваши кнопочки.

Так же читайте как сделать в Blogger очень важное - оптимизация заголовков h1 h2 h3
газетный стиль, гаджет для блога

Хотите получать свежие статьи на свой E-mail ?