Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Monday, April 30, 2007

Mematikan Fungsi Klik Kanan Mouse Pada Browser

Gambar yang sudah Anda upload di internet akan dapat dengan mudah diambil oleh orang lain. Misalnya saja gambar yang Anda tampilkan di blog. Jika gambar tersebut adalah gambar yang biasa-biasa saja sih tidak apa-apa. Bagamana kalau gambar tersebut sifatnya pribadi, atau paling tidak hanya untuk diri sendiri. Anda harus melindungi gambar tersebut dari pengcopyan orang lain. Biasanya untuk mengcopy gambar yang tampil di browser dapat dengan mudah dilakukan, cukup dengan klik kanan dan klik save image as. Nah, sekarang bagaimana untuk melindungi gambar-gambar kita agar tidak dicopy orang lain? Tentu saja kita harus mematikan fungsi dari klik kanan mouse di browser.

Adapun langkah-langkahnya adalah sebagai berikut :

(1) Copy-kan script ini di bawah <body> di template Anda.


<script language=JavaScript>
<!--

var message="Function Disabled!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>


(2) Selesai
Posted by at 2 comments:
Labels: ,

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.
Posted by at 1 comment:
Labels: ,

"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.
Posted by at No comments:
Labels: ,

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.
Posted by at 1 comment:
Labels: ,

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
Posted by at 10 comments:
Labels: ,
Subscribe to: Posts (Atom)