Showing posts with label Tutorial Blog. Show all posts
Showing posts with label Tutorial Blog. Show all posts

Saturday, April 7, 2007

"Read more" untuk New Templates pada Blogger

Setiap artikel yang Anda masukkan ke dalam blog, selalu akan ditampilkan seluruhnya di dalam content secara berurutan. Mulai dari artikel terbaru sampai dengan artikel-artikel sebelumnya. Jika setiap artikel yang Anda masukkan hanya beberapa kalimat pendek saja, maka tidak ada masalah. Nah, bagaimana kalau artikel yang Anda masukkan sangat panjang sampai ada beberapa halaman? Tentunya akan memenuhi content blog Anda.

Untuk mengatasi masalah tersebut, sebaiknya Anda membuat penggalan di dalam artikel yang Anda kirim dengan cara memberi link Read more seperti yang ada di beberapa website. Artikel yang ditampilkan di content hanyalah sebagian dari artikel saja sedangkan artikel secara keseluruhan akan ditampilkan jika sudah di klik pada Read more.

Sebenarnya sudah ada banyak panduan tentang pembuatan Read more ini dan banyak juga yang sudah mencobanya tapi banyak juga yang gagal. Beberapa orang yang gagal mengusulkan agar memuat artikel Read more di Depot T.I.K. Jika Anda tertarik dengan artikel ini silakan mengikuti panduan berikut.

(1) Login di blogger.com
Langkah pertama adalah buka blogger.com melalui browser Anda. Setelah tampil halaman depan blogger.com, klik pada New Blogger. Isi e-mail dan password Anda kemudian klik Sign In.

(2) Membuka template
Jika proses login berhasil, Anda akan memasuki halaman Dashboard pada blogger.com. Di sini ada beberapa informasi tentang blog Anda mulai dari judul blog Anda, jumlah posting, dan ada beberapa link yang berguna untuk mengatur konfigurasi blog. Pada bagian ini kita klik pada Template.

(3) Mengaktifkan Expand Widget
Beri tanda cek pada Expand Widget Templates. Langkah ke-3 ini hanya berlaku jika template yang Anda gunakan di Blogger adalah New Templates. Jika Expand Widget Templates tidak ada, berarti template yang Anda gunakan adalah Classic Templates. Baca artikel "Read More" untuk Classic Templates pada Blogger.

(4) Mencari kode
Sekarang cari kode di bawah ini pada template blogger.


<div class='post-header-line-1'/> <div class='post-body'>


(5) Menyisipkan kode
Kalau sudah ketemu, di bawah kode tersebut sisipkan kode html sebagai berikut :


<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>


(6) Kode berikutnya
Di bawah kode tadi ada kode html sebagai berikut :

<p><data:post.body/></p>


<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


(7) Menyisipkan kode
Nah, di antara kode <p><data:post.body/></p> dan kode <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

anda sisipkan kode html ini:


<a expr:href='data:post.url'>Read More......</a>
</b:if>


(8) Susunan html
Jadi, susunan kode html di template setelah ditambah dg kode READ MORE akan menjadi seperti ini (yg warna merah adalah kode tambahan untuk READ MORE, sedang kode warna hitam adalah kode asli template):


<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>

<div style='clear: both;'/>
</div>


(9) Menyisipkan CSS
Langkah berikutnya setelah Anda mengganti kode html-nya, kini giliran menyisipkan kode CSS pada template. Di bagian paling atas terdapat kode-kode yang diawali dengan <style> dan ditutup dengan </style>. Sisipkan kode berikut persis di atasnya kode </style>


<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>

<ItemPage>
span.fullpost {display:inline;}
</ItemPage>


(10) Menyimpan template
Jika proses penyisipan kode selesai, klik SAVE TEMPLATE CHANGE untuk menyimpan perubahan yang Anda lakukan.

(11) Mengatur setting
Setelah proses penyisipan kode selesai, Klik SETTINGS, kemudian klik FORMATTING. Di bagian paling bawah ada kotak kosong di samping POST TEMPLATE. Isi kotak kosong tsb dg kode berikut:


<span class="fullpost">



</span>


(12) Menyimpan setting
Setelah pengetikan kode selesai, klik SAVE untuk menyimpan setting. Proses pembuatan READ MORE telah selesai.

(13) Cara memposting
Sekarang bagaimana cara memposting? Ada sedikit perbedaan cara memposting menggunakan READ MORE ini. Pada saat memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode sebagai berikut :


<span class="fullpost">



</span>


(14) Mengedit posting
Letakkan posting yang akan ditampilkan di halaman muka di atas kode <span class="fullpost"> sedangkan sisanya letakkan di antara kode <span class="fullpost"> dan </span>.

(15) Mempublish posting
Klik Publish untuk mempublish posting Anda. Jika sudah selesai, buka blog Anda atau jika sudah terbuka klik Refresh dan lihat hasilnya.

"Read more" untuk Classic Templates pada Blogger

Setiap artikel yang Anda masukkan ke dalam blog, selalu akan ditampilkan seluruhnya di dalam content secara berurutan. Mulai dari artikel terbaru sampai dengan artikel-artikel sebelumnya. Jika setiap artikel yang Anda masukkan hanya beberapa kalimat pendek saja, maka tidak ada masalah. Nah, bagaimana kalau artikel yang Anda masukkan sangat panjang sampai ada beberapa halaman? Tentunya akan memenuhi content blog Anda.

Untuk mengatasi masalah tersebut, sebaiknya Anda membuat penggalan di dalam artikel yang Anda kirim dengan cara memberi link Read more seperti yang ada di beberapa website. Artikel yang ditampilkan di content hanyalah sebagian dari artikel saja sedangkan artikel secara keseluruhan akan ditampilkan jika sudah di klik pada Read more.

Sebenarnya sudah ada banyak panduan tentang pembuatan Read more ini dan banyak juga yang sudah mencobanya tapi banyak juga yang gagal. Beberapa orang yang gagal mengusulkan agar memuat artikel Read more di Depot T.I.K. Jika Anda tertarik dengan artikel ini silakan mengikuti panduan berikut.

(1) Login di blogger.com
Langkah pertama adalah buka blogger.com melalui browser Anda. Setelah tampil halaman depan blogger.com, klik pada New Blogger. Isi e-mail dan password Anda kemudian klik Sign In.

(2) Membuka template
Jika proses login berhasil, Anda akan memasuki halaman Dashboard pada blogger.com. Di sini ada beberapa informasi tentang blog Anda mulai dari judul blog Anda, jumlah posting, dan ada beberapa link yang berguna untuk mengatur konfigurasi blog. Pada bagian ini kita klik pada Template.

(3) Mencari kode
Sekarang cari kode di bawah ini pada template blogger.


<p><$BlogItemBody$></p>


(4) Menyisipkan kode
Kalau sudah ketemu, di bawah kode tersebut sisipkan kode html sebagai berikut :


<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>"><i>Read more...</i></a>
</MainOrArchivePage>


(5) Susunan html
Jadi, susunan kode html di template setelah ditambah dg kode READ MORE akan menjadi seperti ini (yg warna merah adalah kode tambahan untuk READ MORE, sedang kode warna hitam adalah kode asli template):


<p><$BlogItemBody$></p>
<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>"><i>Read more...</i></a>
</MainOrArchivePage>


(6) Menyisipkan CSS
Langkah berikutnya setelah Anda mengganti kode html-nya, kini giliran menyisipkan kode CSS pada template. Di bagian paling atas terdapat kode-kode yang diawali dengan <style> dan ditutup dengan </style>. Sisipkan kode berikut persis di atasnya kode </style>


<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>

<ItemPage>
span.fullpost {display:inline;}
</ItemPage>


(7) Menyimpan template
Jika proses penyisipan kode selesai, klik Save Template Change untuk menyimpan perubahan yang Anda lakukan.

(8) Mengatur setting
Setelah proses penyisipan kode selesai, Klik Setting, kemudian klik Formatting. Di bagian paling bawah ada kotak kosong di samping Post Template. Isi kotak kosong tersebit dengan kode berikut:


<span class="fullpost">



</span>


(9) Menyimpan setting
Setelah pengetikan kode selesai, klik Save untuk menyimpan setting. Proses pembuatan Read More telah selesai.


(10) Cara memposting
Sekarang bagaimana cara memposting? Ada sedikit perbedaan cara memposting menggunakan Read more ini. Pada saat memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode sebagai berikut :

<span class="fullpost">



</span>


(11) Mengedit posting
Letakkan posting yang akan ditampilkan di halaman muka di atas kode <span class="fullpost"> sedangkan sisanya letakkan di antara kode <span class="fullpost">
dan </span>.

(12) Mempublish posting
Klik Publish untuk mempublish posting Anda. Jika sudah selesai, buka blog Anda atau jika sudah terbuka klik Refresh dan lihat hasilnya.

Friday, March 30, 2007

Membuat Arsip pulldown di Blogger

Dalam konsep blog setiap posting yang kita masukkan akan terarsip otomatis secara rapi setiap bulan. Pada saat memasuki bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar. Masalah yang timbul, kalau kita sudah "ngeblog" selama setahun, maka arsip dari Januari sampai Desember akan berjejer di sidebar kita. Bagaimana kalau dua dan tiga tahun lagi? Tentu Anda sudah bisa membayangkan sendiri.

Langkah praktis untuk mengatasi masalah tersebut adalah dengan membuat pulldown menu seperti yang akan kita pelajari ini. Sehingga, berapapun lamanya Anda ngeblog di blogger/blogspot, menu bulan-bulan tersebut tidak akan berjejer panjang dan memenuhi sidebar kita. Yg tampak hanyalah "-Archives-" saja. Baru setelah pulldown diklik maka akan muncul nama bulan arsip-arsip kita.

Caranya adalah sebagai berikut :

(1) Login di blogger.com
Langkah pertama adalah buka blogger.com melalui browser Anda. Setelah tampil halaman depan blogger.com, klik pada New Blogger. Isi e-mail dan password Anda kemudian klik Sign In.

(2) Membuka template
Jika proses login berhasil, Anda akan memasuki halaman Dashboard pada blogger.com. Di sini ada beberapa informasi tentang blog Anda mulai dari judul blog Anda, jumlah posting, dan ada beberapa link yang berguna untuk mengatur konfigurasi blog. Pada bagian ini kita klik pada Template.

(3) Mencari kode
Di bagian sidebar blog Anda khususnya di bagian archives, ada kode html seperti di bawah ini:


<BloggerArchives>
<a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a>

</BloggerArchives>


(4) Mengganti kode
Nah, jika Anda sudah menemukan kode seperti di atas, gantilah kode tersebut dengan kode html di bawah ini.


<select name="archivemenu" onchange="document.location.href=this.options[this.selectedIndex].value;">

<option selected>- Archives -</option>

<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>

</select>


(5) Menyimpan template
Apabila sudah selesai dalam mengganti kode di atas, klik SAVE TEMPLATES. Nah sekarang buka blog Anda. Lihat arsip yang ada di sidebar. Gimana..... sukses!

(6) Selesai.

Thursday, March 1, 2007

Memasukkan Jam pada Blog

Ada beberapa macam situs yang menyediakan asesoris blog berupa jam online. Salah satunya yang cukup populer adalah yang beralamat di http://clocklink.com. Cara untuk menyisipkan jam online di blog adalah sebagai berikut :

  1. Buka situs http://clocklink.com, tunggu hingga tampil halaman depan websitenya.
  2. Klik tab Gallery di pojok kanan atas
  3. Klik link Analog jika Anda ingin memilih jam analog.
  4. Berikutnya akan ditampilkan beberapa macam bentuk jam analog. Pilih salah satu dengan cara klik View HTML Tag.
  5. Berikut akan ditampilkan aturan-aturan yang diberlakukan oleh ClockLink.
  6. Klik Accept jika Anda menyetujui aturan-atura tersebut.
  7. Pilih zona waktu kota Anda misalnya Surabaya timezone-nya adalah ICT:Bangkok Time (GMT + 07:00) atau yang penting ada +07 -nya.
  8. Jika perlu pilih ukuran jam. Sesuaikan dengan lebar tempat yang disediakan di template blog Anda misalnya 150x150 pixels.
  9. Berikut kopy semua kode html yang ada di bawahnya, kemudian paste-kan di template blog Anda.
  10. Selesai

Wednesday, February 28, 2007

Memasukkan Berita Online Indosiar

Ada beberapa asesoris dalam blog yang bisa Anda gunakan untuk memperindah tampilan blog Anda. Salah satunya adalah berita online dari Indosiar. Blog Anda akan lebih menarik dengan tambahan asesoris di bawah ini.

Anda tidak perlu meng-update isi beritanya karena berita indosiar ini akan ter-update setiap saat. Tinggal pasang kode HTML-nya, jadilah berita indosiar-nya.

Langkah-langkahnya adalah sebagai berikut :

(1) Mengcopy kode html
Copy kode HTML di bawah ini :

<iframe id=myTicker name=myTicker marginwidth=0 marginheight=0
src="http://www.indosiar.com/download/myticker/?id=1&
width=180&amp;height=200&dir=up&delay=40"

frameborder=1 width=180 scrolling=auto height=200></iframe>

(2) Memasang kode
Copy semua kode HTML diatas kemudian paste-kan di blog Anda di bawah sidebar.

(3) Mengedit kode
Jika ternyata berita indosiar ini ternyata terlalu lebar, Anda bisa mengecilkannya dengan mengganti kode width dengan angka yang lebih kecil. Ingat ! Disana ada 2 (dua) kode width. Ganti keduanya dengan angka yang diinginkan.
Misalnya :

width=180

ditanti menjadi :

widht=160 (disesuaikan dengan lebar sidebar)

(4) Menyimpan
Setelah pemasangan kode indosiar selesai, simpan template kemudian refresh blog Anda. Selamat menikmati berita online dari Indosiar.

Monday, February 5, 2007

Mengganti Template Blog

Template merupakan salah satu daya tarik bagi pengunjung blog. Jika template Anda menarik serta nyaman dipandang, maka akan memperlama pengunjung blog Anda untuk mampir membaca posting Anda. Template akan sangat berpengaruh bagi pengunjung window shopper, yaitu pengunjung yang hanya berniat melihat-lihat isi blog Anda. Bagi mereka, tampilan akan membuatnya singgah sedikit lebih lama ke blog Anda.

Salah satu penyedia template blog adalah Blogger Template yang beralamat di http://blogger-templates.blogspot.com/ . Blogger Template menyediakan berbagai macam template yang didesain untuk Blogger.com.

Adapun langkah-langkah untuk mengganti template adalah sebagai berikut :
  1. Buka http://blogger-templates.blogspot.com/. Pilih desain yang Anda inginkan dengan meng-klik arsip per bulan yang ada di sebelah kanan.
  2. Sebagai contoh kita pilih desain Sunflower. Klik Get the Code pada bagian bawah gambar desain Sunflower.
  3. Akan muncul sebuah halaman berisi kode template Sunflower. Klik kanan kemudian klik Select All untuk menyeleksi seluruh code template. Klik kanan kemudian klik Copy untuk menyalin code template tersebut.
  4. Buka ke http://www.blogger.com/, kemudian masukkan username serta password Anda. Setelah muncul tampilan Dashboard, klik pada Template. Klik Edit HTML untuk mengedit HTML-nya.
  5. Pada window yang berisi kode HTML ini, klik kanan kemudian klik Select All. Tekan tombol Delete pada keyboard untuk menghapus template.
  6. Selanjutnya klik kanan kemudian klik Paste untuk memasukkan template yang baru.
  7. Simpan template yang baru dengan meng-klik Save Template . Apabila gagal, klik pada Revert to Classic Template, kemudian simpan lagi menggunakan Save Template Change.
  8. Lihat tampilan baru blog Anda dengan meng-klik View Blog. Seketika blog Anda akan berubah tampilannya.
  9. Selamat menikmati tampilan blog baru