War Thunder

Floating twitter followers box για blogger

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

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

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

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

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

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

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

Βήμα 2: Πηγαίνετε Σχεδίαση και επιλέξτε να προσθέσετε ένα νέο gadget στο sidebar σας. Το gadget που θα προσθέσουμε είναι τύπου HTML/JavaScript.

Βήμα 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 για τη blogger ιστοσελίδα μας.

Σημ

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

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

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

loading...

Share This Post

Related Articles

12 Responses to “Floating twitter followers box για blogger”

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

  2. meymigrou says:

    Καλησπέρα.
    Πρόσθεσα τον παραπάνω κώδικα σε ένα box HTML/Javascript αλλά δεν ανοίγει και παραμένει κλειστό ακόμα και όταν πηγαίνω το βελάκι μου πάνω του..

    Τσέκαρα επίσης και το δικό σας και βλεπω ότι ανοίγει αλλά δεν έχει εικόνες κ.τ.λ..
    Ευχαριστώ.>!!

    • admin says:

      Δοκίμασε τώρα! Συγνώμη αλλά για κάποιο λόγο μου έφυγε ένα / από το path του jquery

      • meymigrou says:

        Υπέροχος..!! Σε ευχαριστώ πολύ φίλε.. ((:

      • korakistas says:

        παιδιά καλησπέρα, το είχα βάλει και δούλευε κανονικά!, μετά το έβγαλα να δοκιμάσω κάτι άλλο, μετά το πέρασα και δε μου βγάζει τις εικόνες! μπορείτε να βοηθήσετε; ευχαριστώ.

        • admin says:

          Βάλε το widget σου τελευταίο και κάνε clear το cache του browser σου. Αν πάλι έχεις πρόβλημα ευχαρίστως να σε βοηθήσουμε στο info@greekpcblog.com !

  3. Professor says:

    Kαλημερα, τα εβαλα στο μπλογκ μου αυτα τα πτυσσομενα παραθυρα για τα κοινωνικα δικτυα facebook και twitter. Σε περιπτωση που θελω να τα απενεργοποιησω πως μπορω να το κανω χωρις να εκκαθαρισω ολες τις αλλαγες που εχω κανει μεχρι σημερα στους κωδικες; Eυχαριστω εκ των προτερων.

  4. EL.STAM says:

    καλημερα σας. εκανα τα βηματα σχετικα με twitter box floating ομως λειτουργει οπως ακριβως ειναι.
    οταν παω να κανω την αντικαταστταση δε βγαζει τιποτα. στο facebook πρεπει να κανεις fan pages μηπως και στο twitter θελει κατι αντιστοιχο??
    στο twitter δημιουργησα λογαριασμο
    με το ονομα sgsperxogeias

    username λετε το username που χρησιμοποιω εγω για να μπω στο twiiter???
    δηλαδη το sgspre@yahoo.gr
    εκανα αντικαταση αλλα δε βλεπω φως

    δημιουργησα twitter feed με name sgsperxogeias
    kai URL: http://sgsperxogeias.blogspot.com/feeds/posts/default?alt=rss

    δε τιποτα αν μπορειτε πεστε μου που κανω το λαθος
    ευχαριστω
    Ε.Σ

    • admin says:

      username είναι αυτό που ακολουθεί πάνω ψηλά στο profile page μετά το παπάκι π.χ στη δικιά μου λεει:
      Greek PC Blog
      @demiscy

      το demiscy είναι το username

  5. giannis says:

    den litoyrgi kapia ali voithia

  6. [...] προσθέσετε twitter follower box τότε ακολουθήστε τον σύνδεσμο αυτό για blogger και αυτό για [...]

  7. Θανάσης says:

    Καλησπέρα,

    Τo TWITTER FLOATING widget που μας παρουσίασες την τελευταία περίπου εβδομάδα εμφανίζεται ως ένα άδειο διάφανο κουτι στην σελίδα μου!
    Σε chrome, firefox & explorer!

    Μήπως μπορείς να βοηθήσεις?

Leave a Reply

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