War Thunder

Floating twitter followers box για wordpress

Στη ανάρτηση αυτή θα δούμε πως μπορούμε να προσθέσουμε στη ιστοσελίδα μας twitter followers box. To widget αυτό θα είναι σε μορφή μετακινούμενου button στα δεξιά της οθόνης μας, αποκαλύπτοντας το followers box όπως φαίνεται στη παρακάτω εικόνα:

Η ανάρτηση και κατ’επέκταση ο κώδικας ανανεώθηκαν στις 26/10/2012

Για να προσθέσετε το widget σε blogger ακολουθήστε το σύνδεσμο αυτό.

Σε αντίθεση με άλλα floating widgets που επιτρέπουν μόνο ένα στα δεξιά της οθόνης, αυτό είναι απόλυτα συμβατό και μπορεί να συνδυαστεί με facebook floating box.

Πλεονεκτήματα

  • Eξοικονομείτε πολύτιμο χώρο στο sidebar σας
  • Tο followers box βρίσκεται πάντα στο οπτικό πεδίο του αναγνώστη έτσι μπορείτε να αυξήσετε τους followers σας.

Βήμα 1: Συνδεθείτε στον λογαριασμό σας.

Βήμα 2: Από το dashboard πηγαίνετε Appearance και επιλέξτε widgets. Το widget που θα προσθέσουμε είναι τύπου Text.

Βήμα 3: Αντιγράψτε τον παρακάτω κώδικα στο gadget που δημιουργήσατε:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".twitterboxot").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function()
{$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//--> </script>
<style type="text/css">
.twitterboxot{background: url("http://2.bp.blogspot.com/-fcEMbjMcVhI/UDzNfUCWxcI/AAAAAAAAAt4/p0lew_c7Sxw/s320/allbloggingtips.com-twitter-icon.png")
no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 240px;
padding: 0 5px 0 29px;
width: 245px;
z-index: 99999;
position:fixed;
right:-250px; top:350px;}</style>
<div class="twitterboxot"><div>
<script type="text/javascript"
src="http://script-ot.googlecode.com/svn/twitterbox.js"></script><div
id="twitterfanbox"></div
id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("demiscy");</script><div align="right"><span style="font-size: xx-small;background:#fff;"><a href="http://greekpcblog.com" target="_blank">Blogging tutorials by Greek PC Blog</a></span></div></div>

Βήμα 4: Ο κώδικας αυτός μόλις σας πρόσθεσε το floating twitter followers box του Greek PC Blog. Για να προσθέσετε το δικό σας, αλλάξτε στη γραμμή 24 το demiscy με το USERNAME σας στο twitter.

Αυτό ήταν! πολύ εύκολα και απλά προσθέσαμε ένα floating twitter followers box για τη wordpress ιστοσελίδα μας.

Σημ:
Για όσους ξέρουν τι κάνουν. Αν έχετε ήδη στο header της ιστοσελίδας σας κάποια έκδοση του jquery μπορείτε να μην αντιγράψετε τη πρώτη γραμμή έτσι ώστε να μην φορτώνετε δυο φορές το jquery.

Μπορείτε να αλλάξετε την θέση που βρίσκεται το κουτάκι αλλάζοντας στην γραμμή 13 το top tag

loading...

Share This Post

Related Articles

One Response to “Floating twitter followers box για wordpress”

  1. [...] Για να προσθέσετε το widget σε wordpress ακολουθήστε το σύνδεσμο αυτό. [...]

Leave a Reply

Άδεια Creative Commons
Χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Παρόμοια Διανομή 4.0 Διεθνές .
© 2017 Greek PC Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS