Социальные кнопки следите за мной

Данный урок научит вас как установить себе на блог, эти социальные кнопки. Кнопки очень интересные написаны они на CSS , не каких Query но эффект очень интересный он имеет эффект слайдера. Сам виджет интересен не только тем что он раздвижной, но и тем что он как бы виджет обманка, а обман в следующем. В том что там можно в нем проставить цифры сколько у вас последователей(друзей, или подписчиков сайта). И все это этот эффект красивый плюс то число последователей что вы себе поставите, могут повлиять на количество ваших подписчиков.Люди которые заходят к вам на сайт видя сколько у вас подписчиков могут, тоже стать друзьями в ваших социальных сетях, или подписки на новости сайта.Внешний вид у него вот такой но на фото эффекта не передать,

По этому советую установить что бы увидить всю красоту данного виджета.

Установка:
Заходим в панель дизайн нажимаем добавить гаджет, ищем в списке HTML / JavaScript добавляем далее в него вставляем вот этот код.

<div class="tbislso"> <ul> <li><a class="tbisbox facebook" href="#"><p>15K+</p>Facebook </a></li> <li><a class="tbisbox twitter" href="#"><p>10K+</p>Twitter</a></li> <li><a class="tbisbox gplus" href="#"><p>5K+ </p>Google+</a></li> <li><a class="tbisbox pinterest" href="#"><p>4K+ </p>Pinterest</a></li> <li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li> </ul> </div>  - See more at: http://www.topbloggingideas.com/2013/01/sliding-follow-widget-counters.html#more

 <div class="tbislso"> <ul> <li><a class="tbisbox facebook" href="#"><p>15K+</p>Facebook </a></li> <li><a class="tbisbox twitter" href="#"><p>10K+</p>Twitter</a></li> <li><a class="tbisbox gplus" href="#"><p>5K+ </p>Google+</a></li> <li><a class="tbisbox pinterest" href="#"><p>4K+ </p>Pinterest</a></li> <li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li> </ul> </div>  - See more at: http://www.topbloggingideas.com/2013/01/sliding-follow-widget-counters.html#more
 <div class="tbislso"> <ul> <li><a class="tbisbox facebook" href="#"><p>15K+</p>Facebook </a></li> <li><a class="tbisbox twitter" href="#"><p>10K+</p>Twitter</a></li> <li><a class="tbisbox gplus" href="#"><p>5K+ </p>Google+</a></li> <li><a class="tbisbox pinterest" href="#"><p>4K+ </p>Pinterest</a></li> <li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li> </ul> </div>

1) # - Замените своими URL - адресами в социальных сетях

2) 15K+ - И похожие те что одинакового цвета замените на колличество своих подписчиков , или же не меняйте в этом и есть обманка гаджета).

А теперь идем в шаблон,зажимаем CTRL+F, и в поиске ищем тег ]]></b:skin> как нашли выше его добавляем вот этот код

