• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

ΠΩΣ ΒΑΖΩ ΜΙΑ ΕΙΚΟΝΑ ΓΙΑ ΦΟΝΤΟ ΑΝΑΡΤΗΣΗΣ

ΕΙΚΟΝΑ ΦΟΝΤΟ ΑΝΑΡΤΗΣΗΣ
ΠΩΣ ΒΑΖΩ ΜΙΑ ΕΙΚΟΝΑ ΓΙΑ ΦΟΝΤΟ ΑΝΑΡΤΗΣΗΣ
Για να βάλω μία εικόνα για φόντο ανάρτησης αντι για το απλό άσπρο ή σκούρο χρώμα που μας δίνει ο blogger πρέπει να πάω στην επεξεργασία του προτύπου και να ανοίξω το πρώτο βελάκι που θα συναντήσω το οποίο βρίσκεται περίπου ανάμεσα στις γραμμές 13-43 του κώδικα του blog μας για να επεκταθεί ο κρυμένος κώδικας ο οποίος είναι με μπλέ γράμματα. Πηγαίνουμε στην ενότητα /*Posts ------*/ περίπου ανάμεσα στις γραμμές 575-605 και ψάχνουμε τη γραμμή που γράφει .date-outer { και μετά από 3 γραμμές βρίσκουμε την γραμμή που γράφει background-color: $(post.background.color); την σβήνουμε και στη θέση της βάζουμε αυτή :
  background: url(https://lh4.googleusercontent.com/-N3r-RPOV1ko/VNSUezh1eUI/AAAAAAAAO0k/cCU-fmG05Ds/w960-h30-no/wood.png); background-repeat:repeat; 

Την εικόνα την ανεβάζετε σε ένα λεύκωμα του Google+ και από εκεί παίρνετε το link της και το επικολλάτε μέσα στις παρενθέσεις αντικαθιστώντας την δική μου εικόνα με τα μώβ γράμματα που μπορεί να μην σας κάνει.

/* Posts
----------------------------------------------- */
body .main-inner .Blog {
  padding: 0;
  margin-bottom: 1em;

  background-color: transparent;
  border: none;

  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.main-inner .section:last-child .Blog:last-child {
  padding: 0;
  margin-bottom: 1em;
}

.main-inner .widget h2.date-header {
  margin: 0 -5px 1px;
  padding: 0 0 $(date.padding.bottom) 0;

  font: $(date.font);
  color: $(date.text.color);

  background: $(date.background);

  border-top: $(date.border.size) solid $(date.border.color);
  border-bottom: 1px solid $(widget.border.bevel.color);

  -moz-border-radius-topleft: $(date.header.border.radius.top);
  -moz-border-radius-topright: $(date.header.border.radius.top);
  -webkit-border-top-left-radius: $(date.header.border.radius.top);
  -webkit-border-top-right-radius: $(date.header.border.radius.top);
  border-top-left-radius: $(date.header.border.radius.top);
  border-top-right-radius: $(date.header.border.radius.top);

  position: $(date.position);
  bottom: 100%;
  $(date.side): $(date.header.position);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.main-inner .widget h2.date-header span {
  font: $(date.font);
  display: block;
  padding: .5em 5px;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
}

.date-outer {
  position: relative;
  margin: $(date.space) 0 5px;
  padding: 0 5px;
background-color: $(post.background.color); <== ΑΥΤΟ ΣΒΗΣΤΕ ΤΟ ===<
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpEaNRBWdQYSZ93uw9GBxL9GCZQk8CsQLD1kX7SgKWv_roex6KOl-vf_gwXx5Iqh5gMGt7pPfYjK-7yNt-0B_WvvBK2o46MZbkS8L2QeDYzrkcAJDU3xALl-buqfkY2KrxXvW-KuL7HB4/w960-h30-no/wood.png); background-repeat:repeat; <== ΚΑΙ ΕΠΙΚΟΛΛΗΣΤΕ ΑΥΤΟ ===<
  border: 1px solid $(post.border.color); 

2 σχόλια:

  1. Δημήτρης Σεπόλια.7/2/15 18:51

    Πολύ καλό το έψαχνα. Ευχαριστώ.

    ΑπάντησηΔιαγραφή
  2. Αυτή η ρύθμιση μεταμορφώνει κυριολεκτικά το blog το κάνει ξεχωριστό.

    ΑπάντησηΔιαγραφή

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.