Click me! Ανακοίνωση μέσω jQuery & CSS3 widget για τον Blogger

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Μια δεύτερη εκδοχή της προηγούμενης ανάρτησης Click me! Χωρίς πολλά και κουραστικά λόγια ας δούμε τον τρόπο που θα το βάλετε στη Σελίδα σας.
  • Σύνδεση στον Blogger 
  • Σχεδίαση / Επεξεργασία HTML
  • Βρείτε την ]]></b:skin>
  • Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:
#box{
background:#000;
height:115px;
padding:20px;
margin-top:-10px;
padding-top:30px;
width:400px;
border:1px solid #333;
color:#888;
text-shadow:1px 1px 0 black;
font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
}
#box p{
font-size:16px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvU5k8nddx573i7KunlybjDpfbYw51DDtcJO6BZiJE2RvpRbIuSbiculCRcIet869yBG99Aglny2N3xPNPHvOesPP1TASkrgsaEVu0ZZGVLSGpI0LhKLGN6soZUynA2F5TSJwc9KcJ94Zk/s1600/warning.png') no-repeat 10px center;
padding-left:90px;
}
#box p b{
font-size:52px;
display:block;
}
#box,
#main,
a.button{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;}
a.button,a.button:visited,
a.button:active{background:#000700;-moz-box-shadow:0 0 2px #002300;
color:#777;
letter-spacing:-2px;
padding:20px;
display:block;
text-shadow:0px 1px 1px #000;
font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
font-size:40px;
font-weight:bold;
text-align:center;
width:350px;}
  • Βρείτε την </body> και επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://pandet.googlecode.com/files/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://pandet.googlecode.com/files/jquery.bouncebox.1.0.js"></script>
<script type="text/javascript" src="http://pandet.googlecode.com/files/jquery.bouncebox.script.js"></script>
  • Αποθηκεύστε το πρότυπο.
  • Πατήστε τώρα "Στοιχεία Σελίδας"
  • Επιλέξτε "Προσθήκη gadget" - "HTML/JavaScript"
  • Επικολλήστε τον παρακάτω κώδικα:
<div id="main"><a class="button" href="#">Click Me</a>
<div id="box"><p><b>ΤΙΤΛΟΣ</b>ΤΟ ΜΗΝΥΜΑ ΣΑΣ</p></div></div>
  • Γράψτε τον τίτλο και το μήνυμά σας και πατήστε αποθήκευση.

3 comments:

  1. ΝΑ ΚΑΝΩ ΜΙΑ ΕΡΩΤΗΣΗ?
    ΓΙΝΕΤΑΙ ΚΑΠΩΣ ΝΑ ΚΑΝΩ, ΚΑΘΕ ΦΟΡΑ ΠΟΥ ΠΑΤΑΝΕ ΤΗΝ ΚΕΝΤΡΙΚΗ ΕΙΚΟΝΑ ΤΗΣ ΑΝΑΡΤΗΣΕΙΣ ΜΟΥ ΝΑ ΒΓΑΙΝΕΙ ΚΟΥΤΑΚΙ ΟΠΩΣ ΑΥΤΟ ΣΤΟ ΠΡΟΗΓΟΥΜΕΝΟ "click me" ΠΟΥ ΕΙΧΕΣ ΒΑΛΕΙ, ΜΕ ΚΑΠΟΙΟ ΣΧΟΛΙΟ ΠΟΥ ΕΧΩ ΚΑΝΕΙ ΓΙΑ ΤΗΝ ΦΩΤΟ ΑΥΤΗ?
    ΣΕ ΕΥΧΑΡΙΣΤΩ!

    ReplyDelete
    Replies
    1. Είναι απλό. Βάλε τον τρίτο κώδικα, αφού εχεις κάνει όλα τα άλλα προηγουμένως, ακριβώς μετά την εικόνα από την "Επεξεργασία HTML".
      Ακολούθησε τον παρακάτω σύνδεσμο:
      http://demo-btt.blogspot.com/2012/01/lorem-ipsum.html

      Delete
    2. Είσαι ωραίος!!
      Σε ευχαριστώ πολύ!

      Delete

 
back to top