Sliding labels

Συρόμενο 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXr_FhtOWkRc-vNGyKos0iQ4-SbyE90H8gj0E42FnBq2m7WRlC8wMIkaqyhyphenhypheneoenKxvZTCdwnSypEGDp1J4mf2vd5cm4ouQRx3nsAF2oA4NsA5r83giefVr0KuUEBSgXCEMS8sPxbOquy-/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXr_FhtOWkRc-vNGyKos0iQ4-SbyE90H8gj0E42FnBq2m7WRlC8wMIkaqyhyphenhypheneoenKxvZTCdwnSypEGDp1J4mf2vd5cm4ouQRx3nsAF2oA4NsA5r83giefVr0KuUEBSgXCEMS8sPxbOquy-/s324/open%252520arrow.png)');});
else $('.horoscoop .contenu').addClass('open').stop().animate({left:'30px'},800,function(){$('.horoscoop .trigger').css('background','url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibUEy0_PeFlYsgMMzvne9gVBnIiTb6iIv0M_iLCFrdecpuZL7dc5EW5Pi9hMEMaIKYP8N-OBX82vlbb7WwfYocxd1qLsoBPydkO9xfPvLfsMi8bKT-lTZIIh4Y5Iq-W56PmGPYE_NN0Etu/s324/close%252520arrow.png)');});
}) ;
});
</script>



<div class="horoscoop">
<div class="trigger" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXr_FhtOWkRc-vNGyKos0iQ4-SbyE90H8gj0E42FnBq2m7WRlC8wMIkaqyhyphenhypheneoenKxvZTCdwnSypEGDp1J4mf2vd5cm4ouQRx3nsAF2oA4NsA5r83giefVr0KuUEBSgXCEMS8sPxbOquy-/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 είναι ο τίτλος που βάζω στο κάτω μαύρο μέρος του συρόμενου...