Selamat Datang di
Panduan Blog Tips dan Trik, membuat kode dan aplikasi kode, solusi optimalis blog
Kotak Status CongCot
Admin : Bang Jack or Jacky
Blogger From : Jawa Barat Indonesia
Status Now : Terjadwal

Selasa, 13 Juli 2010

Menampilkan Hanya Judul Posting di Beranda / Home Page

congcot

Dalam hal penampilan, kadang orang lebih suka simpel, karena dengan simpel, kecepatan blog akan lebih baik. Kesan pandangan pertama ketika melihat blog kita adalah penampilan, dan kesan pertama yang mereka rasakan ketika merasakan blog kita adalah kecepatan. Google juga menerapkan perasaannya dengan mendahulukan kecepatan daripada penampilan.
Ketika chatting, congcot mendapatkan pertanyaan bagaimana meminimalisir tampilan di homepage (beranda) dengan cara menampilkan posting tapi hanya judulnya saja. Dulu saya berfikir simple dalam penampilan di homepage, sehingga yang tampil hanya kata-kata saya buka posting (lihat QOULY), tapi ternyata penampilan posting pun penting untuk menarik pengunjung, ya walaupun hanya judulnya saja (lihat PEDO).
Ada dua alternatif yang bisa saya berikan pada kesempatan kali ini, dan mudah-mudahan kedepannya ada cara yang lebih bagus lagi.
Dengan Kode HTML...
Yang  pertama kita langsung terjun ke kode HTMLnya, jadi kode yang diperlukan hanya akan disimpan di antara <body> dan </body>.
Untuk membuatnya, silahkan ikuti langkah-langkah dibawah ini:
  1. Masuk ke www.blogger.com dengan account anda.
  2. Pilih rancangan (tata letak)


    congcot
  3. Klik Edit HTML
  4. Simpan dulu template anda dengan meng-klik Download Template Lengkap
  5. Centang Expand Template Widget (berada diatas kotak kode)
  6. Cari kode <b:include data='post' name='post'/>. (Gunakan Ctrl + F untuk memudahkan pencarian)
  7. Ganti kode diatas dengan kode dibawah ini
  8. <b:if cond='data:blog.homepageUrl == data:blog.url'>      <b:if cond='data:blog.pageType != &quot;item&quot;'>          <a expr:href='data:post.url'>    <div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;'>          <data:post.title/></div></a>      <b:else/>          <b:include data='post' name='post'/>      </b:if>  <b:else/>      <b:include data='post' name='post'/>  </b:if>
    Silahkan ganti kode yang bercetak tebal, sesuai style yang anda inginkan
  9. Jika sudah, jangan lupa Simpan Template
  10. Selesai.
Dengan Kode CSS...
Nah, cara yang kedua ini kita tidak mengubah kode HTMLnya, tapi hanya mengutak-atik kode CSS.
Biasanya dalam kode CSS untuk menghilangkan suatu kode dalam HTML, cukup dengan {display:none} dengan syarat kode dalam HTML terikat oleh kode CSS (misalkan DIV atau Class)
Untuk membuatnya, silahkan ikuti lagkah-langkah dibawah ini:
  1. Masuk ke www.blogger.com dengan account anda.
  2. Pilih rancangan (tata letak)
  3. Klik Edit HTML
  4. Cari kode ]]></b:skin>
  5. Masukan kode dibawah ini tepat di bawah kode ]]></b:skin>
  6. <b:if cond='data:blog.pageType != &quot;item&quot;'> <style> .post-body { display:none;} </style> </b:if>
  7. Nah, itu hanya postingnya saja, sedangkan tanggal dan lain-lain masih ada.
  8. Jika anda ingin menghilangkan semuanya (tanggal dll), Silahkan memakain kode dibawah ini,
  9. <b:if cond='data:blog.pageType != &quot;item&quot;'> <style> .post-body, .post-footer, .jump-link, .post-timestamp, .reaction-buttons, .star-ratings, .post-backlinks, .post-icons { display:none;} </style> </b:if>
  10. Pilih salah satu kode yang akan anda masukan antara langkah 5 dan langkah 7.
  11. Simpan Template, Selesai.
Itulah cara yang bisa saya berikan hari ini, mudah-mudahan bermanfaat baik untuk congcot, maupun semua pembaca dan yang mempraktekannya.

Intinya...
Simple dalam bentuk penampilan memang hebat. Tapi menampilkan posting dalam homepage juga sangat penting. Dari dua blog yang terlihat diatas, anda dapat menyimpulkan, apakah pilih qouly atau pedo?.
Atau lebih memilih untuk menampilkan postingnya seperti biasa saja?.
Semuanya terserah anda, karena andalah yang berhak atas blog anda sendiri
Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.

35 komentar:

awal mengatakan...

wah info menarik, perlu dicoba nich
http://www.chuacircuit.com/site/pages/ps.htm
ini urlnya buat simulasi itu ya

ANDI WONG mengatakan...

jadi lebih menghemat ruang ya.. kayak di blog sobat rizky2009.. manteb.. :)

vos©ot mengatakan...

.saya juga lebih suka yg simpel dan minimalis kang congcot..
.bagus banget nih, nanti diterapkan~

Akbar Yahya mengatakan...

Hebat ni bisa bikin Hemat Tempat,Kalo aku lihat dari template di sini http://www.qouly.co.cc Krren bagat dan simpel :)

paktua mengatakan...

sip sob langsung praketk... mengundang sahabat2...semua untuk berbagi ... yooooo

Refline mengatakan...

bagus info.a bro. . .thx ya

BeDa mengatakan...

Tutorial yang mantab. makin canggih ya kode2 hmtl nya.

Salam ukhuwah

Aditx mengatakan...

kalau saya pilih menggunakan readmore saja kang ^_^ supaya terlihat sebagian artikel :D

jaya mengatakan...

informasi yang menarik sob...
kelihatannya lebih simple dan tidak membuat loading blog kita terlalu lama.

salam blogger

thya mengatakan...

info nya keren nih.
pengen nyobaaaaaaa!!!

salam kenal :)

Islamic.Net mengatakan...

makasih ya infonya,,

ADMIN mengatakan...

info yg mantap sobat congcot.........nice,....

PIK Remaja Al-Hikmah mengatakan...

nice artikel, langsung ku coba az dech, makasih tutorialnya

aLamathuR d'hileudjapanist II mengatakan...

"Penampilan vs kinerja loading" ....
Saya pilih 51%-41%. Jadi summarynya tetep ditampilkan dalam beberapa kalimat, tetapi dari segi lainnya dibuat seringan mungkin, dengan kurangi Javascript, compress CSS, kurangi gambar2 de el el... meskipun tetep aja masih ada beberapa gambar ilustrasi yang mau ga mau harus nongkrong di halaman utama...

wiz mengatakan...

dulu sempet pengen dikaya giniin....tapi sekarang nampaknya lebih enak yang biasa aja, lumayan buat search engine di homepage..

PIK Remaja Al-Hikmah mengatakan...

Info menarik gan, ijin coba tutorialnya ya

Siswa TKJ mengatakan...

hmm...
bagus sob tipsnya, pertanyaan kamu udah aku jawab di Terindeks dalam 11 menit

Isi Bumi Kita mengatakan...

tanxs infonya, sangat berguna.....

Isi Bumi Kita mengatakan...

berkunjung

SDN WARUGUNUNG I/448 mengatakan...

Wah sangat membantu sekali, thanks ya CongCot...!

imron.ex mengatakan...

matus nuwun tipsnya nggeh kang....
bermanfaat banget, muter-muter nyari ternyata nemunya disini.

Abay mengatakan...
Komentar ini telah dihapus oleh pengarang.
Abay mengatakan...

ini yang di tunggu2 mudah2an bisa,, tr ane coba
ane dari tadi nyari2 susah buat pertanyaan ini hehehe
thank gan... nice info...

rey mengatakan...

aku pernah memakai tips ini cuman ada kelamahannya yaitu untuk preview isi posting enggak muncul melainkan hanya judulnya saja akhirnya kukembalikan seperti biasa

CongCot mengatakan...

ia. lebih tepatnya bukan kelemahan. tapi emang itu tujuan trik ini. hanya menampilkan judulnya aja

Ernandrian mengatakan...

Mksh kk ntar saya coba.

free download mp3 mengatakan...

mantaf sob, setelah bebrapa kali coba pake cara yg lain tapi dngan cara ini top bgt... thx sob..

Asoka-Site mengatakan...

Wah, mantaf nih. Kalo yang hanya tampil judul post nya di Home page,Label,sama Arsip nya saja bisa gak Mas? Ini Blog saya Biografi tokoh terpopuler dunia saat ini

CongCot mengatakan...

ia bisa. tinggal utak atik aja kode diatas

Unknown mengatakan...

mantab. terima kasih sudah berbagi.. happy bloging

Sharing Cara Online mengatakan...

kalo seperti di home page ente gmn cara bikin nya nya gan ?

thx sharing jawaban nya...
Salam kenal :)

CongCot mengatakan...

ada posting saya, cari posting tentang readmore (kata kunci readmore).

Anonim mengatakan...

Info yang berguna. Thanks ya ... O ya ini ada tambahan dari saya, mungkin juga berguna buat kita sekalian. Ada kaitannya sedikit dengan topik di atas. Coba kunjungi : http://navigasi01.webs.com
THANKS

Afan Rizqun S mengatakan...

kok, saya gak bisa nampilin "posting lama" di home blog ane ya gan? mohon penjelasannya, saya newbie
INI BLOG SAYA : afanrizqunsyarif.co.cc

CongCot mengatakan...

saya cek blog kamu udah bisa ko

Bagaimana menurut Anda?