Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




4 Συρόμενο gadget για ετικέτες...

Φίλοι bloggers γεια σας !!!Λόγω επαγγελματικών υποχρεώσεων αραίωσα λίγο τις αναρτήσεις μου, αλλά δεν σταμάτησα να βρίσκω διάφορα και ενδιαφέροντα θέματα για τα blogs μας...βρήκα λοιπόν ένα gadget συρόμενο, που παρουσιάζει 5 ετικέτες από το blog σας, με εικόνα, και μικρό κείμενο, όποιες θέλετε εσείς...έφτιαξα και demo...
DEMO

Ο ΚΩΔΙΚΑΣ:

<style>
/*HOROSCOOP*/ .horoscoop { width:100px; height:400px; position:absolute; left:0px; top:30px; } .horoscoop .contenu { width:332px; height:361px; position:absolute; top:50px; left:-588px; z-index:10; padding-top:28px; padding-bottom:28px; padding-left:17px; padding-right:17px;} .horoscoop .contenu .border-contenu { width:383px; height:517px; position:absolute; background:black; top:0px; left:0px; z-index:5; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;} .horoscoop .contenu .incontenu { width:352px; height:461px; position:relative; background:white; opacity:1; z-index:6;} .horoscoop .trigger { width:60px; height:324px; position:relative; float:left; background:url(https://lh3.googleusercontent.com/-dAywNz170yA/Tqxd4qm8yoI/AAAAAAAACjE/52BO_C9zfFo/s324/open%252520arrow.png) no-repeat center; cursor:pointer; z-index:11;} .horoscoop .contenu .footer { position:absolute; bottom:-23px; margin-left:50%; width:300px; left:-150px; text-align:center; color:white; font-size:15px;} .horoscoop .contenu .content { position:absolute; width:322px; height:180px; padding-left:30px; cursor:pointer;} .horoscoop .contenu .separation { position:absolute; width:332px; height:5px; top:180px; font-size:12px; } .horoscoop .contenu #horoscoop_0 {top:8px;} .horoscoop .contenu #horoscoop_1{ top:100px;} .horoscoop .contenu #horoscoop_2{top:192px;} .horoscoop .contenu #horoscoop_3{ top:284px;} .horoscoop .contenu #horoscoop_4 { top:376px;} .horoscoop .contenu .content .title { position:relative; display:block; width:100%; text-align:left; font-size:14px; top:5px; margin-left:10px; font-weight:bold; margin-bottom:5px;} .horoscoop .contenu .content .logo { position:relative; float:left; width:109px; height:112px; margin-top:4px;} .horoscoop .contenu .content .catcher { position:relative; margin-left:10px; width:238px; float:left; font-size:13px; line-height:17px} .horoscoop .contenu .content .plus { clear: left; float: left; font-size: 12px; font-weight: bold; position: relative; right: 10px; text-align: right; width: 100%;} .opacity_8 { opacity:0.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); }
</style>

<script type="text/javascript" src="http://www.horoscope.fr/js/jquery-1.4.4.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.horoscoop .trigger').click(function(e){
if($('.horoscoop .contenu').hasClass('open')) $('.horoscoop .contenu').removeClass('open').stop().animate({left:'-588px'},800,function(){$('.horoscoop .trigger').css('background','url(https://lh3.googleusercontent.com/-dAywNz170yA/Tqxd4qm8yoI/AAAAAAAACjE/52BO_C9zfFo/s324/open%252520arrow.png)');});
else $('.horoscoop .contenu').addClass('open').stop().animate({left:'30px'},800,function(){$('.horoscoop .trigger').css('background','url(https://lh3.googleusercontent.com/-Ec9wTBFl8IE/Tqxd4jpQYAI/AAAAAAAACjI/GKqESTxdmFk/s324/close%252520arrow.png)');});
}) ;
});
</script>



<div class="horoscoop">
<div class="trigger" style="background-image: url(https://lh3.googleusercontent.com/-dAywNz170yA/Tqxd4qm8yoI/AAAAAAAACjE/52BO_C9zfFo/s324/open%252520arrow.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: initial initial; background-repeat: initial initial; "></div>
<div class="contenu round_10" style="left: -588px; ">
<div class="border-contenu opacity_8"></div>
<div class="incontenu round_10">
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 1" target="_parent">
<div class="content" id="horoscoop_0">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image1" class="logo">
</div>
<div style="float:left;  margin-top:4px;">
<span class="title">title 1</span>
<span class="catcher">demo1</span>
</div>
</div>
</a>
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 2" target="_parent">
<div class="content" id="horoscoop_1">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image 2" class="logo">
</div>
<div style="float:left;  margin-top:4px;">
<span class="title">title 2</span>
<span class="catcher">demo 2</span>
</div>
</div>
</a>
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 3" target="_parent">
<div class="content" id="horoscoop_2">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image 3" class="logo">
</div>
<div style="float:left;  margin-top:4px;">
<span class="title">title3</span>
<span class="catcher">demo3</span>
</div>
</div>
</a>
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 4" target="_parent">
<div class="content" id="horoscoop_3">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image 4" class="logo">
</div>
<div style="float:left;  margin-top:4px;">
<span class="title">title4</span>
<span class="catcher">demo4</span>
</div>
</div>
</a>
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 5" target="_parent">
<div class="content" id="horoscoop_4">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image5" class="logo">
</div>
<div style="float:left;  margin-top:4px;">
<span class="title">title5</span>
<span class="catcher">demo5</span>
</div>
</div>
</a>
<span class="footer">down title</span>
</div>
</div>
</div>

*** το  -588 είναι το πόσο αριστερά πηγαίνει το πλαίσιο (αν χρησιμοποιείτε ευρεία οθόνη)
***αλλάξτε τα χρωματιστά σημεία με τα αντίστοιχα δικά σας (εικόνα, λινκ, τίτλος, κείμενο)
*** το down title είναι ο τίτλος που βάζω στο κάτω μαύρο μέρος του συρόμενου...
***ότι απορίες έχετε γράψτε τις στα σχόλια, να σας τις εξηγήσω...(η σε email)
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!! (Πηγή δεν έχω, αλλά μπορείτε να θεωρήσετε πηγή τη διεύθυνση στο μέσα στο .js )
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF

4 σχόλια:

Γιάννης Βασιλειου είπε...

Παντελή έχω 2 απορίες 1. που βάζουμε τον κωδικό 2.Τι πρέπει να βγάλουμε

pandelees karagiann είπε...

Γιάννη, κανονικά όπως όλοι οι κώδικες css και τα .js πρέπει να μπούν πάνω από το </head>
...επειδή όμως υπάρχει και εναλλακτικός τρόπος, μπορεί όλος ο κώδικας να μπεί σαν "προσθήκη gadget" => HTML/JavaScript !!!....
Πρέπει όμως να αντικαταστήσεις τα χρωματιστά μέρη με τα δικά σου(εικόνα-λινκ-κείμενο)...

Γιάννης Βασιλειου είπε...

παντελη το εκανα εστω 4 προσπαθειες αλα πεφτει στα αλα widget και μερικες φορες οταν παταει καπιος στο facbook ή το twiter μου δεν το βγαζει αλα τον βαζει.help now !

pandelees karagiann είπε...

Γιαννη, αν δεν σου "καθεται" στο μπλογκ σου, δεν χρειάζεται να το βαλεις !!!δεν χρειαζεται να βαζεις οτι widget βλεπεις...ειναι μερικα απο αυτά, που ειναι άχρηστα, η ανουσια...βαζουμε μονον ότι χρειαζόμαστε και μας ¨κάθεται"...οπότε μην κουράζεσαι άδικα...