Ads 468x60px

Τετάρτη, 8 Ιουνίου 2016

Notice Board widget

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε πως μπορούμε να
ενσωματώσουμε στην σελίδα μας ένα widget με το οποίο θέλουμε
να προβάλουμε - διαφημίσουμε κάτι που θέλουμε να προσέξουν οι αναγνώστες 
- επισκέπτες του blog μας, σε στυλ πίνακα (Notice board)!
Διαθέτει περιστρεφόμενο εφέ στο mouseover του κέρσορα μας και είναι ιδανικό
για να κάνει τους αναγνώστες μας να προσέξουν κάτι συγκεκριμένο που
θέλουμε!  



DEMO βλέπετε στην δεξιά sidebar του Tech Time εδώ, που έχω ενσωματώσει
την σελίδα μου στο Linkedin!


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

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

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

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

..............................................................................................................................................................

 <div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.Bloggerspice{animation:WAKloading 4s;-webkit-animation:WAKloading 4s;-o-animation:WAKloading 4s-moz-animation:WAKloading 4s;-ms-animation:WAKloading 4s;animation:WAKloading 4s;float:left;margin-left:5px;margin-top:5px;width:272px;height:179px;border: 10px solid #111111; border-radius:10px; padding:10px;-webkit-transition:all 4s ease-in-out;-moz-transition:all 4s ease-in-out;-o-transition:all 4s ease-in-out;transition:all 4s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;background:#660099 url(ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑ ΣΑΣ)no-repeat center;background-size:250px;}
.Bloggerspice:hover{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);
border-radius: 10px;
border: 10px solid #111111;
}/*widget by  www.bloggerspice.com  */
</style>
<div>
<a class="Bloggerspice" href="ΕΔΩ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ"></a>
</div>
</div>

.....................................................................................................................................................................
ΑΛΛΑΓΕΣ

Βάζετε την διεύθυνση της εικόνα σας, και το url της διεύθυνσης που θέλετε στα 

αντίστοιχα σημεία του κώδικα και πατάτε Αποθήκευση!!

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


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



 Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog