CSS3 Sharing Widget


Εδώ εδώ βρει κάτι διαφορετικό από τα αλλα πολύ όμορφο.



Εδώ είναι το πώς μπορείτε να το εγκαταστήσετε στο blog σας:
Στο Blogger ταμπλό σας, πηγαίνετε στο σχεδιασμό και στη συνέχεια κάντε κλικ στο Επεξεργασία HTML.
Ελέγξτε την Ανάπτυξη widgets κουτί Πρότυπα.
Αναζήτηση για την επόμενη γραμμή του κώδικα ετικέτα ή πατώντας Ctrl + F.
LIVE DEMO

<div class=’post-footer-line post-footer-line-1’>

Αντιγραφή / επικόλληση αυτής της CSS / JavaScript κώδικα αμέσως μετά δεξιά / κάτω:


<b:if cond='data:blog.pageType == &quot;item&quot;'><style type="text/css">.ringMenu {width: 100px;margin: 150px auto;}.ringMenu ul {list-style: none;position: relative;width: 100px;color: white;}.ringMenu ul a {color: white;}.ringMenu ul li {-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}.ringMenu ul li a {display: block;width: 100px;height: 100px;background: rgba(50,50,50,0.7);text-align: center;line-height: 100px;-webkit-border-radius: 50px;border-radius: 50px;font-size: 20px;}.ringMenu ul li a:hover {background: rgba(230,150,20,0.7);text-decoration: none;}.ringMenu ul li:not(.main) {-webkit-transform: rotate(-180deg) scale(0);-moz-transform: rotate(-180deg) scale(0);-o-transform: rotate(-180deg) scale(0);transform: rotate(-180deg) scale(0);opacity: 0;}.ringMenu:hover ul li {-webkit-transform: rotate(0) scale(1);-moz-transform: rotate(0) scale(1);-o-transform: rotate(0) scale(1);transform: rotate(0) scale(1);opacity: 1;}.ringMenu ul li.top {-webkit-transform-origin: 50% 152px;-moz-transform-origin: 50% 152px;-o-transform-origin: 50% 152px;transform-origin: 50% 152px;position: absolute;top: -70px;left: 50px;}.ringMenu ul li.bottom {-webkit-transform-origin: 50% -52px;-moz-transform-origin: 50% -52px;-o-transform-origin: 50% -52px;transform-origin: 50% -52px;position: absolute;bottom: -70px;left: 50px;}.ringMenu ul li.right {-webkit-transform-origin: -52px 50%;-moz-transform-origin: -52px 50%;-o-transform-origin: -52px 50%;transform-origin: -52px 50%;position: absolute;top: 10px;right: -50px;}.ringMenu ul li.left {-webkit-transform-origin: 152px 50%;-moz-transform-origin: 152px 50%;-o-transform-origin: 152px 50%;transform-origin: 152px 50%;position: absolute;top: 10px;left: -50px;}</style><div><script type="text/javascript">var switchTo5x=false;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher: "ur-e9856caa-8f3b-40a6-82af-461e390fe167"});</script><ul><li><a href="#main">SHARE</a></li><li><span class='st_fblike_vcount' displayText='Like'></span></li><li><span class='st_sharethis_vcount' displayText='Share'></span></li><li><span class='st_plusone_vcount' displayText='+1'></span></li><li><span class='st_twitter_vcount' displayText='Tweet'></span></li></ul></div></b:if> 


Αποθηκεύστε το πρότυπό σας και αυτό είναι αυτό. Τελειώσατε!


ΠΗΓΗ 

Δεν υπάρχουν σχόλια:

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

Εγγραφείτε για να λαμβάνετε τις σημαντικότερες ειδήσεις της ημέρας