Κυριακή, 1 Μαΐου 2011

Αλλάξτε πρότυπο άφοβα χωρίς να χάσετε τα gadgets σας ,που ήδη έχετε! Πηγή www.bloggertips.gr



Πριν διαβάσετε παρακάτω βεβαιωθείτε ότι έχετε διαβάσει αυτές τις δύο αναρτήσεις:

1.Κατέβασμα και μεταφόρτωση προτύπου - Install a blogger template
2.Πώς και από πού βρίκεις εκατοντάδες πρότυπα για βρεις αυτό που ταιριάζει στο blog σου?

Οι παραπάνω αναρτήσεις έχουν άμεση σχέση με αυτά που θα πούμε σήμερα.

Επειδή είναι αρκετά δύσκολο ,καλό θα ήταν να το δοκιμάσετε πρώτα σε ένα test blog, γιατί άμα κάνετε λάθος θα χάσετε όλα τα gadgets σας και μετά δεν υπάρχει τρόπος να τα επαναφέρετε.

Πείτε λοιπόν ότι θέλετε να βάλετε ένα πρότυπο στο blog σας από τα αμέτρητα που κυκολοφορούν στο web.


Καταρχάς από τη Διάταξη βάλτε όλα τα gadgets σας σε μια στήλη για να μην μπερδευτούμε στη συνέχεια.

Πριν κάνετε την αλλαγή στο πρότυπό σας πάτε στον Πανόπτη σας,μετά στη Διάταξη και από εκεί στην Επεξεργασία html.

Με τη βοήθεια του ctrl + F ψάχνετε να βρείτε ένα κομμάτι κώδικα με τα gadgets σας όπως είναι ο παρακάτω:



Λογικά θα βρείτε τα gadgets σας μόνο σε ένα κομμάτι κώδικα και όχι σε πολλά.
(εκτός αν δεν κάνατε αυτό που είπα στην αρχή ,δηλ. να βάλετε όλα τα gadgets σας σε μια στήλη.)

Αποθηκεύστε κάπου (π.χ. στο Word ή στο Notepad ή όπου αλλού βρείτε αρκεί να μην χαθούν) τον/τους κώδικες των gadgets σας για να μην τα χάσετε.
Όπως βλέπετε στην παραπάνω φώτο οι κωδικοί των gadgets σας είναι αυτοί που είναι μαρκαρισμένοι με κίτρινο.

Αφού λοιπόν αποθηκεύσατε τους κωδικούς των gadgets σας,ανεβάστε τον νέο σας πρότυπο.

Τώρα θα σας δώσει ένα μύνημα όπως φαίνεται στην φώτο από κάτω:



Τώρα μην πατήσετε αποθήκευση αλλά πρώτα ψάξτε να βρείτε τον παρακάτω κώδικα:
<b:widget id='


Όταν το βρείτε βάλτε τους κωδικούς των gadgets σας που είχατε αποθηκεύσει πριν ,όπως φαίνεται στην παρακάτω φώτο.
Δηλαδή στο τέλος να φαίνονται οι κωδικοί όπως στην φωτογραφία.



Αφού σιγουρευτήτε ότι τα έχετε βάλει σωστά ,πατήστε αποθήκευση και απολαύστε το νέο σας πρότυπο με τα παλιά σας gadget.

Add a flash clock on your blog - Εγκατάσταση ψηφιακού ρολογιού στο blog σας Πηγή www.bloggertips.gr



  "HTML Tag Code"
(σύνδεση>πανόπτης>διάταξη>προσθήκη gadget>HTML/JavaScript>paste your code and save)



<iframe frameborder="no" marginheight="0" marginwidth="0" height="18" src="http://com2.gr/datetime/index.php" scrolling="no" width="240" name="com2grdatetime"> </iframe>

(σύνδεση>πανόπτης>διάταξη>προσθήκη gadget>HTML/JavaScript>paste your code and save)

Rolling title Πηγή www.bloggertips.gr






Μπαίνουμε στον Πανόπτη μας --> Διάταξη --> Επεξεργασία HTML
Αφού κρατήσουμε back up το template μας για παν ενδεχόμενο, με το γνωστό τρόπο (Ctrl+F) ψάχνουμε να βρούμε τον κωδικό

<title><data:blog.pageTitle/></title>

Μόλις το βρούμε, παίρνουμε τον παρακάτω κώδικα, και με αντιγραφή επικόληση το βάζουμε ακριβώς από κάτω του

<script>

var repeat=1 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1

var title=document.title

var leng=title.length

var start=1

function titlemove() {

titl=title.substring(start, leng) + title.substring(0, start)

document.title=titl

start++

if (start==leng+1) {

start=0

if (repeat==0)

return

}

setTimeout(&quot;titlemove()&quot;,140)

}

if (document.title)

titlemove()

</script>


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



Αριθμημένες σελίδες αναρτήσεων Πηγή www.bloggertips.gr



Κοιτάξτε την φωτό για να καταλάβετε τι εννοώ.


Το καλό με αυτό το widget είναι ότι δεν πειράζουμε καθόλου τον κώδικα της σελίδας μας, καθώς είναι ένα απλό widget! Όποτε το βαρεθούμε δηλαδή, το βγάζουμε και επανέρχετε το blog μας στην αρχική του κατάσταση.
Ο κωδικός είναι αυτός.

<style type="text/CSS">
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #7AA1C3;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #7AA1C3;
background-color:#F6F6F6;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #7AA1C3;
background: #F6F6F6;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #7AA1C3;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#7AA1C3;
}
</style>
<script type="text/JavaScript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount = 10;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></sc

Πάμε στην Διάταξη-->Στοιχεία σελίδας-->Προσθήκη gadget-->HTML/JavaScript και κάνουμε επικόληση τον παραπάνω κώδικα.
Το κομμάτι του κώδικα, με το καφέ χρώμα (var pageCount = 10), μας δείχνει πόσες αναρτήσεις θα έχει η κάθε σελίδα. Μπορείτε να το αλλάξετε, και να βάλετε το επιθυμητό, για εσάς, νούμερο.
Πατάμε αποθήκευση αλλά δεν τελειώσαμε!
Παίρνουμε το widget και με drag and drop το βάζουμε κάτω από το πλαίσιο των αναρτήσεων.
Δείτε την παρακάτω φωτό για να καταλάβετε.
Image and video hosting by TinyPic
Πατάμε ξανά αποθήκευση, και τελειώσαμε.

Χρωματιστό κείμενο στην ανάρτηση Πηγή www.bloggertips.gr





Πάμε στον Πανόπτη --> Διάταξη --> Επεξεργασία HTML και αφού πάρουμε (όπως πάντα), ένα backup του template μας, με το Ctrl+F ψάχνουμε να βρούμε το

]]></b:skin>

Ακριβώς από πάνω του τοποθετούμε τον παρακάτω κώδικα

.mbt-textarea {

padding:0;

margin:0;

width:400px;


height:40px;

color:#0080ff;

font:12px arial;

background:#fff;

border:1px dotted #289728; }

.mbt-textarea:hover {

color:#289728;

border:2px solid #666; }

.mbt {


padding-top:3px;


margin:0;


color:#289728;


font-size: 9px;


font-family: sans-serif, verdana;


}
Πριν πατήσουμε αποθήκευση, καλό είναι να πραγματοποιήσουμε τις αλλαγές που θέλουμε να κάνουμε, σύμφωνα με τα γούστα του καθενός.

1) Αν θέλετε να ορίσετε, δηλαδή να μειώσετε ή να αυξήσετε το ύψος ή το πλάτος της περιοχής κειμένου , απλά επεξεργαστείτε τις παρακάτω τιμές, με το θαλασσί χρώμα.
Πλάτος: 400px?
ύψος: 40px?

2) Για να αλλάξετε το χρώμα του κειμένου που θα φαίνεται, αλλάζουμε τον εξαψήφιο κωδικό (αυτόν με το πράσινο χρώμα), επιλέγοντας το χρώμα της αρεσκείας μας.
color: # 0080ff?
(Χρησιμοποιήστε την χρωματική παλέτα με τους αντίστοιχους κωδικούς των χρωμάτων, πατώντας ΕΔΩ http://ekabitis-tips-tricks.blogspot.com/2010/02/html-color-codes.html

3) Για να αλλάξετε το χρώμα του κειμένου σε λειτουργία, όταν δηλαδή περνάμε τον δείκτη του ποντικιού από πάνω, μπορείτε να επεξεργαστείτε τον κωδικό με το κόκκινο χρώμα
color: # 289728?

4) Για να αλλάξετε το πλάτος του περιθωρίου, το στυλ και το χρώμα όταν είναι σε ενεργό λειτουργία επεξεργαστείτε αυτόν τον κώδικα,

border: 1px dotted # 289728?

όπου 1px, είναι το πλάτος του πλαισίου. Είναι ρυθμισμένο σε διακεκομμένη γραμμή και το χρώμα είναι # 289728

5) Για να αλλάξετε την εμφάνιση του περιθωρίου, όταν δηλαδή περνάμε τον δείκτη του ποντικιού από πάνω, μπορείτε να επεξεργαστείτε τον κωδικό

border: 2px solid # 666?

6) Για να αλλάξετε τη γραμματοσειρά και το μέγεθος της, επεξεργαστείτε αυτό,

font: 12px Arial?

όπου 12px είναι το μέγεθος, και arial είναι η γραμματοσειρά ως προεπιλογή που έχω χρησιμοποιήσει.

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

<textarea class="mbt-textarea" readonly="readonly">ΕΔΩ ΓΡΑΦΟΥΜΕ ΚΕΙΜΕΝΟ</textarea>
<p class="mbt" ><u>Εδώ βάζουμε τίτλο ή κάποια οδηγία για το κείμενο</u></p>

Η σειρά του κώδικα με το μπλέ-κιτρινο χρώμα, είναι προαιρετική, και είναι μια οδηγία ή κάποιος τίτλος που θέλουμε να βάλουμε για το κείμενό μας, και θα φαίνεται έξω από το κείμενο. Εκεί που είναι τα κίτρινα γράμματα, γράφουμε αυτό που θέλουμε να φαίνεται.
Η επεξεργασία αυτού του "οδηγού" γίνεται, βάζοντας τις τιμές που επιθυμούμε, τροποποιώντας τον κώδικα αυτόν.

.mbt {


padding-top:3px;


margin:0;


color:#289728;


font-size: 9px;


font-family: sans-serif, verdana;


}
Τώρα τελειώσαμε.

Widget για τους επισκέπτες, τα σχόλια και τους αναγνώστες online Πηγή www.bloggertips.gr






Από τον Πίνακα ελέγχου επιλέγουμε Διάταξη --> Προσθήκη Gadget --> Html/Javascript, και κάνουμε επικόληση τον παρακάτω κωδικό

<script style="text/javascript">
function totalPosts(json) {
document.write('Αναρτήσεις: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function totalComments(json) {
document.write('Σχόλια: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<script src=" /feeds/posts/default?alt=json-in-script&callback=totalPosts"></script>
<script src=" /feeds/comments/default?alt=json-in-script&callback=totalComments"></script>
<p style="margin-top: 0; margin-bottom: 0">
<table border="0" bordercolor="#111111" id="AutoNumber1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">
<tr>
<td width="35%">
Online now:</td>
<td width="65%"><p style="margin-top: 0; margin-bottom: 0"><b><script src="http://fastonlineusers.com/on3.php?d=
YOURBLOG" type="text/javascript"></script></b></p></td>
</tr>
</table></p>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-4679235-4");
pageTracker._trackPageview();
} catch(err) {}</script>


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

WIDGET ΓΙΑ ΑΥΞΟΜΕΙΩΣΗ ΜΕΓΕΘΟΥΣ ΑΝΑΡΤΗΣΕΩΝ Πηγή www.bloggertips.gr



Μπείτε στο λογαριασμό του blogspot σας και από εκεί πάτε πανόπτης, διάταξη, προσθήκη gadget και HTML/JavaScript (Layout>Add a Gadget>HTML/JavaScript). Κάντε αντιγραφή - επικόλληση (copy - paste) τον παρακάτω κώδικα και πατήστε αποθήκευση (save).

<script language="JavaScript" src="http://bloghacktips.googlepages.com/font.js"></script><div class="central" style="width: 80; height: 19"><span style="font-family:Arial;"><b><br /><br /><a href="javascript:decreaseFontSize();">A-</a><span style="font-size: 200%"> <a href="javascript:increaseFontSize();">A+</a></span></b></span></div><a href="http://bloghacktips.blogspot.com/2009/04/font-size-is-always-problem-for-blogger.html"><span style="font-size: 70%"></span></a>

UPDATE: Επειδή κάποιοι συνάντησαν δυσκολίες με το συγκεκριμένο trick θα αναφέρω άλλους δυο τρόπους για το πως θα επιτευχθεί η αυξομείωση των fonts στο blog.
Αν θέλετε να έχετε κουμπί αυξομείωσης όπως το παρακάτω screenshot:


βάλτε τον παρακάτω κώδικα όπως κάθε άλλο gadget:

Change Text Size<br/> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span >+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span >+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span >+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span >+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span >+</span></a>


Αν θέλετε τα κουμπιά αυξομείωσης να δείχνουν όπως το παρακάτω screenshot:


βάλτε τον παρακάτω κώδικα όπως κάθε άλλο gadget:


Change Text Size<br/>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span >Small</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span >Medium</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span >Large</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span >Larger</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span >Largest</span></a>

Online κομπιουτεράκι στο blog σας - HTML Calculator for your desktop Πηγή www.bloggertips.gr




Η προσθήκη του είναι απλή, σαν οποιοδήποτε άλλο widget.

(σχεδίαση>στοιχεία σελίδας>προσθήκη gadget>HTML-JAVASCRIPT)

Widget 1:

Κωδικός:


<style type="text;css">
.calcBtn
{
font-weight : bold/
width: 32px;
height: 32px;
}
</style>

<script language="JavaScript">

function Calculator_OnClick(keyStr)
{
var resultsField = document.calculator.calcResults;

switch (keyStr)
{
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "0":
case ".":

if ((this.lastOp==this.opClear) || (this.lastOp==this.opOperator))
{
resultsField.value = keyStr;
}
else
{
// ignore extra decimals
if ((keyStr!=".") || (resultsField.value.indexOf(".")<0))
{
resultsField.value += keyStr;
}

}

this.lastOp = this.opNumber;
break;

case "*":
case "/":
case "+":
case "-":
if (this.lastOp==this.opNumber)
this.Calc();
this.evalStr += resultsField.value + keyStr;

this.lastOp = this.opOperator;
break;

case "=":
this.Calc();
this.lastOp = this.opClear;
break;

case "c":
resultsField.value = "0";
this.lastOp = this.opClear;
break;

default:
alert("'" + keyStr + "' not recognized.");
}

}

function Calculator_Calc()
{
var resultsField = document.calculator.calcResults;
//alert("eval:"+this.evalStr+resultsField.value);
resultsField.value = eval(this.evalStr+resultsField.value);
this.evalStr = "";
}

function Calculator()
{
this.evalStr = "";

this.opNumber = 0;
this.opOperator = 1;
this.opClear = 2;

this.lastOp = this.opClear;

this.OnClick = Calculator_OnClick;
this.Calc = Calculator_Calc;
}

gCalculator = new Calculator();

</script>


<form name="calculator">

<table border="2" cellpadding="4" cellspacing="0" bordercolor="#000000">
<tr>
<td>
<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr>
<td colspan="4">
<input type="text" name="calcResults" value="0" size="20" style="text-align: right" /></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" C " name="calclear" onclick="gCalculator.OnClick(&#39;c&#39;)" /></td>
<td></td>
<td> </td>
<td><input class="calcBtn" type="button" value=" = " name="calequal" onclick="gCalculator.OnClick(&#39;=&#39;)" /></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" 7 " name="cal7" onclick="gCalculator.OnClick(&#39;7&#39;)" ondblclick="gCalculator.OnClick(&#39;7&#39;)" /></td>
<td><input class="calcBtn" type="button" value=" 8 " name="cal8" onclick="gCalculator.OnClick(&#39;8&#39;)" ondblclick="gCalculator.OnClick(&#39;8&#39;)" /> </td>
<td><input class="calcBtn" type="button" value=" 9 " name="cal9" onclick="gCalculator.OnClick(&#39;9&#39;)" ondblclick="gCalculator.OnClick(&#39;9&#39;)" /> </td>
<td><input class="calcBtn" type="button" value=" / " name="caldiv" onclick="gCalculator.OnClick(&#39;/&#39;)" /></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" 4 " name="cal4" onclick="gCalculator.OnClick(&#39;4&#39;)" ondblclick="gCalculator.OnClick(&#39;4&#39;)" /> </td>
<td><input class="calcBtn" type="button" value=" 5 " name="cal5" onclick="gCalculator.OnClick(&#39;5&#39;)" ondblclick="gCalculator.OnClick(&#39;5&#39;)" /> </td>
<td><input class="calcBtn" type="button" value=" 6 " name="cal6" onclick="gCalculator.OnClick(&#39;6&#39;)" ondblclick="gCalculator.OnClick(&#39;6&#39;)" /> </td>
<td><input class="calcBtn" type="button" value=" * " name="calmul" onclick="gCalculator.OnClick(&#39;*&#39;)" /></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" 1 " name="cal1" onclick="gCalculator.OnClick(&#39;1&#39;)" ondblclick="gCalculator.OnClick(&#39;1&#39;)" /> </td>
<td><input class="calcBtn" type="button" value=" 2 " name="cal2" onclick="gCalculator.OnClick(&#39;2&#39;)" ondblclick="gCalculator.OnClick(&#39;2&#39;)" /> </td>
<td><input class="calcBtn" type="button" value=" 3 " name="cal3" onclick="gCalculator.OnClick(&#39;3&#39;)" ondblclick="gCalculator.OnClick(&#39;3&#39;)" /> </td>
<td><input class="calcBtn" type="button" value=" + " name="calplus" onclick="gCalculator.OnClick(&#39;+&#39;)" /></td>
</tr>
<tr>
<td> </td>
<td><input class="calcBtn" type="button" value=" 0 " name="cal0" onclick="gCalculator.OnClick(&#39;0&#39;)" ondblclick="gCalculator.OnClick(&#39;0&#39;)" /> </td>
<td><input class="calcBtn" type="button" value=" . " name="caldec" onclick="gCalculator.OnClick(&#39;.&#39;)" /></td>
<td><input class="calcBtn" type="button" value=" - " name="calminus" onclick="gCalculator.OnClick(&#39;-&#39;)" /></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<font face="Tahoma"><a target="_blank" href="http://johnpatrablog.blogspot.com/2010/07/online-blog-html-calculator-for-your.html"><span style="font-size: 6pt; text-decoration: none">Johnpatrablog</span></a></font>



Widget 2:

Κωδικός:


<!-- This Script is from www.htmlfreecodes.com, Coded by: Krishna Eydat-->
<center>

<form name="Keypad" action="">
<table>
<b>
<table border=2 width=50 height=60 cellpadding=1 cellspacing=5>
<tr>
<td colspan=3 align=middle>
<input name="ReadOut" type="Text" size="24" value="0" width="100%" />
</td>

<td>
<input name="btnClear" type="Button" value=" C " onclick="Clear()" />
</td>
<td><input name="btnClearEntry" type="Button" value=" CE " onclick="ClearEntry()" />
</td>
</tr>
<tr>
<td>
<input name="btnSeven" type="Button" value=" 7 " onclick="NumPressed(7)" />
</td>
<td>
<input name="btnEight" type="Button" value=" 8 " onclick="NumPressed(8)" />
</td>
<td>
<input name="btnNine" type="Button" value=" 9 " onclick="NumPressed(9)" />
</td>
<td>
</td>
<td>
<input name="btnNeg" type="Button" value=" +/- " onclick="Neg()" />
</td>
<td>
<input name="btnPercent" type="Button" value=" % " onclick="Percent()" />
</td>
</tr>
<tr>
<td>
<input name="btnFour" type="Button" value=" 4 " onclick="NumPressed(4)" />
</td>
<td>
<input name="btnFive" type="Button" value=" 5 " onclick="NumPressed(5)" />
</td>
<td>
<input name="btnSix" type="Button" value=" 6 " onclick="NumPressed(6)" />
</td>
<td>
</td>
<td align=middle><input name="btnPlus" type="Button" value=" + " onclick="Operation(&#39;+&#39;)" />
</td>
<td align=middle><input name="btnMinus" type="Button" value=" - " onclick="Operation(&#39;-&#39;)" />
</td>
</tr>
<tr>
<td>
<input name="btnOne" type="Button" value=" 1 " onclick="NumPressed(1)" />
</td>
<td>
<input name="btnTwo" type="Button" value=" 2 " onclick="NumPressed(2)" />
</td>
<td>
<input name="btnThree" type="Button" value=" 3 " onclick="NumPressed(3)" />
</td>
<td>
</td>
<td align=middle><input name="btnMultiply" type="Button" value=" * " onclick="Operation(&#39;*&#39;)" />
</td>
<td align=middle><input name="btnDivide" type="Button" value=" / " onclick="Operation(&#39;/&#39;)" />
</td>
</tr>
<tr>
<td>
<input name="btnZero" type="Button" value=" 0 " onclick="NumPressed(0)" />
</td>
<td>
<input name="btnDecimal" type="Button" value=" . " onclick="Decimal()" />
</td>
<td colspan=3>
</td>
<td>
<input name="btnEquals" type="Button" value=" = " onclick="Operation(&#39;=&#39;)" />
</td>
</tr>
</table>
</b></table>

</form>
</center>
<font face="Verdana, Arial, Helvetica" size=2>
<script language="JavaScript">
<!-- Begin
var FKeyPad = document.Keypad;
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accumulate += parseFloat(Readout);
else if ( '-' == PendingOp )
Accumulate -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accumulate /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accumulate *= parseFloat(Readout);
else
Accumulate = parseFloat(Readout);
FKeyPad.ReadOut.value = Accumulate;
PendingOp = Op;
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accumulate = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accumulate);
}
// End -->
</script>

<font face="Tahoma"><a target="_blank" href="http://johnpatrablog.blogspot.com/2010/07/online-blog-html-calculator-for-your.html"><span style="font-size: 6pt; text-decoration: none">Johnpatrablog</span></a></font></font>

Gadget με αναλυτικές βαθμολογίες ποδοσφαιρικών πρωταθλημάτων Πηγή www.bloggertips.gr


Προεπισκόπηση gadget:


Η προσθήκη του είναι απλή, σαν οποιοδήποτε άλλο widget από Σχεδίαση>Προσθήκη gadget>HTML/JAVASCRIPT και αποθήκευση.

HTML κωδικός:

Βαθμολογίες πρωταθλημάτων:<div id = "kickstart" align="right"><iframe frameborder="0" width="100%" height="650" src="http://www.kickstart.gr/Shared/StandingsFrame.aspx?args=666666,EEEEEE,FFFFFF,FFFFFF,333333,333333,FFFFFF,Verdana,8"></iframe><br />add this from <a href="http://johnpatrablog.blogspot.com/2010/07/gadget.html">HERE!</a></div>

Κάθετο Menu Bar στο Blog σας Πηγή www.bloggertips.gr


Ο κωδικός του είναι αυτός.



<style type="text/css">

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu{
border: 1px solid #000000;
border-bottom-width: 0;
width: 100%;
}

#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
list-style-type:none;
}

* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}

#ddblueblockmenu a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
}

#ddblueblockmenu div.menutitle{
color: #ffffff;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

</style>

<div id="ddblueblockmenu">

<div class="menutitle">Browse</div>
<ul>
<a href="Το Url του Link σας/">Home</a>
<a href="Το Url του Link σας/">About me</a>
<a href="Το Url του Link σας/">To άλλο μου Blog</a>
<a href="Το Url του Link σας/">Διάφορα</a>
<a href="Το Url του Link σας/">Επικοινωνία</a>
</ul></div>

Όπως προανέφερα, είναι widget, οπότε για να κάνετε την εφαρμογή θα πάτε Πίνακα ελέγχου -->  Σχεδίαση --> Προσθήκη gadget --> Html/Javascript, και κάνουμε επικόλληση τον κωδικό. Πριν πατήσετε Αποθήκευση, πρέπει να κάνετε τις ρυθμίσεις που απαιτούν τα ...γούστα σας.

Στην αρχή του κωδικού, ο αριθμός με το πράσινο χρώμα, αντιστοιχεί στο χρώμα του πλαισίου του widget.
Ακολούθως, το σκούρο μπλε, είναι το χρώμα των γραμμάτων του κεντρικού Menu.
Με το καφέ, είναι το background του Menu.
Με το κόκκινο χρώμα είναι το χρωμα της διαχωριστικής γραμμής του menu.
Με το μπλε, είναι η κάθετη γραμμή δίπλα στο πλαίσιο, που φαίνεται αριστερά του menu.
Με το θαλασσί, είναι το χρώμα του menu, όταν περνάμε το δείκτη του ποντικιού από πάνω του.
Με το φούξια, είναι το χρώμα της κάθετης γραμμής του menu, όταν περνάμε το δείκτη του ποντικιού από πάνω του.
Με το πράσινο, είναι το χρώμα των γραμμέτων του τίτλου.
Τέλος με το πορτοκαλί, είναι το background του τίτλου.

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




Προς το τέλος του κωδικού, αυτό με το κόκκινο χρώμα, είναι τα links που θα φαίνονται.
Εκεί που γράφει "Το Url του Link σας/", βάζουμε το direct link που θα οδειγήται ο επισκέπτης πατώντας το, ενώ εκεί που γράφει Home κλπ, γράφουμε αυτό που προσδιορίζει το link.
Μπορούμε να προσθέσουμε, (ή να αφαιρέσουμε), όσα links θέλουμε, επικολώντας κάθε φορά για κάθε link τον κωδικό.



Πρόσθεσε Reply Button σε κάθε σχόλιό σου - Add a Reply Button to your comments Πηγή www.bloggertips.gr






Για να ενσωματώσετε αυτό το hack στο Blog σας, ακολουθήστε τα παρακάτω βήματα:

1) Login στον blogger account
2) Πανόπτης
3) Σχεδίαση ή Διάταξη
4) Επεξεργασία html
5) Επέκταση προτύπων γραφικών στοιχείων
6) Με το ctrl+F βρείτε τον παρακάτω κωδικό:

<data:commentPostedByMsg/>

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

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>[Reply]</a></span>

Επεξεργασία του παραπάνω κώδικα:

α) Καταρχίν εκεί που λέει YOUR-BLOG-ID αλλάξτε το με το ID του blog σας. Το ID σας μπορείτε να το βρείτε πολύ εύκολα. Αρκεί να κοιτάξετε στην url σας και θα το δείτε, όπως φαίνεται και στη φώτο:


β) Εκεί που λέει [Reply], μπορείτε να το αλλάξετε και να βάλετε κάτι άλλο π.χ.: "Απαντήστε σε αυτό το σχόλιο".

γ) Μπορείτε να βάλετε και εικόνα αντί για το [Reply]. Απλά διαγράψτε το [Reply] και στη θέση του βάλτε τον παρακάτω κωδικό:

<img src="http://3.bp.blogspot.com/_v5IxGTiMTD8/TDDXeKfwaaI/AAAAAAAACe8/lI2Jj9VdMFs/s1600/reply%5B1%5D.gif"/>

Μπορείτε να βάλετε όποια εικόνα θέλετε, αντικαθιστώντας τα κόκκινα γράμματα με το url της.

7) Πατήστε Προεπισκόπηση να δείτε αν θα γίνει δεκτός ο κώδικας και αν είναι όλα οκ, πατήστε Αποθήκευση!

Ελπίζω να σας αρέσει :)

Αφήστε ένα σχόλιο να δω κι εγώ αν οι κωδικοί είναι οκ ή είναι λάθος.

Μην ξεχάσετε να το αναρτήσετε στο facebook wall σας, πατώντας το παρακάτω κουμπί:

Rss Feed Ετικετών - Add Labels Rss Feed Link Button To All Your Blogger Labels Πηγή www.bloggertips.gr




Πάμε να δούμε πως θα το κάνουμε.

Καταρχίν πρέπει να έχετε στο blog σας, το gadget των ετικετών.
Αν δεν το έχετε βάλει, βάλτε το τώρα από Σχεδίαση>Προσθήκη gadget>Ετικέτες

Log in to your blogger account from http://draft.blogger.com/home (ΝΟ blogger.com)

Σχεδίαση (Διάταξη)

Επεξεργασία html

Επέκταση προτύπων γραφικών στοιχείων

Πάντα με ctrl+F ψάξτε για τους παρακάτω κωδικούς:

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

Αντικαταστήστε τους παραπάνω κωδικούς με τους παρακάτω:

<b:loop values='data:labels' var='label'>
<li>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

Τώρα αριστερά κάθε ετικέτας έχουμε βάλει το εικονίδιο rss.
Αν θέλετε να μπει το εικονίδιο δεξιά αντί για αριστερά, αντικαταστήστε τους παρα-παραπάνω κωδικούς, με τους παρακάτω, αντί για τους παραπάνω.
(διαβάστε το πολλές φορές μην μπερδευτείτε' χαχα)

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

</li>
</b:loop>

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

Ουσιαστικά εμείς έχουμε πάρει το κομμάτι κώδικα που αφορά τις ετικέτες και το έχουμε "χακάρει", βάζοντας τους κόκκινους κωδικούς.

Έχουμε βάλει το κλασσικό πορτοκαλί εικονίδιο του rss σε διαστάσεις 16x16. Αν και δεν σας το προτείνω, αν θέλετε μπορείτε να το αλλάξετε.

Τώρα είναι πολύ πιο εύκολο για τους επισκέπτες σας να εγγραφτούν στην αγαπημένη τους ετικέτα στο blog σας.

Αφήστε κανένα σχόλιο με καμιά τυχον απορία ή ένα απλό οκ αν όλα πήγαν οκ.

Ανάρτηση στο fbw (FaceBook Wall) για όποιον το επιθυμεί με το πάτημα του παρακάτω κουμπιού:

Table Border Πηγή www.bloggertips.gr



Για να το περάσετε κάνετε τα εξής:
1) Σύνδεση στον λογαριασμό σας από το blogger.com
2) Διάταξη>Στοιχεία σελίδας>Προσθήκη gadget>HTML/Javascript
3) Επικολλήστε εκεί μέσα τον παρακάτω κώδικα:

<table border="0" width="280" id="myexample" style="border:5px solid green">
<tr>
<td>Γράψτε εδώ ότι θέλετε....
Γράψτε εδώ ότι θέλετε....
Γράψτε εδώ ότι θέλετε....
</td>
</tr>
</table>
<script language="JavaScript1.2">
<!--

//configure interval btw flash (1000=1 second)
var speed=500

function flashit(){
var crosstable=document.getElementById? document.getElementById("myexample") : document.all? document.all.myexample : ""
if (crosstable){
if (crosstable.style.borderColor.indexOf("green")!=-1)
crosstable.style.borderColor="red"
else
crosstable.style.borderColor="green"
}
}
setInterval("flashit()", speed)
//-->
</script>

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


Τώρα δώστε βάση στα κομμάτια που έχω χρωματίσει με κόκκινο...
1. (width="280") Είναι το μήκος του πλαισίου....Αυξομειώστε τον αριθμό για να διαμορφώσετε το επιθυμητό μέγεθος.

2. (border:5px) Είναι το πάχος της γραμμής του πλαισίου...Αυξομειώστε τον αριθμό για να διαμορφώσετε το επιθυμητό μέγεθος.
3. (Γράψτε εδώ ότι θέλετε....) Είναι το κείμενο που θα υπάρχει μέσα στο πλαίσιο....Βέβαια εκτός από κείμενο μπορείτε να βάλετε link,εικόνα κτλ δίνοντας τον ανάλογο κώδικα, πχ για να βάλετε εικόνα βάλτε τον κώδικα:
<img src="ΕΔΩ ΤΟ ΛΙΝΚ ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ" />
ή για link βάλτε:
<a href="ΕΔΩ ΤΟ ΛΙΝΚ ΣΑΣ">ΕΔΩ ΔΏΣΤΕ ΟΝΟΜΑΣΙΑ ΣΤΟ ΛΙΝΚ</a>

4. (speed=500) Εδώ ρυθμίζετε την ταχύτητα που αναβοσβήνει το πλαίσιο...Αυξομειώστε τον αριθμό για να διαμορφώσετε το επιθυμητό αποτέλεσμα.

5. (red)+(green) Εδώ ρυθμίζετε τον χρωματισμό με τον οποίο θα αναβοσβήνει το πλαίσιο γράψτε το χρώμα που θέλετε ή δώστε τον κωδικό html ενός χρώματος βάζοντας μπροστά πάντα την δίεση (#) (πχ για μαύρο #000000).

ΚΕΝΤΡΑΡΕ ΤΟΥΣ ΤΙΤΛΟΥΣ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ ΣΟΥ Πηγή www.bloggertips.gr


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

1. Σύνδεση στον λογαριασμό μας
2. Σχεδίαση>Επεξεργασία html
3. Πάντα με τη χρήση του ctrl+F βρείτε το .post h3

Θα πρέπει να βρείτε το ακόλουθο κομμάτι κωδικού:


.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Ο παραπάνω κωδικός είναι ακριβώς όπως είναι στο minima template. Στα άλλα πρότυπα, ενδέχεται να διαφέρει λίγο ως πολύ, ανάλογα με το πρότυπο.

4. Απλά θα προσθέσετε στον παραπάνω κωδικό το text-align:center; έτσι ώστε να φαίνεται έτσι:

.post h3 {
text-align:center;
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Κάντε και μια προεπισκόπηση και αν όλα λειτουργούν σωστά, αποθηκεύστε.


Αν αντί για το κέντρο, θέλετε να φαίνεται οι τίτλοι των αναρτήσεών σας στα αριστερά ή στα δεξιά αντί για το text-align:center; βάζετε το text-align:left; για αριστερά και το text-align:right; για δεξιά.

Ημερομηνία στην μπάρα του browser τους, όσο βρίσκονται στο site σας! Πηγή www.bloggertips.gr





Από τον πανόπτη, πάμε στη Σχεδίαση>Στοιχεία Σελίδας, Προσθήκη gadget, ΗTML/JavaScript και επικολλούμε εκεί τον παρακάτω κωδικό και το αποθηκεύουμε, χωρίς να βάλουμε τίτλο.

<script language="JavaScript" type="Text/JavaScript">
var mytime1=24;
function mytime2() {
mytime3=mytime1+6;
mytime4=mytime1+mytime3;
timexx=mytime1+mytime3+mytime4;
timexxx=timexx/mytime4*mytime1; twelfth=mytime4*mytime1/12*mytime3;
timexxxx=mytime1+mytime3/timexxx-16*timexx;
timexxxxx=twelfth*(mytime1-5)/mytime4+timexx;
timexxxxxx=timexxxxx/timexxxx+mytime1*mytime4-timexx;
mytime5=(timexxxxxx+mytime1/mytime4*timexx+mytime3*timexxx)/twelfth+timexxxxx-timexxxxxx-1;
mytime6=Math.floor(mytime5);
mytime8=mytime6*mytime3/2+100;
mytime7 = window.setTimeout("mytime2()", mytime8);
var mytime9 = new Date();
var mytime10= mytime9.toLocaleString();
document.title = mytime10;}
function op(){mytime2()}
window.onload=op;
</script>

Αυτόματα tabs στη blog sidebar (SUPER BLOG HACK) Πηγή www.bloggertips.gr



Ακολουθήστε τα παρακάτω βήματα:

1. Σύνδεση στον blogger λογαριασμό σας
2. Σχεδίαση
3. Επεξεργασία html
4. Επέκταση προτύπων γραφικών στοιχείων
5. Με ctrl+F βρείτε το </head> και από πάνω του, επικολλήστε το παρακάτω:

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}
tabberObj.prototype.init = function(e)
{
var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;
if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;
for (i=0; i < this.tabs.length; i++) {
t = this.tabs[i];
t.headingText = t.div.title;
if (this.removeTitle) { t.div.title = ''; }
if (!t.headingText) {
for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/<br>/gi," ");
t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}
if (!t.headingText) {
t.headingText = i + 1;
}
DOM_li = document.createElement("li");
t.li = DOM_li;
DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;
DOM_a.tabber = this;
DOM_a.tabberIndex = i;
if (this.addLinkId && this.linkIdFormat) {
aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
DOM_a.id = aId;
}
DOM_li.appendChild(DOM_a);
DOM_ul.appendChild(DOM_li);
}
e.insertBefore(DOM_ul, e.firstChild);
e.className = e.className.replace(this.REclassMain, this.classMainLive);
this.tabShow(defaultTab);
if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}
return this;
};
tabberObj.prototype.navClick = function(event)
{
var
rVal,
a,
self,
tabberIndex,
onClickArgs;
a = this;
if (!a.tabber) { return false; }
self = a.tabber;
tabberIndex = a.tabberIndex;
a.blur();
if (typeof self.onClick == 'function') {
onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }
rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}
self.tabShow(tabberIndex);
return false;
};
tabberObj.prototype.tabHideAll = function()
{
var i;
for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
div = this.tabs[tabberIndex].div;
if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);
return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
this.tabHideAll();
div = this.tabs[tabberIndex].div;
div.className = div.className.replace(this.REclassTabHide, '');
this.navSetActive(tabberIndex);
if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}
return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = this.classNavActive;
return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = '';
return this;
};
function tabberAutomatic(tabberArgs)
{
var
tempObj,
divs,
i;
if (!tabberArgs) { tabberArgs = {}; }
tempObj = new tabberObj(tabberArgs);
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {
if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}
return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
var oldOnLoad;
if (!tabberArgs) { tabberArgs = {}; }
oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
if (typeof tabberOptions == 'undefined') {
tabberAutomaticOnLoad();
} else {
if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}
}
//]]>
</script>

