Βάλτε αρίθμηση στις σελίδες σας στο blog

To blog από μόνο του στο τέλος των αναρτήσεων λέει ένα ξερό παλαιότερες αναρτήσεις.

Ούτε όμορφο είναι ούτε εύχρηστο. 

Μπορούμε πολύ εύκολα να βάλουμε αρίθμηση στο blog μας όπως έχουμε και εμείς εδώ στην σελίδα μας. Πως ; πάμε να δούμε

Πηγαίνουμε να κάνουμε προσθήκη gadget και βάζουμε τον παρακάτω κώδικα 

<style>#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float: left;}#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#C20606;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{ background:#35AFC9;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: #000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}.showpageOf{ background:#35AFC9;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}</style><script type='text/javascript'>var postperpage=7;var numshowpage=6;var upPageWord="Prev.";var downPageWord="Next";var urlactivepage=location.href;var home_page="/"</script><script src='http://dr-blogger.com/files/scripts/Page-Navigation.js' type='text/javascript'></script>

Στο σημείο που είναι μπλε ο κώδικας, προσθέτουμε τον κωδικό από το χρώμα που θέλουμε.
Θέλουμε κόκκινο ; βάζουμε #FF0000 Θέλουμε πορτοκαλί ; βάζουμε #FF6600
Τους κώδικες για τα χρώματα μπορείτε να τους βρείτε στην σελίδα μας δεξιά που έχουμε ένα σχετικό widget

Read More »

Βάλτε Slider με τις τελευταίες αναρτήσεις σας στο Blog

Αρκετός κόσμος θέλει να βάλει κάποιο Slider στο blog του, αλλά δεν βρίσκει κάτι.

Έτσι, βάλαμε εδώ στην σελίδα ένα Slider και ελπίζω να σας αρέσει και να σας κάνει.

Πάμε να δούμε πως θα το προσθέσουμε στο blog μας

Ο Τρόπος είναι απλός.

Όπως βάζουμε τα Gadget, έτσι θα βάλουμε και αυτό.

Πηγαίνουμε Διάταξη

Προσθήκη gadget / HTML/JavaScript

Και ανοίγει το παράθυρο που έχουμε από κάτω για να προσθέσουμε τον κώδικα

Ο Κώδικας για το Slider είναι από κάτω

<!--   begin post slider  -->

<style scoped="" type="text/css">

#coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}

.coin-slider{overflow:hidden;zoom:1;position:relative}

.coin-slider a{text-decoration:none;outline:none;border:none}

.cs-buttons{font-size:0;padding:10px;float:left}

.cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}

.cs-active{background-color:#B8C4CF;color:#FFFFFF}

.cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}

a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}

.cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}

.cs-title strong{display:block;font-size:120%}

.cs-title p{margin:0}

.cs-title cite{font-size:90%}

.cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}

.cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript'>

var AutoCoinConfig = {

 url_blog: "http://helpblogwidget.blogspot.gr/", <!--ΕΔΩ ΒΑΖΕΤΕ ΤΟ BLOG ΣΑΣ-->

 MaxPost: 8, <!--ΕΔΩ Ο ΑΡΙΘΜΟΣ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ-->

 cmtext: "comments",

 MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],

 pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",

 NoCmtext : "comment number",

 imageSize :600, <!-- ΙΔΙΟ ΜΕ ΤΟ WIDTH ΠΙΟ ΚΑΤΩ-->

 SumChars : 100,

 tagName:false,

 width: 600, <!--ΕΔΩ ΤΟ ΠΛΑΤΟΣ ΤΟΥ SLIDER - ΙΔΙΟ ΜΕ ΤΟ imageSize  3 ΓΡΑΜΜΕΣ ΠΙΟ ΠΑΝΩ-->

 height: 300, <!--ΕΔΩ ΤΟ ΥΨΩΣ ΤΟΥ SLIDER -->

 spw: 7,

 sph: 5,

 delay: 5000,

 sDelay: 30,

 opacity: 0.7,

 titleSpeed: 500,

 effect: '',

 navigation: true,

 links : true,

 hoverPause: true,

 prevText: 'prev', <!-- ΕΔΩ ΒΑΖΟΥΜΕ ΠΙΣΩ-ΠΡΟΗΓΟΥΜΕΝΩ ΣΤΑ ΕΛΛΗΝΙΚΑ ΑΜΑ ΘΕΛΟΥΜΕ -->

 nextText: 'next'  <!-- ΕΔΩ ΒΑΖΟΥΜΕ ΜΠΡΟΣΤΑ-ΕΠΟΜΕΝΟ ΣΤΑ ΕΛΛΗΝΙΚΑ ΑΜΑ ΘΕΛΟΥΜΕ -->

};

