Pagina Contact pe Bloger

Pagina contact pe Blogger aparent pare un lucru greu de realizat. Ar parea ca e nevoie de ceva mai mult decit un simplu Blogger, si o tema schimbata. Pe pagina Contact multi prefera sa-si lase id-ul de mess, adresa de e-mail sau alte date de contact. Pe cand unii prefera un formular.

In acest tutorial vom vorbi despre cum introducem un formular de tip Contact intr-o postare Blogger. Dupa cum am mai spus este foarte usor, putin HTML si putina engleza elementara, desi va puteti si fara  .

Pentru a creea un formular Contact, am ales sa va prezint step by step, sa nu va complicati .

1. Mergem pe Blogger si pornim creearea unei postari, lasam deschisa aceasta fereastra
2. In alta fereastra a navigatorului tau web, facem cunostinta cu Response O Matic - cu el vom genera codul necesar formularului Contact.
3. Dupa ce ne-am familiarizat cu designul trecem la inregistrare. Dam un click pe Get Started.
4. Va aparea un formular pentru inregistrare pe site. Completeaza-l
5. Dupa completare cu succes, pentru a finaliza e nevoie de confirmare adresei de e-mail, de aceea a fost livrat pe adresa e-mail mentionata in inregistrare un e-mail cu URL de confirmare.
6. O data activat contul, poti crea usor un formular in 4 pasi simpli. O sa-i prezint in imagini detaliate. Atentie cu un cont free poti creea doar un formular si sint mai putine optiuni decit un cont Premium.

click pe imagine pentru marire

7. Codul copiat il vom introduce intr-o postare dupa care o vom publica. Daca ai o tema cu meniu integrat poti face cateva modificari in el, poti adauga un nou buton, denumindu-l cum vrei tu, de obicei  "Contact". Daca nu stii cum se adauga un buton vezi aici.

click pe imagine pentru marire

8. Et, Voila vezi Demo pe BloTest la acest formular. Tu il poti personaliza, facindu-l mai interactiv, haios . Alege si improvizeaza.

Continue reading...

Meniu pe Blogger

Cum inserezi in header sau unde e posibila pozitionarea meniului pe Blogger, de fapt aceasta actiune este foarte usoara de aplicat.

Noile template-uri iesite de sub tipar au meniul integrat. De voi tine sa cautati in codul sablonului respectivele cuvinte-cheie folosite in acel template, dupa ce le-ati gasit spre exemplu template-ul descarcat are integrat "About" dar tie nu-ti place si vrei sa-l personalizezi, il cauti in codul HTML. Dupa care modifici adresa URL a acelui link cu o postare relevanta .

Sa luam un sablon clasic.

1. Creeam cateva postari relevante           Despre           Contact           Iti place blogul ? 
2. Dupa publicare postarilor vom creea un element de pagina de tipul Lista de Linkuri pentru de fapt ele sint niste linluri afisate undeva, header partea dreapta sau stinga, de regula si de preferinta meniul sa fie afisat chiar in top.
3.Vom adauga un buton, sa fie Despre  la adresa URL site nou vom include postarea respectiva acestui titlu. Si asa cu celelalte, la nume site nou vom pune Despre  dupa care Adaugati Link
4. Pozitionam elementul  de pagina in top, si obtinem meniul .

Dupa cum ziceam noile template-uri au implementate meniul, pentru ca nu pe toate template-urile e posibila simpla adugare a unui element de pagina de tip Lista de Linkuri si gata ai rezolvat un meniu. Nu, cauta in codul template-ului Home sau alt cuvint care este folosit deja, pentru adaugarea unui buton nou direct din codul HTML e nevoie de putina iscusinta in HTML, si ai grija inainte de orice modificare in template fa o copie prin simplul download al template-ului.

Continue reading...

Tag Cloud

Pe Blogger nu gasim anume "tag cloud", sau anume "categorii" sint "etichetele" pe care le putem usor interpreta ca Categorii, sau ca Tag Cloud. In acest al doilea caz e nevoie de putina transpiratie in modificare template-lui.

Cu putin timp in urma am gasit ceva care nu mai necesita sa umbli prin codul template-ului si care pastreaza categoriile si cu usurinta Introduci Tag Cloud in blogul tau blogger.  Este vorba despre Tag Cloud Generator .
Cum creezi tag-urile ? foarte simplu . De preferat e sa alegi modalitatea manuala de creat tagurile. Pentru ca altfel vei genera un decor de linkuri pe blogul tau care vor duce spre Wikipedia sau Delicious.

Cum usor interpretam etichetele ca categorii, asa vom interpreta aceste cuvinte-cheie alese de noi ca tag-uri.

Instalarea redata in imagini mai jos. pentru marire click pe imagine

Continue reading...

Numerotarea paginilor in Blogger

La recomandarea unui prieten sa scriu despre numarul paginilor sub articole [postari] sau cum numerotezi paginile, Am zis "OK, in curind." Este un hack original by Mohamed si sintetizat de Amanda. Ei au prezentat intr-o forma mai avansata instalarea acestui, "hack"- sa zicem. Ceea ce nu voi face eu, simplu si la obiect instalarea.
Asta e rezultatul {mai jos}

Cum incepem:
1. Blogger-->>Aspect-->>Editati HTML
2. Descarca Sablonul, De ce ? pentru siguranta ca la o eventuala complicatie in editarea template-ului, sa ai o rezerva.
3. Extindeţi şabloanele control
4. Introduceti codul urmator chiar inainte de   </b:skin> 

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

Acest cod contine culorile textului si linkurilor in numerotarea paginilor

5. Pasul urmator tine de inlocuirea existentelor link-uri "Postari mai vechi" si "Postari mai noi" cu numerele paginilor care dau un mare plus facilitind navigarea pe blog. Efectuam cautarea urmatoarului cod sau ceva asemanator in codul template-ului vostru Blogger.

<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Postări de blog' type='Blog'/> </b:section>

6. Dupa identificarea acestui cod in template urmeaza lipirea unui cod imediat dupa tagul </b:section> . Ai codul mai jos :

<script type="text/javascript">



function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";


var isLablePage = thisUrl.indexOf("/search/label/")!=-1;

var isPage = thisUrl.indexOf("/search?updated")!=-1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";

thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;


var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= '';

var upPageHtml ='';


var downPageHtml ='';



var pageCount = 5;

var displayPageNum = 5;

var upPageWord = 'Previous';


var downPageWord = 'Next';







var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';




for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=''){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++) {


if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



postNum++;

htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;


}

}

}

}//end if(post.category){



itemCount++;

}



}else{

if(title!=''){


if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



if(title!='') postNum++;

htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;


}

}

itemCount++;

}

}



for(var p =0;p< htmlMap.length;p++){

if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){


if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +'</a></span>';

}else{


upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';


}

}else{

upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';


}



fFlag++;

}



if(p==(thisNum-1)){

html += '<span class="showpagePoint">'+thisNum+'</span>';


}else{

if(p==0){

if(isLablePage){

html = labelHtml+'1</a></span>';

}else{

html += '<span class="showpageNum"><a href="/">1</a></span>';


}

}else{

html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';


}

}



if(eFlag ==0 && p == thisNum){

downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';


eFlag++;

}

}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

}//end for(var p =0;p< htmlMap.length;p++){



if(thisNum>1){


if(!isLablePage){

html = ''+upPageHtml+' '+html +' ';

}else{

html = ''+upPageHtml+' '+html +' ';


}

}



html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;




if(thisNum<(postNum-1)){

html += downPageHtml;



}



if(postNum==1) postNum++;

html += '</div>';




if(isPage || isFirstPage || isLablePage){

var pageArea = document.getElementsByName("pageArea");

var blogPager = document.getElementById("blog-pager");



if(postNum <= 2){

html ='';


}



for(var p =0;p< pageArea.length;p++){

pageArea[p].innerHTML = html;

}



if(pageArea&&pageArea.length>0){

html ='';


}



if(blogPager){

blogPager.innerHTML = html;

}

}



}

</script>




<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script>

7. O data introdus acest cod, ne apropiem de sfirsitul hack-ului, dupa cum ai si observat sint evidentiate in text cu rosu
var pageCount = 5; - care inseamna numarul postarilor pe pagina, il schimbi daca ai alt numar de postari.
si var displayPageNum = 5; care arata numarul paginilor, spre exemplu - 4, 5, 6, 7, 8 .

8. Acum poti salva sablonul si prin previzualizare poti vedea schimbarile . Poti schimba culorile doar daca este necesar prin editarea primului cod introdus.

Continue reading...

Cum schimbam titlul blogului

Probabil suna ciudat dar dupa ce veti citi acest articol veti intelege ce vrea sa insemne. Mai intii vedeti mai jos 2 articole indexate de Google. Ce observati ?



Aham, incepe sa se lege ceva, nu ? Ati observat in primul rezultat al cautarii Google Titlul Blogului este primul dupa care urmeaza Titlul articolului, ce se intimpla pentru ca-n al doilea rezultat al cautarii Google s-au schimbat cu locurile.

Tu stii cum te indexeaza Google ? cu titlul blogului si dupa aia titlul articolului ? pentru ca asa vei prinde o slaba pozitionare in Google. De aia ieri am le-am schimbat cu locurile asa era la mine. Hai sa-ti dau un exemplu : Da unu' un search pe Google: Revolution Lifestyle Blogger Template sau Bloggerica.com Revolution Lifestyle Blogger Template ? Asa sta treaba, modifica-ti tilul pentru o mai buna pozitionare in motoarele de cautare, si un rank SEO mai mare.


Cum il modifici ? very easy Step by Step mai jos.
1.Blogger -->>Aspect->> Editati HTML.

2.Cauta aceasta linie in Codul HTML al template-ului, o gasesti pe la inceput de cod.


3.Iar acum inlocuieste-o cu codul de mai jos.


4. Salveaza-ti template-ul .

Rezultatele vor aparea la viitoarele indexari Google.

Continue reading...