2015/01/29

Nasz szablon dla Bloggera - Koronkowy



Jak zainstalować szablon?

Dla najlepszego efektu ustaw szablon Simple Blog z kategorii Prosty, poprzez kliknięcie Zastosuj do bloga.
Wciśnij przycisk Dodaj do Bloggera.
Wybierz blog, na którym chcesz zainstalować szablon i wciśnij przycisk Dodaj widżet.

Nagłówki


Tła

Czytaj dalej

5 przycisków udostępniania

Demo

Jak umieścić widżet na Bloggerze?

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

Kod widżetu

<style>
.social-icons a {
font-size: 18px;
line-height: 40px;
list-style: none;
display: inline-block;
text-align: center;
height: 40px;
width: 40px;
margin-right: 5px;
margin-bottom: 5px;
border-radius: 3px;
background-color: #aaa;
color: #fff;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#footer-area .social-icons a {
margin-right: 7px;
background-color: #363636;
}

.social-icons a.facebook:hover {
background-color: #4265b9 !important;
}
.social-icons a.twitter:hover {
background-color: #55ACEE !important;
}
.social-icons a.dribbble:hover {
background-color: #ea4c89 !important;
}
.social-icons a.flickr:hover {
background-color: #ff0084 !important;
}
.social-icons a.googleplus:hover {
background-color: #d62408 !important;
}
.social-icons a.skype:hover {
background-color: #0bbff2 !important;
}
.social-icons a.pinterest:hover {
background-color: #c31e26 !important;
}
.social-icons a.linkedin:hover {
background-color: #005987 !important;
}
.social-icons a.vimeo:hover {
background-color: #1bb6ec !important;
}
.social-icons a.tumblr:hover {
background-color: #35506b !important;
}
.social-icons a.youtube:hover {
background-color: #df3333 !important;
}
.social-icons a.instagram:hover {
background-color: #F95B60 !important;
}
.social-icons a.rss:hover {
background-color: #f39c12 !important;
}
</style>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<div class="social-icons">
<a href="#" class="facebook">
<i class="social_icon fa fa-facebook">
</i>
</a>
<a href="#" class="twitter">
<i class="social_icon fa fa-twitter">
</i>
</a>
<a href="#" class="googleplus">
<i class="social_icon fa fa-google-plus">
</i>
</a>
<a href="#" class="youtube">
<i class="social_icon fa fa-youtube">
</i>
</a>
<a href="#" class="pinterest">
<i class="social_icon fa fa-pinterest">
</i>
</a>
</div>

Jak dostosować widżet?

# zaznaczone na zielono zamień na linki do swoich profili społecznościowych.
Czytaj dalej

15 wysuwanych ikon społecznościowych na bloga

Demo

Jak umieścić widżet na Bloggerze?

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

Kod widżetu

<style>
#top-social, #top-custom-social {
position: relative;
float: right;
height: 40px;
margin: auto;
font-family: 'Open Sans';
font-size: 12px;
}

#top-custom-social {
margin-right: 0;
}

#top-social ul, #top-menu ul, #top-custom-social ul {
margin: 0;
}

#top-social li, #top-social li a, #top-social li .ts-icon, #top-social li .ts-text {
display: block;
position: relative;
width: 40px;
height: 40px;
}

.ts-text {
top: -40px;
left: 40px;
}

#top-social li, #top-social li a, #top-social li .ts-text {
float: left;
width: auto;
overflow: hidden;
webkit-transition: all ease-in-out .2s;
-moz-transition: all ease-in-out .2s;
-o-transition: all ease-in-out .2s;
transition: all ease-in-out .2s;
}

#top-social li a {
width: 40px;
line-height: 40px;
color: #FFF;
font-size: 12px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

#top-social li .ts-icon {
float: left;
}

#top-social li.ts-facebook a {
background-color: #3B5998;
}

#top-social li.ts-facebook .ts-icon {
background: url("http://1.bp.blogspot.com/-sG3YF1EjEHU/U3YLqeVDqJI/AAAAAAAACig/Ssh3akWMA9Y/s1600/facebook.png") no-repeat center center;
}

#top-social li.ts-twitter a {
background-color: #3CF;
}

#top-social li.ts-twitter .ts-icon {
background: url("http://2.bp.blogspot.com/-7TRieVpL0Do/U3YLygnvWlI/AAAAAAAACko/U8HXjex2JRA/s1600/twitter.png") no-repeat center center;
}

#top-social li.ts-gplus a {
background-color: #BD3518;
}

#top-social li.ts-gplus .ts-icon {
background: url("http://2.bp.blogspot.com/-J65T5DDFmGA/U3YLsQjIJ-I/AAAAAAAACjE/mzdFbksJX-8/s1600/gplus.png") no-repeat center center;
}

#top-social li.ts-dribbble a {
background-color: #D97AA5;
}

#top-social li.ts-dribbble .ts-icon {
background: url("http://3.bp.blogspot.com/-IZTTI5NPGuE/U3YLpm65MQI/AAAAAAAAClk/x9DNwmbtZsE/s1600/dribbble.png") no-repeat center center;
}

#top-social li.ts-instagram a {
background-color: #517FA4;
}

#top-social li.ts-instagram .ts-icon {
background: url("http://3.bp.blogspot.com/-sTK6n7pusaA/U3YLtWaH62I/AAAAAAAACjU/zXBZYzKbuqI/s1600/instagram.png") no-repeat center center;
}

#top-social li.ts-forrst a {
background-color: #304C25;
}

#top-social li.ts-forrst .ts-icon {
background: url("http://3.bp.blogspot.com/-zMVVSWXiAq8/U3YLr0efB5I/AAAAAAAAClk/Ps_VoktRWLQ/s1600/forrst.png") no-repeat center center;
}

#top-social li.ts-blogger a {
background-color: #FCA448;
}

#top-social li.ts-blogger .ts-icon {
background: url("http://2.bp.blogspot.com/-ApMFb_vWI0s/U3YLptPEBpI/AAAAAAAAClk/zqtb9S5Gtw4/s1600/blogger.png") no-repeat center center;
}

#top-social li.ts-flickr a {
background-color: #FF0084;
}

#top-social li.ts-flickr .ts-icon {
background: url("http://3.bp.blogspot.com/-9s6wqujYMsE/U3YLrNGyN4I/AAAAAAAACi0/U6vUdDuTJvA/s1600/flickr.png") no-repeat center center;
}

#top-social li.ts-pinterest a {
background-color: #CB2027;
}

#top-social li.ts-pinterest .ts-icon {
background: url("http://2.bp.blogspot.com/-Y3L5v5ZT57Q/U3YLw-7ggzI/AAAAAAAAClg/_0WJEBsgBlI/s1600/pinterest.png") no-repeat center center;
}

#top-social li.ts-rss a {
background-color: #F88F16;
}

#top-social li.ts-rss .ts-icon {
background: url("http://4.bp.blogspot.com/-FaS42rrnU2A/U3YLxw_AzgI/AAAAAAAAClc/5oHfu6y-nnM/s1600/rss.png") no-repeat center center;
}

#top-social li.ts-vimeo a {
background-color: #0590B8;
}

#top-social li.ts-vimeo .ts-icon {
background: url("http://1.bp.blogspot.com/-LhNTQq4s8p0/U3YLzpIcmqI/AAAAAAAACk8/w8zkVefAHA0/s1600/vimeo.png") no-repeat center center;
}

#top-social li.ts-youtube a {
background-color: #F33;
}

#top-social li.ts-youtube .ts-icon {
background: url("http://2.bp.blogspot.com/-zUxuIiep2bk/U3YL0l16H4I/AAAAAAAAClA/ec0ubzqBD50/s1600/youtube.png") no-repeat center center;
}

#top-social li.ts-phone a {
background-color: #4818AB;
}

#top-social li.ts-phone .ts-icon {
background: url("http://4.bp.blogspot.com/-p1zKbm4ZiaU/U3YLv6pbVbI/AAAAAAAACkA/nZqTlNGKz2k/s1600/phone.png") no-repeat center center;
}

#top-social li.ts-mail a {
background-color: #444;
}

#top-social li.ts-mail .ts-icon {
background: url("http://3.bp.blogspot.com/-EGkzxTyci5o/U3YLvFWPewI/AAAAAAAACjw/VuJ24asmX2I/s1600/mail.png") no-repeat center center;
}

#top-social li.ts-linkedin a {
background-color: #0A6495;
}

#top-social li.ts-linkedin .ts-icon {
background: url("http://2.bp.blogspot.com/-phqIna__rRI/U3YLuG9B9uI/AAAAAAAACj8/id10r8rmLA0/s1600/linkedin.png") no-repeat center center;
}

#top-custom-social li {
float: left;
margin: 12px 0 12px 10px;
}

#top-custom-social li:first-child {
margin-left: 0;
}

#top-custom-social li, #top-custom-social a {
display: block;
width: 16px;
height: 16px;
}

#top-social li.ts-facebook a:hover {
padding-right: 70px;
}

#top-social li.ts-twitter a:hover {
padding-right: 70px;
}

#top-social li.ts-gplus a:hover {
padding-right: 70px;
}

#top-social li.ts-dribbble a:hover {
padding-right: 70px;
}

#top-social li.ts-instagram a:hover {
padding-right: 70px;
}

#top-social li.ts-forrst a:hover {
padding-right: 70px;
}

#top-social li.ts-blogger a:hover {
padding-right: 70px;
}

#top-social li.ts-flickr a:hover {
padding-right: 70px;
}

#top-social li.ts-pinterest a:hover {
padding-right: 70px;
}

#top-social li.ts-rss a:hover {
padding-right: 70px;
}

#top-social li.ts-vimeo a:hover {
padding-right: 70px;
}

#top-social li.ts-youtube a:hover {
padding-right: 70px;
}

#top-social li.ts-phone a:hover {
padding-right: 70px;
}

#top-social li.ts-mail a:hover {
padding-right: 70px;
}

#top-social li.ts-linkedin a:hover {
padding-right: 70px;
}
</style>
<div id='top-social'>
<ul>
<li class='ts-facebook'>
<a href='#' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
Facebook
</div>
</a>
</li>
<li class='ts-twitter'>
<a href='#' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
Twitter
</div>
</a>
</li>
<li class='ts-gplus'>
<a href='#' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
Google+
</div>
</a>
</li>
<li class='ts-dribbble'>
<a href='#' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
Dribbble
</div>
</a>
</li>
<li class='ts-instagram'>
<a href='#' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
Instagram
</div>
</a>
</li>
<li class='ts-forrst'>
<a href='#' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
Forrst
</div>
</a>
</li>
<li class='ts-blogger'>
<a href='#' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
Blogger
</div>
</a>
</li>
<li class='ts-flickr'>
<a href='#' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
Flickr
</div>
</a>
</li>
<li class='ts-pinterest'>
<a href='#' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
Pinterest
</div>
</a>
</li>
<li class='ts-rss'>
<a href='#' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
RSS
</div>
</a>
</li>
<li class='ts-vimeo'>
<a href='#' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
Vimeo
</div>
</a>
</li>
<li class='ts-youtube'>
<a href='#' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
YouTube
</div>
</a>
</li>
<li class='ts-phone'>
<a href='#' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
Phone
</div>
</a>
</li>
<li class='ts-mail'>
<a href='mailto:info@mail.pl' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
Email
</div>
</a>
</li>
<li class='ts-linkedin'>
<a href='#' target='_blank'>
<div class='ts-icon'>
</div>
<div class='ts-text'>
Linkedin
</div>
</a>
</li>
</ul>
</div>