</script>

<script src="http://users.otenet.gr/~otetanis/helpblogwidget/jsfiles/slider.js" type="text/javascript"></script>

<!--  end post slider  -->

Αφού βάλουμε τον κώδικα πατάμε αποθήκευση και βάζουμε το gadget εκεί που δείχνει η φωτογραφία που έχουμε από κάτω, στην θέση που λέει Σε όλες τις στήλες

Τώρα οι ρυθμίσεις είναι πολλές, θα πούμε της βασικές.

Τις γράφουμε και πάνω στον κώδικα, δεν χρειάζετε να τις σβήσετε, έτσι κάντε copy/paste και θα παίξει κανονικά.

url_blog: "http://helpblogwidget.blogspot.gr/", ΕΔΩ ΒΑΖΕΤΕ ΤΟ BLOG ΣΑΣ

MaxPost: 8, ΕΔΩ Ο ΑΡΙΘΜΟΣ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ

imageSize :600, ΙΔΙΟ ΜΕ ΤΟ WIDTH ΠΙΟ ΚΑΤΩ

width: 600, ΕΔΩ ΤΟ ΠΛΑΤΟΣ ΤΟΥ SLIDER - ΙΔΙΟ ΜΕ ΤΟ imageSize  3 ΓΡΑΜΜΕΣ ΠΙΟ ΠΑΝΩ

height: 300, ΕΔΩ ΤΟ ΥΨΩΣ ΤΟΥ SLIDER 

prevText: 'prev', ΕΔΩ ΒΑΖΟΥΜΕ ΠΙΣΩ-ΠΡΟΗΓΟΥΜΕΝΩ ΣΤΑ ΕΛΛΗΝΙΚΑ ΑΜΑ ΘΕΛΟΥΜΕ

nextText: 'next'  ΕΔΩ ΒΑΖΟΥΜΕ ΜΠΡΟΣΤΑ-ΕΠΟΜΕΝΟ ΣΤΑ ΕΛΛΗΝΙΚΑ ΑΜΑ ΘΕΛΟΥΜΕ 

Read More »

Facebook box στο blog μας

Σήμερα θα δούμε πόσο απλό είναι να βάλουμε ένα facebook box στο Blog μας.
Είναι πανεύκολο και το μόνο που έχουμε να κάνουμε είναι τις ρυθμίσεις που θέλουμε στην σελίδα του facebook, να πάρουμε τον κώδικα και να τον προσθέσουμε σαν gadget και τέλος.

Αρχικά πηγαίνουμε σε αυτή την σελίδα https://developers.facebook.com/docs/plugins/page-plugin

Βάζουμε το URL από την σελίδα μας στο facebook, κάνουμε ότι ρυθμίσεις επιθυμούμε εμείς και πατάμε Λήψη κωδικού.

Στην συνέχεια στο παράθυρο που μας ανοίγει, πατάμε το iframe πάνω στης καρτέλες.

Παίρνουμε τον κώδικα που μας δίνει και πάμε και τον προσθέτουμε στο blog μας σαν gadget όπως έχουμε δει 10αδες φορές εδώ.

Αρχική σελίδα blogger / Διάταξη / Προσθήκη Gadget / HTML/Javascript

Read More »

Βάλτε widget με τον καιρό στο Blog σας.

Ένα πολύ όμορφο widget καιρού για να βάλετε στην σελίδα σας προσφέρετε από την accuweather δωρεάν.

Είναι Ελληνικό και βρίσκει μόνο του την περιοχή από όπου έρχεται ο επισκέπτης στην σελίδα και του βγάζει τον καιρό της περιοχής του.

Αν επισκεφτεί κάποιος από την Λάρισα, θα δείξει καιρό Λάρισα, αν κάποιος από Κρήτη, θα δείξει καιρό Κρήτη κλπ.

Πατάμε πάνω στο link accuweather και βρισκόμαστε στην σελίδα δημιουργίας του widget.
Βάζουμε το Auto Detect (είναι αυτό που βρίσκει αυτόματα την περιοχή) βάζουμε Ελληνικά, βάζουμε να μας δείχνει C και τέλος το μέγεθος που θέλουμε όπως βλέπετε στην εικόνα από κάτω.

Πατάμε το Grab the Code και μας δίνει τον κώδικα όπως βλέπετε από κάτω.

Select Code και αφού το μαρκάρει και γίνει μπλε, δεξί κλικ στο ποντίκι και αντιγραφή ή ctrl+c

Μετά ακολουθούμε την απλή διαδικασία προσθήκης gadget που έχουμε δει αρκετές φορές στη σελίδα μας και ο καιρός φιγουράρει στο Blog σας

Ενδεικτικά δίνω από κάτω τον κώδικα που έφτιαξα για να παρουσιάσω τη διαδικασία

<a href="http://www.accuweather.com/el/gr/athens/182536/weather-forecast/182536" class="aw-widget-legal">
<!--
By accessing and/or using this code snippet, you agree to AccuWeather’s terms and conditions (in English) which can be found at http://www.accuweather.com/en/free-weather-widgets/terms and AccuWeather’s Privacy Statement (in English) which can be found at http://www.accuweather.com/en/privacy.
-->
</a><div id="awcc1476486215554" class="aw-widget-current"  data-locationkey="" data-unit="c" data-language="el" data-useip="true" data-uid="awcc1476486215554"></div><script type="text/javascript" src="http://oap.accuweather.com/launch.js"></script>

Read More »

Widget με τα τελευταία σχόλια του Blog σας

Ένα ζωντανό blog φαίνεται και από τα σχόλια που αφήνουν οι αναγνώστες του.
Αλλά αν τα σχόλια βρίσκονται κάτω από κάθε ανάρτηση, ψιλοχάνονται.
Έτσι θα προσθέσουμε εύκολα ένα widget που θα το τοποθετήσουμε όπου εμείς θέλουμε και θα δείχνει τα σχόλια που έχουν κάνει οι επισκέπτες οπουδήποτε.

Πάμε να το δούμε
Πηγαίνουμε στην σελίδα του blogger και πατάμε διάταξη

Στην συνέχεια προσθήκη gadget και στο παράθυρο που ανοίγει πατάμε HTML/JavaScript

Στο παράθυρο που ανοίγει, βάζουμε τον κώδικα, πατάμε αποθήκευση και έτοιμο.

ο κώδικας είναι

<style type="text/css" scoped> 

ul.ms_recent{list-style:none;margin:0;padding:0;} 

.ms_recent li{background:transparent;margin:0 0 6px!important;padding:3px  

!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;

border-radius:9px; max-height: 100px;} 

.ms_recent li:hover{background:#fff;border: 1px solid #e9e9e9;}

.ms_recent a {text-decoration:none;}

.avatarImage{padding:3px;background:#fefefe;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} 

.avatarRound{border-radius:100px;width:35px;height:35px} 

.ms_recent li span{margin-top:4px;color: #444;display: block;font-size: 12px;line-height: 1.4;} 

</style>

<script type="text/javascript">

//<![CDATA[

    var

 numComments  = 5,

 showAvatar  = true,

 avatarSize  = 35,

 roundAvatar = true,

 characters  = 40,

 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",

 hideCredits = False;

 maxfeeds=50,

 adminBlog='MS';

//]]>

</script>

<script type="text/javascript" src="https://cdn.rawgit.com/msdesign92/ms-design/master/recent2.js"></script>

<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=ms_recent&amp;&amp;max-results=50">

</script>

numComments  = 5, Εδώ βάζουμε πόσα σχόλια θέλουμε να δείχνει. Εγώ έχω 5, εσείς βάλτε ότι θέλετε

showAvatar  = true, Εδώ λέμε αν θέλουμε να έχει avatar (εικόνα) αριστερά από τα σχόλια. Αν θέλουμε να έχει εικόνα το αφήνουμε όπως είναι, αν δεν θέλουμε σβήνουμε το true και βάζουμε false

avatarSize  = 35, Εδώ ρυθμίζουμε το μέγεθος του Avatar. Εγώ έχω 35, εσείς βάλτε ότι θέλετε

roundAvatar = true,  Εδώ λέμε αν θέλουμε να έχει avatar να είναι στρογγυλό η τετράγωνο. Αν θέλουμε στρογυλό το αφήνουμε όπως είναι, αν θέλουμε τετράγωνο σβήνουμε το true και βάζουμε false

characters  = 40, Εδώ λέμε πόσοι χαρακτήρες να φαίνονται στο σχόλιο. Εγώ έχω 40, εσείς βάλτε ότι θέλετε

defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm", Εδώ είναι το default link εικόνας αν βάζει σχόλιο κάποιος ανώνυμος χρήστης. Η το αφήνετε έτσι, η βάζετε ότι εικόνα θέλετε εσείς. (το Link)

hideCredits = False; Εδώ είναι να φαίνεται κάτω δεξιά ένα διακριτικό Link του κατασκευαστή. False φαίνεται, true δεν φαίνεται.

Αυτά είναι και δεν πιστεύω να ξέχασα κάτι.

Read More »

Πως βάζουμε το widget σχετικές αναρτήσεις κάτω από της αναρτήσεις μας.

Όπως σε 10αδες blog, έτσι και εδώ θα δείτε ότι κάτω από κάθε ανάρτηση υπάρχει ένα widget που δείχνει 3-4-5 όσες θέλουμε εμείς σχετικές αναρτήσεις από το blog μας.
Αυτό είναι πολύ χρήσιμο και για εμάς και για τον επισκέπτη.
Ο επισκέπτης βλέπει σχετικές αναρτήσεις που πιθανών τον ενδιαφέρουν και πατάει να δει και αυτές και εμάς μας είναι χρήσιμο γιατί ο επισκέπτης μένει στην σελίδα μας περισσότερο και αυξάνει την επισκεψιμότητα και την παραμονή.

Πως μπαίνει όμως αυτό ;
Πολύ πολύ εύκολα. Πηγαίνουμε στην σελίδα linkwithin και βλέπουμε την από κάτω εικόνα την οποία και συμπληρώνουμε.

Στη συνέχεια πατάμε το install widget και that's all

Έτσι απλά μπήκε στο blog μας και μπορούμε να το δούμε.

Read More »

5 διαφορετικά widget για τις δημοφιλείς αναρτήσεις στο blog

Πέντε φανταστικά widget για τις δημοφιλείς αναρτήσεις στο blog σας έχουμε σήμερα να σας παρουσιάσουμε.
Θέλουν λίγο δουλίτσα για να μπουν, αλλά αξίζει ο κόπος.
Έχουν τσεκαριστεί και δουλεύουν, εγώ εδώ στην σελίδα έχω το style#3.

Style#1
<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKEMY3O1PEvk4dCiIbNcbeAhc80AQv3cLeuz1bkP8kX-o8rSzKOPKmO1GsE1CxSzINUVetP1RPGDj2IxFSE5dVy5JOSHpevu8Vln1MdpaCQ_I-KhilnatbQwNpjImVvU2P_L3_XbBWuq2B/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Style#2
<div class="recentpoststyle">
<script type="text/javascript">
function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none;color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
</style></div>

Style#3
<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKEMY3O1PEvk4dCiIbNcbeAhc80AQv3cLeuz1bkP8kX-o8rSzKOPKmO1GsE1CxSzINUVetP1RPGDj2IxFSE5dVy5JOSHpevu8Vln1MdpaCQ_I-KhilnatbQwNpjImVvU2P_L3_XbBWuq2B/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}
.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.recent-posts-container a{text-decoration:none;}
.recent-post-title {margin-bottom:5px;}
.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
.recent-posts-details a{color: #777;}
</style>

Style#4
<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKEMY3O1PEvk4dCiIbNcbeAhc80AQv3cLeuz1bkP8kX-o8rSzKOPKmO1GsE1CxSzINUVetP1RPGDj2IxFSE5dVy5JOSHpevu8Vln1MdpaCQ_I-KhilnatbQwNpjImVvU2P_L3_XbBWuq2B/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>

Style#5
<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKEMY3O1PEvk4dCiIbNcbeAhc80AQv3cLeuz1bkP8kX-o8rSzKOPKmO1GsE1CxSzINUVetP1RPGDj2IxFSE5dVy5JOSHpevu8Vln1MdpaCQ_I-KhilnatbQwNpjImVvU2P_L3_XbBWuq2B/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>

Από πάνω βλέπετε κώδικα και widget για κάθε ένα ξεχωριστά.
Πως και πού μπαίνουν αυτά.
Πηγαίνουμε πρότυπο / επεξεργασία HTML

Πάμε στον κώδικα και πατάμε ctrl+f. Στο παραθυράκι πάνω δεξιά που ανοίγει βάζουμε </head> και πατάμε enter. Λογικά θα δούμε κάτι τέτοιο όπως στην από κάτω εικόνα.

ΕΚΕΙ ΤΟΠΟΘΕΤΟΥΜΕ όποιον από τους πέντε κώδικες θέλουμε να έχει η σελίδα μας. 

Πάνω από το </head>

Στην συνέχεια στο search βάζουμε το <head> Λογικά θα δούμε κάτι τέτοιο όπως στην από κάτω εικόνα.

Κάτω από το <head> βάζουμε τον παρακάτω κώδικα

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Τέλος, ξαναπατάμε ctrl+f και στο search </body> Λογικά θα δούμε κάτι τέτοιο όπως στην από κάτω εικόνα. 

Πάνω από το </body> βάζουμε τον παρακάτω κώδικα

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>

<script type='text/javascript'>

$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {

return t.replace(&#39;/w72-h72-p-nu/&#39;, &#39;/s350-c/&#39;)

});

$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){

var txt=$(this).text().substr(0,60);

var j=txt.lastIndexOf(&#39; &#39;);

if(j&gt;10)

$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));

});

$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){

var txt=$(this).text().substr(0,60);

var j=txt.lastIndexOf(&#39; &#39;);

if(j&gt;=6)

$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));

});

</script>

Αφού γίνουν όλα αυτά, πατήστε την αποθήκευση. Επιτέλους είστε έτοιμοι.

Τώρα κάνουμε κανονικά τι διαδικασία για να βάλουμε gadget.

Πηγαίνουμε διάταξη

Προσθήκη gadget και βρίσκουμε το δημοφιλείς αναρτήσεις 

Πατάμε επάνω, βάζουμε τις ρυθμίσεις που θέλουμε και έτοιμο.

Λίγο δύσκολο με τα πολλά copy/paste στον κώδικα κλπ αλλά αξίζει τον κόπο.

Read More »