Google+ Followers

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

07.02.2014

Мультиформатный социальный виджет, социальных кнопок с выдвижным эффектом для блогспот, блоггер.

Leave a Comment
Сегодня я вам друзья покажу очень любопытные социальные кнопки, они стояли у меня в блоге но не долго. А отказался я от них по причине того, что у меня блог и так перегружен
всяческими скриптами, из-за этого работает не очень быстро. Но думаю тебе уважаемый читатель, это мало интересно а интересен новый виджет вот о нем сейчас и поговорим.Кто н видел как он работает посмотрите чуть ниже на Gif"ку)
Теперь как вы его увидели давайте о нем и поговорим,я уже много писал про подобного рода виджеты.Но этот по своему уникален, и интересен во первых он виджет включает тег Nofollow для внешних ссылок, и DoFollow тег для внутренних ссылок и это играет большую роль.В том плане, что трафик с вашей страницы не будет уходить через код этого гаджета, так же вы не потеряете свой PR (page rank).Во вторых он по своему красив, и многофункционален да что я все говорю) вы сами все видели чуть выше.
Для его установки нам потребуется зайти в наш блог, меню справа, вкладка шаблон жмем  переходим в меню шаблона и жмем Edit HTML  далее зажимаем на клавиатуре CTRL+F и ищем тег г ]]></b:skin> и далее код CSS что будет чуть ниже, вставлять выше нашего тега.Но у нас в этом случаае виджет может не заработать, и что бы не началась КотоВасия) предлагаю вам уважаемые читатели просмотреть видео в моей статье,это желательно сделать ибо в противном случае у вас может не заработать виджет.! Причина поломки виджета, или почему может не работать виджет, в блогспот, блоггер.
Далее я вставлю теги стиля такие  <style> и вы сами решите без них вам вставлять код, перед тегом ]]></b:skin> или же с ними но перед закрывающим тегом  </body>




<style>
/* All-in-one-social share widget by zarnakoom------------------------------------------ */
      .dhi_menu,.dhi_menu ul,.dhi_menu li,.dhi_menu a {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
      }
      .dhi_menu {
        height: 34px;
        width: 304px;
        background: #b8b8bc;
        background: -webkit-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
        background: -moz-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
        background: -o-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
        background: -ms-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
        background: linear-gradient(top, #b8b8bc 0%,#38383a 10%);
      }
      .dhi_menu:hover {
        height: 34px;
        width: 304px;
        background: #4c4e5a;
        background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
        background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
        background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
        background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
        background: linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
      }
      .dhi_menu li {
        list-style: none;
        float: left;
        display: block;
        height: 40px;
      }
      .dhi_menu li a {
        display: block;
        padding: 0 14px;
        margin: 6px 0;
        line-height: 25px;
        text-decoration: none;
        border-left: 1px solid #393942;
        border-right: 1px solid #4f5058;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 13px;
        color: #f3f3f3;
        text-shadow: 1px 1px 1px rgba(0,0,0,.6);
        -webkit-transition: color .2s ease-in-out;
        -moz-transition: color .2s ease-in-out;
        -o-transition: color .2s ease-in-out;
        -ms-transition: color .2s ease-in-out;
        transition: color .2s ease-in-out;
      }
      .dhi_menu li:first-child a {
        border-left: none;
      }
      .dhi_menu li:last-child a {
        border-right: none;
      }
      .dhi_menu li:hover &gt; a {
        color: #FFCC00;
      }
      .dhi_menu ul {
        position: absolute;
        left: 0;
        opacity: 0;
        background: #1f2024;
        -webkit-border-radius: 0 0 5px 5px;
        -moz-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;
        -webkit-transition: opacity .25s ease .1s;
        -moz-transition: opacity .25s ease .1s;
        -o-transition: opacity .25s ease .1s;
        -ms-transition: opacity .25s ease .1s;
        transition: opacity .25s ease .1s;
      }
      .dhi_menu li:hover &gt; ul {
        opacity: 1;
      }
      .dhi_menu ul li {
        height: 0;
        overflow: hidden;
        padding: 0;
        -webkit-transition: height .25s ease .1s;
        -moz-transition: height .25s ease .1s;
        -o-transition: height .25s ease .1s;
        -ms-transition: height .25s ease .1s;
        transition: height .25s ease .1s;
      }
      .dhi_menu li:hover &gt; ul li {
        height: 36px;
        overflow: hidden;
        padding: 0;
      }
      .dhi_menu ul li a {
        width: 75px;
        padding: 4px 0 4px 40px;
        margin: 0;
        border: none;
        border-bottom: 0px solid #353539;
      }
      .dhi_menu ul li:last-child a {
        border: none;
      }
      .dhi_menu a.twitter {
        background: url(http://1.bp.blogspot.com/-wzEBGWKeZU4/UV8inczouBI/AAAAAAAABUs/wBzqqtU7bic/s1600/03-twitter-20.png) no-repeat 6px center;
        background-color: #0ba6f7;
      }
      .dhi_menu a.comment {
        background: url(http://3.bp.blogspot.com/-uFd2iWN1pH8/UV8ippwVBsI/AAAAAAAABVc/AEkvcrJD-lI/s1600/bubble-24-20.png) no-repeat 6px center;
        background-color: #999999;
      }
      .dhi_menu a.share {
        background: url(http://4.bp.blogspot.com/-seFPyokr-r0/UV8inXo3xfI/AAAAAAAABU0/yi_NpXThs3g/s1600/06-facebook-20.png) no-repeat 6px center;
        background-color: #003366;
      }
      .dhi_menu a.plus {
        background: url(http://3.bp.blogspot.com/-u4-khRFgegA/UV8ioVy1XlI/AAAAAAAABVE/akdLtl9TaPg/s1600/40-google-plus-20.png) no-repeat 6px center;
        background-color: #dc311b;
      }
      .dhi_menu a.rss {
        background: url(http://4.bp.blogspot.com/-NLIejdClsKM/UV8ioW74__I/AAAAAAAABVI/Bci6hRET2hg/s1600/60-rss-20.png) no-repeat 6px center;
        background-color: #FF6600;
      }
      .dhi_menu a.newsletter {
        background: url(http://3.bp.blogspot.com/-qMK337O8X50/UV8iotjSeCI/AAAAAAAABVQ/C6h5DlEq5Os/s1600/Black_Email.png) no-repeat 6px center;
        background-color: #3b3c3c;
      }
      .dhi_menu a.faq {
        background: url(http://3.bp.blogspot.com/-fdquoSfUK74/UV8isjc9lVI/AAAAAAAABVk/Cghj6GrqX4Y/s1600/question-faq-128.png) no-repeat 6px center;
        background-color: #CDBFAC;
      }
      .dhi_menu a.follow {
        background: url(http://1.bp.blogspot.com/-wzEBGWKeZU4/UV8inczouBI/AAAAAAAABUs/wBzqqtU7bic/s1600/03-twitter-20.png) no-repeat 6px center;
        background-color: #0ba6f7;
      }
      .dhi_menu a.fanpage {
        background: url(http://4.bp.blogspot.com/-seFPyokr-r0/UV8inXo3xfI/AAAAAAAABU0/yi_NpXThs3g/s1600/06-facebook-20.png) no-repeat 6px center;
        background-color: #1950bf;
      }
      .dhi_menu a.youtube {
        background: url(http://2.bp.blogspot.com/-4QNq2BrfTaA/UV8inTMhcZI/AAAAAAAABUw/nOtg0NV3EC4/s1600/18-youtube-20.png) no-repeat 6px center;
        background-color: #880000;
      }
      .dhi_menu a.google {
        background: url(http://3.bp.blogspot.com/-u4-khRFgegA/UV8ioVy1XlI/AAAAAAAABVE/akdLtl9TaPg/s1600/40-google-plus-20.png) no-repeat 6px center;
        background-color: #dc311b;
      }
 </style> 

   
А уже далее нам надо будет зайти в панель меню Дизайн,добавить гаджет HTMLjavascript
Но перед этим немного его подрихтовать, вставив свои Айди в тех местах где я помечу маркером.


 <ul class='dhi_menu'>
                            <li>
                              <a href='#'>
                                Share &#9660;
                              </a>
                              <ul>
                                <li>
                                  <a class='twitter' data-via='labstrike' expr:href='&quot; http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank' title='Tweet This!'>
                                    Twitter
                                  </a>
                                </li>
                                <li>
                                  <a class='share' expr:href='&quot;http://www.facebook.com/share.php? v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot;  + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share this on Facebook'>
                                    Share
                                  </a>
                                </li>
                                <li>
                                  <a class='comment' href='#comments1' id='cmtbtn'>
                                    comment
                                  </a>
                                </li>
                                <li>
                                  <a class='plus' expr:href='&quot;https://plus.google.com/share?url=&quot;  + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' target='_blank' title='Post on GoogleBuzz'>
                                    Google+
                                  </a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <a href=''>
                                Subscribe &#9660;
                              </a>
                              <ul>
                                <li>
                                  <a class='rss' href='http://feeds.feedburner.com/zarnakoom' target='_blank'>
                                    RSS
                                  </a>
                                </li>
                                <li>
                                  <a class='newsletter' href='http://feedburner.google.com/fb/a/mailverify?uri=zarnakoom' target='_blank'>
                                    Newsletter
                                  </a>
                                </li>
                                <li>
                                  <a class='faq' href='#faq' target='_blank'>
                                    FAQ
                                  </a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <a href='#'>
                                Connect &#9660;
                              </a>
                              <ul>
                                <li>
                                  <a class='follow' href='http://twitter.com/Zarnakoom' target='_blank'>
                                    Follow
                                  </a>
                                </li>
                                <li>
                                  <a class='fanpage' href='http://facebook.com/Cashsfromprogram' target='_blank'>
                                    Fanpage
                                  </a>
                                </li>
                                <li>
                                  <a class='youtube' href='https://www.youtube.com/user/Cashsfromprogram' target='_blank'>
                                    YouTube
                                  </a>
                                </li>
                                <li>
                                  <a class='google' href='https://plus.google.com/114835836186367171329/' target='_blank'>
                                    Google+
                                  </a>
                                </li>
                              </ul>
                            </li>
                          </ul>
                
            Далее сохраняем, и все готово приятного использования.

0 коммент. :

© 2012-2017 Cash's from program