Sliding social widget counter

- 13:04:00
sliding social widget counter


|  Demo

Sliding social widget counter é um widget bem interessante isso tem um efeito hover ao deslizar por isso o torna atraente tem redes sociais como facebook google+ twitter pinterest alem de RSS feed isso pode ser adicionado na sidebar do Blogger para ficar atrativo instale agora mesmo. |

Como instalar sliding social widget Counter no Blogger 

Faça login no blogger. então vá no menu modelo editar HTML 

CTRL+F busque por: ]]></b:skin> então logo acima disso copie o cole o seguinte código:

<style type="text/css">
.abt-box {
display: inline-block;
position: relative;
width: 100%;
max-width: 300px;
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);
box-sizing: border-box;
}
.abt-social {
width: 95%;
max-width: 280px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
.abt-social a {
text-decoration: none !important;
}
.abt-social ul {
font-family: Arial, San-Serif;
margin: 0;
padding: 0;
list-style: none;
}
.abt-social ul li {
display: inline;
margin: 0;
padding: 0;
text-indent: 0
}
.abt-social ul li a.facebook {
border-left: 65px solid rgba(59, 89, 152, 1);
color: rgba(59, 89, 152, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.facebook p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.facebook:hover {
background: rgba(59, 89, 152, 1);
border-left: 0px solid rgba(59, 89, 152, 0.1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.facebook:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.twitter {
border-left: 65px solid rgba(64, 153, 255, 1);
color: rgba(64, 153, 255, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.twitter p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.twitter:hover {
background: rgba(64, 153, 255, 1);
border-left: 0px solid rgba(64, 153, 255, 1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.twitter:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.gplus {
border-left: 65px solid rgba(219, 74, 57, 1);
color: rgba(219, 74, 57, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.gplus p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.gplus:hover {
background: rgba(219, 74, 57, 1);
border-left: 0px solid rgba(219, 74, 57, 1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.gplus:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.pinterest {
border-left: 65px solid rgba(174, 45, 39, 1);
color: rgba(174, 45, 39, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.pinterest p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.pinterest:hover {
background: rgba(174, 45, 39, 1);
border-left: 0px solid rgba(174, 45, 39, 1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.pinterest:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.rss {
border-left: 65px solid rgba(255, 102, 0, 1);
color: rgba(255, 102, 0, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.rss p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.rss:hover {
background: rgba(255, 102, 0, 1);
border-left: 0px solid rgba(255, 102, 0, 1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.rss:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}
</style>

HTML para adicionar pode ser adicionado na sidebar do Blogger basta ir em layout adicionar novo gadget JavaScript copie e cole o seguinte código:

<div class="abt-social">
    <ul>
        <li><a class="abt-box facebook" href="#"><p>+15K</p>Facebook </a></li>
        <li><a class="abt-box twitter" href="#"><p>+15K</p>Twitter</a></li>
        <li><a class="abt-box gplus" href="#"><p>+15K&nbsp;</p>Google+</a></li>
        <li><a class="abt-box pinterest" href="#"><p>+15&nbsp;</p>Pinterest</a></li>
        <li><a class="abt-box rss" href="#"><p>+15K</p>RSS</a></li>
    </ul>
</div>

Salve e pronto.

.


EmoticonEmoticon

 

Start typing and press Enter to search