Web Analytics Made Easy - StatCounter
FoulsCode

Εμφάνιση αναρτήσεων με ετικέτα Background. Εμφάνιση όλων των αναρτήσεων
Εμφάνιση αναρτήσεων με ετικέτα Background. Εμφάνιση όλων των αναρτήσεων

8 Φεβρουαρίου 2017

Κάνετε το background ενεργό για διαφήμιση.

Τον τελευταίο καιρό όλο και πιο πολλοί στις Σελίδες τους χρησιμοποιούν τα backgrounds για διαφημιστικούς σκοπούς. Είναι η τελευταία λέξη της μόδας στα blogs. Το μόνο μειονέκτημα στις περιπτώσεις αυτές είναι ότι πρέπει να αλλάζεις την πίσω εικόνα της Σελίδας σας. Αν λοιπόν σκοπεύετε να διαφημίσετε κάποιον μέσα από το background σας, θα πρέπει να σας έχει εξαρχής ετοιμάσει το φόντο της διαφήμισής του.
Πώς θα εγκαταστήσουμε τη διαφήμιση αυτήν στη δική μας Σελίδα;
Δεν είναι καθόλου απλό για άπειρους blogger. Οι πιο έμπειροι ας ακολουθήσουν τις παρακάτω οδηγίες:

  • Αλλάξτε το background με την έτοιμη εικόνα που θα σας δώσει ο διαφημιζόμενος
  • Αποθηκεύστε το πρότυπο και πατήστε "Διάταξη / Προσθήκη gadget"
  • Επιλέξτε HTML/JavaScript
  • Επικολλήστε τον παρακάτω κώδικα:

<style>#box-link {
  position:fixed;
  top: 8px;
  left: 10px;
  width: 130px;
  height: 1000px;
  background-color: transparent;
  }#box-link2 {
  position:fixed;
  top: 8px;
  right: 10px;
  width: 130px;
  height: 1000px;
  background-color: transparent;
  }</style> <div class="box"><a id="box-link" href="#" target="_blank"></a><a id="box-link2" href="#" target="_blank"></a></div>


  • Στη θέση της "#" βάλτε τον σύνδεσμο του διαφημιζόμενου και πατήστε αποθήκευση.
Με τον συγκεκριμένο κώδικα κάνετε clickable ακόμη και backgrounds χωρίς εικόνες.

Υ.Γ. Τη συγκεκριμένη δουλειά την έχουν αναλάβει affililiates εταιρείες οπότε αναζητήστε τα παραέξω.




ΠΗΓΗ
Διαβάστε Περισσότερα »

11 Δεκεμβρίου 2013

Εικόνα στο υπόβαθρο


Αντιγραφή επικόλληση τον παρακάτω κώδικα:



<style>
/* foulscode.blogspot.gr */
h1 {
    font-family: "Lobster", sans-serif;
    font-size: 96px;
    font-weight: bold;
    text-align: center;
}
.mask-galaxy {
    background: url(http://www.jpl.nasa.gov/spaceimages/v2/getMediumImage.php?id=PIA03519) center center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-animation: travelGalaxy 10s linear infinite;
    -moz-animation: travelGalaxy 10s linear infinite;
    -moz-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-animation: travelGalaxy 10s linear infinite;
    -o-text-fill-color: transparent;
    -o-background-clip: text;
    -o-animation: travelGalaxy 10s linear infinite;
}
@-webkit-keyframes travelGalaxy {
    0% {background-position: right bottom;}
    100% {background-position: left top;}
}
@-moz-keyframes travelGalaxy {
    0% {background-position: right bottom;}
    100% {background-position: left top;}
}
/* foulscode.blogspot.gr */
</style><link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin" rel="stylesheet" type="text/css">
<article class="mask-galaxy">
    <h1>Fouls Code</h1>
</article>


DEMO LIVE

Μπορείτε να αντικαταστήσετε τα μαρκαρισμένα γράμματα .
Διαβάστε Περισσότερα »

14 Ιουνίου 2013

Background για το site/blog σας



Μια σειρά με όμορφα Background.



Cross scratches


Subtle Zebra 3D


Fake luxury


Dark Geometric


Blu Stripes


Classy Fabric


HIXS Evolution



Για να αποκτήσετε ένα Background από τα παραπάνω κάντε αποθήκευση ( Αποθήκευση εικόνας ως) 


Διαβάστε Περισσότερα »

2 Ιανουαρίου 2013

Blogger Comment box Black Background

Συμφωνώ με το γεγονός ότι το Blogger.com προεπιλεγμένη κουτί με τα σχόλια δεν είναι πολύ ελκυστική και περισσότεροι άνθρωποι θέλουν να αλλάξετε το φόντο του Blogger κουτί τους σχόλιό του. Είμαι δίνοντάς σας αυτό το δροσερό Roomates άκρη θα μετατρέψει την προεπιλεγμένη Box Σχόλιο Blogger με ένα όμορφο και ελκυστικό "μαύρο φόντο" Blogger κουτί σχόλιο. Ακολουθήστε τα παρακάτω βήματα



Δημιουργία αντιγράφων ασφαλείας του προτύπου σας

1 Go To Blogger> Σχεδιασμός> Edit HTML
2 Κάντε κλικ στο "Επέκταση προτύπων γραφικών στοιχείων" κουτί
3 Αναζήτηση για αυτό το]]> </ b: skin>
4 Ακριβώς πάνω από αυτό το μέρος του παρακάτω κώδικα


