ΑΡΧΕΙΟΘΗΚΗ ΜΕ ΕΙΚΟΝΙΔΙΑ, ΠΕΡΙΓΡΑΦΗ ΚΑΙ PAGE NAVIGATION

ΑΡΧΕΙΟΘΗΚΗ ΜΕ ΕΙΚΟΝΙΔΙΑ, ΠΕΡΙΓΡΑΦΗ ΚΑΙ PAGE NAVIGATION

Με τον παρακάτω κώδικα μπορείτε να εμφανίσετε σε μία σελίδα του blogger όλες τις αναρτήσεις του ιστολογίου σας με εικονίδια, περιγραφή και page navigation. Ανοίξτε μία σελίδα του blogger, πατήστε την HTML διάταξη και επικολλήστε μέσα στη σελίδα τον παρακάτω κώδικα. Αυτά που μπορείτε να αλλάξετε είναι :

1. Αλλάξτε το siteUrl = "http://the-best-widgets.blogspot.gr" με το url του δικού σας blog.

2. Το postsperpage = 30, αν θέλετε να εμφανίζονται περισσότερες από 30 αναρτήσεις ανα σελίδα.

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

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

5. Το συνολικό πλάτος της αρχειοθήκης είναι που έχω βάλει στη 1η γραμμή είναι width:100% του πλάτους που διαθέτετε στις αναρτήσεις σας. Μπορείτε να το αλλάξετε σε pixels αν θέλετε.

6. Οι γραμματοσειρές μπορούν να αλλάξουν όπου βλέπετε 14px arial; ή 16px arial;

Δείτε το σε λειτουργία μετά το τέλος του παρακάτω κώδικα ▼.

<style>

.post{width:100%; margin:5px; }

#toc-outer {font:14px Arial; color:#FFF; text-align:left; margin:0px auto; }

#loadingscript {font:bold 18px Arial; text-align:center; }

#loadingscript, .itemposts {margin:0px 0px 2px; height:auto; overflow:hidden; display:block; background:#333333; border:1px solid #FBBB22; padding:5px; }

.itemposts h6 {margin:0px 0px 10px; font:bold 16px Arial; text-transform:uppercase; color:#000; padding:5px;background:#00FF00; position:relative; overflow:hidden; }

.itemposts h6 a {color:#000; text-decoration:none; }

.itemposts h6:after { content:""; width:0px; height:0px;}

.itemposts img { float:left; height:80px; width:80px; margin:0px 10px 5px 0px; padding:0px; background:#333; border:none;}

.itemposts .iteminside {}

.itemposts .itemfoot { clear:both; padding:5px; margin:5px 0px 0px; background:#740777; color:#FFF; font:14px arial; position:relative; overflow:hidden;}

.itemposts .itemfoot:after { content:""; width:0px; height:0px;}

.itemposts .itemfoot a.itemrmore { font:bold 14px arial; color:#FFFF00; float:right; text-decoration:none; }

.itemposts .itemfoot a.itemrmore:hover {color:#00FF00; text-decoration:underline; }

#itempager {padding:10px 0px; background:#FF4500;}

#pagination, #totalposts { display:block; color:#FFF;font:14px Arial;padding:0px; text-align:center; background:#351500; padding:10px 10px; }

#totalposts {border-top:1px solid #FFFF00;}

#pagination span, #pagination a {color:#FFF;display:inline;margin:0 1px; padding:5px 5px; text-indent:0px; background:#A11111; text-decoration:none; text-shadow:none; }

#pagination a:hover {background:#115599;}

#pagination span.actual {background:#255720;}

#pagination span.hidden {display:none;}

</style>

<script>

showPostDate = true;

showComments = true;

idMode = true;

sortByLabel = false;

var labelSorter = "label-name",

loadingText = "Loading...",

totalPostLabel = "TOTAL POSTS =",

jumpPageLabel = "Posts ►",

commentsLabel = "Comments",

rmoreText = "Read more ►",

prevText = "Preview",

nextText = "Next",

siteUrl = "https://the-best-widgets.blogspot.gr",

postsperpage = 30,

numchars = 400,

imgBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTtPhxMjeNRYYdL-Cu5ufLnrLZlir4F9YijCSaYS-3UXtgqF-h_e2L9fXoDtzXqlaM_sv55-rP42yBgAiPg9W_96WvH4l4nuYE1d6yPo8lvpRXh0Pwi9ikGWt3t9M2k4X1e4WvRzgd8lM/s72-no/noimage.png";

</script>

<script src="https://dl.dropboxusercontent.com/s/8vfpev4l2iiskd1/page-archive-4.js"></script>