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

Сегодня я вам друзья покажу очень любопытные социальные кнопки, они стояли у меня в блоге но не долго. А отказался я от них по причине того, что у меня блог и так перегружен
всяческими скриптами, из-за этого работает не очень быстро. Но думаю тебе уважаемый читатель, это мало интересно а интересен новый виджет вот о нем сейчас и поговорим.Кто н видел как он работает посмотрите чуть ниже на 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 > 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 > 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 > 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIJTIpjE8KnC4KVRaDW9-AWo34Bp5hRYDarXZliTM92cBN31eobWsbkk_zg7v3XhUMrf6b1pz9yybXUpxZPnQV6Sjj9mdJvC7h_pAVSNCOMv7y_mNsBqlBpTqSQv5D8R2cOxrx99Z9RHw/s1600/03-twitter-20.png) no-repeat 6px center;
        background-color: #0ba6f7;
      }
      .dhi_menu a.comment {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTAUR11M-Cq1VhEO6-eYomkcvcGjZuohxVjZQwAz48dk8Z0RTfiQlWUJbKfJFeKKmo9p8E5DR-sslQhRQhf3nUyxlIiqH_3pLKba5dyeGOzRwtn10bme_kRv5I-gBKcejNrwlowEW1XSo/s1600/bubble-24-20.png) no-repeat 6px center;
        background-color: #999999;
      }
      .dhi_menu a.share {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7wKvOeeS6Ko_cpDxjLBOtH1HMpESFhpQErBkhMy1r8vsqrGNYn_6tKG6huvM13AU2x-EOwpH3dBcmN8wzGTr9YBsf9JV1yVqu3I6wVQBOElAlU_vRY8Jw0IElcByecsxa1l8pnzsyvCE/s1600/06-facebook-20.png) no-repeat 6px center;
        background-color: #003366;
      }
      .dhi_menu a.plus {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEfVnHCTnQXWAezilx1Q6xFom0WhDZP0wqGqV4Y_GL9ItB0vwfL69ILpqATy8o_XROrJk0OUhHh9wXaH6mg7-cGj5yyW3AR_VMuS-a9DiT1OV90TVTgoVInDS7jRp3nyD1lV5WaSGGteg/s1600/40-google-plus-20.png) no-repeat 6px center;
        background-color: #dc311b;
      }
      .dhi_menu a.rss {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKfjE11OMsjiJgFLauIuci1c_pJkU4tBg4Apxm3J85cXMWf8KjRrKKu4FCAKdVEJyJt4J2m85T6yjpotNPghGgex-yuCqjfE5j0OOCHJlzkN4vcWAQoHozgirF___REBtpL_ZzouNwooM/s1600/60-rss-20.png) no-repeat 6px center;
        background-color: #FF6600;
      }
      .dhi_menu a.newsletter {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGQ7pVBCg_0CLwbuolQ43A8z5yqDSsaP5RHqce_l7mSSYAo1S7lJwq0ruZxE2CjQK8AgtN77AwtKcrfCoZ9VXFbY81SImTFXycCdEAbjmr6DWI6LPkddMcZ2am9vaAFL4Jrd9FYeUEZ8/s1600/Black_Email.png) no-repeat 6px center;
        background-color: #3b3c3c;
      }
      .dhi_menu a.faq {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQTs2wIafm8T_8rYizOgIGo9uFIge7bD81In26Nz7ZCm-QNlpCSz_sE4M79A3exLvCPEjJjKcRDlDdzdBirJ1kU0x4XqOLTA0yzpxwF8iBmCtWY6fL0_bOcPGwdtsHQw5sfvvHMdnjSWU/s1600/question-faq-128.png) no-repeat 6px center;
        background-color: #CDBFAC;
      }
      .dhi_menu a.follow {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIJTIpjE8KnC4KVRaDW9-AWo34Bp5hRYDarXZliTM92cBN31eobWsbkk_zg7v3XhUMrf6b1pz9yybXUpxZPnQV6Sjj9mdJvC7h_pAVSNCOMv7y_mNsBqlBpTqSQv5D8R2cOxrx99Z9RHw/s1600/03-twitter-20.png) no-repeat 6px center;
        background-color: #0ba6f7;
      }
      .dhi_menu a.fanpage {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7wKvOeeS6Ko_cpDxjLBOtH1HMpESFhpQErBkhMy1r8vsqrGNYn_6tKG6huvM13AU2x-EOwpH3dBcmN8wzGTr9YBsf9JV1yVqu3I6wVQBOElAlU_vRY8Jw0IElcByecsxa1l8pnzsyvCE/s1600/06-facebook-20.png) no-repeat 6px center;
        background-color: #1950bf;
      }
      .dhi_menu a.youtube {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPm1BtLTte4pFPuglzqAlpUk_qWGLZwe8vq9pMlavurHrjuZ03QuqC0Xy4I-nZ0Iop_m__f6mJJaUM6KVKawfCi32HXZ6-uR-Eg_GXkytAMpAFVaZqsxGJLzT9wD1DNqgADh81HThadio/s1600/18-youtube-20.png) no-repeat 6px center;
        background-color: #880000;
      }
      .dhi_menu a.google {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEfVnHCTnQXWAezilx1Q6xFom0WhDZP0wqGqV4Y_GL9ItB0vwfL69ILpqATy8o_XROrJk0OUhHh9wXaH6mg7-cGj5yyW3AR_VMuS-a9DiT1OV90TVTgoVInDS7jRp3nyD1lV5WaSGGteg/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>

                

            Далее сохраняем, и все готово приятного использования.