2014/11/26

Jak zarządzać notatkami przy pomocy Evernote?

W tym artykule poruszymy temat internetowego, dość rozbudowanego i oczywiście darmowego notatnika Evernote, który zdobył popularność na skalę światową. Umożliwia on segregowanie notatek podzielonych na kategorie oraz oznaczonych tagami. Potężna wyszukiwarka zawsze odszuka potrzebny zapisek. Można dodawać teksty, pliki i multimedia zarówno własne jak i te skopiowane z internetu. Zapis w chmurze pozwala na dostęp do naszych danych z każdego urządzenia, po zalogowaniu się na nasze konto.

Zakładanie konta

Wejdź na stronę Evernote, po czym kliknij Menu.
Z wysuwanej listy wybierz Załóż konto.
Wybierz Evernote bezpłatne konto.
Wpisz swój adres E-mail i hasło. Kliknij Załóż konto.
Kliknij zielony przycisk, by przejść do panelu zarządzania notatkami.
Oto on. Możesz już zacząć pracę z notatnikiem.

Zarządzanie notatkami

W poniższym filmiku pokazaliśmy przykłady tworzenia, edycji i usuwania notatki.

Czytaj dalej

Last Pass - narzędzie do zapamiętywania haseł w przeglądarkach

W tym artykule pragniemy przedstawić Last Pass w postaci programu oraz wtyczek, który zarządza mnogością haseł logowania w różnych serwisach. Nie tylko generuje bezpieczne klucze, ale i zapamiętuje je, dzięki czemu możliwy jest dostęp do nich na każdym urządzeniu oraz każdej przeglądarce. Jest to narzędzie podobne do menedżera haseł przeglądarki, jednak tu po instalacji systemu i przeglądarki nie znikną hasła, gdyż są zapisane w chmurze. Wystarczy zainstalować aplikację, wpisać hasło główne i gotowe! Możemy logować się do serwisów za pomocą jednego kliknięcia. Według nas jest to bardzo przydatne narzędzie dla blogerów korzystających z różnych urządzeń i przeglądarek. Last Pass to nie tylko menedżer haseł, ale i notatnik, w którym nasze notki pozostaną bezpieczne.

Jako, że Blokotek raczej nie zajmuje się programami (chyba, że są przydatne pod kątem blogowania oraz dla webmasterów), pozwolimy sobie przytoczyć opis Last Pass stworzony przez dobreprogramy.pl:
LastPass to usługa internetowa, która daje użytkownikom dostęp do osobistej, specjalnej zabezpieczonej internetowej bazy haseł, notatek oraz tożsamości internetowych. Integruje się ona z popularnymi przeglądarkami internetowymi pozwalając na wykorzystanie LastPass zamiast oryginalnego managera haseł.
Instalator aplikacji wykrywa zainstalowane na komputerze przeglądarki i proponuje instalacje dodatków do nich. Zapewnia wsparcie dla Internet Explorera, Firefoksa, Chrome, Opery a także Safari, zarówno na systemie Windows jak i Mac a także różnych dystrybucjach Linuksa. Po utworzeniu konta lub zalogowaniu się do już istniejącego, LastPass przejmuje rolę managera haseł – dane użytkownika są gromadzone w internetowej bazie producenta w formie zaszyfrowanej hasłem głównym. Jego utrata wiąże się z utratą danych zapisanych w bazie, nawet po potwierdzeniu właściciela konta przy pomocy adresu email. Manager oprócz automatycznego zapisywania danych, a później wypełniania formularzy, oferuje szereg przydatnych opcji. Użytkownik może grupować dane, przeglądać je, edytować. Możliwe jest również zapisywanie bezpiecznych notatek, zarówno tekstowych, jak i specyficznych np. dane karty kredytowej, dane do poczty email, informacje z paszportu, klucze SSH itp. LastPass oferuje także tworzenie profili automatycznego wypełniania formularzy, oraz gotowych tożsamości do użytku w internecie.
Aplikacja wspiera uwierzytelnienie dwuskładnikowe np. przy pomocy aplikacji Google Authenticator lub tokenów YubiKey. Z poziomu dodatku użytkownik może przeprowadzić kontrolę bezpieczeństwa, która wskaże mu słabe lub zduplikowane hasła, a także oceni ich siłę. Największą jej zaletą jest fakt, że działa jako dodatek do przeglądarki internetowej przez co jest uniwersalna i dostępna na niemal każdej platformie. Aplikacja w wersji podstawowej jest bezpłatna. Rozszerzona wersja Premium dostępna na okres testowy 14 dni pozwala na użycie LastPass na urządzeniach mobilnych takich jak Android, Windows Phone, iOS, czy Symbian, posiada także rozszerzone, priorytetowe wsparcie pomocy technicznej w wypadku problemów.

