Blogpost_Test.user.js

// ==UserScript==
// @name         Blogpost Test
// @namespace    https://exensio.de/home
// @version      0.1
// @description  Erstelle einen Button der die Informationen des neuesten Blogpost anzeigt.
// @author       exensio GmbH
// @match        https://exensio.de/home
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net
// @require      http://code.jquery.com/jquery-3.4.1.min.js
// @require      https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js
// @resource     bootstrap_css https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css
// @grant        GM_getResourceText
// @grant        GM_addStyle
// ==/UserScript==



(function() {
    'use strict';

    // To import the css we need the following 2 lines
    const my_css = GM_getResourceText("bootstrap_css");
    GM_addStyle(my_css);

    var firstBlogPostContent = $('div.mod_newslist .block div[class^="newsteaser"]').first();
    var dateContent = firstBlogPostContent.find('div[itemprop="datePublished"]');
    var date = dateContent.find('span.day').text() + " " + dateContent.find('span.month').text() + ". " + dateContent.find('span.year').text();

    var title = firstBlogPostContent.find('span.title').text();
    var titleLink = firstBlogPostContent.find('span.title a').attr('href');

    var author = firstBlogPostContent.find('span[itemprop="author"]').text();

    // Add popover layout to webside
    $('nav.mod_navigation ul').prepend('<li class="float_left floatbox sibling">' +
                                      '<ol class="inner">' +
                                        '<li class="mlist regular active float_left first mm-selected Selected">' +
                                          '<a data-toggle="popover-click" data-type="document" data-trigger="click" href="javascript:void(0);" class="a-level_1 regular active float_left first"><span>Klick mich</span></a>' +
                                        '</li>' +
                                      '</ol>' +
                                    '</li>')

    // Create popover event and add the both links
    $('a[data-toggle="popover-click"]').popover({
                html: true,
                trigger: 'click',
                delay: { "hide": 100 },
                placement: 'bottom',
                content: function () {
                    return '<div>Datum: ' +
                                date +
                             '</div>' +
                             '<div class="text-truncate">Title:  ' +
                                '<a href="' + titleLink + '" class="ml-1 text-nowrap" target="_blank">' + title + '</a>' +
                             '</div>'+
                             '<div>Author: ' +
                                author +
                             '</div>';
                }
            });
})();