BLOG-Update - Mobile Version, Seiten, Übersetzer

Da mobile Webseiten immer wichtiger werden, ich neue Seiten brauch und auch eine automatische Übersetzung für den BLOG nicht schlecht wäre, habe ich dies alles implementiert:



Translation:
In der rechten Leiste kann man sich jetzt den BLOG in diversen Sprachen übersetzen lassen. Mit Englisch funktioniert das halbwegs gut. Es sind zwar die Sätze oft falsch aufgebaut aber man versteht einigermaßen was gemeint ist. Leider wird die rechte Spalte in der mobilen Version nicht angezeigt. Hier müsste man als Leser auf die Desktop-Version umschalten um diese Funktion zu sehen

Mobile Version:
Ich habe die mobile Version des BLOGs wieder aktiviert und dafür die mobile Auswahlleiste (welche die Seiten-Buttons der Desktop-Version von Blogger darstellt) verändern müssen, da sonst weiße Schrift auf weißen Hintergrund trifft. Eine mobile Homepage zu haben wird immer wichtiger und auch die Google-Suche favorisiert Seiten die auch mobil programmiert sind. Mit diesen CSS-Befehlen und Parametern kann man das Aussehen der Auswahlleiste, die Schrift und Hintergrundfarbe einstellen (für dunkle BLOGs wie diesen hier):

html .tabs-inner .widget select {
     background: rgba(255, 0, 0, 0.5);
     color: #000000;
     font-size: 20px;
     padding: 6px;
     border-radius: 5px;
     font-weight: bold;
}

Seiten-Buttons:
Um besser auf das Buch, das neue Periodensystem und das Megaposter (der Kern und die Hauptaufgabe dieses BLOGs) aufmerksam zu machen, wurden Seiten erstellt, die mit Buttons dargestellt werden. Außerdem habe ich die BLOG-Beschreibung mit Links zu den neuen Seiten versehen.

Für das Design der Buttons mit coolen "Mouseover-Effekten" (nur Desktop-Version) sind folgende Befehle notwendig:

.tabs-inner .widget li a {
border:3px solid #9E542F;-webkit-box-shadow: #000000 0px 2px 2px ;-moz-box-shadow: #000000 0px 2px 2px ; box-shadow: #000000 0px 2px 2px ; -webkit-border-radius: 23px; -moz-border-radius: 23px;border-radius: 23px;font-size:13px;font-family:arial, helvetica, sans-serif; padding: 10px 20px 10px 20px; text-decoration:none; display:inline-block;text-shadow: 0px 0px 0 rgba(0,0,0,0.3);font-weight:bold; color: #000000;
 background-color: #ffc579; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc579), to(#DE6D21));
 background-image: -webkit-linear-gradient(top, #ffc579, #DE6D21);
 background-image: -moz-linear-gradient(top, #ffc579, #DE6D21);
 background-image: -ms-linear-gradient(top, #ffc579, #DE6D21);
 background-image: -o-linear-gradient(top, #ffc579, #DE6D21);
 background-image: linear-gradient(to bottom, #ffc579, #DE6D21);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffc579, endColorstr=#DE6D21);
 transition: .4s all ease;
    font-size: 14px;
margin-right: 5px;
}

.tabs-inner .widget li a:hover {
 transition: .4s all ease;
 border:3px solid #9E1000;
 color: #000000;
 background-color: #FFDF0F; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFDF0F), to(#FF970F));
 background-image: -webkit-linear-gradient(top, #FFDF0F, #FF970F);
 background-image: -moz-linear-gradient(top, #FFDF0F, #FF970F);
 background-image: -ms-linear-gradient(top, #FFDF0F, #FF970F);
 background-image: -o-linear-gradient(top, #FFDF0F, #FF970F);
 background-image: linear-gradient(to bottom, #FFDF0F, #FF970F);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFDF0F, endColorstr=#FF970F);
 font-size: 14px;
}

.tabs-inner .widget li.selected a {
 transition: .4s all ease;
border:3px solid #9E542F;-webkit-box-shadow: #000000 0px 2px 2px ;-moz-box-shadow: #000000 0px 2px 2px ; box-shadow: #000000 0px 2px 2px ; -webkit-border-radius: 23px; -moz-border-radius: 23px;border-radius: 23px;font-size:13px;font-family:arial, helvetica, sans-serif; padding: 10px 20px 10px 20px; text-decoration:none; display:inline-block;text-shadow: 0px 0px 0 rgba(0,0,0,0.3);font-weight:bold; color: #000000;
 color: #000000;
 background-color: #FFDF0F; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFDF0F), to(#FF970F));
 background-image: -webkit-linear-gradient(top, #FFDF0F, #FF970F);
 background-image: -moz-linear-gradient(top, #FFDF0F, #FF970F);
 background-image: -ms-linear-gradient(top, #FFDF0F, #FF970F);
 background-image: -o-linear-gradient(top, #FFDF0F, #FF970F);
 background-image: linear-gradient(to bottom, #FFDF0F, #FF970F);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFDF0F, endColorstr=#FF970F);

    font-size: 14px;
}

.tabs-inner .widget li a:hover {
 border:3px solid #9E1000;
 color: #000000;
 background-color: #FFDF0F; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFDF0F), to(#FF970F));
 background-image: -webkit-linear-gradient(top, #FFDF0F, #FF970F);
 background-image: -moz-linear-gradient(top, #FFDF0F, #FF970F);
 background-image: -ms-linear-gradient(top, #FFDF0F, #FF970F);
 background-image: -o-linear-gradient(top, #FFDF0F, #FF970F);
 background-image: linear-gradient(to bottom, #FFDF0F, #FF970F);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFDF0F, endColorstr=#FF970F);
 transition: .4s all ease;
 font-size: 14px;