Παρασκευή 9 Νοεμβρίου 2018
Pure CSS Expanded Social Network Widget
Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα social network widget με ένα πολύ
ωραίο smooth expand hover effect!Είναι με κώδικα Css, δεν καθυστερεί το άνοιγμα
των blog μας, και τοποθετείτε κατά κύριο λόγο στην αριστερή sidebar, η άν έχετε χώρο,
κάτω στο footer των blog σας!
Η εγκατάσταση του είναι πάρα πολύ απλή!
Πηγαίνετε blogger--> Διάταξη -->
Προσθήκη gadget-->HTML/JavaScript
και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα-->
...................................................................................................................................................
...............................................................................................................................................................
AΛΛΑΓΕΣ
Αντικαταστήστε όλα τα USERNAMES με τα αντίστοιχα δικά σας που έχετε στα social media, προσέξτε
στην αλλαγή να είναι ανάμεσα σε / " το username δηλαδή έτσι: /username"
και μόλις τελειώσετε πατήστε
Αποθήκευση! Αυτό ήταν!
Καλή επιτυχία!!!
Πηγή κώδικα
thanks to newbloggertips.com
Edit by
ωραίο smooth expand hover effect!Είναι με κώδικα Css, δεν καθυστερεί το άνοιγμα
των blog μας, και τοποθετείτε κατά κύριο λόγο στην αριστερή sidebar, η άν έχετε χώρο,
κάτω στο footer των blog σας!
Δείτε εδώ το DEMO
Η εγκατάσταση του είναι πάρα πολύ απλή!
Πηγαίνετε blogger--> Διάταξη -->
Προσθήκη gadget-->HTML/JavaScript
και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα-->
...................................................................................................................................................
<style>#NBT-SNS {width: 260px;margin: 5px 20px;padding:5px;}#NBT-SNS li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#NBT-SNS .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpMn047ClD1CTBp9UXlXJlKa23dmX4iNgFdWM7VHl_Tb7021e0KFDFVlx3SfIq0s_RPdAFV0teZrRNaOMlkwb9LJ53mMo6SqwB7-XV5CS4z1ll9GrEs93kEDC2SrkhQ13mtg2P2b6Kv44/s1600/NBT-Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #141414;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}#NBT-SNS span:hover {visibility: hidden;}#NBT-SNS span {display: block;top: 15px;position: absolute;left: 90px;}#NBT-SNS .icon {color: #fafafa;overflow: hidden;}#NBT-SNS .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#NBT-SNS .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#NBT-SNS .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#NBT-SNS .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#NBT-SNS .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#NBT-SNS .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#NBT-SNS .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#NBT-SNS li:hover .icon {width: 250px;}#NBT-SNS li:hover .icon {background-color: #d91e76;}#NBT-SNS li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#NBT-SNS li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#NBT-SNS li:hover .google {background-color: #A70000;background-position: 0 -94px;}#NBT-SNS li:hover .pint {background-color: #C00;background-position: 0 -142px;}#NBT-SNS li:hover .linked {background-color: #005772;background-position: 0 -190px;}#NBT-SNS li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#NBT-SNS li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#NBT-SNS .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}</style><ul id="NBT-SNS"><li><a href="http://www.facebook.com/USERNAME FACEBOOK" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span> </li><li><a href="https://twitter.com/USERNAME TWITTER" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span> </li><li><a href="https://plus.google.com/GOOGLE PLUS ID" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span> </li><li><a href="http://www.pinterest.com/USERNAME PINTEREST" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li><li><a href="http://in.linkedin.com/USERNAME LINKEDIN" class="icon linked">Follow us on LinkedIn</a><span>Follow us on LinkedIn</span> </li><li><a href="http://www.youtube.com/user/USERNAME YOUTUBE" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span> </li><li><a href="http://feeds.feedburner.com/USERNAME FEED" class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span></li></ul></div><div style='clear: both;'></div>
...............................................................................................................................................................
AΛΛΑΓΕΣ
Αντικαταστήστε όλα τα USERNAMES με τα αντίστοιχα δικά σας που έχετε στα social media, προσέξτε
στην αλλαγή να είναι ανάμεσα σε / " το username δηλαδή έτσι: /username"
και μόλις τελειώσετε πατήστε
Αποθήκευση! Αυτό ήταν!
Καλή επιτυχία!!!
Πηγή κώδικα
thanks to newbloggertips.com
Edit by
Εγγραφή σε:
Σχόλια ανάρτησης
(
Atom
)
Smart Defrag 2
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Smart Defrag 2 ένα από τα καλύτερα προγράμματα ανασυγκρότησης των σκληρών μας δίσκων...
Auto Scrolling Recent Posts
Γειά σας ένα πολύ ωραίο widget με οριζόντιο Auto Scrolling για να παρουσιάζουμε τις πρόσφατες αναρτήσεις μας...
Free YouTube Uploader
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Free YouTube Uploader το οποίο μας επιτρέπει...
Social media
Γειά σας τα gadgets και widgets για τα social media δεν έχουν πλέον τελιωμό και σε αυτήν την ανάρτηση θα δούμε...
Back to top button
Γεία σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ γνωστό και χρήσιμο gadget το οποίο μας βοηθά έτσι ώστε...
Sitemap Widget
Γειά σας,σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο και χρήσιμο Sitemap widget το οποίο μας δείχνει μαζεμένες σε μία σελίδα...
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .
0 σχόλια :
Δημοσίευση σχολίου