Βοηθητικά Widget/Script για blog: Τσεκαρισμένο

Εμφάνιση αναρτήσεων με ετικέτα Τσεκαρισμένο. Εμφάνιση όλων των αναρτήσεων

Πέμπτη 20 Οκτωβρίου 2016

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#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>

var AutoCoinConfig = {

url_blog: "http://helpblogwidget.blogspot.gr/",

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,

SumChars : 100,

tagName:false,

width: 600,

height: 300,

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>

Αφού βάλουμε τον κώδικα πατάμε αποθήκευση και βάζουμε το 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' ΕΔΩ ΒΑΖΟΥΜΕ ΜΠΡΟΣΤΑ-ΕΠΟΜΕΝΟ ΣΤΑ ΕΛΛΗΝΙΚΑ ΑΜΑ ΘΕΛΟΥΜΕ

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

Σας έχει τύχη ποτέ να θέλετε να χωρίσετε σε 2 στήλες την ανάρτηση σας ;
Εμένα ναι, αν θέλετε και εσείς για κάποιο λόγο, εδώ είναι η λύση.

Πηγαίνετε κανονικά να βάλετε ανάρτηση και πατάτε πάνω αριστερά το HTML

Αντιγράψτε και βάλτε τοκ κώδικα που έχουμε από κάτω.
<div style="float: left; width: 45%">
<span style="font-weight: bold;">Εδώ το κείμενο της αριστερής στήλης</span></div>
<div style="float: right; width: 45%">
<span style="font-weight: bold;">Εδώ το κείμενο της δεξιάς στήλης</span></div>
<divstyle="clear: both"></div><br />
Θα βγεί όπως βλέπετε απο κάτω.

Εδώ το κείμενο της αριστερής στήλης

Εδώ το κείμενο της δεξιάς στήλης

Αν δεν θέλουμε έντονα γράμματα Σβήνουμε το bold; από τον κώδικα η αντιγράψτε τον κώδικα που έχουμε από κάτω
<div style="float: left; width: 45%;">
Αν δεν θέλουμε έντονα γράμματα</div>
<div style="float: right; width: 45%;">
Σβήνουμε το bold; από τον κώδικα η αντιγράψτε τον κώδικα που έχουμε από πάνω</div>
<divstyle both="" clear:=""></divstyle></div><br />

Αν θέλουμε 3 στήλες, αντιγράψτε τον κώδικα από κάτω.
<div style="float: left; width: 30%;">
Στήλη # 1</div>
<div style="float: left; width: 30%;">
Στήλη # 2</div>
<div style="float: left; width: 30%;">
Στήλη # 3</div>
<divstyle both="" clear:=""></divstyle><br />

Στήλη # 1

Στήλη # 2

Στήλη # 3

Παίξτε με τον κώδικα να τον κατανοήσετε καλύτερα, είναι εύκολος και δεν έχει κανένα κίνδυνο
Η Ανάλυση του κώδικα είναι η εξής :
<div style="float: left; width: 45%"> To float: left; είναι για να είναι στοιχισμένο το κείμενο μας αριστερά. Αν βάλουμε float: center; θα κεντράρει το κείμενο και αν βάλουμε float: right; θα το στοιχίσει δεξιά στην στήλη μας.

Το width: 45% είναι για να μας δείξει το πλάτος τις στήλης μας. με 45% λέμε να έχει το μισό πλάτος τις ανάρτησης. Μπορούμε να βάλουμε και width: 300px; Επίσης μπορούμε αν έχουμε 2 στήλες στην μία να έχουμε width: 30% και στην άλλη width: 60% Έτσι η μία στήλη θα έχει μεγαλύτερο πλάτος από την άλλη

Η δεύτερη και τελευταία γραμμή του κώδικα, ναι 2 γραμμών είναι ο κώδικας είναι η εξής ;
<span style="font-weight: bold;">Εδώ το κείμενο σας</span></div>
Το font-weight: bold; είναι για να έχει έντονη γραφή, αν δεν θέλουμε έντονη γραφή το σβήνουμε και μένει έτσι <span style="">Εδώ το κείμενο σας</span></div>
Η σβήνουμε όλο το span γράφουμε το κείμενο μας και κλείνουμε με </div>
Δείτε τον κώδικα από κάτω για να καταλάβετε.
<div style="float: left; width: 45%">
Εδώ το κείμενο σας</div>

Τέλος βάζουμε την γραμμή
<divstyle="clear: both"></div><br />
Το <br /> το βάζουμε για να αλλάξει γραμμή και να μπορούμε ξανά να γράψουμε σε όλο το πλάτος της ανάρτησης.

Αν θέλουμε 2 στήλες βάζουμε των κώδικα 2 φορές και ρυθμίζουμε το πλάτος τους.
Αν θέλουμε 3 στήλες βάζουμε των κώδικα 3 φορές και ρυθμίζουμε το πλάτος τους.
Με μπλε ο κώδικας που βάζουμε για να ρυθμίσουμε τις στήλες μας

Όλος ο κώδικας ξανά μια φορά (3 στήλες)
<div style="float: left; width: 30%;">
Στήλη #1</div>
<div style="float: left; width: 30%;">
Στήλη #2</div>
<div style="float: left; width: 30%;">
Στήλη #3</div>
<divstyle both="" clear:=""></divstyle><br />

Βάλτε 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">

</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>

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

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

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

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

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

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

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>

//<![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>

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 δεν φαίνεται.

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

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

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

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

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

Μπαίνει αυτόματα και φωτογραφία... Ένα πολύ καλό και πολύ χρήσιμο κολπάκι πλήρως ρυθμιζόμενο και τσεκαρισμένο.

Πηγαίνουμε στη σελίδα του blog, πατάμε πρότυπο και μετά επεξεργασία HTML και μας βάζει στον κώδικα της σελίδας.

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

Μετά πατάμε ctrl+f και μας ανοίγει το παραθυράκι search επάνω δεξιά όπως βλέπουμε στην εικόνα.
Στο παράθυρο του search βάζουμε <data:post.body/> και πατάμε enter.
Θα μας πάει εκεί που είναι αυτό.
ΑΥΤΟ ΘΑ ΤΟ ΣΒΗΣΟΥΜΕ / ΑΝΤΙΚΑΤΑΣΤΗΣΟΥΜΕ με τον κώδικα που έχω ακριβώς από κάτω.
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

ΠΡΟΣΟΧΗ : το <data:post.body/> υπάρχει περίπτωση να υπάρχει 2 φορές μέσα στον κώδικα.
Θα το αντικαταστήσουμε και τις δυο φορές με τον κώδικα που είδαμε πιο πάνω.

Φτάνουμε στο τέλος.
Τώρα ξαναπατάμε ctrl+f να ανοίξει το search αν δεν είναι ανοικτό δηλαδή και βάζουμε </head>

Όπως βλέπετε στην εικόνα, το </head> (το </head> είναι μόνο ένα) ακριβώς από πάνω βάζουμε τον κώδικα που σας έχω από κάτω.
<script type='text/javascript'>
posts_no_thumb_sum = 500;
posts_thumb_sum = 300;
img_thumb_height = 200;
img_thumb_width = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

Πατάμε αποθήκευση και τέλος. Αυτό ήταν. To blog μας απέκτησε αυτόματο read more τοποθετόντας την εικόνα της αναρτήσεις δεξιά σαν thumbnail.

ΡΥΘΜΙΣΕΙΣ
posts_no_thumb_sum = 500; Το 500 εδώ είναι πόσοι χαρακτήρες θα γραφτούν αν ΔΕΝ υπάρχει φωτογραφία στο άρθρο μας. Βάλτε ότι θέλετε, εγώ το έχω 500
posts_thumb_sum = 300; Το 300 εδώ είναι πόσοι χαρακτήρες θα γραφτούν δεξιά από την φωτογραφία στο άρθρο μας. Βάλτε ότι θέλετε, εγώ το έχω 300
img_thumb_height = 200; Το 200 εδώ είναι το ύψος τις φωτογραφίας. Βάλτε ότι θέλετε, εγώ το έχω 200
img_thumb_width = 300; Το 300 εδώ είναι το πλάτος τις φωτογραφίας. Βάλτε ότι θέλετε, εγώ το έχω 300

Αυτό χρησιμοποιώ και εγώ στη σελίδα που βρίσκεστε με αυτές τις ρυθμίσεις.

http://helpblogwidget.blogspot.gr/

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&alt=json-in-script&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> βάζουμε τον παρακάτω κώδικα

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

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

$('.popular-posts img').attr('src', function(e, t) {

return t.replace('/w72-h72-p-nu/', '/s350-c/')

});

$('.popular-posts ul li .item-snippet').each(function(){

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

var j=txt.lastIndexOf(' ');

if(j>10)

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

});

$('.popular-posts ul li .item-content a').each(function(){

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

var j=txt.lastIndexOf(' ');

if(j>=6)

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

});

</script>

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

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

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

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

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

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

Βοηθητικά Widget/Script για blog

Σελίδες

Πέμπτη 20 Οκτωβρίου 2016

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

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

Τετάρτη 19 Οκτωβρίου 2016

Facebook box στο blog μας

Χωρίστε την ανάρτηση σε 2 ή 3 κάθετες στήλες

Σάββατο 15 Οκτωβρίου 2016

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

Παρασκευή 14 Οκτωβρίου 2016

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

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

Αυτόματα το Διαβάστε περισσότερα / Auto Read more και με εικόνα

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

Η Προμήθειες μας !

Τελευταία Σχόλια