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

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

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

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

3. Το url του δικού μου blog που είναι με πράσινα γράμματα με το url του δικού σας blog.

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

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

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

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

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

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

Το αποτέλεσμα θα είναι αυτό που βλέπετε μετά το τέλος του παρακάτω κώδικα.

<script src='https://github-codes.github.io/mycodes/javascripts/archive-page-1n.js'></script>

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

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

<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="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/FACEBOOK WIDGETS?max-results=100&amp;alt=json-in-script&amp;callback=recentpostslist"></script></div>

<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;">ON LINE TOOLS</span>

<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ON LINE TOOLS?max-results=100&amp;alt=json-in-script&amp;callback=recentpostslist"></script>

</div>

</div>

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

<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;">ΣΧΟΛΙΑ BLOGGER</span>

<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΣΧΟΛΙΑ BLOGGER?max-results=100&amp;alt=json-in-script&amp;callback=recentpostslist"></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="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/TEXT BOXES?max-results=100&amp;alt=json-in-script&amp;callback=recentpostslist"></script></div>

<div style="background:#532000; 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="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/SEO?max-results=100&amp;alt=json-in-script&amp;callback=recentpostslist"></script>

</div>

</div>

</div>

FACEBOOK WIDGETS

ON LINE TOOLS

ΣΧΟΛΙΑ BLOGGER

TEXT BOXES

ΣΥΜΒΟΥΛΕΣ SEO