Add AutoHiding Social Bookmarking Widget To Your Blog (2 Widgets)

Ένα από τα πολλά στοιχεία που πρέπει να έχει κάθε blog είναι ένα widget για social bookmarking.Δηλαδή να υπάρχει κάτω από κάθε ανάρτηση ένα widget με τα γνωστότερα κοινωνικά δίκτυα του κόσμου (facebook,twitter κ.α.) ,ώστε να μπορεί ο αναγνώστης να διαδίδει την ανάρτηση στους φίλους του.Κι αυτό είναι πολύ καλό για εσάς γιατί σας φέρνει αυτό που αναζητά κάθε site:ΕΠΙΣΚΕΠΤΕΣ!
Υπάρχουν άπειρα τέτοια widgets αλλά πολλά δεν είναι "ελκυστικά" ώστε να μην τα προσέξει και να μην τα πατήσει ο επισκέπτης.
Εγώ λοιπόν έψαξα και βρήκα 2 social bookmarking widgets που μπαίνουν κάτω από κάθε ανάρτηση και είναι σίγουρο ότι θα τραβήξουν την προσοχή των επισκεπτών σας.

Είναι πολύ εύκολο να τα βάλετε 'αρκεί να έχετε όρεξη ,λίγο χρόνο και ακολουθήστε προσεκτικά τα βήματα που σας δίνω.
Καταρχίν επιλέξτε ποιο από τα 2 είδη θέλετε να βάλετε.
Το πρώτο είναι αυτό:

και το δεύτερο (με πιο πολύ εφέ):

Περίπου ίδια είναι αλλά το δεύτερο έχει το κάτι παραπάνω.
Αυτό που κάνει τη διαφορά και στα 2 αυτά widgets από τα υπόλοιπα είναι ότι τα εικονίδια είναι μισοκρυμμένα αλλά όταν περνάς με το ποντίκι σου από πάνω τους "ελευθερώνονται" και φαίνονται ολόκληρα.
Εγώ θα σας εξηγήσω αναλυτικά πως να τα βάλετε.
Για να μην το ξεχάσω μετά σας λέω από τώρα να κάνετε για κάθε ενδεχόμενο ένα back up τον κωδικό και τα widgets σας.

Προσθήκη του πρώτου είδους widget:

Για να βάλεις το παραπάνω widget στο blog σου ακολούθησε προσεκτικά τα παρακάτω βήματα:
1. Σύνδεση στον λογαριασμό σας από τον blogger.com
2. Πανόπτης >Διάταξη >Επεξεργασία html
3. Τσέκαρε το τετραγωνάκι που γράφει "Επέκταση προτύπων γραφικών στοιχείων"
4. Με την βοήθεια του ctrl + F βρείτε τον παρακάτω κωδικό:

</head>

5. Αμέσως από πάνω του / ή πριν από αυτό επικόλλησε τον παρακάτω κώδικα:

<style type='text/css'>
div.beauty-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.beauty-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important;
}

.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-yahoo {
background-position:-650px top !important;
}
.beauty-yahoo:hover {
background-position:-650px bottom !important;
}
.beauty-blinklist {
background-position:-600px top !important;
}
.beauty-blinklist:hover {
background-position:-600px bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-myspace {
background-position:-200px top !important;
}
.beauty-myspace:hover {
background-position:-200px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-mixx {
background-position:-250px top !important;
}
.beauty-mixx:hover {
background-position:-250px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}
.beauty-syndicate {
background-position:-150px top !important;
}
.beauty-syndicate:hover {
background-position:-150px bottom !important;
}
.beauty-email {
background-position:-753px top !important;
}
.beauty-email:hover {
background-position:-753px bottom !important;
}

</style>

6. Τώρα βρες τον παρακάτω κώδικα:

<data:post.body/>

7. Αμέσως από κάτω του / μετά από αυτό επικόλλησε τον παρακάτω κώδικα:

<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/bloggerstopnet' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div>
</b:if>

Αν θες να διαγράψεις κάποιο button διέγραψε τον αντίστοιχο κωδικό του.

8. Πάτα Προεπισκόπηση να δεις αν σου δεχτεί τον κωδικό (αν δεν στο δεχτεί και σου βγάλει σφάλμα έχεις πρόβλημα) και αποθήκευσε το πρότυπό σου.

Πάμε τώρα να δούμε τον τρόπο με τον οποίον θα βάλουμε το δεύτερο widget.

Προσθήκη του δεύτερου είδους widget:

Για να βάλεις το παραπάνω widget στο blog σου ακολούθησε προσεκτικά τα παρακάτω βήματα:
1. Σύνδεση στον λογαριασμό σας από τον blogger.com
2. Πανόπτης >Διάταξη >Επεξεργασία html
3. Τσέκαρε το τετραγωνάκι που γράφει "Επέκταση προτύπων γραφικών στοιχείων"
4. Με την βοήθεια του ctrl + F βρείτε τον παρακάτω κωδικό:

</head>

5. Αμέσως από πάνω του / ή πριν από αυτό επικόλλησε τον παρακάτω κώδικα:

6. Τώρα βρείτε τον παρακάτω κώδικα:

<data:post.body/>

7. Από κάτω του / μετά από αυτό επικολλήστε τον παρακάτω κώδικα:

<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='"http://reddit.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@NAME)"' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='"http://www.designfloat.com/submit.php?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='"http://scriptandstyle.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to Script & Style'>Submit this to Script & Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=http"+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='"http://friendfeed.com/?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>

<div class='sexy-link'> Widget by cssreflex|tutzone and <a href='http://johnpatrablog.blogspot.com/2009/11/add-autohiding-social-bookmarking.html' title='Web Design Blog'>Johnpatra BLOG</a></div>

Τις τελευταίες σειρές που σας έχω μαρκάρει με κίτρινο και κόκκινο είναι τα credits.Έβαλα και το δικό μου μέσα για αυτήν εδώ την ανάρτηση που κάθησα και έγραψα.Αν δεν τα θέλετε διαγράψτε τα ή αφήστε μόνο το δικό μου (διαγράψτε μόνο τα κίτρινα).

8. Πάτα Προεπισκόπηση να δεις αν σου δεχτεί τον κωδικό (αν δεν στο δεχτεί και σου βγάλει σφάλμα έχεις πρόβλημα) και αποθήκευσε το πρότυπό σου.

Φτάσαμε στο τέλος της ανάρτησης.
Ξέρω κι άλλα μερικά widgets που κάνουν την ίδια δουλειά με τα παραπάνω αλλά θα σας τα δείξω άλλη μέρα.
Αρκετά έγραψα σήμερα.

Σας παρακαλώ αν καταφέρατε να βάλετε ένα από τα δύο widget αφήστε ένα σχόλιο για να βεβαιωθώ ότι είναι σωστά γραμμένη η ανάρτηση.Αν συναντήσατε κάποιο πρόβλημα εννοείτε να αφήσετε σχόλιο.
Καλή σας μέρα!

11 comments:

Γιάννης είπε...: Σ' ευχαριστώ πολύ! Πρόσθεσα το δεύτερο.Όλα λειτουργούν μια χαρά!; 8 Νοεμβρίου 2009 στις 5:33 μ.μ.
bloggertips.gr είπε...: ωραια και ανησυχουσα κιολας γιατι μου πηρε πολλη ωρα να γραψω αυτο το ποστ και φοβηθηκα μην εκανα κανενα λαθος αλλα αφου το πετυχε ενας ειναι σωστο το δευτερο.
καλο μεσημερι δασκαλε; 9 Νοεμβρίου 2009 στις 4:13 μ.μ.
Ανώνυμος είπε...: Πολυ καλο,εβαλα σημερα το πρωτο.
Ευχαριστω,ολα πηγαν τελεια.; 13 Νοεμβρίου 2009 στις 5:18 μ.μ.
bloggertips.gr είπε...: τελεια.βεβαιωθηκα και για το πρωτο!
Να σαι καλα Περιοπα.
καλη συνεχεια; 13 Νοεμβρίου 2009 στις 7:17 μ.μ.
Ανώνυμος είπε...: Τοποθέτησα το 2ο και είναι τέλειο, ευχαριστώ !; 17 Νοεμβρίου 2009 στις 10:11 μ.μ.
bloggertips.gr είπε...: kogionaro αν μπορεις στιλε μου να δω το blog σου.ειδα το προφιλ σου αλλα εκει δεν το γραφεις.; 17 Νοεμβρίου 2009 στις 11:34 μ.μ.
Ανώνυμος είπε...: Αγαπητέ johnpatra έχω προσθέσει το 2ο widget και εδώ και 2 ημέρες έπαψε να εμφανίζεται σωστά, μήπως ξέρεις γιατί; http://kogionaro.blogspot.com; 11 Δεκεμβρίου 2009 στις 6:34 μ.μ.
bloggertips.gr είπε...: ναι και εγω το προσεξα αυτο σε μερικα blogs.ο κωδικας για να εμφανιζεται αυτο το widget ειναι ανεβασμενος σε εναν server που δεν τον χειριζομαι εγω.επομενως λυπαμαι πολυ αλλα δεν μπορω να κανω κατι.παντως θα ειδοποιησω αυτον που εχει τον παραπανω κωδικα ανεβασμενο και θα του πω για αυτο το προβλημα.αν τον ξανα ανεβασει ή κανει κατι θα σας ειδoποιησω με σχετικη αναρτηση.αυτην την στιγμη ακου τι θα εκανα στη θεση σου.παρε τα βηματα απο το τελος και αφαιρεσε ολους τους κωδικες απο αυτο το gadget.μπορεις να διαλεξεις καποιο αλλο social bookmarking από τα διάφορα που σας έχω πει.άλλο ενα δεν λειτουργει ( το http://johnpatrablog.blogspot.com/2009/11/social-bookmarking-icons.html )ολα τα αλλα ειναι οκ.κοιτα τα στο http://johnpatrablog.blogspot.com/search/label/social%20bookmarking

λυπαμαι πολυ που χαλασε αυτο το widget γιατι ηταν και ωραιο.; 11 Δεκεμβρίου 2009 στις 8:53 μ.μ.
Ανώνυμος είπε...: σε ευχαριστώ πολύ για την άμεση απάντησή σου, να είσαι καλά.; 12 Δεκεμβρίου 2009 στις 3:19 π.μ.
bloggertips.gr είπε...: αυτο μας ελειπε να μην σου απαντησω.
λυπαμαι πολυ που χαλασε αυτο το widget αλλα δεν μπορω να κανω κατι.του εχω στειλει μαιλ αλλα δεν νομιζω να γινει κατι.δεν νομιζω να μου απαντησει κιολας.τελος παντων.κλαη συνεχεια; 12 Δεκεμβρίου 2009 στις 8:49 μ.μ.
Panos Sakalakis είπε...: Πέρασα αυτό το widget στο blogger μου,αλλά δεν μου το βγάζει σωστά!! κάτι δεν είναι οκ.

Το πέρασα και στην συνέχεια πήγα σε ένα post μου να δω αν ήταν οκ,και το είδα,αλλά όχι όπως το περίμενα!
Δεν φαίνονται οι εικόνες!; 2 Αυγούστου 2011 στις 9:35 π.μ.

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

Παρακαλούμε τους φίλους αναγνώστες:

ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ

Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.