Drop Down Menus

Tuesday, September 21, 2010

CARA MEMBUAT ARTIKEL POSTINGAN TAMPIL HANYA JUDULNYA SAJA...



...Membuat tampilan artikel postingan di Halaman Utama Blog tampil Minimalis atau hanya terlihat Judul artikel saja seperti yang terlihat di blog ecaknyo ini... 

 ..Hal ini tampaknya menjadi trend juga pada beberapa tampilan blog... adminnya berusaha membuat tampilan blognya sesimple mungkin tapi berkualitas.. salah satunya modifikasi cuplikan artikel postingan diblog...

...Ada ragam cara untuk membuat tampilan cuplikan postingan artikel di blog Minimalis... tapi disini saya akan membahas trik yang saya gunakan untuk meminimalis tampilan postingan artikel sehingga tampak judulnya saja beserta atribut jumlah komentar, tgl posting, label, dsb....

Oke.. langsung saja simak caranya...mudah saja... langkah-langkahnya sbb :
 
1.  Login ke blogger > Rancangan > Edit HTML > Edit Template ( Centang Expand Template Widget ) ...tekan CTRL+F lalu cari " <data:post.title/> " ... jika sudah ketemu lalu tambahkan kode dibawah ini...
<div style='border: 0px solid rgb(250, 252, 252); margin: 10px 0px; padding: 10px; -moz-border-radius: 0px 0px 0px 0px; width: auto; height: auto; background-color: rgb(250, 252, 252); '>

dan..

</div>
Lakukan Persis seperti contoh dibawah ini... Perhatikan ya cara penempatannya...
<div style='border: 0px solid rgb(250, 252, 252); margin: 10px 0px; padding: 10px; -moz-border-radius: 0px 0px 0px 0px; width: auto; height: auto; background-color: rgb(250, 252, 252); '>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
</div>

    </b:if>
Ket :
background-color: rgb(250, 252, 252); = Warna Background-nya bisa kamu ubah sesuai keinginan .. >> cek warna disini  

..Jika sudah benar... Simpanlah template-nya..

TRik ini akan membuat Judul artikel postingan seperti gambar dibawah ini...


2. Beralih ke Rancangan > Elemen Halaman > Klik Edit pada Posting bLog.. Lalu aturlah seperti gambar di bawah ini.. atau aturlah seperti kemauan kalian sendiri...


3. Saya pakai editor entri baru dari blogger ( Cek editor kamu di Pengaturan > Dasar > Setting Global > Editor Entri > Pilih option Editor yang diperbarui..) lalu pada awal postingan (tambahkan) klik Insert Jump Break, baru setelahnya isilah dengan postingan kita... Simple kan.. :)

4. Selesai... Terbitkanlah postingan... dan lihat hasilnya pada Halaman Utama Blogmu...

....tapi kalo terlalu minimalis malah aneh ya :D ....

