2014/12/31

Widżet z informacją o autorze z opisem nasuwającym się na zdjęcie

Demo - najedź myszą na zdjęcie


Jak umieścić widżet na Bloggerze?

Kod można umieścić w bocznym sidebarze (o ile jest dość szeroki) lub też w poście lub na stronie. Wystarczy przełączyć edytor posta do trybu HTML, wkleić kod i opublikować.

    <div id="container-about-author">
<h1>
O autorce
</h1>
<div class="author">
<img src="http://3.bp.blogspot.com/-FG3UOCpYoAg/VKMA7MfNSTI/AAAAAAAAHos/b4oCwfZWTZA/s1600/Lindsay%2BLohan.png"/>
<div class="author-testo-hover">
<h3>Lindsay Lohan</h3>
<h4>Aktorka</h4>
<p>Znana między innymi z filmu : "Wredne dziewczyny", w którym to dołącza do paczki "plastikowych" panienek, żeby dać im nauczkę, za złośliwość.</p>
</div>
<div class="author-sfondo author-testo">
<p>Lindsay Lohan</p>
<a href="https://twitter.com/blokotek">@lindsaylohan</a>
</div>

</div>
</div>

<style>
#container-about-author {
max-width:500px;
margin-left:auto;
margin-right:auto;
margin-top:1%;
}

#container-about-author h1 {
font-family: "Verdana", sans;
font-weight:300;
text-align:center;
color:#000;
}

#container-about-author h2 {
color:#2c3e52;
font-family: "Verdana", sans;
font-size: 14px;
text-align:center;
font-weight:700;
margin-bottom:50px;

}

.author {
/*width: 460px;*/
height: 250px;
/*height: 230px;*/
overflow: hidden;
position: relative;
}

.author img {
position: absolute;
top: 0;
left: 0;
height: inherit;
width: auto;
height: 100%;
float: left;
transition: all 0.8s;
-moz-transition: all 0.8s;
cursor: pointer;

}

.author:hover img {
/*opacity: 0.4 !important;*/
}

.author .author-testo-hover h3 {
padding: 0px;
margin: 0px;
font-size: 25px;
font-weight:300;
font-family: "Verdana";
}

.author .author-testo-hover h4 {
padding: 0px;
padding-bottom: 13px;
margin: 0px;
font-size: 14px;
letter-spacing: 3px;
width: 90%;
font-family: "Verdana";
text-transform:uppercase;
border-bottom: 2px solid #000;
}

.author .author-testo-hover p {
padding-top: 13px;
font-size: 14px;
line-height: 20px;
font-family: "Verdana";
}


.author .author-testo-hover{
width: 42%;
height: 89%;
position: absolute;
top: 0%;
left: 50%;
padding: 3% 4%;
background: #D90E0E;
color: rgba(255,255,255,1);
/* display: none;*/
transition: all 0.5s ease-in-out;
-moz-transition: all 0.4s;
cursor: pointer;
}

.author:hover .author-testo-hover {
display: block !important;
color: rgba(255,255,255,1);
background:rgba(217,14,14,0.85);
left: 0px;
top: 0px;
}


.author .author-testo {
width: 50%;
height: inherit;
background: #000;
float: left;
position: absolute;
left: 50%;
}

.author .author-testo p {
padding:100px 0px 0px 20px;
font-size: 24px;
font-family: "Verdana";
font-weight:700;
color: #fff;
}

.author .author-testo p span {
font-family: "Verdana" !important;
}

.author .author-testo a , .author-sfondo .author-testo {
padding: 0px 0px 0px 20px;
font-size: 14px !important;
color:#FF5A22 !important;
font-family: "Verdana" !important;
text-decoration: none !important;
}

.author .author-testo {
float: left;
}

.author-sfondo {
background: #eee !important;
width: 50% !important;
height: inherit !important;
}

.author-sfondo p {
color: #000 !important;
}
</style>

Jak dostosować widżet?


  • Teksty zaznaczone na zielono zamień na własne: imię, opis itp.
  • Link zaznaczony na różowo zamień na bezpośredni link do swojego zdjęcia.
  • Tekst zaznaczony na turkusowo zamień na nazwę użytkownika swojego profilu na Twitterze.
  • Tekst zaznaczony na pomarańczowo zamień również na nazwę profilu na Twitterze.
Czytaj dalej

2014/12/29

Informacja o autorze - widżet na bloga


W tym poradniku pokażę ci, w jaki sposób umieścić na bloga ładny widżet z informacją o autorze. Zawiera on zdjęcie, tekst oraz przyciski społecznościowe. W tle możesz dodać własny obrazek.
Demo

Jak umieścić widżet na Bloggerze?

W panelu admina wejdź w menu Szablon => Edytuj kod HTML.
Kliknij w okno edytora, wciśnij kombinację klawiszy Ctrl + F i w wyszukiwarkę wpisz poniższy kod, po czym kliknij Enter.

<div class='region-inner tabs-inner'>

Następnie liczbę 1 zawartą w maxwidgets zamień na 2 (patrz obrazek poniżej), by uzyskać możliwość dodania drugiego gadżetu poza kartami z menu stron. Na koniec Zapisz szablon.
Teraz przejdź do menu Układ w panelu admina i tam, gdzie widnieją Strony - dodaj gadżet.
Wybierz HTML/JavaScript.
Tytuł gadżetu pozostaw pusty a w treść wklej poniższy kod widżetu, po czym kliknij Zapisz.

<script type="text/javascript">
WebFontConfig = {
google: {
families: [ 'Marck+Script::latin,latin-ext' ] }
}
;
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
}
)();
</script>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.authorinfo {
width: 100%;
text-align: center;
background: #BAD1D1 url(http://1.bp.blogspot.com/-2c1YTxlHQkM/VKEtyvEo19I/AAAAAAAAHnE/f0olJ7IwSLE/s1600/2673730.png) repeat;
font-family: 'Marck Script', cursive;
}

.authorinfo img {
border-radius: 50%;
border: 7px solid #FCB3B3;
margin-top: 10px;
cursor: pointer;
-webkit-transition: all 1 ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.authorinfo img:hover {
-webkit-transform: scale(1.15);
transform: scale(1.15);
transform: scale(1.3);
-webkit-transition: all 1 ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.authorname {
font-weight: bold;
margin: 10px 0;
font-size: 40px;
font-weight: bold;
}

.authordesc {
font-size: 25px;
background: #fff;
opacity: 0.8;
width: 60%;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
}

.social a:hover {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}

a.social {
font-size: 30px;
padding: 6px 0px;
margin: 0 7px;
width: 54px;
text-align: center;
color: #fff!important;
}

.social i.fa.fa-facebook {
background: #3B5998;
padding: 8px 18px;
}

.social i.fa.fa-google-plus {
background: #D14836;
padding: 8px 14px;
}

.social i.fa.fa-twitter {
background: #00ACED;
padding: 8px 14px;
}

.social i.fa.fa-pinterest {
background: #CB2027;
padding: 8px 14px;
}

.social i.fa.fa-rss {
background: #F88F16;
padding: 8px 14px;
}

.social i.fa.fa-youtube {
background: #CD332D;
padding: 8px 14px;
}

.social i.fa.fa-linkedin {
background: #65B7D2;
padding: 8px 14px;
}

.social i.fa.fa-instagram {
background: #2b618f;
padding: 8px 14px;
}

.social span a:hover {
color: #fff;
}

.social {
margin: 10px;
}

.social span a {
list-style: none;
text-align: center;
display: inline-block;
margin: 0 5px;
width: 35px;
color: #fff;
height: 35px;
line-height: 35px !important;
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-webkit-transition: all 1 ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

</style>
<div class="authorinfo">
<br/>
<img src="http://1.bp.blogspot.com/-Q71Y-aFOGZw/VKAvEZQjI_I/AAAAAAAAHkk/dBuMnKJwmik/s1600/2014-12-28_17h25_40.png" />
<div class="authorname">
Małgorzata
</div>
<div class="authordesc">
Blogująca młoda mama, której pasją jest śledzenie modowych i urodowych nowinek.
</div>
<div class="social">
<span>
<a href="#" title="">
<i class="fa fa-facebook">
</i>
</a>
</span>
<span>
<a href="#" title="">
<i class="fa fa-twitter">
</i>
</a>
</span>
<span>
<a href="#" title="">
<i class="fa fa-pinterest">
</i>
</a>
</span>
<span>
<a href="#" title="">
<i class="fa fa-linkedin">
</i>
</a>
</span>
<span>
<a href="#" title="">
<i class="fa fa-youtube">
</i>
</a>
</span>
<span>
<a href="#" title="">
<i class="fa fa-google-plus">
</i>
</a>
</span>
<span>
<a href="#" title="">
<i class="fa fa-rss">
</i>
</a>
</span>
</div>
<br/>
</div>

Jak dostosować widżet?


1. Link zaznaczony na różowo zamień na bezpośredni adres do obrazka. Możesz użyć tych dowolnych teł, np.
 
Miliony ślicznych teł znajdziesz na ColourLovers.
2. Teksty zaznaczone na zielono zamień na swoje imię lub nick oraz opis.
3. # zaznaczone na turkusowo zamień na linki do swoich profili społecznościowych: Facebook, Twitter, Pinterest, Instagram, Youtube, Google+, Rss.
Czytaj dalej

2014/12/25

Okienko Facebook Like Box z własnym tłem

Jak wiadomo standardowe okienko Facebook Like Box jest bardzo nudne. Czas to zmienić i dodać do niego dowolne tło! My dodaliśmy jeszcze cień wokół ramki. Jeśli ty znasz się trochę na css, to dowolnie możesz modyfikować jego styl! Jednak my pokażemy początkującym bloggerom, jak dodać obrazek w tle.

Umieszczanie widżetu na Bloggerze

Zaloguj się do panelu admina, wejdź w menu Układ i dodaj gadżet w pasku bocznym.
Wybierz HTML/JavaScript.
W tytule możesz wpisać FB LikeBox, a do treści wklej skopiowany kod widżetu. Na koniec Zapisz.

Kod widżetu - tło w śnieżynki


<style type="text/css">
.fbOuter {
background: url(http://2.bp.blogspot.com/-2B91bOy34-Y/VJwuVTD_-zI/AAAAAAAAHVA/cz1hQZmxQto/s320/hb-pattern1.png) repeat-y;
width: 250px;
padding: 10px 0 10px 10px;
height: 250px;
border: 1px solid #CCCCCC;
-moz-box-shadow: inset 0 0 10px #5E346C;
-webkit-box-shadow: inset 0 0 10px #5E346C;
box-shadow: inset 0 0 10px #5E346C;
}
.fbInner {
height: 240px;
overflow: hidden;
}
</style>

<div class="fbOuter">
<div class="fbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblokotek&width=242&height=230&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
</div>

Dostosowywanie widżetu


  • Link zaznaczony na różowo zamień na bezpośredni adres do obrazka. Mnóstwo pięknych obrazków znajdziesz na ColourLovers
  • Tekst zaznaczony na niebiesko zamień na nazwę użytkownika strony (fanpage'a) na Facebooku.

Czytaj dalej

Strona z milionem pięknych teł - ColourLovers

Przy okazji tworzenia nowego widżetu dziś Blokotek natknął się w sieci na ciekawą stronę, zawierającą miliony pięknych teł, które możecie wykorzystać na swoich blogach. Jest to anglojęzyczna strona ColourLovers. Myślę, że warto podzielić się takim ciekawym znaleziskiem.

Strona ta nie tylko oferuje ogromny zbiór tekstur, ale i innych elementów, takich jak np. kształty oraz daje możliwość samodzielnego wyboru własnych kolorów, po kliknięciu na Color This Pattern. Możemy również tworzyć własną tapetę z dostępnych kształtów przełączając na Design a Pattern.

Czytaj dalej

2014/12/24

Zmieniające się tło po odświeżeniu strony bloga


Jak to działa?

Po wstawieniu skryptu do kodu swojej strony lub bloga, po każdym odświeżeniu strony w tle pojawi się inna - losowo wybrana ilustracja.

Demo


Jak umieścić skrypt na Bloggerze?

W panelu Admina wejdź w Szablon => Edytuj kod HTML szablonu.
Kliknij w okno edytora, wciśnij kombinację klawiszy Ctrl + F, wpisz poniższy znacznik i wciśnij Enter.
</head>
Nad wyszukanym znacznikiem wklej poniższy kod:
<script type='text/javascript'>
var banner= new Array()
banner[0]='http://1.bp.blogspot.com/-K-knNCvDWtc/VJHJtTHtvBI/AAAAAAAAGpk/q2-6HfQ8dMs/s1600/1-sebastian-boguszewicz.jpg'
banner[1]='http://2.bp.blogspot.com/-MyvNXNSqZMI/VJHJu2_OFPI/AAAAAAAAGpw/bxR9aCo58bU/s1600/10-daniel-beilinson.jpg'
banner[2]='http://3.bp.blogspot.com/-nQMHvnH0nEA/VJHJ5Ke7JQI/AAAAAAAAGqU/XrdHJA_x6W8/s1600/7-ali-inay.jpg'
banner[3]='http://2.bp.blogspot.com/-FI6wKqaxfoA/VJHJ6VmC25I/AAAAAAAAGqg/-pj1dVbhvAw/s1600/6-ales-krivec.jpg'
banner[4]='http://1.bp.blogspot.com/-KSJhQckw-sA/VJHJvW6CpCI/AAAAAAAAGp4/dK65mNX4MC8/s1600/3-bec-brown.jpg'
var random=Math.floor(5*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background-image:url("' + banner[random] + '");');
document.write(' background-attachment:fixed;' );
document.write(' background-repeat:no-repeat;' );
document.write(' background-size:100%;' );
document.write(" }");
document.write("</style>");
</script>

Na koniec Zapisz szablon.

Jak dostosować widżet?

Linki zamień na własne bezpośrednie adresy do obrazków.
Czytaj dalej

Jak założyć bloga na Weebly.com?


Z poprzedniego poradnika dowiedziałeś się, jak założyć stronę www na Weebly. Teraz czas byś poznał tajniki blogowania.

Wejdź na Weebly i zaloguj się do panelu admina. Kliknij Dodaj stronę.

Wybierz Blog.
Wybierz szablon.
Stwórz adres bloga i kliknij Kontynuuj.
Na dolnym pasku wciśnij Nowy post.
Wpisz tytuł posta. Na białe pole przeciągnij i upuść moduł Tekst. Kliknij w pole, by edytować napis.
Do formatowania tekstu możesz użyć wielu narzędzi dostępnych na pasku przybornika.
Teraz przeciągnij i upuść moduł Zdjęcie. Kliknij w pole Upload, by wgrać fotkę.
Możesz dodawać dowolne moduły do treści posta, które widnieją w lewej kolumnie. Kiedy skończysz już jego edycję, na górnym pomarańczowym pasku wciśnij POST.
Pojawi się informacja, że utworzony post nie jest jeszcze opublikowany. Kliknij Close.
By opublikować dodane posty, na górnym pomarańczowym pasku wciśnij PUBLIKUJ.
Czytaj dalej
Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.