Προσθήκη όμορφου Drop-down Gadget.

Σήμερα θα μάθουμε πώς να προσθέσετε ένα drop down μενού για blogger με ένα πολύ εύκολο τρόπο,

Το μενού αυτό είναι συμβατό με τα περισσότερα σύγχρονα και κλασικά προγράμματα περιήγησης, και μπορεί να προστεθεί για κάθε πρότυπο σε λίγα βήματα.


1) Πρώτα από όλα, συνδεθείτε στο λογαριασμό σας Blogger.

2) Κάντε κλικ στο Σχεδίαση. και επιλέξτε Επεξεργασία HTML.

Προσοχή:

3) Πριν ξεκινήσουμε:

- Πρέπει να είστε προσεκτικοί κατά την αλλαγή του προτύπου σας.

- Πριν κάνετε οποιαδήποτε αλλαγή, αποθηκεύστε το προτυπο σας σε ασφαλή μέρος (Στον υπολογιστη σας).

4) Τώρα, ψάξτε για αυτήν την γραμμή. (Ctrl+F)

]]></b:skin>

5) Μέτα αντιγράψτε τον επόμενο κωδικά και επικολλήστε πριν από το ]]></b:skin>: 

#jsddm {

margin: 0;

padding: 15px;

z-index:1000000000;

position:relative;

}

#jsddm li {

float: left;

list-style: none;

font: 12px Tahoma, Arial;

}

#jsddm li a {

display: block;

white-space: nowrap;

margin:1px 3px;

border: 1px solid #AAAAAA;

background: #cccccc;

background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));

background: -moz-linear-gradient(top, #ebebeb, #cccccc);

padding: 5px 10px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

text-shadow: #ffffff 0 1px 0;

color: #363636;

font-size: 15px;

font-family: Helvetica, Arial, Sans-Serif;

text-decoration: none;

vertical-align: middle;

}

#jsddm li a:hover {

background: #C8C8C8;

}

#jsddm li ul {

margin: 0;

padding: 0;

position: absolute;

visibility: hidden;

border-top: 1px solid white;

}

#jsddm li ul li {

float: none;

display: inline;

}

#jsddm li ul li a {

width: auto;

background: #CAE8FA;

}

#jsddm li ul li a:hover {

background: #A3CEE5;

}

- Αποθήκευση προτύπου.

6) Τώρα, ψάξτε για αυτήν την γραμμή: 

</head>

7) Αντιγράψτε τον παρακάτω κωδικά και επικολλήστε των ακριβώς πριν από το </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>

  <script type='text/javascript'>

  //<![CDATA[

var timeout    = 500;

  var closetimer = 0;

  var ddmenuitem = 0;

function jsddm_open()

  {  jsddm_canceltimer();

  jsddm_close();

  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()

  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()

  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()

  {  if(closetimer)

  {  window.clearTimeout(closetimer);

  closetimer = null;}}

$(document).ready(function()

  {  $('#jsddm > li').bind('mouseover', jsddm_open)

  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

  //]]>

  </script>

- Αποθήκευση προτύπου.

8) Τέλος πηγαίνετε στην σχεδίαση - στοιχειά σελίδας.

9) Και πατήστε προσθήκη Gadget - HTML/JavaScript

10) Και αντιγράψτε και επικολλήστε τον παρακάτω κωδικά:

<ul id="jsddm">

  <li><a href="#">Home</a>

  <li><a href="#">Menu 1</a>

  <ul>

  <li><a href="#">Drop 1-1</a></li>

  <li><a href="#">Drop 1-2</a></li>

  <li><a href="#">Drop 1-3</a></li>

  </ul>

  </li>

 <li><a href="#">Menu 2</a>

  <ul>

  <li><a href="#">Drop 2-1</a></li>

  <li><a href="#">Drop 2-2</a></li>

  </ul>

  </li>

 <li><a href="#">Menu 3</a>

  <ul>

  <li><a href="#">Drop 3-1</a></li>

  <li><a href="#">Drop 3-2</a></li>

  <li><a href="#">Drop 3-3</a></li>

  <li><a href="#">Drop 3-4</a></li>

  </ul>

  </li>

 <li><a href="#">Menu 4</a></li>

  <li><a href="#">Menu 5</a></li>

  <li><a href="#">BlogyTricks</a></li>

  </li></ul>

- Αποθήκευση.

Σημίωση:

Το μονό που αλλάζετε είναι το τα πράσινα γράμματα με τους τίτλους που θέλετε,

και τα μπλε γράμματα με τα ανάλογα link τους.

Για ότι πρόβλημα υπάρξει μην διστάσετε να επικοινωνήστε μαζί μας μεσώ του

κουμπιού "Επικοινωνία" που θα βρείτε πάνω πάνω.

Copyrights: BlogyTricks© 

Πηγη κωδικα: Allblogtools

.