Menu

Jak zainstalować nie standardowe fonty z Google Fonts i pobrać je na komputer

Jak zainstalować nie standardowe fonty z Google Fonts i pobrać je na komputer


Pewnie niektórzy zauważyli, że Google Fonts zdobył nowy interfejs i teraz w trochę inny sposób będziemy instalować fonty. W tej aktualizacji pokażę Wam jak. Bonusowo na koniec, pokażę również, jak pobrać fonty z GF na swój komputer. 
Blogger oferuje 7 czcionek standardowych i internetowych (o ile dobrze naliczyłam) 86 w tym jedna
ma polskie znaki - Lobster. Nie raz ktoś chce mieć wyróżniającą się czcionkę w tytule wpisu - taką pisankę, ale nie zawiera ona polskich znaków, a bez tego wygląda to dość niechlujne. Niektóre czcionki szeryfowe czy bezszeryfowe również nie mają polskich znaków, a ładnie by się prezentowały na blogu (tak jak w moim przypadku Open Sans, który ładnie prezentuje się na stronie, ale bez polskich znaków wyglądało to tragicznie). Dlatego dzisiaj rozwiążemy nasz problem z brakiem polskich znaków i zainstalujemy nowe fonty z polskimi znakami na naszym blogu. Nie jest to takie trudne jakby się mogło wydawać - sama jak się za to zabierałam tak myślałam, a to jest dosłownie 2 minuty roboty.

1. Wchodzimy na stronę Google Fonts. Szukamy sobie fontu, który przykuł naszą uwagę i klikamy na jego nazwę (chcemy najpierw sprawdzić czy dany font ma polskie znaki). Znajdziemy się na stronie fontu i zjeżdżamy sobie niżej, aż pojawi nam się kategoria "Styles". Będzie tam rameczka "Type here to preview text", w którą wpisujemy "zażółć gęślą jaźń" - to zdanie zawiera wszystkie polskie znaki.




1a. Font bez polskich znaków. Po wpisaniu w okienko zdania "zażółć gęślą jaźń", font, który nie ma polskich znaków "zje" nam literki z ogonkami.

2. Przed instalacją musimy jednak wrócić na stronę główną i w bocznej kolumnie zaznaczyć "Latin Extended", aby nasze fonty po instalacji miały ogonki.



2a. Dobrą opcją w nowym interfejsie jest to, że możemy zainstalować 2,3 i więcej fontów na raz, ale najpierw pokażę to na jednym foncie. Na stronie głównej przy każdym foncie jest "+", przy wejściu w font mamy "select this font". Klikamy w to.



Jak widzicie po kliknięciu "+" lub "select this font", pojawi nam się taka rameczka na dole strony

Po rozwinięciu tej rameczki, pokaże nam się coś takiego:


W tej rameczce, mamy wszystkim znany kod, który musimy wkleić do szablonu.

2b. Dodawanie drugiego fontu. Aby dodać drugi font musimy wykonać wszystko z punktu 2. Wtedy na rameczce na dole zmieni nam się 1 na 2, 3, 4 - zależy ile tych fontów będziemy chcieli.


2c. Usunięcie fontu. Czasem się rozmyślamy i nie chcemy już instalować danego fontu, więc jak go usunąć z naszej rameczki? Każdy z fontów ma obok "-" - klikamy na niego i już wybranego fontu nie ma.


2d. Możemy przejść teraz do zakładki "customize" i w niej możemy wybrać opcje dla naszego fontu.


3. Instalacja fontu. Przechodzimy do szablon - edytuj kod HTML
3b. Klikamy kursorem w dowolne miejsce w kodzie i wybieramy Ctrl + f i wpisujemy <head> klikamy enter.
3c. Jak znaleźliśmy szukaną część kodu to NAD <head> wklejamy nasz skopiowany kod z pierwszego zdjęcia poniżej.

Musimy pamiętać, (już po wklejeniu kodu do szablonu) aby na końcu naszego kodu, za stylesheet" wstawić ukośnik /. Tak, jak na zdjęciu poniżej:


4. Zapisujemy szablon.

5. Teraz przechodzimy do projektanta szablonów - zaawansowane - dodaj arkusz CSS i wpisujemy kody na poszczególne elementy naszego bloga, wraz z nazwą czcionki.



Tytuł wpisu 

h3.post-title {font-family:  NAZWA CZCIONKI;}

Nagłówek z datą

.date-header span{font-family: NAZWA CZCIONKI;}

Nagłówki gadżetów

.sidebar .widget h2 {font-family: NAZWA CZCIONKI;}

Tekst wpisu i stopki wpisu

#Blog1 {font-family: NAZWA CZCIONKI;}

Tekst w kolumnie bocznej prawej

.column-right-inner {font-family: NAZWA CZCIONKI;}

Tekst w kolumnie bocznej lewej

.column-right-inner {font-family: NAZWA CZCIONKI;}

Pobieranie fontów na komputer


Wykonujemy wszystko z punktu 2a, a następnie klikamy strzałeczkę pobierania. Można pobrać więcej niż jeden font jednocześnie.

Czytaj dalej

Jak edytować wygląd archiwum - styl hierarchia

Jak edytować wygląd archiwum - styl hierarchia


Pisałam już kiedyś o tym jak edytować wygląd archiwum - styl menu. Na Bloggerze oprócz stylu menu, mamy również dwa inne style jak np. hierarchia i lista. Dziś skupimy się nad edytowaniem wyglądu archiwum w stylu hierarchia. Wszystko będzie opierać się na kodach CSS, więc nie powinno sprawiać Wam to problemu. 

1. Każdy powinien mieć już swoje archiwum w układzie bloga i opcjonalnie zawsze jest ono ustawione jako hierarchia, ale jeśli mamy inaczej to przechodzimy do układ - szukamy gadżetu archiwum bloga - edytuj - hierarchia - zapisz. 


2. Kiedy już mamy to wszystko ustawione, przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy poniższy kod: 

.post-count, .post-count-link {
font-weight: 700;
font-family: Open Sans;
letter-spacing: 1px;
font-size: 14px;
color: #444;}
.archivedate {text-transform: uppercase;}
.archivedate a:link {color: #eb7c96;}
.widget .zippy {
color: #eb7c96;
text-shadow: none;
}

Analiza kodu: 

.post-count, .post-count-link {
font-weight: 700;
font-family: Open Sans;
letter-spacing: 1px;
font-size: 14px;}
.archivedate {text-transform: uppercase;}
.archivedate a:link {color: #eb7c96;}
.widget .zippy {
color: #eb7c96;
text-shadow: none;}

MIESIĄC I ROK 

Pogrubienie (można ustawić od 400 do 700 - im większa liczba tym grubsze) 
Rodzaj fontu 
Odstęp między literami 
Wielkość fontu 

MIESIĄC I TYTUŁY WPISÓW

Drukowane litery 

LINKI 

Kolor linków 

STRZAŁECZKI 

kolor strzałeczek
brak cienia

Efekt: 



Czytaj dalej

Szablon Summer Time do pobrania na Bloggera za darmo

Szablon Summer Time do pobrania na Bloggera za darmo


Szablon Summer Time to darmowy szablon na Bloggera. Jest utrzymany w letniej kolorystyce, w odcieniach różu i żółci. Bez problemu dostosujesz go do swoim potrzeb po przez zmianę koloru, a nawet fontów. Do szablonu dodana jest instrukcja instalacji - znajdziesz tam wszystko co potrzebne, co, gdzie i jak.

Info o szablonie


  • Szablon zawiera automatyczne skracanie wpisów 
  • Zdjęcia we wpisie oraz w gadżecie "o mnie" dopasowują się automatycznie. 
  • Menu na stronie, to standardowe strony Bloggera - dzięki temu ich edycja jest bardzo prosta.
  • Możne zmienić kolory, fonty etc.
  • Dodana instrukcja do szablonu 

Uwagi 


  • Szablon oraz grafiki dodawane do szablonu są tylko i wyłącznie na użytek własny. Udostępnianie szablonu osobom trzecim w postaci oryginalnej lub zmienionej jest zabronione.
  • Szablon posiada nieusuwalną stopkę z podpisem autora. Po usunięciu jej, zostaniesz automatycznie przeniesiony na stronę demo szablonu. 
  • Nie wolno modyfikować wyglądu stopki tzn. zmieniać jej koloru tak, aby nie była widoczna i podpisywać się pod szablonem jako autor 
  • W razie jakichkolwiek problemów/pytań napisz na maila blonparia@gmail.com
  • Nie proś osób trzecich o pomoc przy szablonie w razie powstania problemu - istnieje ryzyko, że dana osoba źle podejdzie do Waszego problemu, a wtedy szablon może zostać uszkodzony lub całkowicie zniknąć z bloga. Pamiętaj! Zawsze zwracaj się z prośbą o pomoc do autora szablonu 

To może Ci się przydać 




Chcesz indywidualny szablon?


Zawsze możesz zamówić szablon, jeśli te, które udostępniam do pobrania Ci nie odpowiadają. Wystarczy, że zajrzysz na TĄ stronę.
Pobierz Podgląd
Czytaj dalej

Jak zrobić kalendarz wpisów na Bloggerze

Jak zrobić kalendarz wpisów na Bloggerze


Mam dla Was niespodziankę - nie będzie tutaj żadnego grzebania w kodzie, będzie tutaj tylko HTML/JavaScript i CSS. Wydaje się to za proste? No co mogę powiedzieć, są rzeczy, które nie wymagają grzebania w kodzie, ale jak się bardzo chce to można, jednak ja staram się Wam przedstawić jak najprostsze rozwiązania.

Co najpierw musimy zrobić? Musimy przejść do układ - dodaj gadżet - HTML/JavaScript i dodać taki kod:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<div id="my-calendar">
    </div>
<script type="text/javascript">
// global varables
    today        = moment().format("YYYY-MM-DD");
    selectedDate = moment(new Date());
drawCalendar(selectedDate);
    reloadData();
function loadCalendar(json) {
        // Get total posts
        var totalposts = json.feed.openSearch$totalResults.$t;
console.log("tutaj");
console.log(json.feed.entry);
        for (var i = 0; i < totalposts; i++) {
            var posturl;
            // Get rel=alternate for truly post url
            for (var j = 0; j < json.feed.entry[i].link.length; j++) {
                if (json.feed.entry[i].link[j].rel == 'alternate') {
                    posturl = json.feed.entry[i].link[j].href;
                    break;
                }
            }
            var poststitle = json.feed.entry[i].title.$t;
            var published = json.feed.entry[i].published.$t;
            var elementId = published.substr(0, 10);
            // console.log('elementId:' + elementId);
            var dayElement = document.getElementById(elementId);
            if (dayElement !== null) {
                var dayNumber = dayElement.innerHTML;
                dayElement.innerHTML = '<a href="' + posturl + '" title="' + poststitle + '">' + dayNumber + '</a>';
            } else {
                //console.log('elementId '+elementId+' not found in DOM.');
            }
        }
    }
    function reloadData() {
        var format = 'YYYY-MM-DDT00:00:00';
        var startDate = selectedDate.clone().startOf('month').format(format);
        var endDate = selectedDate.clone().endOf('month').format(format);
        var blogID = "ID NASZEGO BLOGA";
        var url = "http://www.blogger.com/feeds/" + blogID + "/posts/default?alt=json-in-script"
        url += "&callback=loadCalendar";
        url += "&published-min=" + startDate;
        url += "&published-max=" + endDate;
        var my_awesome_script = document.createElement('script');
        my_awesome_script.setAttribute('src', url);
        document.head.appendChild(my_awesome_script);
    }
    function previousMonth() {
        selectedDate.subtract(1, 'months');
        drawCalendar(selectedDate);
        reloadData();
    }
    function nextMonth() {
        selectedDate.add(1, 'months');
        drawCalendar(selectedDate);
        reloadData();
    }
    function drawCalendar(todayDate) {
            <!-- Begin
            monthnames = new Array(
                "Styczeń",
                "Luty",
                "Marzec",
                "Kwiecień",
                "Maj",
                "Czerwiec",
                "Lipiec",
                "Sierpień",
                "Wrzesień",
                "Październik",
                "Listopad",
                "Grudzień");
            monthdays = new Array(12);
            monthdays[0] = 31;
            monthdays[1] = 28;
            monthdays[2] = 31;
            monthdays[3] = 30;
            monthdays[4] = 31;
            monthdays[5] = 30;
            monthdays[6] = 31;
            monthdays[7] = 31;
            monthdays[8] = 30;
            monthdays[9] = 31;
            monthdays[10] = 30;
            monthdays[11] = 31;
            // todayDate = new Date();
            thisday = todayDate.day(); //getDay();
            thismonth = todayDate.month(); //getMonth();
            thisdate = todayDate.date();//getDate();
            thisyear = todayDate.year();//getYear();
            thisyear = thisyear % 100;
            thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
            if (((thisyear % 4 == 0) && !(thisyear % 100 == 0)) || (thisyear % 400 == 0)) monthdays[1]++;
            startspaces = thisdate;
            while (startspaces > 7) startspaces -= 7;
            startspaces = thisday - startspaces; // + 1; // start from monday
            if (startspaces < 0) startspaces += 7;
            document.getElementById('my-calendar').innerHTML = ""; // reset
            var anchorPrev = document.createElement('a');
            anchorPrev.setAttribute('class', 'my-previous-month');
            anchorPrev.setAttribute('href', 'javascript:previousMonth()' );// ?
            anchorPrev.textContent = "<";
            document.getElementById('my-calendar').appendChild(anchorPrev);
            if (moment().isAfter(selectedDate.endOf("month"))) {
                var anchorPrev = document.createElement('a');
                anchorPrev.setAttribute('class', 'my-next-month');
                anchorPrev.setAttribute('href', 'javascript:nextMonth()' );// ?
                anchorPrev.textContent = ">";
                document.getElementById('my-calendar').appendChild(anchorPrev);
            }
            var html = document.getElementById('my-calendar').innerHTML;
            html += "<h2><center>" + monthnames[thismonth] + " " + thisyear + "</center></h2>";
            html += "<table width='100%' border=2>";
            html += "<tr>";
            html += "<th><span>Pn</span></th>";
            html += "<th><span>Wt</span></th>";
            html += "<th><span>Śr</span></th>";
            html += "<th><span>Cz</span></th>";
            html += "<th><span>Pt</span></th>";
            html += "<th><span>Sob</span></th>";
            html += "<th><span>Nd</span></th>";
            html += "</tr>";
            html += "<tr>";
            if (startspaces > 0) {
                html += "<td colspan="+startspaces+"> </td>";
            }
            // for (s = 0; s < startspaces; s++) {
            //     html += "<td> </td>";
            // }
            count = 1;
            while (count <= monthdays[thismonth]) {
                for (b = startspaces; b < 7; b++) {
                    var elementId = thisyear;
                    elementId += "-" + (((thismonth + 1) < 10) ? "0" + (thismonth + 1) : (thismonth + 1));
                    elementId += "-" + ((count < 10) ? "0" + count : count);
                    var classesName = (today == elementId) ? "today" : "";
                    html += '<td id="' + elementId + '" class="'+classesName+'"><span>';
                    if (today == elementId) {
                        html += "<strong>";
                    }
                    if (count <= monthdays[thismonth]) {
                        html += count;
                    } else {
                        html += " ";
                    }
                    if (today == elementId) {
                        html += "</strong>";
                    }
               
                    html += "</span></td>";
                    count++;
                }
                html += "</tr>";
                html += "<tr>";
                startspaces = 0;
            }
            html += "</table></p>";
            document.getElementById('my-calendar').innerHTML = html;
        }
        // End -->
    </script>

Jak widzicie w tym kodzie musimy uzupełnić tylko jedno miejsce, naszym ID bloga. Jak nasze ID znaleźć? Wystarczy wejść chociażby w zakładkę "przegląd" i skopiować ostatnie cyferki.



Dodawanie kodu CSS. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy tam taki kod:
/* Calender
------------------------------------*/
#my-calendar {
padding: 20px;
}
#my-calendar .my-previous-month {
margin-top: 10px;
text-align: center;
font-size: 30px;
display: block;
width: 160px;
height: 40px;
line-height: 40px;
float: left;
border: 2px solid #E9EAEe;
}
#my-calendar .my-next-month {
margin-top: 20px;
text-align: center;
font-size: 30px;
display: block;
width: 160px;
height: 40px;
line-height: 40px;
float: right;
border: 2px solid #E9EAEe;
}
#my-calendar a {
font-weight: 800;
color: #eb7c96;
text-decoration: none;
}
#my-calendar table {
font-size: 12px;
table-layout: fixed;
border-collapse: collapse;
background: #fff;
}
#my-calendar table, #my-calendar table th, #my-calendar table td {
border: 2px solid #E9EAEe;
}
#my-calendar table tr {
color: #444;
text-align: center;
}
#my-calendar table tr td.today {
border: 4px solid #8f778a;
}
#my-calendar table tr td span, #my-calendar table th span {
display: block;
line-height: 40px;
background: #fff;
}
#my-calendar table a {
color: #eb7c96;
text-decoration: none;
}

Wszystkie pogrubione (i kolorowe) wartości są zmienne

  • Marginesy wewnętrzne
  • Górny margines naszego przycisku "następny miesiąc" 
  • Położenie strzałki (środek, lewa strona, prawa strona)
  • Wielkość strzałki
  • Długość przycisku
  • Wysokość przycisku
  • Położenie strzałki (góra, dół) 
  • Położenie całego przycisku (ramka + strzałka - lewa strona, prawa strona, środek) 
  • Grubość, rodzaj i kolor ramki ze strzałką 
  • Górny margines przycisku "powrót do poprzedniego miesiąca" 
  • Położenie strzałki (środek, lewa strona, prawa strona)
  • Wielkość strzałki
  • Długość przycisku 
  • Wysokość przycisku
  • Położenie strzałki (góra, dół) 
  • Położenie całego przycisku (ramka + strzałka - lewa strona, prawa strona, środek) 
  • Grubość, rodzaj i kolor ramki ze strzałką 
  • Grubość strzałek
  • Kolor strzałek
  • Wielkość fontu (daty, dni tygodnia)
  • Kolor tła
  • Grubość, rodzaj i kolor tabeli 
  • Kolor fontu - dni tygodnia, daty 
  • Położenie dat i dni tygodnia (środek, lewa strona, prawa strona)
  • Obramowanie danej daty - grubość, rodzaj i kolor (obramowuje datę, która jest w danym dniu)  
  • Ustalenie wielkości tabeli (szersza, węższa)
  • Kolor tła (same okienka)
  • Kolor daty z dodanym wpisem 
To wszystko co musimy zrobić. Nie musimy usuwać obecnego archiwum - możemy mieć tak jak jest to na WordPressie czyli archiwum + kalendarz wpisów. 
Czytaj dalej
Subskrybuj: Posty (Atom)

Copyright © Twórczy notatnik