Blogger Popular Widget Styling

by zerippe

HTML

<div id="popular-posts">
    <div class="item" data-src="http://lh6.ggpht.com/-UAiFenboLR0/TrNOqxRjHRI/AAAAAAAAA5g/yV65Uy7IFIA/s72-c/mcexpt0.png">
        <a class="link" href="" title="この記事を読む"><span>スポーンブロックを使った経験値稼ぎ用トラップ</span></a>
    </div>
    <div class="item" data-src="https://lh4.googleusercontent.com/-kxk9iObVEx4/UOPkeB4ox6I/AAAAAAAAF4U/6lgqkm3LFhU/s72-c/gimgsearch.png">
        <a class="link" href="" title="この記事を読む"><span>Googleを利用して画像から類似画像を検索する方法</span></a>
    </div>
    <div class="item" data-src="">
        <a class="link" href="" title="この記事を読む"><span>スポーンブロックを使った経験値稼ぎ用トラップ</span></a>
    </div>
</div>

CSS

*{
    margin:0;padding:0;font-family:"ヒラギノ角ゴ Pro W3",Osaka,"メイリオ",Meiryo,Arial,Helvetica
}
.link{
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-decoration: none;
    background-color:#333;
    background-color:rgba(0,0,0,0.65);
}
.item{
    position: relative;
    margin: 0 0 10px 0;
    height: 75px;
    background: #eee no-repeat 50% 50%;
    background-size: cover;
    border: 1px solid #aaa;
    overflow: hidden;
}
.link span{
    display: table-cell;
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
    vertical-align: middle;
    font-size: 80%;
}
.noimage{
    display: table;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
}
.noimage > p{
    display: table-cell;
    width: 100%;
    height: 100%;
    color: #bbb;
    font-size: 200%;
    text-align: center;
    vertical-align: middle;
}

JavaScript

(function() {
    var noimage = document.createElement("div");
    noimage.setAttribute("class", "noimage");
    noimage.innerHTML = "<p>画像がありません<p>";
    for (var i = 0, elements = document.getElementById("popular-posts").getElementsByClassName("item"), length = elements.length; i < length; i++) {
        var element = elements[i], src = element.getAttribute("data-src");
        if (src) {
            src = src.replace(/^(http|https)\:\/\/(lh\d\.(googleusercontent|ggpht)|\d\.bp\.blogspot)\.com\//i, "https://lh4.googleusercontent.com/");
            element.setAttribute("style", "background-image:url(" + src.replace("/s72-c", "/s400") + ");");
        } else {
            element.appendChild(noimage.cloneNode(true));
        }
    }
})();