27 Μαρτίου 2010



12 Διαχωριστική εικόνα μεταξύ αναρτήσεων

Εάν θέλεις να βάλεις κάποιο διαχωριστικό δικής σου έμπνευσης ανάμεσα στις αναρτήσεις σου, ώστε να διαχωρίζεται η κάθε μία απο τις άλλες, και εάν δεν σου αρέσει το κοινό και απλό διαχωριστικό μιας κοινής γραμμής, τότε ακολούθα τις παρακάτω οδηγίες. Η σημερινή ανάρτηση, γίνεται κατόπιν ερώτησης απο τον κοινό μας φίλο, τον Μητσομπόνο Παναγιώτη, ο οποίος και δέχτηκε να αναφερθεί και το όνομά του. Τον ευχαριστώ λοιπόν για την ευκαιρία να ξαναγράψω πάνω στο θέμα αυτό.
Πρώτα απ όλλα, πρέπει να φτιάξεις την εικόνα (image) που θα χρησιμοποιήσεις σαν διαχωριστικό, ή να βρείς κάποια που σου αρέσει στο web (και που θα επιτρέπεται η ελεύθερη χρήση της). Όπως κι αν έχει, πρέπει να είσαι προσεκτικός στο να είναι το width του διαχωριστικού σου, μικρότερο απο το width του wrapper section (post section), έτσι ώστε να φαίνεται κανονικά ολόκληρο, και όχι κομένο στα πλάγια επειδή δεν χωρούσε.
#main-wrapper { width: 410px; float: $startSide;
Αρχικά, κάνε upload την εικόνα σου (divider) σε κάποιο δωρεάν web image hosting service. Όταν το κάνεις upload, αντέγραψε το URL link της εικόνας κάπου πρόχειρα. Υπάρχουν πάρα πολλά δωρεάν hosting services για εικόνες, μουσική και ότι άλλο χρειάζεσαι. Δύο πολύ γνωστά (στον καθ' ένα πιστεύω) είναι και τα παρακάτω, που μπορείς να δοκιμάσεις: TinyPic, και PhotoBucket Τώρα, υπάρχουν δύο τρόποι για να καταφέρεις να βάλεις το διαχωριστικό (δοκίμασε το πρώτο αρχικά, και αν συναντήσεις τυχόν προβλήματα, τότε προχώρα με το νούμερο 2): 1. Ok. Κάνε τώρα Back-up το template σου. Και πήγαινε στο: ΠΑΝΟΠΤΗΣ ► ΔΙΑΤΑΞΗ ► ΕΠΕΞΕΡΓΑΣΙΑ HTML, βρές το ακόλουθο κομάτι κώδικα (κάνε χρήση CTRL +F, ή Option + F για όσους έχετε Mac):
.post { margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; }
Αντικατάστησε τον παραπάνω κώδικα, με τον παρακάτω
.post { background: url(http://βάλε_το_λινκ_της_εικόνας_που_αποθήκευσες_πρίν_ΕΔΩ.jpg); background-repeat: no-repeat; background-position: bottom center; margin:.5em 0 1.5em; border-bottom:0px dotted $bordercolor; padding-bottom:3.5em; }
...ο δικός σου κώδικας ίσως διαφέρει κάπως, σημαντικό είναι να βρείς την παράγραφο ".post"... ...αντικατάστησε το πορτοκαλί κομάτι του κώδικα με το URL της uploaded εικόνας (διαχωριστικής)... ...μπορείς να μεγαλώσεις / μικραίνεις τις μεταβλητές απο το "padding-bottom" για να δημιουργήσεις κάποια απόσταση, μεταξύ της διαχωριστικής εικόνας και του τέλους της ανάρτησης...
Έτσι θα φαίνεται στο περίπου. Σίγουρα δεν είναι καμία τρελή ομορφιά, μα πάρεις μια ιδέα περί τίνος πρόκειται. 2. Χρησιμοποίησε αυτόν τον τρόπο, εάν ο παραπάνω δεν σου δούλεψε.. Κάνε Back-up το template σου. Και πήγαινε πάλι στο: ΠΑΝΟΠΤΗΣ ► ΔΙΑΤΑΞΗ ► ΕΠΕΞΕΡΓΑΣΙΑ HTML ► και μαρκάρισε το ΕΠΕΚΤΑΣΗ ΓΡΑΦΙΚΩΝ ΣΤΟΙΧΕΙΩΝ Ξανά CTRL + F (ή Option +F για Mac), και βρές στο code section τον παρακάτω κώδικα:
<div class='post-footer-line post-footer-line-3'/>
Αμέσως κάτω απο αυτήν την γραμή κώδικα, πρόσθεσε και την επόμενη..
<center><img height='20' src='ΤΟ URL THΣ ΕΙΚΟΝΑΣ ΣΟΥ ΕΔΩ'/></center>
Το Height = 20 έχει να κάνει με το ύψος της εικόνας σου, ώστε να μην κόβεται λόγω μεγέθους, και να φαίνεται ολόκληρη κανονικά. Και μην ξεχάσεις, να αντικαταστήσεις το κομάτι με τα κόκκινα γράμματα, με την δική σου εικόνα. Καλή επιτυχία.
"Γειά σου, Εάν βρέθηκες για πρώτη φορά στο Blog μου, και εάν σε ενδιαφέρουν οι αναρτήσεις μου, μπορείς να εγγραφείς στο RSS feed του Blog. Μπορείς επίσης να κάνοντας εγγραφή στο Newsletter του blog μου, να λαβαίνεις απ ευθείας κάθε μου ανάρτηση στο email σου. Είσαι Twitter user; τότε μπορείς επίσης να με κάνεις Follow στο Twitter. Σε ευχαριστώ που με διαβάζεις,"




Print this post



Related Posts :



12 σχόλια:

TwistedTool είπε... Best Blogger Tips

Χαχα, Νίκο, σε πρόλαβα! Το έκανα πριν μερικές μέρες που είχα πέσει πάνω σε σχετική ανάρτηση σε άλλο blog (που δε θυμάμαι τώρα..). Πάντως, καλό είναι να δίνουμε τα credits εκεί που πρέπει!

Για όσους ενδιαφέρονται, έχω τοποθετήσει αυτή την εικόνα (http://img230.imageshack.us/img230/2415/dividerv.gif) για divider στο blog μου και μπορείτε να τη δείτε σε λειτουργία στο atwistedblog.blogspot.com ..

Είναι ιδανική για blogs με μαύρο background! Χρησιμοποιήστε την ελεύθερα, είναι ανεβασμένη σε δικό μου λογαριασμό στο imageshack.

Νίκο, thanks again!


Apokalipsis999 είπε... Best Blogger Tips

Ωραίο το κολπάκι. Μόλις το χρησιμοποίησα στο μπλογκ μου. Καλή Μεγ. Εβδομάδα.


kogionaro είπε... Best Blogger Tips

Ευχαριστούμε πολύ Νίκο. Καλή Ανάσταση και Καλό Πάσχα !!!


apneagr είπε... Best Blogger Tips

Μια άσχετη με την ανάρτηση ερώτηση Νικόλα, Πως εμφανίζω τις ετικέτες κάτω από την ανάρτηση; Ευχαριστώ
apneagr


AATON είπε... Best Blogger Tips

Καλό Πάσχα και καλή Ανάσταση σε όλους σας.

*** apneagr, απο την "Διάταξη" πήγαινε στο τετράγωνο που αντιστοιχεί στις "Αναρτήσεις ιστολογίου", και εκεί θα δείς κάπου στη μέση να λέει "Περιγραφή: φωτογραφίες, διακοπές"
Τσεκάρισέ το και θα εμφανίζονται οι ετικέτες σου κανονικά μετά.


apneagr είπε... Best Blogger Tips

Ευχαριστώ Νικόλα Καλή Ανάσταση για όλους...


MaCher είπε... Best Blogger Tips
Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.

MaCher είπε... Best Blogger Tips
Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.

Makedon είπε... Best Blogger Tips

Γειάσου Νίκο, μήπως έχεις υπόψιν σου πως βάζουμε διαχωριστική γραμμή ανάμεσα στις αναρτήσεις;
Το πρότυπο είναι Sand Dollar


fani είπε... Best Blogger Tips

Nικόλα μου γεια σου, εγώ έχω βάλει ένα χαριτωμένο divider από ένα site που τα διαθέτει δωρεάν αλλά το θέμα είναι ότι φαίνεται και το λευκό background μαζί με την εικόνα ενώ θα έπρεπε να είναι διάφανο. Πώς μπορώ να το διορθώσω? Η εικόνα είναι jpeg και όχι png. Μήπως υπάρχει κάποιο κολπό για να φαίνεται διάφανο στο υπόβαθρο του blog μου?

























?


olga είπε... Best Blogger Tips

Αρχικά θα ήθελα να σε ευχαριστήσω πολύ για τις οδηγίες μου έχουν χρησιμέψει πολύ. Έβαλα και εγώ την διαχωριστική γραμμή με τον 2ο τρόπο αλλά σήμερα που μπήκε η εικόνα που είχα διαλέξει έχει αντικατασταθεί από μια εικόνα με διαφημίσεις που αλλάζει συνεχώς. Πήγα να διαγράψω τον πρόσθετο κώδικα για την εικόνα αλλά δεν τον βρίσκω πουθενά! Μήπως έχει ιδέα τι έχει συμβεί;


Fani Kerasiotou είπε... Best Blogger Tips

Εγώ τώρα που θέλω να το εξαφανίσω μου λες που θα ψάξω να το βρω?


Δημοσίευση σχολίου

Πες πως δεν έχεις χρόνο να σχολιάσεις.. να 'χεις πάρει όμως σοβαρό ύφος, καλά;

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.

Next Next Next