Home » » Variasi Tampilan Posting di Halaman Depan Blog - Judul, Gambar, Dua Kolom

Variasi Tampilan Posting di Halaman Depan Blog - Judul, Gambar, Dua Kolom

halaman depan cb online store
Variasi Tampilan Posting di Halaman Depan Blog: Judul Saja, Gambar Saja, Dua Kolom Auto Readmore.

HALAMAN depan blog (beranda, home, homepage) merupakan "etalase". Di halaman depan inilah semua konten diperkenalkan dan mulai ditelusuri, meskipun kebanyakan pengunjung menemukan blog kita dari single post (single page) sebuah posting.

Banyak juga pengunjung yang awalnya membuka halaman dalam, lalu "penasaran" ingin tahu tampilan halaman depan blog yang dikunjunginya. Jika bagus, ia mungkin akan lebih lama di blog itu.

Ada banyak variasi tampilan halaman depan, mulai dari posting penuh hingga yang terpopuler digunakan: Auto Readmore Style.

Tampilan halaman depan autoreadmore pun macam-macam, ada yang berupa daftar judul, judul dan gambar (thumbnail image), judul plus gambar thumbnail dan ringkasan, ada yang satu kolom, ada juga yang dua kolom seperti tampilan blog CB ini.

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

Halaman Depan dengan Daftar Judul Posting Saja (1)

Homepage hanya judul posting, tanpa gambar dan tanpa ringkasan (summary/snippets). Source & Demo.

1. Template > Edit HTML
2. GANTI kode


<b:include data='post' name='post'/>

DENGAN

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

Kini tampilan halaman depan blog Anda hanya judul posting. Fast Loading!

Halaman Depan dengan Daftar Judul Posting Saja (2)

Hasilnya akan sama dengan yang di atas, namun caranya berbeda. (Source & Demo.)

1. Template > Edit HTML
2. Copas kode berikut ini sebelum atau di atas kode </head>

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

3. Save Template!

Halaman Depan dengan Gambar Thumbnail Saja

Dikenal dengan sebutan "grid posts", berupa gambar posting saja yang tampil dalam 2-3 kolom di halaman depan. (Sumber). Cocok untuk blog video, foto, atau toko online. Lihat DEMO

1. Template > Edit HTML
2. Copas kode berikut ini 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 = '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>

3. Save Template!

Kini tampilan halaman depan blog Anda berupa grid image (gambar). Bagus buat blog galeri foto, video, atau online shop!

Daftar Posting Auto Readmore 2 Kolom di Halaman Depan

Membuat Dua Kolom Posting Homepage Blogspot ini banyak ditanyakan pengunjung blog CB. Ini tampilan khas Template Johny Wuss Series. Bedanya di kode.

Johny Wuss Series menggunakan kode Table of Content. Tips di bawah ini menggunakan kode "rekayasa" sehingga tampilan dua kolomnya mirip banget bahkan sama dengan Johny Wuss. (Lihat DEMO).

1. Template >> Edit Html >>
2. Copas kode berikut ini di bawah kode ]]></b:skin>

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

Ket:
Jika hasilnya masih satu kolom, atur besaran persentasenya jadi lebih kecil, misalnya 48%, 47%, dan seterusnya hingga "pas".

3. Save Template!

Itu dia Variasi Tampilan Posting di Halaman Depan Blog. Bisa  Judul Posting doang, Gambar doang, Gambar dan Judul, hingga yang berupa dua kolom. Good Luck! (http://contohblognih.blogspot.com).*

Thanks for reading & sharing Variasi Tampilan Posting di Halaman Depan Blog - Judul, Gambar, Dua Kolom

Previous
« Prev Post

14 comments:

Comment Page:
  1. Sangat bermanfaat. Anak siapa sih CB? Pinter banget.

    ReplyDelete
  2. abang CB , boleh minta tdk template yg serupa dg blog demo http://cbonlinestore.blogspot.com , :) kalau boleh tlg responnya ya

    ReplyDelete
    Replies
    1. http://contohblognih.blogspot.com/p/layanan-premium-cb.html

      Delete
  3. bos, boleh nanya gak untuk tampilan homepage widget di http://cbblogfoto.blogspot.com/ itu pengisian kode widgetnya manual atau pakai kode tertentu boleh dong di share atau diemail kodenya ke tipsanakayam@gmail.com terimakasih

    ReplyDelete
    Replies
    1. tinggal ketik aja nama labelnya

      Delete
  4. hai CB bagaimana dengan cara membuat harganya, kan biasanya itu selain nama produk, ada harganya di bagian bawah thumbnail. Atau sebaliknya

    ReplyDelete
  5. variasi tampilan diatas sangat menantang untuk diuji coba....
    butuh sdikit ilmu ttg JS dan edit HTML...
    tks dah berbagi

    ReplyDelete
  6. bermanfaat sekali gan,tetapi apakah ada yang tampil hanya gambar dan judul saja,mohon jawabannya

    ReplyDelete
  7. gan tampilan depan blog ya grid tapi tidak responsive ukuran gambarnya, gimana caranya gan biar semua gambarnya jadi sama tampilanya, sebelumnya terima kasih

    ReplyDelete
  8. gan kalau menampilkan di home page hanya judul dengan gambarnya itu gimana gan,di blogspot.

    ReplyDelete
  9. aku praktekin yg "Daftar Posting Auto Readmore 2 Kolom di Halaman Depan" kok hasilnya g sperti yg d demo y gan? yg d demo bisa rapi atas bawahnya

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox