Cara Desain Tampilan Blog Keren: Pengaturan Tampilan Judul, Jumlah Kolom dan Gambar Thumbnail

Setting Tampilan Judul, Jumlah Kolom dan Gambar Thumbnail

Sobat. Tips kali ini berupa pengaturan awal desain sebuah blog. Desain awal tersebut mulai dari halaman muka (halaman dasar), tampilan jumlah kolom dan pengaturan gambar thumbnail. Pengaturan ini dirasa sangat penting untuk menentukan "keberlangsungan kedepannya" blog Anda.

Sebagai gambarannya, silakan perhatikan dan fahami konsep desain tampilan utuh sebuah blog pada ilustrasi gambar thumbnail artikel ini!

Karena dengan pemahaman ini, akan menjadi pijakan dalam memujudkan planing sebelumnya, yakni membangun blog berkualitas.

Tips desain blog berikut ini akan berbagi kode dan cara membuat variasi halaman depan blog. Silakan pilih sesuai dengan selera.

Cara Desain Home Pages Blog Dengan Daftar Judul Posting Artikel

Tips kali ini menjelaskan cara membuat Homepage (halaman depan) blog hanya dengan judul posting, tanpa gambar dan tanpa ringkasan (summary/snippets). Dapat dilihat di Source & Demo nya.
Langkah pengaturannya:

1. Masuk akun blogger
2. Pilih Template > Edit HTML> GANTI kode <b:include data='post' name='post'/>
dengan kode di bawah ini:

<!--Post Titles Only-->
<b:if cond='data:blog.pageType != "item"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--Post Titles Only-->

3. Save Template!

Jika masih bingung dengan cara pertama di atas, dapat menggunakan cara berikut ini:
1. Masuk akun blogger
2. Pilih Template > Edit HTML
3. Copy paste kode di bawah ini dan diletakkan di atas kode </head>
4. Save template

<style type='text/css'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color:#333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</b:if>
</style>

Cara Desain Home Pages Blog Dengan Gambar Thumbnail Saja

Blog dengan tipe tampilan seperti ini lebih umum dikenal sebagai blog tampilan "grid post", yang hanya terdiri dari gambar posting pada homepages dengan fitur 2 atau 3 kolom. 

"Desain tipe ini sangat cocok untuk blog berita yang memuat gambar gallery (foto), video, atau bisa juga untuk toko online."

Nih bisa dilihat demonya. Bagi yang ingin memiliki template dengan desain seperti itu, silakan simak 2 template resposive ini.

Cara pengaturannya cukup mudah, yakni:
1. Masuk akun blogger
2. Pilih Template > Edit HTML
3. Copy paste kode di bawah ini dan diletakkan di atas kode </head>
4. Save template

<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/AVvXsEjvwc-p7kBSKVwr_VWzQ16COHsiJXl6XhIw0pq-cC8Xz0ADibRLUkrgyDpaPo7lAT1_W3J7A1KL9D42w6sVLC1ExvCHIQ9KSBSKNKba4FuIh3fjn6ZMrtlh9mzV2J8DyM-ZB4DNp3kPPqs/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>

Cara Desain Homepages Dengan Daftar Posting Auto Redmore

Desain tampilan tipe ini mungkin lebih banyak dijumpai bagi blog bertipe umum (general blog). Karena pada dasarnya tipe tampilan ini biasanya berisi konten dengan teks penjelasan yang panjang. Maka tampilan tipe ini kurang cocok untuk blog gallery foto atau gambar yang lebih mengutamakan demo tampilan isi konten.

Life demo tipe ini atau ini.
Cara pengaturannya cukup mudah, yakni:
1. Masuk akun blogger
2. Pilih Template > Edit HTML
3. Copy paste kode di bawah ini dan diletakkan di bawah kode  ]]></b:skin>
4. Save template

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {width:49%;height:auto;margin:0 20px 5px 0;overflow:hidden;float:left;}
</style>
</b:if>

***.Note:
Angka 49% menunjukkan besar lebar komom. Jika setelah melakukan pengaturan ini masih menjadi satu kolom saja, maka silakan ganti ukuran lebarnya. Dengan cara mengganti ukuran kolom menjadi lebih kecil. Misalkan 48% atau 47% dan seterusnya sampai memperoleh tampilan yang pas sesuai dengan lebar kontennya.

Demikian tips trik SEO blogging kali ini. Semoga bermanfaat.
(http://forumblogindo.blogspot.com/).*

Sumber: