BLOG-Act &Design

ΠΩΣ ΝΑ ΒΑΛΕΤΕ TWITTER BUTTON(TWEET THIS)ΣΕ ΚΑΘΕ ΑΝΑΡΤΗΣΗΣ ΣΑΣ

noreply@blogger.com (Blog ActDesign) — Mon, 10 Sep 2012 06:52:00 -0700

Το "tweet this" κουμπί δίνει την δυνατότητα στους αναγνώστες σας να μοιραστούν τις αναρτήσεις σας και με άλλους χρήστες του Twitter .Αυτό είναι ένας ωραίος τρόπος να προωθήσετε το blog σας και να αυξήσετε τους αναγνώστες σας.Παρακάτω μπορείτε να δείτε μερικά παραδείγματα twitter icons ή μέσω ίντερνετ να βρείτε αυτό που σας αρέσει να προσθέσετε με τον τρόπο που σας δείχνω παρακάτω.

Η διαδικασία είναι η εξής.
Σύνδεση στο Blogger►Πίνακας Ελέγχου►Σχεδίαση►Επεξεργασία HTML►Κλικάρετε Επέκταση Προτύπων Γραφικών Στοιχείων
Ψάχνετε την παρακάτω ετικέτα:

<data:post.body/>

Αντιγράψτε και επικολλήστε τον παρακάτω κωδικό ακριβώς μετά απο την παραπάνω ετικέτα

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<a expr:href='&quot;http://twitter.com/home?status=Read - &quot; + data:post.title + &quot;-&quot; + data:post.url' title='Post this article on Twitter'

 target='_blank'><img style="border:0px;" src='http://i46.tinypic.com/2py4aw8.jpg'/></a>
</b:if>

ΣΗΜΕΙΩΣΗ:Στο πρότυπο σας λογικά θα υπάρχουν 2 ετικέτες

<data:post.body/> μέσω του Google Chrome ψάχτετε την ετικέτα και επικολλάτε τον

 κωδικό στην πρώτη.

TWITTER ICONS

Το μόνο που μένει να κάνετε είναι να αντικαταστήσετε τον κωδικό εικόνας (γκρί φόντο)με τον κωδικό της εικόνας που σας αρέσει να βάλετε στο blog σας είτε απο δώ,είτε απο το web(δεξί κλίκ πάνω στην εικόνα,αντιγραφή-επικόλληση διεύθυνσης url εικόνας) .
ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

JQUERY THUMBNAIL HOVER/ZOOM EFFECT-ΕΙΚΟΝΕΣ

noreply@blogger.com (Blog ActDesign) — Mon, 11 Jun 2012 15:33:00 -0700

Ένα πολύ όμορφο effect εικόνων για το Blog σας.Περνώντας το ποντίκι πάνω απο τις εικόνες σας μεγενθύνονται και ζουμάρονται .Μπορείτε να το τοποθετήσετε στην πλευρική στήλη σας ώς gallery εικόνων ή και στην εικόνα σας σε κάθε σας ανάρτηση.

ΔΙΑΔΙΚΑΣΙΑ:
ΒΗΜΑ 1
Πίνακας Ελέγχου►Σχεδίαση►Επεξεργασία HTML
Ψάχνουμε το ακόλουθο τμήμα κωδικού

]]></b:skin>

Πρίν απο αυτό,επικολλούμε τον ακόλουθο κωδικό

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgWdAqYV1koLY2a4Q-GxOC93iCoyvGeKk5vl0ONk8telKIKJ_4QiS_3AowK47cCKSCtrTudLO4KZD1ZadwZjQ85UIHqxoAbk-JGUdc9YnzEQZRbwFZX-pjkgOH0b9RTjTXirNfXX8PQmFH/) no-repeat center center; /* Image used as background on hover effect
border: none;
}

Στην συνέχεια βρίσκουμε το επόμενο

</head>

Και πρίν απο αυτό επικολλούμε τον ακόλουθο

ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ
ΒΗΜΑ 2

Άν θέλετε να τοποθετήσετε το effect στην πλαϊνή στήλη του blog σας,σαν gallery εικόνων τότε η διαδικασία είναι η εξής.

Σχεδίαση ►Στοιχεία Σελίδας►Προσθήκη gadget►Επιλογή HTML/Javascript
Αντιγραφή=Επικόλληση τον παρακάτω κωδικό

</ul>

Αντικαθιστούμε το img2,3,4...με το url της δικής μας εικόνας.Επίσης αν θέλουμε η εικόνα να έχει σύνδεση σε μια άλλη σελίδα τότε αντικαθιστούμε το # με το url της σελίδας αυτής.

Άν θέλετε να το τοποθετήσετε το effect στην εικόνα που τοποθετείτε σε κάθε σας ανάρτηση τότε στην "επεξεργασία html"της ανάρτησης σας θα βάζετε τον κωδικό αυτό.

Εξίσου και εδώ αντικαθιστούμε το img2 και αν θέλουμε και το #

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΔΗΜΙΟΥΡΓΗΣΤΕ ΤΗΝ ΔΙΚΗ ΣΑΣ ΥΠΟΓΡΑΦΗ ΚΑΙ ΤΟΠΟΘΕΤΗΣΤΕ ΤΗΝ ΣΤΟ ΤΕΛΟΣ ΑΝΑΡΤΗΣΕΩΝ ΣΑΣ!

noreply@blogger.com (Blog ActDesign) — Fri, 25 May 2012 15:16:00 -0700

Άν παρατηρήσετε σε κάποιες ιστοσελίδες,κάποιοι bloggers βάζουν στον επίλογο των αναρτήσεων τους μια πολύ όμορφη υπογραφή.Βάζοντας λοιπόν την δική τους σφραγίδα θεωρώ ότι δίνουν ένα ξεχωριστό και ιδιαίτερο στύλ στις αναρτήσεις τους.Είναι πολύ εύκολος ο τρόπος να δημιουργήσετε και εσείς και να τοποθετήσετε την δική σας υπογραφή στον επίλογο των αναρτήσεων σας.
Θα σας δείξω βήμα-βήμα την διαδικασία:
ΔΗΜΙΟΥΡΓΗΣΤΕ ΤΗΝ ΥΠΟΓΡΑΦΗ ΣΑΣ
ΒΗΜΑ 1
Πηγαίνετε στο mylivesignature και πατάτε "Click Here To Start"δεν χρειάζεται να κάνετε εγγραφή
BHMA 2
Πατήστε το Using the signature creation wizard για να δημιουργήσετε την υπογραφή σας μέσω του οδηγού που παρέχει μια μεγάλη γκάμα γραμματοσειρών ή αν είστε περισσότερο τολμηροί με τάση προς την ζωγραφική πατήστε το Draw a signature straight to the screen
Στο πρώτο αυτό που πρέπει να κάνετε είναι να δώσετε το όνομα που έχετε επιλέψει και να διαλέξετε την γραμματοσειρά που σας αρέσει ανάμεσα σε 120 διαφορετικές.
ΒΗΜΑ 3
Μόλις την επιλέξετε στα επόμενα βήματα μένει να διαλέξετε το μέγεθος,το χρώμα του κειμένου και το χρώμα του φόντου(άν θέλετε διάφανο κλικάρετε το κουτάκι...) και τέλος αν θέλετε η υπογραφή σας να είναι σε ευθεία γραμμή ή να έχει κλίση.
Μετά απο αυτά τα βήματα η υπογραφή σας είναι έτοιμη.Στην συνέχεια κλικάρετε Want to use this signature? και αμέσως μετά Generate HTML code και θα σας εμφανιστεί ο κωδικός HTML.
Αυτός είναι ο δικός μου κωδικός

ΣΗΜΕΙΩΣΗ:Άν δεν θέλετε η υπογραφή σας να είναι σύνδεση πίσω στο My live signature ,
τότε διαγράψτε απο τον κωδικό HTML τις λέξεις με ρόζ χρώμα.
ΤΟΠΟΘΕΤΗΣΤΕ ΤΗΝ ΥΠΟΓΡΑΦΗ ΣΑΣ
Υπάρχουν 2 τρόποι να βάλετε την υπογραφή σας στο τέλος των αναρτήσεων σας στο blog σας.
ΤΡΟΠΟΣ 1
1.Πηγαίνετε Ρυθμίσεις ► Διαμόρφωση

2.Στο πλαίσιο Πρότυπο Ανάρτησης επικολλήστε τον κωδικό σας HTML
3.Αποθήκευση Ρυθμίσεων
Απο δώ και πέρα όταν θα ξεκινάτε να γράφετε μια ανάρτηση,θα υπάρχει ήδη εκεί η υπογραφή σας.
ΤΡΟΠΟΣ 2
1.Πηγαίνετε Σχεδίαση► Επεξεργασία HTML► Κλικάρετε Επέκταση Πρότυπων γραφικών στοιχείων
2.Ψάχνετε τον ακόλουθο κωδικό

<data:post.body/>

Ακριβώς μετά ή ακριβώς απο κάτω τοποθετήστε τον κωδικό HTML της υπογραφή σας
ΣΗΜΕΙΩΣΗ:Άν το <data:post.body/> υπάρχει στο πρότυπο σας πάνω απο μια φορά,τότε βάλτε το μετά το δεύτερο που θα βρείτε.
3.ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΠΡΟΣΘΗΚΗ FAVICON ΣΤΟ BLOG ΣΑΣ

noreply@blogger.com (Blog ActDesign) — Wed, 2 May 2012 07:49:00 -0700

Το Blogger μας δίνει την δυνατότητα να τοποθετήσουμε το δικό μας λογότυπο που θα αντιπροσωπεύει το blog μας και το οποίο θα εμφανίζεται στην γραμμή διευθύνσεων του browser σας.

Μπορείτε να διαλέξετε ανάμεσα σε 18,000 δωρεάν favicons και να το ανεβάσετε στην σέλιδα σας.Απλά πηγαίνετε στο iconj.com και κατεβάστε όποιο σας αρέσει και κατεβάστε το σε μορφή .ico ή ψάξτε στο διαδύκτιο και για άλλες σελίδες.
Δημιουργήστε το δικό σας favicon.Mετατρέψτε το σε 16x16 pixels και αποθηκεύστε το σε όποια μορφή εικόνας θέλετε(gif,png,jpg...)ή πηγαίνετε στο freefavicon.com ανεβάστε την εικόνας και μετατρέψτε την απο εκεί.

Αυτό που μένει μόνο τώρα να κάνετε είναι να πάτε Πίνακα Ελέγχου ►Σχεδίαση και ανεβάσετε την εικόνα σας επιλέγοντας Εικονίδιο για τα Αγαπημένα

ΕΙΣΤΕ ΕΤΟΙΜΟΙ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΑΠΟΚΡΥΨΗ--ΕΜΦΑΝΙΣΗ ΤΟΥ NAV BAR ΤΟΥ BLOGGER

noreply@blogger.com (Blog ActDesign) — Wed, 2 May 2012 06:36:00 -0700

Ένα πολύ όμορφο και απλό κολπάκι για το blog σας.Θα σας δείξω πώς θα αποκρύψετε την nav bar της σελίδας και όταν περνάτε το ποντίκι πάνω απο αυτό το σημείο θα επανεμφανίζεται.

ΔΙΑΔΙΚΑΣΙΑ
1.Σύνδεση στο Blogger►Πίνακας Ελέγχου►Σχεδίαση►Επεξεργασία HTML
2.Ψάχνουμε τον ακόλουθο κωδικό

             ]]></b:skin>

3.Πρίν απο αυτό επικολλήστε τον ακόλουθο

#navbar-iframe {
  height:5px;
  }

/* IE7, IE8, IE6 */
  #navbar-iframe { height/*\**/: 30px\9; }


#navbar-iframe:hover {
  height:40px; !important; 
  }

ΣΗΜΕΙΩΣΗ:Λειτουργεί σε όλους του browsers απλά μερικές φορές σε κάποιες εκδόσεις του Internet Explorer μπορεί να μην λειτουργήσει.
4.ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΠΩΣ ΝΑ ΒΑΛΕΤΕ ΠΡΟΣΑΡΜΟΣΜΕΝΕΣ ΓΡΑΜΜΑΤΟΣΕΙΡΕΣ ΤΟΥ GOOGLE ΓΙΑ ΤΟ BLOGGER

noreply@blogger.com (Blog ActDesign) — Mon, 30 Apr 2012 09:22:00 -0700

Σ'αυτή την ανάρτηση θα σας δείξω πώς θα αλλάξουμε τις συνηθισμένες και απλές γραμματοσειρές του Blogger που χρησιμοποιούμε όλοι.Με την νέα της υπηρεσία η Google"Making Τhe Web Beautiful"λανσάρει νέες γραμματοσειρές για το διαδίκτυο.Αυτή η υπηρεσία της Google μας επιτρέπει να χρησιμοποιούμε μέσα απο τον καταλογό της,προσαρμοσμένες γραμματοσειρές,χωρίς εγγραφή και φυσικά επειδή είναι απο την Google ιναι εντελώς δωρεάν για επαγγελματική και ιδιωτική χρήση.Έτσι και με αυτό τον τρόπο που θα σας δείξω το blog σας θα αποκτήσει για άλλη μια φορά το δικό σας προσωπικό στύλ.
ΔΙΑΔΙΚΑΣΙΑ
1.Πίνακας Ελέγχου►Σχεδίαση►Επεξεργασία HTML
2.Λήψη Πλήρους Προτύπου
3.Πηγαίνετε Google Font Directory

Διαλέξτε την γραμματοσειρά που σας αρέσει
Πατήστε Add to Collection
Θα δείτε ακριβώς κάτω στο μπλέ πλαίσιο ότι προστέθηκε η γραμματοσειρά στην συλλογή σας
Πατήστε Use και στην επομένη σελίδα θα σας εμφανιστεί αυτο το παράθυρο

4.Στην Eπεξεργασία Html με την βοήθεια του ctrl_f ψάχνουμε το ακόλουθο....

<head>

....κάνουμε επικόλληση τον κωδικό της γραμματοσειράς που βρήκαμε στο μπλέ πλαίσιο αμέσως μετά το <head>
ΣΗΜΑΝΤΙΚΟ:Όταν κάνουμε επικόλληση τον κωδικό τοποθετούμε μια κάθετο ("/") πρίν το τέλος της ετικέτας (">") αυτού του κωδικού.Έτσι ο κωδικός μας θα είναι κάπως έτσι:

<link href='http://fonts.googleapis.com/css?family=Tangerine'

 rel='stylesheet' type='text/css'/>

5.ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

6.Σε αυτό το βήμα θα επιλέξετε που θέλετε να τοποθετήσετε την νέα γραμματοσειρά.

--Άν θέλετε να την τοποθετήσετε σε μια συγκεκριμένη πρόταση

 μέσα σε κάποια αναρτησή σας τότε τοποθετείτε τον ακόλουθο κωδικό

 κατά την πληκτρολόγηση της ανάρτησης σας

όχι στην Σύνθεση αλλά στην Επεξεργασία html της ανάρτησης.Ο κωδικός είναι ο εξής:

<div style="font-family: 'FontName', serif;">Your text</div>

7.Αντικαθιστάτε το

'FontName', serif;"

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

της γραμματοσειράς.

Στην εικόνα το font name είναι το 'IM Fell English SC',serif;
Επομένως ο κωδικός απο έτσι▼

      <div style="font-family: 'FontName', serif;">Your text</div>

                                                                     θα είναι▼

 <div style="font-family: 'IM Fell English SC',serif;">Your text</div>

Αντικαθιστάτε το Your Text με την πρόταση ή λέξη ή κείμενο που θέλετε να τοποθετήσετε την γραμματοσειρά.

--Άν θέλετε να εμφανίζετε η γραμματοσειρά στον

Τίτλο του Blog σας
Τίτλους Αναρτήσεων
Στο κείμενο των αναρτήσεων
Πλαϊνές Στήλες

τότε πρέπει να πάμε Σχεδίαση ►Επεξεργασία Html
για τους Τίτλους Αναρτήσεων ψάχνουμε..

.post h3

.post-title h3

....και κάτω απο έναν απο τους 2 επικολλούμε τον παρακάτω κωδικό

font-family: 'Your Font Name';

ολόκληρος ο κωδικός θα είναι κάπως έτσι

.post h3 {
font-family: 'Your Font Name';
}

τοποθετούμε τις ετικέτες { } όπως είναι παραπάνω.Στην θέση του Your Font Name βάζουμε το όνομα της γραμματοσειράς ακριβώς όπως στο βήμα 7.
Eναλακτικά ψάχνουμε τους παρακάτω κωδικούς για την θέση που θέλουμε να τοποθετήσουμε την γραμματοσειρά και ακολουθούμε την ίδια διαδικασία.

Τίτλος του Blog σας: h1
Τίτλοι Αναρτήσεων: .post h3 ή .post-title
Κείμενο Αναρτήσεων: .post-body
Πλαϊνές Στήλες: .sidebar h2

ΣΗΜΑΝΤΙΚΟ
►Κάθε φορά που θα επιλέγετε μια διαφορετική γραμματοσειρά για να καταλήξετε σε αυτή που σας αρέσει,πρέπει να αλλάζετε και να τοποθετείτε τον αντίστοιχο κωδικό της στο Βήμα 4 ώστε να εμφανίζεται σωστά.
►Άν θέλετε να βάλετε διαφορετικές γραμματοσειρές σε πολλά σημεία του blog σας τότε κάθε φορά θα τοποθετείτε και τον κωδικό της αντίστοιχης γραμμματοσειράς(Βλέπε Βήμα4)

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ BAΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΠΑΡΑΚΟΛΟΥΘΗΣΗ ΕΠΙΣΚΕΠΤΩΝ(UPDATE)

noreply@blogger.com (Blog ActDesign) — Tue, 3 Apr 2012 06:29:00 -0700

Ένα άρθρο απο τα πρώτα μου ήταν δημοφιλή εργαλεία παρακολούθησης απο διαφορετικά sites όπου καθένα απο αυτά καταγράφει π.χ επισκεψιμότητα της σελίδας σας,εντοπισμός αναγνωστών μέσω χάρτη και πολλά άλλα.
Αυτή η ανάρτηση είναι η συνέχεια αυτου του άρθρου με ένα ακόμα πολύ καλό site παρακολούθησης επισκεπτών.Το HISTATS
Όποιος το επισκεφτεί θα μπορέσει μέσω δωρεάν εγγραφής να διαλέξει απο ένα πλήθος καταμετρητών(counters) τοποθετώντας αυτό που ταιριάζει στην σελίδα του και στα γούστα του.Η διαδικασία είναι απλή .

Με μια εγγραφή δημιουργείτε ένα λογαριασμο στο HISTATS,στην συνέχεια πρέπει να προσθέσετε την διεύθυνση του blog σας και με αυτό τον τρόπο θα μπορέσετε να διαλέξετε όποιο καταμετρητή θέλετε απλά κάνοντας αντιγραφή και επικόλληση τον κωδικό του.Επιπλέον κλικάροντας το counter που θα τοποθετήσετε ή κλικάροντας στην σελίδα που έχετε εισάγει στο HISTATS θα μπορείτε να δείτε λεπτομερή στατιστικά επισκεψιμότητας.
Έτσι με ένα μικρό και όμορφο gadget προσαρμόζοντας το σε αυτό που θέλετε να καταγράφει θα ενημερώνεστε για το πόσοι επισκέπτες παρακολούθησαν την σελίδα σας,πόσες σελίδες διαβάστηκαν,πόσοι είναι online εκείνη την στιγμή και διάφορα άλλα.

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

BACKGROUND ΣΤΟΥΣ ΤΙΤΛΟΥΣ ΑΝΑΡΤΗΣΕΩΝ

noreply@blogger.com (Blog ActDesign) — Sun, 25 Mar 2012 09:30:00 -0700

Άλλο ένα όμορφο τρίκ σχεδίασης!.Ντύνοντας τους τίτλους των αναρτήσεων μας με δικής μας επιλογής backgrounds,αυτομάτως δίνουμε σε ένα μέρος της σελίδας μας το δικό μας στύλ κάνοντας το ξεχωριστό ώστε η ανάγνωση του blog μας να είναι πιο ευχάριστη απο τους επισκέπτες μας.Μπορείτε φυσικά να βρείτε στο διαδίκτυο άπειρα backgrounds,που να ταιριάζουν με τα γούστα σας και να με την σχεδίαση του blog σας.Εγώ θα σας δείξω την διαδικασία:
1.BHMA
Σύνδεση στο Blogger►Σχεδίαση►Επεξεργασία HTML
▼
2.ΒΗΜΑ
Ψάχνουμε το ακόλουθο τμήμα κωδικού(αφορά το τίτλο αναρτήσεων)

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:000000;
}

Λογικά το δικό σας θα διαφέρει κάπως.Το σημαντικό όμως που πρέπει να βρούμε και να είναι το ίδιο ακριβώς είναι αυτό .post h3 {
3.ΒΗΜΑ
Τοποθετούμε τον παρακάτω κωδικό ακριβώς κάτω απο το .post h3 {

background: url(URL OF IMAGE); background-repeat:repeat;

4.BHMA
Το μόνο που αντικαθιστούμε είναι το URL OF IMAGE με το url της δικής μας εικόνας.Άν θέλετε και περίγραμμα γύρω απο το background που θα βάλετε για να μην σας μπερδέψω με παραπάνω βήματα απλά μου το λέτε και σας λέω ακριβώς τί παραπάνω πρέπει να κάνετε.
5.ΒΗΜΑ
ΠΡΟΕΠΙΣΚΟΠΗΣΗ και άν όλα εντάξει τότε
ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

SPLIT HEART BOOKMARKING GADGET

noreply@blogger.com (Blog ActDesign) — Mon, 19 Mar 2012 14:49:00 -0700

Ακόμα ένα καινούργιο gadget για να μοιράζονται οι αναγνώστες σας τις αναρτήσεις σας!Αυτή η κόκκινη καρδιά απεικονίζει το κουμπί"share this"και στο ανοιγμά της εμφανίζονται εικονίδια απο το facebook,twitter,email και το share this.Άλλο ένα πολύ πρακτικό widget που αν τοποθετηθεί στην γωνία της σελίδας σας θα τραβήξει την προσοχή των αναγνωστών σας και θα προσφέρει πολλά περισσότερα share.

ΔΙΑΔΙΚΑΣΙΑ:
1.Σύνδεση στο Blogger►Σχεδίαση►Επεξεργασία HTML►Πάντα δημιουργία αντιγράφων ασφαλείας
2.Ψάξτε για το ακόλουθο

</head>

3.Αντιγραφή και Επικόλληση τον ακόλουθο κωδικό ακριβώς κάτω απο το παραπάνω

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

4.Στην συνέχεια βρείτε το ακόλουθο τμήμα κωδικού

</body>

5.Αντιγραφή και Επικόλληση τον ακόλουθο κωδικό ακριβώς κάτω απο τον παραπάνω κωδικό

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><a href="http://blog-act-design.blogspot.com/">Sharing Bookmarking widgets</a>

Αυτό που πρέπει να αλλάξετε είναι η θέση του gadget που είναι με κίτρινο χρώμα.Έτσι όπως είναι ο κωδικός θα εμφανίζεται στην κάτω αριστερή γωνία.Αυτό φυσικά μπορείτε να το αλλάξετε.Βλέποντας τον κωδικό με το κίτρινο χρώμα αν θέλετε αλλάξτε το
bottom►top κάτω►πάνω
left►right αριστερά►δεξιά
Επίσης μπορείτε να αλλάξετε και τα ποσοστά.
ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΑΛΛΑΓΗ ΣΤΥΛ ΧΡΩΜΑΤΟΣ ΣΧΟΛΙΩΝ ΤΟΥ ΣΥΓΓΡΑΦΕΑ ΣΤΟ BLOGGER

noreply@blogger.com (Blog ActDesign) — Fri, 9 Mar 2012 07:21:00 -0800

Σ'αυτην την ανάρτηση θα ασχοληθούμε με την περιοχή των σχολίων και συγκεκριμένα πως θα αλλάξουμε και πως θα προσαρμόσουμε τα σχόλια του συγγραφέα που ανήκει το κάθε blog ώστε και να ξεχωρίζουν απο τα σχόλια των επισκέπτων.Έτσι προσαρμόζοντας τα θα ενθαρύνουμε τους αναγνώστες να λάβουν μέρος στην συζήτηση και να μπορούν να επικοινωνήσουν καλύτερα με τον συγγραφέα.

Η ΔΙΑΔΙΚΑΣΙΑ ΕΙΝΑΙ Η ΕΞΗΣ :

1.Blogger►Σχεδίαση►Επεξεργασία HTML►Κλίκ Επέκταση Πρότυπων Γραφικών στοιχείων►Με το ctrl_f ψάχνουμε το ακόλουθο...

]]></b:skin>

2.Ακριβώς απο πάνω αντιγράψτε τον παρακάτω κωδικό...

.comment-body-author {
-moz-border-radius: 15px;
border-radius: 15px;
background: #000000;
color: #ffffff;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px;
}

.comment-body-author:hover {
-moz-border-radius: 15px;
border-radius: 15px;
background: #cccccc;
color: #000000;
border-top: 1px solid #990000;border-bottom: 1px solid #990000;border-left: 1px solid #990000;border-right: 1px solid #990000;
margin:0;
padding:0 0 0 20px;
}

3.Μπορείτε να κάνετε τις εξής αλλαγές:
Στον πρώτο κωδικό με κίτρινο χρώμα
--για να αλλάξετε χρώμα στο φόντο των σχολίων του συγγραφέα αλλάξτε αυτό #000000
--για να αλλάξετε το χρώμα της γραμματοσειράς,αλλάξτε αυτό#ffffff
--για να αλλάξετε το χρώμα του περιγράμματος αλλάξτε αυτό #223344
--αλλάξτε το στύλ του περιγράμματος απο dotted (διακεκομένη)σε solid(ενιαία)και επίσης αν θέλετε μεγαλύτερο πάχος 1px
Στον δεύτερο κωδικό με θαλασσί χρώμα
--Ο δεύτερος κωδικός αφορά το φόντο των σχολίων του συγγραφέα όταν τοποθετείται ο κέρσορας επάνω.Επίσης και εδώ μπορούμε να κάνουμε τις εξής αλλαγές

--για να αλλάξετε χρώμα στο φόντο των σχολίων του συγγραφέα αλλάξτε αυτό#cccccc
--για να αλλάξετε το χρώμα της γραμματοσειράς,αλλάξτε αυτό#000000
--για να αλλάξετε το χρώμα του περιγράμματος αλλάξτε αυτό #990000
--αλλάξτε το στύλ του περιγράμματος απο solid (ενιαία)και επίσης αν θέλετε μεγαλύτερο πάχος 1px
Και στους δύο κωδικούς μπορείτε να αλλάξετε και το πλάτος.Επίσης μπορείτε και στους δύο κωδικούς αντί να αλλάξετε το χρώμα του φόντου,να βάλετε ένα φόντο της αρεσκείας σας,αλλάζοντας το background: #000000; σε background:url(url εικόνας );

4.Επόμενο βήμα είναι να ψάξετε για αυτό τον κωδικό...

<dd class='comment-body' expr:id='data:widget.instanceId +

data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>

Υπάρχει περίπτωση στο δικό σας πρότυπο να είναι λίγο διαφορετικός ο κωδικός,παράδειγμα να μην υπάρχει η γραμμή που έχω τονισμένη.Δεν υπάρχει πρόβλημα ακολουθήστε το βήμα όπως σας δείχνω παρακάτω.Αν δεν υπάρχει απλά διαγράψτε την απο τον κάτω κωδικό.Δηλαδή να είναι έτσι <dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
5.Αντικαταστήστε τον με τον ακόλουθο κωδικό...

<b:if cond='data:comment.author == data:post.author'>

</dd>

<b:else/>

</b:if>

ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΕΜΦΑΝΙΣΗ ΣΤΙΣ ΕΤΙΚΕΤΕΣ ΜΟΝΟ ΟΙ ΤΙΤΛΟΙ ΑΝΑΡΤΗΣΕΩΝ

noreply@blogger.com (Blog ActDesign) — Sun, 4 Mar 2012 14:40:00 -0800

Οι ετικέτες(Labels) του Blogger είναι όπως λέμε οι κατηγορίες που τοποθετούμε τις αναρτήσεις μας και τις κατηγοριοποιούμε ανάλογα με το περιεχόμενο τους.Στα περισσότερα blogs κάθε ανάρτηση που τοποθετούμε στην ετικέτα που έχουμε επιλέξει ,εμφανίζεται με τον τίτλο και την περιγραφή της.
Σ'αυτή την ανάρτηση θα σας δείξω τον τρόπο να εμφανίζεται μόνο ο τίτλοςΈτσι αν έχουμε μεγάλο πλήθος αναρτήσεων σε κάθε ετικέτα το αποτέλεσμα να φαίνονται μόνο οι τίτλοι θα είναι πιο όμορφο και εύχρηστο για τους αναγνώστες μας.

ΔΙΑΔΙΚΑΣΙΑ

Blogger►Σχεδίαση►Επεξεργασία HTML►Τσεκάρουμε την Επέκταση προτύπων γραφικών στοιχείων
►Βρείτε με την βοήθεια του Ctrl_f το παρακάτω κωδικό

<b:include data='post' name='post'/>

►Τον αντικαθιστούμε με το παρακάτω κωδικό

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

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

<div style='padding:6px 0 6px 5px;border-right:1.5px solid #000;border-bottom:1.5px solid #000;margin-bottom:2px;background:#E6E4E4;color:#000000;'>
<img alt='>>>' border='0' src='https://lh5.googleusercontent.com/-HP5XyclRQic/TXMMAKmlg5I/AAAAAAAAAQk/wrCGFu9jzmg/s1600/sidebar-icon.png'/>
<data:post.title/></div></a>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

►Το σημείο με το ρόζ χρώμα είναι το background χρώμα,μπορείτε να το επεξεργαστείτε ή και να το διαγράψετε.Επίσης αν θέλετε αντί για background χρώμα background:#E6E4E4; μπορείτε να βάλετε εικόνα για φόντο,διαγράφετε τον παραπάνω κωδικό και βάζετε αυτό background:(εδώ τοποθετείτε το url εικόνας);

►Το σημείο με το θαλασσί χρώμα είναι η διεύθυνση του εικονιδίου μπρόστα απο τον τίτλο,μπορείτε να τον αλλάξετε με δικό σας icon.
ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΤΕΛΕΙΟ SHARE BOX WIDGET

noreply@blogger.com (Blog ActDesign) — Sat, 3 Mar 2012 10:58:00 -0800

Ακόμα ένα απο τα ωραιότερα Share Box.Όπως βλέπετε αυτό το widget περιέχει συνδέσμους απευθείας στις σελίδες σας στο Facebook,στο RSS,στη Google και στην σελίδα σας στο Twitter.Επιπλέον δείχνει τον αριθμό των συνδρομητών σας μέσω του ηλεκτρονικού ταχυδρομείου σας.
Η διαδικασία είναι η εξής:
Blogger ►Σχεδίαση► Στοιχεία Σελίδας► Προσθήκη gadget► Επιλογή HTML-Javascript► Αντιγραφή-Επικόλληση τον παρακάτω κωδικό▼

ΠΡΕΠΕΙ ΝΑ ΑΝΤΙΚΑΤΑΣΤΗΣΕΤΕ ΤΑ ΕΞΗΣ :
1.Αντικαταστήστε το http://feeds.feedburner.com/Blog-actdesign με το δικο σας feed id,θα το βρείτε σε 5 σημεία
2.Αντικαταστήστε το https://www.facebook.com/pages/Blog-ActDesign/323187117713920 με την δική σας διεύθυνση facebook

3.Αντικαταστήστε το https://plus.google.com/u/0/112023820144324944670 με την δική σας google διευθυνση
4.Αντικαταστήστε το https://www.twitter.com/BlogActDesign με το δικό σας twitter username
ΑΠΟΘΗΚΕΥΣΗ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

MASHABLE SHARING WIDGET ΓΙΑ ΤΟ BLOG ΣΑΣ

noreply@blogger.com (Blog ActDesign) — Sat, 3 Mar 2012 06:34:00 -0800

Εγώ το λέω όλα σε ΕΝΑ.Απο τα πιο ωραία widget δημιούργημα του mashable.com.
Χρησιμοποιείτε απο πολλά Wordpress blogs,τώρα και στον Blogger.
H διαδικασία είναι πολύ απλή:
Blogger ►Σχεδίαση► Στοιχεία Σελίδας► Προσθήκη gadget► Επιλογή HTML-Javascript► Αντιγραφή-Επικόλληση τον παρακάτω κωδικό▼

/*<!CDATA[*/

#ba&d-mashable{width:300px;margin:auto;padding:0;}

.ba&d-googleplus {height: 57px;}

.ba&d-facebook {background#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}

.ba&d-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}

.ba&d-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}

.ba&d-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}

.ba&d-twitter a.twitter-follow-button {display: block;}

.ba&d-twitter iframe {margin: 9px 11px;}

.ba&d-emailbox {background-color: #f26f1d;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}

.ba&d-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}

.ba&d-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}

.ba&d-emailbox input.emailu:focus {color: #333;}

.ba&d-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}

.ba&d-emailbox input.submitu:hover {text-decoration: none;}

.ba&dOrange{border:1px solid #E08121 ;text-shadow:1px 1px 0 #E08121;background: #f79d4a;background: -moz-linear-gradient(top, #f79d4a 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f79d4a), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -o-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: linear-gradient(top, #f79d4a 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79d4a', endColorstr='#ef871f',GradientType=0 );}

.ba&dOrange:hover{background: #f4b67c;background: -moz-linear-gradient(top, #f4b67c 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4b67c), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -o-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: linear-gradient(top, #f4b67c 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b67c', endColorstr='#ef871f',GradientType=0 );}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}

.ba&d-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}

/*]]>*/

</style>

/*<![CDATA[*/

window.___gcfg = {lang: 'en'};

(function(){

var po = document.createElement("script");

po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(po, s);

})();

/*]]>*/

</script>

</div>

</div>

(function() {

var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;

po.src = "https://apis.google.com/js/plusone.js";

var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);

})();/*]]>*/

</script>

<span>Recommend on Google</span>

</div>

<a href="https://twitter.com/BlogActDesign" class="twitter-follow-button" data-show-count="true">Follow @BlogActDesign</a>

</div>

<tr>

<td>

</td>

</td>

</tr>

</table>

</form>

</div>

<a href="http://blog-act-design.blogspot.com/search/label/useful%20gadgets">Get this Gadget</a>

</div>

Σημαντικά πράγματα που πρέπει να αντικαταστήσετε
1.Αντικαταστήστε το https://plus.google.com/112023820144324944670 με την δικιά σας Google plus διεύθυνση.
2.Αντικαταστήστε το https%3A%2F%2Fwww.facebook.com%2Fpages%2FBlog-ActDesign%2F323187117713920 με το δικό σας username στο facebook.
3.Αντικαταστήστε το BlogActDesign με το δικό σας username στο Τwitter
4.Αντικαταστήστε το Blog-actdesign με το δικό σας Feedburner.π.χ(http://feeds.feedburner.com/Blog-actdesign
5.Αποθήκευση
ΕΙΣΤΕ ΕΤΟΙΜΟΙ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΑΝΤΙΚΑΤΑΣΤΗΣΤΕ "ΔΗΜΟΣΙΕΥΣΗ ΣΧΟΛΙΟΥ "ΜΕ ΕΙΚΟΝA

noreply@blogger.com (Blog ActDesign) — Sun, 19 Feb 2012 08:33:00 -0800

Ένα ακόμη ωραίο κολπάκι σχεδίασης του blog σας.
Σ'αυτή την ανάρτηση θα σας δείξω πως μπορείτε να αντικαταστήσετε"Δημοσίευση σχολίου "με εικόνα
▼

▼

ΒΗΜΑ 1
Πίνακας Ελέγχου►Σχεδίαση►Επεξεργασία HTML►
Επέκταση πρότυπων γραφικών στοιχείων

ΒΗΜΑ 2
Βρείτε το ακόλουθο τμήμα κωδικού

ΒΗΜΑ 3
Διαλέξτε μια απο τις παρακάτω εικόνες και αντικαταστήστε τον παραπάνω κωδικό με τον κωδικό εικόνας που σας αρέσει

 <a href='http://blog-act-design.blogspot.com'><img src='http://i1169.photobucket.com/albums/r502/blogactdesign/Blog-ActDeisgn-comment4.png'/></a>

 <a href='http://blog-act-design.blogspot.com'><img src='http://i1169.photobucket.com/albums/r502/blogactdesign/Blog-ActDesign-comment3.png'/></a>

 <a href='http://blog-act-design.blogspot.com'><img src='http://i1169.photobucket.com/albums/r502/blogactdesign/BLOG-ACTDESIGN-comment1.png'/></a>

 <a href='http://blog-act-design.blogspot.com'><img src='http://i1169.photobucket.com/albums/r502/blogactdesign/Blog-ActDesign-comment5.png'/></a>

<a href='http://blog-act-design.blogspot.com'><img src='http://i1169.photobucket.com/albums/r502/blogactdesign/Blog-ActDesign-comment6.png'/></a>

<a href='http://blog-act-design.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV6Pa3h55Pxz-XovUzS3UjS2iT8G8Jd0KeUB09a3HR7lh-8g4N1HVIjN1jjFAbLfbLyKA9uDrRPVhvjoTKp_RJl7zP8yOJCIXD1OVTWgyNePBWbSH9XY18Xw3Cjk7IhE1blZ1iD8W16Ot-/s1600/animated+comment+arrow.gif'/> </a>

<a href='http://blog-act-design.blogspot.com'><img src='http://i1169.photobucket.com/albums/r502/blogactdesign/Blog-ActDesigncomment6.png'/></a>

 <a href='http://blog-act-design.blogspot.com'><img src='http://i1169.photobucket.com/albums/r502/blogactdesign/Blog-ActDesigncomment7.png'/></a>

ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΠΡΟΣΘΗΚΗ ΔΙΑΧΩΡΙΣΤΙΚΗΣ ΓΡΑΜΜΗΣ ΜΕΤΑΞΥ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ

noreply@blogger.com (Blog ActDesign) — Tue, 14 Feb 2012 15:28:00 -0800

Αν δεν θέλετε μια απλή γραμμή μεταξύ των αναρτήσεων σας,αλλά ξεχωριστές γραμμές που θα έχετε επιλέξει μόνο εσείς τότε διαβάστε αυτή την ανάρτηση!
Πρώτα από όλα πρέπει να βρείτε την (εικόνα)γραμμή στο διαδίκτυο που θα τοποθετήσετε.
Πρέπει να προσέξετε το πλάτος της να είναι μικρότερο απο αυτό των αναρτήσεων σας #main-wrapper { ώστε να μην φαίνεται παραμορφωμένη.

#main-wrapper {
float: left;
width: 587px;

Τεράστια γκάμα dividers lines(διαχωριστικών γραμμών) έχει εδώ

ΒΗΜΑΤΑ:

Δημιουργία αντιγράφου ασφαλείας
Πίνακας Ελέγχου►Σχεδίαση►Επεξεργασία HTML
Βρείτε το ακόλουθο μέρος κωδικού

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

4. Αντικαταστήστε το με τον παρακάτω

.post {

background: url(url of picture);

background-repeat: no-repeat;

background-position: bottom center;

margin:.5em 0 1.5em;

border-bottom:0px dotted $bordercolor;

padding-bottom:3.5em;

}

....ο κωδικός στο βήμα 3 μπορεί να είναι λίγο διαφορετικός.Σημαντικό είναι να βρείτε την παράγραφο με το .post {

   5. Αντικαταστήστε το πορτοκαλί τμήμα με το url της εικόνας σας(γραμμής).Επίσης μπορείτε να αυξήσετε/μειώσετε την αξία του padding-bottom:3.5em; για να δημιουργήσετε χώρο μεταξύ της γραμμής και του κάτω μέρους των αναρτήσεών σας.

   6.Προεπισκόπηση
   7.ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

*Θα σας δείξω και έναν δεύτερο τρόπο να προσθέσετε στο blog σας dividers lines ΜΟΝΟ εάν ο πρώτος δεν λειτουργεί ή αντιμετωπίσετε προβλήματα.

ΒΗΜΑTA:

Δημιουργία αντιγράφου ασφαλείας
Πίνακας Ελέγχου ►Σχεδίαση►Επεξεργασία HTML►Τσεκάρετε Επέκταση προτύπων γραφικών στοιχείων
Με την βοήθεια του ctrl-f βρείτε το παρακάτω μέρος κωδικού

4. Αμέσως μετά απο αυτή την γραμμή τοποθετήστε το παρακάτω κωδικό

5.Προεπισκόπηση
6.ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΒΑΛΤΕ ΟΜΟΡΦΑ SEARCH BOXES ΣΤΟ BLOG ΣΑΣ

noreply@blogger.com (Blog ActDesign) — Mon, 13 Feb 2012 02:28:00 -0800

Η ΔΙΑΔΙΚΑΣΙΑ ΕΙΝΑΙ ΑΠΛΗ:
►Πίνακας Ελέγχου ►Σχεδίαση►Στοιχεία σελίδας►Προσθήκη gadget►Διαλέξτε απο την λίστα HTML-Javascript►Επιλέξτε όποιο στύλ search box σας αρέσει,αντιγραφή-επικόλληση τον κωδικό►Αποθήκευση

STYLE 1

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtp7iNIfYCgFgWZSrF2mJuCH8aOkIC60mj_06aM59iPT0zgbnPt8B7Sp29rtG44cW7KWXWIPPz8_37P-h9lUeX1UcxxfxduZQtBTWzG1DEKyb7gjKnmwBntXtBiYaM0kF_Jo8gWXAAiXgA/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get">    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/><br />     <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>

STYLE 2

 <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD4kblXtTg-ddR9x5hHs8ZSpZNQmq7DZto1k7L4D_0cz48UhS-mjno_H7Amv0VTq4agNfSiZFnHBjnCm0kQXjT133c7EbpAIl_uLK807OZV3SXpEEf9s4-GgiEeOIIIUFGxx5aenPL_XhH/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get">    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/><br />     <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>

STYLE 3

 <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFw45dQdPZv2_8jvNIse_sbwud2J2mhWJhv4EfwCg6wSuHK2Gyk9nHPIVPzxSbiUPkS_irz_wUjZjnU0neG1azzdGBI_mhS8wpF4vEuDLjK8uIPSxCeGxuORssIVFU1aE_iIq2HJRfwS_/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get">    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/><br />     <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>

STYLE 4

 <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFMNy8CQrcsquLoiN1OcopOWS61NR7UWYkZSspa1mnqHXEmPnnTkzNWSUtnr04DQP1rbG13myQlydaXgHmVV5ajqjreAdF7iyRtpasS7sJabash6-N2na2_BQm2w7cAACEKPtvFblh7Knq/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get">    <input type="text" id="s" name="q" value=""/><br />     <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>

STYLE 5

 <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEH7OzEo5-fVtyzE4lvAKz3IMYbOKkR9X0yZXMr1-vtU90bWsL-EelSykQ1u_gXcs36Vi6TJi-6ITq3xugmfWPdxrH_QJQ1nqQ3Vk5rgtYbPts4XqETsK_ucpx55736tAQx4f_RuHH0cM0/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get">    <input type="text" id="s" name="q" value=""/><br />     <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div> <br>

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

POP UP FACEBOOK LIKE BOX

noreply@blogger.com (Blog ActDesign) — Sun, 5 Feb 2012 04:22:00 -0800

Σε προηγούμενη ανάρτηση σας έδειξα πως μπορείτε να προσθέσετε στο Blog σας FLOATING FACEBOOK LIKE BOX.
Σε αυτή την ανάρτηση θα σας δείξω πως να τοποθετήσετε ένα επίσης μοναδικό και όμορφο Facebook gadget.Ότταν εισέρχεται κάποιος επισκέπτης στο blog σας θα εμφανίστει ένα αναδυόμενο παράθυρο του facebook like box.Επιπλέον το gadget θα εμφανιστεί μόνο στην πρώτη επίσκεψη ώστε οι αναγνώστες ή εσείς να μην χρειαστεί να το βλέπετε κάθε φορά

Η διαδικασία είναι η εξής:
Σχεδίαση ►Προσθήκη gadget►Επιλέξτε HTML/Javascript►Αντιγραφή-Επικόλληση τον παρακάτω κωδικό

<style>

ColorBox Core Style:

The following CSS is consistent between example themes and should not be altered.

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}

#cboxOverlay{position:fixed; width:100%; height:100%;}

#cboxMiddleLeft, #cboxBottomLeft{clear:left;}

#cboxContent{position:relative;}

#cboxLoadedContent{overflow:auto;}

#cboxTitle{margin:0;}

#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

.cboxPhoto{float:left; margin:auto; border:0; display:block;}

.cboxIframe{width:100%; height:100%; display:block; border:0;}

User Style:

Change the following styles to modify the appearance of ColorBox. They are

ordered & tabbed in a way that represents the nesting of the generated HTML.

#cboxOverlay{background:#000;opacity:0.5 !important;}

#colorbox{

box-shadow:0 0 15px rgba(0,0,0,0.4);

-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);

