! Сегодня
Показаны сообщения с ярлыком ВИДЖЕТЫ И ГАДЖЕТЫ. Показать все сообщения
Показаны сообщения с ярлыком ВИДЖЕТЫ И ГАДЖЕТЫ. Показать все сообщения

понедельник, 21 сентября 2015 г.

Горизонтальное 3D меню с эффектом вращения

Горизонтальное  3D меню с эффектом вращения эффектно смотрится при наведение курсором мыши на пункт меню. Кнопка меню вращается, как бы переворачивается. Такой вид меню очень легко установить у себя на блоге. Не надо заходить в шаблон, надо просто в поле гаджета установить Html/JavaScript  код, который предложен ниже.


 
КОПИРУЕМ ЭТОТ КОД
Но прежде чем вставлять код в гаджет, придётся с ним немного поработать.
Замените пункты меню на свои, если вас не устраивают эти
 и вставляйте вместо решеток "###" ссылки на что  угодно.
==========================
Понравилась статья? Поделитесь с друзьями

Горизонтальное меню c красивым эффектом

Горизонтальное  меню с анимированным эффектом, так смотрится при
наведении курсора мыши на пункт меню. Такой вид меню легко установить у себя на блоге. Давайте разберёмся, как это сделать с помощью простого Java Scriptа.


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


 Вставляем свой код и жмём СОХРАНИТЬ .

КОПИРУЕМ ЭТОТ КОД 


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

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

воскресенье, 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>

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


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

пятница, 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 - Количество страниц, которые будут показаны в гаджете.

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

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

четверг, 21 августа 2014 г.

Анимированные кнопки соцсети.


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

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

Понравилась статья? Поделитесь с друзьями
 
Введите свой e-mail адрес:




воскресенье, 17 августа 2014 г.

Интересный виджет для блога "Похожие статьи с миниатюрными изображениями"

 Здравствуйте друзья и гости блога Flash Magic.
Хочу познакомить вас с интересным виджетом
"Похожие статьи с миниатюрными изображениями".
В Блоге это будет выглядеть примерно так.
 Смотрите полностью - Как настроить виджет.
С помощью бесплптного сервиса LinkWithin,  в конце каждого сообщения
будут отображаются посты с картинками.
 Но для того, чтобы картинки отображались,
их надо  загрузить в свои фото альбомы, которые находятся в вашем профиле
и затем вставлять в каждый свой пост или статью.
Обработка информации на  Linkwithin, осуществляется автоматически.


 

Как настроить LinkWithin

Установить виджет от Linkwithin просто.
 Нужно указать свою электронную почту, адрес блога, выбрать платформу и количество отображаемых миниатюр. Ориентируйтесь на ширину поста.
Если у вас темный сайт со светлым текстом,
только тогда поставьте галочку в поле.
 Затем жмем на кнопку "Get widget" и оказываемся  на странице
 с инструкциями по установке.

 
 Затем, выбираем Блог, где будет установлен виджет.
Пишем название, которое будет отображаться,
я написалала "Похожие статьи", но вы можете написать что то своё,
например " Что ещё почитать"
Всё, добавляем виджет, нажав на кнопку "Add widget".  Виджет установлен.
 Перетягиваем его в положение под постами блога, 
сохраняем и любуемся результатом.


Когда виджет установится, то в качестве заголовка вы увидите предложение
 "просмотреть еще записи" на английском языке.
 Чтобы увидеть свой заголовок на русском, нажимаем на редактирование
и добавляем в конце  или начале скрипта строку:

<script>linkwithin_text='Смотрите похожие статьи:'</script>

Недостатки Linkwithin

   * Увеличилась скорость загрузки сайта.
  *  Появляется черный фон с PNG рисунков (на некоторых)
  *  Часть картинок не выводит
 *  Linkwithin перенаправляет  трафик на свой сайт

Не все так страшно. Зато вы являетесь обладателем симпатичных
анонсов статей с изображениями.
Виджет смотрится красиво и позволяет заинтересовать
и задержать читателя подольше на страничках вашего Блога.
Посетитель получит больше интересующей его информации,
а вы больше посетителей и просмотров.
 
Чтобы отправить поздравление другу,
 нажмите на конвертик, возле имени автора.
Понравилась статья? Поделитесь с друзьями

вторник, 17 декабря 2013 г.

Красивые кнопки социальных сетей для блога и сайта.

Если хотите разместить у себя в блоге кнопки социальных сетей,
 чтобы дать возможность  вашим посетителям быстро делиться
 интересными страницами в своих социальных сетях,
 а также печатать, отправлять письмом и добавлять в закладки,
тогда  могу порекомендовать самый простой способ установки кнопок
от сервиса Pluso.
На этом сервисе множество вариантов кнопочек, на любой вкус.
Как выбрать и установить кнопки себе на блог или сайт
смотрите в моём уроку.
1 ШАГ
Заходим на Pluso и регистрируемся.
Выбираем стиль кнопок.
Затем добавляем с правой колонки в левую те сети,
которые должны отражаться у вас на странице.
Просто перетягивайте мышкой. Есть кнопки со счётчиком,
где автоматически отражается число кликов.
Для примера, я установила такие кнопки внизу  страницы блога. 


2 ШАГ
Затем мы настраиваем выбранные кнопки.
Можно выбрать размер кнопок, дизайн - круглые или квадратные.
Положение, как кнопки будут стоять - вертикально или горизонтально,
в две строки или в один ряд.
Есть кнопки со счётчиком, где отражается число кликов.
Можно выбрать фон, но прозрачный фон,
подойдёт к любому дизайну. Всё делаем на свой вкус.
Нажав на плюсик Добавить откроются дополнительные соц.сети


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

Комментарии