Cara membuatnya

Langka pertama login ke akun bloger sobat
Langkah kedua klik menu Rancangan » Edit HTML
Langkah ketiga Download dulu template sobat biar aman dan biar kalau terjadi error ada cadangan templatenya
Langkah keempat anda cari kode ]]></b:skin>
Langkah kelima anda kopy kode berikut dan paste tepat dibawah kode ]]></b:skin> atau diatas Tag </head>

<!-- kondisi home -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.thumb-post img {
    padding: 4px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 5px;
    margin-left: 0;
    width: 90px;
    height: 90px;
    background: #fff;
    border: 3px solid #ff8000;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.post:hover:hover .thumb-post img {
    border: 3px solid #0000ff;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
</style>
</b:if>
</b:if>
<!-- /kondisi home -->

Langkah selanjutnya anda cari kode yang seperti dibawah ini, atau yang jelasnya adalah kode Readmore Otomatis yang letaknya diatas kode </head>
Tapi kalau anda blum menggunakan Readmore Otomatis anda bisa membaca artikel saya yang dulu tentang cara Membuat Readmore Otomatis

function createSummaryAndThumb(pID) {
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if (img.length >= 1) {
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="' + img[0].src + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
        summ = summary_img;
    }

Setelah kode diatas ketemu Sisipkan kode berikut <div class="thumb-post"> didepan kode

<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>

Jadi hasilnya akan seperti ini.

<div class="thumb-post"> <span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>

Atau anda juga bisa langsung menggunakan kode dibawah ini, dengan cara Hapus keseluruhan kode readmore otomatis anda, kemudian ganti dengan kode berikut.

<script type='text/javascript'>
    var thumbnail_mode = & quot;
    float & quot;;
    summary_noimg = 340;
    summary_img = 340;
    img_thumb_height = 120;
    img_thumb_width = 120;
</script>
<script type='text/javascript'>
    //<![CDATA[
    /*
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
*/

    function removeHtmlTag(strx, chop) {
        if (strx.indexOf("<") != -1) {
            var s = strx.split("<");
            for (var i = 0; i < s.length; i++) {
                if (s[i].indexOf(">") != -1) {
                    s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
                }
            }
            strx = s.join("");
        }
        chop = (chop < strx.length - 1) ? chop : strx.length - 2;
        while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
        strx = strx.substring(0, chop - 1);
        return strx + '...';
    }

    function createSummaryAndThumb(pID) {
        var div = document.getElementById(pID);
        var imgtag = "";
        var img = div.getElementsByTagName("img");

        if (img.length <= 0) {
            imgtag = '<div class="thumb-post"><span style="float:left;padding:0px 10px 5px 0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdi-iZI2iuJzU-lUHyV4qDVTi-cZdNyTa3FxUe28ARRYuOr0yGcmyDCVfthnugPjw-mGgqi7uqzIs9diaqCdl8DnnNtcS7LI7YucgC0pXQgH09kN1Qu_6k7D6vX7uRbUI_RXySZIgksb7J/s0/diary.jpg" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span></div>';
            var summ = summary_noimg;
        }

        if (img.length >= 1) {
            imgtag = '<div class="thumb-post"><span style="float:left;padding:0px 10px 5px 0px;"><img src="' + img[0].src + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span></div>';
            summ = summary_img;
        }

        var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
        div.innerHTML = summary;
    }

    //]]>
</script>

Kode yang bertanda adalah sisipan kode pada script ReadMore ( Tambahannya )

Sekian artikel tentang cara membuat gambar pada homepage melingkar Semoga bermanfaat. kalau ada yang tidak di mengerti silahkan berkomentar dibawah.