MEMBUAT TAMPILAN POSTING LABEL MENJADI GRID

Berawal dari keinginanku mengubah tampilan blog/web ku ini supaya mudah dilihat postingan di label dalam bentuk grid.  Aku pun browsing baik di youtube, googling referensi dalam dan luar negeri. Dan bukan hanya 1 kali, tapi berkali-kali, mungkin sekitar belasan kali, akhirnya aku temukan juga cara yang tepat untuk web/blog ku ini. 
Karena itu pengen kubagi juga ni ke sobat-sobat. Let's check it out! 
Ini tampilan sekarang di web ku, dan untuk membuat ini, langkah-langkahnya sbb: 

1. Login dulu di blogger
2. Kemudian masuk ke Template lalu klik edit HTML
3. Di kotak HTML, tekan CTRL+F untuk nampilin kotak search, trus ketik </head> di kotak serach tu, lalu klik enter. 
3. Sekarang, copy dan paste kode-kode dibawah ini, diatas/ sebelum kode </head>, terms save. Selesai!
Misalkan pengen kembali ke pengaturan awal, sebaiknya capture dulu HTML sebelum dimasukkan kode ini, supaya jika ingin kembali ke awal, tinggal liat aja susunannya. 

Oke,,,selamat mencoba !

<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> 

Tidak ada komentar:

Posting Komentar