Un produs Blogger.

Din partea casei:

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

Adauga efect de ninsoare in blog blogspot

Pentru toti aceia care detin un blog se la blogspot pot afla din citirea acestui post cum isi pot adauga in blogspot blog un widget ce are ca drept utilizare efectul de ninsoare - zapada in sablonul blog-ului.Puteti vedea efectul acestei adaugari chiar aici si acum in timp ce citesti acest post.Daca iti place efectul de nisoare -zapada si doresti sa "ninga" fara oprire si in blog-ul tau poti adauga acest efect printr-un simplu clik pe imaginea de mai jos.
Dincolo de efect transmiti cititorilor si vizitatorilor blog-ului tau si ideea de prezenta in online a ta, deci esti conectat atat la vremea de afara cat si la timpul online prin vizualizare si postare in blog.

Adauga printr-un simplu click pe imaginea de mai jos un efect de ninsoare in blog-ul tau blogspot 






Nota: Avand in vedere ca este luna decembrie vor urma o serie de postari - "cadouri" care vor incerca sa va "trezeasca" blog-ul in acest timp prin diferite widget-uri si chestii noi avand ca tag aceasta luna a sarbatorilor.

Adauga widget Paginator in blogspot blog-ul tau

Am uitat sa mai postam si subiecte cu tenta widget blogspot blog.Astazi va invit sa descoperim impreuna o modalitate de paginare pentru blogspot blog-ul tau [si al meu ].Paginarea blog-ului se poate utiliza in momentul in care nr de postari depasesc un anumit numar astfel incat sa le fie usr celor care iti viziteaza/citesc blogul.:)

Pentru a instala acest design paginator in blog blogspot , urmati urmatorii pasi :


Pasul [1] Intra in contul tau de blog blogger.com >> Aspect >> Editati HTML si bifeaza casuta din colt dreapta al sablonului in dreptul caruia scria : "Extindeti sabloanele control

Pasul [2] Cautati (Ctrl+F) aceasta linie de cod :


]]></b:skin>


Pasul [3] Adauga codul de mai jos chiar inainte codului de la pasul [2]
/* Contenedor */


.showpageArea a {
text-decoration:underline;
background: #ffffff;
padding: 10px 10px 10px 10px;
font-size:11px;
font-weight:bold;
}


/* Rectangulos */


.showpageNum a {
text-decoration:none;
border: 1px solid #9aafe5;
margin:0 1px;
padding:3px 4px;
}


/* Rectangulos al pasar el ratón */


.showpageNum a:hover {
border: 1px solid #9aafe5;
background-color:#33CCFF;
color:#fff
}


/* Página activa */


.showpagePoint {
color:#fff;
text-decoration:none;
border: 1px solid #2e6ab1;
background: #2e6ab1;
margin:0 1px;
padding:3px 4px;
font-size:11px;
font-weight:bold;
}


/* Texto total de páginas */


.showpageOf {
text-decoration:none;
padding:3px 4px;
margin: 0 1px 0 0;
}


/* Inapoi si Inainte */


.showpage a {
text-decoration:none;
border: 1px solid #9aafe5;
padding:3px 4px;
}


/* Inapoi si inainte */


.showpage a:hover {
text-decoration:none;
color: #33CCFF;
}


Pasul [4] Cautati (Ctrl+F) aceasta linie de cod :


</body>

Pasul [5] Adaugati codul de mai jos inaintea codului gasit la pasul [4]

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=3;
var upPageWord =&#39;&#171; Inapoi&#39;;
var downPageWord =&#39;Inainte &#187;&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;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+'&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){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){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++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #2e6ab1;" class="showpageOf"> Total: ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-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 labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&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){upPageHtml=labelHtml+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){html=labelHtml+'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++}}}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>';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}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script></b:if></b:if>
Pasul [6] Salvati
Puteti vedea un exemplu in procesul utilizarii acestui paginator pentru blogspot blog printr-un click aici

Adauga buton oficial tweet in blog blogspot

Butoane oficiale / oficializate de catre twitter pentru cele 2 platforme existente in primele preferinte ale internautilor - Blogspot si Wordpress.


Pasii de urmat pentru adaugarea in blog blogspot a celor 3 modele de butoane twitter sunt asemanatori cu cei de la postarea Adauga buton Retweet in blogspot blog.


Cum adaugi Butoane oficiale twitter blog blogspot
Prima deslusire a acestui mister de adaugare a unui buton oficial twitter in blog blogspot poate sa inceapa direct de pe site twitter - tweetbutton

Pentru a instala noul buton tweet in blog blogspot , urmati urmatorii pasi :

Pasul [1] Intra in contul tau de blog blogger.com >> Aspect >> Editati HTML si bifeaza casuta din colt dreapta al sablonului in dreptul caruia scria : "Extindeti sabloanele control".



Pasul [2] Cautati (Ctrl+F) aceasta linie de cod :

<data:post.body/>

Pasul [3] Inlocuieste codul de linie gasit mai sus cu unul din cele 3 coduri in functie de preferinta alegerii tale la una din formele acestor 3 butoane tweet :



Model 1
Adauga butoane oficiale tweet de la twitter
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="bloggeron">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<data:post.body/>

Model 2
model 2 buton oficial tweet de la twitter
<a href="http://twitter.com/share" class="twitter-share-button" data-count="Horizontal" data-via="bloggeron">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<data:post.body/>




Model 3
model 3 cum adaugi un buton tweet oficial in blogspot
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="bloggeron">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<data:post.body/>

Pasul [4] Salveaza.

Nota: Inlocuieste ceea ce scrie cu albastru " bloggeron" cu id tau de twitter.

Demonstratie afisare butoane tweet :
:


Model 1

Model 2

Model 3

Calificativ pentru articole blog blogspot

Postezi in diferite momente in functie de inspiratie sau preferinte si doresti pe langa citirea posturilor sa observi si reactia cititorilor / vizitatorilor blogului tau?Cred ca dupa citirea unui articol de pe blogul prietenilor prima reactie pe care o putem avea este aceea de a ne d cu parerea despre acel post : este ok , imi place sau nu, nu este ok..Poti adauga aceasta optiune "imi place" sau "nu imi place" articolul citit prin adaugarea celor 2 linii de cod scrise mai jos.
Inainte de a adauga te invit sa intri aici si sa vezi daca aceasta noua caracteristica adaugata blogului tau te poate avantaja sau nu.Dupa cum observi in dreptul fiecarui titlu exista prin adaugarea celor 2 linii de cod existente mai jos formarea unei optiuni de preferinta la adresa articolelor.


Cum poti adauga aceasta optiune in blog blogspot?
Pasul [1] Intra in contul tau de blog blogger.com >> Aspect >> Editati HTML si bifeaza casuta din colt dreapta al sablonului in dreptul caruia scria : "Extindeti sabloanele control".


Pasul [2] Cautati (Ctrl+F) aceasta linie de cod :
<div class='post-header-line-1'/>


Pasul [3] Inaintea acestei linii gasite la pasul [2] adauga acest cod:


<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating"
expr:path="data:post.url"
expr:permalink="data:post.url"
expr:title="data:post.title" view="score">
</div>


Pasul [4] Acum cauta aceasta linie de cod in sablonul tau :
</body>


Pasul [5] Inaintea acestei linii de cod gasita la pasul [4] adauga acest cod:
<script src="http://js-kit.com/ratings.js"></script>


Pasul [6] Salvati.

Widget Panoramio permite adaugarea de fotografii din întreaga lume direct in blogspot blog

O noua caracteristica lansata saptamana trecuta de catre Blogger este API Panoramio. Desi nu este un widget foarte util pentru blogspot blog, este foarte frumos, ne permite sa aratam peisaje din toata lumea prin imagini trimise de utilizatorii de pe Internet -Panoramio Widget vă permite să adăugaţi fotografii din întreaga lume direct in blogspot blog-ul (blog-ul Blogger )
Pentru a adauga acest widget in blogspot blog-ul tau ( special dedicat pentru iubitorii de fotografii ) intra in contul tau de blogger >> Design >> Adăugaţi un obiect gadget >> copiati codul de mai jos:
<iframe src="http://www.panoramio.com/wapi/template/slideshow.html?tag=romania&width=450&height=400&delay=6.5" frameborder="0" width="450" height="400" scrolling="no" marginwidth="0" marginheight="0"> </iframe>


De retinut :
Puteti schimba ceea ce scrie cu rosu cu orice alta eticheta ( tag ).Se mai poate modifica si dimensiunile de afisare - schimba dimensiunea numerelor scrise cu albastru.

Adauga un scroll top in blogspot blog


Cum poti adauga un scroll top in blogspot blog-ul tau?Urmareste pasii de mai jos dar nu inainte de a intra aici sa vezi daca adaugarea in blog te ajuta sau nu.Nu mai adaugati fel de fel de widget-uri si coduri doar de dragul de a le avea insirate in blog.

Pasul [1] Intra in contul tau de blog blogger.com >> Aspect >> Editati HTML si bifeaza casuta din colt dreapta al sablonului in dreptul caruia scria : "Extindeti sabloanele control".
Pasul [2] Cautati aceasta linie de cod :

</head>
Pasul [3] Inaintea acestei linii adaugati acest cod :
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->
Pasul [4] Acum cautati aceasta linie de cod :
</body>
Pasul [5] Inaintea acestei linii adaugati acest cod :
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='sus' border='0' src='http://img40.imageshack.us/img40/9397/arribar.png' style='position:fixed; bottom:0; right:0;'/></a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='jos' border='0' src='http://img338.imageshack.us/img338/5733/abajov.png style='position:fixed; bottom:40px; right:0;'/></a>
Pasul [6] Salvati.
Adauga un scroll top in blogspot blogAdauga un scroll top in blogspot blog

Nota: Se pot face mici modificari si adaugari.
Poti schimba ceea ce scrie cu rosu cu alte imagini alese de tine si incarcate cu ajutorul imageshack sau tinypic.com
Daca doresti alte imagini cu " sageti" poti incerca aceste 2 site:
Icon Finder
IconLook

Widget share in peste 300 de retele sociale folosind addthis.com

Pentru cei care sunt interesati de a adauga in blog-ul lor un widget share in peste 300 de retele sociale folosind addthis.com atunci acest stil nou este ideal.Articolele trimise de catre cititorii lor in retelele in care sunt inscrisui sunt cele din Twitter sau Facebook.Tu cand intri pe un blog trimiti respectivul articol in reteaua twitter printr-un link sau in Facebook?Foarte rar.De felul cu arata si locul unde ai adaugat in blog acest share de articole conteaza foarte mult si trimiterea de catre cititori a informatiei gasite pe blog mai departe.Nu ai cum sa le arati decat printr-o pozitionare cat mai vizibila si de preferat in centru.Cu acest widget share oferi celor care iti viziteaza blogul motive in plus de a-ti trimite articolele mai departe.Vezi aici un Demo
Model nou de share pentru blog blogspot

Adaugarea acestui widget share si in blogul tau se poate face prin adaugarea unui simplu cod dupa cum urmeaza :
Pasul [1] Intra in contul tau de blog blogger.com >> Aspect >> Adăugaţi un obiect gadget >> HTML/JavaScript .
Pasul [2] Acum copiati codul de mai jos >> click pe "Adaugatiun obiect gadget" >> HTML/JavaScript si in aceatsa casuta introduceti acest cod :
<style type="text/css">
#sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
#dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
.dock-container { position: relative; background:url() no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
.dock-container .custom_images a { display: block; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
.dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
</style>

<div id="sharedock">
<div id="dock">
<div class="dock-container">

<div class="addthis_toolbox">

<div class="custom_images">

<a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
<a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
<a href="http://99bloguri.blogspot.com/" target="_top"><img src="http://i39.tinypic.com/2efti68.jpg" border="0" alt="Share to 99bloguri" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>

<a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
</div>
</div>
</div>
</div>
</div>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
<script type="text/javascript">
$(function () {
// Dock initialize
$('#dock').Fisheye(
{
maxWidth: 30,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 50,
proximity: 60,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
);
});
</script>
Pasul [4] Salvati.

Advertisements

Advertisements