Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Τρίτη, Φεβρουαρίου 9

10

Πως μπορούμε να κάνουμε τις αναρτήσεις μας να εμφανίζονται σε ξεχωριστά πλαίσια .





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

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

> Θα επεξεργαστούμε για αυτό το παράδειγμα , ένα απλό minima  blogger πρότυπο .
Ας δούμε πρώτα πια είναι η βασική δομή του πρότυπου μας και ποιους κωδικούς  θα επεξεργαστούμε :


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 1000px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
#main-wrapper {
  width: 600px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }


 > Αυτός είναι ο βασικός  κώδικας που συνήθως βρίσκουμε στο προεπιλεγμένο μας πρότυπο .  Τώρα, αυτό που πρέπει να επεξεργαστούμε εδώ είναι το main-wrapper , Αυτός ο κώδικας  καθορίζει την περιοχή που Δημοσιεύουμε τις αναρτήσεις μας στο Blogger Πρότυπο.
Για να κάνουμε κάθε ανάρτηση σε ένα ξεχωριστά πλαίσια  , ακλουθούμε τα παρακάτω βήματα .

Βήμα 1ο :

Βρίσκετε στο πρότυπο σας τον ακόλουθο κώδικα :


#main-wrapper {
  width: 600px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }


> Εισάγετε τον κώδικα με τα πράσινα χρώματα ανάμεσα στους παρακάτω κωδικούς , όπως βλέπετε παρακάτω :



#main-wrapper {
background:#FFFFFF;
border: 3px solid #FEF0DB;
padding-right:7px;
padding-left:7px;

width: 600px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}




> Αυτό που κάνουμε στην ουσία είναι , να  προσθέσουμε χρώμα φόντου , borders και μερικά padding

Βήμα 2ο :

> Τώρα για να κάνουμε της αναρτήσεις μας να  εμφανίζονται σε ξεχωριστά πλαίσια , θα πρέπει να βρούμε τις παρακάτω γραμμές



/* Posts
-----------------------------------------------
*/
h2.date-header {
  margin:1.5em 0 .5em;
  }
.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }


> Και προσθέτουμε  τους κωδικούς με το μπλε  χρώμα  ανάμεσα στους παρακάτω κωδικούς . Ακριβώς  όπως τα βλέπετε κάτω



/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
background:#E6E6E6;
border: 1px solid #BDBDBD;
padding-right:7px;
padding-left:7px;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
background:#F2F2F2;
border: 1px solid #BDBDBD;
padding-right:7px;
padding-left:7px;
}



Σημείωση : Αλλάζετε τα χρώματα και τα padding / padding ανάλογα με τις προτιμήσεις σας

Τώρα κάνετε προεπισκόπηση πρότυπου και αν όλα είναι εντάξει αποθηκεύετε το πρότυπο σας  και το τελικό αποτέλεσμα , αν όλα είναι σωστά , θα να είναι σαν αυτό :


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

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

10:

mavros gatos είπε...

Πολύ καλό, αλλά τί γίνεται με το πρωτυπο TEKKA? Εκεί δεν μπορώ να βρώ τα σημεία που πρέπει να βαλώ αυτά που περιγ΄ραφεις.

mavros gatos είπε...

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

mavros gatos είπε...

Σε ευχαριστώ πολύ, έχεις πολύ ενδιαφέροντα θέματα.

bloggertrics είπε...

@ mavros gatos

Καλησπέρα σου

Στο πρότυπο tekka αντί για το   #main-wrapper {    θα βρεις  αυτό :

#main {

float:left;
padding-bottom:20px;
padding:0px;
width:55%;
margin;0 1px;
font: $bodyFont;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

και αντί για το παρακάτω κώδικα : 


/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

θα βρεις αυτόν τον κώδικα  :


h2.date-header {
border-bottom:none;
font-size: 130%;
text-align:left;
margin-top:20px;
margin-bottom:14px;
padding:1px;
padding-left:17px;
color: $dateHeaderColor;
font-weight: normal;
font-family: Trebuchet MS, Verdana, Sans-serif;
}

.post h3 {
font-size: 150%;
font-weight:bold;

}

.post h3 a,
.post h3 a:visited {
color: $mainTextColor;
}

.post {
padding-left:20px;
margin-bottom:20px;
text-indent:10px;
padding-right:20px;
line-height:22px;
}

mavros gatos είπε...

Θέλω να δοκιμάσω να βάλω μεγάλο κείμενο σε δύο στήλες, μήπως είναι καλύτερα και πιο βολικό για διάβασμα. Έχεις κάποια ανάρητση για αυτό;
:-D

mavros gatos είπε...

Ωωωω είμαι βλάκας, το βρήκα με ελάχιστο ψάξιμο σε ευχαριστώ.

bloggertrics είπε...

Kαλησπερα και καλή σαρακοστή να εχεις

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

Αν δεν είναι αυτό που ψάχνεις , μπορείς να μου πεις τι ακριβώς θέλεις να κάνεις , αν μπορώ να σε βοηθήσω :*

Galini είπε...

ΤΕΛΕΙΟ!!!! Εδώ και καιρό ήθελα να το κάνω, για να φαίνονται καλύτερα οι φωτογραφίες, αλλά δεν ήξερα πως!!! Και τώρα όχι μόνο το έβαλα, αλλά το έφτιαξα και όπως ακριβώς το ήθελα!!!!! Τόσο ωραία και αναλυτικά τα παρουσιάζεις! Ευχαριστώ και πάλι!!!

bloggertrics είπε...

Galini μου καλησπέρα :-D

Χαίρομαι πολύ που σε βοήθησε αυτή η ανάρτηση !
Σ'ευχαριστω πολύ για τα καλά σου λόγια , να είσαι καλά :*

Rock n' Metal Whisper είπε...

Προσπάθησα να βρω τους κώδικες που λες, όμως δεν υπάρχει τίποτα στο δικό μου html.

Μήπως μπορείς να βοηθήσεις?? Τι άλλο πρέπει να κάνω??

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS