Tech Help Blog: CSS3

Blogger ! Lange Posts kürzen

Aktuell muss ich feststellen das Blogger zwar sehr fortschrittlich ist was web-techniken angeht. Es dennoch nicht möglich ist ohne eingriff in den Quellcode einen zu Langen Blog Posts zu kürzen ,beispielsweise durch einen "read more!" Button.

Nun habe ich mich erkundigt und beim Google Support eine lösungs-möglichkeit gefunden.

Als ersten nun sollte man im Blogger Administrations- Menü unter Design / HTML bearbeiten auswählen. Anschließend sollte nicht vergessen werden "Widget vorlage komplett anzeigen" auszuwählen.

Nun kann man auch schon beginnen seinen Qulltext zu bearbeiten.

Schritt 1 (Integration Css code)

(for classic templates)

<MainOrArchivePage> 
   span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage> 
   span.fullpost {display:inline;} 
</ItemPage>

(for layouts)

<b:if cond='data:blog.pageType == "item"'> 
   span.fullpost {display:inline;}
<b:else/>
   span.fullpost {display:none;} 
</b:if>

Diesen Code müsst ihr in den style tag eures themes (Layout) einfügen.
Also zwischen die <style> & </style> tags.

Schritt 2 ("Read More" Link)
(for classic templates)

<MainOrArchivePage><br />
   <a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>

(for layouts)

<b:if cond='data:blog.pageType != "item"'><br />
   <a expr:href='data:post.url'>Read more!</a>
</b:if>

Diesen code muss man nach dem <$BlogItemBody$> oder <data:post.body/> tag einfügen. Das ganze sollte dann wie folgt aussehen.

Schritt 3 ("Post" Bearbeitung)

Mit dieser Variante lasen sich alle post individuell kürzen. Einfach den gewünschten Teil den man auf der Startseite "Abschneiden möchte" in folgender <span class="fullpost"></span> tag einfüge. Blogger wird den post nur bis zur anfangs stelle des <span> tags darstellen.

Image decoration using CSS3

Dark-Stamp

outline: 1px solid #111;
border-top: 1px solid #555;
padding: 10px;
background: #333;width:250px;

Soft-Stamp

outline: 1px solid #111;
border-top: 1px solid #555;
padding: 10px

Softer-Stamp

outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;

Round-Stamp

outline: 1px solid #111;
border-top: 1px solid #555;
padding: 10px;
background: #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

Web Fonts mit @font-face in CSS3 usign Google API

Die Idee das dass Schriftarten Server seitig intrigiert werde ist schon etwas älter . Mit CSS3 und @font-face ist dies nun aber möglich, es kommt aber noch zu erheblichen Kompatibilitäts-Problemen. Abhilfe schafft hier die Google Font API.

http://code.google.com/webfonts

zuerst lade ich eine Schriftart via CSS im header meiner Seite

(bsp. die Schriftart "Cantarell" )

http://code.google.com/webfonts/family?family=Cantarell#code

<link href=' http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>

Nun kann man schon seinen CSS Code bearbeiten und die Font Intrigieren

h1 { font-family: 'Cantarell', arial, serif; }

Das wahr eigentlich auch schon alles sollte mit Goolge ohne Probleme laufen. Eine weitere Variante wäre der Google WebFont Loader der dies mit einem Java Script löst.

   
<html>
  <head>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Tangerine', 'Cantarell' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
    <style type="text/css">
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
    </style>
  </head>
  <body>
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>
  </body>
</html>

Nun kann man auch hier beginnen die Font via CSS zu laden. In diesem Fall bringt uns Google 2 classen mit wf-inactive and wf-active.

<style type="text/css">
  .wf-inactive p { // Show paragraphs in serif font until fonts have loaded.
    font-family: serif
  }
  .wf-active p { // Show paragraphs in Tangerine when the fonts have loaded.
    font-family: 'Tangerine', serif
  }
  .wf-inactive h1 { // Show heading in serif font until fonts have loaded.
    font-family: serif;
    font-size: 16px
  }
  .wf-active h1 { // Show heading in Cantarell when the fonts have loaded.
    font-family: 'Cantarell', serif;
    font-size: 16px
  }
</style>

Blogger ! Lange Posts kürzen

Image decoration using CSS3

Web Fonts mit @font-face in CSS3 usign Google API

Recent posts

Tag's