Blogger Tips – Tricks – Gadgets – Templates – Hacks

Αυτόματο Share αναρτήσεων σε Facebook,Twitter και Google+



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Η παρακάτω υπηρεσία προσφέρει τη δυνατότητα αυτόματης διαμοίρασης αναρτήσεων σε Facebook,Twitter και Google+ για να σας γλιτώσει από χρόνο και κόπο.



(1)Εγγραφείτε εδώ http://dlvr.it


(2)Βάλτε το link του FeedBurner σας εδώ :

(*)Εάν δεν έχετε FeedBurner link διαβάστε εδώ πως φτίαχνετε



(3)Επιλέξτε σε ποιά Social Media θέλετε να κάνετε Share τις αναρτήσεις σας

(4)Εάν,για παράδειγμα,κλικάρετε το Twitter,θα μεταφερθείτε στη σελίδα του Twitter από όπου κάνετε Login

(5)Μόλις ολοκληρωθεί η διαδικασία,ο λογαριασμός του Twitter σας θα προστεθεί στο Dashboard του dlvr.it .Αυτό σημαίνει ότι οι δημοσιεύσεις σας θα αναρτόνται αυτόματα στο Twitter.Εάν θέλετε να προσθέσετε και άλλα μέσα δικτύωσης πατήστε Add Route



Στη θέση Source βάζετε το link του Feedburner σας και στο destination το μέσω δικτύωσης.





Copyrights: http://www.bloggertips.gr/




‘Follow us’ J-Query Social Bookmarking Widget



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr.





Σήμερα θα προσθέσουμε ένα ακόμη gadget στη συλλογή μας με τα Social Bookmarking Gadgets, το οποίο επιτελεί 4 λειτουργίες: RSS Feed, Εγγραφή στο blog μέσω e-mail και link για τις σελίδες μας στα Facebook και Twitter.



Πάμε να δούμε πως θα το προσθέσουμε στο blog μας:



1. Σύνδεση στο λογαριασμό blogger

2. Σχεδίαση

3. Επεξεργασία HTML

4. Με Ctrl + F αναζητούμε το ]]></b:skin> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:

#social {

width: 98%;

height: 45px;

margin: 0;

padding: 10px 5px 5px 30px;

list-style: none;

border-right:solid 1px #853529;

position: relative;

background: url(http://2.bp.blogspot.com/-Nf6QgqI-jkc/Tas56HEUrwI/AAAAAAAAAxQ/hw_KYA9pPZA/follow-bg-abt.png) no-repeat left top;

}



#social p{

font-size:1.5em;

color:#FFFB98;

font-weight:bold;

float:left;

margin: 10px 10px 0 0;

text-shadow: 1px 1px 0px #000000;

filter: dropshadow(color=#000000, offx=1, offy=1);

}



.abt{

font-size:0.8em;

color:#787878;

float:right;

margin: 0 -30px 0 0;

text-shadow: 1px 1px 0px #ffffff;

filter: dropshadow(color=#ffffff, offx=1, offy=1);

}



#social li {

width: 32px;

height: 32px;

float: left;

margin-right: 3px;

}



#social li a {

float: left;

display: block;

width: 100%;

height: 100%;

text-indent: -1000em;

background-repeat: no-repeat;

text-decoration: none;

}



#social #rss {

background-image: url(http://2.bp.blogspot.com/-27yL99iDt70/Tas569zVJWI/AAAAAAAAAxo/NIEumM2DKRo/s400/allblogtools_rss.png);

}



#social #facebook {

background-image: url(http://4.bp.blogspot.com/-lfZmi7_j72c/Tas56hfwNxI/AAAAAAAAAxg/D_xE4bPyo60/s400/allblogtools_facebook.png);

}

#social #twitter {

background-image: url(http://2.bp.blogspot.com/-BHCqkqm4Dnw/Tas57UCTyAI/AAAAAAAAAxw/fCj4yjzJE0g/s400/allblogtools_twitter.png);

}

#social #mail {

background-image: url(http://1.bp.blogspot.com/–tzwYodHzk8/Tas56U26pSI/AAAAAAAAAxY/Xqxm-jfCPkA/s400/allblogtools_email.png);

}



span.tooltip {

background: #575757;

padding: 3px;

display: block;

width: 140px;

border: 1px solid #000000;

position: absolute;

margin-top:-40px;

color: #F0F0F0;

font-size:10px;

text-indent: 0;

font: Arial, sans-serif;

text-align: center;

-webkit-box-shadow: inset 2px 2px 2px #616161;

-moz-box-shadow: inset 2px 2px 2px #616161;

box-shadow: inset 2px 2px 2px #616161;

-moz-border-radius: 5px;

border-radius: 5px;

}



5. Στη συνέχεια, πάλι με Ctrl + F, αναζητούμε το </body> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:

<script type=’text/javascript’>

window.setTimeout(function() {

document.body.className = document.body.className.replace('loading', '');

}, 10);

</script>



<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’/>

<script type=’text/javascript’>

//<![CDATA[

$(document).ready(function() {



$(‘#social li’).each(function() {



var $li = $(this);

var title = $li.find(‘a’).attr(‘title’);



$li.find(‘a’).removeAttr(‘title’);



$(‘<span class=”tooltip”/>’).text(title).appendTo($li.find(‘a’)).hide();





$li.find(‘a’).mouseover(function() {





var top = $(this).position().top;

var left = $(this).position().left;



$(this).find(‘span’).fadeIn()({

top: top,

left: left

}, ‘slow’);



});



$li.find(‘a’).mouseout(function() {





$(this).find(‘span’).fadeOut(‘slow’);





});



});





});



//]]>

</script>



6. Αποθήκευση προτύπου



Πάμε τώρα να προσθέσουμε το gadget στο blog μας:



7. Πάμε Σχεδίαση > Προσθήκη gadget > HTML/Javascript και στο παράθυρο που θα ανοίξει επικολλούμε τον παρακάτω κώδικα:

<ul id=”social”>

<p>Follow Us</p>

<li><a href=”http://blog-name.blogspot.com/feeds/posts/default?alt=rss” id=”rss” title=”Follow our Feeds”>Rss</a></li>



<li><a href=”Mail-Link#” id=”mail” title=”Subscribe to our newsletter”>Mail</a></li>



<li><a href=”Facebook-Link#” id=”facebook” title=”Like us on Facebook”>Facebook</a></li>



<li><a href=”Twitter-Link#” id=”twitter” title=”Follow us on Twitter”>Twitter</a></li>

</ul>



Αντικαθιστούμε το http://blog-name.blogspot.com με τη διεύθυνση (url) του blog μας (ή αν έχετε λογαριασμό στο Feedburner, αντικαταστήστε το http://blog-name.blogspot.com/feeds/posts/default?alt=rss με το url από το Feedburner (όπως θα δείτε στο παράδειγμα παρακάτω), το Mail-Link# με τη διεύθυνση στην οποία οι αναγνώστες μπορούν να κάνουν εγγραφή (subscribe) στο blog μας μέσω e-mail, το Facebook-Link# με το url της σελίδας ή του προφίλ μας στο Facebook και το Twitter-Link# με το url της σελίδας μας στο Twitter.



Για να καταλάβετε καλύτερα τι και πως θα το αντικαταστήσετε, ρίξτε μια ματιά στον παρακάτω κώδικα, ο οποίος αποτελεί παράδειγμα για το bloggertips.gr:

<ul id=”social”>

<p>Follow Us</p>

<li><a href=”http://feeds.feedburner.com/Johnpatrablog” id=”rss” title=”Follow our Feeds”>Rss</a></li>



<li><a href=”http://feedburner.google.com/fb/a/mailverify?uri=Johnpatrablog” id=”mail” title=”Subscribe to our newsletter”>Mail</a></li>



<li><a href=”https://www.facebook.com/bloggertips.gr” id=”facebook” title=”Like us on Facebook”>Facebook</a></li>



<li><a href=”https://twitter.com/#!/johnpatrablog” id=”twitter” title=”Follow us on Twitter”>Twitter</a></li>

</ul>



Για οποιοδήποτε πρόβλημα ή απορία αφήστε το σχόλιό σας.



Πηγές: http://www.allblogtools.com/tricks-and-hacks/blogger-follow-us-j-query-widget-social-icons/



Copyrigths: http://www.bloggertips.gr/



Post by Secra from Web in Greece




Feed Subscription Page Peel Effect Add For Blogger (στη πανω δεξια γωνια)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Από τα καλύτερα και αγαπημένα μου blogger hacks κι αυτό, που θέλω σήμερα να το μοιραστώ μαζί σας. Είναι ένα απίστευτα όμορφο blogger εφέ για το blog σας, που μπαίνει στην πάνω δεξιά γωνία του blog σας, ενώ αναδιπλώνει ανάλογα με τις κινήσεις του ποντικιού. Αυτό το add προοτρέπει τους επισκέπτες σας να εγγραφούν στο newletter σας στο feedburner.


ΣΗΜΑΝΤΙΚΟ: πρέπει να έχετε οπωσδήποτε λογαριασμό και newsletter στο feedburner μόνο! μην πανικοβάλεστε! δείτε το http://www.bloggertips.gr/2010/11/newsletter-how-to-add-feedburner-email.html κια φτιάξτε τώρα τον λογαριασμό σας!



Ακολουθήστε πιστά τα παρακάτω βήματα για να το εγκαταστήσετε στο blog σας:



1. Σύνδεση στον λογαριασμό μας από το blogger.com

2. Σχεδίαση> Επεξεργασία html

3. Με τη βοήθεια του ctrl+F βρείτε το </head> και επικολλήστε τον παρακάτω κωδικό αμέσως πάνω από το </head>


<style type=’text/css’>

img { behavior: url(iepngfix.htc) }

#pageflip {

position: relative;

right: 0; top: 0;

float: right;

}

#pageflip img {

width: 50px; height: 52px;

z-index: 99;

position: absolute;

right: 0; top: 0;

-ms-interpolation-mode: bicubic;

}

#pageflip .msg_block {

width: 50px; height: 50px;

overflow: hidden;

position: absolute;

right: 0; top: 0;

background: url(http://www.wallheaven.com/subscribe.png) no-repeat right top;

}

</style>



<script src=’http://code.jquery.com/jquery-latest.js’ type=’text/javascript’/>

<script type=’text/javascript’>

$(document).ready(function(){



//Page Flip on hover



$("#pageflip").hover(function() {

$("#pageflip img , .msg_block").stop()

.animate({

width: '307px',

height: '319px'

}, 500);

} , function() {

$("#pageflip img").stop()

.animate({

width: '50px',

height: '52px'

}, 220);

$(".msg_block").stop()

.animate({

width: '50px',

height: '50px'

}, 200);

});





});

</script>



To http://www.wallheaven.com/subscribe.png προτείνω να το αφήσετε όπως είναι αν δεν έχετε να βάλετε κάτι καλύτερο.



Εγω για μένα θα το άλλαζα με το http://i723.photobucket.com/albums/ww239/johnpatra/social%20networks/avoda0.png, τώρα εσείς δεν ξέρω αν έχετε κάτι τέτοιο :).



4. Τώρα βρείτε το <body> και επικολλήστε τον παρακάτω κωδικό αμέσως μετά από το <body>


<div id=’pageflip’>

<a href=’http://feeds.feedburner.com/Johnpatrablog‘><img alt=” src=’http://www.wallheaven.com/page_flip.png‘/></a>

<div class=’msg_block’></div>

</div>



Το Johnpatrablog στο http://feeds.feedburner.com/Johnpatrablog το αλλάζετε με τη διεύθυνση του δικού σας λογαριασμού στο feedburner. Πρέπει να βάλετε διεύθυνση μόνο από το feedburner αλλιώς δεν λειτουργεί! Και πρέπει να είναι της παραπάνω μορφής ΜΟΝΟ! Ουσιαστικά το μόνο που αλλάζετε είναι το Johnpatrablog.



Tο http://www.wallheaven.com/page_flip.png προτείνω να το αφήσετε όπως είναι αν δεν έχετε να βάλετε κάτι καλύτερο.



5. Αποθήκευση!





Αν σας άρεσε αφήστε ένα σχόλιο 🙂


Πηγές κωδικών: http://www.sohtanaka.com/,http://www.anshuldudeja.com/,http://www.cssreflex.com/
Copyrights: /




ΦΤΙΑΞΕ ΤΟ NEWSLETTER ΤΗΣ ΣΕΛΙΔΑΣ ΣΟΥ (how to add feedburner email subscriptions box form to your blog website)



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Το Feedburner προσφέρει πολλές δυνατότητες, αλλά είναι τόσο γνωστό για τη δυνατότητα του newsletter που παρέχει στους χρήστες του. Με αυτη την δυνατότητα, οι επισκέπτες μιας ιστοσελίδας μπορούν να γίνουν συνδρομητές σε αυτή και να λαμβάνουν στο e-mail τους, όλες τις νέες αναρτήσεις της. Τρομερή δυνατότητα αυτη, που πρέπει να δίνει κάθε site στους επισκέπτες του.



Το Feedburner ανήκει στην Google.

Μεγαλύτερος ανταγωνιστής του Feedburner είναι το Feedblitz, το οποίο δεν είναι πολύ κακό, αλλά δεν είναι και Feedburner.





Η εγγραφή στο Feedburner είναι δωρεάν, μπορεί να γίνει χρησιμοποιώντας τον λογαριασμό που ήδη έχετε στο Google και σας επιτρέπει να «κάψετε» (δηλ. να εισάγετε) όσα feeds θέλετε.



Το πρώτο βήμα που πρέπει να κάνουμε για να αρχίσουμε να φτιάχνουμε το newsletter μας, είναι να πατήσουμε στο http://feedburner.google.com/, όπου θα εμφανιστεί η παρακάτω εικόνα:




Απαραίτητη προϋπόθεση είναι να έχουμε google λογαριασμό, που οι περισσότεροι έχουμε λόγω του blog μας. Όσοι δεν έχετε φτιάχνετε τώρα. Όσοι έχουμε συνδεόμαστε στο Feedburner με τους κωδικούς που έχουμε και στον google λογαριασμό μας.





Τώρα θα σας εμφανιστεί η παρακάτω εικόνα:




Εγώ έχω ήδη ένα feed, αυτό του johnpatra.com (εσείς λογικά δεν έχετε κανένα ακόμα). Για να σας δείξω πως θα φτιάξετε ένα νέο feed, αποφάσισα να ξεκινήσω και εγω τη δημιουργία ενός νέου feed, αυτό του http://ski-gr.blogspot.com/ που είναι ένα από τα άλλα μου blogs.



Γράφετε κι εσείς τη διεύθυνση του blog σας, επίλεγετε το “I am a Podcaster!” και πατάτε “Next”.



Τώρα επιλέγουμε την πρώτη επιλογή, όπως φαίνεται παρακάτω




και πατάμε πάλι το “Next”.






Τώρα γράφουμε το όνομα του feed μας και βάζουμε και τη διεύθυνση στην οποία θα ανοίγει.




Ρυθμίστε τα όπως θέλετε και πατήστε “Next” (αν δεν ξέρετε τι ρύθμιση είναι το καθένα, βάλτε τα όπως τα έχω εγώ στις εικόνες).






Ρυθμίστε τα όπως θέλετε και πατήστε “Next” (αν δεν ξέρετε τι ρύθμιση είναι το καθένα, βάλτε τα όπως τα έχω εγώ στις εικόνες).




To feed μας δημιουργήθηκε!





Δείτε τι σημαίνει η κάθε καρτέλα:



Analyze:



Περιλαμβάνει στατιστικά χρήσης των feeds σας. Εδώ μπορείτε να δείτε ποιες είναι οι δημοφιλέστερες καταχωρήσεις σας, τον αριθμό και τη συμπεριφορά των συνδρομητών σας, τον feed reader που χρησιμοποιούν, τις γεωγραφικές περιοχές από τις οποίες προέρχονται, ακόμα και να εντοπίσετε «ασυνήθιστες χρήσεις» (uncommon uses) των feeds σας.



Optimize:



Εδώ μπορείτε να βελτιώσετε τα feeds σας, κάνοντάς τα συμβατά με όλες τις πιθανές συσκευές και feedreaders, αλλά και να τα ενισχύσετε με επιπλέον λειτουργικότητες όπως: κουμπιά απευθείας παρακολούθησης από τους δημοφιλέστερους feed readers, τροποποιήσεις ειδικές για podcasters, δυνατότητα διαμοιρασμού των feeds σε υπηρεσίες κοινωνικής δικτύωσης, δήλωση της γεωγραφικής τοποθεσίας σας κ.α.



Publicize:



Από τις πιο ενδιαφέρουσες κατηγορίες, αφού προσφέρει εναλλακτικούς τρόπους προώθησης και παρουσίασης των feeds σας. Μερικές από τις επιλογές που περιλαμβάνει είναι η δυνατότητα δημιουργίας κινούμενων banners που εμφανίζουν τις τελευταίες καταχωρήσεις, επαναδημοσίευση των feeds σας ως περιεχόμενο ενσωματωμένο σε άλλο website, προβολή του αριθμού των συνδρομητών, αυτόματη δημοσίευση κάθε νέας καταχώρησης στο Twitter (το αγαπημένο μου) κ.α.



Monetize:



Σας δίνει τη δυνατότητα να ενσωματώσετε διαφημίσεις από το Google Adsense ανάμεσα στα feeds σας. Προϋποθέτει, ασφαλώς, να έχετε λογαριασμό στο Adsense.



Troobleshootize:



Ελέγχει την «υγεία» των feeds σας και σας δίνει συμβουλές για το πώς θα τα διατηρήσετε σε καλή κατάσταση.



Πηγή*: www.freeweird.com





Από τις καρτέλες επιλέγουμε το “Publicize”, πατάμε στην επιλογή “Email subscriptions” που έχει στα δεξιά και πατάμε “Activate” για να ενεργοποιηθεί η υπηρεσία newsletter.












Τώρα αντιγράφουμε τον κωδικό, όπως φαίνεται στην παρακάτω εικόνα:






Συνδεόμαστε στον blogger λογαριασμό μας από το http://draft.blogger.com/home και από τον Πανόπτη μας, πάμε στη Σχεδίαση>Στοιχεία Σελίδας>Προσθήκη gadget>HTML/JavaScript και επικολλούμε εκεί τον κωδικό που πριν αντιγράψαμε και αποθηκεύουμε το gadget.



Στη σελίδα μας θα φαίνεται έτσι:




Επεξεργασία του κωδικού:



Ο κωδικός του gadget θα είναι κάπως έτσι:


<form style=”border:1px solid #ccc;padding:3px;text-align:center;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Ski-gr’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”><p>Enter your email address:</p><p><input type=”text” style=”width:140px” name=”email”/></p><input type=”hidden” value=”Ski-gr” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/><input type=”submit” value=”Subscribe” /><p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p></form>

(ΜΗΝ ΒΑΛΕΤΕ ΤΟΝ ΠΑΡΑΠΑΝΩ ΚΩΔΙΚΟ ΠΟΥΘΕΝΑ! ΑΥΤΟΣ ΕΙΝΑΙ Ο ΔΙΚΟΣ ΜΟΥ ΚΩΔΙΚΟΣ ΚΑΙ ΑΦΟΡΑ ΜΟΝΟ ΤΟ SKI-GR)





Σας έχω μαρκάρει κάποια σημεία που μπορείτε να αλλάξετε. Είναι εμφανές τι αλλάζει και που. Αν δεν τα πάτε καλά με κωδικούς, αφήστε τα όπως έχουν.



Τώρα πατώντας Ρυθμίσεις>Ροή Δικτυακού Τόπου, μπορείτε από το “Να επιτρέπονται οι ροές δεδομένων ιστολογίου” να επιλέξετε “Σύντομο”, αντί για “Πλήρες”.



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



Αν θέλετε στους συνδρομητές σας, να φαίνονται ολόκληρα τα ποστ σας, αφήστε το όπως έχει στο “Πλήρες”.



ΒΑΣΙΚΟ:



Εκεί που λέει “Διεύθυνση URL ανακατεύθυνσης ροής δεδομένων δημοσίευσης”, πρέπει να βάλετε την διεύθυνση του feed σας από το feedburner, ώστε να γίνεται ανακατεύθυνση του κανονικού σας feed στο feedburner feed.



Τώρα μπορείτε να αλλάξετε κάτι ή να βλέπετε τα στατιστικά του feed σας από το http://feedburner.google.com/ που θα βλέπετε το feed σας όπως βλέπω εγώ τα δυο δικά μου:



Παρακαλώ αφήστε ένα σχόλιο αν θέλετε ή κάντε “Like” σε αυτό το ποστ, από το facebook κουμπάκι που έχω λίγο πιο κάτω.


Keep Blogging!

johnpatra