Σ' αυτό το post θα σας δείξω πως να βάλετε και εσείς στο blog σας αυτό το εκπληκτικό slider που φαίνεται στην παρακάτω εικόνα! Να σας πω ακόμη ότι εκτός από το γεγονός ότι είναι ένα φανταστικό στολίδι για το blog σας, είναι επίσης και πολύ χρήσιμο μιας και μπορείτε να το χρησιμοποιήσετε και ως Popular Post Slider. Δηλαδή κάτω από κάθε εικόνα να προσθέσετε και μια περιγραφή από κάποιο σας post και να δημιουργήσετε ένα σύνδεσμο με το post αυτό, ώστε όταν οι επισκέπτες σας κάνουν κλικ να στην ανάλογη εικόνα να τους παραπέμπει εκεί! Να σας πω ακόμη ότι τους κωδικές τους βρήκα στο Blogger-Help.

 1. Συνδεθητε στο blogger-->Σχεδίαση-->Επεξεργασία HTML
 2. Με την βοήθεια ctrl+F ψάξτε για το ]]></b:skin>
 3. Έπειτα αντιγράψτε τον παρακάτω κώδικα και κάντε τον επικόλληση πριν από αυτό .
/* START
--------------------------------------------------------------------
 Roundabout Content Slider using jQuery for blogger
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Roundabout
*/

#featured                            {margin:10px 0 30px 0;}
#folio_scroller_container            {margin-top:35px; margin-bottom:40px; height:auto;}
#folio_scroller_container .roundabout-holder {list-style:none; height:400px; margin:0px auto 20px auto;}
.roundabout-holder                    {list-style:none; width:400px; height:250px; margin:0px auto;}
.roundabout-moveable-item             {font-size:12px!important;
/* Resize Image*/
height:180px;
width:350px;
/*-------------*/
cursor:pointer; padding:5px; border:1px solid #aaaaaa; -webkit-border-radius:5px; -moz-border-radius:5px; background:#f9f9f9;}
.roundabout-moveable-item img         {height:100%; width:100%; background-color:#FFFFFF; margin:0;}
.roundabout-in-focus                 {cursor:auto;}
.roundabout-in-focus:hover            {-webkit-box-shadow:0px 0px 20px #787878; -moz-box-shadow:0px 0px 20px #787878; background:#f9f9f9;}
.roundabout-holder span                {display:none; font-size:12px;}
.roundabout-in-focus:hover span        {display:inline; position:absolute; bottom:5px; right:5px; padding:8px 20px; background:#f9f9f9; color:#000000; z-index:999; -webkit-border-top-left-radius: 5px; -moz-border-radius-topLeft: 5px; font-size : 12px;border-left:1px solid #aaaaaa; border-top:1px solid #aaaaaa; }
.roundabout a:active,
.roundabout a:focus,
.roundabout a:visited                {outline:none; text-decoration:none;}
.roundabou li                         {margin:0}
a img                                {border:none; outline:0;}

/* END
--------------------------------------------------------------------
 Roundabout Content Slider using jQuery
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Roundabout
*/
 4. Με την βοήθεια ξανά ctrl+F ψάξτε για το </body> και κάντε επικόλληση τον παρακάτω κώδικα μετά από αυτό.
<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/jquery.roundabout-1.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 jQuery(document).ready(function($) {
 var interval;
 $('#featured ul')
 .roundabout({
 duration: 600 }
 )
 .hover(
 function() {
 // oh no, it's the cops!
 clearInterval(interval);
 },
 function() {
 // false alarm: PARTY!
 interval = startAutoPlay();
 }
 );
 // let's get this party started
 interval = startAutoPlay();
 });
 function startAutoPlay() {
 return setInterval(function() {
 jQuery('#featured ul').roundabout_animateToNextChild();
 }, 5000);
 }
 </script>
 5. Αποθηκεύστε το πρότυπο σας!
 6. Τώρα πρέπει να προσθέσετε το widget. Πηγαίνετε Σχεδίαση-->Προσθήκη Gadget-->HTML/Java Script αντιγράφετε τον παρακάτω κώδικα και τον κάνετε επικόλληση μέσα σ' αυτό.
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-roundabout.js"></script><script style="text/javascript">
 var numposts_gal = 6;
 var random_posts = false;
</script>
<script src="http://YOUR_BLOG_HOME_PAGE_URL/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
 7. Μην ξεχάσετε εκεί που λέει στον κώδικα YOUR_BLOG_HOME_PAGE_URL να το αντικαταστήσετε με την διεύθυνση url του blog σας, από το οποίο θα παίρνει τα δεδομένα για να εμφανίζει τις αναρτήσεις. Αποθηκεύστε και είστε έτοιμου.

▼ Read More ▼

 1. Συνδεθητε στο blogger-->Σχεδίαση-->Προσθήκη Gadget-->HTML/Java Script
 2. Τώρα το μόνο που έχετε να κάνετε είναι να αντιγράψετε τον παρακάτω κώδικα και να τον κάνετε επικόλληση.
Enter your username and password to enter your Blogger Dasboard <br/><br/><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Username: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></form> 
 3. Πατήστε αποθήκευση και είστε έτυμοι! Δείτε πως θα είναι το widget πραγματικά ακριβώς από κάτω!
Enter your username and password to enter your Blogger Dasboard


▼ Read More ▼
▼ Read More ▼
▼ Read More ▼

Σε αυτήν την ανάρτηση θα σας δείξω πως μπορείτε να προσθέσετε ένα Scroll to Top Button χρησιμοποιώντας Jquery στο blogspot σας. Το Scroll to Top Button είναι ένα κουμπί που εμφανίζεται στην σελίδα σας όταν ο αναγνώστης τείνει να κατέβει προς τα κάτω. Όταν όμως βρίσκεται στο top, στη κορυφή δηλαδή της σελίδα σας, αυτό εξαφανίζετε απαλά χωρίς να του τραβήξει ιδιαίτερα την προσοχή. Το Scroll to Top Button θα μπορούσαμε να πούμε ότι είναι μια πιο βελτιωμένη έκδοση του Back To Top Button που σας είχα δείξει σε αυτή εδώ την ανάρτηση http://gameplay24.blogspot.com/2010/05/go-to-top-button-go-to-end-button.html. Σε αντίθεση λοιπόν με το Back To Top Button στο Scroll to Top Button όταν ο αναγνώστης κάνει κλικ πάνω του, η σελίδα ρολάρει αργά προς τα πάνω δίνοντας έτσι ένα αρκετά όμορφο αποτέλεσμα που κερδίζει τους αναγνώστες σας.

Για να το προσθέσετε στο blogspot σας ακολουθήστε τα παρακάτω βήματα :
 1. Συνδεθείτε στον blogger λογαριασμό σας >> Σχεδίαση >> Επεξεργασία HTML
 2. Με την βοήθεια του Ctrl+F βρίσκετε το </body> και προσθέτετε τον παρακάτω κώδικα ΠΡΙΝ από αυτό.

<a href=”#” id=”toTop”>^ Scroll to Top</a>
 3. Τώρα βρείτε το ]]></b:skin> και προσθέτετε τον παρακάτω κώδικα ΠΡΙΝ από αυτό.
/* to top */
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
 4. Τέλος βρείτε το </body> και προσθέτετε τον παρακάτω κώδικα ΠΡΙΝ από αυτό
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’></script>
<script type=’text/javascript’>
/*———————–
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive “Scroll to Top” link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
———————–*/

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(“href”);if($(window).scrollTop()!=”0″){$(this).fadeIn(“slow”)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==”0″){$(scrollDiv).fadeOut(“slow”)}else{$(scrollDiv).fadeIn(“slow”)}});$(this).click(function(){$(“html, body”).animate({scrollTop:0},”slow”)})}});

$(function() { $(“#toTop”).scrollToTop(); }); </script>

 5. Πατάτε αποθήκευση και είστε έτοιμοι.

▼ Read More ▼

 1. Συνδεθητε στο blogger-->Σχεδίαση-->Επεξεργασία HTML
 2. Με την βοήθεια ctrl+F ψάξτε για το ]]></b:skin>
 3. Έπειτα αντιγράψτε τον παρακάτω κώδικα και κάντε τον επικόλληση μετά από αυτό .
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(3(C){C.8={3o:{19:3(E,F,H){6 G=C.8[E].1h;21(6 D 3p H){G.1I[D]=G.1I[D]||[];G.1I[D].28([F,H[D]])}},2P:3(D,F,E){6 H=D.1I[F];5(!H){7}21(6 G=0;G<H.k;G++){5(D.b[H[G][0]]){H[G][1].1H(D.c,E)}}}},1l:{},n:3(D){5(C.8.1l[D]){7 C.8.1l[D]}6 E=C(\'<2a 3s="8-3r">\').j(D).n({3q:"3i",2g:"-2A",3g:"-2A",1r:"1w"}).22("2C");C.8.1l[D]=!!((!(/3I|3P/).12(E.n("3z"))||(/^[1-9]/).12(E.n("2T"))||(/^[1-9]/).12(E.n("2E"))||!(/2v/).12(E.n("3w"))||!(/3S|3C\\(0, 0, 0, 0\\)/).12(E.n("3D"))));3E{C("2C").2w(0).3B(E.2w(0))}3x(F){}7 C.8.1l[D]},3y:3(D){C(D).v("1p","2I").n("2q","2v")},3H:3(D){C(D).v("1p","3O").n("2q","")},3Q:3(G,E){6 D=/2g/.12(E||"2g")?"3N":"3M",F=e;5(G[D]>0){7 t}G[D]=1;F=G[D]>0?t:e;G[D]=0;7 F}};6 B=C.2e.W;C.2e.W=3(){C("*",2).19(2).z("W");7 B.1H(2,2M)};3 A(E,F,G){6 D=C[E][F].35||[];D=(1F D=="1E"?D.2h(/,?\\s+/):D);7(C.1j(G,D)!=-1)}C.1i=3(E,D){6 F=E.2h(".")[0];E=E.2h(".")[1];C.2e[E]=3(J){6 H=(1F J=="1E"),I=2D.1h.3J.2P(2M,1);5(H&&A(F,E,J)){6 G=C.i(2[0],E);7(G?G[J].1H(G,I):1n)}7 2.14(3(){6 K=C.i(2,E);5(H&&K&&C.3v(K[J])){K[J].1H(K,I)}o{5(!H){C.i(2,E,3e C[F][E](2,J))}}})};C[F][E]=3(I,H){6 G=2;2.15=E;2.2H=F+"-"+E;2.b=C.1A({},C.1i.1k,C[F][E].1k,H);2.c=C(I).u("1e."+E,3(L,J,K){7 G.1e(J,K)}).u("2j."+E,3(K,J){7 G.2j(J)}).u("W",3(){7 G.1b()});2.23()};C[F][E].1h=C.1A({},C.1i.1h,D)};C.1i.1h={23:3(){},1b:3(){2.c.1q(2.15)},2j:3(D){7 2.b[D]},1e:3(D,E){2.b[D]=E;5(D=="f"){2.c[E?"j":"r"](2.2H+"-f")}},1X:3(){2.1e("f",e)},1P:3(){2.1e("f",t)}};C.1i.1k={f:e};C.8.2J={3h:3(){6 D=2;2.c.u("3d."+2.15,3(E){7 D.2G(E)});5(C.x.13){2.2K=2.c.v("1p");2.c.v("1p","2I")}2.3c=e},38:3(){2.c.16("."+2.15);(C.x.13&&2.c.v("1p",2.2K))},2G:3(F){(2.V&&2.1o(F));2.1C=F;6 E=2,G=(F.39==1),D=(1F 2.b.25=="1E"?C(F.2f).2x().19(F.2f).y(2.b.25).k:e);5(!G||D||!2.2S(F)){7 t}2.1D=!2.b.26;5(!2.1D){2.3a=1x(3(){E.1D=t},2.b.26)}5(2.2m(F)&&2.1T(F)){2.V=(2.1U(F)!==e);5(!2.V){F.3b();7 t}}2.2n=3(H){7 E.2r(H)};2.2l=3(H){7 E.1o(H)};C(2N).u("2O."+2.15,2.2n).u("2t."+2.15,2.2l);7 e},2r:3(D){5(C.x.13&&!D.3j){7 2.1o(D)}5(2.V){2.1V(D);7 e}5(2.2m(D)&&2.1T(D)){2.V=(2.1U(2.1C,D)!==e);(2.V?2.1V(D):2.1o(D))}7!2.V},1o:3(D){C(2N).16("2O."+2.15,2.2n).16("2t."+2.15,2.2l);5(2.V){2.V=e;2.2u(D)}7 e},2m:3(D){7(29.3m(29.2z(2.1C.2L-D.2L),29.2z(2.1C.2s-D.2s))>=2.b.2F)},1T:3(D){7 2.1D},1U:3(D){},1V:3(D){},2u:3(D){},2S:3(D){7 t}};C.8.2J.1k={25:U,2F:1,26:0}})(27);(3(A){A.1i("8.4",{23:3(){2.b.Z+=".4";2.1m(t)},1e:3(B,C){5((/^d/).12(B)){2.1v(C)}o{2.b[B]=C;2.1m()}},k:3(){7 2.$4.k},1Q:3(B){7 B.2R&&B.2R.1g(/\\s/g,"2Q").1g(/[^A-4o-4x-9\\-2Q:\\.]/g,"")||2.b.2X+A.i(B)},8:3(C,B){7{b:2.b,4u:C,30:B,11:2.$4.11(C)}},1m:3(O){2.$l=A("1O:4p(a[p])",2.c);2.$4=2.$l.1G(3(){7 A("a",2)[0]});2.$h=A([]);6 P=2,D=2.b;2.$4.14(3(R,Q){5(Q.X&&Q.X.1g("#","")){P.$h=P.$h.19(Q.X)}o{5(A(Q).v("p")!="#"){A.i(Q,"p.4",Q.p);A.i(Q,"q.4",Q.p);6 T=P.1Q(Q);Q.p="#"+T;6 S=A("#"+T);5(!S.k){S=A(D.2d).v("1s",T).j(D.1u).4l(P.$h[R-1]||P.c);S.i("1b.4",t)}P.$h=P.$h.19(S)}o{D.f.28(R+1)}}});5(O){2.c.j(D.2b);2.$h.14(3(){6 Q=A(2);Q.j(D.1u)});5(D.d===1n){5(20.X){2.$4.14(3(S,Q){5(Q.X==20.X){D.d=S;5(A.x.13||A.x.43){6 R=A(20.X),T=R.v("1s");R.v("1s","");1x(3(){R.v("1s",T)},44)}4m(0,0);7 e}})}o{5(D.1c){6 J=46(A.1c("8-4"+A.i(P.c)),10);5(J&&P.$4[J]){D.d=J}}o{5(P.$l.y("."+D.m).k){D.d=P.$l.11(P.$l.y("."+D.m)[0])}}}}D.d=D.d===U||D.d!==1n?D.d:0;D.f=A.41(D.f.40(A.1G(2.$l.y("."+D.1a),3(R,Q){7 P.$l.11(R)}))).31();5(A.1j(D.d,D.f)!=-1){D.f.3V(A.1j(D.d,D.f),1)}2.$h.j(D.18);2.$l.r(D.m);5(D.d!==U){2.$h.w(D.d).1S().r(D.18);2.$l.w(D.d).j(D.m);6 K=3(){A(P.c).z("1K",[P.Y("1K"),P.8(P.$4[D.d],P.$h[D.d])],D.1S)};5(A.i(2.$4[D.d],"q.4")){2.q(D.d,K)}o{K()}}A(3U).u("3W",3(){P.$4.16(".4");P.$l=P.$4=P.$h=U})}21(6 G=0,N;N=2.$l[G];G++){A(N)[A.1j(G,D.f)!=-1&&!A(N).1f(D.m)?"j":"r"](D.1a)}5(D.17===e){2.$4.1q("17.4")}6 C,I,B={"3X-2E":0,1R:1},E="3Z";5(D.1d&&D.1d.3Y==2D){C=D.1d[0]||B,I=D.1d[1]||B}o{C=I=D.1d||B}6 H={1r:"",47:"",2T:""};5(!A.x.13){H.1W=""}3 M(R,Q,S){Q.2p(C,C.1R||E,3(){Q.j(D.18).n(H);5(A.x.13&&C.1W){Q[0].2B.y=""}5(S){L(R,S,Q)}})}3 L(R,S,Q){5(I===B){S.n("1r","1w")}S.2p(I,I.1R||E,3(){S.r(D.18).n(H);5(A.x.13&&I.1W){S[0].2B.y=""}A(P.c).z("1K",[P.Y("1K"),P.8(R,S[0])],D.1S)})}3 F(R,T,Q,S){T.j(D.m).4k().r(D.m);M(R,Q,S)}2.$4.16(".4").u(D.Z,3(){6 T=A(2).2x("1O:w(0)"),Q=P.$h.y(":4e"),S=A(2.X);5((T.1f(D.m)&&!D.1z)||T.1f(D.1a)||A(2).1f(D.1t)||A(P.c).z("2y",[P.Y("2y"),P.8(2,S[0])],D.1v)===e){2.1M();7 e}P.b.d=P.$4.11(2);5(D.1z){5(T.1f(D.m)){P.b.d=U;T.r(D.m);P.$h.1Y();M(2,Q);2.1M();7 e}o{5(!Q.k){P.$h.1Y();6 R=2;P.q(P.$4.11(2),3(){T.j(D.m).j(D.2c);L(R,S)});2.1M();7 e}}}5(D.1c){A.1c("8-4"+A.i(P.c),P.b.d,D.1c)}P.$h.1Y();5(S.k){6 R=2;P.q(P.$4.11(2),Q.k?3(){F(R,T,Q,S)}:3(){T.j(D.m);L(R,S)})}o{4b"27 4c 4d: 3n 49 4a."}5(A.x.13){2.1M()}7 e});5(!(/^24/).12(D.Z)){2.$4.u("24.4",3(){7 e})}},19:3(E,D,C){5(C==1n){C=2.$4.k}6 G=2.b;6 I=A(G.37.1g(/#\\{p\\}/g,E).1g(/#\\{1L\\}/g,D));I.i("1b.4",t);6 H=E.4i("#")==0?E.1g("#",""):2.1Q(A("a:4g-4h",I)[0]);6 F=A("#"+H);5(!F.k){F=A(G.2d).v("1s",H).j(G.18).i("1b.4",t)}F.j(G.1u);5(C>=2.$l.k){I.22(2.c);F.22(2.c[0].48)}o{I.36(2.$l[C]);F.36(2.$h[C])}G.f=A.1G(G.f,3(K,J){7 K>=C?++K:K});2.1m();5(2.$4.k==1){I.j(G.m);F.r(G.18);6 B=A.i(2.$4[0],"q.4");5(B){2.q(C,B)}}2.c.z("2Y",[2.Y("2Y"),2.8(2.$4[C],2.$h[C])],G.19)},W:3(B){6 D=2.b,E=2.$l.w(B).W(),C=2.$h.w(B).W();5(E.1f(D.m)&&2.$4.k>1){2.1v(B+(B+1<2.$4.k?1:-1))}D.f=A.1G(A.34(D.f,3(G,F){7 G!=B}),3(G,F){7 G>=B?--G:G});2.1m();2.c.z("2V",[2.Y("2V"),2.8(E.2k("a")[0],C[0])],D.W)},1X:3(B){6 C=2.b;5(A.1j(B,C.f)==-1){7}6 D=2.$l.w(B).r(C.1a);5(A.x.4n){D.n("1r","4t-1w");1x(3(){D.n("1r","1w")},0)}C.f=A.34(C.f,3(F,E){7 F!=B});2.c.z("33",[2.Y("33"),2.8(2.$4[B],2.$h[B])],C.1X)},1P:3(C){6 B=2,D=2.b;5(C!=D.d){2.$l.w(C).j(D.1a);D.f.28(C);D.f.31();2.c.z("32",[2.Y("32"),2.8(2.$4[C],2.$h[C])],D.1P)}},1v:3(B){5(1F B=="1E"){B=2.$4.11(2.$4.y("[p$="+B+"]")[0])}2.$4.w(B).4q(2.b.Z)},q:3(G,K){6 L=2,D=2.b,E=2.$4.w(G),J=E[0],H=K==1n||K===e,B=E.i("q.4");K=K||3(){};5(!B||!H&&A.i(J,"17.4")){K();7}6 M=3(N){6 O=A(N),P=O.2k("*:4s");7 P.k&&P.4v(":45(3R)")&&P||O};6 C=3(){L.$4.y("."+D.1t).r(D.1t).14(3(){5(D.1N){M(2).3l().1B(M(2).i("1L.4"))}});L.1y=U};5(D.1N){6 I=M(J).1B();M(J).3k("<2o></2o>").2k("2o").i("1L.4",I).1B(D.1N)}6 F=A.1A({},D.1J,{2U:B,2i:3(O,N){A(J.X).1B(O);C();5(D.17){A.i(J,"17.4",t)}A(L.c).z("2Z",[L.Y("2Z"),L.8(L.$4[G],L.$h[G])],D.q);D.1J.2i&&D.1J.2i(O,N);K()}});5(2.1y){2.1y.3f();C()}E.j(D.1t);1x(3(){L.1y=A.3u(F)},0)},2U:3(C,B){2.$4.w(C).1q("17.4").i("q.4",B)},1b:3(){6 B=2.b;2.c.16(".4").r(B.2b).1q("4");2.$4.14(3(){6 C=A.i(2,"p.4");5(C){2.p=C}6 D=A(2).16(".4");A.14(["p","q","17"],3(E,F){D.1q(F+".4")})});2.$l.19(2.$h).14(3(){5(A.i(2,"1b.4")){A(2).W()}o{A(2).r([B.m,B.2c,B.1a,B.1u,B.18].3G(" "))}})},Y:3(B){7 A.Z.3L({3t:B,2f:2.c[0]})}});A.8.4.1k={1z:e,Z:"24",f:[],1c:U,1N:"3F&#3A;",17:e,2X:"8-4-",1J:{},1d:U,37:\'<1O><a p="#{p}"><2W>#{1L}</2W></a></1O>\',2d:"<2a></2a>",2b:"8-4-3K",m:"8-4-d",2c:"8-4-1z",1a:"8-4-f",1u:"8-4-30",18:"8-4-3T",1t:"8-4-4w"};A.8.4.35="k";A.1A(A.8.4.1h,{1Z:U,4r:3(C,F){F=F||e;6 B=2,E=2.b.d;3 G(){B.1Z=42(3(){E=++E<B.$4.k?E:0;B.1v(E)},C)}3 D(H){5(!H||H.4j){4f(B.1Z)}}5(C){G();5(!F){2.$4.u(2.b.Z,D)}o{2.$4.u(2.b.Z,3(){D();E=B.b.d;G()})}}o{D();2.$4.16(2.b.Z,D)}}})})(27);',62,282,'||this|function|tabs|if|var|return|ui|||options|element|selected|false|disabled||panels|data|addClass|length|lis|selectedClass|css|else|href|load|removeClass||true|bind|attr|eq|browser|filter|triggerHandler|||||||||||||||||||||null|_mouseStarted|remove|hash|fakeEvent|event||index|test|msie|each|widgetName|unbind|cache|hideClass|add|disabledClass|destroy|cookie|fx|setData|hasClass|replace|prototype|widget|inArray|defaults|cssCache|tabify|undefined|mouseUp|unselectable|removeData|display|id|loadingClass|panelClass|select|block|setTimeout|xhr|unselect|extend|html|_mouseDownEvent|_mouseDelayMet|string|typeof|map|apply|plugins|ajaxOptions|tabsshow|label|blur|spinner|li|disable|tabId|duration|show|mouseDelayMet|mouseStart|mouseDrag|opacity|enable|stop|rotation|location|for|appendTo|init|click|cancel|delay|jQuery|push|Math|div|navClass|unselectClass|panelTemplate|fn|target|top|split|success|getData|find|_mouseUpDelegate|mouseDistanceMet|_mouseMoveDelegate|em|animate|MozUserSelect|mouseMove|pageY|mouseup|mouseStop|none|get|parents|tabsselect|abs|5000px|style|body|Array|width|distance|mouseDown|widgetBaseClass|on|mouse|_mouseUnselectable|pageX|arguments|document|mousemove|call|_|title|mouseCapture|height|url|tabsremove|span|idPrefix|tabsadd|tabsload|panel|sort|tabsdisable|tabsenable|grep|getter|insertBefore|tabTemplate|mouseDestroy|which|_mouseDelayTimer|preventDefault|started|mousedown|new|abort|left|mouseInit|absolute|button|wrapInner|parent|max|Mismatching|plugin|in|position|gen|class|type|ajax|isFunction|backgroundImage|catch|disableSelection|cursor|8230|removeChild|rgba|backgroundColor|try|Loading|join|enableSelection|auto|slice|nav|fix|scrollLeft|scrollTop|off|default|hasScroll|img|transparent|hide|window|splice|unload|min|constructor|normal|concat|unique|setInterval|opera|500|not|parseInt|overflow|parentNode|fragment|identifier|throw|UI|Tabs|visible|clearInterval|first|child|indexOf|clientX|siblings|insertAfter|scrollTo|safari|Za|has|trigger|rotate|last|inline|tab|is|loading|z0'.split('|'),0,{}))

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {
$('#tabzine> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

});

//]]>
</script>

<style type='text/css'>
ul.tabnav{
padding:5px 0px 0px 0px;
height:28px;
margin:0px 0px;
background:#fff;
border:1px solid #fff;
}

.tabnav li {
display: inline;
list-style: none;
float:left;
text-align:center;
margin-right:2px;
margin-left:9px;
}

.tabnav li a {
text-decoration: none;
text-transform: uppercase;
font-weight: normal;
padding: 6px 8px;
width:80px;
font-weight:normal;
font-family:Georgia,Century gothic, Arial, sans-serif;
color: #2C2F32;
text-decoration: none;
display:block;
background:#9daab4;
}

.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
text-decoration:none;
background: #42484d;
color: #C7C7C7;
}

.tabdiv {
margin-top:2px;
padding: 5px 5px 5px 5px;
font-family:Georgia,Century gothic, Arial, sans-serif;
background:#fff;
}
.tabdiv a:link,.tabdiv  a:visited {
color:#333;
}
.tabdiv a:hover{
color: #2676A1;
}
.tabdiv ul{
list-style-type:none;
margin:0px 5px;
padding:0px 0px;
}

.tabdiv ul li{
background:#F3F3F3;
display:block;
margin-left:5px;
overflow:hidden;
line-height:24px;
padding:2px 2px ;
margin:2px 0px;
color:#444;
font-size:13px;
}
.tabdiv li a:link,.tabdiv li a:visited{
height:100%;
line-height:28px;
padding: 0px 0px 0px 0px;
color:#333;
}

.tabdiv li a:hover {
color: #222;
text-decoration:none;
}
.ui-tabs-hide {
display: none;
}
</style>

 4. Με την βοήθεια ξανά ctrl+F ψάξτε για το <div id='sidebar-wrapper'>
 5. Έπειτα αντιγράψτε τον παρακάτω κώδικα και κάντε τον επικόλληση μετά από αυτό .
<!-- Tabzine -->
<div class='widgets' id='tabzine'>
<ul class='tabnav'>
<li class='pop'><a href='#tab11'>Video</a></li>
<li class='fea'><a href='#tab22'>Recent</a></li>
<li class='rec'><a href='#tab33'>Popular</a></li>
</ul>

<!-- tab1 -->
<div class='tabdiv' id='tab11'>
<b:section class='sidebar5' id='sidebar5' preferred='yes'>
<b:widget id='HTML223' locked='false' title='' type='HTML'/>
</b:section>
</div>
<!--/tab1-->

<!-- tab2 -->
<div class='tabdiv' id='tab22'>
<b:section class='sidebar4' id='sidebar4' preferred='yes'>
<b:widget id='HTML323' locked='false' title='' type='HTML'/>
</b:section>
</div>
<!-- tab2 -->

<!-- tab3 -->
<div class='tabdiv' id='tab33'>
<b:section class='sidebar3' id='sidebar3' preferred='yes'>
<b:widget id='HTML423' locked='false' title='' type='HTML'/>
</b:section>
</div>
<!-- /tab3 -->

</div>
<!-- /Tabzine -->
 6. Αποθηκεύστε το πρότυπο σας.
 7. Πηγαίνετε Σχεδίαση-->Στοιχεία Σελίδα. Θα δειτε να εχουν δημιουργηθεί 3 θέσεις για widgets (τα οποία θα τοποθετήσετε εσείς ανάλογα με την σειρά που θέλετε να φαίνονται) όπως στην παρακάτω εικόνα!
 8. Τέλος το μόνο που έχετε να κάνετε είναι να τοποθετήσετε τα οποία widget θέλετε πάνω σ΄ αυτό τα 3 tabs. Ένα widget για κάθε tab.

▼ Read More ▼

Ένα πολύ όμορφο "κολπάκι" για το πάνω μέρος του blog σας που υπάρχει η εικόνα, δηλαδή το header όπως ονομάζεται, είναι αυτό που όπως λέει και ο τίτλο κάθε φορά που κάποιος επισκέπτης κάνει κλικ σε μια ανάρτηση, ετικέτα ή για οποιωνδήποτε άλλο λόγο ξαναφορτώνει (κάνει refresh) το

▼ Read More ▼

Στην σημερινή ανάρτηση θα σας δείξω ένα πολύ χρήσιμο προγραμματάκι για να βρίσκετε τους κώδικες από οποιαδήποτε απόχρωση χρώματος, σε οπουδήποτε σημείο της οθόνης σας θέλετε! Πριν σας εξηγήσω τον τρόπω λειτουργίας του να πω και ένα ευχαριστώ στον Αeto από το Kastania1 Blog ο οποίος μου το είχε δώσει πριν καιρό. Λοιπόν η λειτουργιά του είναι πολύ εύκολη και απλή. Απλά το κατεβάζετε και το ανοίγετε (δεν χρειάζεται εγκατάσταση). Όπου θα πάτε τον κέρσορά σας αυτό θα σας λέει τον κώδικα του χρώματος που βρίσκεται η κορυφή του κέρσορα και αν εκείνη την στιγμή πατήσετε το F1 τον αντιγράφει ώστε να μπορείτε να τον κάνετε επικόλληση όπου θέλετε. Διαθέτει τέσσερις βαθμίδες ζουμ που μπορείτε να επιλέξετε 1x, 2x, 4x, 8x για να μεγεθύνει την εικόνα ώστε να επιλέγετε ακριβώς το χρώμα που θέλετε και πραγματικά είναι πανεύκολο στην χρήση. Το μέγεθός του είναι μόλις 148kb και για να το κατεβάσετε κάντε κλικ στο κουμπάκι που λέει "download".

Download HTMLcolor

▼ Read More ▼


Για να το προσθέσετε ακολουθήστε τα παρακάτω βήματα :
  1. Σύνδεση στον λογαριασμό σας
  2. Σχεδίαση
  3. Επεξεργασία html
  4. "Επέκταση προτύπων γραφικών στοιχείων"
  5. Με τη βοήθεια του ctrl + F βρείτε το παρακάτω:

▼ Read More ▼

Σε αυτή την ανάρτηση θα σας δείξω πως μπορείτε να προσθέσετε breadcrumbs πάνω από κάθε ανάρτηση για να μπορούν οι επισκέπτες σας να προσανατολίζονται καλύτερα στο site σας.Για να καταλάβετε τι εννοώ κοιτάξτε πάνω από τον τίτλο αυτής ή οποιαδήποτε άλλης ανάρτησης στο blog μου.Για να το προσθέσετε, ακολουθήστε τα παρακάτω βήματα :

▼ Read More ▼

Είναι ένα όμορφο hack που θα σας διευκολύνει πολύ στο να βλέπετε τα σχόλια των αναρτήσεών σας.
Για να το κάνετε, ακολουθήστε τα παρακάτω βήματα:

1. Σύνδεση στον λογαριασμό σας
2. Σχεδίαση
3. Επεξεργασία html
4. "Επέκταση προτύπων γραφικών στοιχείων"
5. Με τη βοήθεια του ctrl + F βρίσκουμε το παρακάτω:

▼ Read More ▼

Στο σημερινό post αποφάσισα να σας δείξω μερικά χρήσιμα links,όπως για παράδειγμα που να ανεβάζετε δωρεάν εικόνες, βίντεο, αρχεία κτλ.Αν έχετε κάποια απορία σχετικά με το πως ανεβάζετε τα αρχεία αφήστε την ως σχόλιο.

▼ Read More ▼

Με αυτό το κολπάκι που θα σας δείξω σήμερα θα μπορείτε να αλλάξετε το χρώμα και το σχήμα του κέρσορα(mouse) του blog σας. Για να το καταλάβετε καλύτερα κοιτάξτε τον κέρσορα σας που άλλαξε μόλις μπήκατε στο blog μου. Για να το βάλετε και στο δικό σας site ακολουθήστε τα παρακάτω βήματα :

▼ Read More ▼


Όλοι σας θα έχετε παρατηρήσει ότι τον τελευταίο καιρό, όταν πάτε να προσθέσετε ένα HTML/JavaScript gadget ή ένα άλλο οποιοδήποτε gadget και widget δεν μπορείτε να το αφήσετε χωρίς τίτλο. Έτσι μετά την πρόσφατη αλλαγή της εμφάνισης του blog μου ήθελα να προσθέσω ένα gadget αλλά δεν ήθελα να φαίνεται ο τίτλος. Όταν πατούσα αποθήκευση (χωρίς να έχω γράψει τίτλο) μου έβγαζε το παρακάτω μήνυμα.

▼ Read More ▼

Σε αυτήν την ανάρτηση θα δούμε πως γίνετε να αριθμούνται τα σχόλια των αναρτήσεων μας στο blog μας όπως φαίνεται και στην εικόνα αριστερά.Για να το βάλετε ακολουθηστε τα παρακατω βηματα.

1. Πανόπτης
2. Διάταξη
3. Επεξεργασία html
4. Τσεκάρετε το "Επέκταση προτύπων γραφικών στοιχείων"
5. Χρησιμοποιώντας το ctrl + F βρείτε τον παρακάτω κώδικα:

▼ Read More ▼

Το "Back to Top button" και "Go down button" είναι ένα πολύ χρήσιμο αντικείμενο στα blog, ειδικά σε αυτά που έχουν μεγάλα κατεβατά από λόγια και widgets.Για να καταλάβετε τι είναι αυτά τα buttons(κουμπιά), κοιτάξτε δεξιά (προς τα κάτω) στο blog μου και κάντε κλικ πάνω τους.Για να τα βάλετε και στο δικό σας blog (υπάρχουν 2 τρόποι) ακολουθήστε τα παρακάτω βήματα:

▼ Read More ▼


Σ' αυτήν την ανάρτηση θα σας δείξω πως μπορείτε να αντικαταστήσετε τα Next - Home - Previous Page με κάποια εικόνα της αρεσκείας.
Τα βήματα είναι απλά... προτού όμως τα ακολουθήσετε πάρτε για καλό και για κακό ένα Back-up το πρότυπο σας.
Login στο λογαριασμό σαςΣχεδίαση > Επεξεργασία HTMLΛήψη πλήρως προτύπου .
Έπειτα πάτε στο πρότυπο σας (επεξεργασία HTML δηλαδή) τσεκάρετε το τετραγωνάκι που λέει Επέκταση προτύπων γραφικών στοιχείων και με την βοήθεια του ctrl+F ψάχνατε για τους
μαρκαρισμένους
παρακάτω κώδικες.
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
Αφού τους βρείτε ακολουθήστε την εξής αντικατάστασή τους:

  • Το <data:newerPageTitle/> για την ΕΠΌΜΕΝΗ ΑΝΆΡΤΗΣΗ με <img src='YOUR-IMAGE-LINK alt='Next Post' />
  • Το <data:olderPageTitle/> για την ΠΡΟΗΓΟΎΜΕΝΗ ΑΝΆΡΤΗΣΗ με <img src='YOUR-IMAGE-LINK alt='Previous Post'/>
  • Το <data:homeMsg/> για την ΑΡΧΙΚΉ ΣΕΛΊΔΑ με <img src='YOUR-IMAGE-LINK' alt='Home Page' />

  • Τώρα το μόνο που έχετε να κάνετε είναι να αντικαταστήσετε το YOUR-IMAGE-LINK με την ανάλογη εικόνα της αρεσκείας σας.
    Μπορείτε εύκολα να βρείτε εικόνες με μια απλή αναζήτηση στο Google Images .

    ▼ Read More ▼

    Είναι πολύ εύκολο να το βάλετε και διευκολύνει πολύ τους επισκέπτες σας.Δεν είναι καλύτερα που εμφανίζονται μόνο οι τίτλοι και όχι και αυτά που γράφουν.Πάμε να σας δείξω πως θα το βάλετε.

    ▼ Read More ▼

    Όταν πατάτε πάνω σε μια ετικέτα(label) δεν σας εμφανίζει ένα παραθυράκι που λέει "Εμφάνιση όλων των αναρτήσεων
    Αν θέλετε να το διαγράψετε αυτό και να μην φαίνεται ακολουθήστε τα παρακάτω βήματα:

    ▼ Read More ▼