用CSS列出博客文章

Question

I am getting blogger post list on custom page using this code-

<script type="text/javascript">
function recentpostslist(json) {
    document.write('<ul>');
    for (var i = 0; i < json.feed.entry.length; i++)
    {
        for (var j = 0; j < json.feed.entry[i].link.length; j++) {
            if (json.feed.entry[i].link[j].rel == 'alternate') {
                break;
            }
        }
        var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
        var entryTitle = json.feed.entry[i].title.$t;
        var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
        document.write(item);
    }
     document.write('</ul>');
}
</script>
<script src="http://mpvideosongs.blogspot.com/feeds/posts/summary/-/movie?max-results=300&alt=json-in-script&callback=recentpostslist"></script> 

I want display post list with CSS code given HERE - Rounded -shaped How can I do this?

Answer 1

try this

http://jsfiddle.net/vHHhy/

CSS

.rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;   
}

.rounded-list a:hover{
    background: #eee;
}

.rounded-list a:hover:before{
    transform: rotate(360deg);  
}

.rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute; 
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

HTML

<ol class="rounded-list">
    <li><a href="">List item</a></li>
    <li><a href="">List item</a></li>
    <li><a href="">List item</a>
        <ol>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
        </ol>
    </li>
    <li><a href="">List item</a></li>
    <li><a href="">List item</a></li>                       
</ol>

JS

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 0; i < json.feed.entry.length; i++)
 {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://mpvideosongs.blogspot.com/feeds/posts/summary/-/movie?max-results=300&alt=json-in-script&callback=recentpostslist"></script>