Blogger Skrypt: css

Pokazywanie postów oznaczonych etykietą css. Pokaż wszystkie posty

Snow - Spadający śnieg na stronę

Dzisiaj przedstawię wam jak zrobić prosty śnieg na bloga stronę za pomocą CSS.
Wydaje się on szczególnie atrakcyjny, ponieważ nie wymaga skryptów, tylko CSS oraz trzech małych obrazków. Zaletą tej metody jest to, że nie przeciążać bloga używając skryptów, wadą jest to, że użytkownicy nie tak nowoczesnych przeglądarek, nie będą w stanie go zobaczyć (w Internet Explorer w wersji 10 działa i do góry).

Śnieg spada w tle bloga, który dodatkowo zapobiega kolizji z linkami lub treściami (bo płatki są zdjęciami), a także zapobiega blokowaniu widoczność zawartości bloga.

Jak dodać spadający śnieg na bloga

DEMO BLOGA FALLING SNOW

Krok 1. Wejdź w szablon - edytuj kod HTML

Krok 2. Teraz odnajdź <b:skin> ... </b:skin> tak jak poniżej na obrazku i kliknij w widoczne kropki, aż rozwinie się lista.

Krok 3. dodaj kod powyżej ]]></b:skin>

/* Snow falling for Blogger
----------------------------------------------- */

@keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;}100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-moz-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;}100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-webkit-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;}100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-ms-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;}100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
#falling-snow {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLe4QhXCN9bgBK4zOmeYTmDk4bbDadL2CQGg0_N3fhUU60Fe2RWCabDkFmCsXiDck-zPr_uIgThmNWOhJQBCRQRPCWnjHoOESbXo2b9F924RFq6F1mhEg51p8GQgDlBwQrJe7lr3jQaNLc/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPDBrKUSSZc7jAVbve1HkqNsCTmcfY2AL46h45Cxwcdw9qmtbXV-ZwHGmwsm2fGXWa5_Xl-nQkCiVfJbnx0MUt4ACFlKj8fdqzSE8t69wkAHCrff_Y_0-OT-sRW7RBtM5mmNyTHs-8oDzj/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit8D-ikkDnwJznifAsrscwdW_MZBf03DuGu7B7ruf7OrwIXcEVcvIJPEjWdWLnuK-EIZvi6JwbrEkDC9mYLy2WuRpPF2jGiCTtRguWHzKI9f071Sm4mcrqltPWqTfYm-FK6SD7S0i26EGM/s1600/snow2.png);-webkit-animation: snow 20s linear infinite;-moz-animation: snow 20s linear infinite;-ms-animation: snow 20s linear infinite;animation: snow 20s linear infinite;}

Krok 4. Znajdź w polu wyszukiwania search blogger <body> tag, jeśli nie możesz go znaleźć użyj poniższego tagu:

<body expr:class='"loading" + data:blog.mobileClass'>

i dodaj ten kod poniżej:

<div id='falling-snow'>

Krok 5. Teraz wyszukaj </body> tag i wklej tuż nad nim kod:

</div>

Krok 6. Zapisz szablon i ciesz się śniegiem ! :)

>>> click below for THANKS <<<

Czytaj dalej »

Tworzenie obrazu z Slider CSS miniatur dla Bloggera

Galerie zdjęć są szczególnie przydatne do fotoblogów, ale mogą również służyć tym, którym od czasu do czasu potrzeba takiego gadżetu.

Jak widzieliśmy w poprzednim poradniku na wierzchu bloku mieliśmy małe miniaturki, które zostały rozszerzone na dole każdorazowo, gdy obraz został wybrany.

Różnica polega na tym, że nie trzeba było kliknąć na miniaturę, aby pokazać większą wersję i że zostało nabyte z JavaScript. Tym razem będzie używać tylko, hover i CSS. DEMO

Jak dodać suwak miniatur obrazów CSS na Bloggera

Krok 1. Zaloguj się na pulpicie nawigacyjnym Bloggera i przejdź do szablonu> Edytuj kod HTML

Krok 2. Kliknij w dowolnym miejscu wewnątrz obszaru kodu i nacisnąć klawisze CTRL + F, aby otworzyć okno wyszukiwarki Bloggera

Krok 3. Wklej </ head> wewnątrz pola wyszukiwania i naciśnij Enter.

Krok 4. Tuż nad </ head> dodaj ten kod:

<style type='text/css'>
.image-container {
position: relative;
width: 640px;
height: 530px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.image-container a {
display: inline;
text-decoration: none;
}
/* Mini-thumbnails style */ .mini-thumbnail {
width: 18%; /* mini-thumbnails width */ margin:1px;
opacity: 1;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
/* Style for the main thumbnail */ .large-thumbnail {
position: absolute;
width: 100%;
top: 800px;
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
.feature {
top: 110px;
width: 100%;
opacity: .3;
}
/* style for the selected mini-thumbnail */ a:hover .mini-thumbnail {
opacity: .5;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
/* transition effects for the selected image */ a:hover .large-thumbnail {
top: 110px;
width: 100%;
z-index:3;
opacity: 1;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
</style>

Tutaj możemy ustawić określoną wysokość ( height 530px ) i szerokości ( wight 640px ), tak, że możemy przesuwać obraz na granicach ramki i czy mają być ukryte (overflow: hidden);

Pozycjonowanie bezwzględne na większe miniatury ( .large-thumbnail ) ściąga je i umieszcza je w miejscu, które wybrałeś przy użyciu wartości 800px na najwyższym rozmiarze.
Mini-miniaturki, które są w rzeczywistości drugim obrazem pozostają cały czas powyżej w pozycji statycznej i są zmieniane tylko nieznacznie pod względem stylu do rozróżnienia aktywnego (: hover .mini-miniatur), po najechaniu myszką.

Krok 5. Zapisz zmiany klikając na przycisk Zapisz szablon. I wreszcie, musimy dodać kod.

Krok 6. Wklej poniżej strukturę HTML, w której chcesz, wyświetlić galerię przechodząc albo w układ i dodać nowy gadżet (kliknij Dodaj link gadżetu i wybierz HTML / JavaScript ), lub wewnątrz postu lub strony w sekcji HTML.

i wklej ten kod:

<div class="image-container">
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL1" />
<img class="large-thumbnail" src="LARGE-THUMB-URL1" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL2" />
<img class="large-thumbnail" src="LARGE-THUMB-URL2" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL3" />
<img class="large-thumbnail" src="LARGE-THUMB-URL3" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL4" />
<img class="large-thumbnail" src="LARGE-THUMB-URL4" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL5" />
<img class="large-thumbnail" src="LARGE-THUMB-URL5" />
</a>
<a href="javascript:void(0);">
<img class="large-thumbnail feature" src="LARGE-THUMB-URL1" />
</a>
</div>

W tym przykładzie wyszliśmy link pusty (javascript: void (0);), ale można dodać jeden, jeśli chcesz - wystarczy wymienić javascript: void (0); z URL strony / postu. Aby dodać fotki wewnątrz suwaka obrazu wystarczy wymienić MINI-thumb-URL i LARGE-THUMB-URL na teksty z adresem URL obrazów.

Uwaga: Ostatnia LARGE-THUMB-URL1 należy zastąpić URL domyślnego obrazu, który pojawi się tam gdzie suwak.

Czytaj dalej »

Jak dodać galerię miniatur obrazów / zdjęć w Bloggerze

Dla tych, którzy chcieliby, zobaczyć zdjęcie w galerii, mam galerię wykonaną w JavaScript i CSS. Ta galeria zdjęć wyświetla dostępne miniatury pionowo lub poziomo na górze wybranego obrazu, dzięki czemu łatwiej jest wybrać różne obrazy.

Jak dodać galerię z miniaturami do Bloggera?

Krok 1. Zaloguj się na konto Bloggera, wybierz bloga i przejdź do edycji HTML szablon >

Krok 2. kliknij w dowolnym miejscu wewnątrz obszaru kodu i nacisnąć klawisze CTRL + F, aby otworzyć okno wyszukiwarki:

Krok 3. Wpisz następujące tag wewnątrz pola wyszukiwania i naciśnij Enter, aby go znaleźć:

</head>

Krok 4. Teraz wybierz jeden z poniższych stylów i skopiuj kod poniżej niego:

Styl 1

<style type='text/css'>
#image-gallery {display: none;}
#jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}
#jquery-gallery li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}
#jquery-gallery li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;}
#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption { position: absolute;color: #000;font-weight: bold;background: #FFFFFF; font-size: 16px; bottom: 0px;} </style>

Styl 2

<style type='text/css'>
#image-gallery { display: none; }
#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }
#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }
#jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }
#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption { position: absolute; right: 50px;color: #000;background: #FFFFFF;font-weight: bold; font-size: 16px; top: 0px;} </style>

Uwaga: display: none; pierwszego ID (# image-gallery) jest zapobieganie by obrazy pojawiające się w ich rzeczywistej wielkości, zanim pójdą wewnątrz ramy galerii, podczas ładowania kodu. W # jquery-gallery ustalona jest szerokość miniaturek (200px), tak, aby były one wyświetlane w dwóch rzędach i musimy liczyć się z szerokością miniatury (80px) plus margines między nimi.Opuścił deklaracja # jquery-galerii li img jest przeniesienie większej miniaturę, który pokazuje się poprzez kliknięcie myszy tak, że nie będzie się pokrywać z mniejszymi miniaturkami.

Krok 5. Wklej kod wybranego stylu tuż nad </ head> tag.

Krok 6. Teraz nad tym samym </ head>, dodać ten skrypt:

<script type='text/javascript'>
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
document.getElementById('gallery-caption').innerHTML = this.title; });
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
//]]>
</script>

Przede wszystkim, co robi ten skrypt, czy istnieje identyfikator o nazwie "image-gallery" i jak uzyskać różne elementy listy, które mogą znajdować się w niej. Elementy te zostaną wyświetlone w formie miniatur, a funkcja będzie decydować, co zrobić, gdy są one aktywne. Tak, że za każdym razem klikając na miniaturkę, "aktywną" klasy zostaną przypisane i miniatur powinny być widoczne w większej ramce.

Krok 7. Wreszcie, zapisz zmiany klikając przycisk "Zapisz szablon". A oto kod HTML zapewnienie normalnego listę z galerii obrazu ID, zamknięty w DIV o względnej pozycji, tak, że będzie uniknąć skutków ubocznych innych już istniejących stanowisk.

Krok 8. wklej poniższy kod HTML, w którym chcesz, aby wyświetlić galerię przechodząc albo układ i dodanie nowego gadżetu (kliknij na układ > Dodaj gadżet i wybierz HTML / JavaScript), lub wklej wewnątrz postu / stronie w sekcji HTML poniższy kod.

<div style="position:relative;">
<ul id="image-gallery">
<li><img src="IMAGE-URL1" /></li>
<li><img src="IMAGE-URL2" /></li>
<li><img src="IMAGE-URL3" /></li>
<li><img src="IMAGE-URL4" /></li>
<li><img src="IMAGE-URL5" /></li>
</ul>
</div>

Uwaga: jeśli elementy na stronie pokrywania się w galerii, może być konieczne, aby dodać deklarację wysokość po "position: relative;"

<div style="position:relative; height: 500px;">

Zmiana IMAGE-URL1 na adres URL obrazu.

W tym przypadku trzeba dodawać linki do zdjęć, aby dodać tę strukturę HTML:

<div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL5" /></a></li>
</ul>
</div>

Ponownie, tutaj trzeba zastąpić tekst strona-URL z adresem URL strony / postu.

Aktualizacja: Aby dodać napisy, proszę pomarańczowe linie zastąpić "Caption" na tekst który ma się pojawić na wybranym zdjęciu :

<div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL5" /></a></li>
</ul>
<div id="gallery-caption"></div> </div>

Zapisz widget lub opublikuj swoją stronę i gotowe!

Czytaj dalej »

Jak za pomocą FIREBUG zaprojektować blogger

Dla większości blogerów, grzebanie w szablonie bloggera lub jego dodatkach jest kłopotliwe i dla początkującego użytkownika jest to katorga. HTML5, CSS i inne elementy kodowania są ich własnym językiem dla przeciętnego użytkownika Blogger który chce zaktualizować sobie prywatnie bloga, z automatycznymi ustawieniami są tak dobre, że nie wie jak to się robi. Co zrobić, jeśli nie ma lepszego sposobu, aby zakodować bloga, czy jesteś początkującym lub pro użytkownikiem blogger, wszystko możesz wykonać w tej samej przeglądarce?

Jeśli używasz przeglądarki Firefox lub Chrome, to powinno być łatwe z pomocą Firebug. To pozwala kodować swoją stronę w czasie rzeczywistym, dzięki czemu można zmaksymalizować UX bloga.

Już nie musisz Edytować Przez Bloggera!

Jeśli kiedykolwiek próbowałeś zaktualizować temat Bloggera przez funkcje edycji na stronie internetowej, to wiesz, jak trudne może to być. Możesz obejrzeć swoje projekty, ale nie możesz zapisać zmiany, aby zobaczyć, co oficjalnie stanie się z witryną, aż publikujesz zmiany. Jeśli brakowało tylko jednej linii kodu lub zapomniany został jedynie niewielki element, będziesz musiał wrócić do matrycy edycji, znaleźć błąd, zaktualizować go ponownie, i powtarzać wykonywane czynności od początku.

Co Firebug pozwala zrobić, to zobaczyć wszystkie z tych elementów, które składają się na strone internetową w czasie rzeczywistym. Zamiast edycji i publikacji, można edytować w czasie rzeczywistym i zobaczyć aktualizacje na bieżąco, a wszystko to bez wpływu na doświadczenie użytkowników odwiedzających, którzy odwiedzają witrynę, podczas edytowania. Szybko można zmienić czcionki, kolory, lub projekt witryny i zobaczyć wyniki swojej pracy. Nie podoba ci się? Wystarczy cofnąć zmiany.

To naprawdę takie proste.

Korzystanie z Firebug Dostosowując CSS w Bloggerze

Ten poradnik pokaże Ci, jak zmodyfikować kod CSS szablonu Blogger. Zazwyczaj, deklaracje stylów CSS Blogger Template są edytowalne przez plik style.css, czyli to co możesz znaleźć między tagami <b: skin> i </ b: skin> .

Aby pobrać Firebug i uzyskać więcej szczegółów dotyczących zaawansowanych funkcji, odwiedź: Firebug dla Firefoksa lub jeśli używasz Chrome, pobierz aplikację Firebug Lite. Polecam używać Firefox, który jest bardziej kompletny i szybki, ale jednak, oba działają tak samo.

Po zainstalowaniu Firebug, dostępna będzie mała ikona w prawym górnym rogu paska adresu przeglądarki internetowej. Kliknięcie na nią podzieli poziomo ekran, pojawi się na dole okna przeglądarki. Strona nadal będzie pokazywała się w górnej połowie, a dolna połowa pokaże HTML bieżącej strony internetowej.

Aby dostosować każdy element z szablonu Blogger, wystarczy kliknąć albo na ikonę Firebug na pasku narzędzi lub "Sprawdź Element z Firebug" pozycji w menu kontekstowym. Następnie kliknij niebieski przycisk kursora do wglądu i umieścić kursor nad elementem, aby dostosować.

Na przykład, powiedzmy, że chcemy zmienić tytuł "Blog Archive" gadżetu. Po kliknięciu na przycisk myszy da nam wgląd na tytuł "Blog Archive" , który zostanie podświetlony, jak pokazano na poniższym zrzucie ekranu. Aby zmienić ten element, kliknij na niego:

Teraz, zdecydowaliśmy, który element chcemy zmienić, kliknij prawym przyciskiem na panelu "Style" i wybrać opcję "add rule":

To daje klasę lub identyfikator elementu wyróżnionego - w naszym przypadku, nagłówek blogu Archiwum (# BlogArchive1> h2). Aby edytować tę regułę, kliknij w dowolnym miejscu w pobliżu nawiasu klamrowego, w którym zostanie otwarte pole tekstowe, także możemy wpisać nową deklarację CSS:

I tu zaczyna się zabawa. Powiedzmy, że chcemy, aby był czerwony tytułu. Wpisz kolor i naciśnij klawisz Enter, a następnie wpisz wartość koloru lub czerwony tekst i naciśnij Enter. Możesz również ustawiać rozmiar czcionki na 20 pikseli, wyrównanie tekstu do centrum (text-align: center) i zrobić tekst podkreślony (text-decoration: underline):

Świetną rzeczą jest to, że nigdy Firebug modyfikuje żadnych właściwości CSS, można zobaczyć wyniki bezpośrednio stosowane na stronie. Tak więc, po dodaniu tych deklaracji, zobaczymy duży czerwony podkreślnik dla tytułu naszego Blog Archive (zobacz na zrzucie ekranu powyżej). Aby zastosować tę regułę CSS szablonu Blogger, wystarczy ją wybrać począwszy od prawego wspornika i kręcone do # (id) lub (class) symbol, a następnie kliknij prawym przyciskiem myszy i skopiować kod CSS.

Przed dokonaniem jakichkolwiek zmian, zaleca się, aby zrobić kopię zapasową bieżącego szablonu bloggera. Przejdź do "ustawienia > inne" i kliknij przycisk "eksportuj bloga".

W tym samym miejscu "Szablon", kliknij na przycisk "Dostosuj" i przejdź do "Zaawansowane"> "Dodaj CSS". Wklej regułę CSS, który właśnie został skopiowana w polu CSS:

Kliknij przycisk "Zastosuj do bloga" w prawym górnym rogu, aby zapisać zmiany i zobaczyć swój blog.

Firebug daje także wyraźną przewagę ...

Jednym z najlepszych powodów, aby zainstalować Firebug do przeglądarki Chrome lub Firefox jest to, że pozwala naśladować niektóre wzory szybko i łatwo z Twoich ulubionych stron . Zamiast zatrudniania projektanta witryn internetowych do pracy, które mogą kosztować tysiące, można po prostu uruchomić Firebug i zobaczyć, co są style CSS dla ulubionej witryny. Pozwala to na stworzenie podobnego widget. Stamtąd, można zobaczyć wszystko co masz zrobić, aby zmienić kodowanie, aby elementy konstrukcyjne pracowały zgodnie z przepisami własnego custom.css. Oznacza to, że można dokonać prostych zmian w projekcie na swoim blogu Blogger, bez konieczności przechodzenia przez wszystkie menu i funkcje edycji, że szablon może naprawdę może być własny wg własnego upodobania. Czy masz coś do zrobienia? Pewnie - ale Firebug to wszystko dla pierwotnej pracy w sam raz dla Ciebie. Wszystko co musisz zrobić, to mieć twórczy umysł i kilka minut do wprowadzania zmian w konstrukcji kodującej. Czy kodujesz od lat czy dopiero zaczynasz swojego pierwszego bloga, jest to zdecydowanie najlepszy sposób, aby upewnić się, że użytkownicy firebug mają najlepsze doświadczenia !

Czytaj dalej »

Zmiana rozmiaru miniatur dla Widgetu Popularne Posty

Kiedy dodajesz widget na Bloggerze, miniatury zachowują domyślny rozmiar 72 x 72px, który może nie wyglądać za dobrze, postaramy się je powiększyć przy użyciu CSS. Jednak przy odrobinie JavaScript będziemy mogli zastąpić miniatury z tego samego obrazu w wyższej rozdzielczości i w ten sposób będą większe obrazy i nie będą wyświetlane rozmyte. W tym tutorialu zobaczymy jak możemy zastąpić domyślny rozmiar miniatur widgetu popularnych postów.

Zmiana rozmiaru miniatur dla Widgetu Popularne Posty

Krok 1. Najpierw dodaj gadżet Popularne posty przechodząc do Układ > kliknij na link Dodaj gadżet i wybierz Popularne Wiadomości z okna popup.

Krok 2. Następnie przejdź do Szablon > kliknij na przycisk Edytuj HTML > kliknij w dowolnym miejscu wewnątrz obszaru kodu i naciśnij klawisze CTRL + F, aby otworzyć okno wyszukiwarki Bloggera.

Krok 3. Wpisz lub wklej następujący tag wewnątrz pole wyszukiwania, a następnie naciśnij klawisz Enter, aby go znaleźć:

</head>

Po znalezieniu </ head>, dodaj CSS nad nim:

<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 130px;
margin: 0 0px 5px;
overflow: hidden;
width: 210px;
border: 2px solid #EEEEEE;
border-radius: 20px;
}
.PopularPosts .item-thumbnail img {
position: relative;
top: -30px;
transition:all .2s linear;
-o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.PopularPosts .item-thumbnail img:hover{
opacity:.6;
filter:alpha(opacity=60)
}
.PopularPosts .widget-content ul li {
background: #F9F9F9;
border: 2px solid #EEEEEE;
border-radius: 10px;
box-shadow: 0 4px 10px #EEEEEE;
color: #555555;
padding: 10px;
margin-bottom: 5px;
}
.PopularPosts .item-title {
clear: both font: 14px Cambria,Georgia, sans-serif;
color: #2288BB;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.PopularPosts .item-snippet {
display: none;
}
.widget .widget-item-control a img {
height: 18px;
width: 18px;
}
</style>

Krok 4. Teraz szukać tego tagu:

</body>

... I tuż nad nim, dodać ten skrypt:

<script type='text/javascript'>
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i<thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("PopularPosts1",210);
</script>

Wyświetlone na czerwono ID widget gadżetu Popularne posty. Zmień rozmiar miniatur dla każdego z widgetów bloga, najpierw trzeba znaleźć gadżet / widget ID, a następnie dodać linię poniżej tej części:

changeThumbSize("PopularPosts1",210);
changeThumbSize("widget-ID-TUTAJ",210);

... I wymienić widget-ID-TUTAJ na tekst ID tego widgetu / gadżetu.

Uwaga: nie będzie widać zmiany, jeśli widget ma wybór klasy - za to można zmienić klasę id i zastąpić kropkę symbolu z "#" w CSS ... Jeśli tego nie zrobisz zostaw "."

Jak znaleźć identyfikator danego widżetu, należy sprawdzić ten tutorial jak używać Firebug do projektowania bloga Bloggera.

Krok 5. Po wciśnięciu Zapisz szablon, aby zapisać zmiany.

Czytaj dalej »

Przycisk „przewiń do góry”

Szybki tutorial JavaScript używający jQuery do wyświetlenia przycisku „skocz na górę strony”.

Opis:

– przeźroczysta ikonka ze strzałką pojawia się po przewinięciu strony o zadaną wysokość (np. 200px) i znika po powrocie na samą górę,
– po najechaniu myszką ikonka staje się bardziej widoczna (mniej przeźroczysta)
– po kliknięciu w ikonkę uruchamia się płynne przejście użytkownika na samą górę strony

Przykład:

– na tym blogu (przewiń stronę trochę niżej aby zobaczyć)

1. Pobierz ikonkę:

(kliknij prawym przyciskiem myszy i wybierz „zapisz element docelowy / grafikę jako”)

2. Dodaj kod HTML do swojego nagłówka strony (lub sam kod CSS umieść w pliku ze stylem strony):

<style type=”text/css”>
#scroolTOP { display: none;position: fixed; z-index:99999; right: 20px; bottom: 20px;border:0px; }
.gototop_icon_i { width:45px;height:45px; }
</style>

3. Dodaj jQuery do swojej strony/bloga :

można to zrobić na dwa sposoby:

– pobrać skrypt bezpośrednio ze strony: http://code.jquery.com/jquery-1.10.2.min.js i umieścić w kodzie strony

LUB

- dodać kod do nagłówka strony (sekcja HEAD):

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

4. Dodaj skrypt JavaScript:

Podobnie jak CSS, możesz wstawić fragment skryptu bezpośrednio do nagłówka strony, lub skopiować go do pliku ze skryptami js strony:

<script type="text/javascript">
var gototop_icon = "#Twój URL obrazka";
var gototop_run = false;
jQuery(window).scroll(function(){ //scrool
var scrollTop = jQuery(window).scrollTop();
if ( scrollTop>200 ) { // pokaz
if ( ! gototop_run ) {
gototop_run = true;
jQuery('body').append('<a id="scroolTOP" href="#"><img src="'+gototop_icon+'" class="gototop_icon_i" alt="TOP"></a>');
jQuery('#scroolTOP').fadeTo('quick', 0.2);
jQuery('#scroolTOP').mouseover(function(){ jQuery(this).fadeTo(100, 0.6); })
.mouseout(function(){ jQuery(this).fadeTo(100, 0.2); });
jQuery('#scroolTOP').click(function(){
jQuery("html, body").animate({ 'scrollTop': 0 }, 500);
return false;
});
}
} else { // ukryj
if ( jQuery('#scroolTOP').length>0 ) jQuery('#scroolTOP').fadeOut('quick').remove();
gototop_run = false;
}
}); //scrool
</script>

UWAGA! Pamiętaj aby edytować zmienną „gototop_icon” (pierwsza linia skryptu) i wkleić tam ścieżkę do pobranej wcześniej ikonki oczywiście, możesz wstawić dowolną ikonę.

TO TYLE !

Czytaj dalej »

Jak zrobić host plików CSS , JavaScript na blogger

Każdy, kto kiedykolwiek pracował nad projektowaniem stron internetowych lub rozwoju strony wiedział jak przechowywanie plików jest ważne. Za każdym razem, gdy ktoś odwiedza Twoją stronę, serwer lub host będzie miał dostęp do tej lokalizacji i doprowadzi go to do odpowiednich plików, które muszą być wyświetlane. Gdziekolwiek zdecydujesz przechowywać pliki, będzie to miało wpływ na kilka ważnych czynników, takich jak prędkość, ładowania się strony, na ogólny ranking SEO i zdolność do dokonania niezbędnych dostosowań do serwisu.

Rzeczy do przemyślenia

Podczas projektowania struktury w Internecie ważne jest gdzie przechowywać ważne pliki CSS i JavaScript, tutaj decyzja o zaniedbaniu może wpłynąć na stronę później.

Prędkość Ładowania Strony

Łącząc kilka arkuszy stylów i stron internetowych plików, serwer Blogger ma tylko do zbierania informacji od jednej lokalizacji. Kiedy dzielić pliki lub decentralizuje systemu plików, to zajmuje więcej czasu dla wszystkich danych, które razem tworzą Twoja stronę. Długi czas ładowania może mieć negatywny wpływ twoje oceny SEO, ponieważ wolniejsza strona jest mniej odpowiednia dla odwiedzający, którzy nie będą czekać na to, aby strona się załadowywała kilka minut. Jeśli ktoś odwiedza Twoją stronę i od razu kliknie przycisk 'wstecz', bo to trwa zbyt długo.. powoduje to obciążenia, który zwiększa współczynnik odrzuceń i dostarcza do Google statystyki, które pokazują, witryna jest albo niskiej jakości lub nieistotne dla słów kluczowych wyszukiwania.

Przechowywanie Plików Wpływa SEO

Oprócz zwiększając współczynnik odrzuceń, przechowywanie plików w centralnej lokalizacji i zarządzania nazwami plików, może mieć wpływ na poprawę SEO witryny. Roboty sieciowe skanują .xml bloga - Google, lub inne wyszukiwarki, indeksu zarówno kod na swojej stronie, oraz nazwę i katalog plików. Jeśli nazwy plików są wyrywkowe lub nie umieszczone w odpowiednich kategoriach, to roboty sieciowe nie będą wiedzieć, co zrobić z informacjami. Przejrzysta struktura plików i centralna lokalizacja zapewnia Państwu zachętę do organizowania wszystkiego i nazwania ich odpowiednio. Wszystkie treści, które są istotne dla tematu strony lub bloga będą skanowane przez roboty sieciowe.

Lokalizacyjne Zdolności Magazynowania Plików

Tasowanie przez pliki i foldery lub otwieraniu połączeń FTP tylko do kilku prostych edycje mogą być uciążliwe, i zajmują dużo czasu, który mógłbyś przecież wykorzystać na pisanie nowych postów. Jeśli jesteś właścicielem witryny Blogger, to jest coś, czego potrzebujesz. Kiedy trzeba dokonać zmian, aby takie rzeczy jak social media - przyciski udostępniania, popularnych kategorii, ostatnie posty i notki widżetów, musisz wiedzieć, gdzie wszystko ma się udać, bez ryzyka utraty zarówno dostępnej treści i pieniędzy. Niektóre z większych witryn, które produkują setki unikalnych artykułów w każdym miesiącu, nie może sobie pozwolić na błędne katalogowanie. Kiedy artykuły zaczyna gubić się w porządku, to grozi mu powielanie treści na stronie, lub zapominając brak opublikowania. Rzeczy powinny być w zasięgu ręki, aby zminimalizować błędy i zmniejszyć ilość czasu spędzonego na edycję strony.

Przechowywanie plików JavaScript / CSS na Dysku Google

Przechowywanie na Blogger plików CSS i JavaScript na Dysku Google pomoże wyeliminować każdy z wyżej wymienionych problemów i zmniejszyć bałagan wśród swoich usług. Wybierając ten sposób można zwiększyć szybkość strony, zwiększyć możliwości skutecznej kampanii SEO, i uczynić swoje życie o wiele łatwiejszym. Dysk Google zapewnia wystarczającą ilość miejsca do przechowywania dużych plików, i oferuje usługi pracy grupowej, dzięki czemu można pracować wśród innych członków zespołu w tym samym projekcie. Niektóre z tych plików, które można przesyłać do usług w chmurze może pozostać niepublikowanych lub też w prywatnym miejscu, podczas gdy inne pliki takie jak na blogu, mogą być publikowane lub przechowywane w miejscu publicznym. Inną korzystną cechą przechowywania wszystkich swoich plików na Dysku Google Blogger jest to, że jest bardzo bezpieczny. Google jest jedną z wiodących firm w świecie technicznym, dzięki czemu można mieć pewność, że zawartość dysku jest bezpieczna przed hakerami i tych, którzy szukają kompromisu witryny. Ten przewodnik zapewni Ci instrukcje krok po kroku dotyczące konfiguracji witryny Blogger przy użyciu Google Drive. Całkowicie za darmo skorzystaj z tej strategii, i zapewnij sobie solidną platformę, na której można zbudować swój blog.

Krok 1. Przygotuj CSS / JavaScript plików

Po pierwsze, musimy stworzyć plik, który musimy zorganizować. Aby zorganizować plik CSS, otwórz Notatnik i wklej kod CSS (jeśli jest zamknięty w sekcji <style> i </ style>, należy je usunąć).

Z Notatnika w menu, wybierz "Plik"> "Zapisz jako", a następnie wpisz nazwę pliku z rozszerzeniem .css tak jak zrobiłem z css lub java.txt - patrz zrzut ekranu poniżej.

W tym samym oknie, wybierz "Wszystkie pliki" w opcji "Zapisz jako typ" i ustaw kodowanie znaków na UTF-8.

Jeśli chcesz udostępnić plik JavaScript, dodać rozszerzenie .js ( jeśli CSS to dodaj rozszerzenie .css ) na końcu nazwy pliku - .txt zamień na - .js lub .css (usuń <script> ... </ script> TAGI jeśli je zobaczysz). Kliknij "ZAPISZ" i przejdź do lokalizacji, w której chcesz zapisać plik.

Plik który przygotowałem jest plikiem poglądowym, TEN PLIK JEST NA DYSKU GOOGLE

Krok 2. Prześlij plik na Dysk Google

Zaloguj się do swojego dysku Google https://drive.google.com/ logując się za pomocą swojego konta Gmail. Po zalogowaniu się, kliknij na przycisk "Utwórz", aby dodać nowy oddzielny folder na przesyłanie plików JavaScript i CSS.

Otwórz nowo utworzony folder i kliknij przycisk załaduj, aby wybrać pliki, które trzeba przesłać lub przeciągnij pliki na otwartą stronę dysku google.

Teraz przejdź do miejsca, w którym zostały zapisane pliki, wybierz je (aby wybrać wiele plików, naciśnij i przytrzymaj klawisz Ctrl na klawiaturze, a następnie kliknij na nim lub zaznacz myszką LPM) i naciśnij przycisk Otwórz.

Po pliki zostały pomyślnie przesłane, kliknij prawym przyciskiem myszy na nazwie pliku (aby zaznaczyć wszystkie pliki w folderze, zaznacz pole wyboru) i wybrać "Podziel się":

W oknie "Ustawienia udostępniania" kliknij na "zmiany" link i wybierz opcję "publiczne w internecie" . Naciśnij skopiuj link (i) swojego przesłanego pliku (ów) z "Linki do dzielenia się " pole zaznaczone na niebiesko, a następnie, wklej go do Notatnika, aby go użyć później i naciśnij 'Gotowe'.

Krok 3. Jak Dodać plik zewnętrzny CSS / JavaScript do Bloggera

Aby można było korzystać z połączenia, należy zastąpić "https://drive.google.com/file/d 'to' https://googledrive.com/host" i usunąć "/ edytować? Usp = share" w linku , Na przykład, link mycssfile.css że kopiowane wygląda tak:

https://drive.google.com/file/d/0B18e0s916gRyd0ROTUItRGR1WDA/view?usp=sharing

Zwróć uwagę na rolę w "niebieskiego zaznaczenia po / pliku / d /" części. To jest identyfikator pliku, który jest używany do niego dostęp za pośrednictwem nowej usługi hostingowej.

https://googledrive.com/host/

Dodaj identyfikator pliku do https://googledrive.com/host/

https://googledrive.com/host/0B18e0s916gRyd0ROTUItRGR1WDA

Teraz zaloguj się na konto Bloggera, wybierz bloga i przejdź do Szablon > Edytuj kod HTML. Kliknij w dowolnym miejscu wewnątrz obszaru kodu i naciśnij klawisze Ctrl + F, aby otworzyć okno wyszukiwania:

Jeśli chcesz dodać plik CSS, wpisz następujący znacznik wewnątrz pola wyszukiwania i naciśnij Enter, aby go znaleźć:

<head>

tuż pod znaczkiem <head> wklej kod

<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B18e0s916gRyd0ROTUItRGR1WDA" />

Zastąp https://googledrive.com/host/0B18e0s916gRyd0ROTUItRGR1WDA z linkiem do twojego pliku CSS:

Jeśli chcesz dodać plik JavaScript, szukać następnego tagu:

</body>

I dodać linię tuż nad nim:

<Script src = " https://drive.google.com/host/0B18e0s916gRyd0ROTUItRGR1WDA "" text / javascript "type => </ script>

Wymień linki w kolorze niebieskim z adresu URL:

Wreszcie, należy nacisnąć przycisk "Zapisz szablon", aby zapisać zmiany.

Podsumowując

Kiedy już pomyślnie zapiszesz wszystkie foldery plików. Otwórz stronę w przeglądarce i upewnij się, że wszystkie zmiany zostały zakończone powodzeniem. Następnym razem, gdy chcesz zmienić jakiekolwiek informacje lub przenieść pliki wewnętrznie, wszystko co musisz zrobić, to otworzyć folder Dysk Google na swoim koncie i dokonać modyfikacji z tej lokalizacji. Pliki te będą automatycznie synchronizowane w folderze online i dokonają aktualizacji na stronie. To działa tak samo, jeśli chcesz zmienić wygląd, modyfikując kod CSS, rozszerzenie nagłówka, stopki lub dostosuj. Jak widać, zmiana przechowywania plików CSS i JavaScript jest przydatna na koncie Google Drive, jest to łatwe i zajmuje tylko kilka minut. Po wprowadzeniu zmian, można rozpocząć korzystanie z większą szybkością załadunku strony / bloga, uzyskać wyższą pozycję SEO i ogólnie bardziej wygodna współpraca z platformą Google Drive zwiększa wydajności pracy.

Czytaj dalej »

Kyani

Translate

Jak dodać spadający śnieg na bloga

Krok 1. Wejdź w szablon - edytuj kod HTML

Krok 2. Teraz odnajdź <b:skin> ... </b:skin> tak jak poniżej na obrazku i kliknij w widoczne kropki, aż rozwinie się lista.

Krok 3. dodaj kod powyżej ]]></b:skin>

Krok 4. Znajdź w polu wyszukiwania search blogger <body> tag, jeśli nie możesz go znaleźć użyj poniższego tagu:

i dodaj ten kod poniżej:

Krok 5. Teraz wyszukaj </body> tag i wklej tuż nad nim kod:

Krok 6. Zapisz szablon i ciesz się śniegiem ! :)

Galerie zdjęć są szczególnie przydatne do fotoblogów, ale mogą również służyć tym, którym od czasu do czasu potrzeba takiego gadżetu.

Jak dodać suwak miniatur obrazów CSS na Bloggera

Krok 1. Zaloguj się na pulpicie nawigacyjnym Bloggera i przejdź do szablonu> Edytuj kod HTML

Krok 2. Kliknij w dowolnym miejscu wewnątrz obszaru kodu i nacisnąć klawisze CTRL + F, aby otworzyć okno wyszukiwarki Bloggera

Krok 3. Wklej </ head> wewnątrz pola wyszukiwania i naciśnij Enter.

Krok 4. Tuż nad </ head> dodaj ten kod:

Krok 5. Zapisz zmiany klikając na przycisk Zapisz szablon. I wreszcie, musimy dodać kod.

Krok 6. Wklej poniżej strukturę HTML, w której chcesz, wyświetlić galerię przechodząc albo w układ i dodać nowy gadżet (kliknij Dodaj link gadżetu i wybierz HTML / JavaScript ), lub wewnątrz postu lub strony w sekcji HTML.

i wklej ten kod:

W tym przykładzie wyszliśmy link pusty (javascript: void (0);), ale można dodać jeden, jeśli chcesz - wystarczy wymienić javascript: void (0); z URL strony / postu. Aby dodać fotki wewnątrz suwaka obrazu wystarczy wymienić MINI-thumb-URL i LARGE-THUMB-URL na teksty z adresem URL obrazów.

Uwaga: Ostatnia LARGE-THUMB-URL1 należy zastąpić URL domyślnego obrazu, który pojawi się tam gdzie suwak.

Dla tych, którzy chcieliby, zobaczyć zdjęcie w galerii, mam galerię wykonaną w JavaScript i CSS. Ta galeria zdjęć wyświetla dostępne miniatury pionowo lub poziomo na górze wybranego obrazu, dzięki czemu łatwiej jest wybrać różne obrazy.

Jak dodać galerię z miniaturami do Bloggera?

Krok 1. Zaloguj się na konto Bloggera, wybierz bloga i przejdź do edycji HTML szablon >

Krok 2. kliknij w dowolnym miejscu wewnątrz obszaru kodu i nacisnąć klawisze CTRL + F, aby otworzyć okno wyszukiwarki:

Krok 3. Wpisz następujące tag wewnątrz pola wyszukiwania i naciśnij Enter, aby go znaleźć:

Krok 4. Teraz wybierz jeden z poniższych stylów i skopiuj kod poniżej niego:

Krok 5. Wklej kod wybranego stylu tuż nad </ head> tag.

Krok 6. Teraz nad tym samym </ head>, dodać ten skrypt:

Krok 7. Wreszcie, zapisz zmiany klikając przycisk "Zapisz szablon". A oto kod HTML zapewnienie normalnego listę z galerii obrazu ID, zamknięty w DIV o względnej pozycji, tak, że będzie uniknąć skutków ubocznych innych już istniejących stanowisk.

Krok 8. wklej poniższy kod HTML, w którym chcesz, aby wyświetlić galerię przechodząc albo układ i dodanie nowego gadżetu (kliknij na układ > Dodaj gadżet i wybierz HTML / JavaScript), lub wklej wewnątrz postu / stronie w sekcji HTML poniższy kod.

Uwaga: jeśli elementy na stronie pokrywania się w galerii, może być konieczne, aby dodać deklarację wysokość po "position: relative;"

Ponownie, tutaj trzeba zastąpić tekst strona-URL z adresem URL strony / postu.

Aktualizacja: Aby dodać napisy, proszę pomarańczowe linie zastąpić "Caption" na tekst który ma się pojawić na wybranym zdjęciu :

Zapisz widget lub opublikuj swoją stronę i gotowe!

Już nie musisz Edytować Przez Bloggera!

To naprawdę takie proste.

Korzystanie z Firebug Dostosowując CSS w Bloggerze

Ten poradnik pokaże Ci, jak zmodyfikować kod CSS szablonu Blogger. Zazwyczaj, deklaracje stylów CSS Blogger Template są edytowalne przez plik style.css, czyli to co możesz znaleźć między tagami <b: skin> i </ b: skin> .

Aby pobrać Firebug i uzyskać więcej szczegółów dotyczących zaawansowanych funkcji, odwiedź: Firebug dla Firefoksa lub jeśli używasz Chrome, pobierz aplikację Firebug Lite. Polecam używać Firefox, który jest bardziej kompletny i szybki, ale jednak, oba działają tak samo.

Aby dostosować każdy element z szablonu Blogger, wystarczy kliknąć albo na ikonę Firebug na pasku narzędzi lub "Sprawdź Element z Firebug" pozycji w menu kontekstowym. Następnie kliknij niebieski przycisk kursora do wglądu i umieścić kursor nad elementem, aby dostosować.

Na przykład, powiedzmy, że chcemy zmienić tytuł "Blog Archive" gadżetu. Po kliknięciu na przycisk myszy da nam wgląd na tytuł "Blog Archive" , który zostanie podświetlony, jak pokazano na poniższym zrzucie ekranu. Aby zmienić ten element, kliknij na niego:

Teraz, zdecydowaliśmy, który element chcemy zmienić, kliknij prawym przyciskiem na panelu "Style" i wybrać opcję "add rule":

Kliknij przycisk "Zastosuj do bloga" w prawym górnym rogu, aby zapisać zmiany i zobaczyć swój blog.

Firebug daje także wyraźną przewagę ...

Zmiana rozmiaru miniatur dla Widgetu Popularne Posty

Krok 1. Najpierw dodaj gadżet Popularne posty przechodząc do Układ > kliknij na link Dodaj gadżet i wybierz Popularne Wiadomości z okna popup.

Krok 2. Następnie przejdź do Szablon > kliknij na przycisk Edytuj HTML > kliknij w dowolnym miejscu wewnątrz obszaru kodu i naciśnij klawisze CTRL + F, aby otworzyć okno wyszukiwarki Bloggera.

Krok 3. Wpisz lub wklej następujący tag wewnątrz pole wyszukiwania, a następnie naciśnij klawisz Enter, aby go znaleźć:

Po znalezieniu </ head>, dodaj CSS nad nim:

Krok 4. Teraz szukać tego tagu:

... I tuż nad nim, dodać ten skrypt:

Uwaga: nie będzie widać zmiany, jeśli widget ma wybór klasy - za to można zmienić klasę id i zastąpić kropkę symbolu z "#" w CSS ... Jeśli tego nie zrobisz zostaw "."

Jak znaleźć identyfikator danego widżetu, należy sprawdzić ten tutorial jak używać Firebug do projektowania bloga Bloggera.

Krok 5. Po wciśnięciu Zapisz szablon, aby zapisać zmiany.

Szybki tutorial JavaScript używający jQuery do wyświetlenia przycisku „skocz na górę strony”.

1. Pobierz ikonkę:

2. Dodaj kod HTML do swojego nagłówka strony (lub sam kod CSS umieść w pliku ze stylem strony):

3. Dodaj jQuery do swojej strony/bloga :

Rzeczy do przemyślenia

Podczas projektowania struktury w Internecie ważne jest gdzie przechowywać ważne pliki CSS i JavaScript, tutaj decyzja o zaniedbaniu może wpłynąć na stronę później.

Prędkość Ładowania Strony

Przechowywanie Plików Wpływa SEO

Lokalizacyjne Zdolności Magazynowania Plików

Przechowywanie plików JavaScript / CSS na Dysku Google

Krok 1. Przygotuj CSS / JavaScript plików

Krok 2. Prześlij plik na Dysk Google

Zaloguj się do swojego dysku Google https://drive.google.com/ logując się za pomocą swojego konta Gmail. Po zalogowaniu się, kliknij na przycisk "Utwórz", aby dodać nowy oddzielny folder na przesyłanie plików JavaScript i CSS.

Otwórz nowo utworzony folder i kliknij przycisk załaduj, aby wybrać pliki, które trzeba przesłać lub przeciągnij pliki na otwartą stronę dysku google.

Teraz przejdź do miejsca, w którym zostały zapisane pliki, wybierz je (aby wybrać wiele plików, naciśnij i przytrzymaj klawisz Ctrl na klawiaturze, a następnie kliknij na nim lub zaznacz myszką LPM) i naciśnij przycisk Otwórz.

Po pliki zostały pomyślnie przesłane, kliknij prawym przyciskiem myszy na nazwie pliku (aby zaznaczyć wszystkie pliki w folderze, zaznacz pole wyboru) i wybrać "Podziel się":

Krok 3. Jak Dodać plik zewnętrzny CSS / JavaScript do Bloggera

Podsumowując