📧 Kako na responzivnim Blogger-ovim temama izmeniti "Subscribe" dugme? 📧

📧 Kako na responzivnim Blogger-ovim temama 📧

📧 izmeniti 📧

📧 "Subscribe" dugme? 📧

2018-ta je godina i neke stvari zaista lagano klize u istoriju. Jedna od tih stvari, koja je veoma korisna za blogove i pisanja na njima, je mogućnost da čitaoci primaju Vaše nove tekstove na svoju email adresu. Popularni "subscribe" lagano biva zamenjen sa opcijama primanja obaveštenja sa blogova koje pratite direktno u pretraživaču ili čak i u samom operativniom sistemu (notifikacije). Međutim, popularni RSS feed-ovi nisu mrtvi, i zbog toga je važno imati među svojim čitaocima i ljude koji vole da koriste svoju elektronsku poštu da bi pratili sadržaje sa blogova.

Jedna od popularnijih platformi za pisanje blogova Blogger je prošle godine predstavila novi set responzivnih tema. Iako savremene, ovim temama nedostaje mnogo opcija za prilagođavanje. Jedna od opcija je i izmena teksta na dugmadima. Iz tog razloga, u ovom tutorijalu će biti pokazano kako se može promeniti tekst i sadržina iskačućeg prozora "subscribe" dugmeta.

Problem

Nove Bloggerove teme su lepe i funkcionalne, što se može videti i na ovom blogu jer on koristi prilagođeni "Contempto" šablon. Međutim, postoje neke stvari koje jednostavno ne odgovaraju onome što želimo da postignemo.

Jedna od tih stvari je "subscribe" dugme koje je postalo deo teme. Problem sa tim dugmetom je što on pokazuje tekst "Prijavi me" ukoliko koristite lokalizaciju za srpski jezik (ćirilica). Kod čitalaca to može da izazove konfuziju. Da li sajt traži neku prijavu? Da li se ovde možda prijavljuje vlasnik bloga (policiji, vodovodu i kanalizaciji, ili već ne znam ni ja kome)?

Još gora stvar sa ovim dugmetom je kada želite da koristite latinicu (što je u Bloggeru stavljeno pod Hrvatski). Tada tekst glasi "Pretplata". Čitaoci koji se prvi put susreću sa ovim mogu da pomisle da vlasnik bloga od njih zahteva da mu nešto plate. Sve u svemu - tekst je neadekvatan i nije dovoljno informativan o čemu se tu zapravo radi.
Ukoliko zagrebemo ispod površine videćemo da problem potiče iz jednog malo dubljeg razloga. Naime, Blogger je platforma koja je prevedena na više jezika. Onaj ko kreira blog će svojim izborom jezika naterati Blogger da očitava određene oznake i poruke. Radi informacija treba znati da se većina poruka očitava iz rečnika (gde rečnik označava tip podataka u programiranju, a ne nešto drugo) data:messages koji se nalaze na Google-ovom serveru. Budući da se nama neke od ovih poruka ne sviđaju, mi ćemo ih jednostavno izmeniti ili podesiti blog da se ne prikazuju. To je bar lako.

Rešenje

Postoje dva rešenja. Prvo je da se taj deo ukloni (u kartici "Izgled") i da se ubaci novi gedžet (HTML/JS) sa kodom koji možemo dobiti od našeg feed servisa (Feedburner je kod Bloggera podrazumevano uključen). Ova opcija nije loša, ali novi gedžet se sigurno neće uklopiti u temu, a treba naći i mesto za njegovo postavljanje koje bi bilo primetno, ali ne i na smetnji.

Drugo rešenje je malo komplikovanije i zahteva malo više truda i pažnje, ali se pomoću njega može postići prilično dobar efekat na čitaoce bloga. Potrebno je izmeniti deo teme, kako bi se celokupan tekst dugmeta promenio. Time mi ne bi ni najmanje umanjili funkcionalnost teme a očuvali bi smo i njen prvobitni izgled.

Pa da krenemo:

1. Kreiranje rezervne kopije šablona bloga

Ovaj korak je obavezan! Kako sam već ranije pisao o načinima pravljenja rezervnih kopija sadržaja i teme (šablona) Bloggera, to neću ponavljati. Celo uputstvo možete pronaći na ovom linku. Pogledajte u odeljku koji nosi naziv "Pravljenje rezervne kopije (backup) i oporavak (recovery) šablona u Blogger-u".
Ovaj korak je neophodan, jer ćemo izmene raditi direktno nad našom temom i nepažnjom možemo dovesti do toga da ona postane neupotrebljiva!
Nakon što ste sačuvali kopiju teme na Vašem računaru, potrebno je uraditi menjanje XML datoteke na Bloggeru.

2. Menjanje teme u Blogger-u

Da bi smo izmenili temu u Blogger-u potrebno je prvo doći do njegovog editora tema. To postižemo tako što:

1. Ulogujte se u Blogger-ovu kontrolnu tablu (Blogger dashboard)
2. Kliknite na karticu "Tema" ("Theme")
   
3. Kliknite na dugme "Izmeni HTML"
   

Sada se nalazite u Blogger-ovom XML editoru teme. Nemojte se dati zbunjivati zbog onoga što vidite, nećemo se mnogo bakćati sa njim, jer imamo posao da uradimo.

Dakle, na ovom mestu je celokupan kod naše teme. Da bi smo brže pronašli ono što tražimo, u ovom editoru postoje prečice. Mi tražimo vidžet koji nosi oznaku "FollowByEmail" (moguće je da u svom imenu ima i neki broj, ukoliko trenutno imate više ovakvih vidžeta na svom blogu). Budući da želimo odmah da "skočimo" na kod ovog vidžeta, potrebno je da:

1. Kliknite na dugme "Pređi na vidžet",
   
2. Otvoriće Vam se padajuća lista u kojoj treba da imate i naziv "FollowByEmail1",
   
3. Kliknite na "FollowByEmail" i editor će Vam pokazati XML kod ovog vidžeta.
   

Sa leve strane vidite strelice pored brojeva(⮞). To je znak da je deo koda sakriven. Takođe se i u samom kodu nalaze oznake  >...<, koje isto predstavljaju sakriveni deo koda. Kliknite na te strelice ili tačkice kako bi ste videli i te skrivene delove koda ovog vidžeta.
U ovom kodu tražimo izvore naših problema, a oni su:

Menjanje natpisa na samom "subscribe" dugmetu

Prvo što želimo je da izmenimo sam natpis na dugmetu u okviru teme. Da bi smo to uradili potrebno je da pronađeete kod koji izgleda ovako:
<button class='subscribe-button pill-button'><b:eval expr='data:messages.subscribe'/></button>
U ovom odeljku nam smeta <b:eval expr='data:messages.subscribe' />. Najlakši način je da se jednostavno otarasimo tog dela tako što ćemo ga izbrisati. Dakle, izmenite tu liniju koda da izgleda otprilike ovako:
<button class='subscribe-button pill-button'>Adekvatna poruka da je ovo dugme za dobijanje obaveštenja putem mejla</button>
Gde je
Adekvatna poruka da je ovo dugme za dobijanje obaveštenja putem mejla - bilo kakva kratka tekstualna poruka koju smatrate adekvatnom. Ovu poruku možete uobličiti i nekim HTML oznakama, ukoliko ste vični tome.
Na kraju dobijamo promenjeno dugme, kao na slici:

Sledeće što želimo da promenimo je

Menjanje "subscribe" poruke u iskačućem prozoru

