Css

Jquery

Html

Result

Show Result

onLoadNo wrap - in </head>No wrap - in </body>jQuery 1.11.0jQuery 1.10.1jQuery 1.9.1jQuery 1.8.3jQuery 1.7.2jQuery 1.6.4No-Library (Pure JS)

Edit in JSFiddle

xxxxxxxxxx

 

​

https://example.com/style.css X

li.updated { list-style: none; height:60px; overflow:hidden; font-size:80% } .thumbnail-updated { float:left; margin:5px 10px 0 5px } .tanggalnya { display:block; font-size:90% }

 

1

li.updated {

2

    list-style: none;

3

    height:60px;

4

    overflow:hidden;

5

    font-size:80%

6

}

7

.thumbnail-updated {

8

    float:left;

9

    margin:5px 10px 0 5px

10

}

11

.tanggalnya {

12

    display:block;

13

    font-size:90%

14

}

xxxxxxxxxx

 

​

https://example.com/script.js X

function updatedPosts(a) { if (document.getElementById("posts-updated")) { var e = a.feed.entry, title, img, link, date, content = "", ct = document.getElementById("posts-updated"); for (var i = 0; i < 7; i++) { for (var j = 0; j < 7; j++) { if (e[i].link[j].rel == "alternate") { link = e[i].link[j].href; break } } var title = e[i].title.$t, pd = e[i].published.$t.substring(0, 10), date = pd.replace(/-/g, "/"); if ("media$thumbnail" in e[i]) { img = e[i].media$thumbnail.url } else { img = "https://cdn.staticaly.com/gh/idtutorplus/images/b085015c/no-images.gif" } content += '<li class="updated"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="thumbnail-updated" alt="thumb" height="40px" width="40px"/>'; content += '<strong><a href="' + link + '" target="_blank">' + title + '</a></strong><span class="tanggalnya"> diposkan pada ' + date + "</span></li>"; } ct.innerHTML = content } } function getScript(url) { var s = document.createElement("script"); s.type = "text/javascript"; s.src = url; document.body.appendChild(s) } getScript("https://idtutorplus.blogspot.com/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=7&callback=updatedPosts");

​x

 

1

function updatedPosts(a) {

2

    if (document.getElementById("posts-updated")) {

3

        var e = a.feed.entry,

4

            title, img, link, date, content = "",

5

            ct = document.getElementById("posts-updated");

6

        for (var i = 0; i < 7; i++) {

7

            for (var j = 0; j < 7; j++) {

8

                if (e[i].link[j].rel == "alternate") {

9

                    link = e[i].link[j].href;

10

                    break

11

                }

12

            }

13

            var title = e[i].title.$t,

14

                pd = e[i].published.$t.substring(0, 10),

15

                date = pd.replace(/-/g, "/");

16

            if ("media$thumbnail" in e[i]) {

17

                img = e[i].media$thumbnail.url

18

            } else {

19

                img = "https://cdn.staticaly.com/gh/idtutorplus/images/b085015c/no-images.gif"

20

            }

21

            content += '<li class="updated"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="thumbnail-updated" alt="thumb" height="40px" width="40px"/>';

22

            content += '<strong><a href="' + link + '" target="_blank">' + title + '</a></strong><span class="tanggalnya"> diposkan pada ' + date + "</span></li>";

23

        }

24

        ct.innerHTML = content

25

    }

26

}

27

​

28

function getScript(url) {

29

    var s = document.createElement("script");

30

    s.type = "text/javascript";

31

    s.src = url;

32

    document.body.appendChild(s)

33

}

34

getScript("https://idtutorplus.blogspot.com/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=7&callback=updatedPosts");

<ol id="posts-updated"></ol>

1

 

1

<ol id="posts-updated"></ol>