TABS WIDGET-0

ΠΩΣ ΕΜΦΑΝΙΖΩ 3 ΑΝΑΡΤΗΣΕΙΣ ΜΕΣΑ ΣΕ ΜΙΑ ΜΕ ΚΟΥΜΠΙΑ ΕΝΑΛΛΑΓΗΣ

Ανοίξτε μία σελίδα στο blogger και πατήστε html. Αντιγράψτε τον κώδικα που θα βρείτε ΕΔΩ αλλάζοντας το περιεχόμενο της ΑΝΑΡΤΗΣΗΣ που βρίσκεται μεταξύ των γραμμών <div class="content_1"> και </div> το περιεχόμενο του κώδικα PHOTO GALLERY που βρίσκετε μεταξύ των γραμμών <div class="content_2" style="display: none;"> και </div> και τέλος το περιεχόμενου του κώδικα VIDEO GALLERY που βρίσκεται μεταξύ των γραμμων <div class="content_3" style="display: none;"> και </div> Την 1^η γραμμή του κώδικα (το script) βάλτε το πρίν από την ετικέτα </head> μέσα στο πρότυπό σας. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<style>

.post-pagination {margin:20px auto;text-align:left;width: 100%;}

.button_1, .button_2, .button_3 {font-weight:500;padding:8px 8px;background:#A11111;color:#FFF;border-radius: 5px;}

.button_1:hover, .button_2:hover, .button_3:hover {background:#A11111;color:#FFFFFF;text-decoration:none;}

</style>

<script>

jQuery(document).ready(function(){

jQuery('.button_1').click(function(){

jQuery('.content_1').fadeIn('slow');

jQuery('.content_2').fadeOut('fast');

jQuery('.content_3').fadeOut('fast');

jQuery(this).css('background','#255720');

jQuery(this).css('color','#FFFFFF');

jQuery('.button_2').css('background','#A11111');

jQuery('.button_2').css('color','#FFFFFF');

jQuery('.button_3').css('background','#A11111');

jQuery('.button_3').css('color','#FFFFFF');

return false;});

jQuery('.button_2').click(function(){

jQuery('.content_1').fadeOut('fast');

jQuery('.content_2').fadeIn('slow');

jQuery('.content_3').fadeOut('fast');

jQuery(this).css('background','#255720');

jQuery(this).css('color','#FFFFFF');

jQuery('.button_1').css('background','#A11111');

jQuery('.button_1').css('color','#FFFFFF');

jQuery('.button_3').css('background','#A11111');

jQuery('.button_3').css('color','#FFFFFF');

return false;});

jQuery('.button_3').click(function(){

jQuery('.content_1').fadeOut('fast');

jQuery('.content_2').fadeOut('fast');

jQuery('.content_3').fadeIn('slow');

jQuery(this).css('background','#255720');

jQuery(this).css('color','#FFFFFF');

jQuery('.button_1').css('background','#A11111');

jQuery('.button_1').css('color','#FFFFFF');

jQuery('.button_2').css('background','#A11111');

jQuery('.button_2').css('color','#FFFFFF');

return false;});});

</script>

<div class="content_1">

ΠΩΣ ΕΜΦΑΝΙΖΩ 3 ΑΝΑΡΤΗΣΕΙΣ ΜΕΣΑ ΣΕ ΜΙΑ ΜΕ ΚΟΥΜΙΑ ΕΝΑΛΛΑΓΗΣ

Ανοίξτε μία σελίδα στο blogger και πατήστε html. Αντιγράψτε τον παρακάτω κώδικα αλλάζοντας το περιεχόμενο της ΑΝΑΡΤΗΣΗΣ που βρίσκεται μεταξύ των γραμμών <div class="content_1"> και </div> το περιεχόμενο του κώδικα PHOTO GALLERY που βρίσκετε μεταξύ των γραμμών <div class="content_2" style="display: none;"> και </div> και τέλος το περιεχόμενου του κώδικα VIDEO GALLERY που βρίσκεται μεταξύ των γραμμων <div class="content_3" style="display: none;"> και </div>

</div>

<div class="content_2" style="display: none;">

PHOTO GALLERY

<table>

<tbody><tr>

<td align="center" width="20%"><a href="https://lh3.googleusercontent.com/-_xe0RxHk5n4/UpPPyzkgk4I/AAAAAAAAKl0/1lUWChytIN8/s1600/ALONISOS-01.jpg" target="_blank"> <img src="https://lh3.googleusercontent.com/-_xe0RxHk5n4/UpPPyzkgk4I/AAAAAAAAKl0/1lUWChytIN8/s1600/ALONISOS-01.jpg" width="180" height="113" /><br />ALONISOS-01</a></td>

<td align="center" width="20%"><a href="https://lh6.googleusercontent.com/-Wlx9Ii3rPao/Uned84Hf3rI/AAAAAAAAKDc/xb9Rif7AYI4/s1600/SKOPELOS-33.jpg" target="_blank"> <img src="https://lh6.googleusercontent.com/-Wlx9Ii3rPao/Uned84Hf3rI/AAAAAAAAKDc/xb9Rif7AYI4/s1600/SKOPELOS-33.jpg" width="180" height="113" /><br />SKOPELOS-33</a></td>

<td align="center" width="20%"><a href="https://lh5.googleusercontent.com/-JOIQugPPxUU/UnedtKA9PDI/AAAAAAAAKC4/D_akLkG26aI/s1600/SKIATHOS-22.jpg" target="_blank"> <img src="https://lh5.googleusercontent.com/-JOIQugPPxUU/UnedtKA9PDI/AAAAAAAAKC4/D_akLkG26aI/s1600/SKIATHOS-22.jpg" width="180" height="113" /><br />SKIATHOS-22</a></td>

<td align="center" width="20%"><a href="https://lh5.googleusercontent.com/--XVgaOXi3jE/UhTJsPzQPAI/AAAAAAAAI1U/g0V_CnJpb0E/s1600/KERKYRA-16.jpg" target="_blank"> <img src="https://lh5.googleusercontent.com/--XVgaOXi3jE/UhTJsPzQPAI/AAAAAAAAI1U/g0V_CnJpb0E/s1600/KERKYRA-16.jpg" width="180" height="113" /><br />KERKYRA-16</a></td>

<td align="center" width="20%"><a href="https://lh4.googleusercontent.com/--Kjz6zwnIxQ/U6c8SEuQ-gI/AAAAAAAAMRk/6ci1kGL5830/s1600/PAXOI-08.jpg" target="_blank"> <img src="https://lh4.googleusercontent.com/--Kjz6zwnIxQ/U6c8SEuQ-gI/AAAAAAAAMRk/6ci1kGL5830/s1600/PAXOI-08.jpg" width="180" height="113" /><br />PAXOI-08</a></td>

</tr></tbody></table>

<table>

<tbody><tr>

<td align="center" width="20%"><a href="https://lh6.googleusercontent.com/-0zTugx3wnh0/UnedE8u_JTI/AAAAAAAAKBM/7Aup6htybWQ/s1600/SIVOTA-13.JPG" target="_blank"> <img src="https://lh6.googleusercontent.com/-0zTugx3wnh0/UnedE8u_JTI/AAAAAAAAKBM/7Aup6htybWQ/s1600/SIVOTA-13.JPG" width="180" height="113" /><br />SIVOTA-13</a></td>

<td align="center" width="20%"><a href="https://lh6.googleusercontent.com/-4DreoX17fbw/UneTAiiwZBI/AAAAAAAAJtQ/VREUu-0W4hQ/s1600/ITHAKI-13.jpg" target="_blank"> <img src="https://lh6.googleusercontent.com/-4DreoX17fbw/UneTAiiwZBI/AAAAAAAAJtQ/VREUu-0W4hQ/s1600/ITHAKI-13.jpg" width="180" height="113" /><br />ITHAKI-13</a></td>

<td align="center" width="20%"><a href="https://lh5.googleusercontent.com/-BC9s_EL7p80/UneVH_JOymI/AAAAAAAAJyw/tmcVvrOg-24/s1600/LEYKADA-40.jpg" target="_blank"> <img src="https://lh5.googleusercontent.com/-BC9s_EL7p80/UneVH_JOymI/AAAAAAAAJyw/tmcVvrOg-24/s1600/LEYKADA-40.jpg" width="180" height="113" /><br />LEYKADA-40</a></td>

<td align="center" width="20%"><a href="https://lh3.googleusercontent.com/-KRfX50iFcfI/UneUDjgVNPI/AAAAAAAAJvI/Ja1o-Fbg_r0/s1600/KEFALONIA-41.jpg" target="_blank"> <img src="https://lh3.googleusercontent.com/-KRfX50iFcfI/UneUDjgVNPI/AAAAAAAAJvI/Ja1o-Fbg_r0/s1600/KEFALONIA-41.jpg" width="180" height="113" /><br />KEFALONIA-41</a></td>

<td align="center" width="20%"><a href="https://lh3.googleusercontent.com/-U1SYDXEuglg/UhTDYo1ooyI/AAAAAAAAIuQ/BFAInM46G2M/s1600/ZAKYNTHOS-13.jpg" target="_blank"> <img src="https://lh3.googleusercontent.com/-U1SYDXEuglg/UhTDYo1ooyI/AAAAAAAAIuQ/BFAInM46G2M/s1600/ZAKYNTHOS-13.jpg" width="180" height="113" /><br />ZAKYNTHOS-13</a></td>

</tr></tbody></table>

</div>

<div class="content_3" style="display: none;">

VIDEO GALLERY

<table>

<tbody><tr>

<td align="center" width="25%"><a href="https://www.youtube.com/watch?v=1stIQK3DS6o" target="_blank">

<iframe width="240" height="180" src="https://www.youtube.com/embed/1stIQK3DS6o" frameborder="0" allowfullscreen></iframe><br />ΠΩΣ ΦΤΙΑΧΝΩ BLOG</a></td>

<td align="center" width="25%"><a href="https://www.youtube.com/watch?v=7EgYR6rXCe8" target="_blank">

<iframe width="240" height="180" src="https://www.youtube.com/embed/7EgYR6rXCe8" frameborder="0" allowfullscreen></iframe><br />ΡΥΘΜΙΣΕΙΣ ΠΡΟΤΥΠΟΥ, ΦΟΝΤΟΥ, ΔΙΑΤΑΞΗΣ, ΠΛΑΤΟΥΣ, ΧΡΩΜΑΤΩΝ</a></td>

<td align="center" width="25%"><a href="https://www.youtube.com/watch?v=Pd5dNEnqNWM" target="_blank">

<iframe width="240" height="180" src="https://www.youtube.com/embed/Pd5dNEnqNWM" frameborder="0" allowfullscreen></iframe><br />ΕΝΣΩΜΑΤΩΣΗ ECXEL</a></td>

<td align="center" width="25%"><a href="https://www.youtube.com/watch?v=CbhDxlXmgTs" target="_blank">

<iframe width="240" height="180" src="https://www.youtube.com/embed/CbhDxlXmgTs" frameborder="0" allowfullscreen></iframe><br />ΠΩΣ ΒΑΖΩ READ MORE</a></td>

</tr></tbody></table>

<table>

<tbody><tr>

<td align="center" width="25%"><a href="https://www.youtube.com/watch?v=bgTC_Ho9d1M" target="_blank">

<iframe width="240" height="180" src="https://www.youtube.com/embed/bgTC_Ho9d1M" frameborder="0" allowfullscreen></iframe><br />ΚΥΛΙΟΜΕΝΑ LINKS ΜΕ ΕΙΚΟΝΕΣ</a></td>

<td align="center" width="25%"><a href="https://www.youtube.com/watch?v=h_Hf_d-srvQ" target="_blank">

<iframe width="240" height="180" src="https://www.youtube.com/embed/h_Hf_d-srvQ" frameborder="0" allowfullscreen></iframe><br />ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ</a></td>

<td align="center" width="25%"><a href="https://www.youtube.com/watch?v=3rY-Tdq4hGY" target="_blank">

<iframe width="240" height="180" src="https://www.youtube.com/embed/3rY-Tdq4hGY" frameborder="0" allowfullscreen></iframe><br />ΠΩΣ ΒΑΖΩ SLIDESHOW</a></td>

<td align="center" width="25%"><a href="https://www.youtube.com/watch?v=TXWtxAhndDY" target="_blank">

<iframe width="240" height="180" src="https://www.youtube.com/embed/TXWtxAhndDY" frameborder="0" allowfullscreen></iframe><br />ΠΩΣ ΒΑΖΩ ΚΥΛΙΟΜΕΝΑ LINKS</a></td>

</tr></tbody></table>

</div>

<div class="post-pagination">

<a class="button_1" href="#">ΑΝΑΡΤΗΣΗ</a>

<a class="button_2" href="#">PHOTO GALLERY</a>

<a class="button_3" href="#">VIDEO GALLERY</a>

</div>