#mbt-form iframe{ 
background:#ffffff url(http://4.bp.blogspot.com/-mNhAkLamIz8/TnOlHefpjzI/AAAAAAAAFFE/agkd-EA7pUA/s400/11.png) repeat-x; 
border:1px solid #ddd; 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
box-shadow: 5px 5px 5px #CCCCCC; 
padding:5px; 
font:normal 12pt "ms sans serif", Arial; 
color:#2F97FF; 
width:560px; height:213px !important; 
}
#mbt-form a{ 
color:#fff; 
}





Αλλάξτε το χρώμα του κειμένου "σχόλιο ως" αντικαθιστώντας 2F97FF
Για να αλλάξετε το πλάτος του πλαισίου επεξεργαστείτε στη συνέχεια, πλάτος: 560px.

     5. Τώρα αναζήτηση για αυτό



<div class='comment-form'>


Αντικαταστήστε το με

<div id='mbt-form'>



6. Αποθήκευση και είστε έτοιμοι.









ΠΗΓΗ












Διαβάστε Περισσότερα »

HTML Background Image Code

Εδώ, έχουμε εφαρμόσει μια εικόνα φόντου σε ένα στοιχείο <div>.


<div style="background-image:url(/pix/web_graphics/free_website_graphics/background_patterns/00akiw5.gif);padding:5px;width:150px;height:200px;border:1px solid black;"><p>See the background image?</p></div>




Εδώ, έχουμε δημιουργήσει την εικόνα φόντου στο υπόβαθρο-επαναλαμβάνω: δεν-επαναλαμβάνω. Αυτό αποτρέπει την εικόνα επαναλαμβάνοντας όλη την στοιχείου (στην περίπτωση που η εικόνα είναι μικρότερο από το στοιχείο). Μπορείτε επίσης να χρησιμοποιήσετε το επαναλαμβάνω-x και επαναλαμβάνω-y για να κάνει την επανάληψη υπόβαθρο μόνο οριζόντια ή κάθετα. Για περισσότερες πληροφορίες, δείτε το CSS υπόβαθρο-επαναλαμβάνω ιδιοκτησίας.


<div style="background-image:url(/pix/web_graphics/free_website_graphics/background_patterns/00akiw5.gif);padding:5px;width:150px;height:200px;border:1px solid black;background-repeat:no-repeat;"><p>The background image doesn't repeat.</p></div>



Ο ακόλουθος κώδικας ορίζει μια εικόνα φόντου για το σύνολο της σελίδας (μέσω του «σώματος» ετικέτα). Θα τοποθετήσετε την εικόνα στο κέντρο της σελίδας και να το αποτρέψει από την επανάληψη σε όλη τη σελίδα.


body {
  background-image: url("http://yoursite.com/images/image_name.gif");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}


Ακόμα καλύτερα, μπορείτε να χρησιμοποιήσετε την ιδιότητα CSS υπόβαθρο για να ορίσετε όλες τις ιδιότητες φόντου σε μία φορά. Ως εκ τούτου, θα μπορούσαμε να ξαναγράψουμε την παραπάνω κώδικα σε αυτό:



body {  background: url("http://yoursite.com/images/image_name.gif") 50% 50% no-repeat;


ΠΗΓΗ
 

Διαβάστε Περισσότερα »
Related Posts Plugin for WordPress, Blogger...