Blogger Tips – Tricks – Gadgets – Templates – Hacks

Προσθέστε meta tags στο blog σας και βοηθήστε τις μηχανές αναζήτησης να το εντοπίσουν ευκολότερα



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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



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

Αυτό θα το πετύχουμε μέσω HTML, χρησιμοποιώντας meta tags.



Παρακάτω θα δείτε τη διαδικασία και θα καταλάβετε περισσότερα:



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

2. Σχεδίαση

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

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


<meta content=’DESCRIPTION HERE‘ name=’description’/>

<meta content=’KEYWORDS HERE‘ name=’keywords’/>

<meta content=’AUTHOR NAME HERE‘ name=’author’/>



5. Προσαρμόζουμε τον κώδικα στα δικά μας δεδομένα, δηλαδή:



Αντικαθιστούμε:

το “DESCRIPTION HERE” με μια περιγραφή του blog μας

το “KEYWORDS HERE” με λέξεις-κλειδιά που είναι πιθανό να “τραβήξουν” επισκέπτες και σχετίζονται, φυσικά, με το περιεχόμενο του blog μας

το “AUTHOR NAME HERE” με το όνομα ή τα ονόματα αυτών που γράφουν στο blog



Ας πάρουμε ως πρόχειρο παράδειγμα το bloggertips.gr.

Θα προσαρμόζαμε τον κώδικα ώστε να φαίνεται κάπως έτσι:


<meta content=’Blog που ασχολείται με Web design – Web services – κατασκευή νέων ιστοσελίδων‘ name=’description’/>

<meta content=’bloggertips, blogger tips and hacks, blogger gadgets, web design, web services, make money online‘ name=’keywords’/>

<meta content=’Johnpatra‘ name=’author’/>



6. Αποθήκευση προτύπου, είμαστε έτοιμοι!





Δοκιμάστε το και πείτε μας τη γνώμη σας για αυτό το tip αφήνοντας το σχόλιό σας από κάτω.





Πηγές: http://zenplate.blogspot.com/

Copyrights: http://bloggertips.gr/




Post by Secra from Web in Greece




Διαδραστικό Gadget



Print Friendly and PDFPrintPrint Friendly and PDFPDF





Δείτε το live εδώ



Απλά αντιγράψτε  τον παρακάτω κώδικα και επικολλήστε τον ως Gadget.

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











<div class=”container”>

    <div class=”labels”>

        <div id=”label1″ class=”label” ><a href=”link1″>Ζάντες</a>

            <span />

        </span></div>

        <div id=”label2″ class=”label”><a href=”link1″>Φώτα</a>

            <span />

        </span></div>

        <div id=”label3″ class=”label” ><a href=”link1″>Πινακίδα</a>

            <span />

        </span></div>

        <div id=”label4″ class=”label” ><a href=”link1″>Σήμα</a>

            <span />

        </span></div>

        <div id=”label5″ class=”label” ><a href=”link1″>Πόρτα</a>

            <span />

        </span></div>

        <div id=”label6″ class=”label” ><a href=””link1″>Καθρέφτης</a>

            <span />

        </span></div>

    </div>

   

    </div>





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

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js”></script>





<style>

.container {

    background: url(http://oi49.tinypic.com/2h51kk4.jpg) no-repeat scroll center top transparent;

    color: #000000;

    height: 535px;

    margin: 20px auto;

    overflow: hidden;

    position: relative;

    width: 1030px;

}



.dialog {

    background-color: rgba(163, 154, 77, 0.9);

    color: #FFFFFF;

    display: none;

    height: 140px;

    left: 343px;

    line-height: 24px;

    padding: 100px 30px;

    position: absolute;

    text-align: center;

    top: 97px;

    width: 280px;

    z-index: 10;



    -moz-border-radius: 170px;

    -ms-border-radius: 170px;

    -o-border-radius: 170px;

    -webkit-border-radius: 170px;

    border-radius: 170px;

}

.dialog .close {

    color: black;

    background-color: #65683b;

    cursor: pointer;

    font-size: 22px;

    font-weight: bold;

    height: 36px;

    line-height: 36px;

    position: absolute;

    right: 10px;

    top: 60px;

    width: 36px;



    -moz-border-radius: 18px;

    -ms-border-radius: 18px;

    -o-border-radius: 18px;

    -webkit-border-radius: 18px;

    border-radius: 18px;

}

.labels p {

    display: none;

}

.labels div {

    background-color: rgba(203, 189, 58, 0.8);

    color: #FFFFFF;

    display: none;

    height: 50px;

    padding: 30px 0 0;

    position: absolute !important;

    text-align: center;

    text-decoration: none;

    width: 80px;



    -moz-border-radius: 40px;

    -ms-border-radius: 40px;

    -o-border-radius: 40px;

    -webkit-border-radius: 40px;

    border-radius: 40px;

}

.labels > div {

    background-color: rgba(203, 189, 58, 0.8);



    -moz-transition: .3s;

    -ms-transition: .3s;

    -o-transition: .3s;

    -webkit-transition: .3s;

    transition: .3s;

}

.labels div:hover {

    background-color: rgba(128, 128, 128, 0.8);

}

.labels div span {

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;

    border-top: 15px solid rgba(203, 189, 58, 0.8);

    bottom: -14px;

    height: 0;

    left: 30px;

    position: absolute;

    width: 0;



    -moz-transition: .3s;

    -ms-transition: .3s;

    -o-transition: .3s;

    -webkit-transition: .3s;

    transition: .3s;

}

.labels div:hover span {

    border-top: 15px solid rgba(128, 128, 128, 0.8);

}

#label1 {

    left: 720px;

    top: 181px;

}

#label2 {

    left: 495px;

    top: 183px;

}

#label3 {

    left: 165px;

    top: 260px;

}

#label4 {

    left: 270px;

    top: 178px;

}

#label5 {

    left: 845px;

    top: 85px;

}

#label6 {

    left: 239px;

    top: 50px;

}

</style>





<script>



jQuery(function(){

    // initialize of labels

    $(‘.labels div#label1’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

        $(‘.labels div#label2’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

            $(‘.labels div#label3’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

                $(‘.labels div#label4’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

                    $(‘.labels div#label5’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

                        $(‘.labels div#label6’).fadeIn(100).effect(‘bounce’, { times:3 }, 300);

                    });

                });

            });

        });

    });



    // dialog close

    $(‘.dialog .close’).click(function() {

        $(this).parent().fadeOut(500);

        return false;

    });



    // display dialog on click by labels

    $(‘.labels div’).click(function() {

        $(‘.dialog p’).html( $(this).find(‘p’).html() ).parent().fadeIn(500);

        return false;

    });



    // close dialog on click outside

    $(‘.container’).click(function() {

        $(‘.dialog’).fadeOut(500);

    });

});

</script>







Copyrights: /







Αυτόματο 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: /




Οριζοντιο menu-μπαρα με links



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πρόκειται για μια μπάρα-menu με links-συνδέσμους που τοποθετείται συνήθως κάτω από την επικεφαλίδα της σελίδας σας.



Εγκαθιστάται σαν απλό gadget.

 Ο κώδικας html του είναι:


<style type=”text/css”>
body {
margin:0;
padding:0;
font: bold 14px Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
margin: 0px;
padding: 0px 0px 0px 15px;
}
/*- Menu Tabs H————————— */
#tabsH {
float:left;
width:100%;
font-size:95%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:0px 5px 0 0px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url([get_bloginfo]url[/get_bloginfo]/wp-content/themes/ctooem437d87yvdblwpns116496/files/search/label/tablefth.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url(https://lh5.googleusercontent.com/-muwyDaV_THM/T8mHdxUM2DI/AAAAAAAAU04/BCkIxTvkWHo/h86/tabrightH.gif) no-repeat right top;
padding:5px 5px 6px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
</style>
<div id=”tabsH”>
<ul>
<li><a href=”/” ><span>category 1</span></a></li>
<li><a href=”/” ><span>category 2</span></a></li>
<li><a href=”/” ><span>category 3</span></a></li>
<li><a href=”/” ><span>category 4</span></a></li>
<li><a href=”/” ><span>category 5</span></a></li>
<li><a href=”/” ><span>category 6</span></a></li>
<li><a href=”/” ><span>category 7</span></a></li>
<li><a href=”/” ><span>category 8</span></a></li>
</ul>
</div>



όπου βλέπετε / βάζετε το δικό σας link

και όπου λέει category βάζετε το όνομα που θέλετε να εμφανίζεται.



καταλαβαίνετε πως μπορείτε να προσθέσετε ή να αφαιρέσετε κατηγορίες



αν σας άρεσε κάντε ένα like στη σελίδα μας στο facebook



 Copyrights: /




Mobile Version του blog σας!



Print Friendly and PDFPrintPrint Friendly and PDFPDF



Γιατί Mobile Version?


(1)Ταχύτερη Φόρτωση Σελίδας:
Επειδή έχει σχεδιαστεί ειδικά για τις διαστάσεις και τα πρότυπα των mobile browsers,οι χρόνοι φόρτωσης μειώνονται δραματικά
 
(2)Ανταγωνιστικό πλεονέκτημα:
Με μια ιστοσελίδα για κινητά, έχετε ένα επιπλέον τρόπο για να διακρίνετε από τη μάζα. Όταν οι πελάτες κινητής τηλεφωνίας βρεθούν στον διαδικτυακό σας τόπο και σε αυτόν των ανταγωνιστών σας,μόνο από τη δική σας θα καταφέρουν να αντλήσουν πληροφορίες.
 
(3)Χρονικά Μεγαλύτερες Επισκέψεις:
Η πιο συχνή αντίδραση των επισκεπτών ,μέσω κινητού, είναι να εγκαταλείψουν τον ιστότοπο που αργεί να φορτώσει.Με το σχεδιασμό ενός site που είναι φιλικό προς κινητές συσκευές, θα ενθαρρύνετε τους επισκέπτες να μείνουν, κάνοντας κλικ πάνω σε σελίδες περιεχομένου.
  
 

Ιδέες και συμβουλές για το Mobile Version του site σας.



(1)Αυτόματη ανακατεύθυνση:

Ιδανικά, η Mobile Version της ιστοσελίδας σας φορτώνει αυτόματα για τους χρήστες σε κινητές συσκευές.



(2)Σκεφτείτε απλά:

Η αρχική σελίδα της παραδοσιακής ιστοσελίδα σας μπορεί να έχει μια επικεφαλίδα πλοήγησης, μια πλαϊνή μπάρα, πολλαπλές στήλες, και ούτω καθεξής. Η αρχική σελίδα του ιστότοπού σας για κινητά πρέπει να είναι απλούστερη. Αντί να προσπαθεί να επαναλάβει ολόκληρη την ιστοσελίδα σαςπρέπει να επικεντρωθεί στις πιο κεντρικές πληροφορίες του ιστότοπού σας.



(3)Σχέση με παραδοσιακή τοποθεσία:

Για τους αναγνώστες που θέλουν περισσότερες λεπτομέρειες, πρέπει να παρέχεται μια σύνδεση με την desktop έκδοση του site σας. Με αυτό τον τρόποόλες οι πληροφορίες είναι ακόμα διαθέσιμες για όποιον θέλει.



(4)Να ειστε γρήγοροι:

Οι χρόνοι φόρτωσης είναι ζωτικής σημασίας για κινητές συσκευές, οπότε βεβαιωθείτε ότι το site σας φορτώνει μέσα σε λίγα δευτερόλεπτα. Ελαχιστοποιήστε μεγέθη εικόνας, καθώς και JavaScript και CSS αρχεία, ώστε να κάνετε το site σας να τρέξει γρήγορα.



(5)ΣκεφτείτεTouch”:

Χάρη σε smartphones,η αφή είναι ο νέος τρόπος για να σερφάρετε στα site. Με αυτό κατά νου,σχεδιάστε το site σας με αναπτυσσόμενο μενού και προσυμπληρωμένα πεδία όταν είναι δυνατόν.



Copyrights: /




Αυτόματο Read More (2) Στις Αναρτήσεις, Χωρίς Να Χωρίζει Τις Στατικές Σελίδες Του Blogger !!!



Print Friendly and PDFPrintPrint Friendly and PDFPDF



Στο /2009/07/read-more-blog.html γράφω τον κλασσικό, χειροκίνητο τρόπο προσθήκης του “διαβάστε περισσότερα” στις αναρτήσεις μας.





Στο /2010/03/automatic-read-more-function-in-blogger.html γράφω τον αυτόματο τρόπο προσθήκης του “διαβάστε περισσότερα” στις αναρτήσεις μας, που έχει πρόβλημα όμως στις στατικές σελίδες του blogger.





Έχω γράψει επίσης στο /2011/03/read-more-button.html πως μπορούμε να βάλουμε εικόνα αντί για κείμενο στο “διαβάστε περισσότερα”.


Σήμερα θα πω, πως βάζουμε ένα αυτόματο read more -όπως αυτό που έχω πει ήδη-, με τη μόνη διαφορά ότι αυτό το read more δεν χωρίζει τις στατικές σελίδες του blogger, αλλά μόνο τις αναρτήσεις. Έτσι θα έχετε και αυτόματο read more ΚΑΙ στατικές σελίδες στον blogger.



Με αυτή την ανάρτηση λοιπόν, νομίζω ότι κλείνει οριστικά για μένα το θέμα των “διαβάστε περισσότερα”.


ΓΙΑ ΤΗΝ ΠΡΟΣΘΗΚΗ ΤΟΥ ΑΚΟΛΟΥΘΗΣΤΕ ΤΑ ΠΑΡΑΚΑΤΩ ΒΗΜΑΤΑ:



1. Σύνδεση> Πανόπτης> Σχεδίαση> Επεξεργασία html> Επέκταση προτύπων γραφικών στοιχείων

2. Με τη βοήθεια του ctrl+F πάντα, βρίσκετε το </head> και πριν από αυτό, επικολλήτε τον παρακάτω κώδικα:


<script type=’text/javascript’>var thumbnail_mode = “no-float” ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 100;

img_thumb_width = 120;

</script>

<script type=’text/javascript’>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf(“<“)!=-1)

{

var s = strx.split(“<“);

for(var i=0;i<s.length;i++){

if(s[i].indexOf(“>”)!=-1){

s[i] = s[i].substring(s[i].indexOf(“>”)+1,s[i].length);

}

}

strx = s.join(“”);

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=’ ‘ && strx.indexOf(‘ ‘,chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+’…’;

}



function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = “”;

var img = div.getElementsByTagName(“img”);

var summ = summary_noimg;

if(img.length>=1) {

imgtag = ‘<span style=”float:left; padding:0px 10px 5px 0px;”><img src=”‘+img[0].src+'” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px”/></span>’;

summ = summary_img;

}



var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;

div.innerHTML = summary;

}





//]]>

</script>



Στον παραπάνω κώδικα μπορείτε να αλλάξετε τις εξής αριθμητικές μεταβλητές (σε pixels):



summary_noimg = 430; το ύψος της ανάρτησης ΧΩΡΙΣ την εικόνα

summary_img = 340; το ύψος της ανάρτησης ΜΕ την εικόνα

img_thumb_height = 100; το ύψος της εικόνας

img_thumb_width = 120; το πλάτος της εικόνας



Η επεξεργασία αυτών των μεταβλητών είναι παρόμοια με αυτήν στο /2010/03/automatic-read-more-function-in-blogger.html



3. Τώρα βρείτε το <data:post.body/> και αντικαταστήστε αυτόν τον κωδικό με τον παρακάτω:


<b:if cond=’data:blog.pageType == "static_page"’><br/>

<data:post.body/>

<b:else/>



<b:if cond=’data:blog.pageType != “item”‘>



<div expr:id='”summary” + data:post.id’><data:post.body/></div>

<script type=’text/javascript’>createSummaryAndThumb(“summary<data:post.id/>”);

</script> <span class=’rmlink’ style=’float:right;padding-top:20px;’><a expr:href=’data:post.url’> read more “<data:post.title/>”</a></span>



</b:if>

<b:if cond=’data:blog.pageType == “item”‘><data:post.body/></b:if>

</b:if>



Το read more μπορείτε να το αλλάξετε φυσικά.



4. Προεπισκόπηση, Αποθήκευση κι είστε έτοιμοι!


Άσχετο:


Κατά τη διάρκεια της συγγραφής της παραπάνω ανάρτησης, άκουγα το παρακάτω τραγούδι:










Πηγές: http://www.vietwebguide.com/2008/08/to-read-more-c-tip-mt-cch-t-ng-ver-20-h.html
Copyrights: /




Αυτόματο slider εναλλαγής των 20 τελευταίων αναρτήσεων – Automatic Blogger Slideshow



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Η παρακάτω ανάρτηση αποτελεί προσφορά του Γλυφάδα web!

Μπορείτε κι εσείς να στέλνετε έξυπνα blogger hacks στο help@bloggertips.gr



Πρόκειται για ένα αυτόματο slider το οποίο παρουσιάζει τις 20 πιο πρόσφατες αναρτήσεις με τίτλους, χωρίς να χρειάζεται καμία άλλη παρέμβαση πλήν της αρχικής Προσθήκης του gadget HTML/Javascript. Δηλαδή είναι απίστευτα εύκολο να το βάλετε!



Ενα demo του Automatic content slider υπάρχει στην παρακάτω διεύθυνση ωστε να το δείτε σε λειτουργία.



http://news-glyfadaweb.blogspot.com/




Για να το βάλετε ακολουθήστε τα παρακάτω αριθμημένα βήματα:



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



2. Σχεδίαση>Στοιχεία σελίδας>Προσθήκη gadget>HTML/Javascript



3. Εδώ επικολλούμε τον παρακάτω κώδικα




<div style=”BORDER-BOTTOM: #000000 5px solid; BORDER-LEFT: #000000 0px solid; PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BACKGROUND: #000000; BORDER-TOP: #000000 0px solid; BORDER-RIGHT: #000000 5px solid; PADDING-TOP: 5px”>

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



<style type=”text/css” media=”screen”>

<!– #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:395px; } #spylist ul{ width:650px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:640px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:395px; overflow: hidden; background:#000000 url() repeat-x; border:1px solid #000000; } #spylist li a { text-decoration:none; color:#ffc042; font-size:18px; height:0px; overflow:hidden; margin:0px 0px; padding:0px 0px 0px 0px; } #spylist li img { float:left; margin-right:0px; background:#000000; border:0; } .spydate{ overflow:hidden; font-size:12px; color:#cd1713; padding:2px 0px; margin:1px 0px 0px 0px; height:15px; font-family:Tahoma,Arial,verdana, sans-serif; } .spycomment{ overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:12px; color:#cd1713; padding:0px 0px; margin:0px 0px; } –>

</style>



<script language=”javascript”>

imgr = new Array();

imgr[0] = “http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;

imgr[1] = “http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;

imgr[2] = “http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;

imgr[3] = “http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;

imgr[4] = “http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;

showRandomImg = true;

boxwidth = 630;

cellspacing = 0;

borderColor = “#000000”;

bgTD = “#000”;

thumbwidth = 640;

thumbheight = 330;

fntsize = 30;

acolor = “#000”;

aBold = true;

icon = ” “;

text = “GlyfadA web”;

showPostDate = true;

summaryPost = 20;

summaryFontsize = 10;

summaryColor = “#ffffff”;

icon2 = ” “;

numposts = 20;

home_page = “http://www.glyfadaweb.gr/”;

limitspy=1

intervalspy=9000

</script>



<div id=”spylist”>

<script type=”text/javascript” src=”http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js”></script>

</div></div>



Τέλος να σημειώσω οτι είναι απόλυτα παραμετροποιήσιμο όσων αφορά τις διαστάσεις απεικόνισης και το μέγεθος των τίτλων, και αυτό που πρέπει να γίνει αμέσως μετά την τοποθέτηση είναι η αλλαγή της διεύθυνσης του URL, ώστε να φαίνονται οι δικές σας τελευταίες 20 αναρτήσεις.



home_page = “http://www.glyfadaweb.gr/“;



Αλλαγή με την δική σας διεύθυνση.



Κατά τη συγγραφή της παραπάνω ανάρτησης, άκουγα το παρακάτω -τούρκικο- τραγούδι:







Αυτή η ανάρτηση ήταν προσφορά του Glyfada Web τον οποίον και ευχαριστούμε. Μπορείτε να επικοινωνήσετε μαζί του μέσω του glyfadaweb@gmail.com



Όποιος θέλει επίσης να συνεισφέρει, μπορεί να στέλνει τις αναρτήσεις του στο help@bloggertips.gr μαζί με το όνομα και το link του blog του.



Copyrights: /




Αυτόματος εντοπισμός της εικόνας ανάρτησης κατά το share στο facebook



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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




Αναρωτηθείτε μισό λεπτό, πόσες φορές θελήσατε να ποστάρετε κάτι στο facebook και σας έβγαζε μια “άκυρη” σε σχέση με το θέμα σας φωτογραφία;



Αυτό που θα προσπαθήσουμε να κάνουμε σήμερα είναι να θέσουμε μια συγκεκριμένη εικόνα η οποία θα εμφανίζεται όταν κάποιος ποστάρει στο facebook κάτι (δηλαδή κάποιο link) που οδηγεί στη σελίδα σας. Και αυτό θα το πετύχουμε με τα meta tags, για τα οποία έχουμε μιλήσει παλαιότερα.



Αυτή η συγκεκριμένη εικόνα δε θα είναι άλλη φυσικά από την εικόνα που περιλαμβάνεται στην ανάρτηση στο blog σας!



Λοιπόν, η διαδικασία είναι σχετικά απλή και γρήγορη:



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

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

3. Με Ctrl + F αναζητούμε το </head> και μετά από αυτό, δηλαδή ακριβώς από κάτω κάνουμε επικόλληση τον παρακάτω κώδικα:


<b:if cond=’data:blog.postImageThumbnailUrl’>

<meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>

<b:else/>

<meta content=’http://www.yooter.com/images/pagenotfound.jpg‘ property=’og:image’/>

</b:if>



Μπορείτε να αλλάξετε την εικόνα που έχω σε επισημάνει με αυτόν τον τρόπο –>τρόπος<– με κάποια της επιλογής σας (είναι η προ-επιλεγμένη εικόνα που θα εμφανίζεται όταν δεν έχετε προσθέσει εικόνα στην ανάρτησή σας).



4. Αποθήκευση προτύπου και είστε έτοιμοι!



Πηγή

Copyrights: /




Post by Secra from Web Reviews




Το BloggerTips πρώτο ανακοινώνει την υποψία του για εισαγωγή Reply Button στα σχόλια του Blogger



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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




Πώς θα σας φαινόταν να έχετε τη δυνατότητα απάντησης στα σχόλια του blogger;



Αυτό που θέλουμε να μοιραστούμε σήμερα με όλους εσάς είναι κάτι αποκλειστικό που παρατηρήσαμε εδώ στο BloggerTips και πιστεύουμε πως είναι άξιο αναφοράς.



Έχουμε να κάνουμε λοιπόν με το παρακάτω κομμάτι κώδικα…

.comments .comments-content .comment-replies {

margin-top: 1em;

margin-left: 36px;

}

.comments .comments-content .comment:first-child {

padding-top:16px;

}

.comments .comments-content .comment:last-child {

border-bottom:0;

padding-bottom:0;

}

.comments .comments-content .comment-body {

position:relative;

}

.comments .comments-replybox {

border: none;

height: 250px;

width: 100%;

}

.comments .comment-replybox-single {

margin-top: 5px;

margin-left: 48px;

}

.comments .comment-replybox-thread {

margin-top: 5px;

}

.comments .comments-content .loadmore a {

display: block;

padding: 10px 16px;

text-align: center;

}

…το οποίο, αν προσέξουμε τις ονομασίες των στοιχείων που έχουμε υπογραμμισμένα, μας προετοιμάζει για την επίσημη εισαγωγή του reply button σε όλα τα πρότυπα του blogger (σημ.: το παραπάνω κομμάτι κώδικα το εντοπίσαμε εμείς σε πολύ πρόσφατα δημιουργημένο blogger blog), με δυνατότητα μαρκαρίσματος κάθε σχολίου που απαντάται, φυσικά.



Δεν έχει ανακοινωθεί το παραμικρό από μεριάς Blogger προς το παρόν και για αυτό αναφερόμαστε στο γεγονός ως κάτι αποκλειστικό. Το μόνο που έχουμε είναι ενδείξεις (που μας κάνουν να είμαστε σίγουροι σε μεγάλο ποσοστό, παρ ‘όλα αυτά, για ό,τι υποστηρίζουμε).



Σε περίπτωση που δεν επαληθευτούμε, εννοείται πως θα είμαστε εδώ διαθέσιμοι και πρόθυμοι να κριθούμε.



Έχουμε δει και δημοσιεύσει κατά καιρούς διάφορα κόλπα με τα οποία μπορείτε να προσθέσετε τέτοιο κουμπάκι στο blog σας, αλλά όλοι οι τρόποι είναι “μπακαλίστικοι” και φυσικά δεν εξυπηρετούν ακριβώς αυτό που θα θέλαμε.



Πώς θα σας φαινόταν αλήθεια ένα reply button για τα σχόλια στο blogger;



Copyrights: /




Πώς να γράψεις μια καλή ανάρτηση (How to write good posts)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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




Σήμερα θα ασχοληθούμε με ένα θέμα που πιστεύω πως απασχολεί τους περισσότερους (αν όχι όλους τους) blogger και αυτό είναι η συγγραφή καλών άρθρων στα blog μας.



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


Σύντομοι και ελκυστικοί τίτλοι

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


Εικόνες

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


Παράγραφοι

Άλλος ένας σημαντικός παράγοντας που κάνει κάθε ανάρτηση πιο ευανάγνωστη είναι η χρήση παραγράφων. Από μικροί έχουμε μάθει στο σχολείο πως “η παράγραφος είναι το αυτοτελές κείμενο που διαθέτει ενότητα νοηματικά και συνδέεται στενά με το συνολικό κείμενο”. Η εικόνα ενός κατεβατού κειμένου αποθαρρύνει το μέσο χρήστη ο οποίος, αν κρίνω και από τον εαυτό μου, δε θα κάτσει να παιδευτεί, απλά θα πατήσει το κουμπάκι “Χ“.


Φυσιολογικό μέγεθος γραμματοσειράς

Ναι, υπάρχει το ζουμ. Αλλά υπάρχουν άτομα που είτε δεν ξέρουν πως να το αλλάξουν είτε δε θα ασχοληθούν καν με το να το αλλάξουν και θα περάσουν στην επόμενη σελίδα. Τα κείμενά σας πρέπει να είναι “προσφέρονται” για διάβασμα, με την έννοια του ότι πρέπει να μην αποτελούνται από πολύ μικρή γραμματοσειρά, αλλά ούτε και από τεράστια γράμματα. Πρέπει για ακόμη μια φορά να βρείτε κάτι ενδιάμεσο, μια ενδιάμεσου μεγέθους γραμματοσειρά, καθαρή και ευανάγνωστη.


Χαιρετισμός – Φιλικό ύφος

Φροντίστε να μην είστε “ψυχροί” προς τους αναγνώστες σας. Καλό είναι να ξεκινάτε κάθε νέα σας ανάρτηση με κάποιο φιλικό χαιρετισμό, χειρονομία που θα κάνει τον αναγνώστη να νιώσει κάπως πιο “ζεστά” στη σελίδα σας και να περιηγηθεί μέσα σε αυτή με μεγαλύτερη άνεση.


Τεράστιες αναρτήσεις

Πρέπει να τις αποφύγετε! Δε χρειάζεται να γράφετε τεράστιες αναρτήσεις. Όχι επειδή θα κουραστείτε, αλλά επειδή απλά είναι πολύ πιθανό να μη διαβαστούν ποτέ (ολόκληρες, τουλάχιστον)! Μπείτε στη θέση του αναγνώστη και αναρωτηθείτε αν θα καθόσασταν να διαβάσετε μια ανάρτηση-βιβλίο σχετικά με κάποιο θέμα. Αν εν πάση περιπτώσει έχετε τη διάθεση να μοιραστείτε τεράστιους όγκους πληροφοριών με το κοινό σας, μοιραστείτε τις σιγά-σιγά, χωρίζοντας το θέμα σας σε μικρότερες, πιο σύντομες αναρτήσεις. Αυτό βοηθάει γιατί 1) οι αναγνώστες βλέπουν πως το blog σας ανανεώνεται συχνά και 2) τα μικρά post είναι, όπως αναφέραμε προηγούμενα, πιο ελκυστικά.


Μην ξεφύγετε από το θέμα

Έχει τύχει πολλές φορές (και τη στιγμή που γράφω αυτό το κείμενο ακόμη το παλεύω) να παρασυρθώ από αυτό που θέλω πραγματικά να γράψω και να καταλήγω στο να γράφω… άλλα ντ ‘άλλων! Προσπαθήστε να παραμένετε συγκεντρωμένοι στο θέμα για το οποίο θέλετε να γράψετε και να μην επηρεάζεστε από άλλα θέματα που μπορεί να σας κινήσουν το ενδιαφέρον κατά τη διάρκεια της συγγραφής. Ανοίξτε έναν επεξεργαστή κειμένου σε πλήρη οθόνη και παραμείνετε σε αυτόν μέχρι να τελειώσετε το κείμενό σας. Σε αντίθετη περίπτωση, οι αναγνώστες θα μπερδευτούν αφού θα διαβάσουν για δέκα ή περισσότερα πράγματα σε μία ανάρτηση και θα έχουν χάσει τελικά το νόημα. Το κυριότερο: Δεν τους έχετε περάσει το μήνυμα που θέλετε, άρα ο σκοπός της ανάρτησης προφανώς και απέτυχε.


Σύνδεσμοι (links)

Last but not least όπως λένε και οι (φίλοι μας οι) Άγγλοι… Προσπαθήστε να κάνετε τα κείμενα που γράφετε να αλληλεπιδρούν μεταξύ τους συνδέοντάς τα μεταξύ τους με συνδέσμους (links). Αυτό θα βοηθήσει τη σελίδα σας τόσο από άποψη επισκεψιμότητας, μιας που οι αναγνώστες θα μεταπηδούν από το ένα άρθρο στο άλλο, όσο και από άποψη SEO (προσαρμογή της σελίδας σας στις μηχανές αναζήτησης). Για ακόμη μια φορά πρέπει όμως να προσέξουμε να μην το παρακάνουμε (θυμηθείτε πως πίσω από τον υπολογιστή είναι κάποιος άλλος άνθρωπος και όχι ένα ρομπότ).



Οι παραπάνω είναι οι προτάσεις/συμβουλές μου για το πώς να γράφετε καλά, ποιοτικά άρθρα στα blog σας. Όπως τόνισα στην αρχή είναι καθαρά υποκειμενικές απόψεις και περιμένω τα σχόλιά σας πάνω στο θέμα.

Τι προσέχετε εσείς όταν γράφετε και τι συμβουλές θα δίνατε σε μένα και στους υπόλοιπους blogger για τη βελτίωση των άρθρων μας;



Copyrights: /



Post by Secra from Web Reviews




Πώς να προσθέσετε περισσότερες από 20 στατικές σελίδες στο blog σας (How to add more than 20 static pages on your blog)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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




Σήμερα θα δούμε πώς μπορούμε να δημοσιεύσουμε στο blog μας περισσότερες από 20 στατικές σελίδες (το 20 είναι το ανώτατο όριο, ενώ πριν λίγο καιρό ίσχυε το όριο των 10).



Είναι μια απλή αλλά σχετικά χρονοβόρα διαδικασία, η οποία θα χρειαζόταν εκατοντάδες σειρές (μπορεί και να υπερβάλλω, θα μου πείτε εσείς στο τέλος) για να σας την εξηγήσω βήμα-βήμα και εγώ δεν προτίθεμαι να κάτσω να γράψω ένα ολόκληρο κατεβατό, που, στο κάτω-κάτω, μπορεί να είναι και δυσκολότερο για εσάς τους ίδιους να το κατανοήσετε.



Οπότε έκατσα και σας ετοίμασα ένα βίντεο στο οποίο φαίνεται καθαρά η όλη διαδικασία και τα βήματα που ακολουθούμε για να “ξεγελάσουμε” (;) το blogger και να δημοσιεύσουμε περισσότερες από 20 στατικές σελίδες.



Μερικά πράγματα που θα χρειαστεί να γνωρίζετε ή να κάνετε πριν δείτε το βίντεο:



-Χρειάζεται να έχετε ανοιχτό κάποιον κειμενογράφο, π.χ. notepad ή wordpad (εγώ χρησιμοποιώ αυτό).

-Στο βίντεο, οι μπλε δακτύλιοι που θα εμφανιστούν σε ορισμένα σημεία σημαίνουν πως εγώ έκανα δεξί κλικ σε αυτά τα σημεία (στα αριστερά κλικ επέλεξα να μη φαίνεται κάτι, καθώς είναι πολλά).

-Πρέπει να έχετε ήδη δημοσιεύσει 20 σελίδες στο blog σας (δε χρειάζεται να φαίνονται στην αρχική σελίδα, αλλά πρέπει να είναι σίγουρα δημοσιευμένες).



Δείτε το βίντεο:

(1. Η μουσική είναι απλά για ψυχαγωγία, εγώ δε λέω κάτι στο βίντεο οπότε αν σας ενοχλεί απενεργοποιήστε τον ήχο από τον player.

2. Το βίντεο φαίνεται καλύτερα σε 720p και πλήρη οθόνη [fullscreen].)



Πώς σας φάνηκε;



Παρακαλώ σεβαστείτε τον κόπο μου για τη δημιουργία του βίντεο, και κατά συνέπεια τα copyrights της ανάρτησης.



Copyrights: /

Post by Secra from WebRev.gr




Print Friendly & PDF Button for your blogger posts



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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

Σήμερα θα δούμε ένα ακόμη ενδιαφέρον tip, το “Print Friendly & PDF Button“, μέσω του οποίου οι αναγνώστες σας θα μπορούν να εκτυπώνουν τις αναρτήσεις σας ή να τις κατεβάζουν στον υπολογιστή τους σε μορφή pdf.



Διαδικασία:



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

2. Σχεδίαση

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

4. Επέκταση προτύπων γραφικών στοιχείων

5. Με “Ctrl + F” αναζητούμε το “<div class=’post-footer’>” (αν εμφανίζει δυο αποτελέσματα, μας ενδιαφέρει το πρώτο) και αμέσως μετά από αυτό επικολλούμε τον παρακάτω κώδικα:


<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’>

<a class=’printfriendly’ expr:href=’data:post.url + "?pfstyle=wp"’ style=’ color:#6D9F00; text-decoration:none;’ title=’Printer Friendly and PDF’>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-print-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>Print</span>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-pdf-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>PDF</span></a><b:else/>

<script src=’http://cdn.printfriendly.com/printfriendly.js’ type=’text/javascript’/>

<a class=’printfriendly’ href=’http://www.printfriendly.com’ onclick=’window.print(); return false;’ style=’ color:#6D9F00; text-decoration:none;’ title=’Printer Friendly and PDF’>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-print-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>Print</span>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-pdf-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>PDF</span></a></b:if>

</b:if>



(Αν αφήσετε τον κώδικα όπως είναι, τα κουμπιά δε θα εμφανίζονται στην αρχική σελίδα αλλά μόνο στις σελίδες των αναρτήσεων. Αν θέλετε τα κουμπιά να εμφανίζονται και στην αρχική σελίδα, σβήνετε τις 2 σειρές που επισήμανα με έντονη γραφή -bold-)



6. Αποθήκευση προτύπου και είμαστε έτοιμοι!



Μπορείτε να δείτε πως θα εμφανίζονται τα κουμπιά κάτω από τον τίτλο της παρούσας ανάρτησης.



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

Παρακάτω θα σας δώσω 3 κουμπιά και διαλέγετε όποιο θέλετε. Κάθε κουμπί συνοδεύεται από τον κώδικά του και για να το προσθέσετε απλά βάζετε τον κώδικά του αντί του κώδικα που σας έδωσα στο βήμα 5!





Κώδικας:

<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’><a expr:href=’data:post.url + "?pfstyle=wp"’ style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a></b:if>

</b:if>





Κώδικας:

<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’><a expr:href=’data:post.url + "?pfstyle=wp"’ style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/button-print-grnw20.png" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/button-print-grnw20.png" alt="Print Friendly and PDF"/></a></b:if>

</b:if>





Κώδικας:

<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’><a expr:href=’data:post.url + "?pfstyle=wp"’ style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf_button_sq_grn_l.png" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf_button_sq_grn_l.png" alt="Print Friendly and PDF"/></a></b:if>

</b:if>



Πηγή: Οι κωδικοί είναι από το: http://www.printfriendly.com/button

Copyrights: /




Post by Secra from Web in Greece




Προσθήκη τίτλου ανάρτησης δίπλα στο ‘Read More’!



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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




Έχουν γραφτεί κατά καιρούς αναρτήσεις [1, 2, 3] που έχουν να κάνουν με το “read more”, δηλαδή τη δυνατότητα που έχουμε να “κόβουμε” τις αναρτήσεις της αρχικής σελίδας, έτσι ώστε να μην πιάνουν τόσο χώρο και να μην αργεί η φόρτωση της σελίδας μας.



Συνήθως, στην αρχική σελίδα, έχουμε μια μικρή περίληψη της ανάρτησης και από κάτω ένα link που λέει κάτι σαν “Συνέχεια του άρθρου”, “Διαβάστε περισσότερα” κ.ο.κ.



Σήμερα θα δούμε πως, μαζί με το “Διαβάστε περισσότερα”, θα εμφανίζεται δίπλα και ο τίτλος της κάθε ανάρτησης. (DEMO)



Διαδικασία:



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

2. Σχεδίαση

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

4. Επέκταση προτύπων γραφικών στοιχείων

5. Πατώντας Ctrl + F αναζητούμε τον παρακάτω κώδικα…

<b:if cond=’data:post.hasJumpLink’>

<div class=’jump-link’>

<a expr:href=’data:post.url + "#more"’ expr:title=’data:post.title’><data:post.jumpText/></a>

</div>

</b:if>

… και τον αντικαθιστούμε με τον παρακάτω:

<b:if cond=’data:post.hasJumpLink’>

<div class=’jump-link’>

<a expr:href=’data:post.url + "#more"’ expr:title=’data:post.title’><data:post.jumpText/> <data:post.title /></a>

</div>

</b:if>



(Αν δε βρείτε τον πρώτο κωδικό, δοκιμάστε να αναζητήσετε αρχικά μόνο την πρώτη σειρά και έτσι θα βρείτε τον υπόλοιπο. Αν δεν τον βρείτε πάλι, είτε τον διαγράψατε ή τον επεξεργαστήκατε παλιότερα είτε δεν υπάρχει στο πρότυπο που έχετε.)



6. Πατήστε “Προεπισκόπηση” και αν είναι όλα καλά αποθηκεύετε το πρότυπό σας.



Αυτό ήταν όλο!



Πηγή: http://www.bloggerbuster.com/2011/04/how-to-add-post-titles-to-read-more.html

Copyrigths: /




Post by Secra from Web in Greece




Δημιουργία και προσθήκη φόρμας επικοινωνίας (contact form) στο blog σας βήμα-βήμα



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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

Σήμερα θα δούμε πως μπορείτε να δημιουργήσετε και να προσθέσετε μια φόρμα επικοινωνίας (contact form) στο blog σας.



Υπάρχουν πολλές ιστοσελίδες που επιτελούν αυτή τη λειτουργία.

Εμείς θα χρησιμοποιήσουμε τη σελίδα emailmeform.com, η οποία είναι μία από τις καλύτερες, πλην δυσκολότερες στο είδος της.

Ένα παράδειγμα για το πως θα δείχνει η φόρμα επικοινωνίας που θα προσθέσετε μπορείτε να δείτε στο Web in Greece, blog παρουσιάσεων ιστοσελίδων (ανοίγει σε νέα καρτέλα!).


Δημιουργία Φόρμας Επικοινωνίας:



1. Μπαίνουμε στην αρχική σελίδα του EmailMeForm.

Πρέπει να κάνουμε εγγραφή για να συνεχίσουμε, οπότε κάνουμε κλικ στο:



2. Στη σελίδα που θα μας εμφανιστεί, συμπληρώνουμε τα στοιχεία που ζητάει και κάνουμε κλικ στο “I agree to EmailMeForm Terms of Service”.




3. Αφού κάνουμε τα παραπάνω, κάνουμε κλικ στο:



4. Λογικά θα μας εμφανιστεί η παρακάτω σελίδα, η οποία μας ευχαριστεί και μας λέει να τσεκάρουμε το e-mail μας για να ενεργοποιήσουμε το λογαριασμό μας.




5. Συνδεόμαστε στο e-mail μας, ανοίγουμε το μήνυμα από το EmailMeForm (ψάξτε στα ανεπιθύμητα/spam αν δεν το δείτε στα εισερχόμενα) και κάνουμε κλικ στο μοναδικό link που περιέχεται στο μήνυμα, το οποίο θα μοιάζει με αυτό:

http://www.emailmeform.com/builder/account/signup_confirm/1fd9FiR7heLaopk6bZDY93raySE73n4Wc



6. Αφού κάνουμε κλικ στο link που είπαμε παραπάνω, η σελίδα που θα εμφανιστεί μας λέει πως έγινε η ενεργοποίηση του λογαριασμού μας. Επιπλέον, στο μήνυμα που θα εμφανιστεί λέει “Please click here to go into your Form Manager”. Κάνουμε κλικ στο “here” και συνεχίζουμε.




7. Στη σελίδα που θα εμφανιστεί, κάνουμε κλικ στο: και στη συνέχεια κάνουμε κλικ στην πρώτη επιλογή “Go to the Template section. I’d like to choose from a list of pre-made forms” για να διαλέξουμε μια φόρμα από τις ήδη υπάρχουσες.



8. Από το μενού αριστερά, φροντίζουμε να είναι επιλεγμένο το “Contact Form” και πατάμε:




9. Λογικά εμφανίζεται το παρακάτω παράθυρο:




10. Ήρθε η ώρα να προσαρμόσουμε τη φόρμα επικοινωνίας στα δεδομένα μας:



Είμαστε στο Form Settings και επεξεργαζόμαστε την αριστερή στήλη:



Form Title: Ο τίτλος, το όνομα της φόρμας μας. Μπορείτε π.χ. να την ονομάσετε “Επικοινωνία”, “Contact” ή ό,τι άλλο θέλετε. Αν δε θέλετε να εμφανίζεται τίτλος, απλά “ξετικάρετε” το “show on form”.

Description: Μια περιγραφή για τη φόρμα σας όπως “Συμπληρώστε τα παρακάτω πεδία για να έρθετε σε επαφή μαζί μου” κ.ο.κ. Αν δε θέλετε να προσθέσετε περιγραφή, αφήνετε το πεδίο κενό.

Time Zone: Είναι η ζώνη ώρας (για να βλέπετε τη σωστή ώρα όταν έρχεται κάποιο e-mail). Επιλέγετε το “(+2:00) Eastern Europe, Harare,… κλπ”. Αν ζείτε σε κάποια άλλη χώρα επιλέγετε την κατάλληλη ζώνη ώρας.

Confirmation Options: Αυτό είναι το τι θα εμφανιστεί σε αυτόν που θα επικοινωνήσει μαζί σας αφού στείλει το μήνυμα που θέλει. Αν επιλέξετε “Show Text”, πατάτε “Edit Text” και μπορείτε να γράψετε κάτι σαν “Ευχαριστώ που επικοινώνησες μαζί μου”. Αν επιλέξετε “Redirect URL”, όταν κάποιος σας στέλνει μήνυμα, μετά θα οδηγείται στη διεύθυνση που θέτετε εσείς (μπορείτε να βάλετε την αρχική σελίδα του blog σας).

Label Placement: Είναι η στοίχιση των τίτλων των πεδίων σε σχέση με τα πεδία. Αν το αφήσετε όπως είναι προεπιλεγμένο, εμφανίζει τον τίτλο του πεδίου και από κάτω το πεδίο. Αν επιλέξετε “Left Aligned”, θα εμφανίζεται δίπλα στο πεδίο ο τίτλος του στοιχισμένος αριστερά, ενώ αν επιλέξετε “Right Aligned”, θα εμφανίζεται δίπλα στο πεδίο ο τίτλος του στοιχισμένος δεξιά.

Styling Options: Από εδώ αλλάζουμε γραμματοσειρά, χρώματα (καλύτερα να μην πειράξουμε τα υπόλοιπα).

Form Width: Το πλάτος της φόρμας, καλύτερα να το αφήσουμε και αυτό κενό.

Send Button Name: Το όνομα του πλήκτρου που θα πατάνε οι αναγνώστες για να επικοινωνήσουν μαζί μας. Παραδείγματα: Send, Submit, Αποστολή, Υποβολή κ.ά.

Send Button alignment: Που θέλετε να εμφανίζετε το “Send Button”; Αριστερά (left), στη μέση (middle) ή δεξιά (right);

Anti Spam: Αν είστε ένα αρκετά δημοφιλές blog, συστήνω να επιλέξετε το “Show CAPTCHA Image Verification” ή “Show reCAPTCHA Verification” (καλύτερα το δεύτερο) για να αποφύγετε τα ανεπιθύμητα email (spam emails). Από την άλλη, αν δεν είστε ιδιαίτερα γνωστός/γνωστή στο χώρο του blogging, επιλέγετε “None” (αν παρατηρήσετε πως γεμίζετε spam emails, έχετε τη δυνατότητα να αλλάξετε τη ρύθμιση αργότερα).





Τελειώσαμε με το “Form Settings”, πάμε τώρα στο “Field Settings”, όπου, για να επεξεργαστούμε ένα πεδίο, κάνουμε απλά ένα αριστερό κλικ πάνω του. Οι ρυθμίσεις για τα πεδία είναι, σε γενικές γραμμές, οι ίδιες:




Field Label: Το όνομα του πεδίου.

Options: Επιλέξτε “Required” αν θέλετε να συμπληρωθεί οπωσδήποτε το πεδίο (θα εμφανιστεί και ένας αστερίσκος δίπλα του), ενώ το “Mask Field” είναι για να μην έχετε τη δυνατότητα να βλέπετε αυτό που πληκτρολόγησε αυτός που επικοινώνησε μαζί σας (συνιστάται πάντως να μην το επιλέγετε).

Show Field to: Everyone!

Cell Align: Η στοίχιση του πεδίου. Αριστερή (left), κέντρο (center) ή δεξιά (right).

Field Size: Το μέγεθος του πεδίου. Το 30 είναι μια καλή τιμή για τα πεδία “Name, Subject, Email” αλλά όχι και για το “Message”, για το οποίο υπάρχει έτοιμη, προεπιλεγμένη ρύθμιση.

Range: Από εδώ επιλέγετε να θέσετε περιορισμό για το πόσους χαρακτήρες (characters) ή πόσες λέξεις (words) θα “χωράει” το κάθε πεδίο.

Default Value: Είναι το προεπιλεγμένο κείμενο που θα έχει κάθε πεδίο, π.χ. μπορείτε να δώσετε στο πεδίο “Message” το κείμενο “εδώ γράφετε το κείμενό σας…”.

Instructions for User: Εδώ μπορείτε να δώσετε οδηγίες στους αναγνώστες σας για το πως θα συμπληρώσουν σωστά τα πεδία. Ίσως δε θα ήταν και πολύ καλή ιδέα να το βάλετε όμως, αφού είναι ξεκάθαρο τι ζητάτε σε κάθε πεδίο.



11. Μετά απ ‘όλα αυτά, πατάμε το κουμπί “Save Form” στον πάτο της φόρμας και στη συνέχεια επιλέγουμε το “Modify email notifications for this form”.



12. Στη σελίδα που θα μας εμφανιστεί διαχειριζόμαστε τις ειδοποιήσεις που θα μας έρχονται κάθε φορά που κάποιος στέλνει email μέσω της φόρμας επικοινωνίας:




Αν θέλετε να μη βλέπετε μεγάλες ή μικρές γραμματοσειρές, χρώματα, εικόνες κ.λπ., επιλέγετε “Send Emails in Plain Text” (τα emails θα σας έρχονται με μορφή HTML).



Recipients Emails: Μπορείτε να προσθέσετε έως 10 διευθύνσεις email στις οποίες θα λαμβάνετε τα μηνύματα μέσω της φόρμας.

Message From: Εδώ επιλέγετε από ποιον θα θέλατε να λαμβάνετε τα email, από το EmailMeForm ή από τις πραγματικές διευθύνσεις των αποστολέων; Αν θέλετε το πρώτο, επιλέγετε το “EmailMeForm Website”, ενώ για τη δεύτερη περίπτωση, επιλέγετε το “Retrieve Name from field x and Email from field y”. Αντικαθιστάτε τα x και y με το πεδίο “Όνομα” και “Email” αντίστοιχα (αν δεν είναι ήδη επιλεγμένα).



Αν θέλετε να βλέπετε την IP διεύθυνση του αποστολέα, επιλέγετε “Show Visitor IP In Email”. Προτού το επιλέξετε όμως, καλό θα ήταν να λαμβάνατε υπ ‘όψιν κατά πόσο θα θέλατε εσείς οι ίδιοι να βλέπουν οι παραλήπτες των μηνυμάτων σας την IP διεύθυνσή σας.



Include data for export: Αν θέλετε να μπορείτε να κάνετε εξαγωγή των στοιχείων των αποστολέων των μηνυμάτων που σας έρχονται, κάντε κλικ στην πρώτη επιλογή. Σε αντίθετη περίπτωση, επιλέγετε το “No, do not include it”.

Message Subject: Επιλέγετε “Retrieve from z”, όπου z επιλέγετε το πεδίο με το θέμα του μηνύματος.



13. Κάνουμε: και επιλέγουμε το “Open new window and test notifications” αν θέλετε να δοκιμάσετε τη νέα φόρμα επικοινωνίας που μόλις δημιουργήσατε.

Αν από την άλλη είστε σίγουροι πως τα κάνατε όλα σωστά, δεν υπάρχει λόγος για αυτό, οπότε πατάτε “Take me back to the Form Manager”.


Προσθήκη Φόρμας Επικοινωνίας στο blog μας:



Στη σελίδα στην οποία οδηγηθήκαμε βλέπουμε τη φόρμα επικοινωνίας που φτιάξαμε πριν λίγο και μία μπάρα με ρυθμίσεις από κάτω.



1. Εμείς χρειαζόμαστε το “Code”, οπότε κάνουμε κλικ πάνω του.



2. Στη σελίδα που θα εμφανιστεί, κάνουμε κλικ στο “HTML Only”, το οποίο βρίσκεται στη στήλη στο αριστερό μέρος της σελίδας, και αντιγράφουμε τον κώδικα που μας δίνει.



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



4. Επεξεργασία αναρτήσεων > Επεξεργασία σελίδων και επιλέγουμε “ΝΕΑ ΣΕΛΙΔΑ”.



5. Βάζουμε έναν τίτλο για τη νέα σελίδα που πρόκειται να δημοσιεύσουμε και, στην “Επεξεργασία HTML” (όχι στη Σύνθεση!), κάνουμε επικόλληση τον κώδικα που κάναμε αντιγραφή προηγουμένως.



6. Αν κάνετε προεπισκόπηση, θα δείτε πως στο τέλος της φόρμας δείχνει το παρακάτω κείμενο:

Powered byEMF Web Form

Report Abuse

Αν θέλετε για οποιοδήποτε λόγο να το αφαιρέσετε, αναζητήστε πατώντας “Ctrl + F” στον κώδικα που επικολλήσατε και διαγράψτε το παρακάτω σημείο (αν έχετε αλλάξει γραμματοσειρά ή χρώματα στη φόρμα δε θα το βρείτε έτσι ακριβώς):

<div>

<font face="Verdana" size="2" color="#000000">Powered by</font><span style="position: relative; padding-left: 3px; bottom: -5px;"><img src=

"http://www.emailmeform.com/builder/images/footer-logo.png" /></span><font face="Verdana" size="2" color="#000000">EMF</font> <a style="text-decoration:none;" href="http://www.emailmeform.com/"

target="_blank"><font face="Verdana" size="2" color="#000000">Form Builder</font></a>

</div><a style="line-height:20px;font-size:70%;text-decoration:none;" href="http://www.emailmeform.com/report-abuse.html?http://www.emailmeform.com/builder/form/80df3RW2Nf1S78UpkQHnj" target=

"_blank"><font face="Verdana" size="2" color="#000000">Report Abuse</font></a>



7. Πατάμε “ΔΗΜΟΣΙΕΥΣΗ ΣΕΛΙΔΑΣ” και τελειώσαμε!


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

Παρ ‘όλα αυτά, αν βγω ψεύτης και παρουσιαστεί κάποιο πρόβλημα ή κάποια απορία σχετικά με το θέμα, μη διστάσετε να αφήσετε σχόλιο από κάτω.

Παρακαλώ σεβαστείτε τα copyrigths της ανάρτησης.



Post by Secra from Web in Greece

Copyrigths: /




Προσθήκη favicon δίπλα από τη διεύθυνση (url) του blog μας (2)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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




~

Μπορείτε να διαβάσετε παλαιότερη ανάρτηση σχετικά με το πως μπορείτε να προσθέσετε εικονίδιο (favicon) δίπλα από τη διεύθυνση (url) του blog σας.

Η διαφορά ανάμεσα στις δύο αναρτήσεις είναι ο τρόπος με τον οποίο γίνεται η προσθήκη του favicon.

Σε αυτήν που σας παρέθεσα παραπάνω το κάνετε μέσω της Επεξεργασίας HTML, ενώ τώρα μέσω ενός gadget που μας έδωσε πρόσφατα ο blogger.

~



Κλείνει η παρένθεση και πάμε να δούμε πως θα προσθέσουμε το favicon στο blog μας (μπορείτε να βοηθηθείτε από τις εικόνες).



Διαδικασία:


1. Σύνδεση στο Blogger in draft (κανονικά, με το google λογαριασμό μας)

2. Επιλέγουμε το blog στο οποίο θέλουμε να προσθέσουμε το favicon, ανοίγουμε το βελάκι και πατάμε “Διάταξη



Λογικά θα μας εμφανίσει την παρακάτω εικόνα:



3. Τέρμα πάνω και αριστερά έχει ένα gadget που λέγεται “Εικονίδιο για τα Αγαπημένα“.

Κάνουμε κλικ στο “Επεξεργασία” και λογικά θα μας εμφανίσει το παρακάτω παράθυρο:



4. Πατάμε “Επιλογή αρχείου“, αναζητούμε και επιλέγουμε την εικόνα που θέλουμε να χρησιμοποιήσουμε ως favicon και πατάμε “Αποθήκευση“.



Η εικόνα που θα επιλέξουμε είναι καλό να είναι της μορφής .ico.

Μπορείτε να μετατρέψετε εύκολα την εικόνα που θέλετε, η οποία προφανώς είναι σε άλλη μορφή (.png, .jpeg, .gif), σε μορφή .ico από το icoconverter.com.



5. Πατάμε “Αποθήκευση διάταξης” και τελειώσαμε. Απλό, έτσι;



*Η εικόνα που θα επιλέξουμε πρέπει να έχει διαστάσεις τετραγώνου, αλλιώς ο blogger δεν τη δέχεται.



**Η εικόνα δε θα εμφανιστεί απευθείας δίπλα στο url του blog σας.

Χρειάζεται λίγη ώρα. Εγώ υπολόγισα γύρω στη μισή ώρα, σε άλλους μπορεί να γίνει είτε πιο αργά είτε πιο γρήγορα.



Copyrights: http://bloggertips.gr



Post by Secra from Web in Greece




Άνοιγμα των αναρτήσεων σε νέα καρτέλα – Make Blogger Posts Open in New Tabs



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πως θα κάνουμε μόνο τους τίτλους των αναρτήσεών μας στο blog μας να ανοίγουν σε νέα καρτέλα?



~



Για να κάνετε ΟΛΑ τα λινκς στο blog σας να ανοίγουν σε νέα καρτέλα Ή να κάνετε μόνο ένα λινκ σας να ανοίγει σε νέα καρτέλα, δείτε στο /2009/07/links-blog_20.html



~



Πηγαίνουμε:



Πανόπτης> Σχεδίαση> Επεξεργασία html> Επέκταση προτύπων γραφικών στοιχείων



και με τη βοήθεια του ctrl+F ψάχνουμε να βρούμε το



<a expr:href=’data:post.url’



Λογικά θα βρούμε δύο’ μας ενδιαφέρει το πρώτο.



Δίπλα του ακριβώς προσθέτουμε το target=’_blank’



δηλαδή θα γίνει έτσι



<a expr:href=’data:post.url’ target=’_blank’>



Ο κωδικός πριν την αλλαγή:


<b:if cond=’data:post.url’>

<b:if cond=’data:blog.url != data:post.url’>

<a expr:href=’data:post.url’><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h3>

</b:if>



Ο κωδικός μετά την αλλαγή:


<b:if cond=’data:post.url’>

<b:if cond=’data:blog.url != data:post.url’>

<a expr:href=’data:post.url’ target=’_blank’><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h3>

</b:if>



δηλαδή απλά προσθέτουμε το target=’_blank’



Αφήστε τις εντυπώσεις σας με ένα σχόλιο!



Η παραπάνω ανάρτηση στάλθηκε από τον:



Ola24

——-

WebSite: http://www.ola24.com

E-mail: info@ola24.com

Copyrights: /



Κατά τη συγγραφή της παραπάνω ανάρτησης, άκουγα το παρακάτω τραγούδι:






Προσθήκη του QueryLoader (‘LazyLoad’) Script στο Blogger



Print Friendly and PDFPrintPrint Friendly and PDFPDF




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



Σήμερα θα σας δείξω πως μπορείτε να προσθέσετε στο blog σας το QueryLoader, ένα script το οποίο θα εμφανίζεται με το που μπαίνει κάποιος στο blog σας και δε θα φεύγει μέχρι να φορτώσει τελείως όλο το blog.

Δηλαδή, αντί να βλέπουν οι αναγνώστες σας να φορτώνει το ένα gadget μετά το άλλο, θα βλέπουν όλο το blog αφού φορτώσει το QueryLoader (ιδιαίτερα αν το blog σας είναι λιγάκι “βαρύ”, αυτό το script μπορεί να φανεί ιδιαίτερα χρήσιμο).

Για να καταλάβετε τι εννοώ, κάντε κλικ εδώ.



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



Διαδικασία:




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

2. Σχεδίαση

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

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

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

<script src=’http://blogger-loader.googlecode.com/files/queryLoaderpre.js’ type=’text/javascript’/>



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

<b:if cond=’data:blog.url == data:blog.homepageUrl’>

<script>

QueryLoader.selectorPreload = "body";

QueryLoader.init();

</script>

</b:if>

*Αν θέλετε να εμφανίζεται το συγκεκριμένο script μόνο στην αρχική σελίδα, αφήστε τον κώδικα όπως είναι.

Αν όμως θέλετε να εμφανίζεται σε όλες τις σελίδες του blog σας, σβήστε τις σειρές του παραπάνω κώδικα που έχω επισημάνει με bold (δηλαδή την πρώτη και την τελευταία σειρά του παραπάνω κώδικα).



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

.QOverlay {

background-color: #000000;

z-index: 9999;

}



.QLoader {

background-color: #CCCCCC;

height: 1px;

}



.QAmt {

color:#FF530D;

font-size:50px;

font-weight:bold;

line-height:50px;

height:50px;

width:100px;

margin:-60px 0 0 -50px;

}



7. Αποθήκευση προτύπου και είμαστε έτοιμοι!



Προσοχή!

Αν υπάρχουν scripts ή files στο blog σας που έχουν πρόβλημα στο να φορτώσουν και δε φορτώνουν ουσιαστικά ποτέ, φαινόμενο που εμφανίζεται αρκετά συχνά, είναι λογικό και επόμενο να μην τελειώσει το “φόρτωμα” του QueryLoader ποτέ, με αποτέλεσμα να μην ανοίγει το blog σας.

Δοκιμάστε το και αν τα πάει καλά την πρώτη φορά, δεν υπάρχει πρόβλημα (εκτός βέβαια αν προσθέσετε scripts που δε φορτώνουν ποτέ στο μέλλον).





Πηγές: http://www.allblogtools.com/tricks-and-hacks/adding-queryloader-lazyload-script-for-blogger-and-customize-it/ + http://www.gayadesign.com/



Copyrights: /



Post by Secra from Web in Greece




Facebook comment box στο blogger



Print Friendly and PDFPrintPrint Friendly and PDFPDF




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



Σήμερα θα σας δείξω πως μπορείτε να προσθέσετε στο blog σας ένα comment box (=φόρμα σχολίων) για να μπορούν οι αναγνώστες σας να σχολιάζουν επώνυμα μέσω του δημοφιλέστερου social network στον πλανήτη, του Facebook.



Πριν ξεκινήσουμε τη διαδικασία για το πως θα το προσθέσετε, δύο πράγματα είναι απαραίτητα:

1) Ένας λογαριασμός στο Facebook και

2) Η απόκρυψη των σχολίων του blogger πηγαίνοντας μέσω του blog σας Ρυθμίσεις > Σχόλια > Απόκρυψη και ΑΠΟΘΗΚΕΥΣΗ ΡΥΘΜΙΣΕΩΝ.

Αν και αρχικά πίστευα πως το comment box δε μπορεί να συνυπάρχει με τα σχόλια του blogger, έκανα λάθος, οπότε αγνοήστε το διαγραμμένο κείμενο από πάνω.



Διαδικασία:



1. Μπαίνουμε στη σελίδα του Facebook Developers που έχει να κάνει με το comment box.



Πώς θα συμπληρώσετε τη φόρμα που θα εμφανιστεί:


Site name: Το όνομα του blog σας

Site URL: Το url του blog σας με ένα “/” στο τέλος (π.χ. www.bloggertips.gr/)

Locale: Επιλέγετε από το μενού “Ελληνικά



Μετά θα σας βγει ένα Security Check, δηλαδή ένα παράθυρο που βοηθάει στο να αναγνωρίσει το Facebook ότι έχει να κάνει με άνθρωπο και όχι με κάποιον υπολογιστή.

Συμπληρώνετε το captcha (δηλαδή τα περίεργα γράμματα που εμφανίζονται) και πατάτε Submit.



2. Στη σελίδα που θα οδηγηθείτε αφού πατήσετε Submit, το μόνο που θα χρειαστεί να πάρετε είναι η Ταυτότητα (ID) Εφαρμογής. Αντιγράψτε τον αριθμό που θα σας βγάλει και αφήστε τον στην άκρη γιατί θα τον χρειαστούμε παρακάτω.



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

4. Σχεδίαση

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

6. “Τικάρουμε” το “Επέκταση προτύπων γραφικών στοιχείων”

7. Με Ctrl + F αναζητούμε το <html και δίπλα από αυτό, δηλαδή ακριβώς μετά από αυτό, επικολλούμε τον παρακάτω κώδικα:

xmlns:fb=’http://www.facebook.com/2008/fbml’

Πρέπει να αφήσετε τουλάχιστον ένα κενό πριν και μετά από τον παραπάνω κώδικα για να δουλέψει!





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

<div id=”fb-root”></div>

<script>

window.fbAsyncInit = function() {

FB.init({

appId : ‘Ταυτότητα (ID) Εφαρμογής‘,

status : true, // check login status

cookie : true, // enable cookies to allow the server to access the session

xfbml : true // parse XFBML

});

};



(function() {

var e = document.createElement(‘script’);

e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;

e.async = true;

document.getElementById(‘fb-root’).appendChild(e);

}());

</script>

Στον παραπάνω κώδικα, αντικαθιστάτε το “Ταυτότητα (ID) Εφαρμογής” με τον αριθμό που μας έδωσε το Facebook, τον οποίο αφήσαμε στην άκρη νωρίτερα.



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

<b:if cond=’data:blog.pageType == "item"’>

<meta expr:content=’data:blog.pageTitle’ property=’og:title’/>

<meta expr:content=’data:blog.url’ property=’og:url’/>

<b:else/>

<meta expr:content=’data:blog.title’ property=’og:title’/>

<meta expr:content=’data:blog.homepageUrl’ property=’og:url’/>

</b:if>

<meta content=’MY-SITE-NAME‘ property=’og:site_name’/>

<meta content=’YOUR-APP-ID‘ property=’fb:app_id’/>

<meta content=’YOUR-FACEBOOK-PROFILE-ID‘ property=’fb:admins’/>

<meta content=’article’ property=’og:type’/>

Προσαρμόζουμε τον παραπάνω κώδικα στα δικά μας δεδομένα:



Αντικαθιστούμε το MY-SITE NAME με το όνομα του blog μας, το YOUR-APP-ID με την Ταυτότητα (ID) Εφαρμογής, δηλαδή με τον αριθμό που πήραμε νωρίτερα από το Facebook και το YOUR-FACEBOOK-PROFILE-ID με το ID του λογαριασμού μας στο Facebook.



Για να βρούμε το Facebook ID, πάμε στο profile μας στο Facebook και κάνουμε κλικ στην φωτογραφία που έχουμε ορίσει ως φωτογραφία προφίλ.

Στην μπάρα του browser (του περιηγητή μας δηλαδή) θα βγει ένα link που θα μοιάζει με το παρακάτω:

https://www.facebook.com/media/set/?set=a.1438872928907.63717.1175547627

Το Facebook ID είναι ο αριθμός μετά το “a.” μέχρι την πρώτη τελεία, δηλαδή στο παραπάνω το ID είναι το 1438872928907 .



10. Με Ctrl + F αναζητούμε το <data:post.body/> και ακριβώς μετά από αυτό επικολλούμε τον παρακάτω κώδικα:

<b:if cond=’data:blog.pageType == "item"’>

<p />

<script src=’http://connect.facebook.net/en_US/all.js#xfbml=1’/>

<div><fb:comments width=’450′ expr:title=’data:post.title’ expr:href=’data:post.url’ expr:xid=’data:post.id’/></div>

</b:if>

Μπορείτε να αλλάξετε το width=’450′, δηλαδή το πλάτος του comment box, και να το προσαρμόσετε στο πλάτος του blog σας, αλλάζοντας το “450” σε όποιο σας ταιριάξει καλύτερα.

Πειραματιστείτε για να βρείτε το κατάλληλο!



11. Αποθήκευση προτύπου και είμαστε έτοιμοι!



Δείτε Demo εδώ.



Πηγές: http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/



Με τη φιλική βοήθεια (μέσω σχολιασμού) του http://bloggermeetsfacebook.blogspot.com/



Copyrights: /



Post by Secra from Web in Greece




Οριζόντιο blogger menu -ΜΕ υποκαρτέλες- κάτω από τον τίτλο για προσθήκη συνδέσμων (3)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Είναι μια μπάρα-μενού ΜΕ ΥΠΟΚΑΡΤΕΛΕΣ που την εγκαθιστάμε κάτω από τον τίτλο του blog μας και βάζουμε σε αυτή, links από αναρτήσεις μας, ετικέτες μας και ότι άλλο θέλουμε.


Θα φαίνεται κάπως έτσι:



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



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

2. Πανόπτης> Σχεδίαση> Επεξεργασία html

3. Με το ctrl+F βρείτε το </head>

4. Πάνω από αυτό επικολλήστε το παρακάτω:


<style type=’text/css’>

#catmenucontainer{

height:29px;

background:url(http://i47.tinypic.com/23gy3yp.jpg) repeat-x;

display:block;

padding:0px 0 0px 0px;

font: 14px "Century gothic",verdana, Arial, sans-serif;

font-weight:normal;

border-top:1px solid #686D6F;

}



#catmenu ,#catmenu ul {

margin: 0px 5px;

padding: 0px;

list-style: none;

height:29px;

}



#catmenu a {

color: #999;

display: block;

font-weight: normal;

padding: 4px 10px 6px 10px;

}



#catmenu a:hover {

background:url(http://i50.tinypic.com/2il0gt5.jpg) repeat-x;

color: #fff;

display: block;

text-decoration: none;

}



#catmenu li {

float: left;

margin: 0px;

padding: 0px;

}



#catmenu li li {

float: left;

margin: 0px 0px 0px 0px;

padding: 0px;

width: 130px;

}



#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {

background:url(http://i47.tinypic.com/23gy3yp.jpg) repeat-x;

width: 150px;

float: none;

margin: 0px;

padding: 4px 10px 5px 10px;

color:#E8EBEE;

border-bottom:1px solid #2C3133;

}



#catmenu li li a:hover, #catmenu li li a:active {

background:url(http://i50.tinypic.com/2il0gt5.jpg) repeat-x;

width: 150px;

float: none;

margin: 0px;

padding: 4px 10px 5px 10px;

color:#fff;

border-bottom:1px solid #2C3133;

}



#catmenu li ul {

position: absolute;

width: 10em;

left: -999em;

z-index:1;

}



#catmenu li:hover ul {

left: auto;

display: block;

}



#catmenu li:hover ul, #catmenu li.sfhover ul {

left: auto;

}

</style>



5. Αποθηκεύουμε το πρότυπό μας

6. Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript

7. Βάλτε τον παρακάτω κωδικό:


<div id=’catmenucontainer’>



<div id=’catmenu’>



<ul>



<li><a href=’#‘ title=’#’>Home</a></li>



<li><a href=’#‘ title=’#’>Tab 1</a>

<ul class=’children’>

<li><a href=’#‘ title=’#’>1</a></li>

<li><a href=’#‘ title=’#’>2</a></li>

<li><a href=’#‘ title=’#’>3</a></li>

</ul>

</li>



<li><a href=’#‘ title=’#’>Tab 2</a>

<ul class=’children’>

<li><a href=’#‘ title=’#’>1</a></li>

<li><a href=’#‘ title=’#’>2</a></li>

<li><a href=’#‘ title=’#’>3</a></li>

<li><a href=’#‘ title=’#’>4</a></li>

</ul>

</li>





<li><a href=’#‘ title=’#’>About</a></li>



<li><a href=’#‘ title=’#’>Contact</a></li>





</ul>



</div>



Όπου το # βάζετε το link σας και από δίπλα βάζετε το όνομα του link.



Προσέξτε τον χρωματισμό που σας έχω κάνει για να καταλάβετε καλύτερα!



8. Αποθήκευση κι είστε έτοιμοι!



Θα ακολουθήσουν κι άλλα σχέδια.

Τα σχόλιά σας, πάντα ευπρόσδεκτα!


Copyrights: http://bloggertips.gr/