Διαχωριστική γραμμή ανάμεσα στις αναρτήσεις


Με αφορμή ένα σχόλιο της φίλης και αναγνώστριας του blog μου Xristin, θα ασχοληθούμε στη σημερινή ανάρτηση. Η Χριστίνα λοιπόν με ρώτησε πως μπορεί να βάλει διαχωριστική γραμμή ανάμεσα στις αναρτήσεις του blog της. Όλα τα templates έχουν συγκεκριμένη ρύθμιση για αυτό, αλλά στην συγκεκριμένη περίπτωση της φίλης μας, κάτι έγινε και απορυθμίστηκε.
Να πω επίσης ότι η ανάρτηση αυτή είναι χρήσιμη για όλους, (κι ας έχουν την διαχωριστική γραμμή στο blog τους), καθώς με την συγκεκριμένη ρύθμιση μπορούμε να αυξομειώσουμε το πάχος της διαχωριστικής γραμμής.
Σαν παράδειγμα θα πάρουμε το template minima dark, διότι αν και δεν το αναφέρει, αυτό πρέπει να χρησιμοποιεί η φίλη μας. Το ίδιο ισχύει όμως και για όλα τα templates με μικρές διαφορές.
Πάμε λοιπόν.
Πηγαίνουμε στον Πανόπτη μας, και επιλέγουμε Διάταξη-->Επεξεργασία HTML και αφού κάνουμε λήψη πλήρους προτύπου, για παν ενδεχόμενο, με το γνωστό τρόπο Ctrl+F ψάχνουμε να βρούμε το

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


Όπως προανέφερα, σε άλλα templates μπορεί να είναι κάπως διαφορετικό αλλά σίγουρα θα ξεκινάει με το

.post {
margin

Το σημείο που είναι με κόκκινο χρώμα αναφέρεται στο πάχος της διαχωριστικής γραμμής. Της φίλης μας Χριστίνας λογικά θα είναι 0.
Αλλάζουμε τον συγκεκριμένο αριθμό, με τον αριθμό της αρεσκείας μας. Ανάλογα με το backround, χρησιμοποιήστε 1 έως 2 για σκουρόχρωμα backrounds, και ίσως λίγο μεγαλύτερο για τα ανοιχτόχρωμα. Όπως και να έχει, η επιλογή είναι δική σας, ανάλογα τα γούστα σας.

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

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

Για οποιδήποτε διευκρίνηση, μην διστάσετε να επικοινωνήσετε μαζί μου.
Περιμένω τα σχόλιά σας.


Add To Facebook Add To Twitter Add To Yahoo Stumble This Fav This With Technorati Add To Del.icio.us Digg This Add To Reddit

17 σχόλια:

Eva F. είπε...

Αχ! πρέπει και αυτό να το μάθω....
...με βάζεις σε μπελάδες να ψάχνομαι πάλι....
Χα! Χα! Χα!....
Να είσαι καλά....

ekabitis είπε...

Σιγά σιγά θα σε κάνω ξεφτέρι! Χα χα χα!

xristin είπε...

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

ekabitis είπε...

Να 'σαι καλά Xristin. Εκτός από εσένα μπορεί να βοηθήσει και κάποιους άλλους.

pgetsos είπε...

pos tha valoume ena banner ?

ekabitis είπε...

pgetsos. ρίξε μια ματιά εδώ.
Αν θες καμιά διευκρίνηση, στείλε μου mail.

louie είπε...

καλησπέρα ekabitis!
αρχικά να σου πω για μια ακόμα φορά πως η δουλειά σου είναι φανταστική!
συνεχίστε έτσι!

λοιπόν, έχω πρόβλημα! δεν μπορώ να βάλω το κενό μεταξύ των αναρτήσεων μου!
το πρότυπο μου είναι το "awesome inc"
και γενικά στην επεξεργασία html, δε μου εμφανίζεται το
".post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;"

μου εμφανίζονται πολλά
"border-bottom:1px dotted"
τα οποία άλλαξα μόνος μου να δω αν θα φτιάξει, αλλά τίποτα...

αν μπορείς να βοηθήσεις...

ευχαριστώ εκ των προτέρων...

ekabitis είπε...

Φίλε Louie, στο πρότυπο που χρησιμοποιείς, η ανάρτηση που βάζεις βρίσκεται μέσα σε ένα ,ας το πούμε, πλαίσιο. Βάζοντας δεύτερη ανάρτηση, δημιουργείται ένα νέο πλαίσιο σε απόσταση 20px.
Αν θέλεις να μεγαλώσεις αυτό το διάστημα βρες το

date-outer {
position: relative;
margin: $(date.space) 0 20px;
padding: 0 15px;

και μεγάλωσε την τιμή του margin από 20px σε μεγαλύτερο αριθμό.

louie είπε...

καλησπέρα και πάλι ekabiti!
να σε ευχαριστήσω για τις άμεσες απαντήσεις σου, είσαι τρομερός!

στην περίπτωση μου, δεν υπάρχει κενό μεταξύ των αναρτήσεων που κάνω την ίδια μέρα!
αντίθετα, μεταξυ των αναρτήσεων διαφορετικών ημερών όντως υπάρχει απόσταση 20px!

για να σε βοηθήσω να καταλάβεις τι εννοώ, έκανα 2 πρόχειρες αναρτήσεις (test1 kai test2)...

αν μπορείς ρίχνεις μια ματιά και μου λες... :)

p.s. τσέκαρε την ψηφοφορία που τέλιωσα μόλις (είναι μακρινάρι) και μιας και είσαι γνώστης αν θες ψηφίζεις κιόλας! χαχαχ...

σε ευχαριστώ και πάλι!

ekabitis είπε...

Louie, βρες το

.post-outer, .inline-ad {
border-top: 1px solid $(post.border.bevel.color);

και μεγάλωσε το 1px σε μεγαλύτερο αριθμό.
Πολύ ωραία η ψηφοφορία!
Από τα εμφανιζόμενα έχω μόνο 2-3!
Αν έχεις κανένα διπλό, και το έχεις για δόσιμο, ... στείλε μου mail!

Φανή είπε...

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

ekabitis είπε...

Έχω ...χρόνια να ασχοληθώ.
Απ' ότι είδα το πρότυπο του blogger έχει αλλάξει ριζικά!
Προσπάθησε να το βρεις, βρίσκοντας το url της φωτογραφίας της γραμμής που έχεις βάλει. (Αν το έχεις).
Αν βρω λίγο χρόνο, θα το κοιτάξω κι αγώ και θα επανέλθω.
Καλή επιτυχία.

ekabitis είπε...

Επανέρχομαι.
Το πρότυπο έχει "υποστεί" μία σμίκρυνση.
Πήγαινε στη σειρά 47, και πάτα το μαύρο σημαδάκι που βρίσκεται δίπλα του.
Αυτόματα θα αναπτυχθεί το πρότυπο. Στη σειρά 221 θα βρεις αυτό που θέλεις να διαγράψεις. Το post δλδ.
Καλάή επιτυχία.

Φανή είπε...

ekabiti σε ευχαριστώ πάρα πολύ για την πολύτιμη βοήθειά σου.

Φανή είπε...

Δυστυχώς το url της φωτογραφίας που έχω βάλει την βρήκα αλλά το site imageshake δεν είναι πια δωρεάν και για να μου το δώσει πρέπει να πληρώσω. Εν τω μεταξύ εκεί που μου είπες να ψάξω δεν βρίσκω url πουθενά για να το διαγράψω.

ekabitis είπε...

Αφού έχεις την διεύθυνση (url) του εικονιδίου, πήγαινε στην επεξεργασία html και πατώντας control+f κάνε το επικόλληση για να βρεις που είναι.
Εν συνεχεία, ή διέγραψέ το εντελώς ή αντικατέστησέ το με ένα νέο url εικόνας από άλλο site που είναι δωρεάν. Για παράδειγμα το http://postimage.org/

Φανή είπε...

Το βρήκα!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Ήταν στη σειρά 166 του κώδικα και το αντικατέστησα.
Χίλια ευχαριστώ!!!!!!

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