Σ' αυτό το post θα σας δείξω πως να βάλετε και εσείς στο blog σας αυτό το εκπληκτικό slider που φαίνεται στην παρακάτω εικόνα! Να σας πω ακόμη ότι εκτός από το γεγονός ότι είναι ένα φανταστικό στολίδι για το blog σας, είναι επίσης και πολύ χρήσιμο μιας και μπορείτε να το χρησιμοποιήσετε και ως Popular Post Slider. Δηλαδή κάτω από κάθε εικόνα να προσθέσετε και μια περιγραφή από κάποιο σας post και να δημιουργήσετε ένα σύνδεσμο με το post αυτό, ώστε όταν οι επισκέπτες σας κάνουν κλικ να στην ανάλογη εικόνα να τους παραπέμπει εκεί! Να σας πω ακόμη ότι τους κωδικές τους βρήκα στο Blogger-Help.
1. Συνδεθητε στο blogger-->Σχεδίαση-->Επεξεργασία HTML
2. Με την βοήθεια ctrl+F ψάξτε για το ]]></b:skin>
3. Έπειτα αντιγράψτε τον παρακάτω κώδικα και κάντε τον επικόλληση πριν από αυτό .2. Με την βοήθεια ctrl+F ψάξτε για το ]]></b:skin>
/* START
--------------------------------------------------------------------
Roundabout Content Slider using jQuery for blogger
By http://www.abu-farhan.com
--------------------------------------------------------------------
Roundabout
*/
#featured {margin:10px 0 30px 0;}
#folio_scroller_container {margin-top:35px; margin-bottom:40px; height:auto;}
#folio_scroller_container .roundabout-holder {list-style:none; height:400px; margin:0px auto 20px auto;}
.roundabout-holder {list-style:none; width:400px; height:250px; margin:0px auto;}
.roundabout-moveable-item {font-size:12px!important;
/* Resize Image*/
height:180px;
width:350px;
/*-------------*/
cursor:pointer; padding:5px; border:1px solid #aaaaaa; -webkit-border-radius:5px; -moz-border-radius:5px; background:#f9f9f9;}
.roundabout-moveable-item img {height:100%; width:100%; background-color:#FFFFFF; margin:0;}
.roundabout-in-focus {cursor:auto;}
.roundabout-in-focus:hover {-webkit-box-shadow:0px 0px 20px #787878; -moz-box-shadow:0px 0px 20px #787878; background:#f9f9f9;}
.roundabout-holder span {display:none; font-size:12px;}
.roundabout-in-focus:hover span {display:inline; position:absolute; bottom:5px; right:5px; padding:8px 20px; background:#f9f9f9; color:#000000; z-index:999; -webkit-border-top-left-radius: 5px; -moz-border-radius-topLeft: 5px; font-size : 12px;border-left:1px solid #aaaaaa; border-top:1px solid #aaaaaa; }
.roundabout a:active,
.roundabout a:focus,
.roundabout a:visited {outline:none; text-decoration:none;}
.roundabou li {margin:0}
a img {border:none; outline:0;}
/* END
--------------------------------------------------------------------
Roundabout Content Slider using jQuery
By http://www.abu-farhan.com
--------------------------------------------------------------------
Roundabout
*/ 4. Με την βοήθεια ξανά ctrl+F ψάξτε για το </body> και κάντε επικόλληση τον παρακάτω κώδικα μετά από αυτό.<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/jquery.roundabout-1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var interval;
$('#featured ul')
.roundabout({
duration: 600 }
)
.hover(
function() {
// oh no, it's the cops!
clearInterval(interval);
},
function() {
// false alarm: PARTY!
interval = startAutoPlay();
}
);
// let's get this party started
interval = startAutoPlay();
});
function startAutoPlay() {
return setInterval(function() {
jQuery('#featured ul').roundabout_animateToNextChild();
}, 5000);
}
</script> 5. Αποθηκεύστε το πρότυπο σας!6. Τώρα πρέπει να προσθέσετε το widget. Πηγαίνετε Σχεδίαση-->Προσθήκη Gadget-->HTML/Java Script αντιγράφετε τον παρακάτω κώδικα και τον κάνετε επικόλληση μέσα σ' αυτό.
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-roundabout.js"></script><script style="text/javascript"> var numposts_gal = 6; var random_posts = false; </script> <script src="http://YOUR_BLOG_HOME_PAGE_URL/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>7. Μην ξεχάσετε εκεί που λέει στον κώδικα YOUR_BLOG_HOME_PAGE_URL να το αντικαταστήσετε με την διεύθυνση url του blog σας, από το οποίο θα παίρνει τα δεδομένα για να εμφανίζει τις αναρτήσεις. Αποθηκεύστε και είστε έτοιμου.
