Будь в курсе событий!

01.12.2013

JQuery Развернуть / свернуть Подписка слайдер панель для Blogger.

Leave a Comment


Привет друзья, как вы видите из названия тот виджет о котором я буду сегодня рассказывать это выдвигающаяся панель JQuery.Эта панель имеет Facebook подписку, простую подписку на новости блога,сайта а так же подписку Google Plus.Сама панель располагается сверху вашего веб-ресурса, и это очень удобно для пользователей вашего блога, и подписчиков. Так как панель не мешает, но в тот же момент она удобна и вместительна. Помимо того это хорошее решение замене стандартной панели навигации на блоггер, блогспот. А теперь закончим с прелюдией, и поговорим об установки данной панели.Для установки нам надо:

Шаг 1: Войти в свой блог на блоггер, блогспот.
Шаг 2: Резервное копирование шаблона: (Подробнее: Как сделать резервную копию шаблон блогер блогспот?
Шаг 3: Перейдите к панели инструментов Blogger > Шаблон > Изменить HTML >
Шаг 4: Найти следующий тег кода.  </ Head >

И как найдете, чуть выше него вставьте этот скрипт JQuery.Но если у вас есть уже в шаблоне скрипт JQuery , то его вставлять не надо а нужно вставить только второй скрипт. Если кто не знает, не понимает то jquery скрипт я помечу красным, и вот эти 2 скрипта надо вставить перед тегом       </ Head > .


    <script src = 'http://tipsviablogging.github.io/jquery-1.3.2.min.js' type = 'text / javascript' />

<script src = 'http://tipsviablogging.github.io/slide.js' type = 'text / javascript' />


                                 Шаг 6: Ищем следующий тег в коде.

                                                    <body>

                              И выше него вставляем вот этот скрипт






<div id=’toppanel’>
<div id=’panel’>
<div id=’topsubcribe’>
<div class=’content’>
<div class=’left’>
<iframe allowTransparency=’true’ frameborder=’0′ scrolling=’no’ src=’//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FZarnakoom&amp;width=288&amp;height=258&amp;colorscheme=dark&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=235062743293379′ style=’border:none; overflow:hidden; width:288px; height:258px;’>
</iframe>
</div>
<div class=’left’>
<!– Login Form –>
<form action=’http://feedburner.google.com/fb/a/mailverify’ class=’clearfix’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=zarnakoom&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’>
<h1>
Subscribe Free Email Update
</h1>
<label class=’grey’ for=’log’>
Name:
</label>
<input class=’field’ id=’log’ name=’log’ size=’23′ type=’text’ value=”/>
<label class=’grey’ for=’pwd’>
Email:
</label>
<input class=’field’ name=’email’ size=’23′ type=’text’/>
<input name=’uri’ type=’hidden’ value=’tipsviablogging‘/>
<br/>
(No spam, we promise)
<div class=’clear’/>
<input class=’bt_login’ name=’submit’ type=’submit’ value=’Join’/>
<input name=’loc’ type=’hidden’ value=’en_US’/>
</form>
</div>
<div class=’left right’>
<!– Register Form –>
<div class=’g-plus’ data-action=’followers’ data-height=’258′ data-href=’https://plus.google.com/01660954502545138757‘ data-source=’blogger:blog:followers’ data-width=’320′>
</div>
<script type=’text/javascript’>
(function() {
window.___gcfg = {&#39;lang&#39;: &#39;en&#39;};
var po = document.createElement(&#39;script&#39;);
po.type = &#39;text/javascript&#39;;
po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0];
s.parentNode.insertBefore(po, s);
})(); </script>
</div>
</div>
</div>
</div>
<!– /login –>
<!– The tab on top –>
<div class=’tab’>
<div id=’topsubcribe’>
<ul class=’login’>
<li class=’left’/>
<li>
Hello Guest!
</li>
<li class=’sep’>
|
</li>
<li id=’toggle’>
<a class=’open’ href=’#’ id=’open’>
Subscribe Us
</a>
<a class=’close’ href=’#’ id=’close’ style=’display: none;’>
Close Panel
</a>
</li>
<li class=’right’/>
</ul>
</div>
</div>
<!– / top –>
</div>





Настройка код:
  • Заменить Зеленый выделенный текст " Zarnakoom" вашим  facebook  ID.
  • Заменить Оранжевый выделенный текст " zarnakoom " вашим RSS поток идентификатором.
  • Заменить Аква подчеркнул текст " 01660954502545138757 "Вашим Google Plus идентификатором.



Примечание: Если вы обнаружите, что Facebook, гаджета нету в  вашей панели. То значит у вас отсутствует Javascript от Facebook в шаблоне, то для решения данной задачи нам нужно будет вставить в шаблон маленький скрипт чуть ниже тега  <body> а сам скрипт такой.



                            
                                <div id=”fb-root”></div>
                                <script>(function(d, s, id) {
                                var js, fjs = d.getElementsByTagName(s)[0];
                                if (d.getElementById(id)) return;
                                js = d.createElement(s); js.id = id;
                                js.src = “//connect.facebook.net/ru_RU/all.js#xfbml=1″;
                               fjs.parentNode.insertBefore(js, fjs);
                               }(document, ‘script’, ‘facebook-jssdk’));</script>




                       После всего проделанного смотрим на результат и радуемся.


0 коммент. :

© 2012-2017 Cash's from program