2014/09/28

Skracanie adresu

Zbyt długi adres internetowy lub obrazkowy może być niewygodny w pewnych okolicznościach,dlatego niektóre witryny posiadają możliwość skracania tych elementów.Natomiast na stronie dodatki.net znajduje się skracacz linków,którego kod umieściłem tutaj niżej w specjalnej ramce.
W funkcji zapisywania adresu mamy także konieczność umieszczenia własnego skrótu i wpisujemy go w odpowiednie pole.
Kod umieszczony w ramce należy skopiować,a następnie wkleić na swojego bloga.
Czytaj dalej

Jak wyświetlić obrazek w oryginalnym rozmiarze w poście na Bloggerze? [TUTORIAL]


Często pojawiającym się problemem odnośnie obrazków umieszczanych na Bloggerze jest to, że nawet po wyborze opcji oryginalny obraz, ten i tak wyświetla się w mniejszym rozmiarze. Błąd ten dotyczy tylko dużych formatów powyżej 1600 px. Być może szerokosć twojego bloga jest duża i możesz sobie pozwolić na wyświetlanie ilustracji w pełnym rozmiarze. Czy to jest możliwe? Tak i my mamy na to sposób!

Dodaj obrazek do treści posta standardową metodą, czyli poprzez ikonkę zdjęcia. Następnie przełącz edytor posta do trybu HTML i w linku do ilustracji (są 2: jeden odpowiada za wyświetlanie w poście, drugi za jego powiększenie w widoku LightBox po kliknięciu) zmień obydwie wartości s640 lub s1600 (zależnie co, ci się tam pojawi) na s0.


Przykład:

Przed zamianą

<a href="http://4.bp.blogspot.com/-GJJ0ytFTxdU/VBg76LXS0HI/AAAAAAAAEpA/ce955ygDUjc/s1600/obrazek.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-GJJ0ytFTxdU/VBg76LXS0HI/AAAAAAAAEpA/ce955ygDUjc/s1600/obrazek.png" /></a>

Po zamianie

<a href="http://4.bp.blogspot.com/-GJJ0ytFTxdU/VBg76LXS0HI/AAAAAAAAEpA/ce955ygDUjc/s0/obrazek.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-GJJ0ytFTxdU/VBg76LXS0HI/AAAAAAAAEpA/ce955ygDUjc/s0/obrazek.png" /></a>

To wszystko! Teraz po publikacji posta obrazki będą wyświetlane w rzeczywistych rozmiarach bez potrzeby klikania na nie.

Co jednak, jeśli ilustracje przez ciebie umieszczane w postach są duże, a ty zmieniłeś szablon na taki, który jest węższy i zdjęcia "wystają" na boczny sidebar? Nie martw się. Możesz automatycznie zmienić wszystkie rozmiary obrazków, określając w arkuszu stylu nowego szablonu, do maksymalnie jakiej szerokości mają one być wyświetlane.


By to zrobić wejdź w menu Szablon => Dostosuj => Zaawansowane => Dodaj arkusz CSS
Nstępnie w okienko wklej kod:
.post-body img {max-width:500px}

Gdzie 500px to maksymalna szerokość w której ma widnieć obrazek, niezależnie od tego, o ile jest szerszy od oryginału.
Po wklejeniu kodu kliknij ENTER i odblokuje się możliwość wciśnięcia przycisku Zastosuj do bloga. Kliknij go i gotowe! Wszystkie obrazki już powinny wyświetlać się prawidłowo!
Czytaj dalej

2014/09/26

Jak użyć na blogu czcionki Font Awesome? [TUTORIAL]


Co to jest czcionka Font Awesome?

Font Awesome to zestaw kilkuset ikon, które posiadają właściwości czcionki, czyli możliwa jest między innymi zmiana ich koloru za pomocą właściwości color w arkuszu stylu css. Za wielkość ikon odpowiada właściwość font-size. Wartość czcionki to FontAwesome, którą stosuje się z właściwością font-family.

Przykład:

.myfont {
font-family: FontAwesome;
color: #000;
}
By użyć tejże czcionki w arkuszu stylu, należy umieścić w nim kod Unicode danej ikony. To zagadnienie przybliżymy w kolejnych poradnikach. Teraz zajmiemy się kodem HTML czcionki i pokażemy, jak krok po kroku użyć go do wstawienia ikon na blogu.

http://fortawesome.github.io/Font-Awesome/get-started/









Gratulacje! Właśnie umieściłeś na blogu ikonę używając czcionki Font Awesome.
Czytaj dalej

2014/09/24

Jak stworzyć widżet galerii zdjęć Instagrama z pomocą Intagme i umieścić go na blogu? [TUTORIAL]


Intagme to strona, z której pomocą w szybki i prosty sposób stworzysz widżet galerii swoich zdjęć w Instagramie i umieścisz go na blogu. Do wyboru masz pokaz slajdów lub widok miniatur w formie kafelków. By to zrobić wykonaj kroki opisane na ilustracji:



Czytaj dalej

2014/09/23

Jak porządkować notatki z aplikacją Pocket? [TUTORIAL]


Każdy porządny blogger przed napisaniem posta gromadzi notatki, które posłużą mu za pomoc w opracowaniu określonego zagadnienia. Jak dobrze wiemy, podczas segregowania ważnych informacji zaczerpniętych z internetu o bałagan nietrudno. Mnóstwo zakładek w przeglądarce, wycinków przesłanych na skrzynkę mailową, czy też teksty zapisane w Notatniku. Wszystko rozrzucone w wielu miejscach. I jak tu o dobrą organizację?

Na szczęście dla takich zbieraczy powstała aplikacja Pocket w wersji zarówno dla Androida, jak i na komputer. Dzięki niej zapiszemy w chmurze wszelkie ważne dla nas strony internetowe, linki, teksty, obrazy, muzykę, czy filmy. Dzięki takiemu rozwiązaniu uzyskamy dostęp do naszych treści na każdym urządzeniu, po zalogowaniu na konto. Możliwy jest zapis z przeglądarki, poczty mailowej, oraz z ponad 500 aplikacji. Wszystko za sprawą jednego kliknięcia w ikonkę kieszonki. Mało tego. Każdy wpis możemy otagować, co pozwoli nam szybciej odnaleźć potrzebną informację, przyporządkowaną do odpowiedniej kategorii. Taka segregacja uporządkuje nasze notatki.

Czemu akurat Pocket? Gdyż oferuje on szybki powrót do zapisanych i raz wczytanych danych w dowolnym momencie, nawet bez dostępu do internetu. Poza tym jest poręczny, szybki i wygodny w użyciu, a przede wszystkim darmowy!

Warto, by każdy szanujący się blogger korzystał z tego typu aplikacji, która pomoże mu uszeregować potrzebne informacje, a co za tym idzie zwiększyć szybkość działań mających na celu stworzenie artykułu.

Blokotek korzysta z poręcznej kieszonki i może śmiało ją polecić swoim czytelnikom. Jeśli już rozpoczęliście przygodę z tą aplikacją, podzielcie się z nami swoimi spostrzeżeniami w komentarzach. Miłego korzystania!












Czytaj dalej

2014/09/22

Jak umieścić na blogu plakietę Instagrama? [TUTORIAL]

Jeśli posiadasz konto na Instagramie oraz umieściłeś już na nim zdjęcia, możesz podzielić się nimi ze swoimi czytelnikami poprzez umieszczenie na blogu odpowiedniego przycisku.

By to zrobić, zaloguj się do panelu admina na Instagramie, przejdź do menu Wizytówki i postępuj zgodnie ze wskazówkami zawartymi na obrazku:
Czytaj dalej

2014/09/21

Jak zainstalować i założyć konto na Instagramie? [TUTORIAL]


Instagram to taka specyficzna aplikacja na Androida, która umożliwia publikowanie zdjęć, zrobionych bezpośrednio z aparatu smartfona (nie ma możliwości dodania fotki z galerii). Nie posiada ona aktualnie swojej wersji na komputer (chyba, że odpalimy odpowiedni emulator). Na komputerze możemy jedynie przeglądać zdjęcia, już znajdujące się na naszym koncie. Jest to bardzo popularna apka, którą rozsławili celebryci, więc jak wiadomo, my "śmiertelnicy" również chcemy ją mieć na naszych fonach. Dlatego też stworzyliśmy poradnik dla początkujących, który pomoże wam zainstalować oraz utworzyć konto na Instagramie.

By zainstalować aplikację musisz ją najpierw pobrać. Możesz to zrobić ze sklepu Google Play. Postępuj zgodnie z instrukcjami zawartymi na poniższych obrazkach.











Gratulacje! Już teraz możesz dzielić się swoimi fotkami z innymi!
Czytaj dalej

2014/09/20

Najczęściej komentowane posty - kolorowy widżet dla Bloggera


Przedstawiamy kolorowy widżet, który wyświetla tytuły najczęściej komentowanych postów na Twoim blogu. Teraz każdy użytkownik Bloggera, może mieć taki u siebie!
Umieszczanie widżetu na Bloggerze

W menu Układ => Dodaj gadżet HTML/Javascript z poniższym kodem:
<style>
.comment-count {
padding: 3px 10px;
background: #fff;
color: #000;
font-size: 10px;
float: right;
}

.most-commented ul {
padding: 0px !important;
font-family: Century Gothic, sans-serif;
}

.most-commented ul li {
list-style-type: none;
padding: 10px;
color: #555;
margin-top: -10px;
}

.most-commented ul li a {
color: #444;
font-weight: bold;
text-decoration: none;
font-size: 11px;
}

.most-commented ul li img {
float: left;
margin: 0px 5px 0px 0px;
width: 60px;
height: 60px;
}

.most-commented:nth-child(3n+0) {
background: #ee377a ;
width: 100%;
}

.most-commented:nth-child(4n+0) {
background: #fcad37;
width: 95%;
}

.most-commented:nth-child(5n+0) {
background: #f8e000;
width: 90%;
}

.most-commented:nth-child(6n+0) {
background: #c7e93d;
width: 85%;
}

.most-commented:nth-child(7n+0) {
background: #5ebded;
width: 80%;
}
</style>
<script type="text/javascript">
function stripTags(s,n) {
return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
var i;
for (i = 0; i < feed.count ; i++) {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" />";
var postDescription = feed.value.items[i].postdescription;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li><div class="comment-count">' + postComments + "</div>" + postthumbnail + "<a href="+ postURL + '">' + postTitle + "</a>" + '<p>' +stripTags(postDescription,10)+'...</p>' + '</li></ul></div>';
document.write(postList);
}
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://blokotek.pl
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script><span style="font-size: 80%; float:left;"><a href='http://blokotek.pl/'>Blokotek</a></span>

Link zaznaczony na pomarańczowo zamień na adres własnego bloga na Bloggerze.
Na koniec zapisz.
Czytaj dalej

2014/09/17

Jak założyć bloga na Blog.com? [TUTORIAL]









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