Se afișează postările cu eticheta Widgets. Afișați toate postările
Se afișează postările cu eticheta Widgets. Afișați toate postările

luni, 18 octombrie 2010

Widget Facebook "Apreciaza si distribuie acest post"

In ultimul timp Facebook a devenit foarte popular printre bloggeri, care il folosesc pentru promovarea articolelor de pe blogurile proprii. Optiunile folosite sunt: optiunea de a distribui articole si optiunea "Imi place".


Folosindu-ma de widgetul creat de Facebook Like Box For Blogger, am modificat butonul care in widget-ul original doar trimetea catre pagina cu fani a bloggerului si am introdus un buton care distribuie articolul respectiv.
De asemenea am modificat textul (care de fapt e o poza) sa fie in romana.

Widgetul odata instalat v-a apare sub articol si doar in pagina articolului, el nefiind vizibil in pagina de start a blogului. El poate fi modificat foarte usor sa apara si in pagina de start, dar va voi arata la sfarsit cum sa faceti.




Daca doriti sa instalati acest widget, iata ce trebuie sa faceti:

1. Intrati la Design --> Editati html si faceti o copie a sablonului actual apasand link-ul "Descărcaţi şablonul complet". Faceti acest lucru pentru a avea o copie de siguranta in caz ca ceva nu merge bine atunci cand editati codul sablonului.

duminică, 18 aprilie 2010

Cum sa pui un buton de votare FTW pe Blogger

Site-ul Ftw este unul din putinele site-uri sociale din Romania specializat pe promovarea continutului de calitate de pe site-urile si blogurile romanesti. Este, cred eu, cel mai cunoscut si folosit site de tip Digg din Romania. Si cel mai folositor.

Este unul din site-urile care incearca sa inchege o comunitate de bloggeri si in mare parte chiar reuseste, avand conform "parintelui spiritual" al site-ului, Bobby Voicu, un numar de aproape 3000 de membri inregistrati si o rata de aproximativ 20% useri activi care propun si voteaza articole. (statistici luate de pe blogul lui Bobby Voicu, dintr-un articol scris in august 2009)




Am vazut ca si cativa dintre blogerii mai cunoscuti isi promoveaza articolele acolo, asa ca va sfatuiesc sa-l folositi si voi pentru ca veti avea doar de castigat. De pierdut oricum nu vad ce ati pierde.

Deci daca v-ati hotarat sa va folositi de acest site, sau daca deja o faceti si vreti sa afisati acest buton de votare pe blogul vostru Blogspot.Com, atunci iata ce trebuie sa faceti:
1. Intrati la Aspect --> Editati html si faceti o copie a actualului sablon, in caz ca ceva nu merge cum trebuie sa puteti reveni la el prin simpla incarcare a lui.

2. Bifati casuta care extinde codul sablonului (important)



3. Cu ajutorul combinatiei de taste Ctrl+F cautati urmatorul cod:
<data:post.body/>
Aici aveti 2 posibilitati:
a. daca vreti ca butonul de votare sa apara deasupra postarii (sub titlu) atunci puneti codul de mai jos deasupra codului de sus.

joi, 8 aprilie 2010

"Sexy-bookmarks" pentru Blogger care foloseste site-uri sociale romanesti

Acum cateva zile va prezentam widget-ul Sexy bokmarks pentru Blogger, in care site-urile sociale folosite erau toate straine. Astazi am sa prezint acelasi widget dar cu site-uri romanesti.



Ideea mi-a venit cand am vazut acest articol despre un plugin Wordpress numit Ro Social Bookmarks si care faciliteaza bookmark-ul postarilor catre 13 site-uri sociale romanesti, gen FTW, VoxRo, Ghidoo, Recomanda, Proddit, etc.

Asa ca am modificat cate ceva prin codul CSS creat de CSSReflex si cate ceva prin codul html care genereaza butoanele si face trimiterea catre site-urile sociale romanesti.
De asemenea o modificare importanta a fost aplicata si pozei care cuprinde butoanele. A fost greu pentru ca nu sunt chiar avansat in Photoshop si nu am gasit nici pe net vreo serie de icoane dedicate acestor site-uri.
Daca cineva care se pricepe bine la Photoshop e dispus sa faca niste icoane 32 pe 28 pentru aceste site-uri il rog sa ma contacteze.

Inainte sa trecem la instalare trebuie sa va mai spun ca widget-ul cuprinde butoane catre 11 site-uri sociale si v-a apare la sfarsitul fiecarei postari.

Demo

Instalarea primului widget de social bookmarking pentru Blogger care foloseste site-uri romanesti
1. Intrati la Aspect --> Editati Html si faceti o copie a actualului sablon, in caz ca ceva nu merge cum trebuie sa puteti reveni la el prin simpla incarcare a lui.

2. Bifati casuta care extinde codul sablonului (important)



3. Cu ajutorul combinatiei de taste Ctrl+F cautati urmatorul cod:

</head>

luni, 5 aprilie 2010

Widgetul "Sexy-bookmarks" acum si pentru Blogger

"Sexy-bookmark" este un foarte popular pluggin pentru platforma Wordpress. Pus pe blog el lasa vizitatorii sa-si salveze postarile preferate pe anumite site-uri sociale, ajutand totodata si blogul respectiv prin aducerea de vizitatori de pe site-urile respective.


Acum datorita blogului CSSReflex (Add Sexy Bookmarks to Blogger) acest widget este disponibil si pentru platforma Blogger.




Odata instalat widget-ul v-a apare dupa fiecare postare iar vizitatorul cu un simplu clic poate sa-si salveze articolul preferat. Instalarea are un grad de dificultate mediu.

Demo

Instalarea widget-ului
1. Intrati la Aspect --> Editati Html si faceti o copie a actualului sablon, in caz ca ceva nu merge cum trebuie sa puteti reveni la el prin simpla incarcare a lui.

2. Bifati casuta care extinde codul sablonului (important)


3. Cu ajutorul combinatiei de taste Ctrl+F cautati urmatorul cod:

</head>

marți, 2 februarie 2010

Navigatie cu numere in Blogger - corectata

Prin August, anul trecut scriam pe blog despre un sistem de navigare prin blog asemanator cu cel din Wordpress si anume o navigare cu numere prin postari si categorii. Nu am sa mai aduc in discutie beneficiile acestui sistem ci vreau sa va aduc aminte ca acel truc prezentat atunci, nu functiona prea bine si la momentul acela nu exista unul care sa functioneze corect.




Acum datorita blogului Abu Farhan (Page Navigation for Blogger) acest truc este corectat si functioneaza perfect.
Trebuie sa va mai spun ca acest truc nu mai este disponibil in varianta de instalare usoara ci doar prin varianta editarii html-ului sablonului. Deci daca vreti sa aveti navigare cu numere la sfarsitul posturilor  trebuie sa va inarmati cu rabdare, atentie si incredere.

joi, 24 septembrie 2009

Widget "Postari asemanatoare" cu imagine de la LinkWithin


Widget-ul cu "Postari asemanatoare" este unul din cele mai utile widget-uri de instalat pe un blog si astfel s-au creat mai multe metode de a fi afisate. De la inceputul acestui blog si pana acum v-am prezentat si eu vreo doua metode de astfel de widget-uri.


Primul pe care l-am prezentat este un widget care apare la sfarsitul fiecarei postari si care afiseaza sub forma de link-uri text, titlurile articolelor asemanatoare din aceeasi categorie.

Al doilea widget afiseaza de asemenea la sfarsitul fiecarei postari titlurile, dar insotite de imaginea in format mic a pozei care se gaseste in articol. Si de aceasta data postarile asemanatoare sunt alese tot din categoria din care face parte si articolul respectiv.

Acum va voi prezenta un widget Postari asemanatoare creat de LinkWithin. Acest widget este foarte asemanator cu cel dinainte, diferenta este ca acesta alege postarile la intamplare si in plus are un mare avantaj: o instalare foarte simpla.




Daca v-ati convins de utilitatea acestui widget si doriti sa-l puneti pe blog atunci trebuie sa urmati acesti pasi:

1. Intrati pe site-ul LinkWithin
2. Odata intrati veti observa in partea dreapta a paginii un formular cu ajutorul caruia va puteti face cateva setari pentru widget.



3. Introduceti datele cerute
- in prima casuta introduceti adresa voastra de email
- in a doua casuta introduceti adresa blogului vostru
- la optiunea Platform introduceti numele platformei pe care aveti hostat blogul. In cazul nostru alegeti Blogger
- a patra optiune va cere sa alegeti cate link-uri sa fie afisate sub postare. Aveti grija la latimea coloanei de postare a sablonului vostru. Un element al acestui widget are o latime de 110pixeli.
- la a cincea optiune va cere sa bifati casuta daca aveti un sablon cu fundalul de culoare inchisa.

