ΑΡΧΕΙΟΘΗΚΗ ΜΕ ΕΓΧΡΩΜΕΣ ΚΑΤΗΓΟΡΙΕΣ, ΠΕΡΙΓΡΑΦΗ, ΕΙΚΟΝΙΔΙΑ ΣΕ 2 ΣΤΗΛΕΣ

ΑΡΧΕΙΟΘΗΚΗ ΜΕ ΕΓΧΡΩΜΕΣ ΚΑΤΗΓΟΡΙΕΣ, ΠΕΡΙΓΡΑΦΗ, ΕΙΚΟΝΙΔΙΑ ΣΕ 2 ΣΤΗΛΕΣ
Με τον παρακάτω κώδικα μπορείτε να εμφανίσετε σε μία σελίδα του blogger όλες τις αναρτήσεις του ιστολογίου σας ανά κατηγορίες ετικετών σε διάταξη 2 στηλών και να έχει κάθε κατηγορία το δικό της χρώμα background. Ανοίξτε μία σελίδα του blogger, πατήστε την HTML διάταξη και επικολλήστε μέσα στη σελίδα τον παρακάτω κώδικα. Αυτά που πρέπει να αλλάξετε είναι :

1. Τα χρώματα των backgrounds που έχουν μπροστά τους το σύμβολο της δίεσης #.

2. Την περιγραφή της κατηγορίας των αναρτήσεων που είναι με πορτοκαλί γράμματα.

3. Την ετικέτα της κατηγορίας αναρτήσεων που θέλετε να εμφανίζονται με τα κίτρινα γράμματα. 4. Το var numposts = 100; αν υπάρχουν περισσότερες από 100 αναρτήσεις σε κάποια κατηγορία.

5. Το var numchars = 400; αν θέλετε λιγότερους χαρακτήρες στην περιγραφή της ανάρτησης.

6. Το συνολικό πλάτος ανάρτησης που έχω βάλει στη 1^η γραμμή (960px) με το δικό σας πλάτος ανάρτησης.

7. Το πλάτος της αριστερής στήλης που έχω βάλει στην 21^η γραμμή (470px) με δικό σας πλάτος.

8. Το πλάτος της δεξιάς στήλης που έχω βάλει στην 31^η γραμμή (470px) με δικό σας πλάτος.

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

Για παράδειγμα αν διαθέτετε συνολικό πλάτος ανάρτησης 700px τότε βάλτε στην 2^η γραμμή κώδικα αυτό το πλάτος δηλ. 700px και στην 3^η και 16^η γραμμή κώδικα βάλτε το μισό πλάτος δηλαδή 350px – 10px για τα περιθώρια = 340 για κάθε στήλη και τέλος. Το αποτέλεσμα θα είναι αυτό που βλέπετε μετά το τέλος του παρακάτω κώδικα.

<div style="width: 960px;">

<style>

img.label_thumb {float:left;margin-right:4px !important;width:100px;height:70px;}

#label_with_thumbs {float: left;width: 100%;min-height: 75px;margin: 0px 4px 4px 0px;

padding:0;}

ul#label_with_thumbs li {padding:4px 0;min-height:75px;margin-bottom:2px;border-bottom:1px solid #FFFF00;}

#label_with_thumbs li {list-style: none ; padding-left:0px !important;}

#label_with_thumbs a {text-transform: uppercase;}

#label_with_thumbs strong {padding-left:0px;}

</style>

<script src="https://github-codes.github.io/mycodes/javascripts/posts-by-label-2.js"></script>

<script>

var numposts = 100;

var showpostthumbnails = true;

var displaymore = false;

var displayseparator = true;

var showcommentnum = false;

var showpostdate = false;

var showpostsummary = true;

var numchars = 400;

</script>

<div style="float: left; padding: 1px; width: 476px;">

<div style="background:#173377; border-radius:5px; height:auto; width:auto; overflow:auto; padding:4px;">

<span style="font:bold 16px Arial; background-color:#FFFF00;color:black;">FACEBOOK WIDGETS</span>

<script src="/feeds/posts/default/-/FACEBOOK WIDGETS?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script></div>

<div style="background:#532000; border-radius:5px; height:auto; width:auto; overflow:auto; padding:4px;">

<span style="font:bold 16px Arial; background-color:#FFFF00;color:black;">ON LINE TOOLS</span>

<script src="/feeds/posts/default/-/ON LINE TOOLS?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script></div>

</div>

<div style="float: left; padding: 1px; width: 476px;">

<div style="background:#105105;border-radius:5px; height:auto; width:auto; overflow:auto; padding:5px;">

<span style="font:bold 16px Arial; background-color:#FFFF00;color:black;">ΣΧΟΛΙΑ BLOGGER</span>

<script src="/feeds/posts/default/-/ΣΧΟΛΙΑ BLOGGER?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script></div>

<div style="background:#621061;border-radius:5px; height:auto; width:auto; overflow:auto; padding:5px;">

<span style="font:bold 16px Arial; background-color:#FFFF00;color:black;">TEXT BOXES</span>

<script src="/feeds/posts/default/-/TEXT BOXES?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script></div>

<div style="background:#661111; border-radius:5px; height:auto; width:auto; overflow:auto; padding:5px;">

<span style="font:bold 16px Arial; background-color:#FFFF00;color:black;">ΣΥΜΒΟΥΛΕΣ SEO</span>

<script src="/feeds/posts/default/-/SEO?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script></div>

</div>

</div>

FACEBOOK WIDGETS

ON LINE TOOLS

ΣΧΟΛΙΑ BLOGGER

TEXT BOXES

ΣΥΜΒΟΥΛΕΣ SEO