1. Zakładanie konta na Last Pass

Wejdź na stronę Last Pass. Ustaw język na Polski i kliknij Log In.
Kliknij Create an Account.
Wypełnij formularz rejestracyjny, tak jak pokazane jest na ilustracji.
Potwierdź adres E-mail i kliknij Załóż konto.
Kliknij Download. Spowoduje to przekierowanie cię na stronę dodatku do przeglądarki z której teraz korzystasz tak, byś mógł zainstalować wtyczkę Last Pass.

2. Instalacja wtyczki Last Pass do przeglądarki internetowej

Jeśli po założeniu konta na Last Pass nie zostałeś automatycznie przeniesiony na stronę wtyczki, możesz zainstalować ją ręcznie wchodząc pod link poniżej:
Jeśli instalacja wtyczki przebiegła pomyślnie - na pasku przeglądarki powinna pojawić się ikona do aplikacji.
My proces instalacji wtyczki pokażemy na przykładzie przeglądarki Chrome:

Wejdź na stronę dodatku i kliknij zainstaluj (o ile jeszcze tego nie zrobiłeś wcześniej, przy zakładaniu konta Last Pass).
Kliknij dodaj.
W prawym górnym rogu przeglądarki pojawi się ikona gwiazdki, poprzez którą dostaniesz się do swoich ustawień aplikacji.

3. Korzystanie z aplikacji Last Pass

Wejdź na stronę logowania dowolnego serwisu. My wchodzimy na Bloggera. Wpisz hasło i kliknij symbol gwiazdki.
Kliknij Zapisz stronę.
Pola formularza wypełnią się automatycznie. Wystarczy, że klikniesz Zapisz stronę i gotowe!
Teraz, jeśli kolejny raz będziesz chciał się zalogować, wystarczy że wciśniesz gwiazdkę.
Następnie wybierzesz swój profil.
Na koniec klikniesz Zaloguj.

Czytaj dalej

2014/11/25

21 darmowych narzędzi online do testowania kodów programowania

W tym artykule wymienimy 21 darmowych narzędzi online, za których pomocą przetestujesz różne kody programowania, poczynając na html, css, javascript, poprzez php, a na SQL kończąc.

1. CodePen

2. HTML5 Playground

3. JSFiddle

4. JS Bin

5. Tinkerbin

6. Codepad

7.  D3 PlayGround 

8. HTML5 Snippet

9. CSS Deck

10. Dabblet

11. JSApp

12. Tryit Editor

13. PHP Fiddle


14. JavaScript Sandbox

15. RegexPal

16.SQLFiddle

17.IDEone

18.Mozilla Thimble

20.PHP Sandbox

21.Tmpltr

Jeśli znacie jeszcze inne darmowe narzędzia online, za których pomocą webmasterzy mogą testować swój kod - podawajcie linki w komentarzu.
Czytaj dalej

2014/11/19

Różowe rozwijane menu z ikonami czcionki Font Awesome


Demo

Udostępniamy kod HTML rozwijanego menu z użyciem ikon czcionki Font Awesome do wykorzystania na własnej stronie www lub blogu. Menu jest responsywne - dostosowuje się do różnych rozdzielczości wyświetlaczy.

Kod HTML

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.menu_container {
margin-bottom:30px;
height:auto;
clear:both;
float:left;
border-radius:2px;
box-sizing:border-box;
-moz-box-sizing:border-box
}
.menu_container.full_width {
width:100%
}
.menu_container>ul {
position:relative;
list-style:none;
margin:0;
padding:0;
float:left;
width:100%;
background:inherit;
height:0;
overflow:hidden
}
.menu_container>ul>li {
position:relative;
background:inherit;
display:block;
padding:0;
margin:0
}
.menu_container>ul>li>a {
padding:8px 25px;
display:block;
color:#fff;
text-decoration:none;
text-shadow:0 1px 2px rgba(0, 0, 0, 0.25);
font-size:16px;
line-height:28px;
height:28px;
font-family:"Roboto Condensed", sans-serif;
transition:background-color 200ms linear;
-moz-transition:background-color 200ms linear;
-o-transition:background-color 200ms linear;
-webkit-transition:background-color 200ms linear
}
.menu_container>ul>li .fa {
font-size:14px;
margin-right:2px
}
.menu_container>ul>li.last>a {
box-shadow:none;
border-right:0
}
.menu_container>ul>li:hover {
margin-left:-1px
}
.menu_container>ul>li:hover>a {
padding-left:26px
}
.menu_container .menu_dropdown_block {
visibility:hidden;
position:relative;
border:1px solid #ddd;
border-top:0;
background:#fff;
top:100%;
color:#575757;
overflow:hidden;
z-index:30;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
height:0;
width:auto;
box-sizing:border-box;
-moz-box-sizing:border-box;
transition:opacity 100ms linear;
-moz-transition:opacity 100ms linear;
-o-transition:opacity 100ms linear;
-webkit-transition:opacity 100ms linear
}
.menu_container>ul>li.right>.menu_dropdown_block {
right:0
}
.menu_container .menu_dropdown_block p {
padding:5px 5px;
margin-bottom:10px;
line-height:1.7em
}
.menu_container .menu_dropdown_block *.small {
font-size:11px;
color:#666
}
.menu_container .menu_dropdown_block p.links a {
text-decoration:none
}
.menu_container>ul>li:hover>.menu_dropdown_block {
visibility:visible;
height:auto;
min-height:40px;
max-height:3000px
}
.menu_container .menu_dropdown_block.full_width {
left:0;
width:100%;
margin-left:0
}
.menu_container .menu_dropdown_block.half_width {
width:50%
}
.menu_container .menu_dropdown_block .md-container {
padding:15px 20px 15px 20px
}
.menu_container .menu_dropdown_block .md-container:after {
content:' ';
display:block;
clear:both
}
.menu_container .menu_dropdown_block .column {
box-sizing:border-box;
-moz-box-sizing:border-box;
float:none;
width:auto
}
.menu_container .menu_dropdown_block .column .content {
padding:10px 20px
}

img.auto_width {
width:auto;
width:100%
}
ul.menu_submenu {
list-style:none;
padding:0;
margin:0;
margin-bottom:10px
}
ul.menu_submenu li {
display:block
}
ul.menu_submenu li a {
display:block;
padding:4px 0;
text-decoration:none;
color:#666;
margin:2px 0;
font-size:13px;
line-height:1.3em
}
ul.menu_submenu li a:before {
content:'\203A';
display:inline-block;
margin-right:6px;
position:relative;
top:-1px;
font-weight:bold
}
ul.menu_submenu li a:hover {
color:#111
}
ul.menu_submenu li a>span {
font-family:Calibri;
font-size:10px
}
ul.menu_submenu_block {
list-style:none;
padding:0;
margin:0
}
ul.menu_submenu_block li {
display:block;
position:relative
}
ul.menu_submenu_block li a {
display:block;
padding:8px 25px 8px 18px;
text-decoration:none;
color:#666;
margin:0;
white-space:nowrap
}
ul.menu_submenu_block li:hover>a {
color:#fff
}
ul.menu_submenu_block>li.has-submenu>a:after {
content:"\203A";
position:absolute;
font-family:Arial, sans-serif;
top:6px;
right:10px;
font-size:20px;
line-height:16px;
font-weight:bold;
opacity:.7
}
ul.menu_submenu_block>li.has-submenu:hover>a:after {
opacity:1
}
ul.menu_submenu_block>li>.menu_submenu_block {
visibility:hidden;
opacity:0;
position:relative;
width:auto;
text-align:left;
min-width:160px;
top:100%;
height:0;
box-shadow:inset 4px 0 0 rgba(0, 0, 0, 0.2)
}
ul.menu_submenu_block>li.has-submenu:hover>.menu_submenu_block {
visibility:visible;
opacity:1;
transition:opacity 100ms linear;
-moz-transition:opacity 100ms linear;
-o-transition:opacity 100ms linear;
-webkit-transition:opacity 100ms linear;
height:auto
}
ul.menu_submenu_block>li>.menu_submenu_block a {
padding-left:30px
}
ul.menu_submenu_block>li>.menu_submenu_block>li>.menu_submenu_block a {
padding-left:40px
}
ul.menu_submenu_block>li>.menu_submenu_block>li>.menu_submenu_block>li>.menu_submenu_block a {
padding-left:50px
}
.mobile_collapser {
display:block;
height:22px;
padding:12px 25px;
color:#fff;
text-shadow:0 1px 2px rgba(0, 0, 0, 0.25);
font-size:16px;
line-height:22px;
font-family:"Roboto Condensed", sans-serif;
box-shadow:inset 0 -1px 1px rgba(0, 0, 0, 0.2);
background: #fe9090;
}
.mobile_collapser:before {
content:'\2261';
display:block;
float:left;
margin:-1px 8px 0 0;
font-size:30px
}
#hidden_menu_collapser {
display:none
}
#hidden_menu_collapser:checked+ul {
height:auto;
min-height:40px;
max-height:2999px
}
.menu_container>ul.collapsed {
height:auto;
min-height:40px;
max-height:2999px
}
@media only screen and (min-width:640px) {
.mobile_collapser {
display:none;
}
.menu_container {
height:44px;
padding-left:10px;
padding-right:10px;
}
.menu_container>ul {
transition:all 100ms linear;
-moz-transition:all 100ms linear;
-o-transition:all 100ms linear;
-webkit-transition:all 100ms linear;
height:44px;
background:0;
overflow:visible
}
.menu_container>ul>li {
position:static;
float:left;
background:inherit
}
.menu_container>ul>li:hover {
margin-left:-1px
}
.menu_container>ul>li>a {
box-shadow:none;
border-right:0;
box-shadow:inset -1px 0 0 rgba(0, 0, 0, 0.2);
border-right:1px solid rgba(255, 255, 255, 0.25);
}
.menu_container .menu_dropdown_block {
position:absolute;
opacity:0
}
.menu_container>ul>li:hover>.menu_dropdown_block {
overflow:visible;
opacity:1;
margin-left:-1px
}
.menu_container>ul>li.right {
float:right
}


.menu_container.topfixed {
position:fixed;
width:100%;
top:0;
left:0;
border-radius:0
}
.menu_container.centered>ul {
float:none;
margin:0 auto;
max-width:1000px
}
.menu_container.pink {
background:#fe9090;

}
.menu_container.pink>ul>li:hover>a {
background-color:#ff5c5c
}
.menu_container.pink>ul>li>.menu_dropdown_block p.links a {
color:#657f40
}
.menu_container.pink>ul>li>.menu_dropdown_block p.links a:hover {
color:#43552b;
border-bottom:1px dotted #ff5c5c
}
.menu_container.pink ul.menu_submenu_block li:hover>a {
background:#ff5c5c
}
</style>
<div id="menu1" class="menu_container pink full_width">
<label for="hidden_menu_collapser" class="mobile_collapser">Menu</label> <!-- Mobile menu title -->
<input id="hidden_menu_collapser" type="checkbox" />
<ul>
<li>
<a href="#"><i class="fa fa-list"></i> Linki</a>
<div class="menu_dropdown_block">
<ul class="menu_submenu_block">
<li><a href="#">Najnowsze</a></li>
<li><a href="#">Najpopularniejsze</a></li>
<li><a href="#">Najciekawsze</a></li>
</ul>
<li>
<a href="#"><i class="fa fa-envelope-o"></i> Kontakt</a>
<div class="menu_dropdown_block">
<ul class="menu_submenu_block">
<li><a href="#">Mailowy</a></li>
<li><a href="#">Telefoniczny</a></li>
<li><a href="#">Na Skype</a></li>
</ul>
<li>
<a href="#"><i class="fa fa-user"></i> O autorze</a>
<div class="menu_dropdown_block">
<ul class="menu_submenu_block">
<li><a href="#">Kim jest</a></li>
<li><a href="#">Czym się zajmuje</a></li>
<li><a href="#">Skąd pochodzi</a></li>
</ul>
<li>
<a href="#"><i class="fa fa-folder-open-o"></i> Szablony</a>
<div class="menu_dropdown_block">
<ul class="menu_submenu_block">
<li><a href="#">Dla Bloggera</a></li>
<li><a href="#">Dla WordPressa</a></li>
<li><a href="#">Dla stron www</a></li>
</ul>
</div><!-- /menu -->
Czytaj dalej

2014/11/18

Kolorowy widżet z przyciskami udostępniania

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="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: pl_PL</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<section id="aa_wpfs_wrap" class="" >
<div id="aa_wpfs_block">
<div class="aa_wpfs_block_img aa_wpfs_block_img_fb" >
<i class="fa fa-facebook aa_wpfs_block_icon" ></i>
</div>
<div class="aa_wpfs_block_dsc aa_wpfs_block_dsc_fb" >
<div class="aa_wpfs_block_follow">
<div id="fb-root"></div>
<div class="fb-like" data-href="https://facebook.com/blokotek/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>
</div>
</div>
<div id="aa_wpfs_block">
<div class="aa_wpfs_block_img aa_wpfs_block_img_twt" >
<i class="fa fa-twitter aa_wpfs_block_icon" ></i>
</div>
<div class="aa_wpfs_block_dsc aa_wpfs_block_dsc_twt" >
<div class="aa_wpfs_block_follow">
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="pl">Tweetnij</a>
</div>
</div>
</div>
<div id="aa_wpfs_block">
<div class="aa_wpfs_block_img aa_wpfs_block_img_yt" >
<i class="fa fa-youtube aa_wpfs_block_icon" ></i>
</div>
<div class="aa_wpfs_block_dsc aa_wpfs_block_dsc_yt" >
<div class="aa_wpfs_block_follow">
<div class="g-ytsubscribe" data-channel="Blokotek" data-layout="default" data-count="default"></div>
</div>
</div>
</div>
<div id="aa_wpfs_block">
<div class="aa_wpfs_block_img aa_wpfs_block_img_ggl" >
<i class="fa fa-google-plus aa_wpfs_block_icon" ></i>
</div>
<div class="aa_wpfs_block_dsc aa_wpfs_block_dsc_ggl ">
<div class="aa_wpfs_block_follow">
<div class="g-plusone" data-annotation="bubble" data-height="" data-href="https://plus.google.com/+BlokotekPLDodatki/" data-rel="author"></div>
</div>
</div>
</div>
<div id="aa_wpfs_block">
<div class="aa_wpfs_block_img aa_wpfs_block_img_pin" >
<i class="fa fa-pinterest aa_wpfs_block_icon" ></i>
</div>
<div class="aa_wpfs_block_dsc aa_wpfs_block_dsc_pin" >
<div class="aa_wpfs_block_follow">
<a data-pin-config="beside" data-pin-do="buttonBookmark" href="//pinterest.com/pin/create/button/"><img src="//assets.pinterest.com/images/PinExt.png" /></a>
</div>
</div>
</div>
<div id="aa_wpfs_block">
<div class="aa_wpfs_block_img aa_wpfs_block_img_li" >
<i class="fa fa-linkedin aa_wpfs_block_icon" ></i>
</div>
<div class="aa_wpfs_block_dsc aa_wpfs_block_dsc_li" >
<div class="aa_wpfs_block_follow">
<script type="IN/Share" data-counter="right"></script>
</div>
</div>
</div>
</section>

<style>
#aa_wpfs_wrap {
display: block;
width: 200px;
margin: 10px auto;
padding: 0;
text-align: center;
background: #fff;
overflow: hidden;
}
#aa_wpfs_block {
display: table;
width: 100%;
margin-bottom:2px
}
.aa_wpfs_block_img {
display: table-cell;
width: 25%;
vertical-align: top;
padding: 13px;
}
.aa_wpfs_block_dsc {
display: table-cell;
width: 75%;
vertical-align: top;
padding: 10px;
}

