Φίλοι bloggers γεια σας !!!Σήμερα σας παρουσιάζω ένα content slider κυκλικά περιστρεφόμενο, με περίληψη κειμένου επάνω στις εικόνες που προβάλει..... Είναι λίγο δύσκολο για τους νέους bloggers, γι αυτό ας το δοκιμάσουν μόνον όσοι έχουν πείρα σε τέτοιου είδους αναρτήσεις...
DEMO 1 DEMO 2
1ο. Πάμε λοιπόν Σχεδίαση => Επεξεργασία HTML (ΜΗ τσεκάρετε το "Επέκταση προτύπων γραφικών στοιχείων") και με ctrl F ψάχνουμε τη φράση: ]]></b:skin>
ΑΠΟ ΠΑΝΩ ακριβώς βάλτε τον κώδικα :
/* START
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/
#slide-container {
height:360px;
position:relative;
width:480px;
}
#slider {
height:360px;
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:480px;
}
.slide-desc {
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0;
width:200px;
z-index:99999;
}
.slide-desc h2{display:block;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:480px;
height:360px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:500px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:132px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* END
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/
2ο. ...με ctrl F ψάχνουμε τη φράση: </body>
και βάλτε τον παρακάτω κώδικα ΠΡΙΝ από αυτήν....
<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
3ο. Βάλτε τον παρακάτω κώδικα σαν "Προσθήκη gadget" όπως στην εικόνα που δείχνει πως βάζουμε ένα gadget :
<div id="slider">
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-easySlider.min.js"></script>
<script style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
***Στο πρώτο κώδικα, είναι οι διαστάσεις του slider...
***Στο δεύτερο κώδικα, είναι αυτοματισμός...
***Στο τρίτο κώδικα με κόκκινα γράμματα είναι : ο αριθμός των αναρτήσεων, αν θέλετε τυχαίες αναρτήσεις (false / true ), και (πολύ σημαντικό) η διεύθυνση του blog σας....
***ΠΡΟΣΟΧΗ όταν βάλετε τη διεύθυνση του blog σας, μη βάλετε 2 // (καθέτους)
ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!
Πηγή : www.abu-farhan.com/ (το τρελό αγόρι abu-farhan από την Ασία)
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}