Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Τετάρτη, Ιουνίου 30

7

Επίσημα share Buttons από το Blogger



Blogger δίνει τη δυνατότητα να δοκιμάσουμε ένα σύνολο πέντε share posts social εικονίδια ,που περιλαμβάνουν : Blogger, Twitter, Facebook και το Google Buzz .
Στην περίπτωση του Twitter χρησιμοποιεί μια υπηρεσία shortened url .
Τα επίσημα share Buttons από το Blogger είναι πλεον διαθέσιμα στο "κανονικό" Blogger πάνελ,χωρίς να χρειάζεται να μεταβείτε στο Πρόχειρο Blogger

Τα κουμπιά θα είναι, όπως βλέπετε στην παρακάτω εικόνα και περιλαμβάνουν hover effect και με το πέρασμα του κέρσορα θα εμφανίζονται όλα τα χρώματα .



Αν και ακόμα είναι σε δοκιμαστική λειτουργία, μπορούμε να αρχίσουμε να χρησιμοποιήσετε τα share Buttons ακόμα κaι σε παλαιοτέρα σχεδιασμένα πρότυπα και γενικά σε όλα τα πρότυπα, υπό την προϋπόθεση ότι θα προσθέσουμε στο πρότυπο μας τον απαραίτητο κώδικα για τα κουμπιά του Blogger.

Τα βήματα που πρέπει να ακολουθήσετε για να ενεργοποιήσετε τα share Buttons είναι τα έξης:

1 . Πηγαίνετε Σχεδίαση >> Στοιχεία Σελίδας και στο πλαίσιο Αναρτήσεις ιστολογίου (ακριβώς απο κάτω ) πατήστε Επεξεργασία .



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


Τώρα , αν στο πρότυπό σας δεν υπάρχει η επιλογή Εμφάνιση κουμπιών κοινής χρήσης . Τότε πρέπει να εγκαταστήσετε εσείς στο πρότυπό σας τον απαραίτητο κώδικά για να εμφανιστούν τα share Buttons.

Τα βήματα που πρέπει να ακολουθήσετε είναι τα εξής :

[1 ] Πηγαίνετε Σχεδίαση >> Επεξεργασία HTML και επιλέξτε το κουτάκι Επέκταση προτύπων γραφικών στοιχείων.

[ 2 ]
Τώρα βρείτε στο πρότυπό σας τον παρακάτω κώδικα :

<div class='post-footer-line post-footer-line-3'>


Και κολλήστε ακριβώς από κάτω τους παρακάτω κωδικούς :


<!-- share buttons -->

      <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div>


Αν δεν θέλετε να εμφανίζονται τα share Buttons στην αρχική σελίδα, απλά αντί για τον κώδικά που σας δίνω πάνω ,προσθέστε τον παρακάτω κώδικά :


<b:if cond='data:blog.pageType == "item"'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>


Και αποθηκεύετε το πρότυπό σας .

[ 3 ] Τώρα ακολουθήστε τα βήματα για να ενεργοποιήσετε τα share Buttons ,που σας περιγραφω στην αρχή της ανάρτησης και πλέον έχετε και εσείς τα Επίσημα share Buttons από το Blogger.

Αυτή η διαδικασια δεν χρειαζετε να γινει βεβαια , σε καινουργια επισημα προτυπα του Blogger , αυτο που πρεπει να κανετε για να τα χρισημοπιησετε ειναι απλά να τα ενεργοποιήσετε ( δείτε τις οδηγίες στην αρχή της ανάρτησης )

Σας έχω όμως κάτι καλύτερο !

Όπως είπα στην αρχή το blogger προσφέρει μόνο πέντε share Buttons ,Blogger, Twitter, Facebook και το Google Buzz .
Όμως τώρα μπορείτε να προσθέσετε και άλλα 6 δημοφιλής share Buttons αν θέλετε, τα οποία είναι Yahoo , Google, Stumbleupon ,Delicious , Digg και Reddit , προσθέτοντας τον παρακάτω κώδικα στο πρότυπο σας,πάνω από την ετικέτα ]]></b:skin>


/* Share Buttons --bloggertrics.blogspot.com----- */
.post-share-buttons {width:290px;}
.share-button2 {
display:block;
width:21px;
height:22px;
float:left;
background:url("http://2.bp.blogspot.com/_TNNQpsSXiP8/TBu4A0z9UPI/AAAAAAAAGQc/4xkaS0IAmDQ/s1600/share_buttons2.png") no-repeat left !important;
overflow:hidden;
margin-left:-1px;
}

.sb-yahoo {background-position:-21px 0 !important;}
a:hover.sb-yahoo {background-position:-21px -22px !important;}
a:active.sb-yahoo {background-position:-21px -44px !important;}
.sb-google {background-position:-84px 0 !important;}
a:hover.sb-google {background-position:-84px -22px !important;}
a:active.sb-google {background-position:-84px -44px !important;}
.sb-stumbleupon {background-position:-105px 0 !important;}

a:hover.sb-stumbleupon {background-position:-105px -22px !important;}
a:active.sb-stumbleupon {background-position:-105px -44px !important;}
.sb-delicious {background-position:-126px 0 !important;}

a:hover.sb-delicious {background-position:-126px -22px !important;}
a:active.sb-delicious {background-position:-126px -44px !important;}
.sb-digg {background-position:-147px 0 !important;}
a:hover.sb-digg {background-position:-147px -22px !important;}
a:active.sb-digg {background-position:-147px -44px !important;}
.sb-reddit {background-position:-168px 0 !important; width:22px;}
a:hover.sb-reddit {background-position:-168px -22px !important;}
a:active.sb-reddit {background-position:-168px -44px !important;}


Τώρα βρείτε στο πρότυπό σας την παρακάτω γραμμή :

<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>


Και αντικαταστήστε αυτήν την γραμμή με τον παρακάτω κώδικά :


<a class='share-button2 sb-yahoo' expr:href='&quot;http://bookmarks.yahoo.co.jp/action/bookmark?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url' target='_blank' title='Yahoo!'> 
        <span class='share-button-link-text'>Yahoo!</span></a> 
      <a class='share-button2 sb-google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google bookmarks'> 
        <span class='share-button-link-text'>Google bookmarks</span></a> 
      <a class='share-button2 sb-stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='stumbleupon'> 
        <span class='share-button-link-text'>stumbleupon</span></a> 
      <a class='share-button2 sb-delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='del.icio.us '> 
        <span class='share-button-link-text'>del.icio.us </span></a> 
      <a class='share-button2 sb-digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='digg '> 
        <span class='share-button-link-text'>digg </span></a> 
      <a class='share-button2 sb-reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='reddit '> 
        <span class='share-button-link-text'>reddit</span></a>  
        <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>


Τώρα αποθηκεύετε το πρότυπό σας και το αποτέλεσμα που θα έχουμε είναι :



7:

Snowball είπε...

Σοφία καλημέρα... :)

Λοιπόν στο δικό μου πρότυπο εμφανίζεται η επιλογή "Εμφάνιση κουμπιών κοινής χρήσης", την επιλέγω αλλά τίποτα δεν συμβαίνει...
Για να καταφέρω να δω τα κουμπιά πρέπει να προσθέσω τον κώδικα για τα share buttons, αυτόν στο πρώτο κουτί...
Τότε εμφανίζονται τα κουμπιά αλλά όσον αφορά τη διάταξή τους, όσο και να προσπαθώ να τα βάλω στο τέλος από το drag and drop menu
στα Options του "Αναρτήσεις ιστολογίου" πάλι τζίφος...
Δεν συζητώ ότι τα επιπλέον κουμπιά(digg, stumble etc...) δεν εμφανίζονται ποτέ...
Χρησιμοποιώ ως default editor το draft...
Έχεις καμιά ιδέα?

bloggertrics είπε...

Ουπς  =-X  Δεν φταις εσύ , πάλι μαμακια έκανα εγώ χιχιχ 
Γράφω τον κώδικά που χρειάζεται για να ενεργοποιηθούν τα κουμπιά ?? Οχι βέβαια !!!
Τοτε πως θα εμφανιστούν εεεεεεε  =-X >:o

Χίλια συγνώμη που σε ταλαιπώρησα ! 

Τώρα έκανα ενημέρωση και από κάτω γράφω τον κώδικά που χρειάζεται για να εμφανιστούν τα πρόσθετα κουμπιά !

Ο Κώδικας στο πρώτο κουτί εμφανίζει τα κουμπιά στην αρχική σελίδα, ενώ αυτός στο δεύτερο
κουτάκι εμφανίζει τα κουμπιά στην σελίδα της ανάρτησης .Θα τα δεις μόνο αν ανοίξει η ανάρτηση, γι αυτό δεν τα έβλεπες όταν έκανες προεπισκόπηση μετά την επεξεργασία .

Snowball είπε...

Όχι και μαλακία ρε Σοφία, γράφεις παπάδες, δικαιούσαι και ένα λαθάκι... :)
Θα τσεκάρω τις οδηγίες σου πιο μετά πιο μετά και θα σου πω.

Snowball είπε...

Λοιπόν, ακολούθησα τις οδηγίες σου για να εμφανιστούν όλα τα κουμπιά αλλά το αποτέλεσμα είναι αυτό στην φωτό...
Τι γίνεται λάθος?

bloggertrics είπε...

Αχαχ   =-X σαν πολυ στριμωγμένα φαίνονται !

Μάλλον κατι σου πήγε στραβά ! Πήγα να δω τον πηγαίο σου κώδικά , να δω τι έχεις κανει και φαίνονται ετσι , αλλα τα ειχες βγάλει   
Πάντως έκανα δοκιμή καλού κακού στο ιδιο πρότυπο με το δικό σου , αλλα φαίνονται μια χαρά , ρίξε μια ματιά εδω

Ας τα δούμε τα πράγματα ενα ενα :
1 . Αν στο προτυπο σου υπαρχει η επιλογη κουμπιων , δεν θα ξαναβαλεις στο HTML σου τον κωδικα στο βημα [2]
2. Τον κωδικα για τα προσθετα κουμπια το κολλας πνω απο το ]]> , μην αλλαζεις τιποτα στον κωδικα 


Κατι αλλο δεν μπορώ να κάνω από εδώ  δυστυχώς  >:o

Snowball είπε...

Στο πρότυπο υπάρχει η επιλογή κουμπιών αλλά αν δεν βάλω την HTML από το βήμα 2, δεν εμφανίζονται... :-E
Τον κώδικα για τα πρόσθετα κουμπιά , τον είχα βάλει εκεί που είπες...

Μήπως πάιζει ρόλο ότι έχω πειράξει το width του template ή ότι έχει δύο κολώνες στο πλάι?

Thanks, anyway!!!

:)

Snowball είπε...

Έλα το βρήκα για το πρώτο πρόβλημα...
Το template δεν πρέπει να έχει modifications για να πάιξουν τα buttons...

http://www.bloggerplugins.org/2010/06/official-sharing-buttons-on-blogger.html

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS