> Cara hanya menampilkan judul posting saja pada halaman depan blog

Sabtu, 26 November 2011

Cara hanya menampilkan judul posting saja pada halaman depan blog

Sabtu, 26 November 2011 | 06:47 70 comments

Update kembali trik cara hanya menampilkan judul postingnya saja pada halaman depan atau home page. Mengingat cara ini memang sangat efisien dan sangat menghemat tempat pada halaman depan sebuah blog. Biasanya cara ini digunakan karena artikel, sidebar ataupun konten yang ditampilkan sudah padat. Tapi ada juga yang hanya sekedar ingin tampil lebih praktis dan lebih meringankan pada saat loading ketika blog tersebut dibuka.
Untunglah ada sobat blogger yang mengeluhkan, bahwa kode css yang saya berikan tidak bekerja dengan baik.... terima kasih sobat. Dan ternyata setelah saya cek kembali, ada beberapa kode yang kurang, dan kini kode yang saya berikan dibawah sudah normal kembali, maka dari itu artikel ini saya update kembali ... bagi yang memerlukan trik ini silahkan anda coba dan saya pastikan akan berhasil tanpa keluhan.

Berikut gambar tampilan blog hanya menampilkan judul posting saja :
 

OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.


4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode css di bawah ini dan taruh sebelum kode </head> :


6. Simpan Template.

Selamat mencoba ya... Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.
Ping your blog, website, or RSS feed for Free

Related Articles :

Baca artikel lain :

Informasi Artikel :
Judul : "Cara hanya menampilkan judul posting saja pada halaman depan blog"
Diulas Oleh : | Sabtu, 26 November 2011 | 06:47
Description : Update kembali trik cara hanya menampilkan judul postingnya saja pada halaman depan atau home page...
Label : ,,
Posisi Rich Snippets : Rating: 3.4

Sampai saat ini baru ada : 70komentar

>>> Silahkan tambahkan komentar Anda...

 

Label: , ,

70 komentar:

  3. info yang sangat membantu... gan saya mau tanya setelah saya make kode css tersebut berjalan dengan baik cuman kenapa pas saya buka di my menu tidak keluar artikelnya hanya yg keluar judulnya saja di my menu , kalau di judul depan sih udah berjalan dengan baik cuman pas itu saja my menu saja ketika di klik tidak keluar... mohon pencerahannya maklum masih baru belajar ngeblog hehehe.. oia nitip blogs gan yang masih butuh bimbingan http://brotherrickyxp.blogspot.com/ terimakasih

    BalasHapus

  4. BROTHER RICKY XP, mohon maaf memang kode yang saya berikan ada yang kurang....
    Tapi kini sudah saya perbaiki dan artikel sudah saya update kembali, silahkan anda coba lagi, dan kali ini saya yakin berhasil....
    semoga bermanfaat....

    BalasHapus

  5. Keren gan.... tutorialnya sangat membantu, terima kasih

    BalasHapus

  6. sama-sama.... sering-sering berkunjung ya....

    BalasHapus

  7. gan kalau misalkan mau gambar sama titlenya gmn,.,.,
    thx

    BalasHapus

  8. Muhamad Fajar ...,bila anda menginginkan gmbr dan titel yg tampil, silahkan anda perhatikan pd kode yg saya berikan. Disitu pd bgian bawah ada kode seperti berikut :".post img {display:none;}"... Silahkan anda hilangkan saja, sehingga gmbar akan muncul...
    silahkan anda coba, semoga bermanfaat.

    BalasHapus

  9. sejenak membaca hhi

    gan, gimana kalau mau nampilin gambar di halaman depan sebelum readmore ?

    blog ane, kagak muncul :'( taapi muncul setelah readmore :'(

    BalasHapus

  11. sama-sama.... sering-sering berkunjung ya....

    BalasHapus

  12. gan,nice info,oh ya banner agan sudah saya pasang tolong periksa balik

    http://gilimenuk.blogspot.com/

    BalasHapus

  13. zapitge....., OK...Tanks

    BalasHapus

  14. Blognya bagus mas. Tutorialnya oke2.
    Salam kenal.

    BalasHapus

  15. Dwik...., terima kasih... dan salam kenal juga.

    BalasHapus

  16. keren..... blognya!! tutorialnya mantap!! http://seputarfaktadunia.blogspot.com/
    kalo mau tampilin gambar sama judul postingnya gmn?? ".post img {display:none;}" uda ku hilangin tapi masih blum ada gambarnya

    BalasHapus

  19. makasi gan atas wajengannya, ane mau coba dulu yach semoga berhasil, dan sukses selalu buat agan

    BalasHapus

  20. Lyric Yes...,sama-sama.....terima kasih... dan sukses selalu juga buat anda.

    BalasHapus

  21. info yang sangat membantu... gan saya mau tanya setelah saya make kode css tersebut berjalan dengan baik cuman kenapa pas saya buka di my menu tidak keluar artikelnya hanya yg keluar judulnya saja di my menu , kalau di judul depan sih udah berjalan dengan baik cuman pas itu saja my menu saja ketika di klik tidak keluar... mohon mohon bantuanya gan saya pake templet baru blogspot.

    BalasHapus

  22. www.oviaservice.com.., Kode di atas bekerja dengan baik, anda bisa lihat hasilnya di : http://buatblogblogger.blogspot.com/

    kalau di Blog anda tdk bekerja dgn baik, mungkin beberapa Id tidak sama....
    Anda bisa lihat pada kode diatas, terutama pada Id post... seperti: .post-body, .post-footer, .post blockquote, .post blockquote p, dan seterusnya...

    Kemudian anda liahat milik blog anda, apa nama Id post pada css anda... lalu copy dan tambahkan pd css diatas. penulisannya seperti berikut: .ID POST_MILIK_ANDA {display:none;}

    BalasHapus

  23. artikelnya sangant membantu gan

    BalasHapus

  24. Andi Mubarok..., OK... semoga bermanfaat.

    BalasHapus

  26. Ary_Putra..., sama-sama... Semoga bermanfaat

    BalasHapus

  28. Rouftracal..., sama-sama... Semoga bermanfaat

    BalasHapus

  29. Makasih bang, barusan ane sudah coba dan berniat mengubah sesuaikan cara ini.

    BalasHapus

  30. dokunimus..., sama-sama... Semoga bermanfaat

    BalasHapus

  31. makasih tipsnya^^ kunjungi juga blog saya di http://yoseptriana.blogspot.com/

    BalasHapus

  32. udah aku coba dan berhasil, tapi di homepage cuma ada satu judul posting. gimana yaa biar di homepage ada beberapa posting? tolong aku butuh banget ini

    BalasHapus

  33. Yuyut Wahyudi..., untuk jumlah artikel yg tampil, tergantung pengaturan pada template anda.

    Caranya: Rancangan - pengaturan - format. Pada poin pertama, anda tinggal ganti jumlah postingan yg ingin anda tampilkan. Kemudian simpan setelan.

    Selamat mencoba semoga berhasil.....

    BalasHapus

  34. MAS TOLONG BERI SARAN BLOG SAYA DIMAN KEKURANGANNYA
    http://rencong21.blogspot.com/ MOHON DIBERI TAU CARA MEMASANG GAMBAR PADA JUDUL BLOG
    TERIMAKASIH

    BalasHapus

  35. iya aku lupa, udah berhasil ini . Terimakasih!

    BalasHapus

  36. Yuyut Wahyudi...., sama-sama

    BalasHapus

  37. Oiya biar gambarnya tampil juga di homepage gimana yaa? aku udah edit kodenya yang none jadi yes tapi ngga ngaruh

    BalasHapus

  38. Yuyut Wahyudi..., sebab fungsi trik ini memang untuk menyembunyikan seluruh isi yang ada dalam ".post-body". Diantara kode diatas terdapat kode berikut : ".post-body {display:none;}", sehingga termasuk gambar secara otomatis tidak akan muncul.

    Bila anda menginginkan yg tampil pada homepage hanya judul dan gambarnya saja, anda bisa dicoba trik lain....

    Silahkan anda cari kode ( summary_noimg ), secara lengkap seperti berikut: (--->setiap template beda)
    -----------------------
    summary_noimg = 330;
    summary_img = 150;
    img_thumb_height = 65;
    img_thumb_width = 65;
    -----------------------
    Kode tersebut adalah bagian dari script read more, anda bisa mengakali dengan merubah nilai pada kode tersebut.
    Jadinya seperti berikut:
    -----------------------
    summary_noimg = 0;
    summary_img = 0;
    img_thumb_height = 300;
    img_thumb_width = 200;
    -----------------------

    Jadi anda tidak perlu menggunakan trik yg ada pada artikel ini.

    Semoga membantu.... selamat mencoba semoga berhasil dan bermanfaat...

    BalasHapus
    Balasan

    1. wah belum paham aku itu... yaa udah lah sementara ini cukup puas kok dengan tampilan homepage blogku.. Terimakasih.

      Hapus

  39. Gan, kalo buat slideshow judul posting dalam bentuk gambar di hal prtama blog gimana?!!!

    BalasHapus

  40. Bal BundeR..., maksudnya gimana ya? bisa kasih gambaran atau dimana anda pernah lihat?

    BalasHapus

  41. gan, ko tulisannya jadi numpuk dan berjubel..?

    BalasHapus

  42. gan, saya pake temmplate editan, jadi udah ga default..kira2 ni skript ttp jalan ga..?

    BalasHapus
    Balasan

    1. Tetap bisa, kode tersebut hanya menggunakan CSS.

      Setiap template memiliki tag yg berbeda-beda, jadi yg perlu diperhatikan biasanya pada tag , ada yg menggunakan h1,h2, dan h3.

      Sementara kode yg sy berikan menggunakan h3, jadi bila {.post ...} pd template anda menggunakan (.post h2 ...),maka pada kode yg saya berikan tinggal mengganti mjd (.post h2 ...).

      Hapus

    2. Berikut penggalan kode yg saya berikan, dan bagian - bagian yg perlu di perhatikan :

      (bag 1}=====================================
      .post {margin:.5em 0 1.5em;border-bottom:0px dotted $bordercolor;padding-bottom:1.0em;height:50px;}

      (bag 2}=====================================
      .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;}

      (bag 3}=====================================
      .post h3 a, .post h3 a:visited, .post h3 strong {display:block;text-decoration:none;color:#cc6600;font-weight:normal;}

      (bag 4}=====================================
      .post h3 strong, .post h3 a:hover {color:#333333;}

      (bag 5}=====================================
      .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;}
      ============================================

      - bag 1, anda bisa mengatur ulang nilai2-nya.
      - Bila ingin menggunakan bentuk,ukuran,warna font,atau tampilan judul post tetap seperti sebelumnya yg biasa anda pakai, anda tinggal menghilangkan pd (bag 2},(bag 3}, dan(bag 4}.

      Selamat mencoba semoga bermanfaat...

      Hapus

  44. Bagus gan, kunjung balik ea. www.aryx-world.blogspot.com

    BalasHapus

  45. saya mau tanya bagaiman kalau saya pgn munculin judulnya lebih dari 10 judul gt.

    BalasHapus
    Balasan

    1. Masuk Dasbor- Klik Setelan- Pilih Format :

      Pada poin "Tampilkan sebanyak mungkin", anda bisa atur berapapun judul posting yang akan anda tampilkan pada homepage


      semoga membantu....

      Hapus

  46. wahh bagus juga gan

    kunjungin juga yaaa untuk pengetahuan blog yang lainnya

    http://bimablogunik.blogspot.com

    BalasHapus

  47. ini gak bisa dipake di wordpress ya?

    BalasHapus
    Balasan

    1. Mohon maaf, saya masih belum faham dengan wordpress.

      Hapus
  48. Balasan

    1. Salam kenal juga sobat Amien melody...

      Hapus

  49. .maaf ka', kok dcoba dtmplate ane g' bsa ya? apnya yang salah? mohon dlihat di http://end-sr.blogspot.com

    BalasHapus
    Balasan

    1. Yang mempengruhi sehingga hanya judul artikel saja yg tampil adalah deretan kode CSS berikut:

      .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;}

      Dan setelah saya lihat blog anda, memang tidak ada misalnya id sprt ".post-body" pada template anda... itu yg mengakibatkan template anda tdk menerima CSS pada trik ini....

      Bila anda ingin gunakan trik seperti ini..., sebaiknya anda fahami dulu maksud CSS diatas, lalu anda ganti dengan id-id yg berhubungan dengan "post".

      Yaitu:
      id judul artikel (pd trik ini "h3"),
      id area post (pd trik ini ".post-body"),
      id area dibawah post (pd trik ini ".post-footer"),
      id gambar (pd trik ini ".post img"),
      dll.

      silahkan diotak-atik kode CSS-nya...
      selamat mencoba...

      Hapus

  50. Thankss agan petunjunya boleh jugaaaa ...

    BalasHapus

  51. makasih bos berhasil,,,.

    BalasHapus
    Balasan

    1. sama-sama, selamat ya... silahkan anda manfaatkan tutorial yg lain....

      Hapus

  52. Benar2 sangat membantu..

    Kunjungan balik ya mas di blog super amburadul saya..
    http://infopc-yogi.blogspot.com/2012/04/pulsa-elektrik-murah-semarang.html

    BalasHapus

  53. Mas kalo pengen gambarnya saja yang tidak ditampilkan di homepage gimana?

    BalasHapus
    Balasan

    1. Diantara deretan kode pada langkah 5, berikut yg menentukan tampil dan tidaknya: post-body, post-footer, comment-link, post img, post blockquote,dll.

      Tewpatnya pada bagian kode berikut:

      .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;}


      display:none artinya tidak ditampilkan pada homepage.


      OK.... semoga membantu ya....

      Hapus

  54. klo sya lebih suka yg pke gambar sob....
    tpi ni kheren kok nambah ilmu di dunia blog sya hhaha...

    BalasHapus

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI


Artikel Terbaru

POST POPULER

Entri Populer


ARSIP

Blog Archive

MY BLOG

Daftar Blog Saya

  • Cara buat web | Cara buat blog | Tutorial Blogger
    Dilihat sekilas memang recent post ini tampak seperti biasa, dan hanya tampil judul artikel saja. Tapi sebenarnya recent post ini memiliki tampilan yang l...
  • Rahasia Website Pemula
    Rahasia Website Pemula *7 Rahasia Membuat Website Bagi Pemula* *Khusus buat orang-orang yang masih gaptek !!!* RWP dalam Pelatihan Nyata (Offline) *B...
  • Rambak Jogja
    Silahkan Anda bisa manfaatkan forum ini untuk berkomunikasi dengan kami :

BLOGGER

HTML

CSS

JAVASCRIPT


BACKLINK

INFO

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.
Salam sukses selalu buat kita semua..... Amiiin.

CEO,
www.carabuatwebgratis.com
Noer cholis
Plosokuning V, Minomartani,
Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK




Baca artikel "Manfaat Tukar Link"

CHAT

CHAT

TESTIMONI

Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

RECENT COMMENT

Recent Comments


top down