Ads 468x60px

Πέμπτη 31 Οκτωβρίου 2013

Animated Scrolling Recent Post Widget

Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα πάρα πολύ ωραίο widget για να
παρουσιάζουμε τις τελευταίες αναρτήσεις του blog μας!Σκρολάρει προς τα κάτω
αναδιπλώνοντας τις αναρτήσεις και έχει και εφέ για τα εικονίδια (thumbnail)των
αναρτήσεων και εδώ είναι η διαφορετικότητα από παρόμοιο widget που σας έχω
παρουσιάσει παλιότερα!

Δείτε εδώ το DEMO


Η εγκατάσταση είναι πάρα πολύ απλή και για να γίνει αυτο...

 Πηγαίνετε blogger--> Διάταξη -->

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

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--> 
..............................................................................................................................................
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css" media="screen">
<!--
/* ========== Scrolling Recent Posts Widget By NewBloggerTips.com ======== */

#NBT-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}
#NBT-widget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#NBT-widget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh46MYVNNAKsK7RI5Oe62ph_1XedbgGClej93H15y5s3Opo_4a2jz_NzO08KB1HuxEZPRafnuMJUKz7acW_CntNfegd2fD6PcLS-HMXw2jaRBaLdy5iJIk5dNRDwaUVFcde11wYMooHSVXg/s1600/NewBloggerTips.com-post.jpg) repeat-x;
border: 1px solid #ddd;
}
#NBT-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#NBT-widget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#NBT-widget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#NBT-widget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}
.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}

/* ========== Scrolling Recent Posts Widget By NewBloggerTips.com ======== */

-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3sB787HX5RpPs7c4cAma91TG2cRgPQ75G6YwVsfogXx4pQmKS3C8KZmqGrO5lSwWN7ULLma_9isB950qdYnByZ4wcIe6Qh7LNWPYy_fYrCpsF-_3SHBKPRxIVQHwWA5TeCF-W5x2BMzDg/s1600/No+Image+1.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3sB787HX5RpPs7c4cAma91TG2cRgPQ75G6YwVsfogXx4pQmKS3C8KZmqGrO5lSwWN7ULLma_9isB950qdYnByZ4wcIe6Qh7LNWPYy_fYrCpsF-_3SHBKPRxIVQHwWA5TeCF-W5x2BMzDg/s1600/No+Image+1.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3sB787HX5RpPs7c4cAma91TG2cRgPQ75G6YwVsfogXx4pQmKS3C8KZmqGrO5lSwWN7ULLma_9isB950qdYnByZ4wcIe6Qh7LNWPYy_fYrCpsF-_3SHBKPRxIVQHwWA5TeCF-W5x2BMzDg/s1600/No+Image+1.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3sB787HX5RpPs7c4cAma91TG2cRgPQ75G6YwVsfogXx4pQmKS3C8KZmqGrO5lSwWN7ULLma_9isB950qdYnByZ4wcIe6Qh7LNWPYy_fYrCpsF-_3SHBKPRxIVQHwWA5TeCF-W5x2BMzDg/s1600/No+Image+1.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3sB787HX5RpPs7c4cAma91TG2cRgPQ75G6YwVsfogXx4pQmKS3C8KZmqGrO5lSwWN7ULLma_9isB950qdYnByZ4wcIe6Qh7LNWPYy_fYrCpsF-_3SHBKPRxIVQHwWA5TeCF-W5x2BMzDg/s1600/No+Image+1.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#665";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#665";
icon2 = " ";
numposts = 10;
home_page = "ΕΔΩ ΒΑΖΕΤΕ ΤΟ URL ΤΟΥ BLOG ΣΑΣ";
limitspy=4;
intervalspy=4000;
</script>
<div id="NBT-widget">
<script src='https://dl.dropbox.com/s/gviv5r1iksjfvj3/Scrolling_recent-posts-Spy-NBT.js' type='text/javascript'></script>
</div>
..............................................................................................................................................................
ΑΛΛΑΓΕΣ 

 ΕΔΩ ΒΑΖΕΤΕ ΤΟ URL ΤΟΥ BLOG ΣΑΣ--Εδώ μπαίνει η διεύθυνση του blog σας!

 numposts = 10; --Αλλάζετε το 10 με το πόσες αναρτήσεις θέλετε να εμφανίζονται!

 4000 Εάν θέλετε αλλάζετε και την ταχύτητα του scroll!

Mόλις τελειώσετε Αποθήκευση και είστε έτοιμοι! 


Υγ:Εάν δεν λειτουργεί και έχετε και άλλον κώδικα jquery στο template σας, αφαιρέστε
από την αρχή του κώδικα εδώ αυτο:

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css" media="screen">



Καλή επιτυχία!!!


Πηγή κώδικα 
thanks to newbloggertips.com



Edit by
Αναρτήθηκε από στις 5:00 μ.μ.
Σας άρεσε το άρθρο? Διαδώστε το!

If you enjoyed this Post Please take 5 Seconds to share it and Join Us Our Latest Updates By Email and Social Networks.

Stay Connected With Free Updates!

Follow us!
Ετικέτες ,

0 σχόλια :

Δημοσίευση σχολίου

Εγγραφή σε: Σχόλια ανάρτησης ( Atom )
Icon Icon Icon

spice up your blog


Giveaway of the Day
Άδεια Creative Commons
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .