Tampilkan postingan dengan label tutorial blog. Tampilkan semua postingan
Tampilkan postingan dengan label tutorial blog. Tampilkan semua postingan

Jumat, 12 November 2010

Batasi label Yang Tampil Di Blogger

Sudah lama tidak menjawab pertanyaan pertanyaan yang ada melalui blog. Berikut salah satu pertanyaan yang masuk  ke email kang Rohman :

Maaf Kang Rohman...
Untuk menampilkan jumlah postingan di blogspot kan kita setting di PENGATURAN > FORMAT > TAMPILKAN SEBANYAK MUNGKIN > lalu kita isi angka untuk menentukan tampilan tsb.
Nah, kalau untuk menampilkan jumlah postingan dengan LABEL tertentu gimana ya ?
Karena di blogku jumlah tampilan saya setting 8, namun saat kita tampilkan jumlah postingan dengan LABEL tertentu koq tampil semua ya.. (lebih dari 8).
Bagaimana cara mengatasi ini....?
mohon dikirim ke emal saya ya agar saya tahu jawabannya ?

Sebuah label, apabila diklik memang akan menampilkan seluruh label tersebut, namun kita bisa saja membatasi berapa jumlah yang ingin ditampilkan dalam satu halaman, akan tetapi anda harus menyisipkan sedikit kode tambahan dalam label tersebut. Kode tersebut adalah seperti berikut :

 

?max-results=5

Angka 5 adalah jumlah label yang ingin di tampilkan, angka tersebut tentu saja harus di ganti dengan angka yang anda inginkan. namun, itu berlaku apabila memunculkan label secara manual.

Format dasar alamat sebuah label adalah seperti ini :

http://namablogmu.blogspot.com/search/label/namalabel

 

Misal kang rohman mempunyai label dengan nama blog tutorial, maka alamatnya seperti ini :

 

http://kolom-tutorial.blogspot.com/search/label/blog%20tutorial

 

Posting yang ber label blog tutorial sangat banyak sekali, sehingga apabila ada pengunjung yang mengakses alamat tersebut akan di tampilkan semua postingnya. Apabila label tersebut ingin di batasi, cukup menambahkan kode pembatasnya, misal :

 

http://kolom-tutorial.blogspot.com/search/label/blog%20tutorial?max-results=5

 

Namun, untuk menambahkan kode pembatas yang mengambil dari database blogger, maka kode yang di tambahkan adalah seperti ini :

+ "?max-results=5"

Misalkan seperti ini :

 

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>


 



Maka kodenya jadi seperti ini?



 



<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>


 



Ah kang Rohman bikin bingung nih At wits end. hehehe emang itu bagi yang sudah sedikit mengerti akan kode template blogger. bagi yang masih bingung mungkin bisa langsung praktik cara berikut. Namun, pastikan anda sebelumnya telah memasang gadget Label atau Kategori, baik itu label dalam bentuk List ataupun dalam bentuk Label Cloud.





labels



 




  1. Login ke blogger dengan ID anda.


  2. Klik Rancangan.


    rancangan


  3. Klik tab Edit HTML.

    edit html


  4. Biasakan untuk melakukan backup, klik pada tulisan Download Template Lengkap.


    backup template


  5. Klik kotak kecil di samping tulisan Expand Template Widget.

    expand template widget


  6. Carilah kode yang mirip seperti berikut :

    <ul>

          <b:loop values='data:labels' var='label'>


            <li>


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


                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>


              <b:else/>


                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>


              </b:if>


              <b:if cond='data:showFreqNumbers'>


                <span dir='ltr'>(<data:label.count/>)</span>


              </b:if>


            </li>


          </b:loop>


          </ul>




  7. Tambahkan kode pembatasnya, sehingga menjadi seperti berikut :

     


    <ul>


          <b:loop values='data:labels' var='label'>


            <li>


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


                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>


              <b:else/>


                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>


              </b:if>


              <b:if cond='data:showFreqNumbers'>


                <span dir='ltr'>(<data:label.count/>)</span>


              </b:if>


            </li>


          </b:loop>


          </ul>

     





  8. Itu adalah untuk yang label dalam bentuk list, untuk yang label cloud anda tinggal menggeser sedikit ke bagian bawahnya, dan nanti akan ditemui kode mirip seperti berikut :



    <b:loop values='data:labels' var='label'>

            <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>


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


                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>


              <b:else/>


                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>


              </b:if>


              <b:if cond='data:showFreqNumbers'>


                <span class='label-count' dir='ltr'>(<data:label.count/>)</span>


              </b:if>


            </span>


          </b:loop>

        


  9. Tambahkan kode pembatasnya sehingga kodenya jadi seperti berikut :

    <b:loop values='data:labels' var='label'>

            <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>


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


                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>


              <b:else/>


                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>


              </b:if>


              <b:if cond='data:showFreqNumbers'>


                <span class='label-count' dir='ltr'>(<data:label.count/>)</span>


              </b:if>


            </span>


          </b:loop>




  10. Klik tombol SIMPAN TEMPLATE.


  11. Selesai.



Selamat mencoba!

Rabu, 03 November 2010

Kolom Tutorial on Mobile

mobile Perkembangan teknologi semakin canggih, untuk mengakses internet pun tidak hanya di lakukan dengan menggunakan Personal Komputer ataupun Laptop namun sudah dengan Mobile phone atau hand phone.

Sebelumnya, blog kang Rohman ini yakni kolom tutorial sangat tidak nyaman apabila di akses menggunakan mobile phone. Oleh karenanya, khusus bagi anda pengguna mobile phone dan ingin mengakses blog kang Rohman, silahkan gunakan alamat berikut :

 

 http://buzzcity.mobi/kolomtutorial

 

Semoga dengan ini anda dapat lebih nyaman dalam mengakses bloh kang Rohman.

 

Thanks to Buzzcity atas layanan ini.

Kamis, 14 Oktober 2010

Upload Logo Di The Mez Template

Ketika pertama kali anda menginstall The mez Template pada blog anda, tentunya yang ada adalah sebuah judul yang berupa tulisan dan bukanlah sebuah logo. Jika anda berniat untuk mengganti judul tersebut dari tulisan menjadi logo, maka anda dapat melakukannya dengan mudah.

logo the mez template

Mempersiapkan Logo

Langkah pertama yang harus anda lakukan tentu saja adalah mempersiapkan atau membuat sebuah logo untuk nanti di upload ke blog anda. Ukuran yang di sarankan adalah lebar 300 pixel dan tinggi 100 pixel. Jika anda menginginkan logo yang lebih besar, anda perlu mengubah sedikit kode pada CSS.

Warna latar logo yang disarankan adalah sesuai dengan warna latar template yaitu abu-abu atau gray ( kode hexa #D8D7D8 ), atau buat logo dengan latar transparan dengan format .png. Contoh Logo :

logothemez

Upload Logo

Berikut adalah langkah-langkah untuk mengupload logo yang anda miliki pada the mez Template.

  1. Login ke blogger dengan ID anda.
  2. Klik Rancangan.

    Rancangan

  3. Klik Tab Elemen Halaman jika anda belum berada pada tab tersebut.

    Elemen Halaman

  4. Alihkan perhatian ke sebelah tengah monitor, klik pada Edit di Elemen yang berjudul sama dengan judul blog anda.

    edit logo

  5.  

    Setelah keluar jendela baru, pilihlah radio button untuk Dari komputer Anda kemudian klik tombol Browse… lalu pilih file logo yang ada di komputer anda. Untuk penempatan, pilih radio button untuk Selain judul dan keterangan. Klik SIMPAN.

    upload logo

  6. Selesai.

Kini blog anda telah mempunyai logo. Selamat menikmati The mez Template.

Tampilkan Blogger Navbar Di The Mez Template

Menghilangkan blogger Navbar masih menjadi perbincangan yang belum ada jawaban yang pasti., ada yang bilang melanggar TOS dan ada juga yang mengatakan tidak ada masalah. Kang Rohman sendiri tidak menampilkan navbar tersebut dalam hitungan waktu yang cukup lama, namun sepertinya aman-aman saja.

Secara default, pada The Mez template blogger navbar tidak di tampilkan. Nah, bagi anda yang merasa khawatir bahwa menghilangkan navbar blogger itu melanggar TOS nya blogger dan ingin menampilkan navbar blogger pada the mez template, berikut langkah-langkahnya :

  1. Login ke blogger dengan ID anda.
  2. Klik Rancangan.

    Rancangan

  3. Klik Tab Elemen Halaman jika anda belum berada pada tab tersebut.

    Elemen Halaman

  4. Alihkan perhatian ke sebelah tengah monitor, klik pada Edit di Elemen yang berjudul Delete this element to display blogger navbar.

    edit elemen

  5. Setelah muncul jendela baru, klik tombol HAPUS.

    hapus elemen

  6. Selesai.

Kini navbar blogger akan tampil secara normal setelah anda menghapus elemen tersebut.

blogger navbar

Saran dari kang Rohman, jika anda memutuskan untuk tidak menampilkan navbar blogger di blog anda, jangan lupa untuk membuat sebuah link ke situsnya blogger di halaman depan.

Tambah Link navigasi di The Mez Template

Ini merupakan dokumentasi dari The Mez Template agar anda mengerti bagaimana cara menggunakan template tersebut. Jadi, tanyakan dari sekarang apabila anda mempunyai pertanyaan seputar The Mez Template. Untuk dokumen pertama akan di bahas bagaimana cara menambah link navigasi pada di the mez template.

the-mez-navigasi-link

Mempersiapkan Link

Langkah pertama yang harus anda siapkan adalah alamat URL atau link yang akan anda masukkan ke dalam tab navigasi. Link tersebut bisa dari URL posting blog anda, URL Halaman statis, atau URL blog lain yang anda kehendaki.

Sebagai contoh, kita akan menggunakan URL posting serta URL halaman statis dari blog anda sendiri, bagi anda yang masih merasa bingung, berikut adalah contoh langkahnya :

Kunjungilah blog anda sendiri, lalu pilih posting mana yang akan anda masukkan URL nya ke dalam tab navigasi, umumnya posting yang dimasukkan ke dalam link navigasi adalah posting yang anda anggap penting dan sekiranya ingin sering di buka oleh pengunjung blog anda.  Untuk menyimpan alamat link tersebut, klik kanan pada judul artikelnya, kemudian pilih Copy Link Location ( untuk browser FireFox ) atau Copy Shortcut ( untuk internet Explorer ), kemudian paste pada notepad atau program text editor yang lainnya.

copy link location

Begitupun untuk URL Halaman statis, caranya hampir sama.

 

Mempersiapkan Keyword atau Kata Kunci

Jika anda telah mempunyai alamat link yang diinginkan, langkah selanjutnya adalah mempersiapkan keyword atau Kata Kunci yang diinginkan. Yang di maksud kata kunci disini adalah tulisan yang akan tampil pada tab navigasi nanti. Misalkan untuk halaman-halaman tersebut akan menggunakan kata kunci :

  • Tentang Kami
  • Kontak
  • Dll

Memasukkan Link serta Kata Kunci ke Tab Navigasi

Ini merupakan langkah terakhir agar tab navigasi anda berfungsi sebagaimana mestinya, silahkan ikuti langkah-langkah berikut ini :

  1. Login ke blogger dengan ID anda.
  2. Klik Rancangan.

    Rancangan template

  3. Klik Tab Elemen Halaman jika anda belum berada pada tab tersebut.

    elemen halaman

  4. Alihkan perhatian ke sebelah kanan monitor, klik pada Edit di Elemen yang berjudul Head Menu.

    edit head menu

  5. Setelah Muncul Jendela baru, isi kolom URL Situs Baru dengan link yang tadi telah dipersiapkan, kemudian isi Nama Situs Baru dengan kata kunci yang anda inginkan. Ulangi langkahnya untuk link yang lainnya. Akhiri dengan klik tombol SIMPAN.

    konfigurasi menu navigasi

  6. Selesai.

Gampang bukan? karena The Mez template di rancang agar anda mendapatkan kemudahan dalam menggunakannya.

Happy Blogging!

Minggu, 26 September 2010

Tambah Title Pada Judul Post blogger

Menurut para SEO expert yang kang rohman baca dalam bukunya, salah satu faktor kecil penunjang terhadap SEO adalah dengan membubuhkan title terhadap link. Title link yang di maksud disini adalah ketika sebuah link disorot oleh mouse komputer,akan keluar sebuah tulisan kecil.

title-post-hover

Dari yang kang Rohman perhatikan, theme-theme untuk wordpress sejak dahulu telah menerapkan fungsi hover title link pada judul post atau judul artikel sehingga apabila sebuah judul post disorot maka akan keluar title dari judul post tersebut. Sayangnya, lagi-lagi dari yang kang Rohman perhatikan template blogger jarang sekali menerapkan teknik tersebut, kenapa yah?

Walaupun ini bukanlah teknik SEO yang penting, tapi kang Rohman sendiri berpendapat bahwa tidak ada salahnya untuk menerapkan trik tersebut, dan mudah-mudahan ada sedikit pengaruhnya terhadap SEO.

Kini blog kang Rohman telah menerapkan teknik tersebut :

hover-title-post

Bagi anda yang berminat ingin menerapkan teknik ini pada template blogger anda, silahkan untuk mengikuti langkah-langkah berikut :

  • Silahkan login ke blogger dengan ID anda
  • Klik Rancangan

    rancangan

  • Klik tab menu Edit HTML.

    tab edit HTML

  • Lakukan backup template dahuulu untuk keamanan. Klik Download Template Lengkap

    download template lengkap

  • Setelah proses backup selesai, klik kotak kecil disamping tulisan Expand Template Widget expand template widget
  • Carilah kode seperti dibawah ini :

    <a expr:href='data:post.link'><data:post.title/></a>





  • Hapus kode tadi lalu ganti dengan kode berikut :



    <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>





  • Lalu cari kembali kode seperti ini :



    <a expr:href='data:post.url'><data:post.title/></a>





  • Hapus kode tadi lalu ganti dengan kode berikut :



    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>





  • Klik tombol SIMPAN TEMPLATE.


  • Selesai. Silahkan lihat hasilnya, seharusnya judul post anda sudah memiliki link title.



Teknik diatas hanyalah memasukkan keyword judul post ke dalam link judul post. Pada dasarnya, kode yang ditambahkan adalah seperti ini :



expr:title='data:post.title'



 



Jika anda ingin variasi lain, misalkan blog anda mempunyai keyword andalan lalu ingin memasukkan ke dalam title tersebut, itu bisa dilakukan. Misalkan kang rohman membidik keyword “ Tutorial Blog “, maka variasi kodenya adalah seperti ini :





<a expr:href='data:post.link' expr:title='&quot;Tutorial blog : &quot; + data:post.title'><data:post.title/></a>


 



Serta



 



<a expr:href='data:post.url' expr:title='&quot;Tutorial blog : &quot; + data:post.title'><data:post.title/></a>


 



Tertarik mencoba teknik diatas? coba deh!

Minggu, 15 Agustus 2010

Haruskah Halaman Web Valid HTML

valid xhtml Haruskah sebuah halaman web / blog valid (X)HTML? Sebuah halaman web atau blog sebaiknya memang Valid (X)HTML atau lolos validasi, tapi jika mengatakan bahwa itu adalah suatu keharusan mungkin terlalu berlebihan. Kang Rohman sedikit senyum simpul ketika menjumpai blog yang begitu antusias agar halaman blognya lolos validasi HTML.

Para pengguna mesin blogger aka blogspot harus rela menerima kenyataan bahwa mesin blog yang mereka gunakan tidak lolos validasi dari w3c validator. Dari blog-blog yang pernah kang Rohman baca, diantara mereka ada yang merasa minder memakai mesin blogger, bahkan yang lebih ekstrim lagi ada yang rela migrasi dari blogger ke wordpress gara-gara urusan validasi ini.

Lagi-lagi dari apa yang pernah dibaca, mereka beranggapan bahwa sebuah halaman web yang valid (X)HTML akan sangat mendapatkan perhatian dari mesin telusur ( search engine ) atau dengan kata lain akan sangat SEO friendly. Benahkah? Thinking

Berangkat dari rasa penasaran, kang Rohman coba mengintip validitas dari situs-situs raksasa yang ada di internet. Yuk bagi yang mau ngintip, kita intip bareng-bareng.

1. Google

Ada yang tidak kenal dengan dengan situs raksasa Google? coba ah intip apakah google lolos validasi w3c validator, dan ini gambar yang di dapatkan :

google invalid html

Upsss. menurut W3C Validator, halaman google.com yang hanya seiprit mempunyai sampai 35 error dan 2 warning. Ternyata Google tidak terlalu perduli akan validasi dari W3C validator, ini terbukti dengan membiarkan halaman mereka tidak lolos HTMl validator.

 

2. Yahoo

Pilihan kedua jatuh ke search engine raksasa Yahoo.com. Berharap bahwa yahoo bisa lolos validasi. Berikut hasil pengecekannya :

yahoo invalid html

Duh. hasilnya mengatakan bahwa yahoo memiliki 161 error dan 32 warning. Lagi-lagi yahoo.com juga tidak perduli akan kevalidan halaman web mereka.

 

3. Bing

Coba mengintip situs raksasa bing, mungkin akan lain hasilnya :

bing invalid html

Hasilnya mendapatkan 12 error. Ah, bing juga tidak perduli dengan validasi HTML halaman web mereka.

 

4. Facebook

Mungkin karena ketiga situs diatas merupakan search engine, mereka kurang perduli akan kevalidan halaman web mereka, coba beralih ke situs jejaring sosial raksasa facebook. Berikut hasil intipannya :

facebook invalid html

Tidak tahu kenapa ketika mengecek validasi dari facebook.com, yang keluar jasilnya adalah untuk halaman http://m.facebook.com/?w2m&refsrc=http%3A%2F%2Fwww.facebook.com%2F&r1cc4a831. Tapi yang jelas hasilnya adalah mendapatkan 9 error.

 

5. Twitter

Yang suka berkicau, pasti kenal situs microblogging twitter. Hasil intipannya :

twitter invalid html

Twitter.com mendapatkan 17 error dan 70 warning. Tidak valid juga ternyata.

 

6. Wordpress.com

Berharap mendapatkan hasil yang berbeda dari penyedia blog populer saat ini wordpress.com. Hasilnya :

wordpress invalid html

Lagi, ternyata wordpress.com juga mendapatkan 9 error.

 

7 Matt Cutts Blog

Iseng-iseng mengintip dari blog bapak SEO google Matt Cutts. Mungkin hasilnya lain kali yah jika dari bapak SEO :

mutt cutts blog invalid html

Oh tidak. Bapak SEO google yang inipun mendapatkan 14 error untuk halaman depannya. Jadi, bapak SEO ini ternyata tidak terlalu perduli juga akan kevalidan halaman blog beliau.

 

Benarkah halaman yang valid HTML menjadi SEO friendly? melihat dari contoh kasus diatas, sepertinya tidak mutlak, karena contoh situs yang dihadirkan bukanlah situs coro seperti blog kang Rohman. Mungkin pengaruh terhadap page rank? mungkin, tapi tidak juga tuh. Data page rank situs yang dicontohkan (tentunya saat ini ) : Google.com (PR10), yahoo.com (PR9), Bing.com (PR8), facebook.com (PR10), Twitter.com (PR8), Wordpress.com (PR9). mattcutts.com/blog (PR7).

Menurut pandangan Kang rohman sendiri, membuat halaman web atau blog agar lolos validasi memang perlu dan sebisa mungkin lakukan seperti itu. Namun, hal tersebut jangan terlalu dibesar-besarkan, jangan terlalu membuang waktu dengan memaksakan halaman blog anda harus bisa valid, fokuslah ke konten blog karena pengunjung melihat isi dari blog anda bukan dari kevalidan blog anda.

Catatan Tambahan :

  • Artikel diatas bukanlah suatu hal provokasi, hanyalah sebuah tulisan yang mungkin tanpa makna.
  • Hasil validasi diatas berlaku hanya pada saat artikel ini di publikasikan, jika anda membacanya diwaktu yang akan datang, tentunya akan berbeda hasilnya.
  • Untuk anda pengguna mesin blogger yang notabene tidak valid HTML, tidak usah minder. Blog anda dinilai dari isi blog anda bukan dari segi validitas.
  • Untuk anda yang sibuk dengan validasi, silahkan Lanjutkan, jangan terganggu dengan artikel ini. Langkah anda sudah pada jalan yang benar.

Jumat, 13 Agustus 2010

Sistem Kometar baru Di blogger

Lagi, blogger mengeluarkan fitur baru. Jika sebelumnya telah dikabarkan bahwa blogger mengintergarsikan statistik blogger langsung ke dashboard blogger, kini dirilis tentang sistem komentar baru di blogger.

Beberapa hari yang lalu blogger buzz mengabarkan akan sistem komentar baru yang dipakai oleh blogger. Dengan sistem komentar yang baru ini, kita sebagai pengguna blogger dapat melihat komentar-komentar yang telah di terbitkan, Menunggu moderasi, atau dideteksi sebagai komentar spam. Jadi, tentunya sistem yang baru ini lebih efektif daripada sistem komentar yang sebelumnya dipakai.

komentar sistem baru blogger

Dari pengamatan kang Rohman. Tab menu khusus komentar tersebut akan muncul jika kita mengaktifkan fungsi moderasi untuk komentar.

komentar

moderasi komentar

Disebutkan bahwa saat ini belum semua blogger mendapatkan fasilitas sistem komentar baru ini, namun dalam waktu dekat tentunya fitur tersebut akan segera anda nikmati.

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

Senin, 09 Agustus 2010

Tutorial menghilangkan salah satu widget sidebar di home page

Sebelumnya telah ditulis bagaimana trik untuk menghilangkan widget posting pada home page di blogger. Rupanya muncul pertanyaan baru yaitu “ bagaimana jika yang dihilangkan itu adalah salah satu widget sidebar, jadi widget sidebar yang dihilangkan tidak akan muncul pada halaman depan alias home page, namun akan muncul pada halaman single post”.

Emang bisa? jawabannya adalah bisa, dan caranyapun cukup sederhana. Trik seperti ini biasanya diterapkan agar blog lebih terlihat atraktif dan banyak yang berasumsi lebih menarik daripada yang biasanya.

Sebelum masuk ke tutorial menghilangkan Tutorial menghilangkan salah satu widget sidebar di home page, ada baiknya kita samakan duhulu persepsi tentang bahasa yang kang Rohman pergunakan yaitu tentang Home Page dan Single Post.

Home page yang dimaksud adalah halaman depan dari suatu blog, misal blog kang Rohman alamat homepage nya adalah http://kolom-tutorial.blogspot.com. Untuk melihat ini, anda harus memperhatikan alamat yang tertera pada address bar browser internet anda.

home page kolomtutorial

Sedangkan yang dimaksud sebagai single post adalah halaman penuh dari suatu artikel. Hal ini apabila anda membaca suatu artikel secara penuh, caranya adalah dengan klik pada judul artikel tersebut atau dengan klik link baca selengkapnya atau ada juga yang menggunakan kata read more. alamat single post merupakan paduan dari alamat home page dengan judul arikel. Berikut contoh gambar dari alamat URL single post :

single post kolom tutorial

Nah, sekarang sudah sepakat dong dengan bahasa yang kang Rohman gunakan? mari langsung ke topik utama.

Langkah pertama yang harus anda lakukan adalah mengidentifikasi widget sidebar yang ingin dihilangkan dari home page. Metode yang dipakai adalah mengenali dri judul sidebar itu sendiri. Coba lakukan hal berikut :

Mengenali Widget Sidebar dari Judul Sidebar

Cara mudah mengenali widget sidebar yang mau di hilangkan dari home page menurut kang Rohman adalah dari Judul sidebar. Dari situ maka akan di ketahui ID dari widget tersebut. Berikut langkahnya :

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

    rancangan di blogger

  • Klik tab Edit HTML.

    Edit HTML di blogger

  • Carilah kode yang mirip-mirip seperti ini :


    <b:widget id='HTML6' locked='false' title='Tentang Kami' type='HTML'/>
    <b:widget id='HTML9' locked='false' title='Langganan Template Via Email' type='HTML'/>
    <b:widget id='HTML5' locked='false' title='Langgan artikel  Via Email' type='HTML'/>

  • Setiap blog pasti berbeda kodenya, makanya kang Rohman tulis yang mirip dengan kode diatas. Copy kode tadi pada pada note pad atau sejenisnya.

Dari contoh diatas, blog kang Rohman mempunyai 3 widget, dan yang penting harus anda perhatikan adalah yang tercetak merah  dan orange yaitu :

  • HTML6   -    'Tentang Kami
  • HTML9   -    Langganan Template Via Email
  • HTML5   -   Langgan artikel  Via Email

Yang dicetak merah adalah ID dari widget sidebar dan yang dicetak orange adalah judul widget atau judul yang ada di sidebar. Dari sini tentunya kita sudah bisa mengetahui ID dari masing-masing widget yang ada, dan langkah selanjutnya adalah widget mana yang di inginkan agar di halaman home page tidak muncul, namun pada halaman single post widget tersebut bisa muncul.

Agar tutorial ini tidak buntu, Okelah kalau begitu kita ambil contoh untuk ID ini :

HTML6

Karena ini adalah sebuah ID, di dalam kode CSS nanti hanya perlu ditambahkan tanda pagar ( # ) di depannya, sehingga menjadi seperti ini :

#HTML6

 

Membuat kode CSS

Kode CSS dasar untuk membuat sebuah ID jangan dI munculkan dalam sebuah halaman web adalah seperti ini :

#ID {display:none}

Karena ID nya tadi sudah di ketahui yaitu #HTML6, maka kodenya menjadi seperti ini :

#HTML6 {display:none}

 

Yang menjadi masalah adalah kita tidak ingin widget tersebut secara permanen tidak di tampilkan, tapi hanya di home page saja, sedangkan di halaman single post bisa muncul. Solusi dari ini adalah menggunakan fungsi if condition di blogger.

Fungsi CSS menggunakan If Condition

Metode yang akan di gunakan pada tutorial kali ini adalah penggunaan CSS dengan fungsi if condition. Kode untuk menampilkan suatu widget sidebar hanya tampil pada single post adalah sebagai berikut :

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#ID{display:none}
</b:if>
</style>


Karena tadi ID nya sudah didapatkan yaitu #HTML6 ( hanya contoh ), maka kodenya menjadi seperti ini :



<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#HTML6{display:none}
</b:if>
</style>


Dimana menempatkan kode tersebut? anda bisa menyimpannya dibawah kode ]]></b:skin> atau diatas kode </head>



Masih belum paham? berikut cara pemasangan lengkapnya :




  • Silahkan login ke blogger dengan ID anda.


  • Klik Rancangan.


  • Klik tab Edit HTML.


  • Cari kode ]]></b:skin>


  • Copy lalu paste kode berikut di bawah kode ]]></b:skin> ( ingat! ID nya harus anda ganti sesuai dengan template blog anda )

    <style type='text/css'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    #ID{display:none}
    </b:if>
    </style>



  • Klik tombol SIMPAN SETELAN.


  • Selesai. Silahkan lihat hasilnya.



Dari perjalanan panjang anda membaca dari tulisan atas sampai ke sini, intinya hanyalah memasang kode CSS yag memakai kode if condition  itu saja, tidak ada yang lain Winking.



Namun, mungkin diantara anda ada yang bertanya secara terbalik, bagaimana menampilkan suatu widget sidebar hanya di home page saja, sedangkan di halaman single post widget tersebut tidak muncul ( hilang ) ?



Jawabannya sangat-sangat sederhana, perhatikan kode berikut :



<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#ID{display:none}
</b:if>
</style>


Anda hanya perlu mengganti tanda seru ( ! ) yang kang Rohman cetak merah dengan tanda sama dengan  ( = ), maka fungsi kode tersebut akan bersifat terbalik.



<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#ID{display:none}
</b:if>
</style>


Hanya itu!



Selamat ber lelah ria!