AGUNG TUTORIAL

Belajar Bordir Wilcom dan Tajima Mesin SWF, VBA Macro Excel, Design Grafis CorelDraws, Video Editing, Download Software-software, Solusi Masalah Error Komputer, Jaringan dan Internet, Analisis Jaringan, Analisis Problem Hardware dan sebagainya

5/15/2018

Cara Grid Post Homepage Agar Terlihat Sederhana, DIjamin Sukses

Kolom Posting adalah hal pertama yang akan dilihat para pengunjung. Untuk itu kita perlu memanjakan mata pengunjung dengan memberikan tampilan kumpulan post menurut  label secara sederhana. karena akan memudahkan pengunjung memilah-milah artikel mana yang menarik untuk dibaca sehingga menjadi poin bagi pemilik blog. Tampilan ringksan dapat berupa kumpulan Thumbnail Grid View Post. Kode yang admin miliki dan pernah di coba dan berhasil adalah
1. Tampilan Grid View Style no 1


    - Login Blogger.com
    - Jangan lupa backup dulu 
    - Klik menu Theme>Edit HTML
    - Temukan kode </head> dengan cara CTRL + F.

    - Copy kode dibawah ini

 <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  = 'http://3.bp.blogspot.com/-7Ie-cUwxWB4/U2KIRWgvpNI/AAAAAAAAIfU/Mj6qpg5S2fk/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>  

    - Paste kan diatas </head>


2. Tampilan Grid View Style no 2
 

    - Login Blogger.com
    - Klik menu Theme>Edit HTML
    - Temukan kode ]]></b:skin> dengan cara CTRL + F.
       
    - Copy kode dibawah ini

  <style type='text/css'>   
  <b:if cond='data:blog.pageType != &quot;item&quot;'>   
  #main-wrapper {width:800px;padding-left:5px;padding-right:5px;border-right:1px solid #ddd;}   
  h2.date-header, .jump-link, .feed-links, .post-footer {display:none;}   
  #blog-pager {width:98%; clear:both;}   
  .post {margin:.01em 10px 10px 0;background:none;width:310px;height:300px;float:left; border-bottom:3px double #ddd; positon:relative;overflow:hidden;}   
  .post-body {margin:0.2em 0 .75em;line-height:2em;font-size:13px;color:##00d681;overflow:hidden;}   
  .post h3 {height:32px;font-size:15px;font-weight:bold;line-height:1.5em;color:#cc0000;text-transform:none;font-family:Arial;}   
  .post h3 a, .post h3 a:visited, .post h3 strong {font-weight:bold;color:#cc0000;}   
  .post h3 strong, .post h3 a:hover {color:#000;text-decoration:underline;}   
 @media screen and (max-height:1800px)  
  </b:if>   
  </style>   

    - Paste di bawah ]]></b:skin>
    - Hapus .post-outer untuk menghilangkan background warna outer post lama.
      Catatan :
            - untuk menganti ukuran dapat menganti height dan width pada .post { width:310;height:300}
            - untuk spacing antar baris, ganti post-body{ line-height:2em) bisa 1.5 ataupun 1
            - Tampilan dapat diubah menjadi 1 kolom grid saja dengan cara ubah
               .post { width:310;height:300} menjadi maksimal lebar halaman postingan.
            - Jika ingin ada background pada halaman post .{background ; isiskan warnanya)
              dan masukan kode dibawah ini, dibawah .date-header span maksudnya di antara
              <b:skin>------</b:skin>
              .post{
                    background:#006c36;
               }
              
            - Untuk tampilan agar tidak overflow gunakan @media screen and (max-height:1800px)
               1800px adalah total seluruh tinggi jumlah posting = 300 x 6
   
Selamat Mencoba

Terima kasih telah berkunjung ke https://www.agungpanduan.com

1 komentar: