Variasi Tampilan Posting di Halaman Depan Blog - Judul, Gambar, Dua Kolom
May 24, 2015
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.
1. Template > Edit HTML
2. GANTI kode
DENGAN
3. Save Template!
Kini tampilan halaman depan blog Anda hanya judul posting. Fast Loading!
1. Template > Edit HTML
2. Copas kode berikut ini sebelum atau di atas kode </head>
3. Save Template!
1. Template > Edit HTML
2. Copas kode berikut ini di atas kode </head>
3. Save Template!
Kini tampilan halaman depan blog Anda berupa grid image (gambar). Bagus buat blog galeri foto, video, atau online shop!
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>
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).*
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-->
<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>
<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 DEMO1. 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 == "index"'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var width = 200;
var height = 170;
var placeholder = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLTwVHdfQYvkZFqDACIuKleSMCz95qvAkwnxtgULO8bvLADsuPFeEzys1ATrVR91d9LlA6OTBZ2wZdF0y5RyBbtHIqFbHnP9eSQ3MRDRrLPJ-VEd_q4a-OTKGt-8hnZ1AVj2q7VGPjeRQ/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='
#7d7e7d', endColorstr='#0e0e0e',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: "
progid: DXImageTransform.Microsoft.Alpha(Opacity=70)"
;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
</style>
</b:if>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var width = 200;
var height = 170;
var placeholder = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLTwVHdfQYvkZFqDACIuKleSMCz95qvAkwnxtgULO8bvLADsuPFeEzys1ATrVR91d9LlA6OTBZ2wZdF0y5RyBbtHIqFbHnP9eSQ3MRDRrLPJ-VEd_q4a-OTKGt-8hnZ1AVj2q7VGPjeRQ/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='
#7d7e7d', endColorstr='#0e0e0e',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: "
progid: DXImageTransform.Microsoft.Alpha(Opacity=70)"
;
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 != "item"'>
<style>
.post {width:49%;height:auto;margin:0 20px 5px 0;overflow:hidden;float:left;}
</style>
</b:if>
<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).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Sangat bermanfaat. Anak siapa sih CB? Pinter banget.
ReplyDeleteabang CB , boleh minta tdk template yg serupa dg blog demo http://cbonlinestore.blogspot.com , :) kalau boleh tlg responnya ya
ReplyDeletehttp://contohblognih.blogspot.com/p/layanan-premium-cb.html
Deleteboleh juga nihh,,
ReplyDeletebos, 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
ReplyDeletetinggal ketik aja nama labelnya
DeleteMakasih Cb.. saya juga dalam masalah Pakar DO'C diataas... dan alhamdulillah berhasil tinngal tulis nama Labelnya.. :)
Deletehai CB bagaimana dengan cara membuat harganya, kan biasanya itu selain nama produk, ada harganya di bagian bawah thumbnail. Atau sebaliknya
ReplyDeletevariasi tampilan diatas sangat menantang untuk diuji coba....
ReplyDeletebutuh sdikit ilmu ttg JS dan edit HTML...
tks dah berbagi
bermanfaat sekali gan,tetapi apakah ada yang tampil hanya gambar dan judul saja,mohon jawabannya
ReplyDeletegan tampilan depan blog ya grid tapi tidak responsive ukuran gambarnya, gimana caranya gan biar semua gambarnya jadi sama tampilanya, sebelumnya terima kasih
ReplyDeletegan kalau menampilkan di home page hanya judul dengan gambarnya itu gimana gan,di blogspot.
ReplyDeleteNice banget
ReplyDeleteaku 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
ReplyDeleteDi versi mobile kok tidak berubah ya gan
ReplyDeleteNICE
ReplyDeleteharus coba nih
ReplyDeleteKalo cara buat tampilan kaya blog ini gimana mas CB ? tutorial nya dong
ReplyDeletejangan ngikut tampilan blog CB, soalnya suka gonti-ganti terus, namanya juga contoh blog :)
DeleteKalo pinginnya kayak cara yang no.1 tapi ada gambar sama ringkasannya gimana,ya..?
ReplyDeleteItu ada linknya di alinea keempat
Deletehttp://www.contohblog.com/2014/02/membuat-auto-read-more-di-halaman-depan.html
Ini yang dicari2 ahirnya nemu juga makasih sob infonya
ReplyDeleteIni yang saya muter-muter carinya. akhirnya work 100%
ReplyDeletewawww mantap
ReplyDeletemakasih infonya gan, harap bisa berkunjung balik di blog sederhana saya
ReplyDeletehapus dulu kode auto readmore lama
ReplyDeletekalo misalnya tampilan home nya kayak http://cbblogfoto.blogspot.com/ tapi gambar nya itu jadi kategori artikel gimna yah.. bantu saya bang pliss
ReplyDeleteJangan dibikin susah, pake saja kode yang suda ada :)
Deletekalau tampilannya judul, Gamabr dan beberapa isi gimana ya bang 1 kolom
ReplyDeletegan klo saya mau bikin cuplikan gambarnya saat kursor diarahkan ke judul posting kayak di web-web manga itu gimana ya?
ReplyDeletelangsung tak coba bro,,trim ya bro dah share tipsnya...doa meminta rezeki
ReplyDeleteMantap....saya masih bingung,,,,tampilan halaman depan blog saya 7 postingan terbaca semua,,,,saya kepengin seperti tampilan di atas
ReplyDeleteThanks infonya.. Mau coba dulu :D
ReplyDeleteThanks infonya ya
ReplyDelete