Ads 468x60px

Τρίτη, 20 Σεπτεμβρίου 2016

Expand Panel Content Box Widget

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο και
χρήσιμο Expand Panel Content Box Widget!Το περιεχόμενο του panel box είναι
κρυφό γλυτώνοντας χώρο στην σελίδα μας και φανερώνεται με το click!Μπορείτε
να βάλετε κείμενο, φωτογραφίες, διευθύνσεις κτλ!







 Η εγκατάσταση είναι απλή και

για να το εγκαταστήσετε και εσείς:
 
Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

και στο παράθυρο που θα ανοίξει επικολλήστε


 τον ακόλουθο κώδικα--
..............................................................................................................................................................

<style type="text/css">
#avdhoottovik {display:block}

#panel {
background-color:#96BC43;
border:2px solid #a7cc54;
border-width:2px 2px 0 2px;
height:250px;
overflow:auto;
margin:0;
padding:10px;
color:#111;
font:normal 12px Times,Serif;
-webkit-box-shadow:inset 0 0 7px #222;
-moz-box-shadow:inset 0 0 7px #222;
box-shadow:inset 0 0 7px #222;
display:none;
}

.avdhootpanel {
position:relative;
cursor:pointer;
text-shadow:1px 1px 2px #000;
padding:7px 15px;
background-color:#333;
border-top:3px solid #a7cc54;
color:#e5e5e5;
text-align:center;
font:bold 14px Times,Sans-Serif;
font-style:italic;
-webkit-box-shadow:0 -1px 2px #222;
-moz-box-shadow:0 -1px 2px #222;
box-shadow:0 -1px 2px #222;
-webkit-border-radius:0 0 14px 14px;
-moz-border-radius:0 0 14px 14px;
border-radius:0 0 14px 14px;
}

.avdhootpanel:hover {color:#ccc}

.avdhootpanel:after {
content:'';
position:absolute;
top:100%;
margin-top:-10px;
left:5%;
width:0;
height:0;
display:block;
border-width:20px;
border-style:solid;
border-color:#333 #333 transparent #333;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.avdhootpanel').click(function() {
$('#panel').slideToggle('slow');
$('.avdhootpanel span.in').toggle();
});
});
</script>
<div id="avdhoottovik">
<div id="panel">

ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΘΕΜΑ ΣΑΣ


</div>
<div class="avdhootpanel">
<span class="in">ΤΙΤΛΟΣ ΚΟΥΜΠΙΟΥ</span>
<span class="in" style="display:none;">Expanded Panel</span>
</div>
</div>  
..............................................................................................................................................................
ΑΛΛΑΓΕΣ

ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΘΕΜΑ ΣΑΣ----- Εδώ βάζετε το κείμενο σας, διευθύνσεις urls η

ότι άλλο θέλετε!

ΤΙΤΛΟΣ ΚΟΥΜΠΙΟΥ ---Εδώ μπαίνει ο τίτλος του κουμπιού!

Expanded Panel----Εδώ μπαίνει ο τίτλος του κουμπιού που κλείνει το widget!

Αποθήκευση!

Καλή επιτυχία!!!

Πηγή κώδικα 
thanks to avdhootblogger.com



 Edit by

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog