Cara Membuat Tampilan Blogger Menjadi Grid View dengan Thumbnail

Cara Membuat Tampilan Blogger Menjadi Grid View dengan Thumbnail. Tampilan pada sebuah blog adalah salah satu faktor yang akan membuat para pengunjung datang mengunjungi blog anda, karena itu pentingnya sebuah tampilan pada blog anda apa lagi tampilan pada halaman depan atau Home, tampilan yang memudahkan pengunjung untuk menjelajah isi blog anda dan tampilan itu harus menarik agar para pengunjung tidak bosan dan jenuh. Salah satu tampilan yang menarik dan memudahkan pengunjung adalah tampilan Grid View dengan Thumbnail, karena tampilan tersebut akan menampilkan artikel seperti galeri sehingga pengunjung tau isi artikel dari gambar yang di tampilkan pada halaman depan blog. Grid View dengan Thumbnail merupakan script untuk diri-host Blogger blog yang akan menampilkan posting blog sebagai grid thumbnail gambar di situs dan halaman arsip. Dengan menggunakan tampilan Grid View dengan Thumbnail juga akan lebih banyak menampilkan artikel pada halaman depan atau Home, sehingga pengunjung dapat memilih lebih banyak artikel yang akan di baca. Berikut adalah bagaimana anda dapat menambahkan Grid (galeri) pada Blogger.

Menambahkan Pemandangan Grid (Galeri) ke Blogger Posting:

1. Logi ke akun Blogger anda yang akan di rubah tampilannaya dan buka Template > klik pada Edit HTML
   
   
   
2. Klik di manapun dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian
   
   
   
   
3. Ketik </head> di dalam kotak pencarian dan tekan Enter untuk menemukannya
   
4. Tambahkan kode di bawah ini tepat di atas kode </head>
   
   

   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
   <b:if cond='data:blog.pageType == &quot;index&quot;'>
   <script type='text/javascript'>//<![CDATA[
   $(document).ready(function() {
       var width = 200;
       var height = 170;
       var placeholder = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTO4Hy1XpoaSKC4BQf7FV5XMzP9u7rokUjVSYAR6WX3pVY67P88YrR9FIiZbs96nM24uOGE-hU5uXLosbBMReOOeMjG_oOQuzmQzappcsLZNd5r99GrrnB5RnRFv9SUx5-NUaOeJLuXk/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 anda dapat memodifikasi nilai 200 (lebar) dan 170 (tinggi) warna merah
- Untuk mengubah thumbnail default untuk ketika tidak ada gambar, ganti URL warna biru dengan url gambar anda sendiri.


5. Klik tombol Template Save untuk menyimpan perubahan dan Lihat blog anda

Demikian Tutorial dari saya tentang Cara Membuat Tampilan Blogger Menjadi Grid View dengan Thumbnail
Semoga bermanfaat ^_^