Ads 468x60px

Πέμπτη, 20 Ιουνίου 2013

Animated Recent posts for blogger with thumbnails

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










Πηγαίνετε 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(http://4.bp.blogspot.com/-n-c0E1EolLQ/UNgwiGzaTEI/AAAAAAAAI08/QlG8dKfnY0g/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] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
 imgr[1] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
 imgr[2] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
 imgr[3] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
 imgr[4] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
 showRandomImg = true;
 boxwidth = 255;
 cellspacing = 6;
 borderColor = "#232c35";
 bgTD = "#000000";
 thumbwidth = 50;
 thumbheight = 50;
 fntsize = 15;
 acolor = "#666";
 aBold = true;
 icon = " ";
 text = "comments";
 showPostDate = true;
 summaryPost = 40;
 summaryFontsize = 10;
 summaryColor = "#666";
 icon2 = " ";
numposts = 10;
 home_page = "Εδώ βάζετε την διευθύνση του 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>
...................................................................................................................................
Οι αλλαγές που πρέπει να γίνουν...
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Εάν έχετε βάλει και άλλο gadget με script jquery στο blog σας,δοκιμάστε το και αν δείτε ότι δεν λειτουργεί αντιγράψτε τον κώδικα μετά απο αυτό!

 home_page--Εδώ βάζετε την διευθύνση του blog σας!!

 numposts = 10;-Εδώ βάζετε όσες αναρτήσεις θέλετε να παρουσιάζονται!!

Αυτά είναι τα βασικά!!Όσοι ξέρουν μπορεί να αλλάξουν και άλλα όπως
ταχύτητα-χρώματα-ύψος-πλάτος κτλ!!

Demo

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

Edit by vaiol!!

Πηγή http://www.newbloggertips.com/





0 σχόλια :

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

Icon Icon Icon

spice up your blog