-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);

}

#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjej6AjuoM7G_3CJPOy9cvmecUuzOF2wb4K8QZM-9dR6ZejfdOTE_jUxi1x0Qb7IJIl4hv87vYx_KRZHh_rNXwt_rC7UN_Y-PZIEKuGba6cVKqsRx_lPc32a_INY7_3OhRQrBNTOiJ5DTDF/s1600/controls.png) no-repeat 0 0;}

#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDhYrsyyAubdA3gyyatFkEbDcoDGHrfD1Cb7mkPHs3WOPhSwN9vMxupX1N7iJSGVBYGooOhkqNkl5iiKuDsvxdts8vM8CyOSWe5nMHEzCF_yehQUvM_ukveUwHW2lGCxqbKixOszKWXbM/s1600/border.png) repeat-x top left;}

#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjej6AjuoM7G_3CJPOy9cvmecUuzOF2wb4K8QZM-9dR6ZejfdOTE_jUxi1x0Qb7IJIl4hv87vYx_KRZHh_rNXwt_rC7UN_Y-PZIEKuGba6cVKqsRx_lPc32a_INY7_3OhRQrBNTOiJ5DTDF/s1600/controls.png) no-repeat -36px 0;}

#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjej6AjuoM7G_3CJPOy9cvmecUuzOF2wb4K8QZM-9dR6ZejfdOTE_jUxi1x0Qb7IJIl4hv87vYx_KRZHh_rNXwt_rC7UN_Y-PZIEKuGba6cVKqsRx_lPc32a_INY7_3OhRQrBNTOiJ5DTDF/s1600/controls.png) no-repeat 0 -32px;}

#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDhYrsyyAubdA3gyyatFkEbDcoDGHrfD1Cb7mkPHs3WOPhSwN9vMxupX1N7iJSGVBYGooOhkqNkl5iiKuDsvxdts8vM8CyOSWe5nMHEzCF_yehQUvM_ukveUwHW2lGCxqbKixOszKWXbM/s1600/border.png) repeat-x bottom left;}

#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjej6AjuoM7G_3CJPOy9cvmecUuzOF2wb4K8QZM-9dR6ZejfdOTE_jUxi1x0Qb7IJIl4hv87vYx_KRZHh_rNXwt_rC7UN_Y-PZIEKuGba6cVKqsRx_lPc32a_INY7_3OhRQrBNTOiJ5DTDF/s1600/controls.png) no-repeat -36px -32px;}

#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjej6AjuoM7G_3CJPOy9cvmecUuzOF2wb4K8QZM-9dR6ZejfdOTE_jUxi1x0Qb7IJIl4hv87vYx_KRZHh_rNXwt_rC7UN_Y-PZIEKuGba6cVKqsRx_lPc32a_INY7_3OhRQrBNTOiJ5DTDF/s1600/controls.png) repeat-y -175px 0;}

#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjej6AjuoM7G_3CJPOy9cvmecUuzOF2wb4K8QZM-9dR6ZejfdOTE_jUxi1x0Qb7IJIl4hv87vYx_KRZHh_rNXwt_rC7UN_Y-PZIEKuGba6cVKqsRx_lPc32a_INY7_3OhRQrBNTOiJ5DTDF/s1600/controls.png) repeat-y -211px 0;}

#cboxContent{background:#fff; overflow:visible;}

#cboxLoadedContent{margin-bottom:5px;}

#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEQoQOpVBNnOiBarRKddvcnv07rEsgtzkDFQEpDfn48-qKWPZ1kf8dlpsbouaLaiPxBELpFETUZ326jjy8O0KAVe72-_VjQvRn6BDeJ4aHl4xjedB444OyPYGIS4vlIdXFJ0E3T8QYkluo/s1600/loading-background.png) no-repeat center center;}

#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTxWEh7M-bp069DlvH34aeKMHVZ2It8R2LRkqc_W31dGEEsHYFtvCpBsFWzQnKTjTuRFXdEQsuPt5T_4otYV4q910taLi7AaS7WJ9Sot_Wl-n6UPRMvtj6HbczW2w_79nsu2Im9VI2PQ58/s1600/loading.gif) no-repeat center center;}

#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}

#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjej6AjuoM7G_3CJPOy9cvmecUuzOF2wb4K8QZM-9dR6ZejfdOTE_jUxi1x0Qb7IJIl4hv87vYx_KRZHh_rNXwt_rC7UN_Y-PZIEKuGba6cVKqsRx_lPc32a_INY7_3OhRQrBNTOiJ5DTDF/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}

#cboxPrevious{left:0px; background-position: -51px -25px;}

#cboxPrevious.hover{background-position:-51px 0px;}

#cboxNext{left:27px; background-position:-75px -25px;}

#cboxNext.hover{background-position:-75px 0px;}

#cboxClose{right:0; background-position:-100px -25px;}

#cboxClose.hover{background-position:-100px 0px;}

.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}

.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}

.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}

.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*-----------------------------------------------------------------------------------*/

/* Facebook Likebox popup For Blogger

/*-----------------------------------------------------------------------------------*/

#subscribe {

font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;

}

#subscribe a,

#subscribe a:hover,

#subscribe a:visited {

text-decoration:none;

}

.box-title {

color: #3B5998;

font-size: 20px !important;

font-weight: bold;

margin: 10px 0;

border:1px solid #ddd;

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

box-shadow: 5px 5px 5px #CCCCCC;

padding:10px;

line-height:25px; font-family:arial !important;

}

.box-tagline {

color: #999;

margin: 0;

text-align: center;

}

#subs-container {

padding: 35px 0 30px 0;

position: relative;

}

a:link, a:visited {

border:none;

}

.demo {

display:none;

}

</style>

jQuery(document).ready(function(){

if (document.cookie.indexOf('visited=true') == -1) {

var fifteenDays = 1000*60*60*24*30;

var expires = new Date((new Date()).valueOf() + fifteenDays);

document.cookie = "visited=true;expires=" + expires.toUTCString();

$.colorbox({width:"400px", inline:true, href:"#subscribe"});

}

});

</script>

<h3 class="box-title">Για να λαμβάνετε όλες τις ενημερώσεις μέσω Facebook.Απλά κάντε κλίκ στο like button και γίνετε μέλη<center><p style="line-height:3px;" >▼</p></center></h3>

<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://blog-act-design.blogspot.com/">Useful Gadgets</a>

</div>

Αντικαταστήστε το JMakeup4you με το δικό σας username της σελίδας σας στο facebook.Αν η σελίδα σας δεν έχει ένα απλό username τότε δημιουργήστε ένα Like box εδώ

Μόλις το δημιουργήσετε αντιγράψτε τον i-frame κωδικό
και επικολλήστε τον στον κωδικό με το θαλασσί χρώμα

ΑΠΟΘΗΚΕΥΣΗ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΠΩΣ ΝΑ ΒΑΛΕΤΕ RELATED POSTS WIDGET ME THUMBNAILS(v2)

noreply@blogger.com (Blog ActDesign) — Tue, 31 Jan 2012 05:44:00 -0800

ΠΣε προηγούμενη ανάρτηση σας πρότεινα πώς να βάλετε widgets αναρτήσεων με μικρογραφίες κάτω απο τα άρθρα σας μέσω το Linkwithin ή του Outbrain.
Σε αυτή την ανάρτηση θα σας δείξω πώς μπορούμε να τοποθετήσουμε related posts widget με thumbnails απευθείας απο το blog σας .Το οποίο θα είναι κάπως έτσι

Τα βήματα είναι τα εξής:
Blogger ►Σχεδίαση►Επεξεργασία HTML►Τσεκάρετε την Επέκταση προτύπων γραφικών στοιχείων

Με το Ctrl-f ψάχνουμε το...

</head>

...Αντιγράψτε και επικολλήστε το παρακάτω τμήμα κωδικού αμέσως μετά απο το </head>

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh_YWvB_Rlobe5s6DvVjnmjG2gHaBDb4rm1TjcbObvqyDtbsBGKaqAM3UYJm5v18F_em6f1LvmrLN9ly4f2Af891LiNywPj0_zo1CohAfAwq_GRIF9FEXXNEOn-bE32dptadEbW_WUfJfc/s1600/noimage.png";

var maxresults=5;

var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='https://gj37765.googlecode.com/svn/bloggerwidget/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

Στην συνέχεια βρείτε το ακόλουθο τμήμα...

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

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://gj37765.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkaf5sURyLaAT2qnZ8PXyUVF-52MXMvyIB00vbi-YURdZPEtKgCLFBKt3xW6jSD9D2Ju5r9VQsaVi8jaBgLsn2gYnUkeSrTluVBAoM9sHC0af11FAtRA0bNLKqOz09HIfnVzlhhOrFzPwr/s1600/best%252Bblogger%252Btips.png'/></a>
</b:if></b:if>

ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

LINKWITHIN vs OUTBRAIN

noreply@blogger.com (Blog ActDesign) — Sun, 29 Jan 2012 13:58:00 -0800

Τα 2 κορυφαία widgets τα οποία παρουσιάζουν σχετικές αναρτήσεις απο την αρχειοθήκη σας.
Και το Linkwithin και το Outbrain εμφανίζονται κατώ απο κάθε σας ανάρτηση και διαφέρουν στο ελάχιστο.

Το Linkwithin εμφανίζει αναρτήσεις μόνο με μικρογραφίες(thumbnails).Το μόνο που έχετε να κάνετε για να πάρετε το widget είναι να δώσετε το email σας,την διεύθυνση του blog σας,σε ποιά πλατφόρμα βρίσκεται η σελίδα σας(blogger,wordpress....) και πόσες αναρτήσεις θα θέλατε να εμφανίζει αυτό το widget (3-5).

Το Outbrain σας δίνει 2 επιλογές εμφάνισης αναρτήσεων, μικρογραφίες ή κείμενο.Επίσης μπορείτε να προσθέσετε feedback κάτω απο κάθε σας ανάρτηση όπου το Outbrain σας δίνει 2 επιλογές,

είτε να βαθμολογήσουν οι αναγνώστες σας με αστεράκια

είτε να προτείνουν την ανάρτηση

Τέλος για να προσθέσετε το widget στο blog σας πρέπει να επιλέξετε την πλατφόρμα σας για να μεταφερθείτε στην σελίδα προσθήκης στοιχείου σελίδας του Blogger.Επιπλέον δημιουργώντας έναν δωρεάν λογαριασμο στο Outbrain έχετε πρόσβαση στις προηγμένες ρυθμίσεις το widget.

Η ΕΠΙΛΟΓΗ ΔΙΚΗ ΣΑΣ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΠΩΣ ΝΑ ΒΑΛΕΤΕ ΣΤΟ BLOG ΣΑΣ"JQUERY SOCIALIZE SHARING TOOL"

noreply@blogger.com (Blog ActDesign) — Thu, 26 Jan 2012 17:14:00 -0800

Σ'αυτή την ανάρτηση θα σας δείξω ενα πραγματικά πολύ όμορφο social networking sharing εργαλείο.Εμγανίζεται στο κάτω μέρος της σελίδας σας στα δεξιά.

Το μόνο που έχετε να κάνετε είναι το εξής:
Blogger ►Σχεδίαση►Επεξεργασία HTML

Ctrl-F και εντοπίζεται το παρακάτω...

<head>

...Αντιγραφή και επικόλληση αμέσως μετά το <head>τον παρακάτω κωδικό

ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

FLOATING FACEBOOK LIKE BOX ΓΙΑ ΤΟ BLOG ΣΑΣ

noreply@blogger.com (Blog ActDesign) — Tue, 24 Jan 2012 12:00:00 -0800

Σ'αυτή την ανάρτηση θα σας δείξω πως να προσθέσετε ένα διαφορετικό και πολύ χρήσιμο μετακινούμενο FACEBOOK BUTTON στα δεξιά της οθόνης σας αποκαλύπτοντας το LIKE BOX..Είναι πολύ χρήσιμο γιατί

εξοικονομεί χώρο στο blog σας και συγκεκριμένα στο sidebar
βρίσκεται πάντα στο οπτικό πεδίο των αναγνωστών σας,αυξάνοντας έτσι τα like στην facebook σελίδα σας

Τα βήματα είναι τα εξής:
►Σύνδεση στο Blogger►Σχεδίαση►

Κάνετε αντιγραφή και επικόλληση τον παρακάτω κωδικό

<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() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2toDMsXwEKMWmSJc_8B1TblKKkNOCpjiBOWiz3z8Zgjql3P9w61LCFHuxiFQRKffmu-yPyg8UKSudYziOOZI1lPCMILZ1eucNKKXcTPJBKuVxOoMJrPG7pX9K2vaNEAOEzGL-6yjcX7Y/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.floatinglikebox div{border:none;position:relative;display:block;}

.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.floatinglikebox span a{color: #808080;text-decoration:none;}

.floatinglikebox span a:hover{text-decoration:underline;}

</style><div class="floatinglikebox" style="">

<div>

<iframe src="//www.facebook.com/plugins/likebox.php?

href=

http%3A%2F%2Fwww.facebook.com%2Fpages%2Fόνομα_του_fan_page_σας%2FID_του_fan_page

&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true">
 </iframe><span><a href="http://blog-act-design.blogspot.com/2012/01/floating-facebook-like-box-blog.html" target="_blank">Useful gadgets</a></span>
 </div></div>

Αντικαταστήστε το όνομα_του_fan_page_σας καιτο

 ID_του_fan_page με αυτά την δική σας Facebook σελίδα(η διεύθυνση βρίσκεται στην address bar του broswer σας)

ΑΠΟΘΗΚΕΥΣΗ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΒΑΛΤΕ ΕΙΚΟΝΙΔΙΟ ΣΤΙΣ ΕΤΙΚΕΤΕΣ(LABELS) ΚΑΙ ΣΤΟΥΣ ΣΥΝΔΕΣΜΟΥΣ(LINKS) ΣΤΗΝ ΠΛΕΥΡΙΚΗ ΣΤΗΛΗ(SIDEBAR)

noreply@blogger.com (Blog ActDesign) — Mon, 23 Jan 2012 13:40:00 -0800

Προσθέτοντας εικονίδιο δίπλα απο τις ετικέτες σας ή σε οποιουσδήποτε άλλους συνδέσμους θα δείχνει στο blog σας κάτι ξεχωριστό και πολύ όμορφο...Πρίν επεξεργαστείτε τον HTML του Blog σας πρέπει να κάνετε λίγα πράγματα.

Η εικόνα που θα διαλέξετε πρέπει να έχει μέγεθος 16x16(px) ή και μικρότερη.Θα βρείτε πολλά arrows icons με διαφανές φόντο στην σελίδα FINTICONS/ARROWS και οι περισσότερες σε μέγεθος 16x16(px).Δεξί κλικ (copy image location)..(θα δείτε παρακάτω που πρέπει να το επικολλήσετε)
;Άν έχετε εικονίδιο αποθηκευμένο σε δικό σας φάκελο τότε ανεβάστε την εικόνα σας σε δωρεάν υπηρεσιές φιλοξενίας ιστοσελίδων(Photobucket,Tinypic,Picasa)ώστε να αντιγράψετε το url της εικόνας

Προχωράμε τώρα στα γνωστά εξής βήματα:
Πίνακας ελέγχου ►Διάταξη►Επεξεργασία HTML►Λήψη πλήρους προτύπου

Βρείτε το παρακάτω τμήμα κωδικού

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

Αντικαταστήστε το παραπάνω με αυτόν τον κωδικό(Επειδή μπορεί να διαφέρει λίγο ο κωδικός στο δικό σας πρότυπο,απλά βρείτε το ".sidebar ul" και το ".sidebar li" και αντικαταστήστε τα με το παρακάτω κωδικό

.sidebar ul {

list-style:none;

margin:0 0 0;

padding:10px 0 0;

}

.sidebar ul li {

background:url("http://i33.tinypic.com/332b6dt.jpg") no-repeat 2px .25em;

margin:0;

padding:0 0 3px 16px;

margin-bottom:2px;

text-indent:7px;

line-height:1.3em;
}

-Αντικαταστήστε το ("url εικόνας") που είναι με πορτοκαλί χρώμα,με το url της δικιάς σας εικόνας
-Επίσης το σημείο που είναι με ρόζ χρώμα είναι η απόσταση μεταξύ του εικονιδίου και του κειμένου(αν αυξήσετε τα px αυξάνεται και η απόσταση)
-Στο πράσινο μέρος αλλάζετε το κάθετο διάστημα(ύψος γραμμής)μεταξύ των συνδέσεων)
►Προεπισκόπηση
ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

noreply@blogger.com (Blog ActDesign) — Mon, 23 Jan 2012 05:41:00 -0800

Το SYNC είναι ένα κοινωνικό δίκτυο (Social network) στο Internet, στο οποίο οι Έλληνες μπορούν να δημιουργούν, να καταχωρούν και να μοιράζονται κάθε είδους περιεχόμενο - κείμενα, εικόνες, video, ήχους. Ξεκίνησε τη δικτυακή του ζωή τον Οκτώβριο του 2006, δημιουργώντας ένα κατάλογο όλων των Ελληνικών podcasts (SYNC Podcasts) ενώ Ιανουάριο του 2007 έγινε ο μεγαλύτερος συναθροιστής (aggregator) των Ελληνικών blogs με την υπηρεσία SYNC Blogs.
Τον Μάϊο του 2007 πρόσθεσε την υπηρεσία SYNC Live.

Με μια απλή και δωρεάν εγγραφή,μπορείς να παρακολουθείς τα ελληνικά blogs και να καταχωρείς τα αγαπημένα σου και να έχεις το RSSfeed των blogs που σου αρέσουν.Επίσης, συνδέεσαι με φίλους σου, ανταλλάσεις μηνύματα, και εμφανίζεις αυτόματα όσα κάνεις σε άλλα δίκτυα - Twitter, blogs, κλπ.
Τέλος, αν είσαι blogger μπορείς να προσθέσεις και στην συνέχεια να "πιστοποιήσεις" ότι κάποιο blog σου ανήκει. Με αυτό τον τρόπο θα μπορείς να δίνεις στο κοινό του SYNC ακριβείς πληροφορίες για το blog σου, να το καταχωρείς σε συγκεκριμένες κατηγορίες και να τους βοηθάς να το βρουν ευκολότερα.Επιπλέον μέσω του badge SYNC ME προσθέτοντας το στο blog σου μπορούν οι επισκέπτες σου και οι αναγνώστες σου να προσθέτουν το blog σου στα αγαπημένα τους!

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

ΑΥΞΗΣΤΕ ΤΗΝ ΕΠΙΣΚΕΨΙΜΟΤΗΤΑ ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ

noreply@blogger.com (Blog ActDesign) — Sun, 22 Jan 2012 08:15:00 -0800

Σε μερικά βήματα μπορείτε να γίνεται μέλος του BRANCH.GR που σας επιτρέπει να αυξήσετε την κίνηση στην σελίδα σας,να δημιουργήσετε backlinks,και να συνδεθείτε με άλλους bloggers.
ΤΑ ΒΗΜΑΤΑ ΕΙΝΑΙ ΑΠΛΑ ΚΑΙ ΕΙΝΑΙ ΤΑ ΕΞΗΣ:

Κάνετε εγγραφή στο Branch.gr.Eίναι εντέλως δωρεάν!
Μόλις εγκριθεί ο λογαριασμός σας μπορείτε να δημιουργήσετε(ο τρόπος είναι πολύ απλός) ένα Widget (απόκτηση marketing εργαλείο για την προώθηση της σελίδας σας) για το website σας και να το βάλετε σε ένα καλό σημείο στην σελίδα σας ώστε οι επισκέπτες σας να βλέπουν ένα preview των posts άλλων μελών,τα οποία είναι τακτοποιημένα με thumbnails,περιγραφές και ελκυστικούς τίτλους,που έχουν σαν αποτέλεσμα να κλικάρονται απο τους επισκέπτες σας.Με τα κλίκ οι σελίδες ανοίγουν σε νέο παράθυρο,έτσι οι επισκέπτες δεν φεύγουν απο την σελίδα σας .Τα κλίκ οδηγούν στην μεταβατική σελίδα του Branch.gr,στην οποία ο επισκέπτης έχει την δυνατότητα να βρεί και άλλα posts και να κάνει επιπλέον κλίκ και σα άλλες ιστορίες.Αυτή η σελίδα είναι σημαντική για τον μηχανισμό του Branch.gr
Μόλις ενσωματώσετε το Widget στην σελίδα σας στην συνέχεια μπορείτε να προσθέσετε και τα δικά σας posts στην κεντρική σελίδα του Branch.gr.

Τα κλικ που κάνανε οι επισκέπτες στο Branch.gr το σύστημα σας τα επιστρέφει πίσω. Θα λάβετε 150-200% περισσότερους επισκέπτες από όσους θα στείλετε στο Branch.gr. Αυτό σημαίνει αν 100 visitors κάνουν κλικ στο Widget της σελίδα σας θα λάβετε μεταξύ 150-200 επισκέπτες που έχουν ενδιαφερθεί για το περιεχόμενο σας και έχουν έρθει από παρόμοια sites .

Βελτιστοποίηση Click-Through Rate

Μέσα από τη συνεχή ανάλυση των επιδόσεων της εκ περιτροπής προβολής των posts που εμφανίζονται στο widget σας το Branch.gr δημιουργεί περισσότερα κλικ στα widgets. Ετσι, η αύξηση του ποσοστού των κλικ έχει θετική επίδραση στην επισκεψιμότητα στην σελίδα σας (όσα περισσότερα κλικ στέλνετε στο Branch.gr μέσα από το widget, τόσο περισσότεροι οι επισκέπτες που θα λάβετε ).

 ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!

SUBSCRIPTION BLOG GADGETS-BEAUTIFUL ICONS

noreply@blogger.com (Blog ActDesign) — Thu, 19 Jan 2012 15:37:00 -0800

Απο τα πιο δημοφιλή και απαραίτητα gadget που πρέπει να έχει καθε blog.
Τα εικονίδια συνδέουν τους αναγνώστες σας με:

την σελίδα σας στο FACEBOOK

το RSS του blog σας

το προφίλ σας στο TWITTER

H ΔΙΑΔΙΚΑΣΙΑ ΚΑΙ Ο ΚΩΔΙΚΟΣ ΓΙΑ ΝΑ ΤΟΝ ΠΡΟΣΘΕΣΕΤΕ ΣΤΟ BLOG ΣΑΣ ΕΙΝΑΙ ΤΑ ΕΞΗΣ

Πηγαίνετε►Πίνακας Ελέγχου►Σχεδίαση►Προσθήκη Gadget►HTML/JAVASCRIPT

Αντιγραφή και επικόλληση τον παρακάτω κωδικό

<a href="http://feeds.feedburner.com/Blog-actdesign" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYWTcB8mHkbf0aAVgspB5CzQ5GxaGn_790epFpL9AcieL_xaBKsKK_fAMxL-fJW3ufSbYrthsJpb0MzZBlQG_U3lj2_C-1m-56ViqAZ73hy8-4Fi6HuAINFnfMztFhhuYU4C9wJXO5UiE/s1600/rss.png" /></a><a href=" http://www.facebook.com/pages/Blog-ActDesign/323187117713920 " imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-23R7iMQYXos/TcCnWEQwPtI/AAAAAAAADlc/jGPp_QBi8Y/s1600/facebook.png" /></a><a href=" http://twitter.com/BlogActDesign " imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcQaYSQYs3e6raNawbqX4wKdg-bCi0mC07HrIq_AGklNh3ogm77mZeD2T7uU3mZ4xsAEZSX2b1HIfaI_hhrkRVx2J5Q5-svJ1UlqKsnyavbRnKDH6kkR94pZk3M-vE5gIJsxULHZlOc0Vs/s320/twitter.png" /></a><br/><a href="http://blog-act-design.blogspot.com/
" target="_blank"><small>Blog Gadgets</small></a>

Και η επόμενη διαδικασία ειναι απλή.Αντικαθιστάτε με την σειρά, τις διευθύνσεις που είναι με μώβ χρώμα.

με τo δικό σας rss feed του blog σας
με την δικιά σας σελίδα ή προφίλ στο facebook
με το δικό σας προφίλ στο twiiter

Οι διευθύνσεις url των εικόνων είναι με πορτοκαλί χρώμα,τα αντικαθιστάτε με τα εικονίδια που θέλετε εσείς,Θα βρείτε πάρα πολλά σε αυτό το site FIND ICONS

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!