88 comments:

  1. mantabs nih bang ...
    ijin disimpan tuk dipelajari.

    ReplyDelete
  2. @Warna Tulisan:

    silahkan dipelajari.. ini trik minimalis tampilan postingan artikel yg simple.. :)

    ReplyDelete
  3. nice post gan,

    kpan2 gw coba dah

    ReplyDelete
  4. Oooo... gitu...keren mas!hehe Salam blogger... :D

    ReplyDelete
  5. Ooia mas... gambar avatar yang ada d komentar saya ilang mas... kira2 yang kehapus kode yg mana ya mas? kalo tau kasi tau ya mas...hehe Makasih sebelumnya...

    ReplyDelete
  6. Wah klo ini kebetulan aku udah nyoba Sob... soalnya blogku yg lain cuma judul doank di Home hhe...... males pake2 read more hhe...


    Jiah.. kata2 terakhirnya.. tapi aneh ya? haha......

    ReplyDelete
  7. @irwan:

    silahkan kapan2 dicoba.. di save aj dulu gan.. :)

    ReplyDelete
  8. @Herlan:

    ..caranya mudah.. hasilnya yaaa lumayanlah bwt minimalis postingan artikel di hal.utama blog.. sm kayk trik lainnya.. :D

    ReplyDelete
  9. @Ferdinand:

    Siip.. baguslah kalo udah bisa... tapi masih byk ragam cara loh.. triknya pun berbeda-beda.. ngak tw sama kagak dg trik yg kupakai di tutor ini.. :)

    ReplyDelete
  10. Iy mas... keren yang minimalis template mah...hehe makasih banget mas komentar yang panjaaaaaaang banget!hehe... :)) tapi brmanfaat... d coba dlu deh mas... :D

    ReplyDelete
  11. @Herlan:

    semakin modern semakin minimalis ya.. liat aj rumah2 skrg..aplagi baju2 cewe model skrg.. minimalis smua...kekekekek.. naah template blog ikut2an jg.. :D ...hahahaha...

    ReplyDelete
  12. tips bgus gan.. Lagi2 sya dibwt bingung oleg template sya.. Kodex gag da yg spt itu.. Bntu gan.. Bingung kalo mslh html

    ReplyDelete
  13. @rudycyber:

    ..dicentang expand template widget-nya ya..

    ..coba cari "post:title" aj sob.. pake CTRL+F (ketik : post:title) sj biar lebih mudah.. :)

    ReplyDelete
  14. Pagi Sob.. aku datang hhe.. maaf nie telat... waktu aku bikin judul di home,,, masalah pertama yg muncul labelnya tetep kaya biasa... SOb.. baru tuh aku rubah lagi biar si label jadi judul doank... jadi kayanya klo diposting, lengkap tuh tutorialnya sob hhe.... cuma saran hhe....

    Semangat N happy blogging Sob...

    ReplyDelete
  15. Mas, ada award buat mas... kalo mau di ambil ya mas...hehe

    ReplyDelete
  16. hai braaada, gue punya blog baru nih..dah Q pasang Addthis, tapi setelah Q coba Share lewat facebook kok g muncul gambarnyanya,? hanya ada tulisan "TANPA JUDUL"
    kenapa?
    bisa bantu gak?
    silahkan cek di blog q yang baru http://www.downloadlagugratis.co.cc


    Q tunggu bantuannya loh..

    ReplyDelete
  17. keren keren keren...
    mbah ini y,slalu saja buat postingan tu yg lg bnyak dicari...
    like it....

    ReplyDelete
  18. @Ferdinand:

    gkppa telat.. yg penting kamu berkunjung & komen di blogku ini gan.. :)

    ReplyDelete
  19. @Herlan:

    wow.. mau dwong.. gw ambil ya awardnya.. thx bgt sob.. :)

    ReplyDelete
  20. @Ganden:

    itu mungkin ada masalah url blog di addthis-nya..kurang http:// atau memang dari addthis / facebook yg lagi bermasalah.. cuma saran sob.. kalo mw sharing posting artikel blog ke fesbuk bisa lewat NETWORKED BLOG yg sdh disediakan oleh fesbuk.. otomatis kalo kita posting di blog maka akan tampil pula di fesbuk..gw pake itu & selama ini tdk ada masalah.. ini lINK-nya >> http://networkedblogs.com/blog/

    ReplyDelete
  21. @sibutiz:

    hehe.. thx gan.. ntar gw berkunjung balik yaa.. :)

    ReplyDelete
  22. iya ya, jadi kelihatan judulnya saja, artikelnya masih tersembunyi, jadi menarik.
    terima kasih info dan tipsnya. bermanfaat.
    Bali Villas Bali Villa Villas in Bali

    ReplyDelete
  23. Terima kasih infonya, memang bener, yang tampil cuma judulnya saja, jadi lebih cantik ya. juga buat penasaran juga akan isinya.
    makasih tipsnya.
    Bali Villas Bali Villa Villas in Bali

    ReplyDelete
  24. @Ikutan Ngeblog:

    kamu punya 2 blog ya..itu terlihat dari komennya yg sama :D

    ReplyDelete
  25. assalamualaikum
    alhamdulillah saya masih diberi kesempatan untuk mempererat tali silaturahmi dan menyimak posting baru dari blog ini
    sungguh posting yang Anda sajikan selalu segar dan menarik untuk disimak
    saya juga masih harus banyak belajar
    nah kebetulan saya baru saja membuat posting baru
    silahkan untuk disimak dan diberi masukan
    saya tunggu kedatangan Anda di http://www.kangmusa.com
    terima kasih banyak
    salam hangat
    kangmusa

    ReplyDelete
  26. @Kang Musa:

    maksih... oke..ke TKP skrg sob :)

    ReplyDelete
  27. kok ga bisa ya??
    malah ada tulisan apa gitu, intinya ga bisa di save+ga bisa ke langkah ke-2....

    ReplyDelete
  28. Mantaap gan !!
    tuker link yuk ?
    di tunggu kedatanganya yah !!

    ReplyDelete
  29. ane mau link exchange , kebetulan sidebar rada kosong, tapi diaprove gak kalau saya pasang :)

    ReplyDelete
  30. kalau dikasih contohnya sekalian gimana?
    saya tungguu kelanjutanya...

    ReplyDelete
  31. bagus nih....mantap....
    nanti semplenya kaya apa|?

    ReplyDelete
  32. makasih boz infonya, udah dicoba tpi,karna template saya yang dulu berat, sekarang ganti template bru ehehe

    ReplyDelete
  33. halo bung lama gak jumpa
    tambah pinter aja

    ReplyDelete
  34. Nice Article, inspiring. Aku juga suka nulis artikel bidang bisnis di blogku : http://www.yohanwibisono.com, silahkan kunjungi, mudah-mudahan bermanfaat. thx

    ReplyDelete
  35. @weBi:

    heumm..itu berarti ada penempatan kode yang salah atau bisa juga ada kode html yg kurang..

    ReplyDelete
  36. @imam77:

    makasih gan..oke..xchange link.. sung k TKP ;)

    ReplyDelete
  37. @andrihdt:

    Xchange LInk ..boleh gan.. gw pasang skrg Link blogmu.. :)

    ReplyDelete
  38. @Data kami:

    kan contohnya sdh ada gan... secara Real time lagi...itu di Hal Utama blog ecaknyo ini.. :)

    ReplyDelete
  39. @Ganden:

    contohnya sdh ada tuh... secara Real time lagi...itu di Hal Utama blog ecaknyo ini.. :)

    ReplyDelete
  40. @gianogt:

    tes emo smiley ya.. tp js smileynya sdh aq remove gan.. :)

    ReplyDelete
  41. @hasbi:

    eeiitss... template baru ya..liaaat aaaah :D

    ReplyDelete
  42. @Yohan Wibisono:

    tentu gan.. gw akan berkunjung ke blogmu.. :)

    ReplyDelete
  43. keren nih blog, simple tapi padat berisi. :))

    ReplyDelete
  44. bang, gimana caranya supaya artikel di frontpage tampil normal (bukan cuma judulnya) tapi archive per kategori bisa tampil cuma judulnya aja? btw, tuker link sama ecaknyo gimana ya?

    ReplyDelete
  45. Nice article. Tapi kalau saya sendiri sih minimal lebih suka menampilkan gambar preview pada artikelnya biar yg berkunjung bisa dapat gambaran soal artikel yg akan mereka buka :D

    ReplyDelete
  46. nice post sobat....

    salam knl aja ya....

    sukses slalu sobat

    ReplyDelete
  47. Really appreciate you sharing this article post.Thanks Again. Really Cool.

    ReplyDelete
  48. salam kenal, kunjunganblik ditunggu di sini http://ramlannarie.wordpress.com/ dan http://ramlannarie.blogspot.com/

    ReplyDelete
  49. bagus juga mas tutorialnya apalagi buat gw yg nebwie :D , link balik ya mas , link blog mas ada di blog aku ... thanks

    ReplyDelete
  50. @Resensi Film:

    ow..itu tinggal diatur di Pengaturan> Format > di Tampilkan sebanyak mungkin isi dg 1 Posting.... nanti otomatis di halaman blog akan tampil 1 hal penuh postingnya...

    kalo mau nampilin arsip perkategori hanya judulnya saja itu sdh byk yg bahas di blogger.. tapi sobat mesti nambahin widget ini secara manual..alias utak-atik script HTML..ntar kalo sy ad byk waktu luang mudah2an bisa sy bahas (bantu).. :)

    ReplyDelete
  51. @Republican Wasp:

    ..betul gan.. emg tampilan blog tergantung empunya maunya gimana.. lebih unik makin asik.. :)

    ReplyDelete
  52. @Tutorial Edit Blog:

    Slm knal jg sobat.. smoga sukses jg.. :)

    ReplyDelete
  53. thanks bos
    http://endriagus.blogspot.com/

    ReplyDelete
  54. postingnya bagus, salam kenal n' met berkunjung balek.

    ReplyDelete
  55. @DEALER PULSA MURAH:

    sama2 gan... gw Follow balik ya.. thx ;)

    ReplyDelete
  56. @kangmahfudz:

    waduh kang.. pake domain co.cc ya... soalnya domain itu kena blok di t4ku krj.. jd blm bisa kunjung balik.. tapi nanti gw akan kunjungi balik..

    ReplyDelete
  57. @Andi Wong: udah saya coba di blogger saya.. tapi kok jadi nya pendek banget yya :D

    ReplyDelete
  58. @nisa sanjaya:

    betul gan.. mmng utk nampilin jdul posting doang.. :D

    ReplyDelete
  59. Tx atas manfaat artikelnya sob...
    Sukses !!!

    ReplyDelete
  60. wadohhh gan kok triknya gk bisa di blog ayae plis donk ah malah hilang jdulnya bowzzz

    ReplyDelete
  61. minta cara buat menu yang kalo di klik ntar ada tulisannya ke bawah tu gimana ea ...........lam knal

    ReplyDelete
  62. http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif

    ReplyDelete
  63. sep nih om...
    sukses yah om ..?? ^_^

    ReplyDelete
  64. maaf,pak saya masih pusing tolong kirimi email ke ebook.32@gmail.com...
    atau bisa mampir ke http://www.bloggame.co.cc

    ReplyDelete
  65. wah bagus itu infoya . please untuk datang ke blog kami ini dan jgn lupa follow yah www.master-blog-lamongan.blogspot.com :-o

    ReplyDelete
  66. hmm... makasih ya... kan saya coba nanti...

    ReplyDelete
  67. Mantap gan..ni yg ku cari2. smoga berhasil. thanks to infonya gan

    ReplyDelete
  68. This comment has been removed by the author.

    ReplyDelete
  69. mantap gan....
    joit blog aku juga ya..
    http://all-4you-download.blogspot.com/

    ReplyDelete
  70. bagus.......... selamt bos

    ReplyDelete
  71. tapi kok punya ku gk ada y bossssssssss

    ReplyDelete
  72. kunjung balik ea ke http://fajar-juli.blogspot.com
    dan follow .aku sudah follow

    ReplyDelete
  73. kaya'nya keren ya tampilannya..

    ReplyDelete

Berkomentarlah dengan sopan dan jangan membuat spam...

Previous Next Home