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

Πέμπτη, Φεβρουαρίου 18

13

Χωρίστε την επικεφαλίδα του blogger ( blogger header ) σε 2 τμήματα - Updated !

Όπως θα έχετε παρατηρήσει η επικεφαλίδα μου είναι χωρισμένη σε 2 τμήματα .



Από την μια μεριά είναι η επικεφαλίδα του blog μου και από την άλλη μεριά είναι έξτρα χώρος , όπου μπορώ να προσθέσω κάποιο HTML/ javascript Widget η κάποιο banner .

Λοιπόν , για να γίνει αυτό , είναι πολύ εύκολο Dancing

Απλά ακολουθείτε τα παρακάτω βήματα :

  •   Συνδεθείτε στο blogger λογαριασμό σας
  •   Πηγαίνετε   Διάταξη –> Επεξεργασία HTML  και μην πατήσετε στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων
  •   Και ψάχνετε στο πρότυπο σας τον παρακάτω κώδικα :

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

  • Τώρα αντικαταστήστε τον πάνω κώδικα με τον κώδικα που σας δίνω κάτω :
 
#header {
float:left;
width:40%;
height:150px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header2{
float:left;
width:60%;
height:150px ;
}

Σημείωση : Προσαρμόστε ανάλογα με τις ανάγκες σας το width και το  height …

  •   Τώρα ψάχνουμε πάλι στο πρότυπο μας  τον παρακάτω κώδικα :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='ΟΝΟΜΑΣΙΑ ΤΟΥ BLOG (Header)' type='Header'/> </b:section>
</div>

Σημείωση : ΟΝΟΜΑΣΙΑ ΤΟΥ BLOG  είναι η πραγματική ονομασία του blog σας . Στο πρότυπο σας το maxwidgets='1' μπορεί να είναι maxwidgets='2' η 3 η 5 και το showaddelement='no' μπορει να ειναι  yes


  •   Αντικαταστήστε τον πάνω κώδικα με τον κώδικα που σας δίνω παρακάτω :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->

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

Το αποτέλεσμα σας θα μοιάζει με αυτό :




Καλή επιτυχία σε όλους

 Για το πρότυπο ΤΕΚΚΑ  :


  Βρείτε στο πρότυπο ΤΕΚΚΑ σας τον παρακάτω κώδικα :


<b:widget id='Header' locked='true' title='test (Κεφαλίδα)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId +
&quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. -->
<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; + &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; + data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;px;&quot; + &quot;_height: &quot; + data:height + &quot;px;&quot;
+ &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width:
0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span&
gt;</p>
</div>
</b:includable>
</b:widget>


Και όταν τον βρείτε , διαγράψτε τον ολόκληρο .

Τώρα βρείτε αυτούς τους κωδικούς :

<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

Και κολλήστε ακριβώς από κάτω τον παρακάτω κώδικα :


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)'
type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->

Τώρα το τελευταίο βήμα.

  • Βρείτε τις παρακάτω γραμμές του κώδικα :
 
.description {
text-align: center;
padding-top:10px;
}

Και αντικαταστήστε τις με τον παρακάτω κώδικα   :

#header {
float:left;
width:40%;
height:150px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
} #header2{
float:left;
width:60%;
height:150px;
}

Αποθηκεύετε το πρότυπό σας και το αποτέλεσμα θα μοιάζει με αυτό :


13:

mavros gatos είπε...

Καλημέρα.
Δυστυχώς στο πρώτυπο ΤΕΚΚΑ δεν μπόρεσα να βρω ποιές γραμμές πρέπει να αντικαταστήσω. Αν θέλεις γράφεις ποιές είναι αυτές;

bloggertrics είπε...

@<span>mavros gatos</span>

Καλησπερα σου
Οκ . Εκανα UPDETE στην αναρτηση και εξηγω για το προτυπο ΤΕΚΚΑ  τι πρεπει να κανεις :-P

Johnpatra είπε...

Σοφία πέρασα να σου πω ότι κάνεις πολύ καλή δουλειά..
έχεις υπόψην σου κανένα μαύρο - τρίστηλο πρότυπο (κάτι σαν το minima dark) γιατί θέλω να αλλάξω πρότυπο.

mavros gatos είπε...

Ωωωωχ μέκανε άνω κάτω την κεφαλίδα-εικόνα και τώρα πρέπει να το επαναφέρω.

mavros gatos είπε...

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

Σε ευχαριστώ πολύ και καλή συνέχεια.

mavros gatos είπε...

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

mavros gatos είπε...

Γράψε μου σε παρακαλώ πως επαναφέρω την προηγούμενη κατάσταση. :(

mavros gatos είπε...

Την πάτησα, τώρα δεν εμφανίζεται και το read more.
Έχεις κάπου για ρύθμιση για εμφάνιση του: διαβάστε περισσότερα;

bloggertrics είπε...

<p>@<span><span>mavros gatos</span><span> </span></span>
</p><p> 
</p><p>Σίγουρα κάτι δεν έκανες σωστά !!!!
</p><p> 
</p><p>αυτόν τον τρόπο τον εχω δοκιμάσει η ιδια και δουλεύει άριστα .

</p><p> 
</p><p>Μπορείς να μου γράψεις ποια ειναι η σελίδα σου να ρίξω μια ματιά ???
</p><p>Σε ψάχνω αλλα δεν σε βρήκα ....
</p><p> 
</p><p> </p>

bloggertrics είπε...

Για τα το επαναφερεις σε προηγουμένη κατάσταση άλλαξε τους καινούργιους κωδικούς με τούς παλιούς ,
αυτούς που άλλαξες εξαρχής .
Τους γράφω στην ανάρτησή μου  τους παλιούς κωδικούς .

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

bloggertrics είπε...

@<span>Johnpatra</span>

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

Χαίρομαι που πέρασες και σ'ευχαριστω για τα καλά σου λόγια 

αν βρω κάποιο καλό πρότυπο , θα σε ενημερώσω .

Να είσαι καλά .  

bloggertrics είπε...

Είχες εικόνα για το<span> read more η link ?</span>

Αν χρησιμοποιείς εικόνα , μπορεί να φταίει το url της εικόνας . έλεγξε το  ...

Όπως έγραψα και πριν γράψε μου την σελίδα σου για να δω τι γίνετε !

mavros gatos είπε...

Το μόνο που έκανα, επειδή λόφω βιασύνης δεν αποθήκευσα το πρότυπο, να ξαναεπιλέξω από την αρχή το ίδιο πρότυπο και τώρα ψάχνω τις αναρτήσεις εδώ και εκεί για να ξανακάνω κα΄τι ωραίες παρεμβάσεις και αλλαγές που είχα κάνει με βοήθεια άλλων μπλόκερς, όπως εσύ.
Καλά τώρα την πάτησα και είναι αργά. Μαζί με κάτι άλλ που είχα κάνει είχα βάλει και κάτω από την κεφαλίδα αναδυόμενα μενού και δεν θυμάμαι από πήρα κωδικό και τον έβαλα στην html για να δουλέψει.
http://gataros.blogspot.com/

 

© 2010 Bloggertrics

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

ΑΡΧΙΚΗ| Sitemap| Posts RSS