6. Τώρα βρείτε το ]]></b:skin> και από πάνω επικολλήστε το παρακάτω:

/*-- tabbed section starts --- */
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
/*-- tabbed section ends---*/

7. Αποθήκευση

8. Πατήστε πάλι Επεξεργασία html (αυτη τη φορά μην τσεκάρετε το Επέκταση προτύπων γραφικών στοιχείων)

9. Τώρα πρέπει να προσθέσουμε τα Variable definitions για να κάνουμε εφικτές τις αλλαγές χρωμάτων στα tabs.


Βρείτε το σημείο που τελειώνουν τα Variable definitions (βοηθηθείτε από την παραπάνω εικόνα), (πάνω από το σύμβολο */ ) ,αντιγράψτε και επικολλήστε τον παρακάτω κώδικα :

<Variable name="tbbxbgcolor" description="Tab box Background Color"
type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color"
type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1"
type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2"
type="color" default="#5588aa" value="#5588aa">

10. Τώρα βρείτε το <div id='sidebar-wrapper'> και από κάτω του, επικολλήστε το παρακάτω:

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='9'/>
<b:section class='tabbertab' id='tab2' maxwidgets='9'/>
<b:section class='tabbertab' id='tab3' maxwidgets='9'/>
<b:section class='tabbertab' id='tab4' maxwidgets='9'/>
</div>

11. Αποθήκευση

12. Τώρα πατήστε "Στοιχεία Σελίδας" όπου θα δείτε το παρακάτω:


Μετακινήστε όποιο gadget θέλετε στις αντίστοιχες θέσεις.

13. Είστε έτοιμοι!!! (επιτέλους)
14. Φτάσατε μέχρι το 14ο βήμα? Ε τότε αφήστε ένα σχόλιο με τις εντυπώσεις σας!

Πως αλλάζω τα χρώματα?

Από τον Σχεδιαστή Προτύπων>Προηγμένη όπως φαίνεται παρακάτω:

ΠΩΣ ΒΑΖΩ CHAT ΣΤΟ BLOG ΜΟΥ? Πηγή www.bloggertips.gr

Πρώτον !! μπαίνετε στη σελίαυτό, εξ' αιτίας των extras και της λειτουργικότητάς του).Κάνετε λογαριασμό free εκει που γράφει Get your own Cbox ...(ο premium κοστίζει μόνο 2$ το μήνα), βάζοντας ένα όνομα , ένα νούμερο κωδικού, το email σας, τη διεύθυνση του blog σας κ.λ.π., και κάνετε ενα λογαριασμό.
Οταν κάνετε λογαριασμό μπαίνετε στο "παρασύνθημα" και τροποποιείτε το chat όπως εσείς θέλετε...χρώματα, μέγεθος, χρώμα γραμμάτων, και στυλ....(όποτε θέλετε στο μέλλον μπορείτε να τα μετατρέψετε όπως εσείς θέλετε)...ολα αυτά τα κάνετε απο τις επιλογές επάνω δεξιά
Home => publish=> look & feel=> options=> users & access
Στο τέλος ζητάτε τον κώδικά σας (στο publish!)

...τον κάνετε copy (αντιγραφή) και πάτε στο bloger σας και τον κάνετε paste (επικόληση) σαν gadget στα "κουτάκια" της "Σχεδίασης"=>"επεξεργασία HTML"...
Τώρα το chat σας είναι στη σελίδα σας...το μεταφέρετε όπου εσείς θέλετε και πατάτε "Αποθήκευση"...Τώρα όμως αρχίζουν τα extras...Οπως βλέπετε το chatbox στη σελίδα σας, κάτω δεξιά, θα δείτε 3 λέξεις : help-smilies-cbox...ας δούμε τι κάνουν αυτές οι 3 λέξεις...Πατώντας το cbox, μπαίνετε στην αρχική σελίδα του site όπου με τον κωδικό σας αλλάζετε ότι θέλετε....Μπορείτε επίσης να σβήσετε ένα μήνυμα που το θεωρείτε περιττό η ακατάλληλο...


Πατώντας smilies σας ανοίγει ένα νέο παράθυρο, όπου υπάρχουν διάφορα ανθρωπάκια που ομορφαίνουν το μήνυμά σας...
Εδώ κάνουμε μια στάση για να δούμε κάτι που είναι της μόδας τελευταία...πολλοί αλλάζουν τις εικόνες των smilies, για να βάλλουν άλλα, πιο όμορφα και ευπαρουσίαστα.Πως γίνεται αυτό; Πολύ εύκολα...πάμε στο λογαριασμό μας στο chatbox και πατάμε στο options=>smilies...αλλάζουμε τις διευθύνσεις των ήδη υπαρχόντων με άλλα που βρίσκουμε σε άλλες διευθύνσεις .


..π.χ. αν μπείτε στο δικό μου http://www.egioparalia.blogspot.com/ και ανοίξετε τα δικά μου smilies, διαλέξτε όποιο θέλετε και κάνετε δεξί κλικ και πατήστε "αντιγραφή διεύθυνσης URL εικόνας" ...κάνετε τώρα επικόλληση σε μία ήδη υπάρχουσα διεύθυνση εικόνας smiley και πατήστε επάνω σε αυτήν να δείτε το νέο εικονίδιο που βάλατε...καλό ;


σίγουρα θα τα αλλάξετε όλα...μπορείτε να βάλετε όσα θέλετε...μη ξεχάσετε να πατάτε πού και πού το save στο πάτο της σελίδας...( αν δεν σας βγάλει "saved" σημαίνει οτι κάτι κάνατε λάθος, συνήθως με τον κώδικα της εικόνας που αναγνωρίζει το smiley)+(απλά αλλάξτε τα γράμματα η τα σημεία του κώδικα της εικόνας)+(προσέχετε μη βάζετε μεγάλες εικόνες, γιατί πιάνουν πολύ χώρο στο chat)
Το καλύτερο σας το άφησα για το τέλος (δεν ξέρω γιατί, αλλά όλοι το κάνουν αυτό με το καλύτερο..το αφήνουν για το τέλος)...θέλετε το ΜΙΚΡΟ μήνυμά σας να κινείται ; ή θα αντιγράψετε το κωδικό που σας δίνω, η θα πάτε στο "Help" , οπου μπορείτε να αυτοσχεδιάσετε...υπάρχει η δυνατότητα να κάνετε τα γράμματα χοντρά, πλάγια, μικρά, και σε ο, τι χρώμα θέλετε...Σας δίνω λοιπόν εδώ ένα κώδικα που μπορείτε να τον βάλετε σαν μήνυμα λέγοντας ΚΑΛΗΜΕΡΑ, αλλά κινούμενο...
[scroll][color=red] [b]ΚΑΛΗΜΕΡΑ[/b] [/color] [/scroll] όπου , αντί για καλημέρα μπορείτε να βάλετε μία οποιαδήποτε μικρή φράση σας αρέσει (ή κάποιο από τα smilies του chat)...και αντί για red μπορείτε να βάλετε blue, green, yellow κ.λ.π.
Λοιπον , επειδή "τα παιδία πάντα παίζει", φροντίστε να μη σπάσετε τα νεύρα του ιδιοκτήτη του blog που θα γράψετε το μήνυμά σας, βάζοντας λιτά και μετρημένα μηνύματα...
Ετσι απλά, μπορείτε να έχετε μιά όμορφη και μοντέρνα επαφή με τους άλλους blogers...

Υ.Γ. Επί του πιεστηρίου...αν θέλετε να βάλετε το avatar σας, σαν εικονίδιο στη συνομιλία σας, πηγαίνετε cbox=>options=>posting options=> allow avatars=>on(full adress) και ενεργοποιήστε τη λειτουργία avatar...τώρα αντι για διεύθυνση του blog θα βάζετε τη διεύθυνση της εικόνας του avatar σας και θα παρουσιάζει την φωτογραφία σας πριν το όνομά σας (η και χωρίς όνομα, μονο με την εικόνα σας)...εννοείται οτι "μαγκιές" με avatar θα κάνετε μόνο στο δικό σας cbox, γιατί δεν ξέρετε αν ο άλλος έχει ενεργοποιήσει το δικό του

ΑΦΑΙΡΕΣΤΕ ΤΗΝ ΜΠΑΡΑ ΤΟΥ BLOGGER (HOW TO REMOVE BLOGGER NAVIGATION BAR) Πηγή www.bloggertips.gr



1. Κάντε σύνδεση στο blogger
2. Σχεδίαση
3. Επεξεργασία HTML
4. CTRL + F και ψάχνουμε το ''Name    :''
5. Από κάτω απο τις πολλές παύλες (-----) βάζουμε τον κωδικό : 


#navbar-iframe {display: none !important;}


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

FLAGS TRANSLATOR WIDGET (έγινε update στον κώδικα!) Πηγή ww.bloggertips.gr


Πρόκειται για ένα widget που μεταφράζει τη σελίδα σας σε άλλες γλώσσες.Η μόνη διαφορά του από αυτήν την ανάρτηση εδώ είναι ότι σου έχει σημαίες (βλ.εικόνα) και ο επισκέπτης πατάει τη σημαία της γλώσσας που θέλει να μεταφραστεί το blog.
Το βάζουμε σαν απλό,κανονικό widget.Διάταξη>Προσθήκη gadget>HTML/JavaScript.O κωδικός είναι ο εξής:


<style>

.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>

<div>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBrDZLrI/AAAAAAAAAC0/Kc6eDMT9LFI/s200/France.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YVBzoFF2I/AAAAAAAAAC8/WgvMK3zP1Rk/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YVCdHp5VI/AAAAAAAAADE/lWHzr5znExU/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM/ChdHC6vYT4s/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWRkFo9UI/AAAAAAAAADU/4AzKfc6Oyxg/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YWR-jg9pI/AAAAAAAAADc/vYZrPOzazHU/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSGHcxOI/AAAAAAAAADk/ElHZBjDCZn8/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSR2_wYI/AAAAAAAAADs/GtKdPLKUluE/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="http://2.bp.blogspot.com/_5jbh95HruKA/S1YWSrlfMyI/AAAAAAAAAD0/_MACsRIW8wg/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWq7SrDkI/AAAAAAAAAD8/ZE8A1isEZrw/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWrMQAw9I/AAAAAAAAAEE/r-DEVtWXp50/s200/China.png" style="cursor: pointer;margin-right:8px" width="24" /></a> </div>
<div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div>

<br />