4. Dati clic pe butonul Get Widget!
Veti fi dus pe o alta pagina unde vi se v-a arata foarte clar cu ajutorul imaginilor cum trebuie sa procedati pentru a instala widget-ul pe blogul vostru.

Daca doriti sa renuntati la widget tot ce trebuie sa faceti este sa va duceti la Aspect --> Elemente de pagina, sa gasiti gadget-ul cu numele LinkWithin (sub Postari de blog) si sa-l eliminati.


luni, 7 septembrie 2009

Cum sa faci un cuprins (TOC - Table of contents) al blogului

Aceast widget este un cuprins sau un sitemap al blogului, sau in engleza Table of contents - TOC.
Practic acest widget extrage toate link-urile (postarile) din blog si le aranjeaza ca pe un cuprins de carte. Intai este afisata categoria si sub ea toate postarile care fac parte din acea categorie. Se actualizeaza singura si pe deasupra indica si care sunt ultimele 10 postari prin afisarea in dreptul lor a cuvantului New!!

Widget creat de Table of Contents for Blogger.    Deschidere tab nou


Demo  Deschidere tab nou

Cum sa folositi acest widget

Un avantaj al acestui widget este ca functioneaza si daca codul este pus in postare prin metoda Adaugati Html. Deci puteti crea o pagina noua in care sa introduceti codul de mai jos, puteti sa-i dati un titlu de genul Cuprins sau Table of contents sau cum doriti voi, iar link-ul postarii sa-l puneti in meniul blogului. Ar fi bine ca pagina sa fie publicata cu o data mai in urma pentru a nu aparea pe prima pagina a blogului.

-->

Deci sa recapitulam. Daca vreti sa puneti acest widget pe blog trebuie sa urmati pasii de mai jos:

1. Ducati-va la Postare noua si dati un titlu paginii pe care o veti crea.
2. Dati clic pe Editati html pentru a intra in modul de scriere html.
3. In modul de scriere html a editorului copiati codul de mai jos.

<script style="text/javascript" src="http://cuprins-blog.googlecode.com/files/cuprins-blog.js"></script>
<script src="http://bloggerajutor.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Schimbati adresa blogului meu cu adresa voastra.

-->

4. Daca vreti ca postarea sa nu apara pe prima pagina a blogului dati clic pe link-ul "Optiuni de publicare" din partea de jos a editorului si bifati casuta "Planificat pentru". Apoi setati o data mai veche.

5.Publicati postarea.

6. Copiaza link-ul postari si adaugati-l in meniu.

sâmbătă, 5 septembrie 2009

Pune pe blog un set de bannere 125x125 pentru spatiu publicitar

Daca sunteti dintre acei bloggeri care au succes si vindeti spatiu publicitar pe blog atunci stiti ca cele mai folosite dimensiuni pentru banere sunt 125x125px.
Desi multi folosesc Css-ul pentru a plasa si controla banerele eu va voi arata un mod foarte simplu de a afisa anunturi 125x125 pe blog cu ajutorul tabelelor(table).


Duceti-va la Aspect --> Elemente de pagina --> Adaugati un obiect gadget si alegeti optiunea HTML/JavaScript.
In campul pentru continut adaugati codul de mai jos si salvati.:

<table align="center" border="0">
  <tbody>
    <tr>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg">
</td>
    </tr>
    <tr>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
    </tr>
  </tbody>
</table>
Acum de cate ori sunteti solicitati de catre advertiseri sa puneti bannerul lor pe blog, tot ce trebuie sa faceti este sa inlocuiti codul scris cu rosu cu codul pe care vi-l dau ei.




Daca sunteti norocosi si ati epuizat deja cele 4 spatii pentru publicitate, si vreti sa adaugati inca doua spatii, atunci copiati codul de mai jos dupa ultimul </tr> din cod

<tr>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
      <td align="center" height="126"
 width="126">
      <img src="http://i29.tinypic.com/w8wb3a.jpg"></td>
    </tr>

Dupa ce le adaugati pe blog ar fi bine sa inlocuiti 2 sau 3 poze cu alte bannere de la site-uri unde sunteti afiliati si sa lasati doar un singur banner cu Advertise here.Ar fi bine ca acest ultim banner sa duca catre o pagina de contact unde advertiserii sa poata sa va contacteze usor.




Puteti folosi si aceste bannere create de mine


     

Widget cu posturi la intamplare (random) pe Blogger

Am sa va prezint in continuare un nou widget creat de Blog Godown si pe care eu il consider foarte folositor, el crescand numarul de afisari ale blogului. Este la fel de important ca widget-ul cu Postari recente, dar cu deosebirea ca acesta aduce in atentia vizitatorilor si posturi mai vechi. Datorita functiei de a afisa posturi random acest widged poate afisa articole chiar si de la inceputul blogului.

Widget-ul poate afisa articolele in doua feluri:
1. Doar titlul postari
2. Titlul postari plus sumar (cate cuvinte doriti)

Instalarea este una foarte usoara, facandu-se prin metoda adaugarii unui obiect gadget.




Metoda 1
Adaugarea widget-ului doar cu titlul postarii



Urmati calea Aspect --> Elemente de pagina --> Adaugati un obiect gadget. Alegeti optiunea HTML/JavaScript si in campul pentru continut copiati codul de mai jos.
Puteti modifica numarul de postari care sunt afisate prin schimbarea vumarului 7 cu ce numar doriti.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=7;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
 }document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a href="http://www.bloggodown.com">Blog Godown </a></span>

Salvati.




Metoda 2
Adaugarea widgetului cu titlul si sumar



Urmati calea Aspect --> Elemente de pagina --> Adaugati un obiect gadget. Alegeti optiunea HTML/JavaScript si in campul pentru continut copiati codul de mai jos.
Puteti modifica numarul de postari care sunt afisate prin schimbarea vumarului 5 cu ce numar doriti.
Puteti modifica numarul de cuvinte care apar in sumar prin schimbarea numarului 10 cu ce numar doriti.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;var wordnumber=5;</script>
<script style="text/javascript" src="http://bloggertipspro.googlepages.com/random-posts-with-summary.js">
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a href="http://www.bloggodown.com">Blog Godown </a></span>

Salvati.

Nu uitati ca va puteti hosta singuri scripturile JavaScript prin metoda prezentata la aceasta pagina.

vineri, 28 august 2009

Adauga un buton "Back to top" si "Go down" la blog

Pentru cei care scriu articole lungi ori au setat sa apara pe prima pagina multe postari, acest mic widget este un lucru foarte folositor. Acesta te ajuta sa ajungi la inceputul paginii sau la sfarsitul ei printr-un singur clic.


Mai demult va aratam cum sa puneti un astfel de widget dar cu un singur buton: Back to top. Consider ca acesta este mult mai folositor datorita celui de-al doilea buton care are functia de a te duce la sfarsitul paginii dintr-un singur clic.



Deci cine vrea sa puna acest widget pe blog trebuie sa urmeze urmatorii pasi:

1. Logati-va in contul vostru Blogger si urmati calea Aspect --> Editati Html.
Aici trebuie sa gasiti acest cod (este chiar la sfarsitul codului sablonului):

</body>

si chiar inaintea lui adaugati urmatorul cod:

<a name='jos'/>

2. Navigati la Aspect --> Elemente de pagina si apoi dati clic pe Adaugati un obiect gadget. Alegeti optiunea Html/JavaScript si in campul pentru continut adaugati urmatorul cod:

<a style="display:scroll;
position:fixed;
bottom:50px;
right:5px;
" href="#" title="Back to Top">
<img src="http://i25.tinypic.com/b7zxgz.jpg"/></a>

<a style="display:scroll;
position:fixed;
bottom:15px;
right:5px;
" href="#jos" title="Go Down">
<img src="http://i25.tinypic.com/1z5kal2.jpg"/></a>

Daca vreti sa modificati distanta la care apare widget-ul fata de partea de jos a ecranului modificati cifrele scrise cu verde in cod.
Daca vreti sa schimbati imaginile nu trebuie decat sa inlocuiti adresa imaginii din cod, scrisa cu rosu, cu adresa imaginii voastre.
 Daca vreti ca imaginile sa apara in partea stanga doar schimbati cuvantul right din cod cu left.
Descarcati un set de 7 imagini pe care il puteti folosii. Descarcati imginile, alegeti ce set vreti sa folositi si punetile pe hostul vostru (http://tinypic.com). Folositi apoi link-ul direct al imaginilor.

Acum Salvati si verificati daca functioneaza.



Succes!

vineri, 21 august 2009

Widget Posturi asemanatoare cu thumbnails pe Blogger



Unul din cele mai cautate trucuri pentru Blogger ramane posibilitatea de a afisa la sfarsitul articolului un widget care sa afiseze articolele similare cu articolul citit. Acum catva timp va prezentam un widget cu posturi asemanatoare  care afiseaza link-uri din aceeasi categorie cu articolul citit.

duminică, 9 august 2009

Navigatie cu numere la sfarsitul posturilor in Blogger

 Update 02 februarie 2010
Intrati aici - Navigatie cu numere in Blogger - corectata
Aici gasiti acest truc corectat si functioneaza perfect

Spre deosebire de stilul de navigatie deja existent cu "Postari mai vechi si Postari mai noi", navigarea cu numere ofera un cu totul alt stil de a te misca prin multitudinea de postari pe care le strange un blogger de-a lungul timpului. Din pacate Blogger nu ofera alta posibilitate decat cea amintita mai sus.

Bloggeri din toata lumea s-au chinuit sa creeze un sistem de navigare cu numere precum cel din Wordpress si se pare ca au reusit. Dar in momentul acesta daca cauti pe net acest truc pentru al instala in sablonul propriu cu greu vei gasi unul care sa mearga. Pentru ca multi au copiat codul dintr-o parte si l-au pus in alta parte cu mici modificari care pana la urma au facut codul sa nu mai mearga si sa cauti pana inebunesti dupa un cod care sa faca treaba.

Acum catva timp, dupa multe cautari am gasit un cod care instalat functioneaza destul de bine. Si spun destul de bine pentru ca el mai are cateva probleme la care din pacate nu am gasit nici o rezolvare. Din aceasta cauza nu am facut inca un tutorial despre el. Problema ar fi ca atunci cand dai clic pe Next sau pe numarul urmator, mai sunt posturi pe care le sare, sau posturi care au fost in pagina trecuta se regasesc si in pagina urmatoare.

Si pentru ca am fost intrebat de foarte multe ori cum se pune navigatia cu numere, cu toate ca nu merge foarte bine, m-am hotarat sa fac totusi un tutorial despre acest truc.Voi scrie aici tot ce stiu despre script si din pacate daca voi fi intrebat de eventualele erori nu voi putea sa ajut pe nimeni.

Trucul are 2 modalitati de instalare, una mai usoara si una mai grea. Le voi prezenta pe amandoua, ramanand la alegerea voastra pe care sa o folositi.




1. Adaugarea trucului cu ajutorul gadget-ului Html/JavaScript
(varianta care este si pe blogul meu si este preluata de pe blogul Page Navigation Menu)

Dupa cum cred ca ati banuit aceasta este metoda usoara de adaugare a trucului si pasii de adaugare sunt acestia:

a) Logati-va in contul vostru Blogger si urmati calea Aspect --> Elemente de pagina.
b) Dati clic pe Adaugati un obiect gadget in footer.
c) Alegeti optiunea Html/JavaScrpt si in campul pentru continut adaugati codul de mai jos:
Deoarece codul este foarte lung l-am pus intr-un fisier text.

Descarcati codul si adaugati-l in obiectul gadget.

d) Pentru a modifica numarul de posturi care vor aparea in urmatoarea pagina trebuie sa gasiti urmatoarea linie de cod

var pageCount=5;

si sa schimbati numarul 5 cu ce numar doriti.

e) Salvati obiectul gadget apoi trageti-l sub coloana de postare. (vedeti poza de mai jos)
f) Clic pe salvati si apoi verificati cum arata si cum se comporta.






2. Adaugarea trucului prin editarea Html-ului sablonului.
(metoda modificata de Amanda dupa varianta originala)

Desi este ceva mai greu de instalat, cred ca trucul functioneaza mai bine prin aceast aceasta metoda.  Deci daca alegeti aceasta varianta iata ce trebuie sa faceti:

a) Urmati calea Aspect --> Editati Html si primul lucru pe care trebuie sa-l faceti este sa salvati o copie a sablonului in calculator. Asta in caz ca ceva nu merge cum trebuie sa puteti reveni la forma lui initiala.
b) Lasati nebifata casuta care extinde sablonul.
c) Cautati urmatorul cod (folositi Ctrl+F)

]]></b:skin>

si inaitea lui adaugati codul de mai jos

.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 adaugat reprezinta Css-ul codului JavaScript care va fi adaugat mai departe.
Cei care se pricep pot modifica aceasta parte pentru a arata asa cum isi doresc.

d) Mai departe vom adauga codul JavaScript.
Gasiti urmatorul grup de coduri:

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

si imediat dupa tagul de inchidere : </b:section>  adaugati codul de mai jos.

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

var pageCount = 5;
var displayPageNum = 5;
var upPageWord = &#39;Previous&#39;;
var downPageWord = &#39;Next&#39;;



var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

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!=&#39;&#39;){
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] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=&#39;&#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

e) Dupa ce ati adaugat acest cod dati clic pe Previzualizati, si desi nu veti vedea schimbarea in acest mod, veti sti daca ati adaugat codul cum trebuie.
f) Inainte de a salva sablonul aveti posibilitatea de a modifica numarul de posturi care vor apare pe fiecare pagina si numarul de link-uri care vor apare in meniul de navigatie.

var pageCount = 5;  - modifica numarul de posturi
var displayPageNum = 5;   - modifica numarul de link-uri.

g) Salvati.

sâmbătă, 1 august 2009

Widget cu Top comentatori cu backlinks pentru Blogger

Cu ceva timp in urma am prezentat un widget care arata un clasament al celor mai buni comentatori pe blog. Acel widget afisa in sidebar un top al celor mai buni comentatori si link catre fiecare comentariu.

Widget creat de Top Commentator Widget for Blogger with Backlinks

Astazi va voi arata un widget asemanator, care foloseste aceeasi metoda de a obtine topul, dar numele comentatorilor care apar in sidebar au link catre propriu lor blog. Pentru ca link-ul sa duca catre blogul lor este necesar ca cei care comenteaza sa aleaga varianta Nume/Adresa URL, si nu varianta cu profilul lor pe Blogger pentru ca comentand astfel widget-ul va arata un link catre profilul lor .

Un link catre blogul lor in sidebarul unui blog cu siguranta va face vizitatorii care au un blog sa comenteze mai des pe blogul vostru, asa ca acest widget este o foarte buna metoda de a face oamenii sa comenteze.




Deci, daca vreti sa puneti acest widget pe blogul vostru nu trebuie decat sa adaugati codul de mai jos intr-un gadget html/javascript. Pentru a face asta trebuie sa va logati in contul vostru Blogger - blogspot si sa urmati calea 'Aspect --> Elemente de pagina', aici dati clic pe 'Adaugati un obiect gadget' si din pagina deschisa alegeti optiunea Html/JavaScript. Dati un titlu gadget-ului iar in campul pentru continut adaugati codul de mai jos.

Atentie:
Nu uitati sa inlocuiti adresa blogului meu cu a blogului vostru, si Nu folositi http:// sau www.
Numarul 10 din cod scris cu verde este numarul de nume care vor aparea in widget. Schimbati-l cu ce numar vreti voi.
Cuvantul Anonim din cod este numele care nu v-a apare in widget. Deci daca vreti ca un nume de comentator sa nu apara in widget doar inlocuiti Anonim cu ce nume doriti, sau daca vreti ca numele vostru sa nu apara acolo inlocuiti-l cu numele vostru cu care va semnati in comentarii.

<script type="text/javascript">
function pipeCallback(obj) {
 document.write('<ol>');
 var i;
 for (i = 0; i < obj.count ; i++)
 {
 var href = "'" + obj.value.items[i].link + "'";
 var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
 document.write(item);
 }
 document.write('</ol>');
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=918c4b96efdf63fee389f2f025085904&EntertheURL=http%3A%2F%2Fbloggerajutor.blogspot.com&number=10&Nametobeexcluded=Anonim" type="text/javascript"></script>

Acum doar salvati gadgetul si sa vedeti cum arata pe blog.

joi, 30 iulie 2009

Pune un widget cu cele mai populare posturi pe Blogger

In utima vreme am fost intrebat tot mai des daca stiu vreun widget care sa afiseze cele mai populare posturi din blog. Cautand pe net am gasit o gramada de astfel de widget-uri, dar din pacate majoritatea nu functionau.

Totusi am gasit si un widget care merge. El arata ca in poza de mai jos iar aici este blogul autorului. BloggerStop.net



Acest widget se bazeaza pe un Javascript care cu ajutorul Yahoo Pipes gaseste numarul de comentarii pe care le are un post apoi afisandu-le in acest widget in ordine descrescatoare.

Pentru a adauga acest widget pe blogul vostru blogspot nu trebuie decat sa adaugati un cod intr-un gadget html/javascript. Deci urmati calea 'Aspect --> Elemente de pagina' si apoi dati clic pe 'Adauga un obiect gadget'. Din lista care apare alegeti optiunea 'Html/JavaScript'  si copiati codul de mai jos in campul pentru continut.

Inainte de a va arata codul vreau sa va spun ca sunt doua metode de a afisa link-urile catre postare si deci tot 2 coduri care sa produca cele 2 tipuri de widget-uri. Puteti alege metoda care vreti.

Important:
Nu uitati sa schimbati adresa blogului meu cu a voastra.
Nu folositi http://.
Numarul scris cu verde este numarul de link-uri care vor aparea in widget si il puteti modifica dupa cum doriti.
Acest cod creaza fundalul widget-ului:

background-color:#FFFFFF;

modificati-l cum doriti pentru a arata bine in blogul vostru.

Daca vreti ca link-urile sa arate asa:

  • Cea mai comentata postare (28)
  • A doua postare (21)
  • A trea postare (12)
copiati codul de mai jos.

<div style="background-color:#FFFFFF;padding:5px;">
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a7d3195528df5e96181a3d2712266226&url=http%3A%2F%2Fbloggerajutor.blogspot.com&num=10" type="text/javascript"></script>
</div>


Daca vreti ca link-urile voastre sa arate asa

  • Cea mai comentata postare
  • A doua postare
  • A trea postare

copiati acest cod:

<div style="background-color:#FFFFFF;padding:5px;">
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=28a6afad7c6ba1288c1b738277e42385&url=http%3A%2F%2Fbloggerajutor.blogspot.com&num=10" type="text/javascript"></script>
</div>



vineri, 24 iulie 2009

Widget cu Social Bookmarks dupa fiecare postare pe Blogger

De ceva timp am observat ca site-urile de social bookmarks gen Digg.com, Twitter.com, Reddit.com, Delicious.com si alte cateva au inceput sa fie folosite tot mai des si de bloggerii din Romania. E adevarat ca blogurile in limba romana nu au asa de multe avantaje ca blogurile scrise in engleza, dar dupa cate am observat pe un alt blog al meu, bookmark-uri se fac si la posturi in romana. Acum depinde cat de bine sunt scrise si posturile pentru ca numai calitatea lor pot face un vizitator sa salveze un articol, sau sa-l trimita spre votare pe site-uri precum Digg.



Widget creat de Social bookmarking widget

Si ca sa nu mai lungim vorba, iata ce trebuie sa faceti pentru a pune acest widget pe blogul vostru Blogger - Blogspot:

1. Conectati-va in contul vostru Blogger si urmati calea Aspect --> Editati Html. Aici primul lucru pe care trebuie sa il faceti este de a salva o copie a sablonului in calculator, pentru ca daca ceva nu v-a merge cum trebuie sa puteti reveni  la forma lui actuala.

Bifati casuta care extinte sablonul, si cautati (Ctrl+F) codul : </head> si imediat dupa el adaugati urmatorul cod:

<script src='http://files.bloggerplugins.org/simpletricks.js'></script>




2. Dupa ce am incheiat pasul 1 trebuie sa adaugam si cel de-al doilea cod.
Puteti adauga codul dupa una din cele 3 linii de cod de mai jos:

<div class='post-footer-line post-footer-line-1'>
cod aici

<div class='post-footer-line post-footer-line-2'>
sau aici

<p class='post-footer-line post-footer-line-3'>
sau aici

Vedeti unde arata mai bine.

Download cod

Acum previzualizati si daca sub post se vad iconitele de la widget inseamna ca ati reusit. Salvati sablonul si incercati widget-ul.


miercuri, 22 iulie 2009

Adauga si celelalte gadget-uri oferite de Blogger


Astazi mi-am cumparat pesti; dati clic pe acvariul meu de mai jos sau in sidebar daca mai este instalat pentru a hrani pestii.
Era o gluma evident, ca nu i-am cumparat ci mi i-a dat Blogger. Pai sa vedeti cum am reusit sa fac asta. Astazi ma uitam pe Blogger in draft sa vad daca au mai scos baietii astia vreun gadget nou si cum la Elemente de baza nu era nimic nou, am zis sa ma uit si la celelalte.





De obicei nu prea se uita lumea pe la ele, asa cum nici eu nu prea o fac, dar cand am intrat am gasit alte cateva gadget-uri destul de intertesante si usor de adaugat in sidebar precum cele de baza.

De exemplu la categoria "Prezentat"  gasim 4 widget-uri create de Blogger Buster, care va da posibilitatea sa adaugati in sidebar widget-uri cu Recent PostsTwitter Updates, Recent Comments, sau Picasa Photostream. Toate cele 4 widget-uri sunt usor de adaugat si foarte usor de personalizat.

La categoria "Mai multe gadgeturi" am mai remarcat pe a doua pagina widget-ul "Recent Posts"  creat de Blogger Widgets, care pe langa titlul postarii poti adauga si un sumar al articolului, poti adauga numarul de comentarii la posturi si chiar poti seta sa afiseze poza din post in format mic (thumbnails).

Ar mai fi un calendar de adaugat, un countdown si desigur widget-ul cu pestii. Acesta mi s-a parut foarte dragut, mai ales ca eu sunt fan al aplicatiilor in flash. Acest widget te lasa sa alegi pana la 10 pesti de orice culoare doresti si te lasa sa pui orice poza drept fundal.

Cam astea ar fi cele mai interesante gadget-uri pe care Blogger ni le ofera, dar noi nu prea stim de ele.

duminică, 12 iulie 2009

Widget pentru Blogger cu Ultimele postari pe blog

Acum ceva timp scriam despre importanta unui widged cu ultimele postari pe blog si aratam si cum sa puneti unul pe blog.

Acum va voi arata un widget cu ultimele postari de pe blog creat cu ajutorul Google Api. Acest widget se foloseste tot de feed-ul default de la blogger dar posturile sunt extrase cu ajutorul unui JavaScript. Widget-ul afiseaza ultimele 4 postari de pe blog luandu-le pe fiecare in parte si aratand si cateva cuvinte din articol. Mai jos aveti o poza cu widget-ul asa cum arata el.

Din pacate el arata bine doar pe blogurile cu sidebar de culoare alba si cu o latime de peste 300 de pixeli. Pentru ceilalti incerc sa modific partea de Css din acest cod pentru al face sa arate bine si pe alte culori.


vineri, 10 iulie 2009

Adauga un widget cu Ultimele comentarii pe blog

Acum catva timp am facut un post despre cum sa adaugi un gadget cu comentarii recente pe Blogger, deci nu voi mai vorbi despre importanta acestui widget.

De curand am dat peste un alt site (Tips for New Bloggers) care prezinta un alt mod de a afisa ultimele comentarii pe blog. Acest widget foloseste un script JavaScript pentru a extrage din feed ultimele comentarii de pe blog. Modul de afisare este altfel, un pic mai bine zic eu decat in modul clasic, asa ca poate vreti sa-l folositi pe acesta.

Widget-ul arata asa:




luni, 6 iulie 2009

Blogger - Widget cu Total posturi si comentarii pe blog

Acest widget pentru blogurile de pe Blogger se adauga in sidebar si arata numarul total de posturi si comentarii de pe blog. Se foloseste de feed-ul default al blogului pentru a extrage numarul de postari si numarul de comentarii, deci trebuie sa aveti activat feed-ul blogului pe una din variante "Complet" sau "Pe scurt".

Widget-ul este gasit aici (total comment count in blogger) si modificat de mine prin adaugarea catorva elemente CSS pentru a arata cum doresc eu.

Widget-ul arata asa:


Deci daca doriti acest widget pe blogul vostru blogspot, in prima faza trebuie sa va conectati in contul vostru Blogger si apoi sa urmati calea "Aspect --> Elemente de pagina --> Adaugati un obiect gadget". Din pagina deschisa alegeti "HTML/JavaScript" si puneti un titlu, oricare doriti.

Post la intamplare (random post) in Blogger

Oarecum o idee interesanta ar fi sa pui in sidebar un widget cu posturi la intamplare (random post). Ideea ar fi ca, daca dai clic pe acel link sa se afiseze un articol la intamplare din blogul tau.





Daca doriti sa faceti asta, urmati calea "Aspect --> Elemente de pagina" si dati clic pe "Adauga un obiect gadget". Din lista de gadget-uri alegeti "HTML/JavaScript".

Dati un titlu gadget-ului, de tipul Post la intamplare sau Random post, sau daca vreti puteti sa-l lasati gol. In campul pentru continut adaugati urmatorul cod: