tag:blogger.com,1999:blog-78872222529237816022024-03-19T08:45:33.094+01:00So geht'sBlogger nutzenUte Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.comBlogger199125tag:blogger.com,1999:blog-7887222252923781602.post-78486274350246809102016-02-24T19:57:00.000+01:002016-02-24T21:10:29.082+01:00Einzelne Seiten-Tabs individuell färben<script type="text/javascript">
$(document).ready(function() {
$('#post-body-7848627435024680910').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65BNDIOCvweOSdVHxAJ4o3JjBHr7cwrCIdb45pTvIDnZl3gS28XNTtnil-q6MUUIbnwkWeiTK57CqhrwC9iwPxvNoED8QWiey1A5EaCb4IsolDv30AhLdpPhyGI9IPIxDtTb3Gxc1m0lc/s1600/layout-vorlagen_transparent.png") no-repeat scroll top right'})
});
</script>
In einer Layout-Vorlage von Blogger kann man die Farben für Hintergrund und Text eines Seiten-Gadgets in der Webverson des Blogs, das im Bereich "crosscol" bzw. "Cross-Column" des Layout einsortiert ist, bequem im Vorlagendesigner festlegen. Unter <b>Vorlage > Anpassen > Erweitert > Tab-Text bzw. Tab-Hintergrund</b> kann man unterschiedliche Farben für unausgewählte Tabs einerseits und den gerade ausgewählten bzw. gehoverten Tab andererseits angeben. Die Farben gelten für alle Tabs.<br />
<br />
<b>Mit</b> welchen <b>CSS-Kommandos</b> man einzelne <b>Tabs individuell färben</b> kann, erfährt man hier.<br />
<a name='more'></a><hr />
Unter "Tab-Hintergrund" wählt man mit "Hintergrundfarbe" die Farbe der Liste (ul), also der Zeile/n, in der/denen die Tabs stehen. Mit "Ausgewählte Farbe" wählt man die Hintergrundfarbe des einzelnen Tabs, wenn die dazugehörige Seite gerade ausgewählt ist (selected) oder man die Maus über den Tab hält (hover). Das gleiche Prinzip gilt unter "Tab-Text" für "Schriftfarbe" und "Ausgewählte Farbe". Als Farbe kann man jeweils auch "Transparent" wählen, dann sieht man, statt einer eigenen Farbe für das Element, die Hintergrundfarbe des Bereichs, auf dem das Element steht.<br />
<br />
<h4>
Standard</h4>
Man sieht hinter dem letzten, gerade ausgewählten Tab, dass das dunklere Blau die Zeilenfarbe ist.
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhflMklaVqtQFxIi3WgBrYS_pV3OQBAxQ3gONoBuQt0FYqmht9x5S7WiFznsr9kSr9cUrUQ_uchLmrpaaenxFptF9O34-1Oyl2TThVlzMZ3pEVJ7uoZ0L4G3ojC3UEFhCCazDOHjlOOrDSo/s1600/tabs_farbstandard.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhflMklaVqtQFxIi3WgBrYS_pV3OQBAxQ3gONoBuQt0FYqmht9x5S7WiFznsr9kSr9cUrUQ_uchLmrpaaenxFptF9O34-1Oyl2TThVlzMZ3pEVJ7uoZ0L4G3ojC3UEFhCCazDOHjlOOrDSo/s400/tabs_farbstandard.png" width="400" /></a></div>
<h4>
Einzelne Tabs per CSS ansprechen</h4>
Man kann die einzelnen Tabs und ihre verschiedenen Zustände wie folgt per CSS ansprechen (Beispiel mit <b>8 Tabs</b> in der PageList1):<br />
<br />
Ungehovert und unausgewählt:<br />
<ol>
<li>#PageList1 li:first-child a</li>
<li>#PageList1 li:first-child + li a</li>
<li>#PageList1 li:first-child + li + li a</li>
<li>#PageList1 li:first-child + li + li + li a</li>
<li>#PageList1 li:first-child + li + li + li + li a</li>
<li>#PageList1 li:first-child + li + li + li + li + li a</li>
<li>#PageList1 li:first-child + li + li + li + li + li + li a</li>
<li>#PageList1 li:last-child a</li>
</ol>
Gehovert oder ausgewählt:<br />
<ol>
<li>#PageList1 li:first-child a:hover,<br />
#PageList1 li:first-child.selected a</li>
<li>#PageList1 li:first-child + li a:hover,<br />
#PageList1 li:first-child + li.selected a</li>
<li>#PageList1 li:first-child + li + li a:hover,<br />
#PageList1 li:first-child + li + li.selected a</li>
<li>#PageList1 li:first-child + li + li + li a:hover,<br />
#PageList1 li:first-child + li + li + li.selected a</li>
<li>#PageList1 li:first-child + li + li + li + li a:hover,<br />
#PageList1 li:first-child + li + li + li + li.selected a</li>
<li>#PageList1 li:first-child + li + li + li + li + li a:hover,<br />
#PageList1 li:first-child + li + li + li + li + li.selected a</li>
<li>#PageList1 li:first-child + li + li + li + li + li + li a:hover,<br />
#PageList1 li:first-child + li + li + li + li + li + li.selected a</li>
<li>#PageList1 li:last-child a:hover,<br />
#PageList1 li:last-child.selected a</li>
</ol>
<br />
<h4>
Färbe-Beispiele mit Bild und Code:</h4>
<h5>
Mit gefärbter Zeile (ul)</h5>
Hinter dem letzten Tab sieht man ein Stück der gefärbten Zeile. Im ersten Bild ist der letzte Tab ausgewählt, im zweiten Bild nicht. Dort hat er deshalb die gleiche Farbe wie die Zeile. Dadurch wirkt es, als hätte der Tab nach rechts mehr Innenabstand.
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhxulvEEYa78TzMLgRC7quh7_UkW-ny7_KJyOqbRV8niU6JFFZtpPISNL-iHRmS_RNgej1HiN5IoH9qcefXhoe0838-jORvP0cr1_KdannclllxCnYc8eNTfZcTse9s_oLhZkaAPhnYeL/s1600/tabs_vielfarbig_mit-zeilenfarbe_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="41" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhxulvEEYa78TzMLgRC7quh7_UkW-ny7_KJyOqbRV8niU6JFFZtpPISNL-iHRmS_RNgej1HiN5IoH9qcefXhoe0838-jORvP0cr1_KdannclllxCnYc8eNTfZcTse9s_oLhZkaAPhnYeL/s400/tabs_vielfarbig_mit-zeilenfarbe_2.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTcFwBwnbMIopyABAxkkBEpKPAfScVf40QJg7pDyx_lHVz1Ryqynv2Y0ECxRM09lfA3gWeQw4bkQIojX76EInpggRem_c6FnqtgNb5_YPoenHzICtbwW9sT3Dg5XlYPFD35Sf9h5yiKB4i/s1600/tabs_vielfarbig_mit-zeilenfarbe_2b.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="38" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTcFwBwnbMIopyABAxkkBEpKPAfScVf40QJg7pDyx_lHVz1Ryqynv2Y0ECxRM09lfA3gWeQw4bkQIojX76EInpggRem_c6FnqtgNb5_YPoenHzICtbwW9sT3Dg5XlYPFD35Sf9h5yiKB4i/s400/tabs_vielfarbig_mit-zeilenfarbe_2b.png" width="400" /></a></div>
<b>Tab-Text:</b><br />
Einträge unter Vorlage > Anpassen > Erweitert > <br />
<b>Schriftfarbe:</b> #ffff00, <b>Ausgewählte Farbe:</b> #ffff00<br />
<br />
Einträge unter Vorlage > Anpassen > Erweitert > <b>Tab-Hintergrund:</b><br />
<b>Hintergrundfarbe:</b> #002079, <b>Ausgewählte Farbe:</b> #005cb8<br />
<br />
Einträge unter Vorlage > Anpassen > Erweitert > <b>CSS hinzufügen:</b><br />
<div class="code">
<code>
/* PageList1 <br />
- - - - - - - */<br />
/* Erster Link, unausgewählt und ungehovert */<br />
#PageList1 li:first-child a { <br />
color:#fff;<br />
}<br />
/* Erster Link, ausgewählt oder gehovert */<br />
#PageList1 li:first-child a:hover, <br />
#PageList1 li:first-child.selected a { <br />
color:#fff;<br />
}<br />
/* Sechster und siebter Link, unausgewählt und ungehovert */<br />
#PageList1 li:first-child + li + li + li + li + li a, <br />
#PageList1 li:first-child + li + li + li + li + li + li a { <br />
background-color:#415270;<br />
color:#fff;<br />
}<br />
/* Sechster und siebter Link, ausgewählt oder gehovert */<br />
#PageList1 li:first-child + li + li + li + li + li a:hover, <br />
#PageList1 li:first-child + li + li + li + li + li.selected a, <br />
#PageList1 li:first-child + li + li + li + li + li + li a:hover, <br />
#PageList1 li:first-child + li + li + li + li + li + li.selected a { <br />
background-color:#5F80A3;<br />
color:#fff;<br />
}<br />
/* Letzter Link, unausgewählt und ungehovert */<br />
#PageList1 li:last-child a { <br />
color:#ccc;<br />
}<br />
/* Letzter Link, ausgewählt oder gehovert */<br />
#PageList1 li:last-child a:hover, <br />
#PageList1 li:last-child.selected a { <br />
color:#ccc;<br />
}
</code>
</div>
<br />
<h5>
Mit transparenter Zeile (ul)</h5>
Hier ist keine zusätzliche Zeilenfarbe vorhanden und der letzte Tab wirkt deshalb nicht als hätte er rechts mehr Innenabstand. Ohne die Zeilenfarbe wirkt jedoch der Außenabstand nach rechts größer.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBY7haxEe9Bz9ghbcV4yaPdm_5X2dxQxrYtUC96wHMUg_kqLxvZJ8AWyYA6Jk58pnSuNEdS53C2cIgDK6NsEyk8EbFewuDDXKHs8B-1BlvAl6v2uEyHJg3-lhs19YhKqjsGOTguhA_OzRY/s1600/tabs_vielfarbig_ohne-zeilenfarbe_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBY7haxEe9Bz9ghbcV4yaPdm_5X2dxQxrYtUC96wHMUg_kqLxvZJ8AWyYA6Jk58pnSuNEdS53C2cIgDK6NsEyk8EbFewuDDXKHs8B-1BlvAl6v2uEyHJg3-lhs19YhKqjsGOTguhA_OzRY/s400/tabs_vielfarbig_ohne-zeilenfarbe_2.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwie8jGPZalQ2nPRVhACldqJfUEn5wySfc7J3bJNgm8_ReqAQZoIvx5Mi4weBI_P_dEINPHz-94HUor-nDze7CqlnK-RMLLryluJTNzx_ncCSXWnQQQyLfynVCKucyfzFPja7_pomBsYge/s1600/tabs_vielfarbig_ohne-zeilenfarbe_2b.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwie8jGPZalQ2nPRVhACldqJfUEn5wySfc7J3bJNgm8_ReqAQZoIvx5Mi4weBI_P_dEINPHz-94HUor-nDze7CqlnK-RMLLryluJTNzx_ncCSXWnQQQyLfynVCKucyfzFPja7_pomBsYge/s400/tabs_vielfarbig_ohne-zeilenfarbe_2b.png" width="400" /></a></div>
Einträge unter Vorlage > Anpassen > Erweitert > <b>Tab-Text:</b><br />
<b>Schriftfarbe:</b> #ffff00, <b>Ausgewählte Farbe:</b> #ffff00<br />
<br />
Einträge unter Vorlage > Anpassen > Erweitert > <b>Tab-Hintergrund:</b><br />
<b>Hintergrundfarbe:</b> transparent, <b>Ausgewählte Farbe:</b> #005cb8<br />
<br />
Einträge unter Vorlage > Anpassen > Erweitert > <b>CSS hinzufügen:</b><br />
<div class="code">
<code>
/* PageList1 <br />
- - - - - - - */<br />
/* Wenn Zeilenhintergrund transparent ist <br />
- - - Tabs allgemein, unausgewählt und ungehovert */<br />
#PageList1 li a { <br />
background-color:#002079;<br />
}<br />
/* Wenn Zeilenhintergrund transparent ist <br />
- - - Tabs allgemein, ausgewählt oder gehovert */<br />
#PageList1 li a:hover,<br />
#PageList1 li.selected a { <br />
background-color:#005cb8;<br />
}<br />
/* Erster Link, unausgewählt und ungehovert */<br />
#PageList1 li:first-child a { <br />
color:#fff;<br />
}<br />
/* Erster Link, ausgewählt oder gehovert */<br />
#PageList1 li:first-child a:hover, <br />
#PageList1 li:first-child.selected a { <br />
color:#fff;<br />
}<br />
/* Sechster und siebter Link, unausgewählt und ungehovert */<br />
#PageList1 li:first-child + li + li + li + li + li a, <br />
#PageList1 li:first-child + li + li + li + li + li + li a { <br />
background-color:#415270;<br />
color:#fff;<br />
}<br />
/* Sechster und siebter Link, ausgewählt oder gehovert */<br />
#PageList1 li:first-child + li + li + li + li + li a:hover, <br />
#PageList1 li:first-child + li + li + li + li + li.selected a, <br />
#PageList1 li:first-child + li + li + li + li + li + li a:hover, <br />
#PageList1 li:first-child + li + li + li + li + li + li.selected a { <br />
background-color:#5F80A3;<br />
color:#fff;<br />
}<br />
/* Letzter Link, unausgewählt und ungehovert */<br />
#PageList1 li:last-child a { <br />
color:#ccc;<br />
}<br />
/* Letzter Link, ausgewählt oder gehovert */<br />
#PageList1 li:last-child a:hover, <br />
#PageList1 li:last-child.selected a { <br />
color:#ccc;<br />
}
</code>
</div>
<br />
<h4>
Link dazu</h4>
<div class="links">
<ul>
<li><a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Nachbarselektor" target="_blank">Nachbarselektor</a> (wiki.selfhtml.org)<br />
= Erläuterung zu dem " + li"</li>
</ul>
</div>
<br />
<br />
<address>
Ute Ziemes, sg.utez.de, <time>2016-02-24</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-87806976835292545152016-02-14T19:48:00.000+01:002016-02-14T19:48:34.955+01:00Unterschiedliche Tabs der Seitenliste in Webversion und Mobilversion anzeigen<script type="text/javascript">
$(document).ready(function() {
$('#post-body-8780697683529254515').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyqcVsFryw6IPOPAR9P_9gTyy82fVaJ2q6zXIp1vh0MSrtmsc97VLFRnEpBSsyHNm11woG37IlCHEtIcKJMGQ5Lz7CsBaC447opah2eTq8a51ZLLHgV2dgDPqBt9vuamfS4q8hgg5HWrZz/s1600/dynamische-ansichten_transparent.png") no-repeat scroll top right'})
});
</script>
Man kann in den Dynamischen Ansichten zwar keine unterschiedlichen Seitenliste-Gadgets anzeigen lassen, aber man kann per CSS in der Webversion und in der Mobilversion des Blogs unterschiedliche Tabs der Seitenliste ausblenden und so jeweils andere Tabs anzeigen lassen, <b>zumindest sofern man die Mobilvorlage auf Benutzerdefiniert eingestellt hat und die Ansicht Classic nur für die Mobilversion nutzt.</b>
<br />
<a name='more'></a><hr />
<h4>
Beispiel:</h4>
<br />
Die Tabs der folgenden Liste will ich passend auf die Webversion und die Mobilversion aufteilen<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdR0HK-Gc7bZzv0PfXnqDJqNXKGsQYXa_OmPDCDREeYWackkiWW-BWpWX9iQy3BH1ejCOP4-t7g0t5sKrO-VMyJm8N5BdDY-NnOn27fc1JA8gRLALWdqBWr9Hrqe8YgieApoMfZ2rsrTPm/s1600/pagelist1_low.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdR0HK-Gc7bZzv0PfXnqDJqNXKGsQYXa_OmPDCDREeYWackkiWW-BWpWX9iQy3BH1ejCOP4-t7g0t5sKrO-VMyJm8N5BdDY-NnOn27fc1JA8gRLALWdqBWr9Hrqe8YgieApoMfZ2rsrTPm/s320/pagelist1_low.jpg" width="232" /></a></div>
<br />
Als Standard würden in beiden Blogversionen alle Tabs angezeigt. Ich muss also die Tabs, die ich nur in der Webversion anzeigen lassen will, in der Mobilversion ausblenden und die Tabs, die nur in der Mobilversion angezeigt werden sollen, in der Webversion ausblenden<br />
<h5>
In der Mobilversion will ich ausblenden:</h5>
<ul>
<li>4. Tab (Zeit-Archiv web)</li>
<li>5. Tab (Labels-Archiv web)</li>
<li>8. Tab (&rArr; Mobilversion)</li>
</ul>
<h6>
Die Kommandos dazu sind die folgenden:</h6>
<div class="code">
<code>
/* TAB-AUSBLENDUNGEN mobil <br />
- - - - - - - - - - - - - - - - - - - - - - - - - - - */<br />
.classic #pages ul li:first-child + li + li + li,<br />
.classic #pages ul li:first-child + li + li + li + li,<br />
.classic #pages ul li:first-child + li + li + li + li + li + li + li { <br />
display:none; <br />
}
</code>
</div>
<h5>
In der Webversion will ich ausblenden:</h5>
<ul>
<li>2. Tab (Zeit-Archiv mobil)</li>
<li>3. Tab (Labels-Archiv mobil)</li>
<li>9. Tab (&rArr; Webversion)</li>
</ul>
<h6>
Die Kommandos dazu sind die folgenden:</h6>
<div class="code">
<code>
/* TAB-AUSBLENDUNGEN web <br />
- - - - - - - - - - - - - - - - - - - - - - - - - - - */<br />
.flipcard #pages ul li:first-child + li, <br />
.flipcard #pages ul li:first-child + li + li, <br />
.flipcard #pages ul li:last-child { <br />
display:none; <br />
}
<br />
.magazine #pages ul li:first-child + li, <br />
.magazine #pages ul li:first-child + li + li, <br />
.magazine #pages ul li:last-child { <br />
display:none; <br />
}<br />
.mosaic #pages ul li:first-child + li, <br />
.mosaic #pages ul li:first-child + li + li, <br />
.mosaic #pages ul li:last-child { <br />
display:none; <br />
}<br />
.sidebar #pages ul li:first-child + li, <br />
.sidebar #pages ul li:first-child + li + li, <br />
.sidebar #pages ul li:last-child { <br />
display:none; <br />
}<br />
.snapshot #pages ul li:first-child + li, <br />
.snapshot #pages ul li:first-child + li + li, <br />
.snapshot #pages ul li:last-child { <br />
display:none; <br />
}<br />
.timeslide #pages ul li:first-child + li, <br />
.timeslide #pages ul li:first-child + li + li, <br />
.timeslide #pages ul li:last-child { <br />
display:none; <br />
}
</code>
</div>
<h5>
Erläuterung:</h5>
<ul>
<li><b>.classic</b><br />
spricht ausschließlich die Ansicht Classic und somit die Mobilversion an</li>
<li><b>.flipcard</b><br />
spricht ausschließlich die Ansicht Flipcard und somit die Webversion an</li>
<li><b>.magazine</b><br />
spricht ausschließlich die Ansicht Magazine und somit die Webversion an</li>
<li><b>.mosaic</b><br />
spricht ausschließlich die Ansicht Mosaic und somit die Webversion an</li>
<li><b>.sidebar</b><br />
spricht ausschließlich die Ansicht Sidebar und somit die Webversion an</li>
<li><b>.snapshot</b><br />
spricht ausschließlich die Ansicht Snapshot und somit die Webversion an</li>
<li><b>.timeslide</b><br />
spricht ausschließlich die Ansicht Timeslide und somit die Webversion an</li>
<li><b>#pages</b><br />
spricht speziell den Bereich für die Seitenliste an</li>
<li><b>ul</b><br />
spricht die Liste in dem Bereich an</li>
<li><b>li</b><br />
spricht einen Listenpunkt der Liste an</li>
<li><b>li:first-child</b><br />
spricht den ersten Listenpunkt der Liste an</li>
<li><b> + li</b><br />
spricht den jeweils nächten Listenpunkt an (Leerzeichen, Pluszeichen, Leerzeichen, li)</li>
<li><b>li:last-child</b><br />
spricht den letzten Listenpunkt der Liste an</li>
<li><b>display:none;</b><br />
ist das Kommando zum Ausblenden</li>
<li><b>{ }</b><br />
Die Klammern umschließen den Teil des Kommandos, der sagt, was mit den zuvor angegebenen Stellen zu tun ist.</li>
</ul>
<h5>
Eintrag der Kommandos</h5>
Die Kommandos unter <b>Vorlage >Anpassen > Erweitert > CSS hinzufügen</b> eintragen. Anschließend auf "<b>Auf Blog anwenden</b>" klicken und warten bis das erledigt ist, bevor man auf "<b>Blog anzeigen</b>" klickt, um das Ergebnis sehen zu können.<br />
<h5>
Ergebnis in der Mobilversion:</h5>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEi8zY_XNNk8IGf4Vk3atnhP9gVO5wVQMUfrTlzw4yi0EgxtgmPlFpWqL7dL8q_JluZBU-S9y5QgpdIRqEfwkgg2IfQC2wwEcQi87LFFTUIgfHqEkIkYBwZTfKKfbs_XLAxPMd1huKpbGD/s1600/tabs_mobil_vertikal_low.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEi8zY_XNNk8IGf4Vk3atnhP9gVO5wVQMUfrTlzw4yi0EgxtgmPlFpWqL7dL8q_JluZBU-S9y5QgpdIRqEfwkgg2IfQC2wwEcQi87LFFTUIgfHqEkIkYBwZTfKKfbs_XLAxPMd1huKpbGD/s1600/tabs_mobil_vertikal_low.jpg" /></a></div>
<br />
<h5>
Ergebnis in der Webversion:</h5>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5o_U8BDcIgR2VOHVgTeBCuFowmq67W0T6mxgJpnH4tNKzmmPLa1NGpVY4x95zRsmzxZ4yFTfjfXfiC53nKFI4IBD-VKB_vT6T8USgoqhuRTKJjYnzye2aGeQz7MXnTgs_cYZg-oMTu38/s1600/tabs_web_low.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="15" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5o_U8BDcIgR2VOHVgTeBCuFowmq67W0T6mxgJpnH4tNKzmmPLa1NGpVY4x95zRsmzxZ4yFTfjfXfiC53nKFI4IBD-VKB_vT6T8USgoqhuRTKJjYnzye2aGeQz7MXnTgs_cYZg-oMTu38/s320/tabs_web_low.jpg" width="320" /></a></div>
<br />
<br />
<address>
Ute Ziemes, sg.utez.de, <time>2016-02-14</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-49871779609412467372016-02-14T05:20:00.000+01:002016-02-14T19:53:20.683+01:00Valentinstag-Zwangsdeko abschalten<script type="text/javascript">
$(document).ready(function() {
$('#post-body-4987177960941246737').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyqcVsFryw6IPOPAR9P_9gTyy82fVaJ2q6zXIp1vh0MSrtmsc97VLFRnEpBSsyHNm11woG37IlCHEtIcKJMGQ5Lz7CsBaC447opah2eTq8a51ZLLHgV2dgDPqBt9vuamfS4q8hgg5HWrZz/s1600/dynamische-ansichten_transparent.png") no-repeat scroll top right'})
});
</script>
Auf den Dynamischen Ansichten hat Blogger um Null Uhr des 14.02.2016 ein Script aktiviert, das nach einer Minute geladen ist und verursacht, dass bei jedem Klick Herzchen erscheinen. Es handelt sich um Kalenderdeko zum Valentinstag.<br />
<a name='more'></a><hr />
Das ist so dermaßen <b>übergriffig</b>. Ich bin entsetzt.<br />
<br />
<blockquote class="tr_bq">
<div class="hervorhebung">
<b>
Blogger,<br />
bitte lass mich mein Blog selbst dekorieren.<br />
Mich beschäftigen andere Dinge als dich und ich habe auch einen völlig anderen Geschmack als du.
</b>
</div>
</blockquote>
<h4>
So kann man das Einblenden der fliegenden Herzchen verhindern:</h4>
<br />
Unter <b>Vorlage > Anpassen > Erweitert > CSS hinzufügen</b> das Folgende eintragen:
<br />
<br />
<div class="code">
<code>
/*Valenstinstag-Zwangsdeko ausblenden*/<br />
.like-image { <br />
display:none; <br />
}
</code>
</div>
<br />
Anschließend auf "<b>Auf Blog anwenden</b>" klicken und warten bis das erledigt ist.<br />
<br />
<b>Blog danach neu laden.</b><br />
<br />
<br />
<address>
Ute Ziemes, sg.utez.de, <time>2016-02-14</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-46790547161404622532016-02-13T13:33:00.000+01:002016-02-13T13:33:50.799+01:00Unterschiedliche Seitenlisten für Webversion und Mobilversion<script type="text/javascript">
$(document).ready(function() {
$('#post-body-4679054716140462253').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65BNDIOCvweOSdVHxAJ4o3JjBHr7cwrCIdb45pTvIDnZl3gS28XNTtnil-q6MUUIbnwkWeiTK57CqhrwC9iwPxvNoED8QWiey1A5EaCb4IsolDv30AhLdpPhyGI9IPIxDtTb3Gxc1m0lc/s1600/layout-vorlagen_transparent.png") no-repeat scroll top right'})
});
</script>
Außer einem einzelnen Link, der einem ausdrücklich ermöglicht die Blogversion zu wechseln, kann man in der jeweiligen Navigation keine Links gebrauchen, die einen aus der Version rausführen, in der man gerade ist. Die Linkadressen, die zu Seiten führen, die man unter "<b>Seiten</b>" erstellt und im Seitenliste-Gadget zur Anzeige im Gadget freigegeben hat, werden automatisch auf die Version umgestellt, in der man gerade ist. Diejenigen Links zu bloginternen Zielen jedoch, die man im Seitenliste-Gadget mit "<b>Externen Link hinzufügen</b>" erstellt hat, werden nicht an die Version angepasst, in der man sich gerade befindet.<br />
<br />
Schon deshalb ist es besser, wenn man in den beiden Blogversionen unterschiedliche Seitenlisten verwendet und so per "Externen Link hinzufügen" <b>jeweils andere Linkadressen eintragen</b> kann. Man kann dann auch <b>unterschiedliche Seiten zur Anzeige freigeben</b>, wenn man dort zum Beispiel Linklisten zu internen Zielen anbietet.<br />
<a name='more'></a><hr />
<b>In den Dynamischen Ansichten ist es nicht möglich</b>, in den beiden Blogversionen unterschiedliche Seitenliste-Gadgets zu verwenden. Da kann man zwar ein zweites Seitenliste-Gadget hinzufügen, aber dessen Inhalte werden innerhalb der selben Liste angezeigt, wie die des ersten Seitenliste-Gadgets. <b>In den Layout-Vorlagen kann man das Vorhaben jedoch realisieren</b>; denn da werden zwei verschiedene Listen angezeigt und für diese können auch einzeln per "<b>CSS hinzufügen</b>" und per Einträgen unter "<b>HTML bearbeiten</b>" Kommandos gegeben werden.<br />
<br />
<div class="hervorhebung">
Hinzugefügte Seitenliste-Gadgets werden automatisch sowohl in der Webversion als auch in der Mobilversion des Blogs angezeigt. Hat man zwei hinzugefügt und will man in jeder Blogversion nur jeweils eins davon nutzen, muss man also Kommandos zum Einblenden des einen und zum Ausblenden des anderen Gadgets für jede Version eintragen.
</div>
<br />
Damit das möglich ist, muss man die Mobilvorlage unter <b>Vorlage > Mobilvorlage</b> erfolgreich auf "<b>Benutzerdefiniert</b>" eingestellt haben; denn sonst können Kommandos speziell für die Mobilversion nicht wirken.<br />
<br />
<h4>
Das sind die Kommandos zum Ein- bzw. Ausblenden der Seitenliste-Gadgets, die man eintragen muss:</h4>
<br />
<h5>
Für das erste Seitenliste-Gadget (PageList1),</h5>
das nur in der Webversion angezeigt werden soll, eintragen unter <b>Vorlage > HTML bearbeiten > Weiter zum Widget > PageList1<br />
<br />
vor title:</b><br />
<br />
<code>mobile='no'</code> <br />
<br />
Mit Leerzeichen dahinter!<br />
<br />
Siehe folgendes Bild:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhznTUPdUTbtBJMvbqj2YEkD3YqO2UCydtP11xpqIiVhXUdipqvtj8D-j6Oama3-1i9z6cRjt26w_rih8nM2oxs-3h2S_eNMV2eiPCDnA8bLLxnKYOYU7PaxbjD3LBrDDwOoO_0vln7TZZe/s1600/lagelist2_mobile-no_low.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="41" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhznTUPdUTbtBJMvbqj2YEkD3YqO2UCydtP11xpqIiVhXUdipqvtj8D-j6Oama3-1i9z6cRjt26w_rih8nM2oxs-3h2S_eNMV2eiPCDnA8bLLxnKYOYU7PaxbjD3LBrDDwOoO_0vln7TZZe/s400/lagelist2_mobile-no_low.jpg" width="400" /></a></div>
<br />
<br />
Anschließend auf "<b>Vorlage speichern</b>" klicken und warten bis das erledigt ist, bevor man auf "<b>Zurück</b>" klickt.<br />
<br />
<h5>
Für das zweite Seitenliste-Gadget (PageList2)</h5>
das nur in der Mobilversion angezeigt werden soll, eintragen unter <b>Vorlage > Anpassen > Erweitert > CSS hinzufügen:</b><br />
<br />
<div class="code">
<code>
/* Zweites Seitenliste-Gadget in der Webversion ausblenden und seine vertikalen Außenabstände dort entfernen. In der Mobilversion das Gadget aber anzeigen lassen. */<br />
#PageList2 { <br />
display:none;<br />
}<br />
#PageList2 + .widget { <br />
margin-top:0;<br />
margin-bottom:0;<br />
}<br />
.mobile #PageList2 { <br />
display:block;<br />
}
</code>
</div>
<br />
Anschließend auf "<b>Auf Blog anwenden</b>" klicken und warten bis das erledigt ist, bevor man auf "<b>Zurück zu Blogger</b>" klickt.<br />
<br />
<br />
<b>Diese CSS-Komandos ersetzen übrigens das Kommando mobile="only" für PageList2</b>, mit dem man theoretisch unter "HTML bearbeiten" die Aufgabe eleganter lösen könnte, wenn es tatsächlich so elegant funktionieren würde, wie es sollte, was es aber nicht tut. Das Kommando verursacht leider nicht nur, was es soll, sondern zusätzlich zwei Fehler, nämlich, dass dieses Gadget dann auch nicht mehr unter "<b>Layout</b>" angezeigt wird und dass man außerdem unter "<b>Layout</b>" keine Gadgets mehr verschieben kann.<br />
<br />
<address>
Ute Ziemes, sg.utez.de, <time>2016-02-13</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-91159343426913399862016-02-11T22:05:00.001+01:002016-02-12T00:12:31.682+01:00Classic als mobile Klasse nutzen<script type="text/javascript">
$(document).ready(function() {
$('#post-body-9115934342691339986').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyqcVsFryw6IPOPAR9P_9gTyy82fVaJ2q6zXIp1vh0MSrtmsc97VLFRnEpBSsyHNm11woG37IlCHEtIcKJMGQ5Lz7CsBaC447opah2eTq8a51ZLLHgV2dgDPqBt9vuamfS4q8hgg5HWrZz/s1600/dynamische-ansichten_transparent.png") no-repeat scroll top right'})
});
</script>
In den Layout-Vorlagen gibt es die Klasse "mobile", mit Hilfe derer man das Design und Layout der Mobilversion des Blogs unabhängig von dem Design und Layout der Webversion per CSS ansprechen kann. In den Dynamischen Ansichten gibt es keine solche Klasse. Es wird unter der mobilen Adresse aber nur die mobile Version der Ansicht "Classic" angezeigt und zu ihr gibt es die Klasse "classic".
<a name='more'></a><hr />
Wenn man nun Classic weder als Startansicht in der Webversion nutzt, noch Classic im Ansichten-Menü zur Verfügung stellt, kann man die Klasse "classic" als mobile Klasse nutzen. So ist es auch in den Dynamischen Ansichten möglich, in der Mobilversion Inhalte von Posts oder Seiten anders anzeigen zu lassen als in der Webversion.<br />
<br />
Für <b>Layout-Vorlagen</b> ist das dort beschrieben:<br />
<b>Inhalte in der Mobilversion anders anzeigen lassen <a href="http://sg.utez.de/2016/02/inhalte-in-der-mobilversion-anders-anzeigen-lassen.html" target="_blank">Web</a> | <a href="http://sg.utez.de/2016/02/inhalte-in-der-mobilversion-anders-anzeigen-lassen.html?m=1" target="_blank">Mobil</a></b> <br />
<br />
In den <b>Dynamischen Ansichten</b> - mit den oben beschriebenen Voraussetzungen - müssten die CSS-Kommandos zum Ein- und Ausblenden so aussehen:<br />
<br />
<div class="code">
<code>
/* Abschnitte in Posts und auf Seiten ein- oder ausblenden je nachdem, ob eine der Webversionen oder die Mobilversion angezeigt wird */<br />
.flipcard .mobilinhalt, <br />
.magazine .mobilinhalt, <br />
.mosaic.mobilinhalt, <br />
.sidebar .mobilinhalt, <br />
.snapshot .mobilinhalt, <br />
.timeslide .mobilinhalt, <br />
.classic .webinhalt { <br />
display:none; <br />
} <br />
.flipcard .webinhalt, <br />
.magazine .webinhalt, <br />
.mosaic .webinhalt, <br />
.sidebar .webinhalt, <br />
.snapshot .webinhalt, <br />
.timeslide .webinhalt, <br />
.classic .mobilinhalt { <br />
display:block; <br />
}
</code>
</div>
<br />
Falls man als Webversion nur eine Ansicht anbietet und das Ansichtenmenü ausgeblendet hat, muss man selbstverständlich für die ungenutzten Ansichten keine Kommandos in das CSS schreiben.<br />
<br />
Damit man die CSS-Kommandos nur einmal geben muss und von <b>Vorlage > Anpassen > Erweitert > CSS hinzufügen</b> aus wirken lassen kann und sie nicht zwischen Style-Tags in jeden betroffenen Post oder jede betroffene Seite setzen muss, muss man die Mobilvorlage unter <b>Vorlage > Mobilvorlage</b> auch bei Nutzung der Dynamischen Ansichten erfolgreich auf "<b>Benutzerdefiniert</b>" gestellt haben.<br />
<br />
<h4>
Weiterführende Links</h4>
<div class="links">
<ul>
<li>Ansichten-Menü komplett ausblenden <a href="http://sg.utez.de/2013/04/dynamische-ansichten-ansichten-menue-komplett-ausblenden.html">Web</a> | <a href="http://sg.utez.de/2013/04/dynamische-ansichten-ansichten-menue-komplett-ausblenden.html?m=1">Mobil</a></li>
<li>Ansichten-Auswahl reduzieren <a href="http://sg.utez.de/2013/03/dynamische-ansichten-ansichten-auswahl-reduzieren.html">Web</a> | <a href="http://sg.utez.de/2013/03/dynamische-ansichten-ansichten-auswahl-reduzieren.html?m=1">Mobil</a>
</li>
</ul>
</div>
<br />
<address>
Ute Ziemes, sg.utez.de, <time>2016-02-11</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-25356588698202323262016-02-11T13:40:00.000+01:002016-02-11T14:10:29.480+01:00Inhalte in der Mobilversion anders anzeigen lassen<script type="text/javascript">
$(document).ready(function() {
$('#post-body-2535658869820232326').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65BNDIOCvweOSdVHxAJ4o3JjBHr7cwrCIdb45pTvIDnZl3gS28XNTtnil-q6MUUIbnwkWeiTK57CqhrwC9iwPxvNoED8QWiey1A5EaCb4IsolDv30AhLdpPhyGI9IPIxDtTb3Gxc1m0lc/s1600/layout-vorlagen_transparent.png") no-repeat scroll top right'})
});
</script>
In der Webversion des Blogs ist es schade, wenn man die Breite des Blogs nicht ausnutzt, um Inhalte in Posts oder auf Seiten nebeneinander anzuzeigen, die nebeneinander stehend übersichtlicher sind. Auch Hover-Effekte können hier die Nutzbarkeit verbessern.<br />
<br />
Auf Smartphones sind derlei Darstellungsformen jedoch ungeeignet.<br />
<a name='more'></a><hr />
Bilder mit individueller Größenangabe, die nicht automatisch in der Mobilversion verkleinert werden oder breite Tabellen können nicht sinnvoll auf Smartphones angezeigt werden. Hovereffekte machen dort gar keinen Sinn, sondern können - zufällig ausgelöst - unter Umständen sogar die weitere Nutzung der Seite verhindern. (Wenn z.B. ein Abschnitt per Hover auf eine höhere Ebene gelegt wird und man nicht mehr an die Ebene daunter kommt, um wischen zu können.)<br />
<br />
<div class="hervorhebung">
Stellt man derart problematische Inhalte in zwei verschiedenen Versionen in den Post oder auf die Seite und umrahmt sie jeweils mit einem Div-Container, den man mit einer speziellen Klasse ausgezeichnet hat, dann kann man, wenn die <b>Mobilvorlage</b> des Blogs erfolgreich auf "<b>Benutzerdefiniert</b>" gestellt ist, <b>in der Webversion nur den Div-Container mit der Klasse für die Webversion anzeigen lassen</b> und <b>in der Mobilversion des Blogs nur den Div-Container mit der Klasse für die Mobilversion anzeigen lassen</b>. So kann man beispielsweise in der Webversion Daten nebeneinander in einer Tabelle präsentieren, die Daten in der Mobilversion aber untereinander stehend anzeigen lassen.</div>
<br />
Als CSS-Kommandos benötigt man dafür nur Kommandos zum Aus- bzw. Einblenden.<br />
<br />
<h4>
Beispiel:</h4>
Folgend sieht man in der Webversion dieses Posts das Wort "Webinhalt" und in der Mobilversion sieht man statt dessen das Wort "Mobilinhalt".<br />
<br />
<div class="webinhalt">
Webinhalt
</div>
<div class="mobilinhalt">
Mobilinhalt
</div>
<br />
Zur Kontrolle kann man hier zwischen den Versionen wechseln:<br />
<ul>
<li><a href="http://sg.utez.de/2016/02/inhalte-in-der-mobilversion-anders-anzeigen-lassen.html">http://sg.utez.de/2016/02/inhalte-in-der-mobilversion-anders-anzeigen-lassen.html</a></li>
<li><a href="http://sg.utez.de/2016/02/inhalte-in-der-mobilversion-anders-anzeigen-lassen.html?m=1">http://sg.utez.de/2016/02/inhalte-in-der-mobilversion-anders-anzeigen-lassen.html?m=1</a> </li>
</ul>
<br />
<h4>
Mit folgenden Einträgen ist das realisiert worden:</h4>
In den Post im <b>HTML-Modus des Blogger-Editors</b> eingetragen:<br />
<br />
<div class="code">
<code>
<div class="webinhalt"><br />Webinhalt<br /></div><br /><br /><div class="mobilinhalt"><br />Mobilinhalt<br /></div>
</code>
</div>
<br />
<br />
Unter <b>Vorlage > Anpassen > Erweitert > CSS hinzufügen</b> eingetragen:<br />
<br />
<div class="code">
<code>
/* Abschnitte für Webinhalte oder Mobilinhalte je nach Blogversion ein- oder ausblenden */<br />
.mobilinhalt, <br />
.mobile .webinhalt { <br />
display:none;<br />
}<br />
.webinhalt, <br />
.mobile .mobilinhalt { <br />
display:block;<br />
}
</code>
</div>
<br />
<br />
Wann immer ich nun einen Abschnitt mit der Klasse "webinhalt" oder "mobilinhalt" auszeichne, werden diese CSS-Kommandos für den jeweiligen Container wirksam.<br />
<br />
<b>Alternativ kann man die CSS-Kommandos zwischen Style-Klammern im HTML-Modus des Blogger-Editors unter den sonstigen Inhalten eintragen</b>, nämlich so:<br />
<br />
<div class="code">
<code>
<style type="text/css"><br />
/* Div-Container für Webinhalte oder Mobilinhalte je nach Blogversion ein- oder ausgeblendet */<br />
.mobilinhalt, <br />
.mobile .webinhalt { <br />
display:none;<br />
}<br />
.webinhalt, <br />
.mobile .mobilinhalt { <br />
display:block;<br />
}<br />
</style>
</code>
</div>
<br />
<br />
In dem Fall gelten die Kommandos jedoch nur speziell für diesen Post bzw. diese "Seite", bzw. für die Abschnitte, die mit den entsprechenden Klassen ausgezeichnet sind und im HTML aller Elemente stehen, die gerade geöffnet sind.<br />
<br />
Ob man nur ein Wort in die Container setzt oder ein Bild oder eine Tabelle oder eine halbe Seite mit allerhand verschiedenen Inhaltsarten, ist egal; denn ausgeblendet oder eingeblendet wird der jeweilige Container mit all seinen beliebigen Inhalten, also alles vom Beginn des öffnenden Div-Tags bis zum Ende des schließenden Div-Tags.
<br />
<br />
<br />
<address>
Ute Ziemes, sg.utez.de, <time>2016-02-11</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-34147796085872490792016-02-10T02:01:00.000+01:002016-02-10T02:45:55.220+01:00Bilderverwaltung vom Blog aus über sein Googlekonto erreichen<script type="text/javascript">
$(document).ready(function() {
$('#post-body-3414779608587249079').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNiUIggU6ely4TCaBah8R_SgOtVJ0_mT0zw3yDXReXa5W0B49Llwvx_zdpzTmMyjM7ApWEYrxDFsmBVjDHqsiLtwR2ofLV1H-73UYbZW5HaeP40NM29ZTVGvAK0t2YfZCPwGaBzFGa59X/s1600/layout-und-dynan_transparent.png") no-repeat scroll top right'})
});
</script>
Hier erfährt man, wie man, von der Blogger-Oberfläche seines Blogs aus, zum Googlekonto-Dashboard kommt und welche Links dort zu Picasa-Webalben und zu Google Fotos führen, den beiden Verwaltungsoberflächen für das Album mit den Bildern darin, die man in sein Blog hochgeladen hat.<br />
<a name='more'></a><hr />
Um zum Googlekonto-Dashboard zu gelangen, klickt man in der Blogger-Oberfläche oben rechts auf den Pfeil neben seinem Kontonamen und dann im geöffneten Menü auf "Konto".<br />
<br />
Dort dann unter "Persönliche Daten & Privatsphäre" auf "Kontoübersicht" klicken. Auf dem dann geöffneten Googlekonto-Dashboard heißt die Abteilung mit den Bildern "Google Fotos". Wenn man sie per Klick auf den Pfeil auf der linken Seite aufklappt, hat man da fünf Links: <br />
<ol>
<li><b>Alben</b> - führt zu Google Fotos</li>
<li><b>Fotos</b> - führt zu Google Fotos</li>
<li><b>Instant Upload</b> - führt zu Picasa-Webalben</li>
<li><b>Einstellungen</b> - führt zu den Einstellungen unter Google Fotos</li>
<li><b>Hilfe</b> - führt zur Google-Fotos-Hilfe</li>
</ol>
<br />
Die Links zu Einstellungen und Hilfe der Picasa-Webalben findet man auf Picasa-Webalben über das Zahnrad-Symbol<br />
<br />
<span style="color: #999999;">Bei der Hilfe für Picasa und Picasa-Webalben ist es allerdings zuweilen nicht sofort zweifelsfrei klar, ob ein Hinweis für die Bilderverwaltungsoberfläche Picasa-Webalben gilt oder für das Bildbearbeitungsprogramm Picasa.</span><br />
<h4>
Weiterführender Link</h4>
<div class="links">
<ul>
<li><b>Liste der Posts zum Label "Bilder" <a href="http://sg.utez.de/2012/11/liste-bilder.html">Web</a> | <a href="http://sg.utez.de/2012/11/liste-bilder.html?m=1">Mobil</a></b><br />
<br />
Auf dieser Liste sind die Links stets aktualisiert, z.B. der zu folgendem, zum hiesigen Thema passenden Post:
<ul>
<li>
Speicher für hochgeladene Bilder
</li>
</ul>
</li>
</ul>
</div>
<br />
<br />
<address>
Ute Ziemes, sg.utez.de, <time>2016-02-10</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-39517167558303713202016-02-09T23:30:00.000+01:002016-02-24T23:43:56.560+01:00Speicher für hochgeladene Bilder<script type="text/javascript">
$(document).ready(function() {
$('#post-body-3951716755830371320').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNiUIggU6ely4TCaBah8R_SgOtVJ0_mT0zw3yDXReXa5W0B49Llwvx_zdpzTmMyjM7ApWEYrxDFsmBVjDHqsiLtwR2ofLV1H-73UYbZW5HaeP40NM29ZTVGvAK0t2YfZCPwGaBzFGa59X/s1600/layout-und-dynan_transparent.png") no-repeat scroll top right'})
});
</script>
Bilder, die man im Blog hochlädt (per "Bild einfügen" im Blogger-Editor oder im Gadget namens "Bild" oder im Header-Gadget oder im Design-Manager für den Blog-Hintergrund), landen in einem <b>Album, das von Google automatisch speziell für das Blog angelegt wird und den gleichen Titel hat wie das Blog.</b><br />
<br />
Hier erfährt man, wie man die Verwaltungsoberfläche des Albums erreichen und nutzen kann, wie man Bilder aus dem Album löschen und eine zeitlang wiederherstellen kann, welche Adressen die Bilder im Blog und auf den Verwaltungsoberflächen haben, welches Speicherlimit gilt und wie man Speicherplatz sparen, freimachen oder hinzu bekommen kann.
<a name='more'></a><hr />
<h4>
Verwaltungsoberfläche des Albums erreichen und nutzen</h4>
Es gibt zwar nur ein Album für das Blog, aber zwei verschiedene Verwaltungsoberflächen, über die man das Album und die Bilder darin erreichen und verwalten kann: <br />
<ol>
<li><a href="https://picasaweb.google.com/lh/myphotos" target="_blank">Picasa-Webalben</a><br />
Album öffnen: Ordner mit dem Blogtitel anklicken</li>
<br />
<li><a href="https://photos.google.com/" target="_blank">Google Fotos</a><br />
Album öffnen: Blogtitel in die Suche eingeben</li>
</ol>
<br />
<div class="hervorhebung4">
<b>2016-02-22:</b> Das Produkt <span style="color:red;">"Picasa-Webalben" wird demnächst verschwinden</span>. Blogbilder können dann nur noch über das neue Produkt "Google Fotos" verwaltet werden. <a href="http://googlephotos.blogspot.de/2016/02/moving-on-from-picasa.html" target="_blank">Moving on from Picasa</a>
</div>
<br />
Sobald man das Album geöffnet hat und nur die Bilder des gewählten Albums angezeigt werden, muss man das gewünschte Bild anklicken, um anschließend auf Links Zugriff zu haben, mit denen man etwas für das Bild verfügen kann. Folgendes ist möglich:<br />
<ul>
<li>Bild runterladen</li>
<li>Bild löschen</li>
<li>Bild in ein anderes Album verschieben</li>
<li>Bild in ein anderes Album kopieren</li>
<li>Bild als Album-Deckblatt festlegen</li>
<li>Bild bearbeiten</li>
<li>Bild teilen </li>
</ul>
Um das Bearbeitungsmenü zu sehen muss man in Picasa-Webalben oben links auf den Link "Aktionen" klicken, um es bei Google Fotos zu sehen, muss man oben rechts auf die senkrecht untereinander stehenden Punkte (Weitere Optionen) klicken. Falls man die Punkte nicht sieht, muss man die Maus über den oberen Bereich halten, damit sie wieder eingeblendet werden. (Hinweis gilt für die Arbeit am PC.)<br />
<br />
Google Fotos ist bislang aber noch nicht für Blogger optimiert. Das Menü ist eingeschränkter und das Kopieren eines Bildes in das Album eines anderen Blogs des selben Kontos ist nicht möglich, weil während des Vorgangs dort nur Alben angezeigt werden, die auf anderen Wegen als dem Einrichten eines Blogs entstanden sind.
<br />
<br />
Will man seine Bilder mobil verwalten, muss man wohl die App für Google Fotos nutzen. Wer aber seine Bilder am PC verwaltet, hat jederzeit die Wahl zwischen Picasa-Webalben und Google Fotos. Auf keinen Fall sollte man jedoch gleichzeitig sowohl die eine als auch die andere Verwaltungsoberfläche geöffnet haben und mal hier und mal da einen Verwaltungsschritt vornehmen; denn dann hat man natürlich nirgends mehr eine korrekt aktualisierte Anzeige.<br />
<br />
<h4>
Bilder löschen, endgültig löschen oder wiederherstellen</h4>
Im Blog kann man nur den Bild-Link, nicht aber das Bild auf seinem Speicherplatz löschen. Das kann man nur - wie oben beschrieben - über Picasa-Webalben oder Google Fotos machen. Umgekehrt können Bilder aber im Blog nicht mehr angezeigt werden, die man im Album gelöscht hat, weil ein Image, nur angezeigt werden kann, wenn es unter der Adresse noch liegt, die im Blog angegeben ist. Durch das Löschen von Bildern im Album, die im Blog nicht mehr genutzt werden, kann man Speicherplatz freimachen sowie die Übersicht im Album verbessern.<br />
<h5>
Papierkorb</h5>
Bilder, die man über Picasa-Webalben oder Google Fotos löscht, wandern in einen Papierkorb. Wenn man sie dort nicht manuell endgültig löscht, werden sie für 60 Tage gelagert, bis sie vom Programm automatisch endgültig gelöscht werden. Der Papierkorb ist nur über Google Fotos erreichbar, nämlich dort:<br />
<br />
<a href="https://photos.google.com/trash" target="_blank">https://photos.google.com/trash</a><br />
<br />
Innerhalb der 60-Tage-Frist kann man die Bilder, die man nicht manuell endgültig gelöscht hat, von da aus wiederherstellen. (Ob die alte Blogspot-Adresse dann noch nützt, habe ich noch nicht getestet. Falls nicht, müsste man das Bild erneut in das Blog hochladen, wenn man es irrtümlich auf dem Speicherplatz gelöscht hatte und es nun im Blog, trotz Link, nicht mehr angezeigt wird.)<br />
<br />
Manuell kann man die Bilder einzeln oder gemeinsam endgültig löschen. Um ein einzelnes Bild zum Wiederherstellen oder Löschen zu markieren, muss man auf den Haken klicken, der links oben im Bild angezeigt wird, wenn man die Maus über das Bild hält. (So funktioniert es am PC.) Um alle Bilder des Papierkorbs gleichzeitig endgültig zu löschen gibt es oben rechts den Link "Papierkorb leeren".<br />
<br />
<h4>
Adressen der Bilder</h4>
Die Adressen der Bilder, mit denen sie vom Blog aus, von Picasa-Webalben aus und von Google Fotos aus vom tatsächlichen Speicherplatz auf den Google-Servern abgerufen werden, sind unterschiedlich.<br />
<br />
Man sieht die Adresse, die ein Bild im Blog hat, die es bei Picasa-Webalben hat und die es bei Google Fotos hat, wenn man an den jeweiligen Orten einen Rechtsklick auf das angezeigte Bild macht und dann auf "Grafik anzeigen" klickt. Die Adresse steht dann in der Eingabe-Zeile des Browsers. <br />
<br />
Bestimmte Teile der Adressen ein und des selben Bildes sind im Blog und bei Picasa-Webalben gleich, weshalb man, aus ähnlichen Versionen eines Bildes, die man nacheinander in das Blog hochgeladen und ausprobiert hatte, das letztlich im Blog behaltene Bild identifizieren und die anderen im Album löschen kann. Die Bildadresse unter Google Fotos ist leider völlig anders, weshalb man sie zum gezielten Löschen ungenutzter Versionen nicht zurate ziehen kann. Die Gefahr, dass man die Version löscht, die man im Blog nutzt, ist bei Google Fotos daher enorm groß. <br />
<br />
Folgend habe ich die Adressen des Headerbildes des hiesigen Blogs notiert. Damit die einzelnen Adressteile deutlicher verglichen werden können, habe ich in die normalerweise zusammenhängenden Linkadressen ausnahmsweise Zeilenumbrüche eingebaut. Die Adressteile, die im Blog und bei Picasa-Webalben gleich sind, habe ich rot gefärbt.<br />
<br />
Da Bilder beim Hochladen in's Blog neuerdings https-Adressen bekommen, habe ich die Header-Bild-Adresse im Blog mit https eingetragen, obwohl das schon alte Bild noch eine http-Adresse hat.
<br />
<br />
<h5>
Blog</h5>
<div class="code">
<code>
https://4.bp.blogspot.com/<br />
<span style="color: red;">-YMqn1-zkDXY/<br />UJbntBN3-wI/<br />AAAAAAAABg8/</span><br />
A8PoOJ_OArI/s1600/<br />
<span style="color: red;">so-gehts_header_h78.jpg</span>
</code>
</div>
<br />
<h5>
Picasa-Webalben</h5>
<div class="code">
<code>
https://lh3.googleusercontent.com/<br />
<span style="color: red;">-YMqn1-zkDXY/<br />UJbntBN3-wI/<br />AAAAAAAABg8/</span><br />
H8ZEMeRdmoc/s980-Ic42/<br />
<span style="color: red;">so-gehts_header_h78.jpg</span>
</code>
</div>
<br />
<h5>
Google Fotos</h5>
<div class="code">
<code>
https://lh3.googleusercontent.com/<br />
gwby2oUITn4027_PSyRab96iPIDPN6XiP-RuJjh9ESjhWePzIktYu3Vw4tdI3iXOcD9jjP9Vtl6UpzV7bg-bYVeD0FObCJhZTJFCMZn2LFPZbf-OiYMNKRBmvUfz-NkVwmUsbhTHP05bWbLn2u8U2KG2aDbZEKBbx3kmj5hb2N6VNt_r9dnRMC6dTR0GnJS5ptxdFiLaC96EZ0xAXwF6yJSLhApOB5ewRgU3FnoQ7d8rTDjmORQSnHB2KKaMJfeQlPNsvuCaBw4MA_jkqDl0B6cn0lH0jWXHGJp-CUjXZ-MvxPpaehr8sllhFerrniuwtR-hWJURwwdQbbwAEdj8hcUvk_f9JAb8mNSNlfC5g1WNF8TmpMqPfsCo11IcPceAEE33F26qPIVD7TeThVmoeIErLQDqW0ZrVljw-T3oxCFIageoI8aMfYlaM7eTtEmiwyGN07TKuH0FRSB_VtCKohzxDcBCh9pKmk--4JB92IMbrqRouJlMOHOTNzOzNVoypKZZtyaE6L9d_4f13lJENvIrKzQwropiAXHrlYJKg0nYkSz1O1YeDTApEA75ab7sGlvb=w980-h78-no
</code>
</div>
<br />
<h4>
Speicherlimit</h4>
Man hat in seinem Googlekonto insgesamt 15 GB Speicherplatz kostenlos. Das gilt für alles zusammen, was man bei Google speichern kann, also für Emails, Bilder, Dateien und somit für Gmail, Google Fotos und Drive. Wobei nicht alles auf den Speicherplatz angerechnet wird. Bilder und Videos werden nur dann angerechnet, wenn man für sie eingestellt hat, dass sie in Originalgröße hochgeladen werden sollen. Dateien, die man mit Google-Docs, Google Tabellen und Google Präsentationen erstellt hat, werden gar nicht angerechnet.<br />
<br />
Googles Hinweise dazu:
<br />
<ul>
<li><a href="https://support.google.com/photos/answer/6220791" target="_blank">Größe auswählen, mit der Fotos gespeichert werden sollen</a></li>
<li><a href="https://support.google.com/drive/answer/6558" target="_blank">Speicherplatzkontingent ansehen</a></li>
</ul>
Sollte der Speicherplatz verbraucht sein, hat man, um im Blog weiterhin die Hochlade-Funktion für Bilder in Originalgröße nutzen zu können, folgende Möglichkeiten:<br />
<ol>
<li>Speicherplatz frei machen, indem man ungenutzte Bilder über Picasaweb oder Google Fotos vom Speicherplatz löscht. Oder Löschungen unter Gmail und Drive vornmmt, falls man auch diese Produkte nutzt.</li>
<li>Von Google Speicherplatz hinzukaufen. <a href="https://www.google.com/settings/storage" target="_blank">https://www.google.com/settings/storage</a></li>
<li>Sich mit einem zweiten, frischen Google-Konto als Autor einladen, ihn zum Admin machen und als dieser Admin das Blog weiterführen. Das Konto des ersten Admin muss aber bestehen bleiben, damit seine Bilder aus dem Blog nicht verloren gehen.
<br />
Es empfiehlt sich, den Blog-Namen, mit dem Posts unterschrieben werden, gleich zu halten, aber laufende Nummern anzuhängen, damit die Indentität erhalten bleibt und man anhand der Postunterschrift dennoch gleich sieht, in welchem Konto man das Bild findet.
<br />
Also, beispielsweise so:
<ul>
<li>1. Google-Konto - Blog-Name: Vorname Nachname</li>
<li>2. Google-Konto - Blog-Name: Vorname Nachname 2</li>
<li>3. Google-Konto - Blog-Name: Vorname Nachname 3</li>
<li>usw.</li>
</ul>
</li>
</ol>
Aber Achtung, nicht als Admin 2 im Post des Admin 1 nachträglich ein Bild einfügen; denn das sieht man ja später nicht, dass speziell dieses Bild aus dessen Konto kam und nicht aus dem Konto, mit dessen Namen der Post unterschrieben ist.<br>
<br>
<h4>
Weiterführender Link</h4>
<div class="links">
<ul>
<li><b>Liste der Posts zum Label "Bilder" <a href="http://sg.utez.de/2012/11/liste-bilder.html">Web</a> | <a href="http://sg.utez.de/2012/11/liste-bilder.html?m=1">Mobil</a></b><br />
<br />
Auf dieser Liste sind die Links stets aktualisiert, z.B. die zu folgenden, zum hiesigen Thema passenden Posts:
<ul>
<li>Bilderverwaltung vom Blog aus über sein Googlekonto erreichen</li>
<li>Welche Bildadressen für Feed genutzt werden</li>
</ul>
</li>
</ul>
</div>
<br>
<address>
Ute Ziemes, sg.utez.de, <time>2016-02-09, Hinweis ergänzt: 2015-02-24</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com4tag:blogger.com,1999:blog-7887222252923781602.post-18430079132125308022016-02-03T06:25:00.000+01:002016-02-24T20:55:39.122+01:00Vom Arbeiten früh morgens am Blog ist abzuraten<script type="text/javascript">
$(document).ready(function() {
$('#post-body-1843007913212530802').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNiUIggU6ely4TCaBah8R_SgOtVJ0_mT0zw3yDXReXa5W0B49Llwvx_zdpzTmMyjM7ApWEYrxDFsmBVjDHqsiLtwR2ofLV1H-73UYbZW5HaeP40NM29ZTVGvAK0t2YfZCPwGaBzFGa59X/s1600/layout-und-dynan_transparent.png") no-repeat scroll top right'})
});
</script>
Immer wenn Blogger Änderungen hochlädt, tun sie das um 5 Uhr morgens (MEZ). Wenn man von kurz vorher bis kurz nachher am Blog arbeitet, erlebt man deshalb unter Umständen Unerklärliches. Dabei kann es sich um nur wenige Sekunden oder Minuten wirksame Effekte aus einem Hochlade-Zwischenschritt handeln. Das sofortige Reparieren eines auftretenden Fehlers sollte man deshalb unterlassen und lieber später nochmal nachschauen, ob der Fehler überhaupt noch besteht. Code, den man in dem Zeitraum getestet hatte, sollte man später erneut testen.
<a name='more'></a>
<hr />
Heute z.B. war vorübergehend im Blog mit den Dynamischen Ansichten das Views-Menü weg und bei geöffnetem "CSS hinzufügen" wurde im Browser-Tab ein PDF-Symbol statt eines Blogger-Symbols angezeigt. Ich wollte gerade meinen eingetragenen Code als missglückten Test verbuchen und das Views-Menü reparieren, als mir zufällig die Uhrzeit auffiel. Draufhin habe ich alles gelassen wie es war und einfach nur gewartet. Eine halbe Stunde später war, nach dem diesmaligen Neuladen des Blogs, das Views-Menü von alleine wieder da und auch der zuvor eingetragene Code zeigte nun den gewünschten Effekt.
<br />
<br />
<address>
Ute Ziemes, sg.utez.de, <time>2016-02-03</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-24179724930979705832015-08-14T21:19:00.000+02:002016-02-05T21:29:11.452+01:00Abschnitt "navbar" unter "Layout" anzeigen lassen<script type="text/javascript">
$(document).ready(function() {
$('#post-body-2417972493097970583').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65BNDIOCvweOSdVHxAJ4o3JjBHr7cwrCIdb45pTvIDnZl3gS28XNTtnil-q6MUUIbnwkWeiTK57CqhrwC9iwPxvNoED8QWiey1A5EaCb4IsolDv30AhLdpPhyGI9IPIxDtTb3Gxc1m0lc/s1600/layout-vorlagen_transparent.png") no-repeat scroll top right'})
});
</script>
Nicht-dynamische Vorlagen haben im HTML als obersten Abschnitt die Section mit der id "navbar", in der das Widget "Navbar1" steht. Normalerweise wird dieser Abschnitt auch unter "Layout" angezeigt und man kann darunter das Navbar-Widget bearbeiten, eine bestimmte farbliche Variante der Navbar wählen oder die Navbar auf "Aus" stellen.<br />
<br />
In seltenen Fällen ist dieser Abschnitt unter "HTML bearbeiten" zwar vorhanden, fehlt jedoch unter "Layout". Ursache ist eine falsche Section-Zeile im HTML.<br />
<a name='more'></a><hr />
<h4>
Die folgenen Zeilen und Ergebnisse gibt es:</h4>
<h5>
Korrekt: </h5>
HTML-Zeile für die section der id "navbar" - korrekt:<br />
<br />
<code><b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'></code><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH9U6_XCuYHYcsuZB8u0oewjG8uUfraC-dYk6SsMgdHeP-my3RrQELSzh3QF4H5FZwReN0RYyP1nLlrsVbUlZkRSN0-JjfjTBqPZtjwvUMCpX7aqU9OhHclmG5H6kPVq4WMrMafO-z3ob6/s1600/navbar-section-zeile_im-html_korrekt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="18" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH9U6_XCuYHYcsuZB8u0oewjG8uUfraC-dYk6SsMgdHeP-my3RrQELSzh3QF4H5FZwReN0RYyP1nLlrsVbUlZkRSN0-JjfjTBqPZtjwvUMCpX7aqU9OhHclmG5H6kPVq4WMrMafO-z3ob6/s400/navbar-section-zeile_im-html_korrekt.png" width="400" /></a></div>
<br />
<br />
Anzeige der section der id "navbar" unter "Layout" - korrekt:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjicNvS2iv5krWJrNMvVwP9bOrSbARgvaNGzwprFh8h0wPTGcj3BTJMHKccZ-_bK3bL76Aq75eCoLCqJDVQZrr34RiYRBHVp9LEJrvyI5lLmTghg3mSMeLzj7iYzLN1GGEV1UAhepXlQAYO/s1600/navbar-section_anzeige-im-layout_korrekt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="117" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjicNvS2iv5krWJrNMvVwP9bOrSbARgvaNGzwprFh8h0wPTGcj3BTJMHKccZ-_bK3bL76Aq75eCoLCqJDVQZrr34RiYRBHVp9LEJrvyI5lLmTghg3mSMeLzj7iYzLN1GGEV1UAhepXlQAYO/s400/navbar-section_anzeige-im-layout_korrekt.png" width="400" /></a></div>
<br />
<br />
<h5>
Fast korrekt:</h5>
HTML-Zeile für die section der id "navbar" - fast korrekt - Anzeige unter Layout findet statt, aber die Überschrift ist dort "name" (Navbar) statt "id" (navbar) der Section: <br />
<br />
<code><b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'></code><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRvhro4TuZam3qcuIgAqOpDVsEujcOPd183K3HnX-5Ei8JEpKTwwvP9eJoYjLwW0FnGuj8KQcQUFDe8TEGTiGemg7ZJ34TLQzsPLBUP0wgaEpSMAol71M8uz61K_F84FiKQ02SpJfYlEy/s1600/navbar-section-zeile_im-html_fast-korrekt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRvhro4TuZam3qcuIgAqOpDVsEujcOPd183K3HnX-5Ei8JEpKTwwvP9eJoYjLwW0FnGuj8KQcQUFDe8TEGTiGemg7ZJ34TLQzsPLBUP0wgaEpSMAol71M8uz61K_F84FiKQ02SpJfYlEy/s400/navbar-section-zeile_im-html_fast-korrekt.png" width="400" /></a></div>
<br />
<br />
Anzeige der section der id "navbar" unter "Layout" - fast korrekt:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx3drVl-s5lDMC80g4fz16-GJl8Fp09ZrMJg10sGRDdqmC-4lFn8E4LUSk46CJX0Wd2_up2bJkrLDTrNiXvOB7nsQkndVW0tK174ac8eUB5weyZUVU19SOWjEy9p0pOHV079VpDy8tCoBL/s1600/navbar-section_anzeige-im-layout_fast-korrekt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="118" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx3drVl-s5lDMC80g4fz16-GJl8Fp09ZrMJg10sGRDdqmC-4lFn8E4LUSk46CJX0Wd2_up2bJkrLDTrNiXvOB7nsQkndVW0tK174ac8eUB5weyZUVU19SOWjEy9p0pOHV079VpDy8tCoBL/s400/navbar-section_anzeige-im-layout_fast-korrekt.png" width="400" /></a></div>
<br />
<br />
<h5>
Falsch:</h5>
HTML-Zeile für die section der id "navbar" - falsch:<br />
<br />
<code><b:section class='navbar item-control blog-admin' id='navbar' maxwidgets='1' showaddelement='no'></code> <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghyphenhyphen73oZhjwbd1hoOma1A5UFVGe4sXTbApBhtKCIUsMeG7SF-kiDXYjugUvif3xEAIe5TiFQuBm5Vcn2LbviFighNxt9Oey8Qs1_1rGB1lQwa6RSy7enlbucYD_lmxzDLfGMZGInltHLDSo/s1600/navbar-section-zeile_im-html_falsch.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="15" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghyphenhyphen73oZhjwbd1hoOma1A5UFVGe4sXTbApBhtKCIUsMeG7SF-kiDXYjugUvif3xEAIe5TiFQuBm5Vcn2LbviFighNxt9Oey8Qs1_1rGB1lQwa6RSy7enlbucYD_lmxzDLfGMZGInltHLDSo/s400/navbar-section-zeile_im-html_falsch.png" width="400" /></a></div>
<br />
<br />
Anzeige der section der id "navbar" unter "Layout" - fehlt:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwqlh3xtpi_bTfODvjk9RWnQFkNj-f7VsQOBxsuRK2qNCZr9_T6cVTkLvMhipGGyeOBL-ucu2-WixgnWbeP1V_OeBZ8aVypwXWLamZP2AC9hyhSndNdqd83VM-hdm0z5-3J_dM36jYRJqj/s1600/navbar-section_anzeige-im-layout_fehlt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="77" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwqlh3xtpi_bTfODvjk9RWnQFkNj-f7VsQOBxsuRK2qNCZr9_T6cVTkLvMhipGGyeOBL-ucu2-WixgnWbeP1V_OeBZ8aVypwXWLamZP2AC9hyhSndNdqd83VM-hdm0z5-3J_dM36jYRJqj/s400/navbar-section_anzeige-im-layout_fehlt.png" width="400" /></a></div>
<br />
<br />
<h4>
Fehler korrigieren - Anleitung:</h4>
<ol>
<li>Zu <b>Vorlage > HTML bearbeiten</b> gehen</li>
<li>Auf <b>"Weiter zum Widget"</b> klicken</li>
<li>In der Auswahl auf <b>"Navbar1"</b> klicken</li>
<li>Von "Navbar1"aus eine Zeile höher scrollen.</li>
<li>Falsche Zeile<br />
<code><b:section class='navbar item-control blog-admin' id='navbar' maxwidgets='1' showaddelement='no'></code><br />
gegen korrekte Zeile<br />
<code><b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'></code><br />
tauschen
</li>
<li>Auf <b>"Vorlage speichern"</b> klicken und warten bis das erledigt ist.</li>
<li>Auf <b>"Zurück"</b> klicken</li>
<li>Auf <b>"Layout"</b> klicken</li>
<li>Neben der Browser-Eingabe-Zeile auf den <b>"Aktuelle Seite neu laden"</b>-Pfeil klicken; denn erst dadurch wird die Anzeige im Layout aktualisiert, so, dass der Abschnitt "navbar" nun angezeigt wird.</li>
</ol>
<br />
<br />
<address style="color: #cccccc; font-size: 70%;">
Ute Ziemes, sg.utez.de, <time>2015-08-14</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-36787907396794610042015-08-11T01:21:00.000+02:002016-02-05T21:29:54.685+01:00Im "navbar"-Abschnitt ein Feld zum "Gadget hinzufügen" ergänzen<script type="text/javascript">
$(document).ready(function() {
$('#post-body-3678790739679461004').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65BNDIOCvweOSdVHxAJ4o3JjBHr7cwrCIdb45pTvIDnZl3gS28XNTtnil-q6MUUIbnwkWeiTK57CqhrwC9iwPxvNoED8QWiey1A5EaCb4IsolDv30AhLdpPhyGI9IPIxDtTb3Gxc1m0lc/s1600/layout-vorlagen_transparent.png") no-repeat scroll top right'})
});
</script>
Der Abschnitt "navbar" ist derjenige Abschnitt, der nicht auf die Blogbreite beschränkt ist, sondern über die gesamte Screenbreite geht. Unter "Layout" kann man im Abschnitt "navbar" (im Layout mancher Blogs steht "Navbar") standardmäßig kein Gadget direkt hinzufügen und man kann auch kein Gadget von woanders in diesen Bereich ziehen. Mit kleinen Änderungen in einer Zeile im HTML geht beides anschließend aber doch.<br />
<a name='more'></a><hr />
Man kann im HTML zwar alternativ einen Div-Container mit Klassen-Name oder ID direkt oberhalb des navbar-Abschnitts eintragen, um dennoch etwas im oberen Bereich des Blogs anzeigen zu lassen, das sich auf die gesamte Screenbreite auswirkt, wer das aber lieber in ein HTML-Gadget setzen und vom Layout aus verwalten würde, der kann das ermöglichen, wenn er die folgenden Schritte durchführt:<br />
<h4>
Anleitung:</h4>
<ol>
<li>Unter Vorlage > HTML bearbeiten etwas runter scrollen, bis zu der folgenden Zeile:<br />
<code><b:section class='navbar' id='navbar' maxwidgets='<span style="color: red;">1</span>' showaddelement='<span style="color: red;">no</span>'></code><br />
In dieser Zeile die '1' in '4' ändern und 'no' in 'yes'
</li>
<li>Auf "Vorlage speichern" klicken und warten bis das erledigt ist.</li>
<li>Auf "Zurück" klicken.</li>
<li>Sollte das Programm melden, es wäre etwas nicht gespeichert, kann das ignoriert werden.</li>
<li>Auf "Layout" klicken.</li>
<li>Neben der Browser-Eingabe-Zeile auf den "Aktuelle Seite neu laden"-Pfeil klicken; denn eventuell wird erst dadurch die Anzeige im Layout aktualisiert, so dass das "Gadget hinzufügen"-Feld im navbar-Bereich zu sehen ist</li>
</ol>
Im Abschnitt "navbar" können jetzt bis zu vier Gadgets stehen. Die Navbar muss mitgezählt werden, selbst wenn diese nicht aktiviert ist. Will man dort so viele Gadgets haben, wie möglich sind, sollte man unter "HTML bearbeiten" die maxwidgets-Zahl dennoch um eins höher setzen; denn nur, wenn noch Platz für ein weiteres Gadget ist, kann man die Gadgets innerhalb des navbar-Abschnitts verschieben.<br />
<br />
Die HTML-Gadgets sind automatisch so eingestellt, dass man sie überhaupt verschieben kann. Will man auch die Navbar verschieben können, muss man unter "HTML bearbeiten" in der obersten Zeile des Navbar1-Widgets hinter locked das Wort "true" gegen "false" tauschen. Da die Navbar aber "absolute" positioniert ist, wird es wohl egal sein, wo sie innerhalb des Abschnitts "navbar" einsortiert ist.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWd8Xjp0gn6yqZ3bpwG9ZVQ4DA5pTsnuxtOEtLVQpKQX8LAwxoN6MZxNjbhFFSmlVI_SSmoXZsRQsAy8fHo4tBonS9mcjflY43GRtJ0Ga-OLV1MKKYjC073hOQtVa5g1PuPGOs_vQEtWEE/s1600/navbar-section_mit-html-gadget-und-navbar1_pfeile-ungeklickt.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="26" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWd8Xjp0gn6yqZ3bpwG9ZVQ4DA5pTsnuxtOEtLVQpKQX8LAwxoN6MZxNjbhFFSmlVI_SSmoXZsRQsAy8fHo4tBonS9mcjflY43GRtJ0Ga-OLV1MKKYjC073hOQtVa5g1PuPGOs_vQEtWEE/s400/navbar-section_mit-html-gadget-und-navbar1_pfeile-ungeklickt.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">navbar-section unter "HTML bearbeiten" (Pfeile ungeklickt) mit HTML-Widget und Navbar</td></tr>
</tbody></table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNKaczJUJGTay9862SFCIrfePuETWFY7eGG7tnYSfwjwh-U_AMO5gDqiW6w6-OeY6CAQFYo2Of7INtl9Ltcc5V23l9UeFzkEMb6dIqBRzjRKJoBRNjEOWXxNt0JM2_VDSKcYX2sTisn5u4/s1600/navbar-mit-html-gadget_ueber-navbar1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNKaczJUJGTay9862SFCIrfePuETWFY7eGG7tnYSfwjwh-U_AMO5gDqiW6w6-OeY6CAQFYo2Of7INtl9Ltcc5V23l9UeFzkEMb6dIqBRzjRKJoBRNjEOWXxNt0JM2_VDSKcYX2sTisn5u4/s400/navbar-mit-html-gadget_ueber-navbar1.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">navbar-Abschnitt unter Layout mit hinzugefügtem HTML-Gadget</td><td class="tr-caption" style="text-align: center;"><br /></td><td class="tr-caption" style="text-align: center;"><br /></td><td class="tr-caption" style="text-align: center;"><br /></td><td class="tr-caption" style="text-align: center;"><br /></td><td class="tr-caption" style="text-align: center;"><br /></td><td class="tr-caption" style="text-align: center;"><br /></td><td class="tr-caption" style="text-align: center;"><br /></td><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<h4>
Nutzen</h4>
Nun kann man sich mit einem HTML-Gadget eine eigene Navbar bauen oder einen eigenen Cookie-Hinweis oder beides, wenn man mit CSS tüfteln kann oder zwei Gadgets verwendet.<br />
<br />
Man kann das Navbar-Widget weiterhin aktiviert lassen und weitere Gadgets darunter setzen. Aber wegen des CSS des Navbar-Gadgets (z.B. seiner absoluten Ausrichtung) ist das schwieriger zu gestalten als wenn man per HTML-Gadget einen Navbar-Ersatz anzeigen lässt. Ratsamer ist es deshalb, die Navbar auf "Aus" zu stellen.<br />
<br />
Fügt man mehere Gadgets hinzu und will Gadget-Titel eintragen, damit man unter "Layout" sofort sieht um welches Gadget es sich handelt, muss man per CSS den Titel ausblenden, weil er sonst auch im Blog angezeigt würde.<br />
<br />
So kann man Gadget-Titel in dem navbar-Bereich grundsätzlich ausblenden:<br />
<br />
<div class="code">
<code>
#navbar .HTML .title { <br />display:none;<br />}
</code>
</div>
<br />
<h4>
Anregungen für Code:</h4>
Wenn man nur eine Blende über die linke Häfte der Navbar setzen will, findet man dort Code für diesen Zweck: <b>"Blende auf linke Hälfte der Navbar legen" <a href="http://sg.utez.de/2014/02/blende-auf-linke-haelfte-der-navbar-legen.html" target="_blank">Web</a> | <a href="http://sg.utez.de/2014/02/blende-auf-linke-haelfte-der-navbar-legen.html?m=1" target="_blank">Mobil</a></b> nachlesen. Wenn man die 50% für die Breite auf 100% setzt, kann man das auch für einen kompletten Navbarersatz nutzen. Wenn man das CSS aus diesen Beispielen nicht in das Gadget, sondern unter "CSS hinzufügen" einträgt, muss man dort die Style-Klammern weglassen. Die Codes sind zwar ursprünglich dafür gemacht, sie direkt in das HTML oberhalb des navbar-Abschnitts einzutragen, wirken wegen ihrer absoluten Positionierung aber innerhalb des Navbar-Bereichs genauso, wenn man das positionierende Style-Kommando nicht nur für .navbarblende, sondern auch für das HTML-Gadget einträgt. Hier im Blog zum Beispiel so:<br />
<br />
<div class="code">
<code>
#HTML13, .navbarblende {
</code>
</div>
<br />
<br />
Navbar und verlinkte Navbarblende oder Navbarersatz sind "absolute" ausgerichtet und befinden sich auf einer höheren Schicht. Will man weitere HTML-Gadgets einsetzen, rutschen diese deshalb nicht automatisch darunter. Man muss für folgende Gadgets deshalb entweder einen passenden Abstand nach oben definieren oder diese Gadgets ebenfalls "absolute" positionieren.<br />
<br />
Hat man die Navbar auf "Aus" gestellt und setzt mehrere HTML-Gadgets ein, ist es das Beste, sie nicht "absolute" zu positionieren. Sie stellen sich dann automatisch untereinander. Allerdings muss man bedenken, dass für Widgets ein Abstand vorgegeben ist. Mit dem folgenden CSS-Kommando kann man ihn im navbar-Abschnitt jedoch grundsätzlich außer Kraft setzen.<br />
<br />
<div class="code">
<code>
#navbar .widget { <br />margin:0px;<br />}
</code>
</div>
<br />
Will man für ein bestimmtes Gadget dennoch einen Abstand haben, könnte es sein, dass man dem Kommando für dieses Gadget ein !important anhängen muss.<br />
<br />
Setzt man nur ein "relative" positioniertes Gadget ein und floatet die Inhalte, dann könnte das folgende Kommando ergänzend wichtig sein, damit die Breite des Blogtitels nicht beeinträchtigt wird.<br />
<br />
<div class="code">
<code>
.header-inner { <br />clear:both;<br />}
</code>
</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzuSv7go_8WqJWVgR976pVdqACHSwHO63EgYWCyCadEe44nTsOtXWYlXMAt-QGj83BYa1DXU3Zc7Vfx6I1cHu_-PbeganpeiRNu4NBBgTreQkV419OQNNBozsDIAVrdtgQiwHuoo979w0w/s1600/navbarersatz_beispiel.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzuSv7go_8WqJWVgR976pVdqACHSwHO63EgYWCyCadEe44nTsOtXWYlXMAt-QGj83BYa1DXU3Zc7Vfx6I1cHu_-PbeganpeiRNu4NBBgTreQkV419OQNNBozsDIAVrdtgQiwHuoo979w0w/s400/navbarersatz_beispiel.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Navbarersatz mit Suchfeld, Cookie-Hinweis und Links - "relative" positioniert</td></tr>
</tbody></table>
<h4>
Anzeige in der Mobil-Version des Blogs</h4>
HTML-Gadgets werden in der Mobil-Version des Blogs nicht standardmäßig angezeigt. Ist die Mobil-Vorlage auf "Benutzerdefiniert" eingestellt, kann man jedoch im HTML eintragen, dass das Gadget auch in der Mobil-Version angezeigt werden soll. Dazu muss man unter "HTML bearbeiten" via "Weiter zum Widget" zum entsprechenden Gadget springen und dort in der obersten Zeile das im folgenden Beispiel rot gefärbte ergänzen.<br />
<br />
<div class="code">
<code>
<b:widget id='HTML2' locked='false' <span style="color: red;">mobile='yes'</span> title='Navi' type='HTML'>
</code>
</div>
<br />
Man kann für die Mobil-Version auch andere CSS-Kommandos eintragen. Den Abschnitten, die man ansteuert, muss zu dem Zweck ein .mobile vorangesetzt werden.<br />
<br />
Will man ein Gadget nur in der Mobilversion anzeigen, sollte man nicht das Kommando mobile="only", welches Fehler produziert, verwenden, sondern ebenfalls mobile="yes" und zusätzlich mittels CSS das Gadget in der Web-Version ausblenden.<br />
<h5>
Beispiel:</h5>
<div class="code">
<code>
#HTML2 {<br />
display: none; <br />
}
</code>
</div><br />
Soll ein bloginterner Link in der Web-Version als Web-Link angezeigt werden und in der Mobil-Version mit der mobilen Adresse, dann kann man ihn zweimal in das Gadget, direkt hntereinander eintragen und dem a des ersten Links die Klasse "desktop" zuweisen und dem a des zweiten Links die Klasse "smartphone". Dann kann man mittels CSS in der Web-Version nur den einen und in der Mobil-Version nur den anderen Link anzeigen lassen.<br />
<h5>
Beispiel:</h5>
<br />
HTML <br />
<br />
<div class="code">
<code>
<a <span style="color: red;">class="desktop"</span> href="http://sg.utez.de/2014/02/blende-auf-linke-haelfte-der-navbar-legen.html">Blende auf ...</a><a <span style="color: red;">class="smartphone"</span> href="http://sg.utez.de/2014/02/blende-auf-linke-haelfte-der-navbar-legen.html">Blende auf ...</a>
</code>
</div>
<br />
CSS<br />
<br />
<div class="code">
<code>
a.desktop {<br />
display: block;<br />
}<br />
.mobile a.desktop {<br />
display: none;<br />
}<br />
a.smartphone {<br />
display: none;<br />
}<br />
.mobile a.smartphone {<br />
display: block;<br />
}
</code>
</div><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXMJ9-YyjrKVM2JKKLKZwlpk-FF4yFDac9kBQvLk9f1XMx8qixatqW6jDnV29fcATRCBZaSmmX2eY92H-zLAoDZVFvfmVkmV8-uCwFCFMg9nCVkBVS1Oq5ABfZRrC77y7Bi1de0rwgAsrx/s1600/cookie-hinweis_mobil_beispiel.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXMJ9-YyjrKVM2JKKLKZwlpk-FF4yFDac9kBQvLk9f1XMx8qixatqW6jDnV29fcATRCBZaSmmX2eY92H-zLAoDZVFvfmVkmV8-uCwFCFMg9nCVkBVS1Oq5ABfZRrC77y7Bi1de0rwgAsrx/s320/cookie-hinweis_mobil_beispiel.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Aus dem Navbarersatz in der Mobil-Version nur den Cookie-Hinweis mit mobilem Link übernommen.</td></tr>
</tbody></table><br />
<br />
<address style="color: #cccccc; font-size: 70%;">
Ute Ziemes, sg.utez.de, <time>2015-08-11, Ergänzung: 2016-01-22</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-68450937745805280362015-08-07T10:12:00.000+02:002016-02-05T21:29:54.696+01:00Navbar-Platzhalter in mobiler Layout-Vorlage entfernen<script type="text/javascript">
$(document).ready(function() {
$('#post-body-6845093774580528036').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65BNDIOCvweOSdVHxAJ4o3JjBHr7cwrCIdb45pTvIDnZl3gS28XNTtnil-q6MUUIbnwkWeiTK57CqhrwC9iwPxvNoED8QWiey1A5EaCb4IsolDv30AhLdpPhyGI9IPIxDtTb3Gxc1m0lc/s1600/layout-vorlagen_transparent.png") no-repeat scroll top right'})
});
</script>
In Blogs, die eine Layout-Vorlage nutzen, ist neuerdings in der Mobilversion des Blogs ein Platz für die nicht vorhandene Navbar reserviert. Dadurch wird der Header des Blogs in Smartphones nun mit 30px mehr Abstand nach oben angezeigt.<br />
<a name='more'></a><hr />
Das Vorkommen ist unabhängig von der Einstellung für die Mobil-Vorlage. Aber <b>entfernen kann man es nur, wenn man die Mobilvorlage auf "Benutzerdefiniert" eingestellt hat</b>, obwohl man beim CSS-Kommando nicht mal .mobile voranstellen müsste, wenn man in der Webversion den Platz für die Navbar nicht mit einem Ersatz belegt hat, wie ich das hier gemacht habe.
<br />
<br />
Unter <b>Vorlage > Anpassen > Erweitert > CSS hinzufügen</b><br />
<br />
das Folgende eintragen:<br />
<br />
<div class="code">
<code>
.mobile #navbar { <br />
display: none;<br />
}
</code>
</div>
<br />
Abschließend auf <b>"Auf Blog anwenden"</b> klicken und warten bis das erledigt ist. <br />
<br />
<address style="color: #cccccc; font-size: 70%;">
Ute Ziemes, sg.utez.de, <time>2015-08-07</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-36966597649081773332015-08-06T07:44:00.000+02:002016-02-05T21:29:54.690+01:00Bedeutung der Überschriften im neuen Layout<script type="text/javascript">
$(document).ready(function() {
$('#post-body-3696659764908177333').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65BNDIOCvweOSdVHxAJ4o3JjBHr7cwrCIdb45pTvIDnZl3gS28XNTtnil-q6MUUIbnwkWeiTK57CqhrwC9iwPxvNoED8QWiey1A5EaCb4IsolDv30AhLdpPhyGI9IPIxDtTb3Gxc1m0lc/s1600/layout-vorlagen_transparent.png") no-repeat scroll top right'})
});
</script>
Im Sommer 2015 hat das Layout Überschriften bekommen. Über jedem Bereich, in dem ein Gadget stehen kann, steht nun eine Überschrift. Welche Bedeutung die Überschriften haben, kann derzeit leider nicht generell beantwortet werden; denn je nachdem auf welchem Server ein Blog liegt, werden andere Überschriften angezeigt.<br />
<a name='more'></a><hr />
<h4>
Zwei verschiedene Überschriften-Listen im Einsatz</h4>
Zwei verschiedene Überschriften-Listen kommen alternativ zueinander zum Einsatz:<br />
<ol>
<li>In der einen Liste sind sämtliche Überschriften jeweils die <span style="color: red;"><b>id</b></span> des entsprechenden Abschnitts im HTML</li>
<li>In der anderen sind die wesentlichen Überschriften jeweils der <span style="color: red;"><b>name</b></span> des entsprechenden Abschnitts im HTML und nur Sidebar- und manche Footer-Überschriften sind jeweils die <span style="color: red;"><b>id</b></span> des entsprechenden Abschnitts im HTML</li>
</ol>
<h4>
Überschriften-Liste-2 existiert nur aufgrund eines Fehlers</h4>
Da ein Mix von Bedeutungen keinen Sinn macht und id's von größerem Interesse beim Gestalten von Blogs sind, darf man wohl davon ausgehen, dass Überschriften-Liste-2 nur aufgrund eines Fehlers zusätzlich existiert.<br />
<h5>
Das sind die falschen Überschriften, die keine id's, sondern name's sind:</h5>
<ul>
<li>Navbar</li>
<li>Header</li>
<li>Cross-Column</li>
<li>Cross-Column 2</li>
<li>Main</li>
<li>Footer</li>
</ul>
<h5>
Die entsprechenden id's, also die richtigen Überschriften für diese Abschnitte, sind:</h5>
<ul>
<li>navbar</li>
<li>header</li>
<li>crosscol</li>
<li>crosscol-overflow</li>
<li>main</li>
<li>footer-3</li>
</ul>
<h4>
Fehler unabhängig von der Vorlage </h4>
Dass es daran liegt, auf welchem Server ein Blog liegt, welche Überschriften-Liste angezeigt wird, schließe ich daraus, dass der Fehler nicht von der Vorlage oder Vorlagenvariante abhängig ist. Der Fehler ist an bestimmte Blogs gebunden. Egal welche Vorlage man auf das Blog anwendet, wird in dem Blog immer die gleiche Überschriften-Variante angezeigt. Auf welchem Server die Blogs liegen, hängt auch nicht vom Account ab, sondern wohl davon, wann das Blog eröffnet wurde. Hat man zwei Blogs mit der gleichen Vorlagenvariante zu unterschiedlichen Zeitpunkten eröffnet, kann man in dem einen Blog Überschriften-Liste-1 angezeigt bekommen und im anderen Blog Überschriften-Liste-2.<br />
<h4>
Fehler melden</h4>
Wer die falschen Überschriften in einem Blog hat, sollte das per "Feedback" an Blogger melden. Ansonsten wird der Fehler den Machern möglicherweise nicht so schnell oder nie auffallen. Man muss das falsche Layout geöffnet haben, bevor man auf "Feedback" klickt, damit man im zweiten Schritt einen Abschnitt, in dem der Fehler zu sehen ist, markieren kann.<br />
<h4>
Beispiel-Bilder von den beiden neuen Layout-Varianten </h4>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmnlK9Uz60_1lnxo5WQP2Q3nFMHB71R2tXpywwNjNUBkNq0NqTR-5XFMRcBSr7hXSVuozTJHC3UMRGTZOF-fEVl7ZFfCt7MALWIZLUOZ8Ac3uaDEzg46_M4SigCylXJ_PbI_qStA8WGX-_/s1600/layout_neu_korrekt.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmnlK9Uz60_1lnxo5WQP2Q3nFMHB71R2tXpywwNjNUBkNq0NqTR-5XFMRcBSr7hXSVuozTJHC3UMRGTZOF-fEVl7ZFfCt7MALWIZLUOZ8Ac3uaDEzg46_M4SigCylXJ_PbI_qStA8WGX-_/s400/layout_neu_korrekt.png" width="322" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Neues Layout mit korrekten Überschriften</td></tr>
</tbody></table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-MvPH2voI5wuF4m7kszZFCR2796YtdYI9eAoxFtoRLzCxtVioPMBxmWV8_8LPkIB1xnHXLLvlq144g2gy1dIv0xPct9J9fm80jIyGCjde3PPR7X40HJrVqBJqXwZZIageZwZQd48ZJDeR/s1600/layout_neu_falsch.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-MvPH2voI5wuF4m7kszZFCR2796YtdYI9eAoxFtoRLzCxtVioPMBxmWV8_8LPkIB1xnHXLLvlq144g2gy1dIv0xPct9J9fm80jIyGCjde3PPR7X40HJrVqBJqXwZZIageZwZQd48ZJDeR/s400/layout_neu_falsch.png" width="323" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Neues Layout mit falschen Überschriften</td></tr>
</tbody></table>
<br />
<br />
<address style="color: #cccccc; font-size: 70%;">
Ute Ziemes, sg.utez.de, <time>2015-08-04, Änderung: 2015-08-07</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-84029489665535760932015-08-06T03:15:00.000+02:002016-02-06T08:34:12.236+01:00Farben des Cookie-Hinweises ändern<script type="text/javascript">
$(document).ready(function() {
$('#post-body-8402948966553576093').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNiUIggU6ely4TCaBah8R_SgOtVJ0_mT0zw3yDXReXa5W0B49Llwvx_zdpzTmMyjM7ApWEYrxDFsmBVjDHqsiLtwR2ofLV1H-73UYbZW5HaeP40NM29ZTVGvAK0t2YfZCPwGaBzFGa59X/s1600/layout-und-dynan_transparent.png") no-repeat scroll top right'})
});
</script>
Seit Ende Juli 2015 weist Google in Europa auf den Einsatz von Cookies in Blogger-Blogs durch eine vorgeschaltete Einblendung hin. Am 05. August morgens (5 Uhr MEZ) hat Blogger das HTML und CSS dieser Einblendung nochmal geändert. Auf großen Screens stehen die Links jetzt rechts neben dem Hinweis-Text, bei schmalen Screens stehen sie unterhalb des Hinweis-Textes. Außerdem haben die Links nun keine separate Hintergrundfarbe und keine Rahmen mehr.<br />
<br />
Hier ist das komplette Standard-CSS der zweiten Version der Einblendung notiert und ein Beispiel dazu, wie man zumindest die Farben der Einblendung ändern kann.
<a name='more'></a><hr />
<div class="hervorhebung">
<b>
Je nachdem, ob in einem Blog die Dynamischen Ansichten oder eine Layout-Vorlage im Einsatz ist und je nachdem, ob die Mobil-Vorlage auf "Benutzerdefiniert" gestellt ist, hat man mehr oder weniger Möglichkeiten, die Farben der Cookie-Info-Einblendung in beiden Versionen des Blogs zu ändern.
</b>
</div>
<h4>
Mit den Dynamischen Ansichten:</h4>
<ul>
<li>Farbänderungen gelten nur für die Web-Version, sofern für die Mobil-Vorlage nicht "Benutzerdefiniert" eingestellt ist.</li>
<li>Farbänderungen gelten auch für die Mobil-Version, wenn die Mobil-Vorlage auf "Benutzerdefiniert eingestellt ist.</li>
<li>Separate Farbänderungen für die Mobil-Version sind in keinem Fall möglich.</li>
</ul>
<h4>
Mit einer Layout-Vorlage:</h4>
<ul>
<li>Farbänderungen werden nur wirksam, wenn man den Kommandos jeweils ein !important anhängt.</li>
<li>Farbänderungen gelten nur für die Web-Version, sofern für die Mobil-Vorlage nicht "Benutzerdefiniert eingestellt ist.</li>
<li>Farbänderungen gelten auch für die Mobil-Version, wenn die Mobil-Vorlage auf "Benutzerdefiniert" eingestellt ist.</li>
<li>Separate Farbänderungen für die Mobil-Version sind möglich, wenn die Mobil-Vorlage auf "Benutzerdefiniert" eingestellt ist.</li>
</ul>
<br />
<h4>
Diejenigen Codes aus dem Standard-CSS, die man zur Änderung der Farben nutzen kann:</h4>
Ich habe jeweils mit einer rot gefärbten <b><span style="color: red;">/*CSS-Anmerkung*/</span></b> dazu geschrieben, wofür der jeweilige Code-Abschnitt genutzt werden kann.<br />
<br />
<div class="code">
<code>
<b><span style="color: red;">/*Hintergrund-Farbe der Einblendung*/</span></b><br />
.cookie-choices-info { <br />
background-color: #666;<br />
}<br />
<b><span style="color: red;">/*Text-Farbe des Hinweis-Textes*/</span></b><br />
.cookie-choices-info .cookie-choices-text { <br />
color: #CCC;<br />
}<br />
<b><span style="color: red;">/*Text-Farbe nur des ersten Links oder beider Links*/</span></b><br />
.cookie-choices-info .cookie-choices-button {<br />
color: #EEE;<br />
} <br />
<b><span style="color: red;">/*Text-Farbe nur des zweiten Links, wenn man ihn anders färben will als den ersten*/</span></b><br />
#cookieChoiceDismiss { <br />
color: #EEE;<br />
}
</code>
</div>
<br />
<h4>
Code-Beispiel für eine Änderung </h4>
Für eine <b>Layout-Vorlage</b>, deren Mobil-Vorlage auf <b>"Benutzerdefiniert"</b> eingestellt ist, könnte man beispielsweise das Folgende eintragen, wenn man <b>in den beiden Blog-Versionen unterschiedliche Gestaltungen</b> realisieren will.<br />
<br />
<br />
Unter <b>Vorlage > Anpassen > Erweitert > CSS hinzufügen</b> das Folgende eintragen:
<br />
<br />
<div class="code">
<code>
.cookie-choices-info { <br />
background-color: #000000 !important;<br />
}<br />
.cookie-choices-info .cookie-choices-text { <br />
color: #cccccc !important;<br />
}<br />
.cookie-choices-info .cookie-choices-button {<br />
color: #ffffff !important;<br />
} <br />
#cookieChoiceDismiss { <br />
color: #ffffff !important;<br />
} <br />
<br />
.mobile .cookie-choices-info { <br />
background-color: white !important;<br />
}<br />
.mobile .cookie-choices-info .cookie-choices-text { <br />
color: black !important;<br />
}<br />
.mobile .cookie-choices-info .cookie-choices-button {<br />
color: blue !important;<br />
} <br />
.mobile #cookieChoiceDismiss { <br />
color: red !important;<br />
}
</code>
</div>
<br />
Abschließend auf <b>"Auf Blog anwenden"</b> klicken und warten bis das erledigt ist.
<br />
<br />
<br />
<b>Das Ergebnis in der Mobil-Version des Blogs:</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmyQS5OvUonY9ahHtz5ejedyHc-NrO21mSjVSSde2CvxeMyben8p2ZXlMgT0m7awqiE4aYljc2Z22gmwkOrMYG35cSGNTWqygr0nAvNwl9nW6aqT1v3wGx2qQY3YOYs4eB_heWk0yhJVSc/s1600/cookie-info_farben-geaendert_mobil-version.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmyQS5OvUonY9ahHtz5ejedyHc-NrO21mSjVSSde2CvxeMyben8p2ZXlMgT0m7awqiE4aYljc2Z22gmwkOrMYG35cSGNTWqygr0nAvNwl9nW6aqT1v3wGx2qQY3YOYs4eB_heWk0yhJVSc/s400/cookie-info_farben-geaendert_mobil-version.png" width="400" /></a></div>
<br />
<b>Das Ergebnis in der Web-Version des Blogs:</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2uCGGJ9pc_t0SydPjPXB_IdpPXADvTn5Iyf_6MbHQiE74AMof0UVWbOS9xP9s1R0MNiAlhyjskOqP-jsYrX2NKHRLxDgaSqq5c1-aEdBK4MgbNKOrnbgDZCWSIkKrue2r-bMoKHysPCq2/s1600/cookie-info_farben-geaendert_web-version.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2uCGGJ9pc_t0SydPjPXB_IdpPXADvTn5Iyf_6MbHQiE74AMof0UVWbOS9xP9s1R0MNiAlhyjskOqP-jsYrX2NKHRLxDgaSqq5c1-aEdBK4MgbNKOrnbgDZCWSIkKrue2r-bMoKHysPCq2/s400/cookie-info_farben-geaendert_web-version.png" width="400" /></a></div>
<br />
<h4>
Das komplette Standard-CSS der Cookie-Hinweis-Einblendung</h4>
Will man noch mehr umgestalten, muss man das Konstrukt des Standards kennen.
<div class="code">
<code>
.cookie-choices-info {<br /> position: fixed;<br /> width: 100%;<br /> background-color: #666;<br /> margin: 0px;<br /> left: 0px;<br /> top: 0px;<br /> z-index: 4000;<br /> text-align: center;<br /> color: #FFF;<br /> line-height: 140%;<br /> padding: 10px 0px;<br /> font-family: roboto,Arial;<br />}<br />.cookie-choices-info .cookie-choices-inner {<br /> position: relative;<br /> width: initial;<br /> margin: 0px;<br /> left: 0px;<br /> top: 0px;<br />}<br />.cookie-choices-info .cookie-choices-text {<br /> display: inline-block;<br /> vertical-align: middle;<br /> font-size: 16px;<br /> margin: 10px 20px;<br /> color: #CCC;<br /> max-width: 800px;<br /> text-align: left;<br />}<br />.cookie-choices-info .cookie-choices-buttons {<br /> display: inline-block;<br /> vertical-align: middle;<br /> white-space: nowrap;<br /> margin: 0px 10px;<br />}<br />.cookie-choices-info .cookie-choices-button {<br /> font-weight: bold;<br /> text-transform: uppercase;<br /> white-space: nowrap;<br /> color: #EEE;<br /> margin-left: 8px;<br /> padding: 0px 6px;<br /> text-decoration: none;<br />}
</code>
</div>
<br />
Ohne Standard-CSS, aber auch von Interesse ist, dass man den OK-Link separat ansteuern kann:<br />
<br />
<div class="code">
<code>
#cookieChoiceDismiss { <br />
<br />
}
</code>
</div>
<br />
<br />
<address style="color: #cccccc; font-size: 70%;">
Ute Ziemes, sg.utez.de, <time>2015-08-05, Änderungen: 2015-08-19, 2016-02-06</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-45102978715160264462015-08-03T07:14:00.000+02:002016-02-25T20:52:25.854+01:00Inhalt des Cookie-Hinweises ändern<script type="text/javascript">
$(document).ready(function() {
$('#post-body-4510297871516026446').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNiUIggU6ely4TCaBah8R_SgOtVJ0_mT0zw3yDXReXa5W0B49Llwvx_zdpzTmMyjM7ApWEYrxDFsmBVjDHqsiLtwR2ofLV1H-73UYbZW5HaeP40NM29ZTVGvAK0t2YfZCPwGaBzFGa59X/s1600/layout-und-dynan_transparent.png") no-repeat scroll top right'})
});
</script>
Auf der Blogger-Hilfe-Seite <a href="https://support.google.com/blogger/answer/6253244" target="_blank">Cookies-Benachrichtigung in Ländern der Europäischen Union</a> nennt Blogger leider nur andeutungsweise, wie man den Text und die Link-Titel und das Link-Ziel des Cookie-Hinweises ändern kann.<br />
<br />
Hier findet man das komplette Gerüst des benötigten JavaScript-Codes und die Anleitung wie man ihn einträgt.<br />
<a name='more'></a><hr />
<h4>
Erläuterungen zu dem Hinweis von Blogger:</h4>
<h5>
Wofür "msg, close, learn, link" hier jeweils stehen:</h5>
<ul>
<li>msg ... Hinweis-Text</li>
<li>close ... Text auf Link zum Wegklicken</li>
<li>learn ... Text auf Link zu mehr Info</li>
<li>link ... Ziel-Adresse des Links zu mehr Info</li>
</ul>
<h5>
Ein Script-Tag ist das:</h5>
<div class="code">
<code>
<script type='text/javascript'><br />
<br />
<br />
</script>
</code>
</div>
<br />
<h4>
Das Gerüst des kompletten JavaScript-Codes:</h4>
Das Gerüst des kompletten JavaScript-Codes ist folgend schwarz gefärbt. Die Bereiche, die man durch eigenen Inhalt befüllen kann, sind hier zur abgrenzenden Veranschaulichung inhaltlich angedeutet und rot gefärbt.<br />
<br />
<div class="code">
<code>
<script type="text/javascript"><br />
cookieOptions = {<br />
"msg":"<span style="color: red;">Diese Website verwendet Cookies ... .</span>",<br />
"close":"<span style="color: red;">OK</span>",<br />
"learn":"<span style="color: red;">Weitere Informationen</span>",<br />
"link":"<span style="color: red;">https://www.blogger.com/go/blogspot-cookies</span>"<br />
};<br />
</script>
</code>
</div>
<br />
Wenn die rot gefärbten Bereiche mit dem gewünschten Inhalt befüllt sind, kann man den kompletten Code kopieren und im HTML einfügen. <br />
<br />
<h4>
Dort einfügen</h4>
<br />
Unter <b>Vorlage > HTML bearbeiten</b> muss man den Code zwischen <head> und </head> einfügen, am besten direkt unter <b><head></b>. Abschließend auf <b>"Vorlage speichern"</b> klicken und warten bis das erledigt ist.<br />
<br />
Beim Verlassen des HTML wird evtl. angezeigt, dass es noch ungespeicherte Änderungen geben würde. Das kann man ignorieren.<br />
<br />
Eventuelle Fehler, sofern sie die Codierung betreffen, werden sofort nach dem Speichern angezeigt. Hat man etwas eingetragen, das vom allgemeinen Script für den Cookie-Hinweis nicht unterstützt wird, dann wird der Cookie-Hinweis weiterhin die Standard-Inhalte anzeigen. Man muss sich also an das Raster halten.<br />
<br />
Wenn man das nächste Mal das HTML öffnet, werden die Anführungsstriche vom Programm durch <span style="color: red;"><b>&quot;</b></span> ersetzt worden sein. Es ist dann nicht mehr so übersichtlich, hat aber seine Richtigkeit und das Programm braucht es so.
<br />
<br />
<h4>
Bilder von einem Änderungsbeispiel</h4>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrA31EDqXdxegPxuPu3qzeXcQOzEP18bkeFBufrVZ2VwCeCc1H9_rjgckQ5sU2d5KrVMAklUKs3gkvvtJlKEIkdenejwvPYzuTbgkLvvBXWtsu_mKey0Qo3BrIrINYKdfAAl2DlRFavvn/s1600/cookie-hinweis-einblendung_eigener-inhalt_mobil_low.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="71" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrA31EDqXdxegPxuPu3qzeXcQOzEP18bkeFBufrVZ2VwCeCc1H9_rjgckQ5sU2d5KrVMAklUKs3gkvvtJlKEIkdenejwvPYzuTbgkLvvBXWtsu_mKey0Qo3BrIrINYKdfAAl2DlRFavvn/s400/cookie-hinweis-einblendung_eigener-inhalt_mobil_low.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Inhaltlich <span style="color: #999999; font-size: 70%;">(und farblich)</span> geänderte Cookie-Hinweis-Einblendung - Mobil-Version</td></tr>
</tbody></table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk2znzaZZtfJlM1qKKg9iqe-6F38S54lS67-DHHWkVKQpZRHYof3ia8j8wLlok-z-Rgx4smxCqZdnga-aaxKCD0w1JefzOBLlsUTqL-8WYvCor3WfCtPBZYsjzrTBsviso7B017js0Bz-s/s1600/cookie-hinweis-einblendung_eigener-inhalt_web_low.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk2znzaZZtfJlM1qKKg9iqe-6F38S54lS67-DHHWkVKQpZRHYof3ia8j8wLlok-z-Rgx4smxCqZdnga-aaxKCD0w1JefzOBLlsUTqL-8WYvCor3WfCtPBZYsjzrTBsviso7B017js0Bz-s/s400/cookie-hinweis-einblendung_eigener-inhalt_web_low.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Inhaltlich <span style="color: #999999; font-size: 70%;">(und farblich)</span> geänderte Cookie-Hinweis-Einblendung - Web-Version</td></tr>
</tbody></table>
<br />
<br />
<address>
Ute Ziemes, sg.utez.de, <time>2015-08-03, Änderungen: 2015-08-06 (Bilder ausgetauscht), 2016-02-06 (Adresse und Bilder), 2016-02-25 (Schrägstrich hinter Cookie-Info-Adresse rausgenommen)</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-1833157833324929642015-07-31T23:23:00.000+02:002016-02-06T10:22:28.467+01:00Einblendung des Cookie-Hinweises verhindern<script type="text/javascript">
$(document).ready(function() {
$('#post-body-183315783332492964').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNiUIggU6ely4TCaBah8R_SgOtVJ0_mT0zw3yDXReXa5W0B49Llwvx_zdpzTmMyjM7ApWEYrxDFsmBVjDHqsiLtwR2ofLV1H-73UYbZW5HaeP40NM29ZTVGvAK0t2YfZCPwGaBzFGa59X/s1600/layout-und-dynan_transparent.png") no-repeat scroll top right'})
});
</script>
Seit Juli 2015 hat Google eine Cookie-Hinweis-Einblendung für Blogger-Blogs installiert. Sie ist nun nicht mehr an die Navbar gebunden und wird daher nun auch dann angezeigt, wenn man keine Navbar aktiviert hat. Außerdem wird der Cookie-Hinweis nun auch in der mobilen Version des Blogs angezeigt und auch in den Dynamischen Ansichten. <br />
<br />
Wenn man einen eigenen Cookie-Hinweis realisiert hat, stört die Cookie-Hinweis-Einblendung von Google jedoch.<br />
<a name='more'></a><hr />
<br />
Um zu verhindern, dass der Cookie-Hinweis von Google angezeigt wird, hat man grundsätzlich zwei alternative Möglichkeiten:<br />
<b></b><br />
<ol><b>
<li>JavaScript-Code eintragen</li>
<li>CSS-Code eintragen</li>
</b></ol>
<br />
Ob die hier genannten Codes in beiden Blog-Versionen wirken oder nur in der Web-Version und ob man die Möglichkeit hat, das selbst zu entscheiden, hängt davon ab, ob die Mobil-Vorlage auf "Benutzerdefiniert" eingestellt ist oder nicht und ob das Blog eine Layout-Vorlage nutzt oder die Dynamischen Ansichten. Die meisten Möglichkeiten und besten Ergebnisse hat man in Blogs, die Layout-Vorlagen von Blogger nutzen, deren Mobil-Vorlage auf "Benutzerdefiniert" eingestellt ist.<br />
<br />
<h4>
Einblendung verhindern via JavaScript-Code</h4>
<br />
Der Eintrag des folgenden JavaScript-Codes soll die Einblendung des Cookie-Hinweises sowohl in der Web-Version als auch in der Mobil-Version des Blogs verhindern. Google empfiehlt diesen Code auf seiner Infoseite: <a href="https://support.google.com/blogger/answer/6253244" target="_blank">https://support.google.com/blogger/answer/6253244</a><br />
<br />
Unter <b>Vorlage > HTML bearbeiten</b> direkt unter <b><head></b> das Folgende eintragen:<br />
<br />
<div class="code">
<code>
<script type='text/javascript'><br />
cookieChoices = {};<br />
</script>
</code>
</div>
<br />
Abschließend auf <b>"Vorlage speichern"</b> klicken und warten bis das erledigt ist.<br />
<br />
<b>Für alle Blogger-Vorlagen gilt:</b><br />
Der Code funktioniert nur dann sowohl in der Web-Version als auch in der Mobil-Version, wenn die Mobil-Vorlage des Blogs auf <b>"Benutzerdefiniert"</b> eingestellt ist. Wenn die Mobil-Vorlage <b><span style="color: red;">nicht</span></b> auf <b>"Benutzerdefiniert"</b> eingestellt ist, wird die Einblendung des Cookie-Hinweises in der Web-Version verhindert, aber <b>in der Mobil-Version nach wie vor angezeigt</b>.<br />
<br />
<h4>
Einblendung verhindern via CSS-Code</h4>
<br />
Der Eintrag des folgenden CSS-Code soll ebenfalls die Einblendung des Cookie-Hinweises sowohl in der Web-Version als auch in der Mobil-Version des Blogs verhindern.<br />
<br />
Unter <b>Vorlage > Anpassen > Erweitert > CSS hinzufügen</b><br />
<br />
das Folgende eintragen:<br />
<br />
<div class="code">
<code>
.cookie-choices-info { <br />
display: none;<br />
}
</code>
</div>
<br />
Abschließend oben rechts klicken auf "<b>Auf Blog anwenden</b>" und warten bis das erledigt ist. <br />
<br />
<b>Für alle Blogger-Vorlagen gilt:</b><br />
Auch dieser Code funktioniert nur dann sowohl in der Web-Version als auch in der Mobil-Version, wenn die Mobil-Vorlage des Blogs auf <b>"Benutzerdefiniert"</b> eingestellt ist. Wenn die Mobil-Vorlage <b><span style="color: red;">nicht</span></b> auf <b>"Benutzerdefiniert"</b> eingestellt ist, wird die Einblendung des Cookie-Hinweises in der Web-Version verhindert, aber <b>in der Mobil-Version nach wie vor angezeigt</b>.<br />
<br />
<h5>
<span style="background-color: #eeeeee;">Den Cookie-Hinweis nur in der Mobil-Version anzeigen lassen, obwohl die Mobil-Vorlage auf "Benutzerdefiniert" eingestellt ist:</span></h5>
Dazu muss man zusätzlich zum oben genannten Code auch den folgenden Code eintragen:<br />
<br />
<div class="code">
<code>
.mobile .cookie-choices-info { <br />
display: block;<br />
}
</code>
</div>
<br />
<b>Der Code zeigt jedoch nur dann Wirkung, wenn eine Layout-Vorlage im Einsatz ist.</b> Die Dynamischen Ansichten reagieren in keinem Fall auf Code mit .mobile darin, wenn es um den Cookie-Hinweis geht.
<br />
<br />
<address>
Ute Ziemes, sg.utez.de, <time>2015-07-31, Änderungen: 2015-08-01 (dreimal), 2015-08-02, 2016-02-06 (Adresse)</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-4965834832043194942015-07-31T23:21:00.000+02:002016-02-06T11:36:08.944+01:00Zweck und Wert des Cookie-Hinweises<script type="text/javascript">
$(document).ready(function() {
$('#post-body-496583483204319494').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNiUIggU6ely4TCaBah8R_SgOtVJ0_mT0zw3yDXReXa5W0B49Llwvx_zdpzTmMyjM7ApWEYrxDFsmBVjDHqsiLtwR2ofLV1H-73UYbZW5HaeP40NM29ZTVGvAK0t2YfZCPwGaBzFGa59X/s1600/layout-und-dynan_transparent.png") no-repeat scroll top right'})
});
</script>
Hier steht etwas über die Pflicht, das Einverständnis für das Setzen von Cookies einzuholen, wenn man welche setzen will. Und es steht hier etwas über die Möglichkeiten diese Pflichten zu erfüllen und die Unterstützung, die Blogger dafür bietet.<br />
<a name='more'></a><hr />
<h4>
Die Pflicht</h4>
Die sofortige, auffällige und umfassende Informierung über das Setzen von Cookies ist in der EU von Rechts wegen Pflicht. Eigentlich schon seit spätestens Mai 2011, aber lange hat man sich in der EU schwer damit getan, dieser Pflicht nachzukommen. Mittlerweile ist die Umsetzung der Richtlinie aber in den einzelnen Ländern und bei den Webseitenbetreibern schon sehr weit fortgeschritten. <br />
<br />
Es geht darum, dass man ohne Einverständnis der Nutzer, keine Daten von ihnen sammeln darf. Dazu muss der Nutzer genauestens darüber informiert werden, welche Daten wie gesammelt werden und was damit passiert. Wie das Einverständnis eingeholt werden soll, ist strittig. In der Richtlinie steht, dass man es erst einholen muss, bevor man ein Cookie setzt. In den Eu-eigenen Erläuterungen dazu steht wiederum irgendwo, Einwilligung oder Ablehnung könnte mittels Browsereinstellung mitgeteilt werden.<br />
<br />
Möglichkeiten wären insgesamt:<br />
<ul>
<li>Stillschweigende Zustimmung, indem man die Website weiter nutzt</li>
<li>Stillschweigende Ablehnung, indem man die Website verlässt</li>
<li>Zustimmung via Browser-Einstellung</li>
<li>Ablehnung via Browser-Einstellung</li>
<li>Zustimmung via Klick (Opt-In)</li>
<li>Ablehnung via Klick (Opt-Out)</li>
</ul>
<br />
Bei der Umsetzung der Richtlinie in nationales Recht, zu dem die Länder bis Mai 2011 verpflichtet waren, kamen daher unterschiedliche Lösungen raus und diese können ihrerseits recht schwammig sein. In Deutschland hält man das Telemediengesetz für ausreichend. Danach muss man informieren und - wie auch immer - ermöglichen, der Erstellung und Verwendung eines Nutzungsprofils zu widersprechen. Ein Antrag, Opt-In darin als Pflicht aufzunehmen, ist an Interessen der Wirtschaft gescheitert. <br />
<br />
Da es wohl so ist, dass jeder Anbieter im WWW sich nur dann gegenüber Web-Surfern der verschiedenen Länder rechtlich korrekt verhält, wenn er die jeweilige Regelung des Landes, in dem die Website geöffnet wird, beachtet, müsste man wohl eine Opt-In-Lösung anbieten, weil diese die strengste mögliche Auslegung der Richtlinie ist.<br />
<h5>
Blogger's Hinweis dazu</h5>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy2t3xzcrvV1zjZmFWTXqPk7vqkQ8Xw-lufO7TMju6jLOuKURbUkz5neXNeycusAdmkuxs4c7kTpQOPDkUtWmKLMJvWsBfr907Iom-icaXi_qf3Fy1bZupqbjtOKbVPWBqAEtnXNUHoYQ/s1600/hinweis-in-blog-dashboard-uebersicht.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="92" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy2t3xzcrvV1zjZmFWTXqPk7vqkQ8Xw-lufO7TMju6jLOuKURbUkz5neXNeycusAdmkuxs4c7kTpQOPDkUtWmKLMJvWsBfr907Iom-icaXi_qf3Fy1bZupqbjtOKbVPWBqAEtnXNUHoYQ/s400/hinweis-in-blog-dashboard-uebersicht.jpg" width="400" /></a></div>
<br />
<h4>
Meine Möglichkeiten die Pflicht zu erfüllen</h4>
<h5>
Das kann ich </h5>
Ich kann darüber informieren, dass Cookies gesetzt werden, wenn im Browser deren Akzeptanz eingestellt wurde und, dass man die Einstellung ändern und bereits erhaltene Cookies löschen kann. Und ich kann die genaueren Informationen über Google's Cookies, die Google veröffentlicht hat, verlinken. Ich kann das auch in beiden Blog-Versionen auffällig platzieren.<br />
<h5>
Das kann ich nicht</h5>
Ich sehe für mich keine Möglichkeit, eine andere Art der Einverständniserklärung zu realisieren, als Google sie bietet, also der über die Browsereinstellungen.<br />
<br />
Oder kann man mit einem Script die Google-Routine davon abhalten, schon sofort und weiterhin Cookies zu setzen, wenn eine Adresse aufgerufen wird, die auf Googles Servern liegt? Oder kann man mit einem Script einen Klick anbieten, über den automatisch die Browsereinstellungen geändert werden und bereits eingetragene Cookies gelöscht werden? Kann man mit einem Script die Zugriffe auf das Blog, die aus den Ländern mit strengeren Regeln kommen, verhindern - vor dem Setzen eines Cookies zudem? Ich kann das alles nicht.<br />
<br />
<h4>
Blogger's Unterstützung</h4>
Wer keinen eigenen sofortigen und auffällig platzierten Hinweis über den Einsatz von Cookies realisiert hat, hat mit Blogger's Cookie-Hinweis zumindest schon mal das Grundlegendste, nämlich eine Informierung über den Einsatz von Cookies, Art der Cookies und darüber, wie man deren Einsatz verhindern kann oder sie löschen kann. Zusammen mit den Infos unter "Weitere Informationen" ist das erfüllt.<br />
<br />
Google's Info-Seiten zu Googles Cookies sind aktuell sehr
übersichtlich und verständlich. <span style="font-size: 85%;">(Ein erfreuliches Resultat
der EU-Richtlinie. Vor Jahren habe ich nämlich keine Chance gesehen,
meinen Pflichten in der Datenschutzerklärung nachzukommen. Links zu
Google waren damals wenig hilfreich.)</span><br />
<h5>
Infos zu den Cookies</h5>
Titel: <b>So verwendet Google Cookies</b><br />
<a href="https://www.google.com/policies/technologies/cookies/" target="_blank">https://www.google.com/policies/technologies/cookies/</a> <br />
<h5>
Infos für die Blog-Admins</h5>
Titel: <b>Cookies-Benachrichtigung in Ländern der Europäischen Union</b><br />
<a href="https://support.google.com/blogger/answer/6253244" target="_blank">https://support.google.com/blogger/answer/6253244</a> <br />
<br />
In der Info für die Blog-Admins ist auch ein Hinweis, wie man den Inhalt der Einblendung ändern kann oder die Einblendung verhindern kann. Das ist noch nicht umfassend genug erklärt, aber Tüftler finden es schnell heraus. Das könnte aber auf der Seite noch verbessert werden, dann könnte man sich die Tüftelarbeit und Beratung dazu ersparen.<br />
<br />
Da man mit modernen Browsern das HTML und CSS eines bestimmten Bereichs einer geöffneten Webseite anzeigen lassen kann, kann man auch in Erfahrung bringen, mit welchen CSS-Kommandos man die Gestaltung des Cookie-Hinweis-Einblendung ändern kann. Da die Einblendung eines grauen Balkens doch eine starke Beeinträchtigung des Blog-Designs darstellen kann, wird Blogger vermutlich irgendwann eine bequemere und für alle realisierbare Möglichkeit anbieten, zumindest die Farben zu ändern.<br />
<br />
Noch reagiert die Einblendung aber nicht bei allen möglichen Standardeinstellungen in Blogs auf Veränderungskommandos, wie sie sollte. Da wird also nachgebessert werden müssen.<br />
<br />
Das Script, das in allen Vorlagen verknüpft ist und realisiert, dass in beiden Versionen aller Vorlagen diese Info angezeigt wird, ist übrigens das: <a href="http://sg.utez.de/js/cookiechoices.js" target="_blank">http://sg.utez.de/js/cookiechoices.js</a><br />
<br />
Ob "choices" darauf hindeutet, dass es mal eine andere Wählmöglichkeit als die der stillschweigenden bzw. der über die Browsereinstellung geben wird?<span style="font-size: 85%;"> (Ich schätze, dass Google diesbezüglich nicht vorpreschen wird. Die Anforderungen könnten sich schließlich noch relativieren.)</span><br />
<br />
<h4>
Funktion der Cookie-Hinweis-Einblendung</h4>
Genau wie die alte, hat auch die neue Cookie-Hinweis-Einblendung von Blogger eine reine Informierungsfunktion. Der Klick auf "OK" bedeutet lediglich, dass man den Hinweis gesehen hat, nicht dass man zustimmt.<br />
<br />
Per Klick auf "OK" verschwindet, speziell für diesen Nutzer und für die
Dauer der Sitzung, lediglich die Einblendung des Cookie-Hinweises auf dem
Blog. Dafür wird ein Cookie in den Browser des Nutzers gesetzt, das
festhält, dass auf den Link geklickt (die Einblendung also wahrgenommen) wurde und dies wird dem
Blog signalisiert. Das Cookie ist für die Dauer der Sitzung gültig.
<br />
<br />
Google geht grundsätzlich von einer Zustimmung aus, wenn man in seinen Browsereinstellungen das Setzen von Cookies zulässt. Cookies sind also längst gesetzt, bevor man auf OK klickt und sie verschwinden auch nicht, wenn man das nicht tut oder das Blog verlässt. <span style="font-size: 85%;">(Google wird freiwillig wohl auch nichts anbieten, um blogseits das Cookie-Setzen zu verhindern; schließlich ist das Cookies-Verteilen und Interessen- und Verhalten-Studieren, Grundlage ihres Kerngeschäfts. Da werden sie wohl kaum, wegen irgendwelcher Leute, die ihre Cookieverwaltung nicht im Griff haben, eine Kultur der vorauseilenden Cookievermeidung vorantreiben wollen.)</span><br />
<br />
Der Text der Cookie-Hinweis-Einblendung ist deshalb aber auch irreführend; denn er erweckt den Eindruck, dass man durch Verlassen der Website, das Setzen von Cookies vermeidet, was einer stillschweigenden Zustimmung durch weitere Nutzung entsprechen würde. Google hat beim Öffnen des Blogs aber bereits Cookies gesetzt und entfernt sie auch nicht, wenn man das Blog verlässt. Richtig ist aber, dass Google das Verhalten auf dem Blog nicht weiter analysieren kann, wenn man sich da nicht weiter aufhält.<br />
<br />
<h4>
Makel der Cookie-Hinweis-Einblendung von Blogger</h4><br />
<div class="hervorhebung">
<b>
Wegen des folgend beschriebenen Makels, habe ich mich - überall da, wo es mir möglich ist - gegen die Nutzung der von Blogger vorgefertigten Einblendung auf meinen Blogs entschieden und nutze lieber Gadgets für Kurzhinweise und Link zu meiner Datenschutz-Seite.
</b>
</div>
<br />
Wenn jemand im Browser eingestellt hat, dass er Cookies <b>nicht</b> akzeptiert, kriegt er bei jedem nächsten Seitenaufruf die Cookie-Hinweis-Einblendung erneut angezeigt, weil das Cookie nicht gesetzt werden konnte, das den Klick auf "OK" speichert. Menschen, die auf Ihre Privatsphäre bedacht sind, werden deshalb mit diesen Einblendungen gequält und letztlich wohl vertrieben.<br />
<br />
Da passt Blogger's Cookie-Hinweis-Text, der nahelegt, die Website zu verlassen, wenn man Cookies nicht mag, gut zu. Meinem Text unter "Datenschutz" aber, der auf die Möglichkeit hinweist, im Browser einzustellen, dass Cookies nicht akzeptiert werden sollen, läuft das zuwider.
<br />
<br />
<h4>
Links zum Thema Cookie-Richtlinie:</h4>
<div class="links">
<ul>
<li>2015: <a href="http://www.computerwoche.de/a/cookie-richtlinie-in-europa,2518064#" target="_blank">http://www.computerwoche.de/a/cookie-richtlinie-in-europa,2518064#</a><br />
In dem Artikel ist unten ein Bereich, in dem man per Klick zu jedem der 33 Länder die dort gültigen Regelungen anzeigen lassen kann.</li>
<li>2014-03: <a href="http://www.it-recht-kanzlei.de/cookies-einwilligung-datenschutz.html" target="_blank">Verwendung von Cookies nur noch bei ausdrücklicher Einwilligung der Nutzer?</a></li>
<li>2014-02: <a href="http://spielerecht.de/update-zur-cookie-richtlinie-die-argumentation-der-bundesregierung/" target="blank">Update zur Cookie-Richtlinie: Die Argumentation der Bundesregierung</a> <cite>Konstantin Ewald, 24.02.2014, spielerecht.de</cite></li>
<li>2014-02: <a href="http://www.jurablogs.com/2014/02/07/bundeswirtschaftsministerium-cookie-richtlinie-laengst-deutschland-umgesetzt" target="_blank">http://www.jurablogs.com/2014/02/07/bundeswirtschaftsministerium-cookie-richtlinie-laengst-deutschland-umgesetzt</a></li>
<li>2012-12: <a href="http://rechtsanwalt-schwenke.de/cookie-richtlinie-der-eu-augenwischerei-do-not-track-und-praxisempfehlungen/?utm_source=rss&utm_medium=rss&utm_campaign=cookie-richtlinie-der-eu-augenwischerei-do-not-track-und-praxisempfehlungen" target="_blank">Cookie-Richtlinie der EU - Augenwischerei, Do-Not-Track und Praxisempfehlungen</a> <cite>Thomas Schwenke, 11.12.2012, rechtsanwalt-schwenke.de</cite></li>
<li>2012-10: <a href="http://www.bundestag.de/dokumente/textarchiv/2012/41022790_kw42_angenommen_abgelehnt/209690" target="_blank">Die Beschlüsse des Bundestages am 18. Oktober</a><br />
Achter Abschnitt von unten: "Nutzer-Zustimmung zu Cookies abgelehnt"
</li>
<li>2009: <a href="http://www.spiegel.de/netzwelt/web/cookie-richtlinie-wie-die-eu-internet-nutzer-nerven-will-a-622121.html" target="_blank">http://www.spiegel.de/netzwelt/web/cookie-richtlinie-wie-die-eu-internet-nutzer-nerven-will-a-622121.html</a></li>
</ul>
</div>
<br />
<br />
<address>
Ute Ziemes, sg.utez.de, <time>2015-07-31, Änderung: 2015-08-04 (zweimal), 2015-08-06, 2015-08-07, 2016-02-06</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-64077830459912527532015-06-13T18:42:00.000+02:002016-02-05T21:32:25.565+01:00Kommentare: Anzeige von Profilbild-Platzhaltern unterdrücken<script type="text/javascript">
$(document).ready(function() {
$('#post-body-6407783045991252753').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNiUIggU6ely4TCaBah8R_SgOtVJ0_mT0zw3yDXReXa5W0B49Llwvx_zdpzTmMyjM7ApWEYrxDFsmBVjDHqsiLtwR2ofLV1H-73UYbZW5HaeP40NM29ZTVGvAK0t2YfZCPwGaBzFGa59X/s1600/layout-und-dynan_transparent.png") no-repeat scroll top right'})
});
</script>
Ist ein Blogger-Profil nicht öffentlich oder beinhaltet es kein Profilbild, dann wird ein Platzhalter als Profilbild neben dem Kommentar angezeigt, wenn mit diesem Profil kommentiert wird.
<a name='more'></a> <hr />
<br />
<b>Es gibt zwei verschiedene Platzhalter-Arten.</b> In einem Blog werden nie beide Platzhalter-Arten verwendet, sondern entweder immer die eine Art oder immer die andere Art.<br />
<ul>
<li><img align="middle" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdtwidrxnFOVC5yfbIhx0slAugUzaJsEcp50UImDpyJqJRmc4KSe0SjbWkNWKEJWxh5KOceFn1-4S0RHUS8UH15HAQK4I3oaa6IeImbIxMYgGBFWvYplUB7B8QB30SF3Gk3IiLF0ju7KVG/s1600/avatar-platzhalter_blogger.png" /> Blogger-Logo</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0eQGvzhaZD7VjOWSmnfGutRhxmwaq51Sm_Nc3TwNkx1F59l4AtfpMmFMzEN5t0zFiSB-pHVSrwyFvFcCHd2B8cf2ws3KVtadESfiugxQHdr0zqAxHa9C0ByX0KbqO04_G6qmRepLCDd29/s1600/avatar-platzhalter_anon.png" imageanchor="1"><img align="middle" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0eQGvzhaZD7VjOWSmnfGutRhxmwaq51Sm_Nc3TwNkx1F59l4AtfpMmFMzEN5t0zFiSB-pHVSrwyFvFcCHd2B8cf2ws3KVtadESfiugxQHdr0zqAxHa9C0ByX0KbqO04_G6qmRepLCDd29/s1600/avatar-platzhalter_anon.png" /></a> Anonyme Silhouette</li>
</ul>
<br />
Will man als Blog-Admin die Anzeige von Profilbild-Platzhaltern unterdrücken, während tatsächliche Profilbilder weiterhin neben Kommentaren angezeigt werden, kann man das per CSS realisieren.<br />
<br />
Man gehe zu <b>Vorlage > Anpassen > Erweitert > CSS hinzufügen</b>, trage den unten stehenden passenden CSS-Code ein und klicke dann auf "<b>Auf das Blog anwenden</b>":<br />
<br />
<b>Wenn im Blog das Blogger-Logo als Platzhalter angezeigt wird:</b> <br />
<br />
<div class="code">
<code>
.avatar-image-container img[src="http://img2.blogblog.com/img/b36-rounded.png"] { <br />
display:none;<br />
}</code>
</div>
<br />
<b>Wenn im Blog die anonyme Silhouette als Platzhalter angezeigt wird:</b><br />
<br />
<div class="code">
<code>
.avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] { <br />
display:none;<br />
}</code>
</div>
<br />
<br />
<address style="color: #cccccc; font-size: 70%;">
Ute Ziemes, sg.utez.de, <time>2015-06-13</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com1tag:blogger.com,1999:blog-7887222252923781602.post-19053991974912821822015-02-14T21:34:00.000+01:002016-02-05T21:33:05.943+01:00Lightbox umgestalten<script type="text/javascript">
$(document).ready(function() {
$('#post-body-1905399197491282182').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65BNDIOCvweOSdVHxAJ4o3JjBHr7cwrCIdb45pTvIDnZl3gS28XNTtnil-q6MUUIbnwkWeiTK57CqhrwC9iwPxvNoED8QWiey1A5EaCb4IsolDv30AhLdpPhyGI9IPIxDtTb3Gxc1m0lc/s1600/layout-vorlagen_transparent.png") no-repeat scroll top right'})
});
</script>
Die Lightbox ist das Anzeigefenster, das sich über das Blog legt, wenn man in einer nicht-dynamischen Vorlage ein Bild angeklickt hat, das man in das Blog hochgeladen hatte.
Normalerweise hat die Lightbox einen teiltransparenten dunklen Hintergrund. Unten, in der Bildauswahlleiste ist der Hintergrund schwarz ohne Transparenz.
<br />
<a name='more'></a><hr /> Oben rechts ist ein X, das signalisiert, dass man dort die Lightbox wieder ausblenden kann. Eigentlich kann man egal wohin neben das Bild klicken, damit die Lightbox verschwindet, aber das weiß jemand, der es noch nie ausprobiert hat, nicht. Deshalb ist das Einblenden des X sinnvoll.<br />
<br />
In einem meiner Blogs verhinderte meine Navbarblende, dass man das X in der Lightbox sah, wenn man auf ein Bild geklickt hat. Die Navbarblende wurde dann ebenfalls angezeigt und verdeckte das X. Das passierte nur im geöffneten Post, nicht, wenn man von der Startseite aus auf das Bild klickte. Ich habe überlegt, wie ich die Navbarblende im geöffneten Post unter die Lightbox legen kann. Dabei entstand das Interesse, umgekehrt die Lightbox zu gestalten. Das X auf eine höhere Schicht zu legen oder mit mehr Abstand nach oben zu positionieren.<br />
<br />
Im Quelltext des Blog sieht man das CSS der Lightbox nicht, auch nicht, wenn man den Quelltext erst anzeigen lässt, wenn die Lightbox gerade angezeigt wird.<br />
<br />
<b>Man findet im Quelltext aber den Link zum CSS der Lightbox: <a href="https://www.blogger.com/static/v1/v-css/2392111094-lightbox_bundle.css" target="_blank">https://www.blogger.com/static/v1/v-css/2392111094-lightbox_bundle.css</a> Außerdem kann man das CSS für bestimmte Stellen sehr wohl via Rechtsklick anzeigen lassen, wenn man die Webentwickler-Werkzeuge aktiviert hat und nach dem Rechtsklick auf "Element untersuchen" (Formulierung bei Firefox) klickt. </b>
<br />
<br />
<div class="hervorhebung">
Wenn man weiß, wie die einzelnen Bereiche heißen, kann man für Sie CSS-Kommandos unter <b>Vorlage > Anpassen Erweitert > CSS hinzufügen</b> eintragen. Für die meisten benötigt man das Anhängsel <b><span style="color: red;">!important</span></b>, damit sie wirken können.</div>
<br />
Ich habe hier im Blog jetzt beispielsweise die Lightbox auf eine höhere Schicht gelegt, die Hintegrundfarben für den Hauptabschnitt und für die Bildauswahlleiste geändert, ein kleines Hintergrundbild hinzugefügt, das vermittelt, wo man gerade ist und das X mehr ins Blickfeld gerückt. Außerdem habe ich den Rahmen um die Bilder entfernt und die Farbe der Zahlen über der Bildauswahlleiste der neuen Hintergrundfarbe angepasst und ihre Größe erhöht.<br />
<h4>
Vorher (mit Anzeige für "Element untersuchen")</h4>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI30y_tw56pxADP9c6TPoz4khce8DoP4pDidbrun0B-Ft6f4zHE0PGf3D_7ydUr05oX_LdTXvZ_w47STMJkLtsYQAYUFmPpZadE9eN-0Leg_Om2nK7ZgDMZIzuIzt8nsi3fHkRaHG7zZm8/s1600/vorher_mit_codeanzeige_75proz.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI30y_tw56pxADP9c6TPoz4khce8DoP4pDidbrun0B-Ft6f4zHE0PGf3D_7ydUr05oX_LdTXvZ_w47STMJkLtsYQAYUFmPpZadE9eN-0Leg_Om2nK7ZgDMZIzuIzt8nsi3fHkRaHG7zZm8/s1600/vorher_mit_codeanzeige_75proz.jpg" height="149" width="320" /></a></div>
<br />
<h4>
Nachher (mit Anzeige für "Element untersuchen"</h4>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHLiVGFKrDw8DYuw9MQO29adt4zRooNcjXQ-t2BdSH6Phzv1ztq-mMEeemurOoOHYeLIPBKb_I1Wq4mVlRtJkkYu-179IjQLV1wN_nbm_2xAsr24VhJsSI96_mFgnc6F_RoLuauoNJZBmX/s1600/nachher_mit_codeanzeige_75proz.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHLiVGFKrDw8DYuw9MQO29adt4zRooNcjXQ-t2BdSH6Phzv1ztq-mMEeemurOoOHYeLIPBKb_I1Wq4mVlRtJkkYu-179IjQLV1wN_nbm_2xAsr24VhJsSI96_mFgnc6F_RoLuauoNJZBmX/s1600/nachher_mit_codeanzeige_75proz.jpg" height="149" width="320" /></a></div>
<br />
<h4>
CSS-Code für diese Änderung</h4>
<br />
<div class="code">
<code>/* - - - - - - - - - - - - - - <br />
LIGHTBOX - Anfang<br />
- - - - - - - - - - - - - - */<br />
/* Lightbox allgemein */<br />
.CSS_LIGHTBOX { <br />
z-index:12 !important;<br />
}<br />
/* Hauptbereich */<br />
.CSS_LIGHTBOX_BG_MASK {<br />
background: #ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmaaDO_RqmHiNQchCfgGROZtuD9xUOAj36dDudCIImefQwS84VfUo7psPRQbX95o7PZu9t7BjXk8V8c4nXbQnFBh0b4S4kawssmrNo1ZjlMxAMr40Nj4OmFm5oE8XayWcYJinbXkA4kVgK/s1600/lightbox-hintergrund.png") 5px 15px scroll no-repeat !important; <br />
opacity: 1.0 !important;<br />
filter: alpha(opacity=90) !important;<br />
}<br />
/* X */<br />
.CSS_LIGHTBOX_BTN_CLOSE {<br />
margin-top: 20px;<br />
margin-right: 20px;<br />
}<br />
/* Skalierte Bilder */<br />
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {<br />
outline: 0px solid #ffffff !important;<br />
}<br />
/* Zahlen über Bildauswahlleiste */<br />
.CSS_LIGHTBOX_INDEX_INFO {<br />
color: #000000 !important;<br />
font-size:15px !important;<br />
}<br />
/* Bildauswahlleiste */<br />
.CSS_LIGHTBOX_FILMSTRIP {<br />
background-color: #DFEAF5 !important;<br />
}<br />
/* - - - - - - - - - - - - - - <br />
LIGHTBOX - Ende<br />
- - - - - - - - - - - - - - */</code></div>
<br />
<br />
<address style="color: #cccccc; font-size: 70%;">
Ute Ziemes, sg.utez.de, <time>2015-02-14</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-24078176774693204502015-02-13T02:11:00.000+01:002018-03-25T08:11:10.283+02:00Einzelnen Post-Abschnitt per Klick einblenden und wieder ausblenden<script type="text/javascript">
$(document).ready(function() {
$('#post-body-2407817677469320450').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNiUIggU6ely4TCaBah8R_SgOtVJ0_mT0zw3yDXReXa5W0B49Llwvx_zdpzTmMyjM7ApWEYrxDFsmBVjDHqsiLtwR2ofLV1H-73UYbZW5HaeP40NM29ZTVGvAK0t2YfZCPwGaBzFGa59X/s1600/layout-und-dynan_transparent.png") no-repeat scroll top right'})
});
</script>
Will man, einen bestimmten Post-Abschnitt erst angezeigen lassen, wenn darauf geklickt wird, kann man das mit jQuery, JavaScript, CSS und Div-Containern realisieren. Mit dieser Methode kann man z.B. eigene Übersetzungen oder zusätzliche Details für besonders Interessierte anhängen, ohne, dass die Übersichtlichkeit des Posts leidet. Man kann das selbstverständlich auch auf Seiten und in HTML-Gadgets nutzen, innerhalb von Posts kommt der Bedarf aber wohl häufiger vor.<br />
<a name='more'></a><hr />
<br />
<div class="hervorhebung4">
Das Folgende funktioniert zwar unter der Mobil-Adresse noch, aber unter der Desktop-Adresse nicht mehr. Wieso, weiß ich noch nicht. Stand: 24.03.2018
</div>
<br />
<h4>
Beispiele</h4>
Dieser Satz kann per Klick in Englisch oder in Französich übersetzt werden. Etwas mehr Text und mehr und mehr und noch mehr.
<br />
<br />
<div class="hidden">
<div class="button" id="auf">
English «
</div>
<div class="einausblenden">
This sentence can be translated by clicking in English or in French. Slightly more text and more and more and more.
</div>
<div class="button" id="zu">
» Shut down
</div>
</div>
<div class="hidden">
<div class="button" id="auf">
Français «
</div>
<div class="einausblenden">
Cette phrase peut être traduit en cliquant en anglais ou en français. Un peu plus du texte et plus et de plus en plus.
</div>
<div class="button" id="zu">
» Fermer
</div>
</div>
<br />
Aber nicht nur Texte können einausgeblendet werden, sondern auch Ifames, Bilder oder Tabellen:
<br />
<br />
<div class="hidden">
<div class="button" id="auf">
Iframe «
</div>
<div class="einausblenden">
<iframe height="240" src="https://docs.google.com/file/d/0BxGyLDldtJCRWm5OcG9odkw5NDg/preview" width="100%"></iframe>
</div>
<div class="button" id="zu">
» Schließen
</div>
</div>
<div class="hidden">
<div class="button" id="auf">
Bild «
</div>
<div class="separator einausblenden" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlkNM2TnA9wPvXUhmIa8YwaG87f1gkJZ_MI7TTesefMfUVOzlufwABLMdmteQWz1tbBCzDo5q7smZlUeAw3ql6em5jiOJ2uwy-7q7whlM_aWxXzBa9eKiugJeAVeZxV381LjEDK85GSM3G/s1600/schweifkugel_3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlkNM2TnA9wPvXUhmIa8YwaG87f1gkJZ_MI7TTesefMfUVOzlufwABLMdmteQWz1tbBCzDo5q7smZlUeAw3ql6em5jiOJ2uwy-7q7whlM_aWxXzBa9eKiugJeAVeZxV381LjEDK85GSM3G/s1600/schweifkugel_3.jpg" /></a></div>
<div class="button" id="zu">
» Schließen
</div>
</div>
<div class="hidden">
<div class="button" id="auf">
Bild-Tabelle «
</div>
<div class="einausblenden">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTp_kM0gblK7ubduNz0KUdZklspsr66_ijxIYEUvjvQJIwf254YpLCKvmv6d71VNqg03eLK2YUwqUEyV5M7Ef0kWHWiwt35WfNOErok-bH2iSs0x1HKJ2YBd111tpQnST_3T1_mIg8VC2X/s1600/schweifkugel_14.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTp_kM0gblK7ubduNz0KUdZklspsr66_ijxIYEUvjvQJIwf254YpLCKvmv6d71VNqg03eLK2YUwqUEyV5M7Ef0kWHWiwt35WfNOErok-bH2iSs0x1HKJ2YBd111tpQnST_3T1_mIg8VC2X/s1600/schweifkugel_14.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>Bildunterschrift</b></td></tr>
</tbody></table>
</div>
<div class="button" id="zu">
» Schließen
</div>
</div>
<h4>
Code</h4>
Vier Code-Teile sind nötig, damit man einen Abschnitt erst verbergen, via Klick einblenden und auch wieder ausblenden lassen kann.<br />
<ol>
<li>jQuery</li>
<li>JavaScript</li>
<li>CSS</li>
<li>HTML mit vier verschachtelten Div-Containern, in deren Mitte man den entsprechenden Inhalt stellt.</li>
</ol>
<h5>
jQuery</h5>
<div class="code">
<code><script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script></code></div>
<br />
Dieser Code muss unter <b>Vorlage > HTML bearbeiten</b> direkt über <code></head></code> eingetragen werden.
<br />
<h5>
JavaScript</h5>
<div class="code">
<code><script type='text/javascript'>//<![CDATA[ <br />
$(window).load(function(){<br />
$(".button").click( function() {$(this).parent().toggleClass("click")});<br />
});//]]> <br />
</script></code></div>
<br />
Auch dieser Code muss unter <b>Vorlage > HTML bearbeiten</b> direkt über <code></head></code> eingetragen werden.
<br />
<br />
<div class="hidden">
<div class="button" id="auf">
Screenshot von diesem und dem vorigen Code über <code></head></code> - Anzeigen «
</div>
<div class="einausblenden">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho8XaAo_hdpW-Lk1HbNCJkF3-liG0xtYKroOUB98h49GgTIYvBIqYu6pAnQXgaVIOYyhMx7h_g5dzUZQB8ymsh28r9nm5MkVVB9h3ps9E4bbXOfFOfH0YM_vJayy2OceZfymJV-1sOX_kk/s1600/ein-aus-blenden_jquery-und-javascript.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho8XaAo_hdpW-Lk1HbNCJkF3-liG0xtYKroOUB98h49GgTIYvBIqYu6pAnQXgaVIOYyhMx7h_g5dzUZQB8ymsh28r9nm5MkVVB9h3ps9E4bbXOfFOfH0YM_vJayy2OceZfymJV-1sOX_kk/s1600/ein-aus-blenden_jquery-und-javascript.jpg" height="46" width="400" /></a></div>
</div>
<div class="button" id="zu">
» Ausblenden
</div>
</div>
<h5>
CSS</h5>
<div class="code">
<code>/*Einzelne Postabschnitte einblenden und wieder ausblenden - Anfang*/<br />
.button { <br />
margin:-0.3em 1em 0.3em 1em;<br />
cursor:pointer; <br />
color:#c00; <br />
font-weight:bold; <br />
}<br />
.hidden #auf { <br />
display: block;<br />
text-align:right;<br />
}<br />
.hidden #zu{<br />
display: none;<br />
}<br />
.hidden .einausblenden {<br />
display: none;<br />
}<br />
.click #auf {<br />
display: none;<br />
}<br />
.click #zu {<br />
display: block;<br />
}<br />
.click .einausblenden {<br />
display: block;<br />
}<br />
/*Einzelne Postabschnitte einblenden und wieder ausblenden - Ende*/</code></div>
<br />
Dieser Code kann unter <b>Vorlage > HTML bearbeiten</b> vor bzw. über <code>]]></b:skin></code> eingetragen werden <span style="color: red;">oder</span> unter <b>Vorlage > Anpassen > Erweitert > CSS hinzufügen</b>. Die Farbe des Klicktextes (.button) kann man selbstverständlich ändern.
<br />
<br />
<div class="hidden">
<div class="button" id="auf">
Screenshot von diesem Code über <code>]]></b:skin></code> - Anzeigen «
</div>
<div class="einausblenden">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6vd0xaQbBkIMfhVX_EgifxnOT2WivgKprdZBGnPAKlQAFluSZ1QMk0tJpRFzdG3qrC4o6rr1_l0jqKQvfTzPmYeUYxZuddBJve96Fj2A443k9uxHGZN7q-nfzQPcBgcKVlAqpHCkl8IKb/s1600/ein-aus-blenden_css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6vd0xaQbBkIMfhVX_EgifxnOT2WivgKprdZBGnPAKlQAFluSZ1QMk0tJpRFzdG3qrC4o6rr1_l0jqKQvfTzPmYeUYxZuddBJve96Fj2A443k9uxHGZN7q-nfzQPcBgcKVlAqpHCkl8IKb/s1600/ein-aus-blenden_css.jpg" height="279" width="400" /></a></div>
</div>
<div class="button" id="zu">
» Ausblenden
</div>
</div>
<h5>
HTML</h5>
<div class="code">
<code><span style="color: blue;"><div class="hidden"></span><br /><div class="button" id="auf"><br /><b><span style="color: red;">Klicktext für das Öffnen «</span></b><br /></div><br /><span style="color: blue;"><div class="einausblenden"></span><br /><b><span style="color: orange;">Ein- und ausblendbarer Inhalt.</span></b><br /><span style="color: blue;"></div></span><br /><div class="button" id="zu"><br /><b><span style="color: red;">» Klicktext zum Schließen</span></b><br /></div><br /><span style="color: blue;"></div></span></code></div>
<br />
Dieser Code muss im HTML-Modus des Blogger-Editors in den Post eingetragen werden. Am besten setzt man ihn nach dem Zusammestellen des Postinhalts um den Inhalt der ein- und ausblendbar sein soll (hier orange dargestellt).
<br />
<hr />
<h4>
Ursprüngliche Quelle und Urheber</h4>
<cite>Die Methode fand ich dort vorgestellt: <a href="http://jsfiddle.net/oliverdoetsch/8Tuzy/3/" target="_blank">http://jsfiddle.net/oliverdoetsch/8Tuzy/3/</a><br />
und ist vom gleichen Autor auch dort zu finden: <a href="http://www.5202.de/2011/12/blogger-texte-ein-ausklappen.html" target="_blank">http://www.5202.de/2011/12/blogger-texte-ein-ausklappen.html</a><br />Urheber der wesentlichen Teile des Codes ist somit Oliver Doetsch.</cite><br />
<br />
Den bei ihm angegebenen Code habe ich etwas verändert. Begründung:<br />
<ul>
<li>Die Kurzform des JavaScripts funktioniert nur wenn man den Script-Code unterhalb des auszublenden Abschnitts einträgt. Diese Einschränkung ist nicht nötig. Die Langform des JavaScripts, wie ich sie empfehle, funktioniert auch dann, wenn man sie im Post oberhalb des auszublenden Abschnitts oder gleich oberhalb von </head> einträgt.</li>
<li>Span-Tags ohne Style-Angaben darin werden gelöscht, wenn man im Blogger-Editor zwischen HTML-Modus und Verfassen-Modus wechselt. Man müsste somit immer im HTML-Modus bleiben oder die Span-Tags nach einem Wechsel neu eintragen. Diese Einschränkung kann durch Div-Tags vermieden werden.</li>
<li>Außerdem wollte ich nicht nur Text, sondern auch andere Elemente ein- und ausblenden können, wie Iframes, Bilder und Tabellen. Die schlankste und am simpelsten merkbare Lösung war deshalb ein Div-Tag mit einer Klasse, das ein- und ausgeblendet wird und egal welchen Inhalt haben kann.</li>
</ul>
<br />
Wegen der Änderungen und in Verbindung damit, dass Oliver Doetsch in seinem Blog schreibt, dass er es erlaubt, habe ich hier nicht nur zu ihm verlinkt, sondern auch die Codes notiert.
<br />
<br />
<hr />
<h4>
In den Dynamischen Ansichten muss man etwas anders vorgehen</h4>
Auch in den Dynamischen Ansichten kann man mit der Methode in Posts und Seiten einzelne Abschnitte ein- und ausblenden. Man muss dort aber etwas anders vorgehen.
<h5>jQuery nicht eintragen</h5>
In den Dynamischen Ansichten benötigt man kein jQuery, weil dies bereits implementiert ist. Den jQuery-Code muss man nicht nur nicht eintragen, man darf es auch nicht.
<h5>Den kürzeren JavaScript-Code wählen und im Post unter dem Inhalt eintragen</h5>
In den Dynamischen Ansichten funktioniert weder die längere noch die kürzere JavaScript-Code-Version, wenn man sie unter "HTML bearbeiten" einträgt. Der längere JavaScript-Code funktioniert auch im Post-HTML nicht. Der kürzere JavaScript-Code funktioniert jedoch, wenn man ihn im Post unter dem Inhalt einträgt.
<br />
<br />
<b>Dies ist der kürzere JavaScript-Code:</b>
<br />
<div class="code"><code><script type="text/javascript"><br />$(".button").click( function() {$(this).parent().toggleClass("click")});<br /></script></code></div>
<h5>CSS und HTML genau wie in nicht-dynamischen Vorlagen eintragen</h5>
CSS und HTML werden in den Dynamischen Ansichten genauso eingetragen wie in den nicht-dynamischen Vorlagen.
<br />
<br />
<address style="color: #cccccc; font-size: 70%;">
Ute Ziemes, sg.utez.de, <time>2015-02-13</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-46002565930138413822015-02-10T19:34:00.001+01:002016-02-05T21:34:13.826+01:00Hintergrundbild an Displaygröße anpassen<script type="text/javascript">
$(document).ready(function() {
$('#post-body-4600256593013841382').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNiUIggU6ely4TCaBah8R_SgOtVJ0_mT0zw3yDXReXa5W0B49Llwvx_zdpzTmMyjM7ApWEYrxDFsmBVjDHqsiLtwR2ofLV1H-73UYbZW5HaeP40NM29ZTVGvAK0t2YfZCPwGaBzFGa59X/s1600/layout-und-dynan_transparent.png") no-repeat scroll top right'})
});
</script>
Wenn man ein zu kleines Bild als Hintergrundbild hochgeladen hat, das Bild aber über den ganzen Bildschirm angezeigt werden soll, kann man eine der folgenden beiden Lösungsmöglichkeiten anwenden:<br />
<ol>
<li>Das Bild <b>gegen eine größere Version tauschen</b>, die man im Bildbearbeitungsprogramm erstellt.</li>
<li>Ein <b>CSS-Kommando eingeben</b>, welches das zu kleine Bild proportional stimmig an die Display-Größe anpasst.</li>
</ol>
<b>Hier im Post wird Möglichkeit 2 beschrieben.</b><br />
<a name='more'></a><hr />
<br />
Man gehe zu <b>Vorlage > Anpassen > Erweitert > CSS hinzufügen</b><br />
<br />
und füge hinzu:<br />
<br />
<div class="code">
<code>
body {<br />
background-size: cover;<br />
}
</code>
</div>
<br />
"<b>Auf Blog anwenden</b>" klicken, um den Eintrag zu speichern.
<br />
<br />
<br />
Die aktuellen Versionen der Browser Firefox, Chrome, IE, Opera, Safari interpretieren das CSS-Kommando korrekt.
<br />
<br />
<h4>
In den Dynamischen Ansichten</h4>
Wenn man in den Dynamischen Ansichten ein eigenes Hintergrundbild (nur) für den Body per CSS einträgt, kann man auch dort das oben genannte Kommando nutzen, um ein zu kleines Bild zu stretchen. Eigene Hintergrundilder für den Body sind in den Dynamischen Ansichten jedoch grundsätzlich problematisch, weil sie besonders unter der Ansicht "Sidebar" sehr störend sein können. Wenn Bilder an jeden Screen individuell angepasst werden und man deshalb nicht sicher vorhersehen kann, welcher Bildbereich hinter dem Postbereich von "Sidebar" angezeigt werden wird, ist das Problem besonders groß. Ich rate deshalb vom Stretchen eines Body-Hintergrundbilds in den Dynamischen Ansichten ab.
<br />
<br />
<h4>
Link zum Thema</h4>
<div class="links">
<ul>
<li><a href="http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-size" target="_blank">http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-size</a></li>
</ul>
</div>
<br />
<br />
<address style="color: #cccccc; font-size: 70%;">
Ute Ziemes, sg.utez.de, <time>2015-02-10, Ergänzung: 2016-02-02</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-65251203672180397682015-01-25T17:36:00.001+01:002016-02-02T16:00:30.013+01:00Benutzerdefinierte Mobilvorlage produziert doppelte Anzeige<script type="text/javascript">
$(document).ready(function() {
$('#post-body-6525120367218039768').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyqcVsFryw6IPOPAR9P_9gTyy82fVaJ2q6zXIp1vh0MSrtmsc97VLFRnEpBSsyHNm11woG37IlCHEtIcKJMGQ5Lz7CsBaC447opah2eTq8a51ZLLHgV2dgDPqBt9vuamfS4q8hgg5HWrZz/s1600/dynamische-ansichten_transparent.png") no-repeat scroll top right'})
});
</script>
Wenn man die Mobilvorlage der Dynamischen Ansichten auf "Benutzerdefiniert" stellt, ist der Effekt in Bezug auf das Design zwar prima, aber leider werden dann in der Mobilversion des Blogs alle Inhalte zweimal untereinander gestellt. Hat man sich durch die Startseite oder eine Labelseite gescrollt, beginnt sie darunter nochmal. Das gleiche gilt für Seiten.<br />
<a name='more'></a><hr />
Die Einstellung "Benutzerdefiniert" ist bei den Dynamischen Ansichten also keine brauchbare Option für die Mobilvorlage. Man kann nur die Standard-Mobilvorlage der Dynamischen Ansichten oder eine der anderen Vorlagen wählen. Die Gestaltung der gewählten Mobilvorlage ist ohne die Einstellung "Benutzerdefiniert" via <b>Vorlage > Anpassen > Erweitert > CSS hinzufügen</b> <span style="color: red;"><b>nicht</b></span> möglich.<br />
<br />
Man kann die Standard-Mobilvorlagen jedoch von den Posts und Seiten aus gestalten. Dazu trägt man die notwendigen CSS-Befehle im HTML-Modus des Blogger-Editors über oder unter dem eigentlichen Post- oder Seiteninhalt zwischen Style-Tags ein.<br />
<br />
<div class="code">
<code>
<style type="text/css"><br />
<span style="color: #cccccc;">Kommandos</span><br />
</style>
</code>
</div>
<br />
Man sollte sich jedoch auf die Änderungen beschränken, die einem besonders wichtig sind und ganz bestimmt dauerhaft wichtig bleiben.<br />
<br />
Will man irgendwann die Kommandos ändern, muss man das nämlich in allen Posts und Seiten machen. Wenn man dann mittlerweile hunderte Posts haben sollte, wäre das eine viel zu umfangreiche Arbeit.<br />
<br />
Wenn man die Kommandos, für die man sich entscheidet, unter <b>Einstellungen > Posts und Kommentare > Posts > Vorlage veröffentlichen</b> einträgt und das speichert, werden sie automatisch in alle neuen Posts im Post-HTML eingetragen.<br />
<br />
Trägt man Sie wie folgt ein, dann wird man im Verfassen-Modus des Blogger-Editor sehen können, wo man schreiben kann:
<br />
<br />
<div class="code">
<code>
Hier schreiben<br />
<br /><br />
<br /><br />
<style type="text/css"><br />
<span style="color: #cccccc;">Kommandos</span><br />
</style>
</code>
</div>
<br />
<br />
<address style="color: #cccccc; font-size: 70%;">
Ute Ziemes, sg.utez.de, <time>2015-01-25, Änderung: 2015-02-15</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-13151273001761750882015-01-25T06:24:00.000+01:002016-02-07T12:08:27.999+01:00Bei Drive den Code zum Einbetten einer Datei finden<script type="text/javascript">
$(document).ready(function() {
$('#post-body-1315127300176175088').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNiUIggU6ely4TCaBah8R_SgOtVJ0_mT0zw3yDXReXa5W0B49Llwvx_zdpzTmMyjM7ApWEYrxDFsmBVjDHqsiLtwR2ofLV1H-73UYbZW5HaeP40NM29ZTVGvAK0t2YfZCPwGaBzFGa59X/s1600/layout-und-dynan_transparent.png") no-repeat scroll top right'})
});
</script>
Nutzt man die neue Drive-Oberfläche, dann kommt man so zum Iframe-Code:<br />
<a name='more'></a><hr />
<ol>
<li>Datei muss Freigabe "Alle mit dem Link" haben.</li>
<li>Doppelklick auf die Datei (Achtung: Das Öffnen dauert eventuell etwas.)</li>
<li>Oben rechts auf den Button "In einem neuen Tab öffnen" klicken.</li>
<li>Mittig auf Button "Weitere Aktionen" klicken (Drei Punkte untereinander)</li>
<li>Auf "Element einbetten" klicken</li>
<li>Iframe-Code kopieren</li>
</ol>
Der Code wird im HTML-Modus des Blogger-Editors eingefügt. <br />
<br />
Beispiel für einen solchen Code:<br />
<br />
<div class="code">
<code><iframe src="https://docs.google.com/file/d/0BxGyLDldtJCRWm5OcG9odkw5NDg/preview" width="640" height="480"></iframe></code></div>
<br />
Ich empfehle, den Width-Wert in dem Code auf 100% zu ändern; denn dann ist das Iframe auf keinen Fall breiter als der Post-Bereich.<br />
<br />
<div class="code">
<code><iframe src="https://docs.google.com/file/d/0BxGyLDldtJCRWm5OcG9odkw5NDg/preview" width="100%" height="480"></iframe></code></div>
<h4>
Bilder zu dem Prozess:</h4>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigvBuecy1tMjl_XY5XcDs9trpIPzKHDeLchjbxjHCbfN-TtN1zt6QHKC5kcGT9eEuG4VuMUE_C0AvOql8bG_oWPkziY8cxfoKSzYBOgWBSKZBcMC-hU4kG60Fj3mJ0_6-ZdabiUxYRyRui/s1600/datei-klick.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigvBuecy1tMjl_XY5XcDs9trpIPzKHDeLchjbxjHCbfN-TtN1zt6QHKC5kcGT9eEuG4VuMUE_C0AvOql8bG_oWPkziY8cxfoKSzYBOgWBSKZBcMC-hU4kG60Fj3mJ0_6-ZdabiUxYRyRui/s1600/datei-klick.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Doppelklick auf Datei</td></tr>
</tbody></table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj7OvyKHaQ8TlLdHyMtefmooR_NgAa5QhxdJxOe_LyvrVCd1Y-NKZjvtjeJvMDbV-gTgz20G1J3yjXgP8j7dVj4bRCzJjsM4z2z3OW8BYJKgIA3wtx_2w3mF4W109EAxH4QK9ghPrMlQWt/s1600/in-neuem-tab-oeffnen.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj7OvyKHaQ8TlLdHyMtefmooR_NgAa5QhxdJxOe_LyvrVCd1Y-NKZjvtjeJvMDbV-gTgz20G1J3yjXgP8j7dVj4bRCzJjsM4z2z3OW8BYJKgIA3wtx_2w3mF4W109EAxH4QK9ghPrMlQWt/s1600/in-neuem-tab-oeffnen.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">"In neuem Tab öffnen" klicken</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8VnqL6cntuoo0_n8MG6qY2vel80MkbQZTr-_c1AX166m92-lRFck2Y2MGu-s9LzLOSytScbnrWZnCMIbHfM7pn86yB9c5urEtpHKedoTkYgeZwA0eLDbQ-TDJiMYmGWxe0fA9WQuU8CGf/s1600/einbett-link.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8VnqL6cntuoo0_n8MG6qY2vel80MkbQZTr-_c1AX166m92-lRFck2Y2MGu-s9LzLOSytScbnrWZnCMIbHfM7pn86yB9c5urEtpHKedoTkYgeZwA0eLDbQ-TDJiMYmGWxe0fA9WQuU8CGf/s1600/einbett-link.jpg" height="239" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">"Weitere Aktionen" klicken<br />
"Element einbetten" klicken</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1dv9cCAgNiVGKgH1WIrtXMnP1NSPsQpAVOqrNph-ajMplbK1t6hzNztEu62_Kcy8vao0Jb-7Ko5i-3OfDj1wA8IIin1BhieE7FTEx4GKYjLrNpZS6oaJ98TUmkSJocuzogWjHGnLb6kh7/s1600/iframe-code.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1dv9cCAgNiVGKgH1WIrtXMnP1NSPsQpAVOqrNph-ajMplbK1t6hzNztEu62_Kcy8vao0Jb-7Ko5i-3OfDj1wA8IIin1BhieE7FTEx4GKYjLrNpZS6oaJ98TUmkSJocuzogWjHGnLb6kh7/s1600/iframe-code.jpg" height="146" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Code kopieren</td></tr>
</tbody></table>
<h4>
Ergebnis-Beispiel:</h4>
Wenn man die Maus nahe an die obere rechte Ecke im iframe hält, dann wird die Kommandozeile angezeigt. Man kann zoomen und separat öffnen. Separat geöffnet bietet die dortige Kommandozeile mehr Möglichkeiten.
<br />
<br />
<iframe src="https://docs.google.com/file/d/0BxGyLDldtJCRWm5OcG9odkw5NDg/preview" width="100%" height="480"></iframe>
<br />
<br />
<address style="color: #cccccc; font-size: 70%;">
Ute Ziemes, sg.utez.de, <time>2015-01-25</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-37211594943309796542015-01-23T21:30:00.000+01:002016-02-05T21:35:35.422+01:00Simple-dark ist nicht Travel<script type="text/javascript">
$(document).ready(function() {
$('#post-body-3721159494330979654').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65BNDIOCvweOSdVHxAJ4o3JjBHr7cwrCIdb45pTvIDnZl3gS28XNTtnil-q6MUUIbnwkWeiTK57CqhrwC9iwPxvNoED8QWiey1A5EaCb4IsolDv30AhLdpPhyGI9IPIxDtTb3Gxc1m0lc/s1600/layout-vorlagen_transparent.png") no-repeat scroll top right'})
});
</script>
Das Miniaturbild der Variante "dark" der Vorlage "Simple" ist in der Vorlagenübersicht im Blog-Dashboard mit "Travel" beschriftet. Das kann irritieren.<br />
<a name='more'></a><hr />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNl4TQFw0Pd52LFHbmaq_szuXX8pcSJu329GCtOCIuxN4OzoOWT11GDj-vdhIjU_si5G873raDV8x4dBmisShcYo0L1wCyPZJHZMDid3eCu3BCi_ftQQDbkbqnF32HqtlV2ZojXgqZ2p1O/s1600/2015-01_einfach_simple_dark_150proz_markiert.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNl4TQFw0Pd52LFHbmaq_szuXX8pcSJu329GCtOCIuxN4OzoOWT11GDj-vdhIjU_si5G873raDV8x4dBmisShcYo0L1wCyPZJHZMDid3eCu3BCi_ftQQDbkbqnF32HqtlV2ZojXgqZ2p1O/s1600/2015-01_einfach_simple_dark_150proz_markiert.jpg" height="303" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWEY4GBZc951fRDifZYXAeZ6tbwVGPBcEyleMSKXtZJC3JOUMqegFkwsV1hNR9M5IyG55uDNnNC-PvsopqVOsZ_4rJ6f8C3x6nr4VUk3N4zN886wnBJNfhuFsKkKuvs2shDYGHEcAe0oWo/s1600/2015-01_einfach_simple.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWEY4GBZc951fRDifZYXAeZ6tbwVGPBcEyleMSKXtZJC3JOUMqegFkwsV1hNR9M5IyG55uDNnNC-PvsopqVOsZ_4rJ6f8C3x6nr4VUk3N4zN886wnBJNfhuFsKkKuvs2shDYGHEcAe0oWo/s1600/2015-01_einfach_simple.jpg" height="116" width="400" /></a></div>
<br />
<br />
<address style="color: #cccccc; font-size: 70%;">
Ute Ziemes, sg.utez.de, <time>2015-01-23</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0tag:blogger.com,1999:blog-7887222252923781602.post-26786186826354639692015-01-23T20:31:00.000+01:002016-02-05T21:35:35.409+01:00Namen aller Vorlagen-Varianten<script type="text/javascript">
$(document).ready(function() {
$('#post-body-2678618682635463969').parents('.post-outer').css({'background':'#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65BNDIOCvweOSdVHxAJ4o3JjBHr7cwrCIdb45pTvIDnZl3gS28XNTtnil-q6MUUIbnwkWeiTK57CqhrwC9iwPxvNoED8QWiey1A5EaCb4IsolDv30AhLdpPhyGI9IPIxDtTb3Gxc1m0lc/s1600/layout-vorlagen_transparent.png") no-repeat scroll top right'})
});
</script>
Blogger bietet 7 verschiedene Vorlagen in insgesamt 34 Varianten an. Jede Variante hat einen Namen. Hier sind die Varianten mit Bild und Name gelistet.<br />
<a name='more'></a><hr />
Manche Posts im hiesigen Blog beziehen sich auf eine bestimmte Variante. Hier kann man nachsehen, welche es ist. Gelegentlich wird die Reihenfolge der Varianten, wie man sie unter "Vorlage" vorfindet, von Blogger verändert. Hier wird die Reihenfolge von 2015/01 angezeigt.<br />
<br />
Die Namen der Varianten sieht man bei den nicht-dynamischen Vorlagen übrigens im
Body-Tag als Klasse, solange an der Vorlage nichts Wesentliches geändert wurde, wie
etwa das Hintergrundbild. <br />
<h4>
Awesome AG (Awesome Inc.)</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR9VUgEl0igk3QTNjnYyC_hGmZuqNTPEiO-YtYixRshE_oHrTptBWTj1lvKtehESprR3K662EBpZ4wE1BnBgTRfxRSmCAzEH4E2IbZ4CQ9LcewWW58w3xQqsAReA4ue7eKVo6abyuHWWce/s1600/2015-01_awesome-ag_awesomw-inc.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Awesome-Varianten 2015/01: light, dark, groovy, renewable, artsy, icy" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR9VUgEl0igk3QTNjnYyC_hGmZuqNTPEiO-YtYixRshE_oHrTptBWTj1lvKtehESprR3K662EBpZ4wE1BnBgTRfxRSmCAzEH4E2IbZ4CQ9LcewWW58w3xQqsAReA4ue7eKVo6abyuHWWce/s1600/2015-01_awesome-ag_awesomw-inc.jpg" height="70" title="Awesome-Varianten 2015/01: light, dark, groovy, renewable, artsy, icy" width="400" /></a></div>
<h4>
Bildfenster (Picture Window)</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv991Dbn1JzoVEqReF0_jxWcgCaI4MdkUlZ5Y83z7mtPr62D-AXffL4nxvxNIseKPVNPzUYpldn4lBo_4sC-hHgSQslLt3BWvGtwsJWl8FdMWrbGzVVSnzUu8CNkF11RK_S4TVPYGfO5l4/s1600/2015-01_bildfenster_picture-window.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bildfenster-Varianten 2015/01: shade, open, screen" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv991Dbn1JzoVEqReF0_jxWcgCaI4MdkUlZ5Y83z7mtPr62D-AXffL4nxvxNIseKPVNPzUYpldn4lBo_4sC-hHgSQslLt3BWvGtwsJWl8FdMWrbGzVVSnzUu8CNkF11RK_S4TVPYGfO5l4/s1600/2015-01_bildfenster_picture-window.jpg" height="138" title="Bildfenster-Varianten 2015/01: shade, open, screen" width="400" /></a></div>
<h4>
Dynamische Ansichten (Dynamic Views)</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqtrZFrxN5jTaBIZgNaZaeKTR6Ie3b8nLvKjIAZWWVWngWrO8KazDSRvjqzw0I433M5aRqgUTBjcaedAKkTW2JV8ADAdV3P27n4tM3LIfmDqnTEn7XZyrg9WKd7t0LFz9H4tVu5NDPOvu1/s1600/2015-01_dynamische-ansichten_dynamic-views.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Dynamsiche-Ansichten-Varianten 2015/01: Classic, Flipcard, Magazine, Mosaic, Sidebar, Snapshot, Timeslide" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqtrZFrxN5jTaBIZgNaZaeKTR6Ie3b8nLvKjIAZWWVWngWrO8KazDSRvjqzw0I433M5aRqgUTBjcaedAKkTW2JV8ADAdV3P27n4tM3LIfmDqnTEn7XZyrg9WKd7t0LFz9H4tVu5NDPOvu1/s1600/2015-01_dynamische-ansichten_dynamic-views.jpg" height="113" title="Dynamische-Ansichten-Varianten 2015/01: Classic, Flipcard, Magazine, Mosaic, Sidebar, Snapshot, Timeslide" width="400" /></a></div>
<h4>
Einfach (Simple)</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTJGl82onSAwM4rIEO5waRupQsXMAYOiO4g_EJfJNmtUsFzN-FxFtRA_Z3iOvcELiEQ-aQudd5YCvJhCf8VVY78a6xPBdlDRnOwtz6ffZohoaagGrMaophh9g2ESom6Jmi_xhMON-QpM27/s1600/2015-01_einfach_simple.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Einfach-Varianten 2015/01: bold, simplysimple, pale, dark, deep, literate, wide" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTJGl82onSAwM4rIEO5waRupQsXMAYOiO4g_EJfJNmtUsFzN-FxFtRA_Z3iOvcELiEQ-aQudd5YCvJhCf8VVY78a6xPBdlDRnOwtz6ffZohoaagGrMaophh9g2ESom6Jmi_xhMON-QpM27/s1600/2015-01_einfach_simple.jpg" height="116" title="Einfach-Varianten 2015/01: bold, simplysimple, pale, dark, deep, literate, wide" width="400" /></a></div>
<h4>
Fantastisch (Ethereal)</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Zh7Wi46sz9L-_lKo-3SedcQUDIWmPklzdcyiAx3H2qOlMP5fSan5L7yrFuJvfF3tpm8vmxykAi3SHmWmnrAJ-7SrPYyVUkx3KgmZ2C3Gj25ObSfyp8WlpDftryulinaUyaYorwImJ4RG/s1600/2015-01_fantastisch_ethereal.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Fantastisch-Varianten 2015/01: hummingBirds2, blossoms1Blue, leaves1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Zh7Wi46sz9L-_lKo-3SedcQUDIWmPklzdcyiAx3H2qOlMP5fSan5L7yrFuJvfF3tpm8vmxykAi3SHmWmnrAJ-7SrPYyVUkx3KgmZ2C3Gj25ObSfyp8WlpDftryulinaUyaYorwImJ4RG/s1600/2015-01_fantastisch_ethereal.jpg" height="135" title="Fantastisch-Varianten 2015/01: hummingBirds2, blossoms1Blue, leaves1" width="400" /></a></div>
<h4>
Reise (Travel)</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHlH9EeJFn7EmJB2FV8iK5jRNo-ckSOJR64z1w09SO6_zsL4C4xvj9nm8nauG3VkOtCkKtvOu0HI5bckUV-Dkr7p7zqS-koLPAYJ8JFCxhVnm6H3o9PkLFGcb8AUGDDOLNGQrNS7dpOuJZ/s1600/2015-01_reise_travel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Reise-Varianten 2015/01: studio, flight, beach, road" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHlH9EeJFn7EmJB2FV8iK5jRNo-ckSOJR64z1w09SO6_zsL4C4xvj9nm8nauG3VkOtCkKtvOu0HI5bckUV-Dkr7p7zqS-koLPAYJ8JFCxhVnm6H3o9PkLFGcb8AUGDDOLNGQrNS7dpOuJZ/s1600/2015-01_reise_travel.jpg" height="101" title="Reise-Varianten 2015/01: studio, flight, beach, road" width="400" /></a></div>
<h4>
Wasserzeichen (Watermark)</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvqq5AYefM_fCJu7fLTrzATwe0y2_U0VMq1V0ZmyurEQ4LWNRj8OxL8b2wZinZRV9zxwwHVMYln0kQT3V28jlJWJz20vDZvJ5QVynWSMeicYLfCrWYa1210lU43hbUvKqblu9ZgwRyHXrH/s1600/2015-01_wasserzeichen_watermark.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Wasserzeichen-Varianten 2015/01: navigator, birds, flower, bubblegum" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvqq5AYefM_fCJu7fLTrzATwe0y2_U0VMq1V0ZmyurEQ4LWNRj8OxL8b2wZinZRV9zxwwHVMYln0kQT3V28jlJWJz20vDZvJ5QVynWSMeicYLfCrWYa1210lU43hbUvKqblu9ZgwRyHXrH/s1600/2015-01_wasserzeichen_watermark.jpg" height="105" title="Wasserzeichen-Varianten 2015/01: navigator, birds, flower, bubblegum" width="400" /></a></div>
<br />
<br />
<address style="color: #cccccc; font-size: 70%;">
Ute Ziemes, sg.utez.de, <time>2015-01-23</time>
</address>
Ute Ziemeshttp://www.blogger.com/profile/02821808849777146937noreply@blogger.com0