/* Sliding Social Buttons Widget By zarnakoom.blogspot.com*/ .tbisbox { font: 25px/24px normal 'Denk One', sans-serif; display: inline-block; position: relative; width: 95%; max-width: 280px; margin: 0 auto 15px auto; padding: 16px; background-color: rgba(238, 238, 238, 0.1); box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tbislso { width: 95%; max-width: 280px; padding-top: 8px; padding-left: 8px; padding-right: 8px; } .tbislso a { text-decoration: none !important; } .tbislso ul { margin: 0; padding: 0; list-style: none; } .tbislso ul li { display: inline; margin: 0; padding: 0; text-indent: 0 } .tbislso ul li a.facebook { border-left: 65px solid rgba(59, 89, 152, 1); color: rgba(59, 89, 152, 1); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.facebook p { margin: 2px 20px 0 -70px; display: inline-block; color: #fff; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.facebook:hover { background: rgba(59, 89, 152, 1); border-left: 0px solid rgba(59, 89, 152, 0.1); color: #fff; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.facebook:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .tbislso ul li a.twitter { border-left: 65px solid rgba(64, 153, 255, 1); color: rgba(64, 153, 255, 1); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.twitter p { margin: 2px 20px 0 -70px; display: inline-block; color: #fff; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.twitter:hover { background: rgba(64, 153, 255, 1); border-left: 0px solid rgba(64, 153, 255, 1); color: #fff; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.twitter:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .tbislso ul li a.gplus { border-left: 65px solid rgba(219, 74, 57, 1); color: rgba(219, 74, 57, 1); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.gplus p { margin: 2px 20px 0 -70px; display: inline-block; color: #fff; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.gplus:hover { background: rgba(219, 74, 57, 1); border-left: 0px solid rgba(219, 74, 57, 1); color: #fff; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.gplus:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .tbislso ul li a.pinterest { border-left: 65px solid rgba(174, 45, 39, 1); color: rgba(174, 45, 39, 1); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.pinterest p { margin: 2px 20px 0 -70px; display: inline-block; color: #fff; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.pinterest:hover { background: rgba(174, 45, 39, 1); border-left: 0px solid rgba(174, 45, 39, 1); color: #fff; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.pinterest:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .tbislso ul li a.rss { border-left: 65px solid rgba(255, 102, 0, 1); color: rgba(255, 102, 0, 1); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.rss p { margin: 2px 20px 0 -70px; display: inline-block; color: #fff; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.rss:hover { background: rgba(255, 102, 0, 1); border-left: 0px solid rgba(255, 102, 0, 1); color: #fff; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .tbislso ul li a.rss:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } /* Sliding Social Buttons Widget By zarnakoom.blogspot.com */

Теперь поговорим о втором гаджете, в принципе он похож на тот гаджет о котором я рассказывал выше но все таки немного отличается. Отличается он именно что написан на CSS3, и в нем нету не JavaScript, не JQuery . Опять же в нем есть эффект слайдера или перемещения при наведении, но самое основное что нету обманок как в предыдущем виджете. Вид у него такой:

Но так же оччень красиво, проверьте если понравится поставите себе, и самое главное чем он отличается так это тем что у него установка проще. Код добавляем сразу в HTML / JavaScript виджет и все).

КОД:

 <style> #tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} #tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} #tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} #tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLWbPBUs1_jCPkWb2RuZhe6wtMOzpVSsd4yGlX7c8xkql_lLnWJk5raN8FuLJU1lRifMoClqgnOZm2H5k4ftsNN18CWn8_VNL_piEkT-ZPf_0N_z-PDk3Q5k8CE451Lq6-3P0h021i_3I/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;} #tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} #tbisose .icon{overflow:hidden; color:#fafafa;} #tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} #tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} #tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} #tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} #tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} #tbisose li:hover .icon, .touch #tbisose li .icon{width:210px;} .touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} .touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} .touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} </style> <ul id="tbisose"> <li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li> <li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li> <li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li> <li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li> <li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li> </ul>

Теперь как и в предыдущем гаджете, меняем где я отметил зеленым маркером, вот такие решётки # проставляя там свои адреса в социальных сетях.

На этом подведу итог, а итог такой ждите новых интересных статей, и подписывайтесь на мой блог http://zarnakoom.blogspot.com .

CSS3

<div class="tbislso"> <ul> <li><a class="tbisbox facebook" href="#"><p>15K+</p>Facebook </a></li> <li><a class="tbisbox twitter" href="#"><p>10K+</p>Twitter</a></li> <li><a class="tbisbox gplus" href="#"><p>5K+ </p>Google+</a></li> <li><a class="tbisbox pinterest" href="#"><p>4K+ </p>Pinterest</a></li> <li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li> </ul> </div>  - See more at: http://www.topbloggingideas.com/2013/01/sliding-follow-widget-counters.html#more

Query

CSS

Cash's from program

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

20.11.2013

Социальные кнопки следите за мной

0 коммент. :

Наши отзывы