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>