.Δηλαδή να υπάρχει κάτω από κάθε ανάρτηση ένα widget με τα γνωστότερα κοινωνικά δίκτυα του κόσμου
,ώστε να μπορεί ο αναγνώστης να διαδίδει την ανάρτηση στους φίλους του.Κι αυτό είναι πολύ καλό για εσάς γιατί σας φέρνει αυτό που αναζητά κάθε site:
ώστε να μην τα προσέξει και να μην τα πατήσει ο επισκέπτης.
που μπαίνουν κάτω από κάθε ανάρτηση και είναι σίγουρο ότι θα τραβήξουν την προσοχή των επισκεπτών σας.
Είναι πολύ εύκολο να τα βάλετε 'αρκεί να έχετε όρεξη ,λίγο χρόνο και ακολουθήστε προσεκτικά τα βήματα που σας δίνω.
Καταρχίν επιλέξτε ποιο από τα 2 είδη θέλετε να βάλετε.
Το πρώτο είναι αυτό:
και το δεύτερο (με πιο πολύ εφέ):
Περίπου ίδια είναι αλλά το δεύτερο έχει το κάτι παραπάνω.
Αυτό που κάνει τη διαφορά και στα 2 αυτά widgets από τα υπόλοιπα είναι ότι τα εικονίδια είναι μισοκρυμμένα αλλά όταν περνάς με το ποντίκι σου από πάνω τους "ελευθερώνονται" και φαίνονται ολόκληρα.
Εγώ θα σας εξηγήσω αναλυτικά πως να τα βάλετε.
Για να μην το ξεχάσω μετά σας λέω από τώρα να κάνετε για κάθε ενδεχόμενο ένα back up τον κωδικό και τα widgets σας.
Προσθήκη του πρώτου είδους widget:
Για να βάλεις το παραπάνω widget στο blog σου ακολούθησε προσεκτικά τα παρακάτω βήματα:
1. Σύνδεση στον λογαριασμό σας από τον blogger.com
2. Πανόπτης >Διάταξη >Επεξεργασία html
3. Τσέκαρε το τετραγωνάκι που γράφει "Επέκταση προτύπων γραφικών στοιχείων"
4. Με την βοήθεια του ctrl + F βρείτε τον παρακάτω κωδικό:
</head>
5. Αμέσως από πάνω του / ή πριν από αυτό επικόλλησε τον παρακάτω κώδικα:
<!--HIDDEN-BOOKMARKS-STARTS-->
<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>
<!--HIDDEN-BOOKMARKS-STOPS-http://bloggerstop.net-->
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. Αμέσως από πάνω του / ή πριν από αυτό επικόλλησε τον παρακάτω κώδικα:
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery('.sexy-bookmarks').height();
var sexyFullHeight=jQuery('.sexy-bookmarks ul.socials').height();
if (sexyFullHeight>sexyBaseHeight) {
jQuery('.sexy-bookmarks-expand').hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+'px'
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+'px'
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery('.sexy-bookmarks-center')) {
var sexyFullWidth=jQuery('.sexy-bookmarks').width();
var sexyBookmarkWidth=jQuery('.sexy-bookmarks:first ul.socials li').width();
var sexyBookmarkCount=jQuery('.sexy-bookmarks:first ul.socials li').length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin+'px');
}
});
</script>
<style type="text/css">
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://img31.imageshack.us/img31/176/sexytrans.png') !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://img512.imageshack.us/img512/3131/sexysprite.png') no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>
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 αφήστε ένα σχόλιο για να βεβαιωθώ ότι είναι σωστά γραμμένη η ανάρτηση.Αν συναντήσατε κάποιο πρόβλημα εννοείτε να αφήσετε σχόλιο.
Καλή σας μέρα!