> Cara hanya menampilkan judul posting saja pada halaman depan blog

Sabtu, 26 November 2011

86

Cara hanya menampilkan judul posting saja pada halaman depan blog

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



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. Mengingat cara ini memang sangat efisi...

Rating : 6.4 Dari 10, Berdasarkan 8600+ Dari 86 000+ Pengunjung.



86 komentar:

  1. 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
  2. Keren gan.... tutorialnya sangat membantu, terima kasih

    BalasHapus
  3. sama-sama.... sering-sering berkunjung ya....

    BalasHapus
  4. gan kalau misalkan mau gambar sama titlenya gmn,.,.,
    thx

    BalasHapus
  5. 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
  6. sejenak membaca hhi

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

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

    BalasHapus
  7. sama-sama.... sering-sering berkunjung ya....

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

    http://gilimenuk.blogspot.com/

    BalasHapus
  9. Blognya bagus mas. Tutorialnya oke2.
    Salam kenal.

    BalasHapus
  10. Dwik...., terima kasih... dan salam kenal juga.

    BalasHapus
  11. 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
  12. makasi gan atas wajengannya, ane mau coba dulu yach semoga berhasil, dan sukses selalu buat agan

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

    BalasHapus
  14. 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
  15. 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
  16. Andi Mubarok..., OK... semoga bermanfaat.

    BalasHapus
  17. Ary_Putra..., sama-sama... Semoga bermanfaat

    BalasHapus
  18. Rouftracal..., sama-sama... Semoga bermanfaat

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

    BalasHapus
  20. dokunimus..., sama-sama... Semoga bermanfaat

    BalasHapus
  21. 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
  22. 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
  23. MAS TOLONG BERI SARAN BLOG SAYA DIMAN KEKURANGANNYA
    http://rencong21.blogspot.com/ MOHON DIBERI TAU CARA MEMASANG GAMBAR PADA JUDUL BLOG
    TERIMAKASIH

    BalasHapus
  24. iya aku lupa, udah berhasil ini . Terimakasih!

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

    BalasHapus
  26. 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
  27. Gan, kalo buat slideshow judul posting dalam bentuk gambar di hal prtama blog gimana?!!!

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

    BalasHapus
  29. gan, ko tulisannya jadi numpuk dan berjubel..?

    BalasHapus
  30. 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
  31. Bagus gan, kunjung balik ea. www.aryx-world.blogspot.com

    BalasHapus
  32. 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
  33. wahh bagus juga gan

    kunjungin juga yaaa untuk pengetahuan blog yang lainnya

    http://bimablogunik.blogspot.com

    BalasHapus
  34. ini gak bisa dipake di wordpress ya?

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

      Hapus
  35. 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...

    BalasHapus
  36. Thankss agan petunjunya boleh jugaaaa ...

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

      Hapus
  38. 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
  39. 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
  40. klo sya lebih suka yg pke gambar sob....
    tpi ni kheren kok nambah ilmu di dunia blog sya hhaha...

    BalasHapus
    Balasan
    1. terima kasih... selera orang memang banyak macamnya...

      Hapus
  41. kalau menampilkan postingan pada halaman gimana mas?

    BalasHapus
  42. thanks gan infonya, udah ane praktekin dan berhasil.

    BalasHapus
  43. Ternyata simple ya..makasih Mas tutor nya,bermanfaat sekali

    BalasHapus
  44. makassehh..... bikin blog gua jadi enak dilihat......////

    BalasHapus
  45. keren sob...makasi infox...ditunggu kunjungn baliknya sob...

    BalasHapus
  46. Gan , kalaw mau menampilkan Judul sama gambar tanpa ada isi deskripsi
    gmna gan ????

    BalasHapus
  47. terima kasih tutorialnya Pak

    BalasHapus
  48. Wah makasih tutorialnya
    Sy mau coba di blog mobil rentalku di bandung

    Thanks banget
    http://putriratu-rentcar.blogspot.com

    BalasHapus
  49. Saya Coba dulu Gan
    Makasih ilmunya

    BalasHapus
  50. terimakasih infonya gan,saya coba dulu ya......

    BalasHapus
  51. makasih informasinya,,,
    mau tanya bang,,blog saya isi artikel tidak muncul/tidak ada jdi cuma judul saja cara benerinya gimana bang ..
    mkasih..
    http://prastypunya.blogspot.com

    BalasHapus
  52. ijin coba dulu sob , terimakasih sudah berbagi info..

    BalasHapus
  53. makasih tips nya mas, kn jd lbh simple tampilannya

    BalasHapus
  54. thx tutornya..... kalau yang buat menampilkan feed post cuma tampil dihalaman postingan untuk blogspot ada gak gan?

    BalasHapus
  55. makasih gaann,,, udah berhasil..
    kunjungi yaaa wikipebrianto.blogspot.com

    BalasHapus
  56. terima kasih infonya gan... sangat bermanfaat sekali.. :)

    baru belajar bikin blog nih ane gan.. :D
    bantuin yaa,,hehehe
    ditunggu kunbal nya gann... www.wikipebrianto.blogspot.com

    BalasHapus
  57. trik saya aplikasikan tapi kenapa diikuti kotakputih,maklum masih coba

    BalasHapus

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI

Artikel Terbaru

POST POPULER

Entri Populer



BLOGGER

Comments

HTML

Side Ads

CSS

Footer Ads

JAVASCRIPT

Random News


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.

CEO
BLOG MAS NOER

Noer cholis


Plosokuning V, Minomartani, Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK






Baca artikel "Manfaat Tukar Link"













Baca artikel "Manfaat Tukar Link"

LINK SAHABAT

LINK SAHABAT


CHAT

CHAT




TESTIMONI

Follow Us

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