Cara Mengubah Tampilan Readmore Blogger Menjadi Grid Dengan Thumbnails

Jika Anda menjalankan Wallpaper atau Lucu Images niche blog, Berikut adalah tutorial berguna bagi anda. Pada artikel ini kita akan membahas mengenai bagaimana Anda dapat menampilkan posting blogger dalam tampilan grid dengan thumbnail. Grid View dengan Thumbnail merupakan script untuk diri-host Blogger blog yang menampilkan posting blog sebagai grid thumbnail gambar dalam homepage dan arsip halaman. Biasanya, posting Anda menampilkan panjang penuh dengan gambar besar yang mengambil terlalu banyak ruang di blog Anda dan diperlukan terlalu banyak bergulir. Jadi, jika Anda ingin memiliki blog Anda bersih dan cepat loading maka Anda harus mencoba galeri grid, dengan thumbnail dan judul posting, menghubungkan kembali ke pos sumber. Sebelum Anda pergi untuk langkah-langkah menginstal fitur ini untuk blog Anda Silakan periksa demo blog ini sekali.

Bagaimana Cara Install Readmore Grid:

1.Login Blogger > Template > Edit HTML
2.Tekan CTRL+F Untuk Menampilkan Kotak Pencarian Untuk Mempercepat Pencarian Tulisan ,Ketik </head> di dalam kotak pencarian dan tekan ENTER untuk menemukannya.
3.Sekarang Masukan Kode Di Bawah Ini Sebelum Kode </head>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script language='javascript'  src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'  type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[

$(document).ready(function() {

    var width         = 200;
    var height        = 170;
    var placeholder    = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidKx57g6wAG7o7YM0fWtA5gWKY-xzfpqbZ-RYqyLqPz7THXhTxayURalhjyLtSNTBQssVECOETQ_YqA3IGDEgy2G-fX-6p-agZb_ujx7H12um2ydcg06YAGJjU34Uk-Bod3BGrEXkFHxk/s1600/no-thumb.png';
    var margins     = "0px 0px 10px 10px";
    var fitThumb                 = 1;
    var titleTopPadding            = 5;
    var titleBottomPadding        = 8;
    var titleLeftRightPadding    = 5;   

    var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding +  'px ' + titleBottomPadding + 'px ' + titleLeftRightPadding + 'px';
    $('.post-body').each(function(n, wrapper){
        var wrapper         = $(wrapper);
        var image         = $(wrapper).find('img').first();
        var link         = wrapper.parent().find('h3 a');
        var linkURL         = link.attr('href');
        var linkTitle        = link.text();

        $(link).remove();
        wrapper.empty();

        if (image.attr('src')) {
            var thumbHeight = image.attr('height');
            var thumbWidth = image.attr('width');   
            var thumbParent = $(image).parent();

            wrapper.append(thumbParent);

            if (fitThumb) {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width + '-c')});
                image.attr('width',width).attr('height',height);
            } else {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width)});
                image.attr('width',width);
                var changeHeight = (thumbHeight/thumbWidth * width).toFixed(0);
                image.attr('height',changeHeight);
            }
           
        } else {
            var image = $('<img>').attr('src',placeholder).attr('height',height).attr('width',width);
            var thumbParent = $('<a>').append(image).appendTo(wrapper);
        }

         thumbParent.attr('href',linkURL).css('clear','none').css('margin-left','0').css('margin-right','0').addClass('postThumbnail');
       
        var thumbTitle =  $('<div>').prepend(linkTitle).css('padding',titlePadding).css('opacity','0.9').css('filter','alpha(opacity=0.9)').css('width',width).appendTo(thumbParent);  
        var ptitleHeight = thumbTitle.height();
        var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);
        thumbTitle.css('margin-top','-'+summary+'px');             wrapper.css('float','left').css('height',height).css('width',width).css('margin',margins).css('overflow','hidden');
    });
    $('#blog-pager').css('clear','both');
});

function hideLightbox() {
    var images = document.getElementsByTagName('img');
    for (var i = 0 ; i < images.length ; ++i) {
        images[i].onmouseover=function() {
            var html = this.parentNode.innerHTML;
            this.parentNode.innerHTML = html;
            this.onmouseover = null;
        };
    }
}

if (window.addEventListener) {
    window.addEventListener('load',hideLightbox,undefined);
} else {
    window.attachEvent('onload',hideLightbox);
}
//]]></script>
<style>
.post {
border-bottom: 0 dotted #E6E6E6;
margin-bottom: 0;
padding-bottom: 0;
}
h2,.post-footer {
display:none;
}
a.postThumbnail div {
text-decoration: none; color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: capitalize;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background:  -webkit-gradient(linear, left top, left bottom,  color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));  /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter:  progid:DXImageTransform.Microsoft.gradient(  startColorstr=&#39;#7d7e7d&#39;,  endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );
}
a.postThumbnail:hover div {
display: block;
}
.post-body img {
background-color: transparent;
border: 1px solid transparent;
padding: 0px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.post-body img:hover {
-ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
</style>
</b:if>

Catatan:  

• Jika Anda ingin membuat thumbnail posting yang lebih besar, memodifikasi 200 (lebar) dan 170 (tinggi) nilai warna biru
• Untuk mengubah thumbnail default untuk ketika tidak ada gambar, ganti URL merah dengan Anda sendiri.