Customizarea widget-ului de abonare prin email (Feedburner Newsletter)

Cand am redeschis acest blog am decis ca este mai bine sa renunt la anumite plugin-uri inutile pe care nu le pot personaliza. Unul dintre ele este widget-ul de abonare prin email pe care l-am implementat prin inserarea directa a scriptului oferit de Feedburner.

Desi nu sunt programator si n-am cunostinte avansate in web design, zic eu ca am reusit sa il personalizez exact cum am dorit. In continuare am sa va postez exact metoda pe care am aplicat-o si sper sa va fie utila in realizare unui widget potrivit pentru blogurile voastre.

In primul rand aveti nevoie de un cont pe www.feedburner.com, aici creati un feed folosind adresa blogului vostru (detectarea feed-ului se face automat – in mod normal), apoi activati abonaea prin email din meniul Publicize.

Dupa o analiza a codului generat de Feedburner pentru abonare si cateva modificari, am obtinut urmatorul rezultat:

<form id=”emailform” action=”https://feedburner.google.com/fb/a/mailverify” method=”post”
target=”popupwindow” onsubmit=”window.open(‘https://feedburner.google.com/fb/a/mailverify?uri=mihaiioanro‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”><input type=”hidden” value=”mihaiioanro” name=”uri”/><input type=”text” id=”s” name=”email” value=”Scrie adresa de email aici…” onfocus=’if (this.value == „Scrie adresa de email aici…„) {this.value = „”}’ onblur=’if (this.value == „”) {this.value = „Scrie adresa de email aici…„;}’/><input type=”hidden” name=”loc” value=”en_US”/><input type=”image” src=”https://ejohnny.ro/wp-content/uploads/2013/09/email.png” id=”submitb” /></form>

Acest cod poate fi introdus in locul dorit pentru afisarea form-ului de abonare. Personalizarea acestuia se face prin editarea fiecarului text ingrosat de mai sus si adaugarea in CSS a urmatoarelor chestii simple.

#emailsub {
background-image: url(‘emailwidget.png’);
}

#emailform {
padding: 15px;
}

#submitb {
margin-top: -10px;
}

In css puteti personaliza totul in functie de cum doriti. Culoare, fonturi, imagini de fundal pentru widget, limitari, aliniamente, etc.