Кнопки супер лайков для блога.


соцзакладки для блога

Кнопки поделиться или поставить лайк (facebook,twitter,plus.google) можно добавить на страницу используя различные сервисы предоставляющие подобные услуги,но наличие стандартного варианта,такого как у всех многих не устраивает.Прочитав этот пост у вас появиться возможность кардинально изменить стандартный вариант оформления кнопок соцзакладок и добавить себе на блог стильный блок и сделать лайк автору.



Варианты оформления кнопок соцзакладок.


кнопки соцсетей для блога
Здесь,на странице, будут представлены два варианта оформления кнопок.Первый стандартный вертикальный фиксированный блок соцзакладок с шаловливым смайликом и второй вариант,работающий на jquery, открывающийся по клику кнопки вызова гаджета.Установка блоков стандартна; просто копируем и добавляем в гаджет НТМЛ. Правда во втором варианте следует изменить выделенные индификаторы на свои данные в профилях соцсетей. Рабочие варианты представлены на демо блоге слева на странице.Ну а скрины,как это выглядит на странице блога здесь на картинках. источник
кнопка лайк для блога



Первый вариант оформления кнопок:


<!-- floating page sharers by v-gol.ru -->
<style>#MDfloatshare{background:#fff;float:left;padding: 4px; position: fixed; top: 240px; z-index:9999; width:64px;}
#MDfloatemo{background: url(https://2.bp.blogspot.com/-yjDasaIb5oQ/Vu6Gy5i0zaI/AAAAAAAAE0k/EnSUCtsBflc6fr-dYWAn2r4NNCi7bzufQ/s1600/v-gol.ru.png);background-position:67px 0;float: left; margin: 0 0 0 -150px; padding: 4px;height:65px;position: fixed; top: 160px; z-index: 1; width:60px;}
#MDfloatemo:hover{background-position:2px 0;}
</style>
<div id="MDfloatemo"><div id="MDfloatshare">
<div style="margin:0 0 5px 2px;">
<a href="https://twitter.com/share" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div style="margin:0 5px 5px;">
<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script>
<g:plusone size="tall"></g:plusone></div>
<div style="margin:0 8px 5px;"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like send="false" layout="box_count" width="55" show_faces="false" font="">
</fb:like> </div><div style="margin:0 2px 5px;"><div data-action="share" data-annotation="vertical-bubble" data-height="60">
</div></div></div></div>
<!-- floating page sharers End -->

Смотреть ещё

Оформление блоков для кодаСлайдер- ротатор для блога
Ротатор для баннеров
Эффекты для фото на CSS.
Как добавить форум на блог


Второй вариант оформления кнопок соцзакладок.