.aa_wpfs_block_follow {
display: block;
text-align: left;
}
.aa_wpfs_block_icon {
color: #fff;
font-size: 20px !important;
}
/* Facebook */
.aa_wpfs_block_img_fb {
background: #3b5998;
}
.aa_wpfs_block_dsc_fb {
background: rgba(59, 89, 152, 0.24);
}
/* Twitter */
.aa_wpfs_block_img_twt {
background: #55acee;
}
.aa_wpfs_block_dsc_twt {
background: rgba(85, 172, 238, 0.43);
}
/* Google */
.aa_wpfs_block_img_ggl {
background: #dd4b39;
}
.aa_wpfs_block_dsc_ggl {
background: rgba(221, 75, 57, 0.34);
}
/* Pinterest */
.aa_wpfs_block_img_pin {
background: #cc2127;
}
.aa_wpfs_block_dsc_pin {
background: rgba(204, 33, 39, 0.35);
}
/* Youtube */
.aa_wpfs_block_img_yt {
background: #b31217;
}
.aa_wpfs_block_dsc_yt {
background: rgba(179, 18, 23, 0.52);
}
/* LinkedIn */
.aa_wpfs_block_img_li {
background: #0976b4;
}
.aa_wpfs_block_dsc_li {
background: rgba(9, 118, 180, 0.39);
}
/*------------------------------------*\
RESPONSIVE
\*------------------------------------*/
@media only screen and (min-width:320px) {
.aa_wpfs_block_img {
display: block;
width: 100%;
vertical-align: top;
padding: 10px;
}
.aa_wpfs_block_dsc {
display: block;
width: 100%;
vertical-align: top;
padding: 10px;
text-align: center;
}
.aa_wpfs_block_dsc_txt_h4 {
text-align: center;
}
.aa_wpfs_block_follow {
text-align: center;
}
}
@media only screen and (min-width:480px) {
.aa_wpfs_block_img {
display: block;
width: 100%;
vertical-align: top;
padding: 10px;
}
.aa_wpfs_block_dsc {
display: block;
width: 100%;
vertical-align: top;
padding: 10px;
text-align: center;
}
.aa_wpfs_block_dsc_txt_h4 {
text-align: center;
}
.aa_wpfs_block_follow {
text-align: center;
}
}
@media only screen and (min-width:768px) {
.aa_wpfs_block_img {
display: block;
width: 100%;
vertical-align: top;
padding: 10px;
}
.aa_wpfs_block_dsc {
display: block;
width: 100%;
vertical-align: top;
padding: 10px;
text-align: center;
}
.aa_wpfs_block_dsc_txt_h4 {
text-align: center;
}
.aa_wpfs_block_follow {
text-align: center;
}
}
@media only screen and (min-width:1024px) {
.aa_wpfs_block_img {
display: table-cell;
width: 25%;
vertical-align: top;
padding: 13px;
}
.aa_wpfs_block_dsc {
display: table-cell;
width: 75%;
vertical-align: top;
padding: 10px;
}
.aa_wpfs_block_dsc_txt_h4 {
text-align: left;
}
.aa_wpfs_block_follow {
text-align: left;
}
}
@media only screen and (min-width:1140px) {
.aa_wpfs_block_img {
display: table-cell;
width: 25%;
vertical-align: top;
padding: 13px;
}
.aa_wpfs_block_dsc {
display: table-cell;
width: 75%;
vertical-align: top;
padding: 10px;
}
.aa_wpfs_block_dsc_txt_h4 {
text-align: left;
}
.aa_wpfs_block_follow {
text-align: left;
}
}
@media only screen and (min-width:1280px) {
.aa_wpfs_block_img {
display: table-cell;
width: 25%;
vertical-align: top;
padding: 13px;
}
.aa_wpfs_block_dsc {
display: table-cell;
width: 75%;
vertical-align: top;
padding: 10px;
}
.aa_wpfs_block_dsc_txt_h4 {
text-align: left;
}
.aa_wpfs_block_follow {
text-align: left;
}
}
</style>

Dostosowywanie widżetu

  • 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 żółto zamień na nazwę użytkownika na YouTube.

Czytaj dalej

2014/11/16

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.

Czytaj dalej
Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.