TRYOUT UM UNDIP MINGGU 17-1-10

Menampilkan File Exel & Word online di Blog

Artikel by Kang Rohman

Ada yang pernah bertanya seperti ini “bagaimana cara menampilkan file microsoft exel di blog?” duh bisa ngga ya? seharusnya bisa sih, tapi bagaimana caranya ya, saya juga bingung nih Tapi tenang saja, jika anda pernah melihat file exel bisa di tampilkan di web berarti tandanya itu bisa di lakukan.

Bagi anda yang suka dan ingin sharing file dalam bentuk microsoft word (document) dan microsoft excelmicrosoft power point (presentation) di blog, maka anda bisa menggunakan berbagai layanan di internet. Salah satu di antaranya adalah layanan yang di sediakan oleh google yaitu Google docs. Dengan google docs anda bisa membuat file microsoft office yang saya sebutkan tadi secara online ataupun anda bisa mengupload file yang sudah jadi alias sudah di kerjakan secara offline dan kemudian ambil kode yang di berikan lalu setelah itu anda bisa menampilkannya di blog anda. (spreadsheet) ataupun

Apa kelebihan dari google docs? dengan google docs anda tidak perlu mempunyai software microsoft office yang lisensi nya sangat mahal terinstall di komputer anda, yang anda perlukan adalah anda bisa online di internet. Sepertinya saya tidak perlu menerangkan bagaimana cara membuat file di google docs karena penggunaannya hampir sama dengan microsoft office. Yang mau saya terangkan adalah bagaimana cara mengupload file yang sudah jadi ke google docs dan kemudian menampilkannya di blog anda. Tertarik? yuk mang kita lanjut!

Salah satu syarat untuk bisa menggunakan google docs adalah anda harus mempunyai alamat email di gmail (google acount). Jika selama ini account blogger anda menggunakan gmail maka bisa secara langsung login ke google docs. Bagi anda yang baru pertama kali masuk ke google docs, maka anda harus setuju dengan peraturan yang di buat oleh google. Sudah punya account google?  mari kita serbu google docs.

Lankah 1 : upload file ke google docs.

1. Silahkan login ke http://docs.google.com dengan account gmail anda.
2. Klik tab Upload yang berada di sebelah kiri atas layar monitor anda.
3. Klik tombol browse… di bawah tulisan Browse your computer to select a file to upload:
4. Masukan file yang ingin anda upload (word, excel, power point).
5. Klik tombol Upload File yang ada di sebelah bawahnya.
6. Tunggu beberapa saat sampai file anda terupload semuanya (tergantung dari besarnya file serta kecepatan koneksi anda).
7. Jika sudah terupload, anda bisa mengeditnya jika mau.
8. Klik tab publish yang ada di sebelah kanan atas layar monitor anda, maka akan keluar tulisan This document is not yet published.
9. klik tombol publish now yang ada di bawahnya.
10. Jika sudah selesai, lihat kembali ke bagian bawahnya!
11. Klik link bertuliskan More publishing options.
12. Setelah keluar window pop up, klik menu drop down di sebelah tulisan File format kemudian pilih HTML to embed a webpage.
13. Klik tombol Generate URL.
14. Copy kode HTMl yang di berikan, lalu paste pada notepad atau text editor lainnya.
15. Silahkan di close saja window nya.
16. Silahkan anda sign out dari google docs jika mau.
17. Selesai.

Langkah 2 : posting kode google docs ke blogger.

1. Silahkan login ke blogger dengan ID anda.
2. Klik Posting Baru.
3. Silahkan anda buat postingan yang anda inginkan.
4. Ketika anda mau menyisipkan kode yang dari google docs, klik terlebih dahulu tab Edit HTML ( jangan yang compose)
5. Paste kode google docs yang ada di notepad tadi pada tempat yang anda inginkan.
6. Klik Tombol MEMPUBLIKASIKAN POSTING.
7. Silahkan lihat hasilnya.
8. Selesai.

Sekarang anda sudah tahu cara menampilkan file excel di blog kan? ada lagi tambahan nih . Berikut adalah contoh kode HTMl yang di berikan oleh google docs :

<iframe width='500' height='300' frameborder='0' src='http://spreadsheets.google.com/pub?key=pC1rhcSE_YQEbEbMd8xfaGA&output=html&widget=true'></iframe>

Jika kita perhatikan kode tersebut adalah kode HTML untuk perintah iframe, masih ingatkan dengan perintah iframe yang pernah saya posting di “mengenal perintah iframe”? tentunya kode yang di berikan oleh google docs tidaklah mutlak harus seperti itu, tapi kita bisa memodifikasinya sesuai dengan keinginan kita. Sebagaimana kita lihat bahwa ukuran lebar (width) sebesar 500 pixel, nilai ini bisa anda ganti dan disesuaikan dengan lebar dari halaman post anda, begitupun dengan tingginya (height) ini pun bisa anda ganti dengan nilai yang anda inginkan. Ada satu lagi yang penting adalah dalam kode tersebut tidak di sertakan kode scrolling, sehingga apabila file anda sangat lebar tidak akan terlihat oleh pembaca, maka solusi yang saya berikan adalah menambahkan kode scrolling=”yes’ ataupun scrolling=”auto” pada kode iframe di atas. contoh kode yang memakai scrolling :

<iframe width='500' height='300' frameborder='0' scrolling='yes' src='http://spreadsheets.google.com/pub?key=pC1rhcSE_YQEbEbMd8xfaGA&output=html&widget=true'></iframe>

Ataupun seperti ini :

<iframe width='500' height='300' frameborder='0' scrolling='auto' src='http://spreadsheets.google.com/pub?key=pC1rhcSE_YQEbEbMd8xfaGA&output=html&widget=true'></iframe>

Dengan anda menambahan kode seperti itu, maka walaupun file anda mempunyai lebar serta tinggi yang melebihi halaman posting anda, pembaca dapat menggesernya dengsn leluasa memakai scrolling.

Selamat mencoba!

Membuat Buku Tamu di Blog

Artikel by kang Rohman

Memasang sebuah buku tamu (shoutbox/guestbook) pada sebuah blog adalah hal yang cukup lumayan penting,karena buku tamu ini merupakan salah satu sarana untuk berinteraksi antara yang mpunya blog dengan para pengunjung blog. Dengan di pajangnya buku tamu di dalam blog, maka para pengunjung dapat mengungkapkan isi hatinya tentang blog yang anda buat, yang pasti isi dari sebuah buku tamu ini sangatlah bervariasi bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada juga merupakan kritikan terhadap isi blog anda, dan justru dengan adanya variasi itulah membuat blog kita jadi hidup lebih hidu (kaya iklan aja).

Ok, terlalu lama intermezonya ya, sekarang kita kembali (ke lap...top) ke topikbahasan. Bagaimana caranya mendapatkan sebuah buku tamu. Untuk mendapatkannya sangat mudah, anda tinggal mencarinya pada mesin pencari semisal google ataupun yahoo, silahkan ketikan kata free shoutbox atau free guestbook pada search engine masing-masing situs, maka dalam beberapa detik saja akan muncul berpuluh-puluh situs penyedia buku tamu tadi, anda tinggal klik lalu coba lihat-lihat. Tapi untuk menghemat waktu pencarian anda, maka di sini saya akan langsung memberikan alamat situs penyedia buku tamu yang servernya lumayan bagus dan jarang sekali mengalami down yakni http://www.shoutmix.com. Untuk caranya silahkan anda ikuti langkah-langkah berikut ini :

1. Seperti biasa anda harus daftar terlebih dahulu dengan cara mengklik tulisan Get One noe, free>>, ataupun dengan mengklik tulisan Sign Up, silahkan anda tulis data-data anda pada form yang telah di sediakan.
2. Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan anda login dengan id anda
3. Pada kolom yang berjudul Style, klik menu appearance.
4. Silahkan klik menu pulldown di samping tulisan Load From Preset untuk mengatur tampilan buku tamu anda, silahkan pilih yang sesuai dengan keinginan anda. Jika sudah selesai klik Save Setting.
5. Untuk mendapatkan kode HTML dari shoutbox anda, silahkan klik Use Shoutbox yang berada di bawah menu Quick Start
6. Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di inginkan
7. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan Generated Codes, lalu simpan di program Notepad anda
8. Klik Log out yang berada di atas layar anda untuk keluar dari halaman shoutmix anda. Silahkan close situs tersebut.
9. Selesai

Untuk menempatkan kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini.

Untuk blogger dengan template klasik :

1. Log in terlebih dahulu ke blogger.com dengan id anda
2. Klik menu Template
3. Klik Edit HTML
4. Paste kode HTML shoutbox anda yang telah di copy pada notepad tadi di tempat yang anda inginkan
5. Untuk jelasnya saya ambil contoh dengan shoubox milik saya, untuk menempatkannya tinggal klik Edit pada browser lalu pilih Find (on this page).. trus tuliskan kata buku tamu lalu klik find, maka kita akan langsung di bawa ke tulisan tersebut. Jika sudah ketemu tulisan tadi silahkan paste kode HTML shoutbox nya.
6. Klik tombol Preview untuk melihat perubahan yang kita buat.
7. Jika sudah cocok dengan perubahan tadi, klik Save Template Changes
8. Selesai

Sedikit Clue, agar shoutbox anda sesuai dengan ukuran lebar sidebar , anda bisa merubah ukuran lebar ataupun tinggi dari shoutbox , caranya anda tinggal merubah angka Width (untuk lebar) dan Height (untuk tinggi) dari dalam kode HTML shoutbox tersebut.

Untuk Blogger baru :

1. Silahkan Login dengan id anda
2. Klik menu Layout
3. Klik Page Element
4. Klik Add a Page Element
5. Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
6. Tuliskan judul shoutbox anda pada form title. Contoh : Buku tamu ku, atau my guestbook atau apa saja yang anda suka
7. Copy paste kode HTML shoutbox anda di dalam form Content
8. Klik tombol Save Changes
9. Drag & Drop element yang telah anda buat tadi di tempat yang di sukai
10. Tekan tombol Save
11. Selesai

Selamat mencoba !

Sebagai tambahan, guestbook yang sering dipakai para blogger lainnya :

1. http://oggix.com

Untuk langkah-langkahnya hampir sama dengan langkah diatas.

MEMBUAT TEKS BERJALAN

Artikel by Kang Rohman

Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya kita bagi menjadi dua bagian. Akan tetapi perlu kita sampaikan, contoh yang akan  berikan kali ini hasilnya tidak persis seperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi  memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya.

Untuk template klasik silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat


2. Klik menu Template


3. klik menu Edit HTML


4. Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula


5. Copy kode berikut ini lalu paste di atas kode </head>



<script language='javascript'>
message = "Tulis text pertama yang ingin muncul disini ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"

scrollSpeed = 130
lineDelay = 0

// Do not change the text below //

txt = ""

function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>



6. Klik tombol Save Template Changes


7. Selesai.

Untuk template baru silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat


2. Klik menu Layout


3. Klik menu Edit HTML


4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template


5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates


6. Tunggu beberapa saat sampai proses selesai


7. Simpan kode berikut di bawah kode </body> , kode ini letaknya berada paling bawah sebelum kode </html>



<script language='javascript'>
message = "Tulis text pertama yang ingin muncul disini ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"

scrollSpeed = 130
lineDelay = 0

// Do not change the text below //

txt = ""

function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>



8. Klik tombol SAVE TEMPLATE


9. Selesai

sedikit clue, pada kode diatas ada tulisan yang saya buat merah, nah tulisan tersebut harus sobat ganti dengan tulisan yang sobat inginkan. contoh : selamat datang di blog saya. atau apa saja yang menurut sobat layak untuk di tulis di situ. contoh yang  diatas memuat pesan atau text sebanyak empat tulisan, jika sobat ingin lebih banyak itu bisa dilakukan dengan menambah baris tulisan seperti kode sebelumnya.Untuk kode --> scrollSpeed = 130 . angka "130" merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin cepat text berjalan, dan semakin besar nilainya maka text akan semakin lambat. Silahkan sesuaikan dengan keinginan sobat.


Selamat mencoba !!!