<style type="text/css">
#MD-circle-mod {
bottom: 0 !important;
left: 5px;
position: fixed;
}
#MD-container-circle {
position:relative;
height:100px;
width:100px
}
#MD-base-button {background:-moz-linear-gradient(top,#2a83cc 0,#155596 100%) #155596;background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#2a83cc),color-stop(100%,#155596));background:-webkit-linear-gradient(top,#2a83cc 0,#155596 100%);background:-o-linear-gradient(top,#2a83cc 0,#155596 100%);background:-ms-linear-gradient(top,#2a83cc 0,#155596 100%);background:linear-gradient(top,#2a83cc 0,#155596 100%);
border:4px solid #fff;
text-decoration: none;
z-index:9999;
cursor:pointer;
border-radius:50px 50px 50px 50px;
box-shadow:0 1px 3px rgba(0,0,0,0.5);
color:#fff;
font:68px Arial;
height:80px;
left:0;
padding:0;
position:absolute;
text-align:center;
top:0;
width:80px
}
.MD-btn {
position:absolute;
height:50px;
width:50px;
border-radius:25px;
top:15px;
left:15px;
-webkit-transition:all 250ms;
-moz-transition:all 250ms;
-o-transition:all 250ms;
-ms-transition:all 250ms;
transition:all 250ms;
box-shadow:0 1px 3px rgba(0,0,0,.5)
}
#MD-fb.open {
top:-125px;
left:25px
}
#MD-fb.open.clicked {
top:-135px;
left:15px
}
#MD-tw.open {
top:-105px;
left:80px
}
#MD-gplus.open {
top:-75px;
left:125px
}
#MD-rss.open {
top:-30px;
left:160px
}
#MD-mail.open {
left:175px;
top:25px
}
.plus {
-moz-user-select: none;
-moz-transition:all 200ms ease-in 0s;
-webkit-transition:all 200ms ease-in;
-o-transition:all 200ms ease-in
}
.rot {
-moz-transform:rotate(137deg);
-o-transform:rotate(137deg);
-webkit-transform:rotate(137deg);
transform:rotate(137deg)
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">var delay=40,delayTime;$(function(){btns=$(".MD-btn");$("#MD-base-button").toggle(function(){$("span.plus").addClass("rot");btns.each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.addClass("open")},delayTime)})},function(){$("span.plus").removeClass("rot");$($(btns).get().reverse()).each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.removeClass("open")},delayTime)})})});</script><a href="http://v-gol.ru" style="position:absolute;z-index:-11"><img src="" /></a>
<div id="MD-circle-mod"><div id="MD-container-circle"><a id="MD-fb" class="MD-btn" style="background:url(https://2.bp.blogspot.com/-1KZRGjUyL9U/Vu6c5UL8KpI/AAAAAAAAE1Q/_esymw-AvcQcLjprM_oTC1t-j20QqNW_A/s1600/v-gol.ru_shareBbuttons.png) repeat -1px 0" href="https://www.facebook.com/vgolru" rel="nofollow" target="_blank"></a><a id="MD-tw" class="MD-btn" style="background:url(https://2.bp.blogspot.com/-1KZRGjUyL9U/Vu6c5UL8KpI/AAAAAAAAE1Q/_esymw-AvcQcLjprM_oTC1t-j20QqNW_A/s1600/v-gol.ru_shareBbuttons.png) repeat -52px 0" href="http://twitter.com/vvg353" rel="nofollow" target="_blank"></a><a id="MD-gplus" class="MD-btn" style="background:url(https://2.bp.blogspot.com/-1KZRGjUyL9U/Vu6c5UL8KpI/AAAAAAAAE1Q/_esymw-AvcQcLjprM_oTC1t-j20QqNW_A/s1600/v-gol.ru_shareBbuttons.png) repeat -157px 0" href="https://plus.google.com/u/0/114093244238339442282" rel="nofollow" target="_blank"></a><a id="MD-rss" class="MD-btn" style="background:url(https://2.bp.blogspot.com/-1KZRGjUyL9U/Vu6c5UL8KpI/AAAAAAAAE1Q/_esymw-AvcQcLjprM_oTC1t-j20QqNW_A/s1600/v-gol.ru_shareBbuttons.png) repeat -105px 0" href="http://feeds.feedburner.com/v-gol/KLBW" rel="nofollow" target="_blank"></a><a id="MD-mail" class="MD-btn" style="background:url(https://2.bp.blogspot.com/-1KZRGjUyL9U/Vu6c5UL8KpI/AAAAAAAAE1Q/_esymw-AvcQcLjprM_oTC1t-j20QqNW_A/s1600/v-gol.ru_shareBbuttons.png) repeat -210px 0" href="http://feedburner.google.com/fb/a/mailverify?uri=v-gol/KLBW&loc=en_US" rel="nofollow" target="_blank"></a><a id="MD-base-button"><span class="plus">+</span></a></div></div>


кнопки лайки для фейсбука

Данные варианты дизайна кнопок соцзакладок будут комфортно себя чувствовать на любой платформе как Blogger  так и WordPress.Стильные и креативные кнопки украсят дизайн блога и надеюсь принесут пользу.Не стоит использовать громоздкие и вызывающие раздражение посетителей  кнопки соцзакладок. Если у кого то возникнет желание лайкнуть интересный материал или поставить плюсик он сделает это и так.Это больше зависит от менталитета и скорее жаба победит этот мир   чем многие из нас изменяться и станут уважать труд другого человека.



1 комментарий: