DEMO9: Gadgets

Εμφάνιση αναρτήσεων με ετικέτα Gadgets. Εμφάνιση όλων των αναρτήσεων

Δευτέρα 2 Σεπτεμβρίου 2013

Socials icons update1

Φίλες και φίλοι γειά σας σε αυτήν την ανάρτηση θα συνεχίσουμε με την παρουσίαση από μεμονωμμένα (free) social icons τα οποία μπορούμε να τα τοποθετούμε σε διάφορα σημεία των
blog μας!Θα δούμε σε photos πρώτα πως είναι το κάθε εικονίδιο και μετα τους κώδικες τους!!

YOYTUBE

RSS

EMAIL ME

FACEBOOK

TWITTER

Ο κώδικας έιναι έτσι ώστε να ανοίγουν οι σύνδεσμοι σε νέο παράθυρο και η λέξη
κείμενο φαίνεται όταν περάσει ο κέρσορας από πάνω από τα εικονίδια!!

Η εγκατάσταση είναι πάρα πολύ απλή!

Πηγαίνετε blogger-->

Διάταξη --> Προσθήκη gadget-->

HTML/JavaScript

και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα-->

YOYTUBE
..............................................................................................................

<a href="ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΛΙΝΚ ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgzWEn3bEj0GCOqzzXi-HA9BtW58I9HaRTatS5pdQJtsHx4t-z4lKdIDHI4E48x43p89yz9n5aOMtvnrCgdPvi3LP_PqS49wndx5BVBy6D7d8Mnl2tr9AqOX9vG6SEOfAEbhozFt8w5VA/s256/youtube-shop-icon.png" title="ΕΔΩ ΒΑΖΕΤΕ ΤΟΝ ΤΙΤΛΟ ΠΟΥ ΘΕΛΕΤΕ ΝΑ ΦΑΙΝΕΤΑΙ" width="220" height="154" border="0" /></a>
....................................................................................................................
RSS
.......................................................
<a href="ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΛΙΝΚ ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwjjJ8hTwWALIzAlYnsRUgGnuYGnaQw5MWN2ZHZQZwGysCq1mLlHa8_aT_qsetOzyK2FK3cAaMJYn-mbrsni8j9q9sjXgEKATwvLFSCHlYKDlTdBZzFQifNWIRYxCf8XZI7ex0c1dBysk/s256/rss-shop-icon.png" title="ΕΔΩ ΒΑΖΕΤΕ ΤΟΝ ΤΙΤΛΟ ΠΟΥ ΘΕΛΕΤΕ ΝΑ ΦΑΙΝΕΤΑΙ" width="220" height="154" border="0" /></a>
......................................................................................................................
EMAIL ME
.......................................................................................................................
<center><a href="mailto:ΕΔΩ ΤΟ EMAIL ΣΑΣ">
<img width="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsybNyLKoUdTd2twHiLlRf0e8H1lpCE-mOD9nHpH8NXPITy3q3QSt47GZAlQGlB6wE-SdTuo4DDuLQmwBEVXFMnDrGkFO9E9UtWOhX2UqWRXymfqmDIUtWfZkLix17p_Z2pMBW1ZOPJFc/s512/contact.jpg" height="100" title="Ο ΤΙΤΛΟΣ ΣΑΣ" /></a></center>
............................................................................................................................................
FACEBOOK
..............................................................................................................

<a href="ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΛΙΝΚ ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu-vHlF4J5iWdbKUGY0KFogSS35QUNFtB8e1yhSodMiiOqPwRb5Bn4qZz-RQui1WcW2N8ElySq1BNz2ussblsTx1_oj-xxXvTAClz4txLfLmaNRk7GXy9yfV31rpZWqsBi5QiAZh17UV0/s512/facebook.jpg" title="ΕΔΩ ΒΑΖΕΤΕ ΤΟΝ ΤΙΤΛΟ ΠΟΥ ΘΕΛΕΤΕ ΝΑ ΦΑΙΝΕΤΑΙ" width="220" height="154" border="0" /></a>
....................................................................................................................
TWITTER
.......................................................
<a href="ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΛΙΝΚ ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFswxdFUmSE_qbG-B_xu7Nxp1CnnFjMby84DxDVFGWEeMeCrbiLHr7NIFhn1Jjwzlx4h3mqH18HxuuYRBa458SkAH0FqAbfn44wzuKeIn10qaWZ55aD5Fn3tYRLBEkwwbT-xEVpzC3E4c/s512/twitter.jpg" title="ΕΔΩ ΒΑΖΕΤΕ ΤΟΝ ΤΙΤΛΟ ΠΟΥ ΘΕΛΕΤΕ ΝΑ ΦΑΙΝΕΤΑΙ" width="220" height="154" border="0" /></a>
......................................................................................................................
ΑΛΛΑΓΕΣ
ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΛΙΝΚ ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ--Εδώ βάλτε την διεύθυνση που έχετε
στα αντίστοιχα κοινωνικά δίκτυα.

ΕΔΩ ΒΑΖΕΤΕ ΤΟΝ ΤΙΤΛΟ ΠΟΥ ΘΕΛΕΤΕ ΝΑ ΦΑΙΝΕΤΑΙ-Εδώ τον τίτλο που θέλετε!

Μόλις τελιώσετε πατήστε Αποθήκευση!!

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

Edit by vaiol!!!!!

JavaScript Image Slider

Φίλες και φίλοι γειά σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ λειτουργικό slider
για τα blog μας!Είναι πολύ εύκολο στην εγκατάσταση του αλλά και στις ρυθμίσεις που
πρέπει να γίνουν για την λειτουργία του όπως εμείς την θέλουμε!!Μπορείτε να παρουσιάσετε
δημοφιλείς αναρτήσεις σας,φωτογραφίες,διευθύνσεις που θέλετε να επισκεφτούν οι αναγνώστες
σας κτλ κτλ!!

Για να το εγκαταστήσετε

Πηγαίνετε blogger--> Διάταξη -->

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

και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα-->
........................................................................................................................................

<style type="text/css"> /* JavaScript Image Slider By SafeTricks.Net/ */ #mcis { display: none; } #sliderFrame { position: relative; width: 500px;margin: 0 auto; border:5px solid #000; } #ribbon { width: 111px;height: 111px;position: absolute; top: -4px; left: -4px; background: url(https://lh4.googleusercontent.com/-PaZmF2DqE1I/UeukDrceUkI/AAAAAAAADGA/
PeEmTauoA9I/s109/slider-ribbon.png) no-repeat;
z-index: 7;} #slider { width: 500px; height: 218px;background: #fff url(https://lh6.googleusercontent.com/-dUlRL_1uvb8/UeukrC4KLdI/AAAAAAAADGI
/BPMUH-Ky3PM/s50/load.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999; } #slider img { position: absolute; border: none; display: none; } #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; } div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; left: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; } div.mc-caption-bg { background-color: black; } div.mc-caption { font: bold 14px/20px Arial; color: #EEE; z-index: 4; padding: 10px 0; text-align: center; } div.mc-caption a { color: #FB0; } div.mc-caption a:hover{ color: #DA0; } div.navBulletsWrapper { top: 250px; left: 190px;width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer; } div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(https://lh4.googleusercontent.com/-5lXfFwjn3Zc/Ueuk9-
d55YI/AAAAAAAADGQ/f-BPiMxCK9M/s22/slider-bullet.png) no-repeat 0 0; float: left; overflow: hidden; vertical-align: middle; cursor: pointer; margin-right: 11px; _position: relative; } div.navBulletsWrapper div.active { background-position: 0 -11px; } #slider { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform:
translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } </style> <script src="https://googledrive.com/host/0B_1mqJd2tC8qLXpKRHhzd2RXTlU" type="text/javascript"></script> <div id="sliderFrame"> <div id="ribbon"></div> <div id="slider">
<a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ"
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ"
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ"
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ"
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ"
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a> </div></div><br/><br/><br/>
.................................................................................................
ΑΛΛΑΓΕΣ

width: 500px; Εάν αυξήσουμε το 500 μεγαλώνει το πλάτος του slider,αν το μειώσουμε μικραίνει height: 218px; και εάν αυξήσουμε το 218 αυξάνεται το ύψος του slider και το αντίστροφο αν
μειώσουμε το 218!ΠΡΟΣΟΧΗ οι φωτογραφίες μας πρέπει να είναι στο ίδιο μέγεθος όπως το slider!

ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ Εδώ μπαίνει το λινκ της διεύθυνση μας!

ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ Εδώ μπαίνει η διεύθυνση της φώτο που θα φαίνεται!

ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ Εδώ γράφουμε τι θέλουμε να φαίνεται!

Τα δύσκολά τελίωσαν!!

Εάν θέλετε να προσθέσετε και άλλες αναρτήσεις τότε πριν το </div> στο τελος του κώδικα
προσθέστε επιπλέον

<a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ"><img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ"
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a>

Εάν αυξήσετε το μέγεθος του slider τότε πρέπει και να πειράξετε και το

top: 250px; left: 190px; είναι η θέση των σφαιρών(Bullets)που πρέπει να είναι στο κέντρο
οπότε θα πειράξετε το 250 και το 190 για να τις κεντράρετε!

Όποιος δεν θέλει το whats hot όπως θα δείτε στο DEMO αφαιρέστε από τον κώδικα αυτό..

#ribbon { width: 111px;height: 111px;position: absolute; top: -4px; left: -4px; background: url(https://lh4.googleusercontent.com/-PaZmF2DqE1I/UeukDrceUkI/AAAAAAAADGA/
PeEmTauoA9I/s109/slider-ribbon.png) no-repeat;
z-index: 7;

Αυτά ήταν όλα πατήστε Αποθήκευση και είστε έτοιμοι!!

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

Πηγή κώδικα

Demo βλέπετε στην αρχική σελίδα του Tech Time στην πάνω πλευρά στο οποίο έχω κάνει
όλες τις αλλαγές που περιέγραψα πιο πάνω και ατόφιο το slider όπως είναι στον κώδικα
μπορείτε να το δείτε ΕΔΩ

EDIT BY VAIOL!!!!

Σάββατο 31 Αυγούστου 2013

Subscription form

Φίλες και φίλοι γειά σας σήμερα θα δούμε μία ωραία Subscription form η οποία βοηθά
τους αναγνώστες μας,να μαθαίνουν τις τελευταίες αναρτήσεις μας μέσω του feed μας
από το feedburner μας!!Είναι από τις πιο χρήσιμες λειτουργίες που μας προσφέρει η Google
για τα blog μας!!Σε αυτήν την ανάρτηση θα την δόυμε σε απλή
μορφή ενώ θα ακολουθήσουν
και άλλες της παραλλαγές σε άλλες αναρτήσεις!!

Η εγκατάσταση είναι πάρα πολύ απλή και για να γίνει αυτο...

Πηγαίνετε blogger--> Διάταξη -->

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

και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα-->
..........................................................................................................................
<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzcsHQpucJZRFSQb9uFZp3WAAZeCSbSxqkpboZ79OZB4JgkqpfJ-QUphKplR7IOb6DFdAt9mNiTjHcU4FKKYd3rjBbjAZrYPtS3_vsasOSfTM4ReWZXuQe-vzLTApLqe2hkfQt-WFpzxxz/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<div class="mbt-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?
uri=ΕΔΩ ΒΑΖΕΤΕ ΤΟ FEED ΣΑΣ', 'popupwindow', 'scrollbars=yes,width=550,height=520');
return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "")
{this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ FEED ΣΑΣ" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>
.......................................................................................................................
ΑΛΛΑΓΕΣ

ΕΔΩ ΒΑΖΕΤΕ ΤΟ FEED ΣΑΣ--Βάλτε στα 2 σημεία τον κωδικό από το feed σας
και πατήστε Αποθήκευση!Αυτό ήταν!!!

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

DEMO

Πηγή κώδικα

Edit by vaiol!!!!

Παρασκευή 30 Αυγούστου 2013

Social icons!!

Φίλες και φίλοι γειά σας σε αυτήν την ανάρτηση θα δούμε κάποια εικονίδια social icons
που έχω ετοιμάσει μεμονωμένα και όχι μαζί όπως είναι στις social bars!!Μπορούμε να τα
βάζουμε σε διάφορα σημεία των blog μας,έτσι ώστε να υπενθυμίζουν στους αναγνώστες-
επισκέπτες μας να μας ακολουθούν στα κοινωνικά δίκτυα!!!Εδώ βρήκα και ετομάσα 2 (free) εικονίδια σε στυλ σπιτιού μαγαζιού για facebook & twiteer!!

Τα βλέπετε πως είναι ακριβώς από κάτω

TWITTER

FACEBOOK

Τετάρτη 28 Αυγούστου 2013

Mini Social Icons With CSS

Φίλες και φίλοι γειά σας και πάλι,σε αυτήν την ανάρτηση θα δούμε μια μπάρα με social icons,

διαφορετική ως προς το μέγεθος από τις άλλες που έχουμε αναρτήσει με ένα πολύ ωραιό
Sprite Flip Effect κάνοντας την ιδανική να μπορούμε να την χρησιμοποιήσουμε μαζί με άλλην
στο blog μας λόγω του μικρού μεγέθου της!!!Αριστερά,Δεξιά,κάτω στο footer μας μπαίνει
παντού και για να την εγκαταστήσετε και εσείς στο blog σας....

Πηγαίνετε blogger--> Διάταξη -->

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

και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα-->
..........................................................................................................................

<ul class="spicesocialwidget">
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook">
</a></li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus">
</a></li>
<li class="twitter">
<a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss">
</a></li>
<li class="skype">
<a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype">
</a></li>
<li class="flickr">
<a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr">
</a></li>
<li class="linkedin">
<a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube">
</a></li>
</ul>
<style>
ul.spicesocialwidget {float:right;}
ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpgOhbv8wOrVzirBr2ragLTsvDUAak1XpMqorpkN5Rnit1dKhUmWWA6wq66yVnT3FMSWhpz-hef8mgT6kZmnHLjmZfrAgQ92L59fK03YI9lPGv0VhDlyBHEp2rU91ZfVdXEtb1ZudT4fpi/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpgOhbv8wOrVzirBr2ragLTsvDUAak1XpMqorpkN5Rnit1dKhUmWWA6wq66yVnT3FMSWhpz-hef8mgT6kZmnHLjmZfrAgQ92L59fK03YI9lPGv0VhDlyBHEp2rU91ZfVdXEtb1ZudT4fpi/s1600/spice-social-gadget-sprite.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.flickr a{ background-position:-32px 0}
ul.spicesocialwidget li.dribbble a{ background-position:-64px 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.linkedin a{ background-position:-128px 0}
ul.spicesocialwidget li.pinterest a{ background-position:-160px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.skype a{ background-position:-224px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 0}
ul.spicesocialwidget li.vimeo a{ background-position:-288px 0}
ul.spicesocialwidget li.youtube a{ background-position:-320px 0}
ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}
ul.spicesocialwidget li.flickr a:hover, #sidebar ul.spicesocialwidget li.flickr a:hover{ background-position:-32px -32px}
ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.skype a:hover, #sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
</style>

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

Βάζετε τα δικά σας αντίστοιχα urls των social media στα υπογραμμισμένα πεδία και
πατάτε Αποθήκευση!!Αυτό ήταν!

Έχω αφαιρέσει τα-vimeo-pinterest-dribble από τον κώδικα της μπάρας!Εάν θέλετε κάποιο
από αυτά μπορείτε από την πηγή που δίνω στο τέλος της ανάρτησης να χρησιμοποήσετε
ατόφιο τον κώδικα!!

Αν θέλετε να αφαιρέσετε και άλλα κάνετε το εξής..πχ το flickr
Αφαιρείτε αυτό
<li class="flickr">
<a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr">
</a></li>

και αυτό
ul.spicesocialwidget li.flickr a:hover, #sidebar ul.spicesocialwidget li.flickr a:hover{ background-position:-32px -32px}

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

DEMO

Πηγή κώδικα

Edit by vaiol!!!!

Τρίτη 27 Αυγούστου 2013

MARQUEE CODES

Φίλες και φίλοι γειά σας σε αυτήν την ανάρτηση θα δούμε μία από τις πολλές παραλλαγές που
έχει ο κώδικας marquee,με τον οποίο μπορούμε να τοποθετήσουμε σε όποιο σημείο του blog μας
θέλουμε scrolling text και όπως το θέλουμε..Δεξιά-αριστερά-πάνω κάτω-με σύνδεσμο,με εικόνα-με
stop-start,και άλλα πολλά!!

Εδώ θα το δούμε έτσι.............

ΣΤΗΝ ΥΓΕΙΑ ΣΑΣ!!

και για να το εγκαταστήσετε και εσείς στο blog σας...

Πηγαίνετε blogger--> Διάταξη -->

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

και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα-->
..........................................................................................................................

<marquee behavior="scroll" direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="6"><img alt="moving image by marquee html code" src="ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ ΣΑΣ"border="0"/> <a href="ΕΔΩ ΒΑΖΕΤΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ" target="_blank">ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</a> </marquee>

.......................................................................................................................
ΑΛΛΑΓΕΣ
Το 6 ορίζει την ταχύτητα του scroll
Το left ορίζει την κατεύθυνση του scroll
Αλλάζετε όλα τα υπογραμμισμένα με τα αντίστοιχα δικά σας και πατάτε Αποθήκευση!

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

Edit by vaiol!!!!

snow