Кнопки поделиться или поставить лайк (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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhUr9zk1l_WEge2ARcRujFIRJFrjbnkJHKHJ__EkXoINDPl1x9gKQQ1OtkWO5e2nfANR_IAKBCBGFI1sAU-C3LUi00srrCoWkFY0Jr-UOFdsi6kq_Od8irXrwAf2NVPWxie4lVcyzWKqbv/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtDcco8i-3yY91GVOCKyIyCF9x0ZNzy6DVoigwPiWqSFsynYXJoGrrBTIhpIQq6apQu58319QJhvJAQewms_TWdMmRv2UYGoPp0V-4r5dbweiFdZZ1738XWLVAy5mMV5-XcZOtg6E-E5Gf/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtDcco8i-3yY91GVOCKyIyCF9x0ZNzy6DVoigwPiWqSFsynYXJoGrrBTIhpIQq6apQu58319QJhvJAQewms_TWdMmRv2UYGoPp0V-4r5dbweiFdZZ1738XWLVAy5mMV5-XcZOtg6E-E5Gf/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtDcco8i-3yY91GVOCKyIyCF9x0ZNzy6DVoigwPiWqSFsynYXJoGrrBTIhpIQq6apQu58319QJhvJAQewms_TWdMmRv2UYGoPp0V-4r5dbweiFdZZ1738XWLVAy5mMV5-XcZOtg6E-E5Gf/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtDcco8i-3yY91GVOCKyIyCF9x0ZNzy6DVoigwPiWqSFsynYXJoGrrBTIhpIQq6apQu58319QJhvJAQewms_TWdMmRv2UYGoPp0V-4r5dbweiFdZZ1738XWLVAy5mMV5-XcZOtg6E-E5Gf/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtDcco8i-3yY91GVOCKyIyCF9x0ZNzy6DVoigwPiWqSFsynYXJoGrrBTIhpIQq6apQu58319QJhvJAQewms_TWdMmRv2UYGoPp0V-4r5dbweiFdZZ1738XWLVAy5mMV5-XcZOtg6E-E5Gf/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>
#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtDcco8i-3yY91GVOCKyIyCF9x0ZNzy6DVoigwPiWqSFsynYXJoGrrBTIhpIQq6apQu58319QJhvJAQewms_TWdMmRv2UYGoPp0V-4r5dbweiFdZZ1738XWLVAy5mMV5-XcZOtg6E-E5Gf/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtDcco8i-3yY91GVOCKyIyCF9x0ZNzy6DVoigwPiWqSFsynYXJoGrrBTIhpIQq6apQu58319QJhvJAQewms_TWdMmRv2UYGoPp0V-4r5dbweiFdZZ1738XWLVAy5mMV5-XcZOtg6E-E5Gf/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtDcco8i-3yY91GVOCKyIyCF9x0ZNzy6DVoigwPiWqSFsynYXJoGrrBTIhpIQq6apQu58319QJhvJAQewms_TWdMmRv2UYGoPp0V-4r5dbweiFdZZ1738XWLVAy5mMV5-XcZOtg6E-E5Gf/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtDcco8i-3yY91GVOCKyIyCF9x0ZNzy6DVoigwPiWqSFsynYXJoGrrBTIhpIQq6apQu58319QJhvJAQewms_TWdMmRv2UYGoPp0V-4r5dbweiFdZZ1738XWLVAy5mMV5-XcZOtg6E-E5Gf/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtDcco8i-3yY91GVOCKyIyCF9x0ZNzy6DVoigwPiWqSFsynYXJoGrrBTIhpIQq6apQu58319QJhvJAQewms_TWdMmRv2UYGoPp0V-4r5dbweiFdZZ1738XWLVAy5mMV5-XcZOtg6E-E5Gf/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.Стильные и креативные кнопки украсят дизайн блога и надеюсь принесут пользу.Не стоит использовать громоздкие и вызывающие раздражение посетителей кнопки соцзакладок. Если у кого то возникнет желание лайкнуть интересный материал или поставить плюсик он сделает это и так.Это больше зависит от менталитета и скорее жаба победит этот мир чем многие из нас изменяться и станут уважать труд другого человека.
О,да)Спасибо огромное)то что надо)
ОтветитьУдалить