Welcome To My Blog

Selamat datang di website pribadi saya. Online Learning Tutorial merupakan Website Tutorial untuk membuat media pembelajaran online yang Kreatif dan Inovatif berbasis Blog yang dapat digunakan sebagai E-Learning.

Minggu, 28 Agustus 2011

Cara Pasang Tombol Save Page as PDF pada Blog

Mungkin ketika temen-temen berjalan-jalan sebagai blogwalker menemukan blog-blog tertentu yang memasang tombol atau badges “Save Page As PDF”. Fungsinya adalah mengkonversi halaman artikel kita menjadi format PDF. Save as PDF ini dapat membantu pengunjung yang ingin menyimpan file untuk dibaca kemudian dalam format PDF. Barangkali pada waktu itu dia tidak punya waktu untuk membaca. Nah, inilah gunanya fitur Save as PDF ditambahkan. Pembaca dapat mengubah file HTML dan halaman web secara online menjadi file PDF kemudian menyimpannya di komputer. File tersebut bisa diprint dan dibaca kemudian pada waktu yang lebih santai. Sama halnya dengan membaca buku dalam bentuk digital atau e-book. 
Tombol atau badges “Save Page As PDF” ini juga dibutuhkan untuk E-Learning kita, agar siswa kita dapat membaca dan mempelajari secara Offline artikel yang kita sajikan dalam E-Learning.
Web2PDF Online adalah situs yang menyediakan jasa ini kepada para blogger dan web publisher secara gratis.

Mungkin anda tertarik menambahkan Save as PDF pada blog anda. Secara default tombolnya seperti gambar berikut : save_as_pdf
Namun sebenarnya tombol Save as PDF ini masih dapat diganti dengan icon yang lebih minimalis atau menghilangkan tombol dan menggantinya dengan teks.
Mendaftar Di Web2PDF Online
Untuk menggunakan layanan gratis ini, anda harus mendaftar dan membuat akun di Web2PDF Online. Tidak pakai lama, cuma sebentar. Kalau sudah mendaftar, anda kan diberikan “User ID” khusus yang disesuaikan dengan blog yang anda daftarkan tentunya. Untuk membuat account, silahkan kunjungi halaman Web2PDF Online Widget dan isi semua form yang diminta. Masukkan URL blog yang akan ditambahkan tombol Web2PDF-nya. Hal ini berguna agar proses convert web page ke PDF tidak bermasalah, sebab terkadang jika kita menggunakan script dari user ID yang berbeda, maka hasilnya tidak akan sempurna. Jangan lupa untuk menyimpan user name dan password anda.
Berikutnya, anda tinggal membuat kode JavaScript dengan mengklik tombol “Generate the JavaScript” dan kode JavaScript Web2PDF generator akan diberikan pada form di bawahnya. Copy kode script tersebut pada teks editor dan paste di mana saja anda ingin menempatkannya pada blog yang sudah didaftarkan tadi. Jika anda pasang kode tersebut pada template blog, maka tombolnya akan seperti gambar di atas yang merupakan tombol default dari mereka.
pdf-online-generator-blogger
Pasang Tombol Web2PDF Online Di Bawah Posting
Nah, seperti yang saya katakan di atas, tombol save as pdf ini bisa di pasang di mana saja termasuk di akhir setiap postingan blog anda. Berikut langkah-langkahnya :

  1. Login ke blog dengan ID anda
  2. Pilih Layout
  3. Pada tab menu pilih Edit HTML
  4. Centang kotak Expand Template Widget
  5. Pasang script dari Web2PDF Online anda tepat di bawah kode  <data:post.body/>. . Jika anda telah memasang widget “read more“, maka biasanya ada dua kode seperti itu. Oleh karena itu, paste-lah kode script Web2PDF Online anda di bawah kode yang pertama <data:post.body/> . Misalnya kode script Web2PDF Online saya seperti ini: 
<!-- START: PDF Online Script -->
<script type="text/javascript">
    var authorId = "7CFDEB25-8935-4692-8E00-8A7163E72945";
    var pageOrientation = "0";
    var topMargin = "0.5";
    var bottomMargin = "0.5";
    var leftMargin = "0.5";
    var rightMargin = "0.5";
</script>
<script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js">
</script>
<!-- END: PDF Online Script -->
  1. Klik tombol Save
  2. Selesai
Jika tidak ada masalah maka tombol “Save as PDF” akan berada di akhir setiap postingan anda. Nah, pembaca dapat mengklik tombol tersebut dan seluruh halaman yang ditampilkan akan di ubah ke bentuk file PDF dan bisa disimpan untuk dibaca kemudian.
tombol-default-pdf
 
Pasang Tombol Web2PDF Online Di Sidebar Blog
Alternatif lainnya adalah memasang tombol “Save as PDF” pada sidebar blog atau tempat lain dengan menambahkan widget HTML/Javascript yang disediakan blogger. Caranya, masuk ke Layout dan klik Ad a widget, pilih HTML/JavaScript dan paste kode script Web2PDF Online anda di sana. 

Semoga bermanfaat, terimakasih.
READ MORE

Cara Buat Popular Posts Bergerak

popular posts
Untuk membuat  popular posts bergerak seperti terdapat di sidebar blog ini, kita harus memasang widget popular post terlebih dahulu. Berikut cara membuat popular posts bergerak :






Memasang Widget Popular Posts,Caranya :

1.Masuk ke Design-Page Elements



design




2.Kemudian pilih add a gadget

add a gadget



3.Ambil popular post

popular





Setelah Widget Popular Posts tersebut terpasang

4.Pada dashbor klik Rancangan pada Tab Menu , Lalu klik Edit HTML
5. Beri centang pada expand template widget, jangan lupa backup template terlebih dahulu dengan klik
6. Cari kode seperti dibawah ini:
<div class='widget-content popular-posts'><ul>
7. Copy kode di bawah ini kemudian pastekan tepat dibawah kode tadi
<marquee align='left' direction='up' height='240' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
8. Cari kode dibawah ini 
</ul>
<b:include name='quickedit'/></div>
9. Pastekan kode berikut   </marquee> sebelum kode tadi 
10. Terakhir klik simpan template anda.
 
Catatan nih :
  • height='240' dapat diubah sesuai dengan keinginan anda
  • scrollamount='2'. menunjukkan kelajuan widget dan ini dapat diubah sesuai dengan keinginan anda dengan nilai 1 paling perlahan
 Selamat mencoba....

Sumber : Teknik Buat Blog
READ MORE

Membuat Menu Melayang Pada Blog

Berbagai macam cara dilakukan para blogger untuk menghemat ruang blognya salah satunya dengan Kotak blogroll, Namun tips kali ini untuk menghemat halaman kita akan membuat menu melayang.










Menu ini dapat sobat tampilkan di bagian kiri maupun di bagian kanan blog, sobat tinggal memilih mana yang lebih cocok untuk blog kesayangan sobat.
contoh bisa diliahat disini
Bagi sobat yang ingin menampilkan menu melayang ikuti panduan dibawah ini!

1. Masuk ke Blogger dengan ID sobat.
2. Pilih Design (Rancangn) ---> Edit HTML.
3. Back up template dulu, untuk antisipasi kalau gagal.
4. Cari kode ini : </head> pada template anda.
5. Copy Seluruh script dibawah ini, kemudian paste tepat diatas </head>

<script src='http://elmubarok.googlecode.com/files/floating1.js' type='text/javascript'/>
<script>
YOffset=150;
XOffset=0;
staticYOffset=30;
slideSpeed=20
waitTime=100;
menuBGColor=&quot;red&quot;;
menuIsStatic=&quot;yes&quot;;
menuWidth=150;
menuCols=2;
hdrFontFamily=&quot;verdana&quot;;
hdrFontSize=&quot;2&quot;;
hdrFontColor=&quot;black&quot;;
hdrBGColor=&quot;#FF0000&quot;;
hdrAlign=&quot;left&quot;;
hdrVAlign=&quot;center&quot;;
hdrHeight=&quot;15&quot;;
linkFontFamily=&quot;Verdana&quot;;
linkFontSize=&quot;2&quot;;
linkBGColor=&quot;white&quot;;
linkOverBGColor=&quot;#FFFF99&quot;;
linkTarget=&quot;_top&quot;;
linkAlign=&quot;Left&quot;;
barBGColor=&quot;red&quot;;
barFontFamily=&quot;Verdana&quot;;
barFontSize=&quot;2&quot;;
barFontColor=&quot;white&quot;;
barVAlign=&quot;center&quot;;
barWidth=20; // no quotes!!
barText=&quot;WELCOME&quot;;


// ----- Mulai Edit Menu
ssmItems[0]=[&quot;My Menu&quot;] //Header Menu
ssmItems[1]=[&quot;Home&quot;, &quot;/&quot;, &quot;&quot;]
ssmItems[2]=[&quot;About Me&quot;, &quot;http://www.tipskom.co.cc/2009/07/about-me.html&quot;,&quot;&quot;]
ssmItems[3]=[&quot;Blog Tutorial&quot;, &quot;http://www.tipskom.co.cc/search/label/Blog%20Tuturial&quot;,&quot;&quot;]
ssmItems[4]=[&quot;Tips FaceBook&quot;, &quot;http://www.tipskom.co.cc/search/label/Tips%20Facebook&quot;,&quot;&quot;]
ssmItems[5]=[&quot;Tips Komputer&quot;, &quot;http://www.tipskom.co.cc/search/label/Tips%20Komputer&quot;, &quot;_new&quot;]
ssmItems[6]=[&quot;Free Antivirus&quot;, &quot;http://www.tipskom.co.cc/2009/07/free-antivirus.html&quot;, &quot;&quot;]
ssmItems[7]=[&quot;SEO&quot;, &quot;http://www.tipskom.co.cc/search/label/Tips%20SEO&quot;, &quot;&quot;]

buildMenu();
//----- Selesai Edit Menu
</script>

  • silahkan rubah WELCOME dengan tulisan apa saja yang cocok dengan kehendak sobat
  • kode yang berwarna biru wajib sobat ganti dengan alamat-2 punya sobat. 
  • MY MENU boleh kita ganti dengan MENUKU, DAFTAR MENU dll.
  • masih banyak lagi yang bisa sobat utak-atik.
  • terakhir simpan. semoga berhasil
Selamat Mencoba

Sumber : Elmubarok
READ MORE

Cara Membuat Effect Bintang Berkedip Ketika Kursor Ditujukan Ke Link

Agar blog semakin keren kita dapat membuat effect bintang berkedip ketika kursor ditujukan ke link.

Berikut adalah langkah-langkahnya :
1. Seperti biasa kita login dulu di blogger.
2. Klik tata letak / rancangan.
3. Edit HTML.. cari kode </head>
4. Letakkan kode di bawah ini tepat diatas kode tadi
Untuk yang bintangnya warna putih :
<style>
a:hover { text-decoration:blink; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwFFioTpvR5KBXeLEv22ZwajN4_ZgZSX9pg2QIqJVG1neEaZYlv6QAquuY2-n0CjSZsBfv6HvzPFJccWSEeGi5kofRRLP9PHl7qwenPeu9tlMwWtomRztZC_tPYy6Cj5owa7EfYyvC7ZQ/s1600/blink.gif); }
</style>


Untuk bintang berwarna merah ganti kode yg bercetak tebal dengan :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRdXrKGrFQkv_xp7vJnwL1ygDQwSpO6ZtjRg23oIealgeXQu5DbPRAtEacCFSG0wXQ5K85qKcZiRQb7ZtR5D4-RBva7A0yStGS90uHPaE8bK4PSzx5hIOneNCVK_GEXYgxlGp5RSvIWvY/s1600/str4.gif


Kemudian SAVE.... dan lihatlah hasilnya.

Selamat mencoba...



Sumber : Go Belajar Mandiri Blog


READ MORE

Sabtu, 27 Agustus 2011

Cara membuat Link Blog mengeluarkan Cahaya Kuning disertai Kerlipan Bintang

Untuk mempermanis blog kita, agar pengunjung betah berlama-lama pada blog kita maka kita dapat mempercantiki blog dengan Membuat Link Blog dapat mengeluarkan Cahaya Kuning disertai Kerlipan Bintang.

Langkah-Langkahnya :
1.Login Ke akun Blog Sobat
2.Pada Dasbor Klik Rancangan/tata Letak
3.Edit HTML
4.Centang Kolom Expand Widget
5.Cari Kode a:hover {  tapi  yg berdekatan dengan  a:link{  atau berdekatan dengan a:visited{ copy kode di bawah ini tepat disebelah kode a:hover {

text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40,   2px -10px 10px #f10;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Utnk4J4NqZj7-QizqXXu6FLLe2r91-bg3CgBbPol51bZyjHxgCmQ53JHHHSVq1hDtpv_fVlQDVyOaVe-G0PEnTZQu98q38juJe_SfXAOXC5IHyAoDTZzS76LBxmHhHobysXUlq-MLQY/s1600/stars.gif);}

6. Simpan templatenya dan lihat hasilnya!

Selamat mencoba..

Sumber : Musa Khairul Umam  dan Apa Susahnya






READ MORE

Cara Membuat Kotak Facebook Fans di Blogger

Kotak Facebook Fans di blog dapat dimanfaatkan oleh guru untuk menunjukkan keanggotaan siswa-siswanya khususnya yang tergabung dalam kelas dunia maya di Facebook.
 
Syarat pertama harus punya akun facebook jika belum punya silakan daftar disini www.facebook.com


1.   Setelah mimiliki akun FB silakan anda login terlebih dahulu ke facebook.
2.   Bukalah halaman ini : http://www.facebook.com/pages/create.php jika anda belum punya community page
3.   atau Pilih "create a page" atau klik disini
4.   Akan muncul seperti gambar di bawah ini, dan isi sesuai nama komunity anda
Terbaru
Pilih zona apa yang hendak kamu buat, apa perusahaan, bisnis, merk ds, agang, artis, huburan, atau community. (nah klo di merk/produk saat di klik dan di scrool ke bawah ada catagori situs web)
 akan ada ada form yang harus di isi lengkapilah.

Zaman Dulu (UDAH GA BERLAKU LAGI) hiraukan saja!

setelah itu klik create community page.

Baiklah sekarang kamu sudah memiliki halaman fans untuk blog kamu,..

Berikutnya adalah Cara Membuat like This Box Facebook di Blog


1. Silakan Klik http://developers.facebook.com/plugins/?footer=1

klik gambar untuk memperbesar
Tampilan nya nanti akan seperti di atas... yang kang salman ber tanda merah di atas adalah widget yang paling banyak di pake di blog.

Zaman Dulu (Lewat Saya jgn di perhatiin)
 (itu adalah ID community page anda)
Sekarang yang di copy url pagenya
Sebelumnya saya ingatkan Anda harus mengcopy URL page Fans Facebook Anda, jadi klau belum silakan kembali lagi.


1. Pilih Like Box
Perhatikan gambar di bawah ini :
Dahulu
klik untuk memperjelas (Lewat Aja)

Sekarang yang perlu kamu masukan bukan ID community, tetapi masukan url pagenya.. tepat di kolom "facebook page url"
Gambar oleh : www.kucoba.com

Keterangan :
Width : lebar widget
Height : ketinggan dari widget
Connections : jumlah max penggemar yang di munculkan
Stream : menampilkan komentar di community page anda
Header : menampilkan kata "find us on facebook

7.  Setelah selesai silakan klik Get Code, dan copy kode yang anda dapatkan seperti gambar di bawah ini


8.   Login ke Blogger
9.   Pilih Edit Tampale / Tata Letak
10.  Lalu Tambah Widget / Gedget
11.  Pilih HTML / Javascript
12.  (paste) salin kode tadi disini
13.  Simpan

Ok, sekarang anda bisa melihat hasilnya.
semoga bermanfaat ya ^_^


Sumber : Kucoba
READ MORE

Memasang Tombol Facebook Suka di Blog

Fungsi dan kegunaan tombol ini adalah sebagai jembatan penghubung antara pengguna facebook dan halaman blog Anda, sehingga akan mudah bagi Anda berbagi konten dengan teman-teman di facebook. Semakin banyak blog Anda disukai oleh pengggemar facebook berarti semakin lebih dikenal pula blog Anda oleh pengguna facebook, dan otomatis akan sangat membantu untuk menaikan traffic dan page rank blog.

Tombol Facebook Suka dapat dimanfaatkan guru untuk berbagi info ataupun materi dari blog E-Learning nya kepada siswa dalam Group Kelas Dunia Maya di Facebook, sehingga semakin mempermudah komunikasi dalam pembelajaran online dengan blog.

Berikut contoh tampilan tombol facebook di blog:







Kita asumsikan seperti ini : Saya adalah pengguna facebook dan menyukai salah satu isi artikel yang ada di blog Anda, lalu saya meng-klik tombol suka yang ada pada halaman tersebut, dengan demikian akan ada laporan di aktifitas facebook bahwa saya menyukai halaman blog Anda, dan otomatis akan terlihat oleh semua teman-teman saya yang ada di facebook tersebut. Dengan demikian semakin besar pula peluang blog Anda dikenal melalui facebook yang akan memperbesar peluang dalam meningkatkan traffic rank. Dan berikut tampilan bila saya menekan tombol facebook "suka" pada postingan Anda.






Coba Anda bayangkan bila saya mempunyai 1000 teman aktif di facebook, 1000 orang pula akan melihat aktifitas saya , 1000 orang pula akan melihat postingan Anda, 1000 orang pula kemungkinan akan meng-klik blog Anda, maka pada akhirnya 1000 pengunjung pula dalam satu hari di blog Anda. Dahsyat...bukan fungsi dari tombol facebook yang mungil ini. Tertarik bagaimana cara pasangnya, yuk perhatikan kode dibawah ini :


<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

Anda dapat mengatur atau mengganti teks yang berwarna dengan pilihan Anda

layout=standard menjadi layout=button_count .


show_faces=false menjadi show_faces=true

action=like menjadi action=recommend

font=arial  menjadi  font=lucida+grande atau font=segoe+ui atau font=tahoma atau font=trebuchet+ms atau font=verdana

colorscheme=light menjadi colorscheme=dark  


Cara pemasangannya :


1.Login ke Blogger > Layout/Tata Letak > Edit HTML > Expand Widget Templates


2.Copy kode diatas dan letakan tepat dibawah kode berikut
<div class='post-header-line-1'/>

atau kalau tidak ada menemukan kode diatas bisa juga diletakan sebelum kode berikut

<data:post.body/>

atau kalau tidak ada menemukan kode diatas bisa juga diletakan tepat di bawahnya kode berikut
<div class='post-footer'>


Untuk memudahkan menemukan kode html yang berada diblog Anda, silahkan tekan tombol CTRL+F dan copy kode yang ingin dicari kemudian paste-kan didalam kotak pencarian. Saya yakin Anda pasti bisa.
Demikian sedikit banyak pengetahuan yang saya bagikan tentang bagaimana Memasang Tombol Facebook "suka" di Blog, semoga postingan ini ada manfaatnya , salam...

Sumber : Masbugie
READ MORE

Jumat, 26 Agustus 2011

Cara Memasang File Flash di Blogspot Baru

Nih, request dari Bu Arwiyati, ternyata template blogspot baru ada yang ga support dengan srcipt tutorial MamGuru di cara-memasukan embed object animasi flash pada web atau blog yang lalu. Nah dari Googling pagi ini, ketemu dech solusinnya dari Blog Pak Dani, Tutorial ini penting tuk melengkapi E-Learning bagi Guru-Guru khususnya yang ingin menampilkan medianya dalam format flash pada blog E-Learningnya, berikut tutorialnya !!

Halaman web selalu bertambah dari hari ke hari dengan berbagai tampilan yang sangat menarik untuk menggaet para pengunjung. Banyak yang menampilkan berbagai animasi seperti gif ataupun flash. Pada kesempatan ini kita bahas cara menampilkan (posting) animasi berbasis flash di halaman website.
Anggap saja kita sudah mempunyai animasi flash, entah membuat sendiri atau download dari web lain.  Animasi flash biasanya mempunyai ekstensi .swf sedangkan jika ingin menempelkan di halaman web maka harus diubah dulu dalam format html. Caranya ikuti langkah-langkah berikut :

1.  Siapkan animasi flash
2.  Buka alamat http://swfcabin.com untuk meng-upload file animasi 
 

3.  Ketik nama judul animasi pada kotak "Title"
4.  Klik Pilih Berkas yang hendak di-upload dari komputer
5.  Klik Publish Swf
 

6.  Copy alamat pada kotak berbingkai merah, buka Notepad kemudian Paste
7.  Ubah kata open menjadi swf-files dan tambahkan di akhir dengan .swf sehingga
     menjadi :
     http://www.swfcabin.com/sswf-files /1293114421.swf
8.  Copy kode di bawah ini pada blog post atau halaman html web/blog

<embed src="FileAnda.swf" quality="medium" allowscriptaccess="always" bgcolor="#000000" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="535" width="660"></embed>

9.  Anda bisa mengatur lebar (width) dan tinggi (height) sesuai dengan kebutuhan
10.Selesai

Selamat mencoba yaaa...
READ MORE

Kamis, 25 Agustus 2011

Coba

READ MORE

Rabu, 24 Agustus 2011

Cara Mudah Pasang Favicon di Blogspot Baru

Untuk Identitas Blog kita, sebaiknya kita memasang Favicon pada address bar blog kita.

Apa itu Favicon ??

Favicon adalah kependekan dari Favorites Icon, atau sebuah gambar atau icon yang biasanya berukuran kecil dan terlihat di samping alamat url blog/website ketika kita membukanya dari web browser.  Cara mudah dan simple untuk pasang favicon di blogspot ini sebenarnya bikin saya agak sedikit kaget juga sih, apakah memang feature Favicon memang benar-benar baru atau memang sudah lama terletak di halaman layout page element. Karena ketika saya masuk ke dashboard Blogger, ada penampakan untuk menyelipkan gambar favicon. 

Nah, jika anda ingin menggunakan favicon pada blog anda, sekarang bagi yang menggunakan platform Blogger or Blogspot ternyata sudah tersedia di halaman layout dashboard lho. Caranya tinggal upload gambar yang mau di jadikan favicon untuk blog anda. Untuk lebih lengkapnya, berikut tutorial cara pasang favicon pada blogspot

- Pertama-tama, pastinya anda harus siapkan dulu gambar yang akan anda jadikan sebagai favicon.
- Kemudian, silahkan compress gambar tersebut menjadi sebuah gambar icon. Anda bisa search di Google, tools yang bisa anda gunakan. Atau kalau mau, anda bisa coba menggunakan favicon generator  disini. Upload gambar anda, klik generate to Favicon.ico. Silahkan edit/customize gambarnya (seperti gambar di bawah), jika favicon anda kaya’nya sudah ok,  setelah itu download.


- Langkah terakhir adalah, ekstrak file yang telah di download tadi, dan silahkan unggah/upload gambar yang ekstensi .gif ke hosting anda kemudian simpan/save. Selesai..

Favicon tutorial, step 2

Dengan adanya feature Favicon dari Blogger, cara pasang favicon akan terasa lebih mudah saat ini. Yaitu :
1. Klik Rancangan
2. Pilih Favicon lihat gambar di atas
3. Klik Edit
 4. Klik Browse untuk memilih gambar favicon kita yang telah kita buat melalui Favicon From Picture yang berekstensi gif
5. Klik Simpan
Selesai dech.... Gampang kan??!!

Oh iya, by the way, jika favicon sudah sukses di upload tapi gambarnya masih belum kelihatan, silahkan di tunggu beberapa menit ya, ntar juga keluar kok.

Selamat mencoba ya..
READ MORE

Selasa, 23 Agustus 2011

Cara Posting file Word, Excel dan Powerpoint di Blog via Google Docs

Adakalanya untuk melengkapi kebutuhan E-Learning via Blog, guru perlu mempostingkan file-file office yaitu bentuk microsoft word (document) dan microsoft excel (spreadsheet) ataupun microsoft power point (presentation) di blog, maka untuk kebutuhan itu Guru 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.
 

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.
Langkah 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.
Sumber : Ca'em
READ MORE

Cara Mudah Membuat Tabel/Tabel HTML di Posting Blog

html-tables-cara membuat table/tabel-blogspot
Menyajikan tabel dalam posting blog di blogspot dalam E-Learning adakalanya dibutuhkan guru khususnya guru yang mengampu mata pelajaran ekonomi. Namun Membuat tabel/table HTML untuk posting di blog memang agak rumit, karena dibutuhkan banyak bahasa dan tag yang apabila keliru atau kelewat sedikit saja bisa merusak tampilannya. Namun, bagaimanapun juga, tabel/table tetap dibutuhkan agar postingan yang berisi detail tertentu dapat tersusun dengan baik. Selain itu, pembaca pun dapat membaca serta memilah dan memilih bagian yang dibutuhkan dengan mudah dan cepat.

Perhatikan contoh tabel berikut:
Text atau Gambar Text atau Gambar Text atau Gambar
Text atau Gambar Text atau Gambar Text atau Gambar
Text atau Gambar Text atau Gambar Text atau Gambar

Dan ini adalah susunan bahasa table HTML yang digunakan pada table di atas:
<table border="1" bordercolor="#3366FF" style="background-color:#CCFFFF" width="400" cellpadding="3" cellspacing="3">
    <tr>
        <td>Text atau Gambar</td>
        <td>Text atau Gambar</td>
        <td>Text atau Gambar</td>
    </tr>
    <tr>
        <td>Text atau Gambar</td>
        <td>Text atau Gambarl</td>
        <td>Text atau Gambar</td>
    </tr>
    <tr>
        <td>Text atau Gambar</td>
        <td>Text atau Gambar</td>
        <td>Text atau Gambar</td>
    </tr>
</table>
Itu baru bentuk tabel sederhana dengan menggunakan 3 row dan 3 column dan warna sederhana. Bagaimana jika jumlah kolomnya puluhan dan warnanya bervariasi? Tentu saja akan sangat memakan waktu dan melelahkan. Belum lagi nanti kalau ada kesalahan, mengeditnya akan butuh waktu bertahun-tahun, rambut beruban, atau justru malah jadi botak, ya gak..... ^_^
Untungnya sekarang ada banyak layanan HTML table generator online yang memberi banyak kemudahan. Anda tinggal masukkan jumlah row dan column, ukuran luas dan tinggi, warna, border, dan beberapa aturan mudah lainnya. Setelah itu klik generatornya. Selanjutnya,copy hasil kode tabelnya ke HTML editor posting blog. Isi tabel/table tersebut dengan tulisan atau gambar yang diinginkan. Selesai.

Berikut situs-situs penyedia layanan HTML Generator online:
1. Quackit
2. Code-Generator
3. Spectrum-Research. Table dengan  aturan CSS dan konsep Frame.
4. Hoover Web Design. Bukan untuk pengguna Browser Netscape.
5. 2CreateAWebsite
6. HTML Basix
7. HTML Portal
8. Table Generator

Pilih atau silakan coba semua generator tabel online di atas. Anda dapat mencoba terus-menerus dan mengulang kembali apabila ada kesalahan. Yang jelas, dengan cara ini, membuat table/tabel menjadi lebih mudah dan cepat. Thanks to all HTML Table Generators!

Have fun!

Sumber : Bukan Rahasia Lagi
READ MORE

Senin, 22 Agustus 2011

Cara Posting Video Youtube pada Blogspot

Youtube adalah salah satu situs terbesar penyedia  file  video flash, dimana video-video youtube tersebut dapat digunakan sebagai media pembelajaran. Berikut cara memposting file video youtube pada posting blog kita dengan Blogspot tentu saja.

  • Login dulu ke account blogspot, kemudian langsung pilih NEW POST.
  • Buka www.youtube.com, lalu pilih video sesuai keinginan anda.
  • Pada halaman youtube.com sebelah kanan terdapat keterangan URL dan Embeed, seperi gambar berikut !

  • Nah, kode yang ada di Embeed itu silahkan anda copy dan paste di posting blogspot. Lalu klik PUBLISH POST.
  • Silahkan anda cek hasilnya dengan klik VIEW BLOG dan walla…, video dari youtube.com tampil di blog anda.
 Selamat mencoba..

Sumber : Arifjayarana's Blog

READ MORE