Peter Gyger online

"Gring ache u seckle" (Quelle: A. Weyermann)

NAVIGATION - SEARCH

Blogengine: Anpassungen / Ergänzungen mit Web Code

Der technische Hintergrund des Blogs ist die Blogengine. Die Blogartikel kann ich über eine Textverarbeitung wie Word erstellen und direkt uploaden. Alternativ kann ich direkt mit HTML die Website erstellen. Sowohl direkt oder über upload des Sourcecodes, was ich i.d.R. tue. Ich erstelle den Code mit "Visual Studio Code".

Da ich nur von Zeit zu Zeit mit HTML programmiere, habe ich die Funktionen die ich in der Blogengine verwende, in Sinne eines Notizzettels hier zusammen getragen.

Bilder einbinden

Wie in der klassichen Webprogrammierung binde ich sie über das IMG Statment ein. Onedrive bietet eine komfortable Möglichkeit Bilder freizugeben und autmatisch die Parameter für das IMG Statment zu generieren.

@jannismeierhofer THX für den Tip!  :-)

 

HTML

Beispiele Schrift ändern

Variante 1

<span style="margin: 0px; color: black; font-family: 'Verdana',sans-serif; font-size: 7.5pt;">.</span>

Variante 2

<a href="https://unbekannt.net" target="_blank">blabla</a>

Variante 3

<span style="color: #0000ee; font-family: Calibri, sans-serif;"><span style="text-decoration: underline;">

Variante 4

<h2 style="background-color: #94d0aa;">blabla</h2>

 

Dokumentverweise

Anker:

Der Anker wird in einen Tag eingebettet. Er wird mit dem Prefix "id" eingeleitet, danach in Anführungs und Endzeichen der Schlüsselbegriff.

 <h2 id="anker1">Untergeordneter Titel</h2>

Verweis:

 <a href="#anker1">Beispiel Text</a>

 

HTML5 

Auch HTML 5 Elemente wie "Figure" werden unterstützt. Diese verwende ich z.B. für Bildunterschriften.

<figure style="text-align: center; cpadding: 10px;">
<img title="Bild 1" [URL] /> 
<figcaption>Bild 1</figcaption>
</figure>

 

Fussnote

Mit der Tabellenfunktion blende ich am Ende des Dokumentes Informationen zum Dokument ein. Diesen Code verwende ich als Templat.

<div>

<table style="border-collapse: collapse;" border="0"><colgroup><col style="width: 83px;" /><col style="width: 143px;" /></colgroup>

<tbody valign="top">

    <tr style="background: #a5a5a5;">

        <td style="padding-left: 7px; padding-right: 7px; border-top: solid #a5a5a5 1.0pt; border-left: solid #a5a5a5 1.0pt;">

        <p style="margin-left: 14pt;"><span style="color: white;"><strong>ELEMENT</strong></span></p>

        </td>

        <td style="padding-left: 7px; padding-right: 7px; border-top: solid #a5a5a5 1.0pt; border-right: solid #a5a5a5 1.0pt;">

        <p style="margin-left: 14pt;"><span style="color: white;"><strong>Wert</strong></span></p>

        </td>

        </tr>

        <tr>

        <td style="padding-left: 7px; padding-right: 7px; border-left: solid #a5a5a5 1.0pt;">

        <p style="margin-left: 14pt;">Erstellt</p>

        </td>

        <td style="padding-left: 7px; padding-right: 7px; border-right: solid #a5a5a5 1.0pt;">

        <p style="margin-left: 14pt;">23.1.2015</p>

        </td>

        </tr>

        <tr>

        <td style="padding-left: 7px; padding-right: 7px; border-left: solid #a5a5a5 1.0pt;">

        <p style="margin-left: 14pt;">Letzte &Auml;nderung</p>

        </td>

        <td style="padding-left: 7px; padding-right: 7px; border-right: solid #a5a5a5 1.0pt;">&nbsp;</td>

    </tr>

    <tr>

        <td style="padding-left: 7px; padding-right: 7px; border-left: solid #a5a5a5 1.0pt;">

        <p style="margin-left: 14pt;">ID</p>

        </td>

        <td style="padding-left: 7px; padding-right: 7px; border-right: solid #a5a5a5 1.0pt;">&nbsp;</td>

        </tr>

        <tr>

        <td style="padding-left: 7px; padding-right: 7px; border-left: solid #a5a5a5 1.0pt;">

        <p style="margin-left: 14pt;">Kategorie</p>

        </td>

        <td style="padding-left: 7px; padding-right: 7px; border-right: solid #a5a5a5 1.0pt;">

        <p style="margin-left: 14pt;">Microsoft</p>

        </td>

    </tr>

    <tr>

        <td style="padding-left: 7px; padding-right: 7px; border-left: solid #a5a5a5 1.0pt;">

        <p style="margin-left: 14pt;">Tag</p>

        </td>

        <td style="padding-left: 7px; padding-right: 7px; border-right: solid #a5a5a5 1.0pt;">&nbsp;</td>

        </tr>

        <tr>

        <td style="padding-left: 7px; padding-right: 7px; border-left: solid #a5a5a5 1.0pt; border-bottom: solid #a5a5a5 1.0pt;">

        <p style="margin-left: 14pt;">Autor</p>

        </td>

        <td style="padding-left: 7px; padding-right: 7px; border-bottom: solid #a5a5a5 1.0pt; border-right: solid #a5a5a5 1.0pt;">&nbsp;</td>

    </tr>

</tbody>

</table>

/div>

 

 

CSS

Einzelne CSS Statments können direkt mit dem HTML Tag gesetzt werden: 
"<p style="text-align: center; cpadding: 10px;">"

 

ASP.NET

Die Blogengine ist mit ASP.NET programmiert. D.h. man kann in gewissem Umfang die Konfiguration ändern. Konkretes Beispiel:

Auf der Startseite des Bloges, kann ich rechts vom Titel ("Grind abe...") Links einblenden. Z.B. zu Social Media Sites mit dem entsprechenden Logo. Dazu muss ich im Verzeichnis des Templates - hier "FlatBlog" - die Datei "site.master" anpassen. Genauer gesagt, im Abschnitt "Second-Line" muss folgender massen angepasst werden, damit Links zu Facebook / Twitter mit Logo angezeigt werden:

            <div class="Second-Line">
                <div class="Container">
                    <hgroup class="Blog-Title">
                        <h1><a href="<%=Utils.AbsoluteWebRoot %>"><%=BlogSettings.Instance.Name %></a></h1>
                        <h2><%=BlogSettings.Instance.Description %></h2>
                    </hgroup>
                    <nav class="Blog-Social">
                        <ul>
                            <li><a href="http://is.gd/fbookpg" target="_blank"><img src="http://www.petergyger.net/blogengine/themes/FlatBlog/img/facebook.png" /></a></li>
                            <li><a href="http://is.gd/twitterpg" target="_blank"><img src="http://www.petergyger.net/blogengine/themes/FlatBlog/img/twitter.png" /></a></li>
                        </ul>
                    </nav>
                </div>
            </div>

 

 

 

 

 

 

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading