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

Μια δεύτερη εκδοχή της προηγούμενης ανάρτησης 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>

• Γράψτε τον τίτλο και το μήνυμά σας και πατήστε αποθήκευση.

LIVE DEMO