Jak dostosować widżet?

# zaznaczone na zielono zamień na linki do swoich profili społecznościowych.
Adres E-mail zaznaczony na pomarańczowo zamień na własny.
Czytaj dalej

2015/01/27

10 złotych ram na zdjęcia

W tym poście zamieszczam 10 złotych ram, które możesz wykorzystać do tworzenia własnych grafik. Posiadają one przezroczyste środki, dzięki czemu z łatwością nałożysz je na dowolne zdjęcie.










Czytaj dalej

Slider zdjęć na bloga

Na prośbę naszej czytelniczki umieszczam instrukcję i kod do slidera zdjęć, który można wstawić na każdym blogu, obsługującym własny kod HTML. Dzięki różnorodnym efektom przejścia zaobserwujesz wrażenie animacji, która sprawia, że widżet zyskuje wspaniały design.
Witaj! Dzisiaj trafiłam na Twoją stronę - jest świetna! Tyle rzeczy się dowiedziałam :) i niektóre udało mi się zastosować u siebie :) Dziękuję, robisz naprawdę dobrą robotę, zwłaszcza dla ludzi bez specjalistycznej wiedzy :) Mam jeszcze pytanko - podobają mi się przewijane propozycje postów. Jest opcja żeby to zrobić na bloggerze, czy to już wyższy level? Pozdrawiam serdecznie i życzę powodzenia w dalszych działaniach!

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.

Kod slidera

<style type="text/css">
/* http://blokotek.pl */
#sliderFrame {
position:relative;
width:700px;
margin: 0 auto 40px;
}

#slider {
width:600px;
height:306px;
/* Make it the same size as your images */
background:#fff url(http://2.bp.blogspot.com/-2IRxompbPrs/VMZkSew285I/AAAAAAAAITM/8XN-d9lD09I/s1600/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position:absolute;
border:none;
display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;
position:absolute;
top:0px;
left:0px;
border:0;
padding:0;
margin:0;
width:100%;
height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px;
bottom:15px;
z-index:3;
overflow:hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color:black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;
text-align:center;
}
div.mc-caption a {
color:#FB0;
}
div.mc-caption a:hover {
color:#DA0;
}

/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top:320px;
left:240px;
/* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
width:11px;
height:11px;
background:transparent url(http://3.bp.blogspot.com/-KTq3m5CoI4o/VMZkE3Cdr8I/AAAAAAAAITE/5T9szSHTx0E/s1600/bullet.png) no-repeat 0 0;
float:left;
overflow:hidden;
vertical-align:middle;
cursor:pointer;
margin-right:11px;
/* distance between each bullet*/
position:relative;
/*IE6 hack*/
}
div.navBulletsWrapper div.active {
background-position:0 -11px;
}

/* --------- Others ------- */
#slider
{
transform: translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
}
</style>
<script src="https://googledrive.com/host/0BzWYBwKfT2edbWdKbmpZUVAtNTg" type="text/javascript">
</script>
<div id="sliderFrame">
<div id="slider">
<a href="#">
<img src="http://3.bp.blogspot.com/-XOEZoX5PkVg/VMZitH-sG_I/AAAAAAAAISY/f6qFOptTqF4/s600/4-justin-leibow.jpg" alt="Morska fala rozbijająca się o kamienie" />
</a>
<a href="#">
<img src="http://3.bp.blogspot.com/-GMbXyIbc6_Q/VMZitCZMCpI/AAAAAAAAISc/CbEHK6q4WOg/s600/5-patryk-sobczak.jpg" alt="Mewy unoszące się w powietrzu" />
</a>
<a href="#">
<img src="http://4.bp.blogspot.com/-D6VzHZzQsb4/VMZitHluEHI/AAAAAAAAISg/NRuTq1yeXys/s600/6-israel-sundseth.jpg" alt="Wzburzone morze widoczne z plaży" />
</a>
<a href="#">
<img src="http://2.bp.blogspot.com/-jqEITccgWXU/VMZiuEXS_iI/AAAAAAAAISs/995Wkhe1gyM/s600/7-jeremy-cai.jpg" alt="Kamienie leżące nad brzegiem morza" />
</a>
<a href="#">
<img src="http://3.bp.blogspot.com/-7QsHPmknEAM/VMZiu-FpSaI/AAAAAAAAIS4/gRapEqIyAW4/s600/8-keith-misner.jpg" alt="Wzburzone fale uderzające o most"/>
</a>
</div>
</div>

Dostosowywanie slidera


  • # zaznaczony na zielono zamień na link.
  • Link zaznaczony na turkusowo zamień na bezpośredni adres do obrazka.
  • Tekst zaznaczony na pomarańczowo zamień na tytuł slajdu.
Czytaj dalej

2015/01/23

12 Walentynkowych ramek

W tym poście znajdziesz 12 ram na zdjęcia utrzymanych w Walentynkowym stylu. Posiadają one przezroczyste środki, dzięki czemu będziesz mógł nałożyć je na dowolne zdjęcie programem graficznym obsługującym pracę na warstwach.













Czytaj dalej

2015/01/21

PngImg - strona zawierająca ilustracje obiektów z przezroczystym tłem

Jeżeli chcesz stworzyć grafikę na potrzeby bloga, np. nagłówek w programie obsługującym pracę na warstwach (Photoshop, Gimp, itp.), a jesteś początkującym grafikiem - strona PngImg stworzona jest dla ciebie. Znajdziesz na niej dużą ilość gotowych obiektów z przezroczystym tłem, podzielonych na kategorie, które już zostały wycięte z obrazka tak, byś mógł od razu użyć ich do tworzenia własnych ilustracji. Poniżej prezentuję dzieła, które udało mi się stworzyć:
Gotowe elementy sprawią, że zaoszczędzisz czas i stworzysz efektowne grafiki!
Czytaj dalej

Jak umieścić czat Chatango na bloga?

Chatango jest jednym z najlepszych darmowych czatów, który można umieścić na swojej stronie ww lub blogu. Posiada on opcje moderacji oraz możliwość dostosowania koloru interfejsu. Użytkownicy mogą rozmawiać w oknie głównym, a także skorzystać z prywatnych wiadomości. W zależności od ustawień - by zapobiec spamowi - można zablokować wyświetlanie linków. Użytkownicy oprócz treści, do wyboru mają również obrazy i filmy. Dostępne animowane emotikony uprzyjemnią rozmowę, a licznik osób, które są aktualnie na czacie pozwoli zorientować się w ich ilości. Niestety jak na razie widżet dostępny jest w angielskiej wersji językowej, jednak jego obsługa jest bardzo intuicyjna i nie powinna sprawiać nikomu problemów.

By wstawić widżet na bloga, przejdź na jego stronę i kliknij Get Started.
Wybierz kolor okienka oraz rodzaj widżetu: okienko, pasek w formie karty u dołu strony lub animowany pasek z wiadomościami.
Dostosuj ustawienia czatu. Opcje objaśnione są na ilustracji poniżej.
Wpisz nazwę swojej grupy i kliknij Create Group.
Teraz kliknij Sign up, by zarejestrować się i wypełnij formularz.
Na koniec skopiuj kod widżetu, wejdź do panelu admina na Bloggerze (jeśli to tam masz bloga) => Układ = > Dodaj gadżet HTML/JavaScript i wklej go do okienka treści, na koniec Zapisz.
Gotowe! Teraz ty i twoi czytelnicy mogą rozpocząć już dyskusję!
Czytaj dalej
Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.