Google+ Followers

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

20.11.2013

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

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


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

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

<!--Sliding Social Buttons Widget By TopBloggingIdeas.com--> <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+&nbsp;</p>Google+</a></li>         <li><a class="tbisbox pinterest" href="#"><p>4K+&nbsp;</p>Pinterest</a></li>         <li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li>     </ul> </div> <!--Sliding Social Buttons Widget By TopBloggingIdeas.com--> - See more at: http://www.topbloggingideas.com/2013/01/sliding-follow-widget-counters.html#more
<!--Sliding Social Buttons Widget By TopBloggingIdeas.com--> <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+&nbsp;</p>Google+</a></li>         <li><a class="tbisbox pinterest" href="#"><p>4K+&nbsp;</p>Pinterest</a></li>         <li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li>     </ul> </div> <!--Sliding Social Buttons Widget By TopBloggingIdeas.com--> - See more at: http://www.topbloggingideas.com/2013/01/sliding-follow-widget-counters.html#more
<!--Sliding Social Buttons Widget By zarnakoom.blogspot.com--> <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+&nbsp;</p>Google+</a></li>         <li><a class="tbisbox pinterest" href="#"><p>4K+&nbsp;</p>Pinterest</a></li>         <li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li>     </ul> </div> <!--Sliding Social Buttons Widget By zarnakoom.blogspot.com-->

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 виджет и все).

КОД:

<!-- Social Buttons Widget By zarnakoom.blogspot.com--> <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://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/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> <!-- Social Buttons Widget By zarnakoom.blogspot.com-->

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

На этом подведу итог, а итог такой ждите новых интересных статей, и подписывайтесь на мой блог http://zarnakoom.blogspot.com .
CSS3
<!--Sliding Social Buttons Widget By TopBloggingIdeas.com--> <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+&nbsp;</p>Google+</a></li>         <li><a class="tbisbox pinterest" href="#"><p>4K+&nbsp;</p>Pinterest</a></li>         <li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li>     </ul> </div> <!--Sliding Social Buttons Widget By TopBloggingIdeas.com--> - See more at: http://www.topbloggingideas.com/2013/01/sliding-follow-widget-counters.html#more
Query
CSS
CSS

0 коммент. :

© 2012-2017 Cash's from program