Beauty

Szary widżet społecznościowy dla Bloggera

Demo - najedź myszą na przyciski

Umieszczanie widżetu na Bloggerze 

Zaloguj się do panelu admina, wejdź w menu Układ i dodaj gadżet tam, gdzie chcesz, by się wyświetlał przycisk.
Wybierz HTML/JavaScript.
W tytuł możesz wpisać Obserwuj nas, lub inny własny tekst, a w treść wklej skopiowany kod widżetu. Na koniec Zapisz.

Kod widżetu

<link href='http://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel='stylesheet' type='text/css'/>

<style>
.social {
width:100%;
float:none;
margin:10px;
}

.social ul {
border:1px solid #CCC!important;
display:table;
margin:0;
padding:0;
}

.social ul li {
list-style:none;
text-transform:none;
border-bottom:1px solid #CCC!important;
border-top:1px solid #FFF!important;
width:100%;
margin:0;
padding:0!important;
}

.social ul li:first-child {
border-top:0 none;
}

.social ul li:last-child {
border-bottom:0 none;
}

.social ul li a {
background-color:#F2F2F2!important;
color:#404040!important;
display:block;
font-family: oswald;
text-decoration: none;
}

.social ul li a:hover {
background-color:#fafafa!important;
}

.social ul li .rss {
background:url(http://3.bp.blogspot.com/-waH0elEJeIs/VGjBu4HxICI/AAAAAAAAFxc/gYth1AsXxiI/s1600/RSS-1.png) no-repeat scroll 10px center #F87E12;
padding:17.5px 60px;
}

.social ul li .twitter {
background:url(http://3.bp.blogspot.com/-ELgL4cpImzM/VGjBvYi8qRI/AAAAAAAAFxM/Q_vP0cschhY/s1600/Twitter.png) no-repeat scroll 10px center #4CACEE;
padding:17.5px 60px;
}

.social ul li .facebook {
background:url(http://4.bp.blogspot.com/-GcztyGaDMSI/VGjBu0dbNAI/AAAAAAAAFxA/nQHjuzAWlF0/s1600/Facebook-1.png) no-repeat scroll 10px center #3B5998;
padding:17.5px 60px;
}

.social ul li .google {
background:url(http://4.bp.blogspot.com/-g5jD3sWPdxg/VGjBwp3VRRI/AAAAAAAAFxg/b7_8iwKjB6U/s1600/google.png) no-repeat scroll 10px center #D44937;
padding:17.5px 60px;
}

.social ul li .linkedin {
background:url(http://3.bp.blogspot.com/-HS9O4Cyqs7g/VGjBu4c1f1I/AAAAAAAAFxE/cXowaGThn4c/s1600/LinkedIn-1.png) no-repeat scroll 10px center #3692C3;
padding:17.5px 60px;
}

.social ul li .youtube {
background:url(http://2.bp.blogspot.com/-dRG_BKOrSZE/VGjBv4oiP7I/AAAAAAAAFxQ/aW_n7GN5-Ks/s1600/Youtube-1.png) no-repeat scroll 10px center #C6312B;
padding:17.5px 60px;
}

.social-about {
display:none;
}
</style>

<div class="social">
<ul>
<li><a target="_self" class="rss" href="http://feeds.feedburner.com/blokotek">Subskrybuj kanał RSS</a></li>
<li><a target="_self" class="twitter" href="http://twitter.com/Blokotek">Obserwuj na Twitterze</a></li>
<li><a target="_self" class="facebook" href="http://www.facebook.com/blokotek">Obserwuj na Facebooku</a></li>
<li><a target="_self" class="google" href="https://plus.google.com/+BlokotekPlDodatki" rel="author">Obserwuj na Google+</a></li>
<li><a target="_self" class="linkedin" href="https://www.linkedin.com/groups/Blokotek-6796840?gid=6796840">Obserwuj na LinkedIn</a></li>
<li><a target="_self" class="youtube" href="http://www.youtube.com/user/Blokotek">Obserwuj na YouTube</a></li>
</ul>
</div>

Dostosowywanie widżetu

  • Tekst zaznaczony na pomarańczowo zamień na nazwę użytkownika kanału RSS na FeedBurnerze.
  • Tekst zaznaczony na turkusowo zamień na nazwę użytkownika na Twitterze.
  • Tekst zaznaczony na granatowo zamień na nazwę użytkownika na Facebooku.
  • Tekst zaznaczony na czerwono zamień na nazwę użytkownika na Google+.
  • Tekst zaznaczony na zielono zamień na nazwę użytkownika na LinkedIn.
  • Tekst zaznaczony na żółto zamień na nazwę użytkownika na YouTube.

Instagram