К основному контенту

Читатели из facebook в blogger

Сегодня опишу как добавить красивый гаджет из facebook в блогспот. Уж очень много сегодня людей пользуются фэйсбуком, так что думаю этот гаджет будет полезен всем.
image
  Если Вы активно помимо своего блога постите в Facebook то те кто читают Ваш блог смогут присоединиться к Вам и в социальной сети.
Итак преступим :
1. Зайдите в настройки блоггер, в раздел Изменить шаблон найдите тэг:
</head>

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


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
 
 
2. Зайдите в раздел Дизайн нажмите добавить гаджет выбирите HTML/Java Script и вставьте туда следующий скрипт:

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEVmu0eMRrpLdXYWc4D8yuZ4dNzXNWFRMPKdUDn2TZNFHS045h7ZjL84HEvbXY6ceUTG75zk7HSCl2EIR49LbHwV4kC968KWB_QG5WRuKphHjqGNlVjW6WU5hcm7wX6QOFr9pUi1Y267E/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBloggerHacks&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://www.bloggerhack.com/2011/11/add-floating-facebook-like-box-for.html" target="_blank">+Get This!</a></span></div></div>
 
3. Замените в данной строчке ссылку на свою страницу в фейсбук
 
%3A%2F%2Fwww.facebook.com%2FBloggerHacks&amp
К примеру если ссылка в фейсбук у вас выглядит вот так

http://www.facebook.com/pages/BloggerHack/1234567



то конечный результат должен выглядеть так:
http%3A%2F%2Fwww.facebook.com%2Fpages%2FBloggerHack%2F1234567

вставляйте %2F перед каждым словом.



Сохраните гаджет и все готово!

Комментарии

  1. Добрый день. Сделала все, как написано, но почему выпадает пустое меню? Справа выпадает окно Facebook, но оно пустое и не дает возможности перейти на мою страницу...

    ОтветитьУдалить

Отправить комментарий

Популярные сообщения из этого блога

Добавляем красивый гаджет Поделиться

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

Как сделать ссылку на определенную часть той же страницы.

Все блоггеры пользуются ссылками практически в каждой статье, помимо удобства это еще и очень полезно для индексации блога. Сегодня хотел бы описать как сделать ссылку на туже страницу на которой находится Ваш читатель, только ниже, либо Выше, допустим Ваша статья состоит из нескольких частей и читатель, хочет пропустить первую и перейти сразу ко второй. Сделать это достаточно просто! 1.Для начала нам необходимо присвоить определенной части текста “Якорь”, допустим Вы хотите ссылать на каую-либо часть статьи, перед началом необходимого участка текста вставьте в HTML коде статьи следующий тег : <a id=" yakor "></a> Начало текста или заголовка В качестве слова якорь выделенного красным вы можете использовать любое другое, подходящее по смыслу. 2. Теперь необходимо сделать ссылку на данный якорь. А именно в HTML коде страницы перед словом которое должно быть ссылкой ставим тэг вида: <a href="# yakor ">Слово</a> Покажу как это долж...

Добавляем простой и удобный поиск по блогу на blogger

Всем известно, что большинство шаблонов Blogger идут без поиска по блогу. Это огромный минус, если Вы хотите сделать Ваш блог максимально удобным. Конечно есть стандартный поиск от Google, однако не взирая на то, что он хорошо ищет, но совсем не вписываеться в дизайн блога, ведь снизу идет надпись google технологии, да и после поиска открывается какое-то невзрачное окно. В общем сейчас я Вам опишу скрипт который поможет сделать Вам поиск по блогу. Итак: 1. заходим в настройки блога, Дизайн/Элементы страници 2. Нажимаем добавить гаджет там где мы хотим, чтобы появился наш новый поиск; 3. Выбираем Html/Java Script, и вставляем в него следующий код: <center><form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 200px;" value="Введите слово для поиска..." name="q" onclick="this.value=''" type="text...