2014/12/10

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>

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.