Beauty

Widżet Najnowsze Posty dla Bloggera z miniaturami w kółeczkach


Zobacz demo

Umieszczanie widżetu na Bloggerze 

Zaloguj się do panelu admina, wejdź w menu Układ i dodaj gadżet tam, gdzie chcesz, by wyświetlał się widżet.
Wybierz HTML/JavaScript.
W tytule możesz napisać Najnowsze Posty, lub inny własny tekst, a w treści wklej skopiowany kod widżetu. Na koniec Zapisz.

Kod widżetu

<script style="text/javascript">
function showlatestpostswiththumbs(json) {
    document.write('<ul class="recent-posts-container">');
    for (var i = 0; i < posts_no; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var postsurl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                var commentstext = entry.link[k].title;
                var commentsurl = entry.link[k].href;
            }
            if (entry.link[k].rel == 'alternate') {
                postsurl = entry.link[k].href;
                break;
            }
        }
        var recenthumb;
        try {
            recenthumb = entry.media$thumbnail.url;
        } catch (error) {
            s = entry.content.$t;
            a = s.indexOf("<img");
            b = s.indexOf("src=\"", a);
            c = s.indexOf("\"", b + 5);
            d = s.substr(b + 5, c - b - 5);
            if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
                recenthumb = d;
            } else recenthumb = 'http://2.bp.blogspot.com/-M297yON1Bgk/U7a7d75ygaI/AAAAAAAADMY/sonubx-DZRY/s250/no_image.png';
        }
        var postdate = entry.published.$t;
        var showyear = postdate.substring(0, 4);
        var showmonth = postdate.substring(5, 7);
        var showday = postdate.substring(8, 10);
        var monthnames = new Array();
        monthnames[1] = "Styczeń";
        monthnames[2] = "Luty";
        monthnames[3] = "Marzec";
        monthnames[4] = "Kwiecień";
        monthnames[5] = "Maj";
        monthnames[6] = "Czerwiec";
        monthnames[7] = "Lipiec";
        monthnames[8] = "Sierpień";
        monthnames[9] = "Wrzesień";
        monthnames[10] = "Październik";
        monthnames[11] = "Listopad";
        monthnames[12] = "Grudzień";
        document.write('<li class="recent-posts-list">');
        if (posts_date == true) document.write('<div class="post-date">' + monthnames[parseInt(showmonth, 10)] + ' ' + showday + ' ' + showyear + '</div>');
        if (showpoststhumbs == true)
            document.write('<a href="' + postsurl + '"><img class="recent-post-thumb" src="' + recenthumb + '"/></a>');
        document.write('<div class="recent-post-title"><a href="' + postsurl + '" target ="_top">' + posttitle + '</a></div>');
        var posts_details = '';
        var flag = 0;
        document.write('<div class="recent-posts-details">');
        if (showcommentslink == true) {
            if (flag == 1) {
                posts_details = posts_details + ' <br> ';
            }
            if (commentstext == '1 Comments') commentstext = '1 Komentarz';
            if (commentstext == '0 Comments') commentstext = 'Brak komentarzy';
            commentstext = '<a href="' + commentsurl + '" target ="_top">' + commentstext + '</a>';
            posts_details = posts_details + commentstext;
            flag = 1;;
        }
        if (readmorelink == true) {
            if (flag == 1) posts_details = posts_details + ' | ';
            posts_details = posts_details + '<a class="readmorelink" href="' + postsurl + '" class="url" target ="_top">Czytaj dalej</a>';
            flag = 1;;
        }
        document.write(posts_details);
        document.write('</div>');
        document.write('</li>');
    }
    document.write('</ul>');
}
</script>

<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>

<noscript>Twoja przeglądarka nie obsługuje wtyczki JavaScript!</noscript>

<link href="http://fonts.googleapis.com/css?family=Exo+2&subset=latin,latin-ext" rel="stylesheet" type="text/css" />

<style type="text/css">
img.recent-post-thumb {
    width: 50px;
    height: 50px;
    float: right;
    margin: -4px -35px 0px 0px;
    border: 4px solid #FCD6CB;
    border-radius: 100%;
}

.recent-posts-container {
    font-family: 'Exo 2', sans-serif;
    float: left;
    width: 100%;
    min-height: 55px;
    margin: 5px 0px 5px 0px;
    padding: 0;
    font-size: 12px;
}

ul.recent-posts-container {
    counter-reset: countposts;
    list-style-type: none;
    background: #fff;
}

ul.recent-posts-container li:before {
    content: counter(countposts,decimal);
    counter-increment: countposts;
    z-index: 999;
    position: relative;
    left: -30px;
    top: 50px;
    font-size: 16px;
    color: #616662;
    background: #FCD6CB;
    padding: 15px 20px;
    border-radius: 100%;
}

ul.recent-posts-container li {
    padding: 5px 0px;
    min-height: 50px;
    list-style-type: none;
    margin: -2px 5px 5px 5px;
    border-top: 2px solid #FCD6CB;
}

ul.recent-posts-container {
    border: 2px solid #FCD6CB;
}

.recent-posts-container a {
    text-decoration: none;
}

.recent-posts-container a:hover {
    color: #222;
}

.post-date {
    color: #e0c0c6;
    font-size: 11px;
    margin-left: 50px;
}

.recent-post-title a {
    font-size: 14px;
    color: #616662;
}

.recent-post-title {
    padding: 6px 0px;
    margin-left: 50px;
}

.recent-posts-details a {
    color: #888;
}

.recent-posts-details {
    padding-bottom: 5px;
    margin-left: 50px;
}

a.readmorelink {
    color: #4DACE3;
}
</style>

Instagram