Tampilkan postingan dengan label Tanya Saja. Tampilkan semua postingan
Tampilkan postingan dengan label Tanya Saja. Tampilkan semua postingan

Jumat, 13 Agustus 2010

Tips menampilkan postingan hanya judulnya saja

Fasilitas ‘Tanya Saja!” kolom tutorial rupanya banyak mendapatkan perhatian dari para pengunjung. Puluhan pertanyaan telah masuk, sebagian sudah dijawab secara langsung dan ada juga yang melalui postingan untuk pertanyaan yang memang memerlukan jawaban yang lebih rumit. Yang pertanyaannya belum dijawab, mohon sabar yah, mudah-mudahan nanti bisa terjawab Happy

Pertanyaan :

Kang Rohman... sebelumnya saya minta maaf kl email saya menggangu, saya ingin tanya kang, gimana caranya menampilkan postingan yg hanya tampil judul postingannya saja

Jawaban :

Memang, beberapa blogger memilih blognya hanya menampilkan judul posting saja pada halaman depan atau home page. Mungkin dasar pemikiran dari pemilik blog itu sendiri adalah menampilkan hanya judul posting saja dapat menghemat ruang sehingga jumlah post yang ditampilkan bisa lebih banyak pada halaman depan atau beranda. alasan pendukung lainnya mungkin karena judul posting sangat mewakili isi dari posting itu sendiri sehingga dengan menampilkan judul posting di halaman depan lebih memungkinkan artikelnya akan lebih banyak di baca oleh para pengunjungnya. Berikut contoh blog yang hanya menampilkan judul post nya saja :

judul posting

Agar pada halaman depan hanya menampilkan judul posting saja, berikut langkah-langkahnya :

  • Silahkan login ke blogger dengan ID anda.
  • Klik Rancangan

      rancangan 

  • Klik menu Edit HTML.

    edit html

  • Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.

    backup template

  • Carilah kode ]]></b:skin>
  • Copy kode berikut, lalu paste di bawah kode ]]></b:skin>
         
    <style type='text/css'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    .post-body{display:none;}
    </b:if>
    </b:if>
    </style>



  • Klik tombol SIMPAN TEMPLATE.


  • Selesai. Silahkan lihat hasilnya.



Mudah bukan? namun, dengan memasang kode diatas masih menyisakan beberapa elemen seperti tanggal posting, komentar dan yang lainnya. Jika anda ingin menghilangkan semuanya dan yang tersisa hanya judul post nya saja, mungkin anda bisa menggunakan kode berikut :



     
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>


Jika ternyata masih ada elemen tersisa selain judul post, mungkin kode template anda tidak mengikuti standar template blogger. Bagaimana solusinya? anda harus mengenali struktur template anda.



Bagi anda pengguna browser internet firefox, kang Rohman punya tips mudah mengenali struktur template anda yaitu dengan menginstall add-ons Web Developer yang bisa anda download di add-ons for firefox.



Sekarang kang Rohman anggap anda telah menginstall add-ons web developer pada firefox yang anda gunakan. Silahkan buka alamat blog anda ( tentunya yang akan di edit sesuai artikel diatas ). Klik menu Information, kemudian pilih Display Div Order.



div order



Maka secara otomatis akan ditampilkan struktur div dari template anda. Contoh gambar :



struktur div



Dari gambar tersebut terlihat bahwa tanggal posting serta komentar disimpan dalam elemen div :



.databarleft



.datebarright



 



Sehingga kode yang digunakan menjadi seperti ini :



     
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .databarleft, .datebarright{display:none;}
</b:if>
</b:if>
</style>


Semoga bisa difahami.


Update : kode telah di sempurnakan agar tidak konflik dengan static page / static post

Rabu, 04 Agustus 2010

Hilangkan Widget Post di Homepage

Posting ini merupakan sesi dari “Tanya saja!” di kolom tutorial.

Penanya :

kang punten bade tumaros. Gmn caranya supaya ketika orang masuk ke blog kita, yamg pertama dilihat selalu halaman awal/home (biasanya di posting terakhir, kayak di situs2 .com, .net atau apapun juga.
Hatur nuhun

Kang Rohman :

Saya kurang ngerti pertanyaannya. apa yang dimaksud adalah intro, kaya gambar2 flash gitu?

Penanya :

kayaknya bukan intro. Maksud saya ketika pengunjung masuk ke blog saya maka yang pertama kali kebuka itu selalu halaman awal (home), karena setahu saya biasanya yang pertama kali kebuka adalah postingan terakhir. hatur nuhun

Dari keterangan yang kedua, diketahui bahwa yang diinginkan adalah agar halaman posting tidak muncul dihalaman depan alias homepage. Apakah ini bisa diterapkan pada template blogger? jawabannya adalah bisa. Anda hanya cukup menambahkan kode if condition saja.

Teknik yang bisa digunakan bisa dengan if condition pada kode CSS atau bisa juga langsung pada kode HTML.  Sebagai contoh, kang Rohman akan menggunakan teknik if condition pada kode HTML.

Kode widget post, didalam template blogger umumnya adalah seperti berikut :

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

 


Agar widget post atau halaman posting tidak muncul dihalaman depan aka homepage, anda cukup menambahkan kode seperti ini ( warna hijau )


<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</b:if>

Kode yang berwarna hijau adalah agar widget post tidak muncul pada halaman depan saja, namun akan muncul pada halaman single post, kategori, pencarian, arsip dll. Intinya kode tersebut hanya menghilangkan dari halaman depan saja.


Selain kode tersebut, anda juga bisa menggunakan kode berikut (warna hijau) :


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</b:if>

 


Kalau yang ini lebih sedikit ekstrim. Widget post atau halaman posting hanya akan muncul pada halaman single post saja ( halaman apabila posting tersebut dibaca secara keseluruhan atau hanya pada URL posting itu saja ). Jadi, pada halaman lain seperti halaman kategori, halaman arsip, halaman pencarian dan lain-lain tidak akan muncul.


Nah, mau pilih yang mana? silahkan sesuaikan dengan keinginan atau kebutuhan.


Trik menghilangkan Widget post di homepage


Berikut tutorial lengkap bagaimana implementasi penempatan kode diatas :



  1. Silahkan login ke blogger dengan ID anda.

  2. Klik Rancangan

       



  3. Klik menu Edit HTML.



  4. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.



  5. Carilah kode berikut pada template anda :
    <b:section class='main' id='main' showaddelement='no'> 
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>


  6. Gantilah kode tersebut dengan kode berikut ini :
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
    </b:if>


  7. Klik tombol SIMPAN TEMPLATE.

  8. Selesai.


Satu yang harus anda ingat yaitu pada halaman depan alias homepage, anda harus memasang link ke postingan yang dimaksud, bisa pada menu navigasi, link disidebar atau dimanapun agar pengunjung bisa mengakses isi postingan anda.


Trik diatas, kang Rohman rasa cocoknya adalah untuk blog yang statis seperti blog jualan atau toko online yang jarang melakukan update post, dan tentunya kurang cocok untuk format blog yang postingannya sering diupdate.


Ada masukan dari anda?

Selasa, 27 Juli 2010

Pasang Tombol Facebook Like di blogger

Posting berikut merupakan realisasi dari fasilitas “Tanya Saja!” yang di luncurkan kang Rohman. Dan berikut adalah pertanyaan yang masuk ;

 

Kang saya mau tanya. Gimana ya cara buat di setiap postingan ada script "Like" kaya di facebook?

Jawaban :

tombol-facebook-like Yang dimaksud Script Like dari pertanyaan diatas mungkin adalah tombol Facebook Like yang seperti

ada di facebook kali yah, koreksi jika salah Winking.

 

Tombol facebook Like berfungsi untuk mempermudah pengunjung blog anda untuk berbagi atau merekomendasikan artikel anda ke teman-teman mereka yang ada di facebook. Hal ini tentu saja apabila postingan anda dirasa bermanfaat bagi mereka dan ingin memberitahukan kepada teman-temannya.

Memasang tombol facebook like merupakan salah satu trik untuk mendapatkan jumlah pengunjung yang melimpah dari mereka para penggemar facebook, mengingat facebook merupakan situs jejaring sosial paling populer saat ini. Jadi, bagaimana cara memasang tombol facebook like di blogger?

 

Cara mengambil kode Tombol Facebook Like

Pada dasarnya, untuk mendapatkan tombol face book like, anda bisa mengambil dari halaman Facebook develover. Anda tinggal memasukkan beberapa settingan dan kode facebook like akan di generate.

Namun, agar tidak repot khusus untuk tombol facebook like yang kan di pasang di postingan blogger berikut adalah kodenya :

 

<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>


Cara pasang tombol Facebook Like di postingan blogger



Untuk pemasangan tombol facebook like, pertama yang harus dipikirkan adalah dimana anda akan memasangnya? diatas postingan atau di bawah postingan? hal lainnya yaitu apakah tombol tersebut akan muncul terus baik di halaman depan ( homepage) ataupun didalam postingan? atau hanya ingin muncul dihalaman depan saja (homepage)? atau mungkin anda hanya ingin tombol tersebut hanya muncul didalam posting saja?



Secara mendasar, kode posting blogger adalah seperti ini :



 



<data:post.body/>



 



Logika sederhana, apabila anda ingin memasang tombol facebook like diatas posting, tinggal simpan saja diatas diatas kode yang tadi. Sebaliknya, jika anda ingin memasangnya di bawah postingan, tinggal disimpan dibawahnya saja. berikut ilustrasi dasarnya :



Agar tombol letaknya muncul diatas posting :





< kode tombol facebook like  disini >



<data:post.body/>



 



Agar tombol letaknya muncul dibawah posting :





<data:post.body/>



< kode tombol facebook like  disini >



 



Agar tombol facebook like hanya muncul  di halaman depan saja (homepage) :



 



<b:if cond='data:blog.url == data:blog.homepageUrl'>



<data:post.body/>



< kode tombol facebook like  disini >



</b:if>



 



Agar tombol facebook like hanya muncul  di halaman posting saja (single post) :





<b:if cond='data:blog.pageType == &quot;item&quot;'>



<data:post.body/>



< kode tombol facebook like  disini >



</b:if>



 



Diatas hanyalah sebagai ilustrasi saja. Berikut adalah cara sebenarnya untuk memasang tombol facebook like, namun sebagai contoh saja, kang Rohman akan mencontohkan untuk pemasangan di bawah posting dan akan muncul baik di homepage ataupun di single post.



 




  1. Silahkan login ke blogger dengan ID anda.


  2. Klik Rancangan.

    rancangan




  3. Klik tab Edit HTML.

    edit html




  4. Lakukan backup terlebih dahulu template anda dengan klik Download Template Lengkap. 

    backup template



  5. Beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget.

    expand template




  6. Silahkan cari kode berikut pada template anda ( tips : gunakan fasilitas find pada browser anda agar lebih cepat dalam pencarian, tekan Ctrl+F untuk mengaktifkan, lalu masukkan kode yg dicari).

     


    <data:post.body/>

     




  7. Copy kode berikut, lalu paste dibawah kode yang tadi :



    <iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>


     



    code




  8. Klik tombol SIMPAN TEMPLATE.


  9. Selesai.



Untuk variasi lain, silahkan mengacu pada ilustrasi yang telah kang rohman tuliskan diatas.



 



Bagi pengguna wordpress.org, anda pun bisa memasang tombol ini di blog, caranya? Posting berikutnya kali yeh Winking