MusicConcert

Παρασκευή 1 Ιουλίου 2011

Διαφημιστικός χώρος 125Χ125

1:05 μ.μ. Blogger Tips and Tricks No comments

Ένα gadget χρήσιμο σε κάθε σελίδα με υψηλή επισκεψιμότητα. Ακολουθήστε τα παρακάτω βήματα για να το εγκαταστήσετε στη σελίδα σας:

Σύνδεση στον Blogger
Σχεδίαση / Προσθήκη Gadget / HTML JavaScript
Προσθέστε τον παρακάτω κώδικα:

<div align="center"> 
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"> 
<tbody><tr>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td> 
</tr> 
<tr>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td> 
</tr>
</tbody></table>
<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"> 
<tbody> 
      <tr> 
       <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="URL OF BANNER’S IMAGE" /></a></center></td> 
      </tr>

    </tbody></table>
</div>

Αλλάξτε τα URL των διαφημιζομένων με τα δικά τους στοιχεία και είστε έτοιμοι.

Back to Top button

2:19 μ.μ. Blogger Tips and Tricks No comments

Ένα κουμπάκι που επαναφέρει τη σελίδα στην αρχή της. Ακολουθήστε τα παρακάτω βήματα για να το εγκαταστήσετε στη σελίδα σας:

Σύνδεση στον Blogger
Σχεδίαση / Επεξεργασία HTML
Κλικ στο Επέκταση Γραφικών Στοιχείων
Ctrl + F για να βρείτε την ετικέτα ]]></b:skin>
Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

Βρείτε τώρα την ετικέτα </body>
Πριν από αυτήν επικολλήστε τον παρακάτω κώδικα:

<a href="#" id="backtotop"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSf0wognbNinqAVreucJzd5g-cMrjOe8Nv0J4FmwooQ6by7_axOuA" alt="back to top" /></a>

Βρείτε τώρα την ετικέτα <head>
Επικολλήστε μετά από αυτήν τον παρακάτω κώδικα:

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;

Πριν κάνετε αποθήκευση προτύπου. Αν όλα πάνε καλά θα δείτε το gadget κάτω δεξιά. Αφού βεβαιωθείτε ότι όλα είναι εντάξει πατήστε
Αποθήκευση προτύπου

Μπορείτε να αλλάξετε το URL της εικόνας και να βάλετε μια που να ταιριάζει στη σελίδα σας!

Τρεις στήλες υποσημείωσης στο τέλος της σελίδας σας

11:35 π.μ. Blogger Tips and Tricks No comments

Επιλογές για περαιτέρω προσθήκη Gadget ή διάφορες υποσημειώσεις με τρεις στήλες υποσημείωσης.

Σύνδεση στον Blogger
Σχεδίαση / Επεξεργασία HTML
Κλικ στο επέκταση γραφικών στοιχείων
Ctrl + F για να βρούμε την ετικέτα ]]></b:skin>
Επικολλάμε πριν από αυτήν τον παρακάτω κώδικα:

/* -----   LOWER SECTION   ----- */ 
#lower { 
       margin:auto; 
       padding: 0px 0px 10px 0px; 
       width: 100%; 
       background:#333434; 
}  
#lower-wrapper { 
       margin:auto; 
       padding: 20px 0px 20px 0px; 
       width: 960px;
}
#lowerbar-wrapper { 
     border:1px solid #DEDEDE; 
       background:#fff; 
       float: left; 
       margin: 0px 5px auto; 
       padding-bottom: 20px; 
       width: 32%; 
       text-align: justify; 
       font-size:100%; 
       line-height: 1.6em; 
       word-wrap: break-word;  
       overflow: hidden; 
}
       .lowerbar {margin: 0; padding: 0;} 
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 { 
      margin: 0px 0px 10px 0px; 
       padding: 3px 0px 3px 0px; 
       text-align: left; 
       color:#0084ce; 
        text-transform:uppercase; 
      font: bold 14px Arial, Tahoma, Verdana; 
       border-bottom:3px solid #0084ce; 
}
.lowerbar ul { 
      margin: 0px 0px 0px 0px; 
      padding: 0px 0px 0px 0px; 
      list-style-type: none; 
}
.lowerbar li { 
      margin: 0px 0px 2px 0px; 
      padding: 0px 0px 1px 0px; 
      border-bottom: 1px dotted #ccc; 
}

Βρείτε τώρα την ετικέτα </body>
Επικολλάτε πριν από αυτήν τον παρακάτω κώδικα:

<div id='lower'> 
<div id='lower-wrapper'> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar1' preferred='yes'> 
</b:section> 
</div> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar2' preferred='yes'> 
</b:section> 
</div> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar3' preferred='yes'> 
</b:section> 
</div> 
<div style='clear: both;'/> 
</div> </div>

Πατήστε αποθήκευση προτύπου και είσαστε έτοιμοι.

Μπορείτε να αλλάξετε τις παραμέτρους για να ταιριάξετε τις ρυθμίσεις στη δική σας σελίδα!

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

Αλλαγή στα links "παλαιότερες αναρτήσεις", "νεότερες αναρτήσεις" και "αρχική σελίδα" με αντίστοιχες εικόνες

9:27 π.μ. Blogger Tips and Tricks No comments

Απαλλαγείτε από τα βαρετά αυτά links ακολουθώντας τα παρακάτω βήματα:

Σύνδεση στο λογαριασμό σας Blogger
Σχεδίαση / Επεξεργασία HTML
Κλικ στο "Επέκταση γραφικών στοιχείων
Ctrl + F για να βρούμε την παρακάτω ετικέτα:

<data:newerPageTitle/>

Αντικαταστήστε την με την παρακάτω ετικέτα:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5pxcHGJVQt2bGEpiJlkbC58VaxQaxbFTCuwTmI8yfdR6kOIw3x2PRFC35gmA61UCmAqJGqiLx7S9vpxVwovuoG8yEIO6d1Lji8DcOvX__z4E33F1-XiCOJVgCQFZxHcf1goqi9VkdDz4/s400/Previous-blue2.png"/>

Βρείτε τώρα την παρακάτω ετικέτα:

<data:olderPageTitle/>

Αντικαταστήστε την με την παρακάτω ετικέτα:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGtOVyXtcWmLBOVts-Ym4iPsfuq7KpFb4sBHbVcuwgY2StIFlhiugk5vcLy6yLjkMX8R3aJ87Kn2Qt_fMp4QkNFQJrdgcLKSuu4AkMU-OsY2JvextiQEQ4Z1fjcbfeQfi97MAn4Ms6G4c/s400/Next-blue2.png"/>

Βρείτε τώρα την παρακάτω ετικέτα:

<data:homeMsg/>

Αντικαταστήστε την με την παρακάτω:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVbcnudttSdRfkPkQGbi7khUqYqgGXFNdh0ydfsbAqG8fsv1zsr1URtYNsqenZQS6roHYIk_bwD_G0fbfUHURkEB0VbAX2N72NlJutdr4EdBwUHprz4xmutPrusSA-pjj2MIhR4QmbG94/s400/Home-blue2.png"/>

Ενδεχομένως την τελευταία ετικέτα να τη βρείτε 3 φορές. Αντικαταστήστε την και τις τρεις.

ΤΑ ΓΡΑΜΜΑΤΑ ΜΕ ΚΟΚΚΙΝΟ ΑΝΤΙΣΤΟΙΧΟΥΝ ΣΕ ΕΙΚΟΝΕΣ ΠΟΥ ΕΧΩ ΕΠΙΛΕΞΕΙ ΕΓΩ. ΕΣΕΙΣ ΜΠΟΡΕΙΤΕ ΝΑ ΤΙΣ ΑΛΛΑΞΕΤΕ ΜΕ ΔΙΚΕΣ ΣΑΣ ΕΙΚΟΝΕΣ, ΑΡΚΕΙ ΝΑ ΓΝΩΡΙΖΕΤΕ ΤΑ URL ΤΟΥΣ.

Πλαίσιο διαφήμισης δεξιά από τον τίτλο της Σελίδας

8:41 π.μ. Blogger Tips and Tricks No comments

Πολλοί θέλουν να βάλουν στη σελίδα τους μια διαφήμιση ή ένα δικό τους banner, αλλά το πρότυπό τους δεν τους δίνει τη δυνατότητα.

Ακολουθήστε τα παρακάτω βήματα για να το πετύχετε στη σελίδα σας:

Σύνδεση στο λογαριασμό σας Blogger
Σχεδίαση / Επεξεργασία HTML
Ctrl + F για να ψάξετε τον παρακάτω κώδικα:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Test Blog (Header)' type='Header'/>
</b:section>

Μετά από αυτόν επικολλήστε τον παρακάτω κώδικα:

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Τώρα βρείτε την ετικέτα ]]></b:skin>
Πριν από αυτήν επικολλήστε τον παρακάτω κώδικα:

#header {width:50%;display:inline-block;float:left;}
#header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

***Τους μπλε αριθμούς μπορείτε να τους αλλάξετε για να κεντράρετε την εικόνα σας.***

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

Μόλις τελειώσετε και πατήσετε στα Στοιχεία Σελίδας θα δείτε ότι δημιουργήθηκε ένα νέο πλαίσιο Προσθήκης Gadget δεξιά από την επικεφαλίδα.

*** Είναι καλό πρίν από κάθε ενέργεια στο πρότυπό σας να κάνετε λήψη πλήρους προτύπου, για την αποφυγή κάποιας μικρής απροσεξίας που μπορεί να σας στοιχίσει την ίδια τη δουλειά σας.***

Τοποθετήστε πλαίσιο γύρω από τις εικόνες σας

2:50 μ.μ. Blogger Tips and Tricks No comments

Σύνδεση στο λογαριασμό σας Blogger
Σχεδίαση / Επεξεργασία HTML
Κλικ στην επέκταση γραφικών στοιχείων
Ctrl + F για να βρούμε την ετικέτα ]]></b:skin>
Πριν από αυτήν επικολλάμε τον παρακάτω κώδικα:

img {
border: 14px solid #ff0000;
background: #ff0000;
filter:alpha(opacity=70);
opacity:0.5;
padding: 1px;
}

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

Πώς βάζω φόρμα αναζήτησης στη σελίδα μου; Search Box

11:32 π.μ. Blogger Tips and Tricks No comments

Συνήθως όλα τα BLOGS έχουν αναζήτηση μέσα στα Gadgets τους για να μπορεί ο επισκέπτης να βρει κάτι που τον ενδιαφέρει, γιατί όπως έχουμε αναφέρει σε προηγούμενη ανάρτηση, οι επισκέπτες μας βασίζονται στο ότι θα βρουν κάποια πληροφορία στη σελίδα μας.
Ας φτιάξουμε λοιπόν μια φόρμα αναζήτησης:

Σύνδεση στο λογαριασμό σας Blogger
Σχεδίαση / προσθήκη Gadget
Επιλέγουμε "HTML/JavaScript" και επικολλάμε τον παρακάτω κώδικα:

<p align="left">
<form id="searchthis" action="ΤΟ URL ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ/search" style="display:inline;" method="get">
<strong>ΤΟ ΟΝΟΜΑ ΤΟΥ BLOG ΣΑΣ <br/></strong>
<input id="b-query" maxlength="255" name="q" size="25" type="text"/>
<input id="b-searchbtn" value="Αναζήτηση" type="submit"/>
</form></p>

Αν θέλετε αλλάζετε και τις διαστάσεις της φόρμας για να ταιριάζει στη σελίδα σας!
Η φόρμα αναζήτησης θα δείχνει κάπως έτσι:

MusicConcert

This is default featured post 1 title

This is default featured post 2 title

This is default featured post 3 title

This is default featured post 4 title

This is default featured post 5 title

Παρασκευή 1 Ιουλίου 2011

Διαφημιστικός χώρος 125Χ125

Τρίτη 28 Ιουνίου 2011

Back to Top button

Δευτέρα 27 Ιουνίου 2011

Τρεις στήλες υποσημείωσης στο τέλος της σελίδας σας

Κυριακή 26 Ιουνίου 2011

Αλλαγή στα links "παλαιότερες αναρτήσεις", "νεότερες αναρτήσεις" και "αρχική σελίδα" με αντίστοιχες εικόνες

Σάββατο 25 Ιουνίου 2011

Πλαίσιο διαφήμισης δεξιά από τον τίτλο της Σελίδας

Πέμπτη 23 Ιουνίου 2011

Τοποθετήστε πλαίσιο γύρω από τις εικόνες σας

Δευτέρα 20 Ιουνίου 2011

Πώς βάζω φόρμα αναζήτησης στη σελίδα μου; Search Box

Popular Posts

Labels

Categories