Ukolko čitalac klikne na dugme prikazaće mu se iskačući prozor sa porukom zbog čega želimo da on unese svoju email adresu. Mi to ne želimo niti zbog "praćenja" niti zbog "pretplate". Zato je poželjno da izmenimo i ovaj deo koda. U Bloggerovom XML editoru je potrebno da pronađemo ovaj kod:
<h3 class='subscribe-title' id='subscribe-title'><b:eval expr='data:messages.subscribeToThisBlog'/></h3>
Kao što već naslućujete, u ovom redu nam je problem ovaj deo: <b:eval expr='data:messages.subscribeToThisBlog'/>. To je upravo ono što želimo da promenimo. Dakle, izmenite tu liniju da sada izgleda ovako:
<h3 class='subscribe-title' id='subscribe-title'>Unesi svoj email za novosti</h3>
Gde je
Unesi svoj email za novosti - bilo kakva malo duža tekstualna poruka koju smatrate adekvatnim obaveštenjem za svoje čitaoce. Ovu poruku možete uobličiti i nekim HTML oznakama, ukoliko ste vični tome.
Na kraju dobijamo poruku sličnu ovoj na slici:

Sada možemo podesiti još par stvari.

Menjanje poruke koja se nalazi na mestu na kom korisnik treba da unese svoj email

Ovo je opcioni korak, jer je i podrazumevana poruka zadovoljavajuća, ali ako volite da eksperimentišete, onda pronađite ovu liniju koda:
<input autocomplete='off' class='follow-by-email-address' expr:placeholder='data:messages.emailAddress' name='email' type='email'/>
Ovde je problem ceo ovaj deo: expr:placeholder='data:messages.emailAddress'. Pažljivo pogledajte sledeću liniju kako bi ste uočili šta se menja:
<input autocomplete='off' class='follow-by-email-address' placeholder='Vaša email adresa' name='email' type='email'/>
Gde je
Vaša email adresa - prilagođena poruka koja obaveštava korisnika da je to mesto predviđeno za unos email adrese.
Obratite pažnju!!!
Originalni deo koda koji menjamo je u sebi sadržavao oznaku expr:placeholder. Kada ga izmenimo to postaje samo placeholder.
Kada ovo izmenimo, polje za unos email adrese će izgledati slično kao na slici:

I na kraju nam je ostalo

Menjanje poruke na koju korisnik treba da klikne kako bi poslao svoj email

I ovo je opcioni korak, ali ukoliko volite da eksperimentišete pronađite sledeću liniju u kodu:
<input class='follow-by-email-submit' expr:value='data:messages.getEmailNotifications' type='submit'/>
Ovde je očigledan problem sa delom data:messages.getEmailNotifications. Isto kao i kod prethodnog puta, pažljivo pogledajte sledeću liniju koda, tj kako ona otprilike treba da izgleda:
<input class='follow-by-email-submit' value='Unesite svoj email za novosti sa stranice Fog Developer' type='submit'/>
Gde je:
Unesite svoj email za novosti sa stranice Fog Developer - prilagođena poruka koju smatrate adekvatnom da se nalazi na mestu na koje korisnik treba da klikne nakon unosa svog email-a.
I ovde obratite pažnju!!!
Originalni deo koda koji menjamo je u sebi sadržavao oznaku expr:value. Kada ga izmenimo to postaje samo value!
Sada taj tekst izgleda otprilike ovako:

Kada smo završili sve izmene sa šablonom, potrebno je da ga sačuvamo. To radimo tako što kliknemo na dugme "Sačuvaj temu", kao na slici ispod:

Možete otvoriti i pregledati blog kako bi ste se uverili da ste zadovoljni sa učinjenim:

Ukoliko stvari krenu loše

Ukoliko ste iz nekog razloga nešto zabrljali ili pogrešili, pa Vam je zbog toga Blog postao neupotrebljiv, nemate razloga za brigu! Sve što u tom trenutku treba da uradite je da vratite svoju rezervnu kopiju šablona (koju ste kreirali u prvom koraku ovog tutorijala). Kako se to radi možete pronaći na ovom linku. Pogledajte u odeljku koji nosi naziv "Pravljenje rezervne kopije (backup) i oporavak (recovery) šablona u Blogger-u". Ovim potezom ćete izgled svoga bloga vratiti na stanje koje je postojalo pre bilo kakvih izmena i petljanja sa XML kodom.
Na kraju Vam ostaje samo da uživate gledajući kako raste broj onih koji primaju Vaše tekstove na svoju email adresu!