jQuery Slider Box widget για τον Blogger

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Είμαι σίγουρος ότι πολλοί το ψάχνετε ή το έχετε βρει ήδη, αλλά είναι πολύ δύσκολο στην εγκατάσταση λόγω του ότι πρέπει να επέμβετε στον κώδικα. Αυτό που θα δούμε σήμερα είναι πολύ πιο απλό.
Ακολουθήστε τα παρακάτω βήματα για να το βάλετε στη Σελίδα σας, (όσοι θέλετε δηλ.):
  • Σύνδεση στον Blogger
  • Σχεδίαση - Προσθήκη gadget
  • Επιλέξτε HTML/JavaScript
  • Επικολλήστε τον παρακάτω κώδικα:
<style>
.fp-slider {
height: 332px;
margin: 0 0 15px;
overflow: hidden;
padding: 0;
position: relative;
width: 615px;
}
.fp-slides-container {
}
.fp-slides, .fp-thumbnail, .fp-prev-next, .fp-nav {
width: 615px;
}
.fp-slides, .fp-thumbnail {
height: 300px;
overflow: hidden;
position: relative;
}
.fp-title {
color: #FFFFFF;
font: bold 18px Arial,Helvetica,Sans-serif;
margin: 0;
padding: 0 0 2px;
text-shadow: 0 1px 0 #000000;
}
.fp-title a, .fp-title a:hover {
color: #FFFFFF;
text-decoration: none;
}
.fp-content {
background: none repeat scroll 0 0 #111111;
bottom: 0;
left: 0;
opacity: 0.7;
overflow: hidden;
padding: 10px 15px;
position: absolute;
right: 0;
}
.fp-content p {
color: #FFFFFF;
line-height: 18px;
margin: 0;
padding: 0;
text-shadow: 0 1px 0 #000000;
}
.fp-more, .fp-more:hover {
color: #FFFFFF;
font-weight: bold;
}
.fp-nav {
background: none repeat scroll 0 0 #747171;
height: 12px;
padding: 10px 0;
text-align: center;
}
.fp-pager a {
background-image: url("http://3.bp.blogspot.com/-hBeI2lhql8M/Txlpd_-5d1I/AAAAAAAACsw/2JC6VfjeZto/s1600/featured-pager.png");
background-position: 0 0;
cursor: pointer;
display: inline-block;
float: none;
height: 12px;
line-height: 1;
margin: 0 8px 0 0;
opacity: 0.7;
overflow: hidden;
padding: 0;
text-indent: -999px;
width: 12px;
}
.fp-pager a:hover, .fp-pager a.activeSlide {
background-position: 0 -112px;
opacity: 1;
text-decoration: none;
}
.fp-prev-next-wrap {
position: relative;
z-index: 200;
}
.fp-prev-next {
bottom: 130px;
height: 37px;
left: 0;
position: absolute;
right: 0;
}
.fp-prev {
background: url("http://3.bp.blogspot.com/-drQqpof-22I/Txlpet311AI/AAAAAAAACs4/FdLW2mogGoE/s1600/featured-prev.png") no-repeat scroll left top transparent;
float: left;
height: 37px;
margin-left: 14px;
margin-top: -180px;
opacity: 0.6;
width: 37px;
}
.fp-prev:hover {
opacity: 0.8;
}
.fp-next {
background: url("http://4.bp.blogspot.com/-gnHwusQagpI/TxlpcmmneoI/AAAAAAAACso/oN6AOjIx9xI/s1600/featured-next.png") no-repeat scroll right top transparent;
float: right;
height: 37px;
margin-right: 14px;
margin-top: -180px;
opacity: 0.6;
width: 36px;
}
.fp-next:hover {
opacity: 0.8;
}
div.jump-link {
background: url("http://1.bp.blogspot.com/-3lNtLBgMe24/TymBqycue0I/AAAAAAAAC8U/g5MEdEJoWVU/s1600/post.png") repeat-x scroll 0 1px transparent;
border: 1px solid #EEEEEE;
font-size: 12px;
margin-left: 510px;
padding: 10px;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
<script type="text/javascript" src="http://yourjavascript.com/11292210222/slider 1.txt.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/11229251922/slider 2.txt.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/21129126192/slider 3.txt.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/91212172521/slider 4.txt.js"></script>
<!-- Featured Content Slider Started -->
<div class='fp-slider clearfix'>
<div class='fp-slides-container clearfix'>
<div class='fp-slides'>

<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="
http://2.bp.blogspot.com/-gKoH2-VWNt4/Tzvcmh2yfDI/AAAAAAAAEPM/14byEqmVXdk/s1600/1.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Τίτλος προεπιλεγμένης διαφάνειας 1</a>
</h3>
<p>
Γράψτε το κείμενο που θέλετε να εμφανίζεται στην εικόνα. Μπορείτε να βάλετε πρόλογο μίας ανάρτησης ή ό,τι άλλο επιθυμείτε εσείς.Μια ευγενική προσφορά της www.bloggertipsandtricks.net
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>

<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 1 Code End -->
<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="
http://4.bp.blogspot.com/-utnyirJjxwc/Tzvc03ZJpzI/AAAAAAAAEPU/0nfKaui07jg/s1600/2.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Τίτλος προεπιλεγμένης διαφάνειας 2</a>
</h3>

<p>
Γράψτε το κείμενο που θέλετε να εμφανίζεται στην εικόνα. Μπορείτε να βάλετε πρόλογο μίας ανάρτησης ή ό,τι άλλο επιθυμείτε εσείς.Μια ευγενική προσφορά της www.bloggertipsandtricks.net
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 2 Code End -->
<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="
http://1.bp.blogspot.com/-nPyBoqNNoik/TzvdAQJUF9I/AAAAAAAAEPc/_yhHzT1_7FA/s1600/3.jpg"/></a>
</div>
<div class='fp-content-wrap'>

<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Τίτλος προεπιλεγμένης διαφάνειας 3</a>
</h3>
<p>
Γράψτε το κείμενο που θέλετε να εμφανίζεται στην εικόνα. Μπορείτε να βάλετε πρόλογο μίας ανάρτησης ή ό,τι άλλο επιθυμείτε εσείς.Μια ευγενική προσφορά της www.bloggertipsandtricks.net
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 3 Code End -->
<!-- Slide 4 Code Start -->

<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="
http://2.bp.blogspot.com/-WUtC__YgJdY/TzvdLS8WY0I/AAAAAAAAEPk/PUpI3pBpTGI/s1600/4.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Τίτλος προεπιλεγμένης διαφάνειας 4</a>
</h3>
<p>
Γράψτε το κείμενο που θέλετε να εμφανίζεται στην εικόνα. Μπορείτε να βάλετε πρόλογο μίας ανάρτησης ή ό,τι άλλο επιθυμείτε εσείς.Μια ευγενική προσφορά της www.bloggertipsandtricks.net
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>

</div>
</div>
</div>
<!-- Slide 4 Code End -->
<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="
http://2.bp.blogspot.com/-Rrkh31lu-IE/TzvdUr4OSjI/AAAAAAAAEPs/lzQ0uzlfLEg/s1600/5.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Τίτλος προεπιλεγμένης διαφάνειας 5</a>
</h3>
<p>
Γράψτε το κείμενο που θέλετε να εμφανίζεται στην εικόνα. Μπορείτε να βάλετε πρόλογο μίας ανάρτησης ή ό,τι άλλο επιθυμείτε εσείς.Μια ευγενική προσφορά της www.bloggertipsandtricks.net
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 5 Code End -->
</div>
<div class='fp-nav'>
<span class='fp-pager'/>
</span></div>
</div>
</div>
<div style='clear:both;'/>
<!-- Featured Content Slider End --></div>
  • Στη θέση της "δίεσης" #, βάλτε τους συνδέσμους που θέλετε να οδηγούν οι εικόνες και οι περιγραφές του Slider
  • Αντικαταστήστε τις υπάρχουσες φωτογραφίες με τις δικές σας. Σας τις έχω τονίσει με κόκκινο φόντο.
  • Πατήστε αποθήκευση και το gadget είναι έτοιμο.
Υ.Γ. Η θέση του συγκεκριμένου gadget είναι ακριβώς πάνω από τις αναρτήσεις.

8 comments:

  1. Πολύ ωραίο φαίνεται αλλά που μπαίνει??? Το έβαλα στα gadgets στα δεξιά αλλά το εμφάνισε εκεί! Στην δεξια στήλη! Πως το βάζουμε πάνω από τις αναρτήσεις???

    ReplyDelete
    Replies
    1. με το ποντίκι το μετακινείς σαν εικόνα και το βάζεις όπου εσύ θες. Αφού το έχεις βάλει εκεί που χρειάζεται πατάς αποθήκευση πάνω δεξιά.

      Delete
  2. Ωραίο κι εύκολο. Προσωπικά έχω ένα πρόβλημα. Στο δικό μου blog μπαίνει κανονικά αλλά δεν κινείται. Κάνω κάτι λάθος?

    ReplyDelete
    Replies
    1. Και στη δική μου Σελίδα το ίδιο συνέβη όταν προσπάθησα να το βάλω.
      Μάλλον κάποια script συγκρούονται.

      Delete
  3. Υπάρχει κάποια εντολή για να γίνεται η εναλλαγή εικόνων με fade (σβήσιμο) αντί να τρέχει?

    ReplyDelete
    Replies
    1. Δεν έχω ακόμη κάτι έτοιμο. Μόλις βρω θα το ανεβάσω.

      Delete
    2. ευχαριστώ

      Delete
  4. Σ' ευχαριστώ πάρα πολύ. Έψαχνα καιρό κάτι ωραίο και εύκολο

    ReplyDelete

 
back to top