Χωρίστε την ανάρτηση σε 2 ή 3 κάθετες στήλες

Σας έχει τύχη ποτέ να θέλετε να χωρίσετε σε 2 στήλες την ανάρτηση σας ;
Εμένα ναι, αν θέλετε και εσείς για κάποιο λόγο, εδώ είναι η λύση.

Πηγαίνετε κανονικά να βάλετε ανάρτηση και πατάτε πάνω αριστερά το HTML

Αντιγράψτε και βάλτε τοκ κώδικα που έχουμε από κάτω.
<div style="float: left; width: 45%">
<span style="font-weight: bold;">Εδώ το κείμενο της αριστερής στήλης</span></div>
<div style="float: right; width: 45%">
<span style="font-weight: bold;">Εδώ το κείμενο της δεξιάς στήλης</span></div>
<divstyle="clear: both"></div><br />
Θα βγεί όπως βλέπετε απο κάτω.

Εδώ το κείμενο της αριστερής στήλης

Εδώ το κείμενο της δεξιάς στήλης

Αν δεν θέλουμε έντονα γράμματα Σβήνουμε το bold; από τον κώδικα η αντιγράψτε τον κώδικα που έχουμε από κάτω
<div style="float: left; width: 45%;">
Αν δεν θέλουμε έντονα γράμματα</div>
<div style="float: right; width: 45%;">
Σβήνουμε το bold; από τον κώδικα η αντιγράψτε τον κώδικα που έχουμε από πάνω</div>
<divstyle both="" clear:=""></divstyle></div><br />

Αν θέλουμε 3 στήλες, αντιγράψτε τον κώδικα από κάτω.
<div style="float: left; width: 30%;">
Στήλη # 1</div>
<div style="float: left; width: 30%;">
Στήλη # 2</div>
<div style="float: left; width: 30%;">
Στήλη # 3</div>
<divstyle both="" clear:=""></divstyle><br />

Στήλη # 1

Στήλη # 2

Στήλη # 3

Παίξτε με τον κώδικα να τον κατανοήσετε καλύτερα, είναι εύκολος και δεν έχει κανένα κίνδυνο
Η Ανάλυση του κώδικα είναι η εξής :
<div style="float: left; width: 45%"> To float: left; είναι για να είναι στοιχισμένο το κείμενο μας αριστερά. Αν βάλουμε float: center; θα κεντράρει το κείμενο και αν βάλουμε float: right; θα το στοιχίσει δεξιά στην στήλη μας.

Το width: 45% είναι για να μας δείξει το πλάτος τις στήλης μας. με 45% λέμε να έχει το μισό πλάτος τις ανάρτησης. Μπορούμε να βάλουμε και width: 300px; Επίσης μπορούμε αν έχουμε 2 στήλες στην μία να έχουμε width: 30% και στην άλλη width: 60% Έτσι η μία στήλη θα έχει μεγαλύτερο πλάτος από την άλλη

Η δεύτερη και τελευταία γραμμή του κώδικα, ναι 2 γραμμών είναι ο κώδικας είναι η εξής ;
<span style="font-weight: bold;">Εδώ το κείμενο σας</span></div>
Το font-weight: bold; είναι για να έχει έντονη γραφή, αν δεν θέλουμε έντονη γραφή το σβήνουμε και μένει έτσι <span style="">Εδώ το κείμενο σας</span></div>
Η σβήνουμε όλο το span γράφουμε το κείμενο μας και κλείνουμε με </div>
Δείτε τον κώδικα από κάτω για να καταλάβετε.
<div style="float: left; width: 45%">
Εδώ το κείμενο σας</div>

Τέλος βάζουμε την γραμμή
<divstyle="clear: both"></div><br /> 
Το <br /> το βάζουμε για να αλλάξει γραμμή και να μπορούμε ξανά να γράψουμε σε όλο το πλάτος της ανάρτησης.

Αν θέλουμε 2 στήλες βάζουμε των κώδικα 2 φορές και ρυθμίζουμε το πλάτος τους.
Αν θέλουμε 3 στήλες βάζουμε των κώδικα 3 φορές και ρυθμίζουμε το πλάτος τους.
Με μπλε ο κώδικας που βάζουμε για να ρυθμίσουμε τις στήλες μας

Όλος ο κώδικας ξανά μια φορά (3 στήλες)
<div style="float: left; width: 30%;">
Στήλη #1</div>
<div style="float: left; width: 30%;">
Στήλη #2</div>
<div style="float: left; width: 30%;">
Στήλη #3</div>
<divstyle both="" clear:=""></divstyle><br />

Read More »

Αυτόματα το Διαβάστε περισσότερα / Auto Read more και με εικόνα

Μπαίνει αυτόματα και φωτογραφία... Ένα πολύ καλό και πολύ χρήσιμο κολπάκι πλήρως ρυθμιζόμενο και τσεκαρισμένο.

Πηγαίνουμε στη σελίδα του blog, πατάμε πρότυπο και μετά επεξεργασία HTML και μας βάζει στον κώδικα της σελίδας.

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

Μετά πατάμε ctrl+f και μας ανοίγει το παραθυράκι search επάνω δεξιά όπως βλέπουμε στην εικόνα.
Στο παράθυρο του search βάζουμε <data:post.body/> και πατάμε enter.
Θα μας πάει εκεί που είναι αυτό.
ΑΥΤΟ ΘΑ ΤΟ ΣΒΗΣΟΥΜΕ / ΑΝΤΙΚΑΤΑΣΤΗΣΟΥΜΕ με τον κώδικα που έχω ακριβώς από κάτω.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

ΠΡΟΣΟΧΗ : το <data:post.body/> υπάρχει περίπτωση να υπάρχει 2 φορές μέσα στον κώδικα.
Θα το αντικαταστήσουμε και τις δυο φορές με τον κώδικα που είδαμε πιο πάνω.

Φτάνουμε στο τέλος.
Τώρα ξαναπατάμε ctrl+f  να ανοίξει το search αν δεν είναι ανοικτό δηλαδή και βάζουμε </head>

Όπως βλέπετε στην εικόνα, το </head> (το </head> είναι μόνο ένα) ακριβώς από πάνω βάζουμε τον κώδικα που σας έχω από κάτω.
<script type='text/javascript'>
posts_no_thumb_sum = 500;
posts_thumb_sum = 300;
img_thumb_height = 200;
img_thumb_width = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

Πατάμε αποθήκευση και τέλος. Αυτό ήταν. To blog μας απέκτησε αυτόματο read more τοποθετόντας την εικόνα της αναρτήσεις δεξιά σαν thumbnail.

ΡΥΘΜΙΣΕΙΣ 
posts_no_thumb_sum = 500; Το 500 εδώ είναι πόσοι χαρακτήρες θα γραφτούν αν ΔΕΝ υπάρχει φωτογραφία στο άρθρο μας. Βάλτε ότι θέλετε, εγώ το έχω 500
posts_thumb_sum = 300; Το 300 εδώ είναι πόσοι χαρακτήρες θα γραφτούν δεξιά από την φωτογραφία στο άρθρο μας. Βάλτε ότι θέλετε, εγώ το έχω 300
img_thumb_height = 200; Το 200 εδώ είναι το ύψος τις φωτογραφίας. Βάλτε ότι θέλετε, εγώ το έχω 200
img_thumb_width = 300; Το 300 εδώ είναι το πλάτος τις φωτογραφίας. Βάλτε ότι θέλετε, εγώ το έχω 300

Αυτό χρησιμοποιώ και εγώ στη σελίδα που βρίσκεστε με αυτές τις ρυθμίσεις.

http://helpblogwidget.blogspot.gr/

Read More »