Τυχαιο Slider Widget Αναρτησεων Για Τον Blogger!!

Μεχρι τωρα στα Slider Widgets που υπαρχουν βαζουμε εμεις χειροκινητα τις εικονες που εμφανιζουν και δεν αλλαζουν παρα μονο αν τις αλλαξουμε εμεις.

 Slider Widget Αναρτησεων Για Τον Blogger


Λογω της φυσικης δομης του blogger οι παλιες αναρτησεις μπορει να χαθουν λογω του οτι οι επισκεπτες δεν πλοηγουνται στις πολυ παλιες αναρτησεις μας ιδιαιτερα αν πρεπει να αλλαξουν παρα πολλες σελιδες.

 Αυτο που σας δινω σημερα επιλεγει τις εκονες μονο του τυχαια απο το blog μας η απο μια κατηγορια που θα του προσδιορισουμε εμεις και κυκλικα  παρουσιαζει στον επισκεπτη τις μικρογραφιες τους.  Ετσι και οι παλιοτερες αναρτησεις κερδιζουν προβολες.

Η καθε μικρογραφια θα δειχνει ποσα σχολια εχει η αναρτηση, το ονομα του συγγραφεα και το avatar, ημερομηνια δημοσιεσης και την κατηγορια

Μπορουμε να το βαλουμε πανω απο τις αναρτησεις η στην πλαινη μπαρα.

Δειτε κι αυτο:
Nivo Slider Για Τον Blogger

Αν θελετε δειτε το demo

Για να το προσθεσουμε στο ιστολογιο μας πρεπει να το τοποθετησουμε σα gadget. Ομως πρωτα θα πρεπει να προσθεσουμε στο προτυπο το css.

Ετσι παμε στο πινακα ελεγχου - Θεμα -επεξεργασια HTML και βρισκουμε το <head>. Ακριβως απο κατω βαζουμε το παρακατω.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'></script>

Αν στο θεμα σας υπαρχει καποιο απο τα παραπανω links τοτε δεν χρειαζεται να το ξαναπροσθεσετε.
Τωρα πρεπει να βρουμε το ]]></b:skin> και ακριβωε απο πανω του να βαλουμε αυτον.

.mbt-random{margin:0 5px;border:0;width:100%;overflow:hidden}
.mbt-random .slides{list-style-type:none;margin:0 auto;padding:0}
.mbt-random li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px}
.mbt-random .flex-control-nav li{display:inline-block;margin:0 2px}
.mbt-random .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important}
.flex-direction-nav .flex-prev{left:-50px}
.flex-direction-nav .flex-next{right:-50px;text-align:right}
.mbt-random .flex-control-paging{display:none}
.flex-direction-nav{position:relative;top:-250px}
.mbt-random .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128}
.mbt-random .flex-div{margin:0 auto;display:block;padding:0!important;position:relative;height:370px}
.mbt-random li a{color:#0080ff;text-decoration:none}
.mbt-random i{color:#999;padding-right:5px}
.mbt-random .iline{line-height:2em;margin:0;position:relative;top:-90px;background:#56adff;padding:3px 10px;display:inline-block}
.mbt-random .icontent{line-height:1.5em;margin-top:5px}
.mbt-random div span{margin:0 5px 0 0;display:inline-block;font-weight:400}
.mbt-random .mbttitle{font-family:oswald;font-size:20px;color:#fff;font-weight:400;text-decoration:none;position:relative;top:-90px;background:#66b5ff;padding:15px 10px;display:block}
.mbt-random .mbttitle:hover,.mbt-random .itotal a:hover{color:#fff;text-decoration:none}
.mbt-random .iedit a{text-decoration:none;color:#999;cursor:pointer}
.mbt-random .iedit:before,.mbt-random .iauthor:before,.mbt-random .itag:before,.mbt-random .icomments:before,.mbt-random .idate:before,.mbt-random .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}
.mbt-random .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}
.mbt-random .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%}
.mbt-random .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px}
.mbt-random .iFeatured img{height:305px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0;margin:0;padding:0;opacity:.7}
.mbt-random .iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
.mbt-random .icomments a, .mbt-random .itag a{color:#0080ce;font-family:arial;font-size:12px}
.mbt-random .icomments a:hover, .mbt-random .itag a:hover{text-decoration:underline}
.mbt-random .itag:before{content:'\f02c';padding:0 3px 0 7px;color:#fff}
.mbt-random .icomments:before{content:'\f086';padding:0 3px 0 7px;color:#fff}
.mbt-random .idate{color:#fff;padding:3px 4px;font-family:arial;font-size:11px}
.mbt-random .idate:before{content:'\f073';padding:0 5px;color:#fff}

Καντε τις παρακατω αλλαγες.
Αν θελετε να αλλαξετε το μπλε background αλλαξτε το  #66b5ff
Αν θελετε να αλλαξετε το ανοιχτο μπλε background πισω απο το ονομα του συντακτη αλλαξτε το #56adff
Αν θελετε να αλλαξετε το χρωμα απο τα σχολια και τις κατηγοριες αλλαξτε το #0080ce

Τωρα θα πρεπει να βαλουμε το gadget στο blog μας. Οποτε παμε στη διαταξη και κανουμε  κλικ στο προσθηκη gadget.

blogger slider widget

Επιλεγουμε το HTML/Javascript

blogger slider widget
και κανουμε επικοληση τον παρακατω κωδικο.

<script type="text/javascript">
//################### Defaults
var ListBlogLink = "https://posftiaxnoblog.blogspot.com/";
var ListCount = 4;
var TitleCount = 66;
var ImageSize = 800;
$(window).load(function() {
  $('.mbt-random').flexslider({
   animation: "slide",
    itemWidth: 600,
itemMargin: 25,
  directionNav: true,
       touch: true,
       slideshowSpeed: 2500,
      pauseOnHover: true,
     animationSpeed: 700,
  });
});
var RandomArray = [];
var TotalPosts  = 0;
var RandomArray = new Array(ListCount);
function TotalCount(json) {
    TotalPosts   = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"'+ListBlogLink+'/feeds/posts/default?alt=json-in-script&callback=TotalCount\"><\/script>');
function GenerateNum() {
    for (var i = 0; i < ListCount ; i++) {
    for (var j = 0; j < RandomArray.length; j++){
    var RandomNum = Math.floor(Math.random() * (TotalPosts ) + 1);
    RandomArray[i] = RandomNum; }
                                                                  }
}
</script>
<div class="flexslider mbt-random">
<ul class="slides">
<script type="text/javascript">
//################### Function Start
function mbtrand(json) {
for (var i = 0; i < json.feed.entry.length; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";
//################### Category
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";
if(k < json.feed.entry[i].category.length-1)
{ ListTag += ", ";}
}
}
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
                         Y = ListDate.substring(0, 4);
                        m = ListDate.substring(5, 7);
                         D = ListDate.substring(8, 10);
                         M = ListMonth[parseInt(m - 1)];                    
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
                         YY = ListUpdate.substring(0, 4);
                        mm = ListUpdate.substring(5, 7);
                         DD = ListUpdate.substring(8, 10);
                         TT = ListUpdate.substring(11, 16);
                         MM = ListMonth[parseInt(mm - 1)];
//################### Thumbnail Check
if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}
// YouTube scan
else if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
    var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
 
    if (youtube_id.length == 11) {
        var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
        }
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
// Support For 3rd Party Images
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png'";
}
//###################  Printing List
var listing = "<li><div class='flex-div'><div class='iFeatured'><a  href="
+ ListUrl+
  "><img src="
+ListImage+
"/></a></div><div class='iline'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+
"</span><span class='icomments'>"
+ListComments +
"</span> <span class='idate'>"
+ D +
" "
+ M +
"</span><span class='itag'>"
+ListTag +
"</span></div><a class='mbttitle' href="
+ListUrl+
"target='_blank'>"
+ListTitle+
"</a></div></li>";
document.write(listing);
} }
<!-- #### Invoking the Callback Function #### -->
for (var i = 0; i < ListCount ; i++) {
GenerateNum();
var scripta = '<script type=\"text/javascript\" src=\"'+ListBlogLink+'/feeds/posts/default?alt=json-in-script&start-index='+RandomArray[i] + '&max-results=1&callback=mbtrand\"><\/script>';
document.write(scripta);
};
</script>
</ul></div>

Τωρα το μονο που μενει να αλλαξετε ειναι το link με τα κοκκινα γραμματ και να προσθεσετε το δικο σας.
Απο προεπιλογη οι εικονες που παρουσιαζονται ειναι 4 και σας προτεινο να μην το αλλαξετε γιατι μπορει να επιβαρεινει την ταχυτητα του blog σας. Αν παλι θελετε να δοκιμασετε πρεπει να αλλαξετε το var ListCount = 4
Το μεγεθος των εικονων που θα χρησιμοποιηθουν ειναι 800px σε πλατος αλλα αν θελετε να βαλετε το widget στη πλαινη μπαρα τοτε μπορειτε να αλλαξετε το var ImageSize = 800

Ειναι ενα πολυ καλο gadget και σιγουρα θα αυξησει τις προβολες του blog σας. Αν χρειστειτε βοηθει στην εγκατσταση του τοτε αφηστε μου ενα σχολιο.