Slideshow στο μπλογκ σας

Αυτό το τέχνασμα σας επιτρέπει να βάλετε στο ιστολόγιό σας μια πολύ ωραία παρουσίαση με εικόνες, καθώς και μια μικρή περιγραφή, είτε κάποιον αναρτήσεων σας είτε κάποιων φωτογραφιών και είναι περίπου σαν αυτό που έχω στην δική μου ιστοσελίδα και όπως φαίνεται στην εικόνα παρακάτω.

Για να το κάνετε αυτό ακολουθείτε τα εξής βήματα:

Συνδέεστε στον blogger και πηγαίνετε Πίνακας Ελέγχου –> Διάταξη -> Επεξεργασία HTML.

Πατάτε ctrl+f και ψάχνετε να βρείτε το ]]></b:skin> . Ακριβώς πάνω και πριν από αυτό επικολλάτε τον παρακάτω κώδικα.


#featured{ width:400px; padding-right:250px; position:relative; height:250px; background:#fff; border:5px solid #ccc; } #featured ul.ui-tabs-nav{ position:absolute; top:0; left:400px; list-style:none; padding:0; margin:0; width:250px; } #featured ul.ui-tabs-nav li{ padding:1px 0; padding-left:13px; font-size:12px; color:#666; } #featured ul.ui-tabs-nav li span{ font-size:11px; font-family:Verdana; line-height:18px; } #featured .ui-tabs-panel{ width:400px; height:250px; background:#999; position:relative; overflow:hidden; } #featured .ui-tabs-hide{ display:none; } #featured li.ui-tabs-nav-item a{/*On Hover Style*/ display:block; height:60px; color:#333; background:#fff; line-height:20px; outline:none; } #featured li.ui-tabs-nav-item a:hover{ background:#f2f2f2; } #featured li.ui-tabs-selected{ /*Selected tab style*/ background:url(' http://3.bp.blogspot.com/_L116RpGjEMY/S-3MJC5jdTI/AAAAAAAABuc/_-Lmjmgqelo/s1600/tabs-selected.gif') top left no-repeat; } #featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:#ccc; } #featured ul.ui-tabs-nav li img{ float:left; margin:2px 5px; background:#fff; padding:2px; border:1px solid #eee; } #featured .ui-tabs-panel .info{ position:absolute; top:180px; left:0; height:70px; width: 400px; background: url('http://1.bp.blogspot.com/_L116RpGjEMY/S-3LQB_CsKI/AAAAAAAABuY/KipWcEpC2Zg/s1600/panel+.info.png'); } #featured .info h2{ font-size:18px; font-family:Georgia, serif; color:#fff; padding:5px; margin:0; overflow:hidden; } #featured .info p{ margin:0 5px; font-family:Verdana; font-size:11px; line-height:15px; color:#f0f0f0; } #featured .info a{ text-decoration:none; color:#fff; } #featured .info a:hover{ text-decoration:underline; }

Έπειτα ψάχνετε για το </head> και ακριβώς πάνω και πριν από αυτό επικολλάτε το παρακάτω και αποθηκαύετε.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); $("#featured").hover( function() { $("#featured").tabs("rotate",0,true); }, function() { $("#featured").tabs("rotate",5000,true); } ); }); </script>

Τέλος πηγαίνετε στο Στοιχεία Σελίδας και βρίσκετε το στοιχειό Προσθήκη gadget , πατήστε το και επιλέξτε το HTML/JavaScript και εισάγετε τον παρακάτω κώδικα στο κουτί.

<div id="featured"><ul class="ui-tabs-nav"><li id="nav-fragment-1" class="ui-tabs-nav-item ui-tabs-selected"><a href="#fragment-1"><img alt="" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0IGxbibkMF9kZ3UlB-GgxygLNYKwS6Fdz1YPwYhfhRdeaocrxAN-CDEzpbtKNFNq7m7MDnI2Et6A7L9Y8H9htR3TpZuhcYteP3vzC-kUpQz6uEoUP2eHcGCse3M_vICROBlKktz7EXQ/s800/Copy%20of%20thessalotipota.png.png" /><span>Θεσσαλοτίποτα</span></a></li> <li id="nav-fragment-2" class="ui-tabs-nav-item"><a href="#fragment-2"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfktmpaJlQbH5E3OfE4aGCK8oPDqplyjB4g2oIv-X-exnnV5XWlcYSLYAAdYWCdQoC3D6Z-bngGMZ-qhClS3DRs_UPmlVy5gypniVc79-s5UTuav1yxGcLr9jSaC1aZIsebZIHZlwHA/s800/%CE%95%CE%B9%CE%BA%CF%8C%CE%BD%CE%B1130~+-+%CE%91%CE%BD%CF%84%CE%AF%CE%B3%CF%81%CE%B1%CF%86%CE%BF.png" /><span>Κοντά στα Πυργαδίκια</span></a></li> <li id="nav-fragment-3" class="ui-tabs-nav-item"><a href="#fragment-3"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizEgjGHbbuVc84J5-_-quSg3DCIi9twwOlKCh-KGLZfTUT5Ns2GSwFo_dg6Zrl0i3AG7pfzWeFtvn8t5ZrH48VIcbTvYoZoW4XCtIjjDiBl3GjGZyk00qaFjbZ_Qk_XL-PjGpwf-gzeA/s800/Copy%20of%20100_0617.png" /><span>Στον Αγ. Κωνσταντίνο</span></a></li> <li id="nav-fragment-4" class="ui-tabs-nav-item"><a href="#fragment-4"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXve9yGyxEs0y3akE4fv0n5donuXwjh9cloHkWYqnLdkAHh_6hRMv-M3GnuULCDPJrd3dOT0H5q8xlcKI0DdqHYQQ9spjSPhmyCi1E4E0FLvez7gOH9YGyofHb5hFCeAMwnb2JhE2g-w/s800/Copy%20of%20%CE%95%CE%B9%CE%BA%CF%8C%CE%BD%CE%B1%20015.png" /><span>Ολλανδία</span></a></li> </ul><!-- First Content --><br /> <div id="fragment-1" style="" class="ui-tabs-panel"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuN5Wjuj1EtxgjvQzcl8_v1kx7n8d4gzyUhUuVShd0pQV0TZ6Kmd4Y8lGKxPzaql14Q8qSmIrFB3hzXyFcINPmvyM4fCm_egOIeCpmAgpYbgV5gnF8zHCWxdF-VfMttwqiZkCESWkkA/s800/Copy%20(2)%20of%20thessalotipota.png.png" /><br /> <div class="info"><h2><a href="http://www.thessalotipota.blogspot.com/">Θεσσαλοτίποτα</a></h2><p>Θεσσαλοτίποτα!<br /> Ένα blog για εμάς, τη γειτονιά μας, την πόλη μας, τη "Μακεδονία μας" (καλό;), τη χώρα μας, την ήπειρό μας, τον πλανήτη μας, το ηλιακό μας σύστημα, τον γαλαξία μας, το σύμπαν μας, ΚΑΙ ΟΧΙ ΜΟΝΟ !!!<br /> ....<a href="http://www.thessalotipota.blogspot.com/">Διαβάστε περισσότερα</a></p></div></div><!-- Second Content --> <div id="fragment-2" style="" class="ui-tabs-panel ui-tabs-hide"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDLqAPOCS18xtMWqXURK0YMtW9a_HyF4kO6y3iBT32KgTBM8VCkEQtYy8Z0gwPPrTYI9bHrz9fWrVvQbGoAZKZQfpX8rZya-_7mSTAW8JS2CS0FUo4VJP0RJJrRV93vkL8RPVT3jPRsA/s800/Copy%20of%20%CE%95%CE%B9%CE%BA%CF%8C%CE%BD%CE%B1130~+-+%CE%91%CE%BD%CF%84%CE%AF%CE%B3%CF%81%CE%B1%CF%86%CE%BF.png" /><br /> <div class="info"><h2><a href="http://thessalotipota.blogspot.com/2008/08/blog-post.html">Καλές Διακοπές</a></h2><p>Καλά να περνάτε στα μπαράκια σας και εμείς καλύτερα στις άδειες παραλίες!....<a href="http://thessalotipota.blogspot.com/2008/08/blog-post.html">Διαβάστε περισσότερα</a></p></div></div><!-- Third Content --><br /> <div id="fragment-3" style="" class="ui-tabs-panel ui-tabs-hide"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmDfe6EiL_cXSdJZLGaJa5aax0OhUAg6NAJe9gW94T63lJ2yTIilrlqDvQODBixBS1jRZVYCy5-v7gOqVNj2MTfbinrsd_9K2F-Uq1IvV-EWIVs0hleFHbPh_HieCGbPrSeAYOlmGi-Q/s800/100_0625.png" /><br /> <div class="info"><h2><a href="http://thessalotipota.blogspot.com/search/label/%CE%95%CE%BB%CE%BB%CE%AC%CE%B4%CE%B1">Ανάπαυλα!</a></h2><p>είπα να κάνω ένα διάλειμμα από την γκρίνια και να δείξω μερικές φωτογραφίες από τον Αγ. Κωνσταντίνο Φθιώτιδας....<a href="http://thessalotipota.blogspot.com/search/label/%CE%95%CE%BB%CE%BB%CE%AC%CE%B4%CE%B1">Διαβάστε πρισσότερα</a></p></div></div><!-- Fourth Content --><br /> <div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicpI5TkK6ZOigP8SCO-VgOP1ZmGfaBCgHjCpsx95hI8W04QLl3icAVsQflUZERMHS0Nod4_tXDePx7_-PbBjYejvd1QFCK-WI7GnlX8BUUcmInJh_Djnkesrur_CEN_OEkEFoNlxd6Xg/s800/%CE%95%CE%B9%CE%BA%CF%8C%CE%BD%CE%B1%20015.png" /><br /> <div class="info"><h2><a href="http://thessalotipota.blogspot.com/2009/09/blog-post.html">Όταν οι άλλοι επιστρέφουν!</a></h2><p>Επιτέλους έφτασε η στιγμή να κάνω κι εγώ τις διακοπές μου. Και δεν το μετανιώνω καθόλου που γίνονται τώρα που μπήκε ο Σεπτέμβρης. ....<a href="http://thessalotipota.blogspot.com/2009/09/blog-post.html">Διαβάστε πρισσότερα</a></p></div></div></div>

Αλλάζετε τα links και τις εικόνες με τα δικά σας και αποθηκεύετε.

Σημείωση:
Οι μεγάλες εικόνες πρέπει να έχουν ανάληση 400x250, ενώ οι μικρές δεξιά 80x25.