Menampilkan Widget Hanya di Halaman Postingan

Agar halaman Beranda tidak penuh sesak, sebaiknya Agan menyembunyikan widget tertentu hingga nantinya hanya akan muncul di halaman postingan (artikel).

Jadi, apabila pengunjung sedang berada di halaman Home Page (Beranda), widget tersebut tidak akan tampil. Ayo kita ke ruang kerja.

1. Masuk ke template. Klik EDIT HTML.
__Pilih lanjutkan. Centang Expand Template Widget.

2. Carilah id widget yang ingin di sembunyikan.

Untuk mengetahui id widget, Agan buka dahulu widget tersebut di menu Tata Letak. Lalu lihat ujung dari URL nya. Seperti ini contohnya.

Id widgetnya = HTML5.

Jadi pada saat di halaman template, cari rangkaian kode dari HTML5. Biasanya susunannya seperti ini :

<b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

3. Setelah itu masukkan kode berikut di bawah <b:includable id='main'>

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

4. Masukkan juga kode </b:if> di bawah kode <b:include name='quickedit'/>.

5. Contohnya menjadi seperti ini.

<b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>.
</b:if>
</b:includable>
</b:widget>

5. Klik SIMPAN.

Ulangi cara yang sama, untuk menyembunyikan widget tertentu lainnya dari halaman Home Page. Baca lagi urutan demi urutannya.

Oya, jika ingin sebaliknya. Yaitu menyembunyikan widget tertentu dari halaman artikel. Hanya ingin tampil di Home Page, maka cukup ganti kode no. 3.

Yaitu kode ini <b:if cond='data:blog.pageType == &quot;item&quot;'>
Ganti dengan kode ini <b:if cond='data:blog.url == data:blog.homepageUrl'>

Selamat mencoba. 

Menampilkan Hanya Judul Postingan di Beranda

Secara default, tampilan setiap link postingan terbaru di Beranda (Home Page) di bawahnya itu terdapat link lainnya. Seperti link read more, atau juga link jumlah komentar.

Nah, apabila Agan hanya ingin judul postingannya saja yang tampil di halaman Beranda, Agan cukup ikuti cara berikut :

1. Masuk ke Template. Klik Edit HTML.
__Pilih Lanjutkan. Centang Expand Template Widget.

2. Carilah kode ini  <b:include data='post' name='post'/>.
__Pakai CTRL F untuk menemukannya.

3. Hapus dan ganti kode itu dengan kode berikut.

<b:if cond='data:blog.homepageUrl == data:blog.url'>      <b:if cond='data:blog.pageType != &quot;item&quot;'>          <a expr:href='data:post.url'>    <div style='padding:6px 0 6px 5px;border-right:0px solid #000;border-bottom:0px solid #000;margin-bottom:0px;background:;color:;'>          <data:post.title/></div></a>      <b:else/>          <b:include data='post' name='post'/>      </b:if>  <b:else/>      <b:include data='post' name='post'/>  </b:if>

4. Klik SIMPAN. Lihat hasilnya.

Cara Menghilangkan Label di Bawah Postingan

Untuk sebagian blogger, tulisan "Label" di bawah postingan di anggap kurang menarik hingga akhirnya mereka hilangkan.

Jika Agan juga berniat sama, ikuti cara ini :

1. Masuk ke Template. Klik Edit HTML.
__Pilih lanjutkan. Centang Expand Template Widget.

2. Carilah kode seperti ini.

<span class='post-labels'>
<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,
</b:if></b:loop></b:if>
</span>

4. Hapus. Lalu klik SIMPAN. Lihat hasilnya.

Tips Pintar Mengedit Template

Sudah menjadi kepastian bahwa sesama blogger itu saling belajar dan saling memberikan informasi satu sama lain. Si A mencari panduan di blog si B. Dan si B juga mencari panduan di blog si A.

Nah, terkadang keinginan hati itu 'kan selalu berubah-ubah. Hari ini kita senang dengan template yang telah di edit. Sementara di kemudian hari kita ingin menghapus script-script yang sempat kita tanamkan untuk di ganti dengan style yang lebih baru lagi.

Agar tidak terjadi kebingungan dalam mencari script-script yang dulu kita tanamkan itu (karena kode di template tentu sangat banyak), maka berikut ini tips sederhana yang harus Agan simak.

1. Biasakan dari dini, ketika ingin menambahkan suatu kode Agan baiknya memberikan tanda berikut di awal permulaan kode dan di akhir kode.

/* Berikan judul kode disini */
rangkaian kode
rangkaian kode
/* Ini Batas Akhir Kode */

Contohnya seperti ini, lihat baik-baik.

/* Slide Customer Service */
rangkaian kode
rangkaian kode
/* END Slide Customer Service */

Contoh di atas adalah tanda ketika saya hendak membuat script Admin Peduli pada blog Ketagihan Baca. Lihat widget melayang di sisi kiri atas.

Jadi, dengan demikian apabila suatu hari Agan ingin membuang kode itu, tinggal mengingat dan mencari judul kode nya saja.

2. Biasakan menyimpan alamat link blog orang.

Apabila Agan hendak memasukkan script yang di dapat dari blogger lain, sebaiknya Agan membuat satu draft khusus yang berisikan link-link blog orang lain tadi.

Jadi, apabila Agan kelak ingin merubah kode tersebut tinggal membaca panduannya lagi dengan mencari alamat link yang punya trik tersebut. Jadi tidak perlu repot telusur dari Google.

3. Buatlah blog baru sebagai kelinci percobaan.

Misalkan blog Agan selalu di kunjungi banyak orang, dan di waktu bersamaan Agan hendak merubah suatu elemen template. Pastinya sangat repot apabila kita hanya mengandalkan "klik Pratinjau". Sebelum di simpan, klik Pratinjau, sebelum di Simpan klik Pratinjau. Repot sekali.

Maka, buatlah satu blog baru khusus untuk mengotak atik template. Jadi apabila terjadi kesalahan, pengunjung tidak di kecewakan.

Sangat lucu apabila seseorang lagi asyik membaca, tiba-tiba...

"Nah lho kenapa neh blog ?? 

Kok jadi begini tampilannya ?" 

4. Biasakan juga untuk mengunduh template.

5. Biasakan juga untuk mengkompres kode template secara manual.

Khusus tips no.5 nanti kita bahas di lain kesempatan. Selamat mencoba.

Pasang Gambar di Sudut Blog

Perlu di perhatikan, trik ini pada dasarnya akan menambah berat pada loading blog. Jadi, sebaiknya pasang gambar yang berukuran kecil saja.

1. Masuk ke Template. Klik Edit HTML.
__Pilih lanjutkan. Tidak usah centang expand template widget.

2. Carilah kode ini. ]]></b:skin>
__Pakai CTRL F untuk menemukannya.

3. Masukkan kode berikut di atas kode ]]></b:skin> tadi.

#anima_sudut {position:fixed;_position:relative;top:0px; left:0px;clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

4. Tulisan top dan left mengartikan posisi gambar berada di atas kiri. Jika ingin di bawah, ganti kata top dengan bottom. Dan apabila ingin di sebelah kanan, ganti kata left dengan right.

5. Cari lagi kode ini </body>

6. Masukkan kode berikut di atas kode </body>  tadi.

<div id='anima_sudut'>
<a href='URL blog'>
<img alt='' border='0' src='URL gambar'/></a>
</div>

7. Ganti tulisan URL blog dengan URL blog Agan. Contoh : http://ketagihanbaca.blogspot.com/. Dan ganti URL gambar dengan alamat gambar milik Agan.

8. Klik SIMPAN.

Trik Blogging Lainnya

Berikut ini beberapa kategori lainnya terkait tutorial blog.

Silahkan Agan klik sesuai kebutuhan.

• Templates
• Ilmu Copy Paste
• Teks Area
• Read More
• Tombol Show
• Tombol Share
• Jump Menu
• Posting Lama /Baru
• Icon Obeng Tang
• Langgan Entri Atom
• Favicon
• Ilmu Email

Membuat Tanda Tangan

Membuat tanda tangan pada blog memberikan daya tarik sendiri. Seolah-olah seluruh postingan adalah murni miliknya, padahal bisa saja sebagian hasil dari Copy paste.

Tapi kalau Agan tetap ingin membuat tanda tangan untuk blog, bisa ikuti langkah-langkah berikut :

1. Masuk ke situs mylivesignature.com.

2. Klik bacaan "Click Here To Start"

3. Klik bacaan "Using the signature creation wizard"

4. Kemudian masukkan nama Agan di kolom yang disediakan. Jika sudah klik tombol "Next Step"

5. Pilih bentuk tanda tangan yang Agan suka. Lalu klik "Next Step".

6. Pilih ukuran font. Klik "Next Step"

7. Setel warna background serta warna teks dari tanda tangan itu. Jika sudah klik "Next Step"

8. Pilih sudut kemiringan bentuk tanda tangan. Jika sudah klik "Next Step"

9. Copy dahulu ID yang diberikan (kode berupa angka 40 digit). Contohnya seperti ini :

54488-267-2A1019E5064768844160D1108D31B074

10. Untuk bisa pasang di blog, sekarang klik link "Want to use this signature?". Gulir ke bawah.

11. Lalu masukkan (Pastekan) ID tadi di kolom yang bertuliskan "Generate Code For Using a Signature". Lalu klik tombol "Generate Code".

12. Pilih dan klik "Generate HTML Code"

13. Klik link yang bertuliskan "Generate/Create a code for my handwritten signature"

14. Nah, Agan sudah mendapatkan kode HTML nya. Sekarang jika ingin tanda tangan ini selalu otomatis ada di setiap akhir postingan, Agan masuk ke SETELAN di blog.

15. Lalu pilih "Format"

16. Masukkan kode HTML tadi di kolom "Template Entri". Lalu klik SIMPAN untuk menyudahi proses melelahkan ini.

Silahkan buka artikel Agan untuk melihat hasilnya.

Membuat Teks Bar Berjalan

Bukan hanya di dalam postingan atau side bar saja kita bisa membuat teks yang berjalan, pada bar menu pun hal itu juga bisa di siasati.

1. Masuk ke Template. Klik Edit HTML.
__Beri centang expand template widget.

2. Carilah kode berikut.
__Pakai CTRL F untuk memudahkan pencarian.

<title><data:blog.pageTitle/></title>

3. Hapus kode tersebut dan ganti dengan kode ini.

 <script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=300;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

Setel kecepatannya, ubah angka 300 menjadi 400 atau 500 untuk memperlambat. Atau kurangi menjadi 200 atau 100 untuk mempercepat.

4.Klik SIMPAN. Dan lihat hasilnya.

Cara Membuat You Are Here (Navigasi Breadcrumb)

Apa yang di maksud Navigasi Breadcrumb itu ??

Kurang lebih semacam petunjuk untuk pembaca mengetahui letak posisi dia berada. Seperti ini nantinya.

You Are Here : Home » Foto Lucu » Rambu Jalan Buatan Dewi Persik (Ngakak).

Tentu Agan pernah melihatnya bukan ? Jika Agan ingin menerapkan di blog Agan, ikuti cara berikut. Ini akan di tempatkan persis di bawah tanggal postingan nantinya.

1. Masuk ke Template.

2. Klik Edit HTML. Pilih Lanjutkan.
__Centangkan Expand Template Widget.

2. Carilah kode seperti ini.
__Gunakan CTRL F untuk memudahkan pencarian.

<div class='post hentry

3. Biasanya kode di atas memiliki terusan, setiap template berdeda-beda. Seperti ini misalnya.

<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

4. Ok, jika sudah menemukan kode tersebut, masukkan kode berikut di bawah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div align='left' style='border-bottom:1px solid #940F04;font-size:10px;'>You are here : <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='nofollow'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if> &#187; <data:blog.pageName/></div></b:if>

5. Klik Simpan. Lalu bukalah salah satu artikel Agan untuk melihat hasilnya.

Ok selamat mencoba. 

Cara Menghilangkan Obeng dan Tang di Blog

Setiap blog yang baru di buat, pasti di setiap elemennya terdapat icon obeng dan tang. Icon ini berfungsi sebagai jalan pintas untuk pengeditan.

Namun, hampir seluruh blogger lebih suka mengedit suatu elemen blog melalui Tata Letak.

gambar halaman Tata Letak

Berikut ini cara jika Agan ingin menghilangkan si Obet (Obeng dan Tang)

1. Masuk ke Template.

2. Klik "Edit HTML". Pilih Lanjutkan.
___Tidak perlu centang EXPAND TEMPLATE WIDGET.

3. Cari kode ini. ]]></b:skin>
___Gunakan CTRL F untuk memudahkan pencarian.

4. Letakkan kode berikut ini di atas kode tadi.

.quickedit{
display:none;
}

5. SIMPAN TEMPLATE.

Selesai.

Cara Menghilangkan Langgan Entri Atom

Agan merasa kurang nyaman dengan keberadaan link bertuliskan "Langgan Poskan Komentar (Atom) ??

Untuk menghilangkannya ikuti langkah berikut.

1 Masuk ke Template.

2. Klik Edit HTML. Pilih Lanjutkan.

___Beri tanda centang pada EXPAND TEMPLATE WIDGET.

2. Carilah kode ini. ]]></b:skin>
___Gunakan CTRL F untuk memudahkan pencarian.  

3. Kemudian tambahkan kode berikut ini di atas kode ]]></b:skin> tadi.

.feed-links{display:none;}

4. SIMPAN TEMPLATE.

Silahkan di cek hasilnya