Untuk seluruh siswa/i X-2 SSB Lhokseumawe, nilai UAS TIK semester Ganjil diambil dari kreatifitas kamu membuat blog. Masing-masing siswa harus mengerjakan semua postingan yang ada di blog X2ssblhokseumawe.blogspot.com. Silakan percantik blognya dengan mengganti template atau memberikan tambahan animasi. Untuk cara merubah template dan menambahkan animasi coba nge-browse ke "Uncle Google" :)
Semakin kamu banyak mencoba, semakin banyak kreatifitas kamu dalam mempercantik blog...
Ocreee...Blog yang ada akan dinilai paling lambat Jumat, 24 Desember 2010
btw, harus sering2 buka blog x2ssblhokseumawe.blogspot.com karena akan ada tambahan 2 postingan baru untuk melengkapi tugas yang sudah ada...trus kasih saran, kritikan buat kita belajar bersama2 gimana baiknya, gimana enaknya...
txs a lot beuhh:)
Thursday, December 16, 2010
Nilai UAS Semester Ganjil TIK
Cara Menampilkan Recent Post (Postingan Terbaru)
Kamu pingin nampilin postingan terbaru (Recent Post) kamu di side bar?
Kalo pingin, beginilah caranya :
1. Login to Blogger kemuduan pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3. Copy kode berikut ini dan taruh dalam kotak "content".
#script src="http://www.geocities.com/uddin_81/recent-post.js"^#/script^
#script^var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; #/script^
#script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"^
#/script^
Keterangan: Pada pengcopyan script diatas ke blog kamu, ganti simbol # dengan < dan ^ dengan >
4. Ganti YOURBLOGNAME dengan nama blog kamu.
5. Angka "10" menunjukkan jumlah "Recent Post" yang ditampilkan, kamu bisa menggantinya
6. Terus Simpan.
Ganti Ikon Favicon pada Blogspot
Sebenernya kurang begitu jelas apa istilahnya apakah itu benar Favicon. Tapi yang jelas yang dimaksud disini adalah icon yang ada di samping alamat url pada browser (baik itu Firefox, IE, dan teman-temannya). Untuk blog yang menggunakan Blogspot, sudah jelas ikonnya pasti logo Blogspot (huruf B) berwarna putih dengan kotak berwarna oranye.
Bisakah kita mengganti ikon tersebut sesuai dengan keinginan kita? Langkah pertama, yang harus kita lakukan adalah membuat ikon itu sendiri, buat image dengan ukuran 16×16 pixel (bisa menggunakan Photoshop atau program pengolah gambar lainnya. Simpan file tersebut dengan format .png.
Selanjutnya kita masuk ke kontrol panel Blogspot, dan buat posting baru, hanya saja untuk posting di sini, kita hanya melakukan upload image yang telah kita buat sebelumnya.
Setelah image masuk, sekarang kita masuk tab Edit Html, untuk mengambil (mengcopy) alamat url dari image yang telah kita upload tadi (url image ada setelah kata src=), dalam contoh image tersimpan di alamat https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcZ1Ejj1Hne-jEw23D0mp2cvLReX85KORMg6U3k3lM50UWHRKapAoq_-RooehotLMao3QiO59CfLh_6m4jYCr_nWo7lnqJGUOlfQ0hClQ2lpW7dGhIsKWVhumgDwSeyk-sGg2DlPvkMdan/s400/favicon.png. Jika sudah dicopy, maka simpan posting-an tersebut sebagai draft (ingat jangan dipublish).
Langkah berikutnya, masuk ke tab Layout dan Edit Html, centang Expand Widget Templates.
Cari tag #/b: skin^#[CDATA], kemudian masukan script berikut di atasnya. Ganti alamat-url-ikon.png dengan url yang telah kita copy tadi.
view sourceprint?
1.#link href='http://alamat-url-ikon.png' rel='shortcut icon'/^
2.#link href='http://alamat-url-ikon.png' rel='icon'/^
Contoh:
view sourceprint?
1.#link href='http:// 2.bp.blogspot.com/_HEJWTRbFQg4/Sgkf-Gue3GI/AAAAAAAAADg/imlhJrYZ_7s/s400/favicon.png ' rel='shortcut icon'/^
2.#link href='http:// 2.bp.blogspot.com/_HEJWTRbFQg4/Sgkf-Gue3GI/AAAAAAAAADg/imlhJrYZ_7s/s400/favicon.png ' rel='icon'/^
Setelah selesai, kita simpan template tersebut dan selesai. Sekarang bisa kita coba buka alamat blog yang kita rubah ikon Favicon-nya. Jika berhasil maka sekarang favicon sudah berubah sesuai dengan image yang kita buat dan upload tadi.
Keterangan: Pada pengcopyan script diatas ke blog kamu, ganti simbol # dengan < dan ^ dengan >
Thursday, November 25, 2010
Membuat Efek Marquee atau Teks Berjalan
Marquee adalah kode HTML yang berguna untuk membuat teks berjalan. Dengan memasang marquee ini, blog kita akan terlihat lebih hidup dan dapat menghemat ruangan pada blog kita.
Ada beberapa efek marquee yang dapat kita buat seperti: teks bergerak kesatu arah, bergerak bolak balik, bergerak keatas, bergerak sekali saja, dan lain-lain.
Efek-efek ini timbul karena adanya perpaduan dari beberapa fungsi yang disebut dengan attributes. Sebelum kita mulai, mari kita pelajari dulu fungsi dari masing-masing atributes.
Beberapa attributes yang sering digunakan dalam marquee yaitu:
1. Behavior : untuk mengatur gaya gerakan pada teks.
Ada 3 gaya gerakan yang bisa digunakan yaitu :
* Alternate : Teks bergerak bolak-balik
* Slide : Teks hanya bergerak sekali saja
* Scroll : Teks bergerak ke satu arah secara kontinu
2. Direction : mengatur arah gerakan teks.
Ada 4 arah gerakan yang bisa digunakan yaitu :
* Up : Teks bergerak keatas
* Down : Teks bergerak kebawah
* Left : Teks bergerak kekiri
* Right : Teks bergerak kekanan
3. Face : Untuk mengatur font teks seperti : arial, verdana, times new roman, courier, dan lain-lain. Anda bisa menggunakan semua jenis font yang tersimpan pada komputer Anda
4. Color : Untuk mengatur warna teks, seperti : "black", "green", "blue", "red", "yellow", dan lain-lain. Anda juga bisa menggunakan kode warna untuk menghasilkan warnanya, seperti: "#fffff", "#ff5a00", "#abb0b5", dan lain-lain. Belum tau cara menghasilkan kode warna. Baca disini
5. Width : Untuk mengatur panjang ruangan teks dalam satuan pixel.
6. Height : Untuk mengatur lebar ruangan teks dalam satuan pixel.
7. Bgcolor : Untuk mengatur warna background, seperti: "black", "green", "blue", "red", "yellow", dan lain-lain. Jika Anda ingin menghilangkan warna background gunakan "transparent".
8. Scrolldelay: Untuk mengatur waktu tunda gerakan dalam satuan mili detik.
9. Scrollamount: Untuk mengatur kecepatan gerakan dalam satuan pixel.
10. Loop: untuk mengatur jumlah pengulangan.
Itulah beberapa attributes yang sering digunkan untuk membuat efek marquee atau teks berjalan. Berikut saya akan memberikan beberapa contoh efek marquee:
Contoh 1: Efek teks berjalan bolak-balik secara horizontal:
kode:
*font face="arial" color="black" size="4"#*marquee direction="right" behavior="alternate" direction="right" scrollamount="2" height="20px" scrolldelay="10" bgcolor="orange" width="450px"#Welcome To My Blog*/marquee#*/font#
Contoh 2: Efek teks berjalan bolak-balik secara vertikal:
kode:
*font face="verdana" color="yellow" size="4"#*marquee direction="up" behavior="alternate" scrollamount="2" height="100px" scrolldelay="10" bgcolor="green" width="450px"#Welcome To MyBlog*/marquee#*/font#
Contoh 3: Efek teks berjalan kekanan secara kontinue:
kode:
*font face="times" color="green" size="4"#*marquee direction="right" behavior="scroll" scrollamount="3" height="20px" scrolldelay="10" bgcolor="yellow" width="450px"#Welcome To MyBlog*/marquee#*/font#
Contoh 4: Efek teks berjalan kekiri sekali saja:
kode:
*font face="courier" color="red" size="4"#*marquee direction="left" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="blue" width="450px"#Welcome To MyBlog*/marquee#*/font#
Contoh 5: Efek teks berjalan kekanan tiga kali:
kode:
*font face="courier" color="blue" size="4"#*marquee direction="right" loop="3" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="red" width="450px"#Welcome To MyBlog*/marquee#*/font#
Contoh 6: Efek Bounce:
kode:
*font face="comic sans ms" color="orange" size="4"#*marquee scrolldelay="10" behavior="alternate" direction="up" width="450px" scrollamount="2" height="100px" bgcolor="black"#*marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2"#Panduan membuat blog*/marquee#*/marquee#*/font#
catatan:
ganti simbol * dengan <
ganti simbol # dengan >
Cara Memasukkan Video Youtube Ke Postingan Blog Anda
Berikut ini langkah – langkah Cara Memasukkan Video Youtube Ke Postingan Blogspot:
* 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.
* 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.
Membuat foto animasi
Lagi-lagi berbicara tentang animasi, memang dengan animasi bisa bikin hidup jadi hidup ( kaya iklan aja ). Ya dalam kesempatan kali ini akan coba di bahas tentang bagaimana cara membuat animasi gambar ataupun foto. Bagi yang sudah terbiasa menggunakan program animasi semisal MacroMedia Flash Player ataupun teman-temannya sudah barang tentu bukan hal yang wah ataupun aneh, tapi bagi sekelompok orang seperti saya ini, membuat animasi foto adalah suatu hal yang sangat sulit sekali.
Nah sebagai contoh yaitu http://www.slide.com. Untuk membuat sebuah foto animasi di slide.com, silahkan ikuti langkah-langkah berikut :
1. Silahkan buka situs www.slide.com
2. Langkah pertama yaitu harus daftar dahulu pada situs tersebut
3. Klik tulisan Sign Up untuk melakukan pendaftaran (daftar gratis)
4. Masukan alamat email pada kolom yang disediakan. isi juga password yang diinginkan
5. Jika sudah, silahkan klik tombol sign Up, dan otomatis sobat sudah masuk ke halaman account sobat
6. Langkah selanjutnya adalah melakukan pembuatan animasi
7. Klik style, untuk memilih gaya dari animasi
8. klik skin, untuk memilih bingkai animasi
9. klik Size untuk memilih ukuran
10. Klik Tombol Select Image, lalu masukan foto/image yang ingin sobat masukan
11. klik tombol Upload untuk melakukan proses upload foto
12. Jika proses upload selesai, klik tombolSave
13. Copy kode HTML yang di berikan, lalu paste pada program notepad
14. Klik tulisan Log Out untuk keluar dari situs tersebut. Silahkan tutup halaman browser
15. Langkah selanjutnya adalah memasukan kode HTML animasi tersebut ke dalam blog
Wednesday, November 3, 2010
Online...online...
Comment Box
Kotak ngoceh atau istilah lainnya shout box, Say Box, Tag Board, dan Chatter Box adalah suatu kotak yang berfungsi untuk mengirimkan pesan-pesan pendek, namun bisa juga berfungsi sebagai tempat ngobrol (chatting). Dengan shoutbox, kita juga bisa mempromosikan blog kita, misalnya nih, kita datangi blog orang yang menyediakan kotak ini kemudian kita kasih komentar atau cuma sekedar salam di shoutbox mereka, lalu yang punya blog akan melihat di shoutbox, biasanya
meraka akan balas mengunjungi blog kita. Nha gitu ceritannya. Biasanya kotak ngoceh diselipkan kedalam halaman web/blog dengan bahasa java Script. Bagi kamu yang jago pemrograman java script mungkin bisa membuatnya sendiri dengan membuat kode-kode yang memusingkan kepala. Namun buat kamu yang nggak jago nggak usah kuatir karena sekarang ini banyak situs internet yang menyediakan layanan ini, salah satunya yaitu www.Shoutmix.com. Caranya adalah sebagai berikut :
1. Buka situs www.Shoutmix.com. Kamu harus mendaftar di situs tersebut, cara daftarnya gampang kok.
2. Jika pendaftarannya berhasil kamu langsung disuruh milih type shoutbox yang disediakan, terserah kamu milih bentuknya yang gimana. Klik tombol Continue
3. Setelah itu kamu akan mendapat ucapan "Terima Kasih" :D lalu klik link Go to My Control Panel Now
4. Disitu kamu bisa mensetting terlebih dahulu shoutbox kamu, misalnya Style & Color, Date & Time, dan lain-lain.
5. Jika sudah selesai klik menu Get Codes
6. Jika kamu pingin menaruh shoutbox di blog kamu pilih "Place Shoutbox on Webpage"
7. Atur lebar dan tinggi shoutbox di kolom widht dan hight
8. Kemudian Copy kode yang ada di dalam kotak "generated Codes"
9. Login ke blogger.com lalu pilih Layout kemudian Add Page Elements
11. Tambahkan element HTML/Javascript.
12. Paste Kode yang telah kamu copy dari shoutbox.com tadi di kotak "Content" lalu simpan.
13. Jadi deh.....
Pasang Jam di Blog
Untuk memasang jam ke dalam sidebar blog kita caranya gampang, karena kita mengunakan layanan web clockklik.
Pertama
Buka situsnya web www.clocklink.com/gallery.php. Dalam galeri pilih model jam yang paling menarik menurut kita.
Kedua
Setelah mendapatkan tampilan jam yang di inginkan klik tulisan View Html Tag. pada jendela yang terbuka klik Accept. setelah itu dalam panelnya atur format jam, kemudian pilih salah satu kode yang ingin kita copy pastekan. yang pertama berformat javascript, sedangkan kotak yang kedua berformat file flash.
Ketiga
Setelah itu copy paste salah satu kode clocklink ini pada elemen Html Java Script.
Thursday, October 21, 2010
Cara Membuat Read More / Baca Selengkapnya
Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut
1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :
#p^#data:post.body/^#/p^
4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:
#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^
Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".
5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:
#span class="fullpost"^
#/span^
8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :
#span class="fullpost"^
#/span^
10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : #span class="fullpost"^ sementara sisanya yaitu keseluruhan posting letakkan di antara kode #span class="fullpost"^ dan #/span^
11. Ini yang paling penting diantara semua proses diatas yaitu ..... Selesai..... he..he..he.. :D
Selamat Mencoba...
Keterangan: Pada pengcopyan script diatas ke blog kamu, ganti simbol # dengan < dan ^ dengan >
Tuesday, October 19, 2010
Cara Membuat Read More / Baca Selengkapnya
Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut
1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :
#p^#data:post.body/^#/p^
4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:
#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^
Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".
5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:
#span class="fullpost"^
#/span^
8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :
#span class="fullpost"^
#/span^
10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : #span class="fullpost"^ sementara sisanya yaitu keseluruhan posting letakkan di antara kode #span class="fullpost"^ dan #/span^
11. Ini yang paling penting diantara semua proses diatas yaitu ..... Selesai..... he..he..he.. :D
Selamat Mencoba...
Keterangan: Pada pengcopyan script diatas ke blog kamu, ganti simbol # dengan < dan ^ dengan >
Cara Menulis Kode HTML pada Kolom Komentar
Suatu kali pengunjung pernah menulis kode pada kolom komentar blog ini. Tetapi yang tampil hanya tulisan span saja, tanpa tanda < dan >. Namun dari kalimatnya saya bisa memahami bahwa yang ia maksud sebenarnya adalah . Nah, kenapa hal itu bisa terjadi? Tanpa bermaksud merendahkannya, menulis kode HTML pada kolom komentar (termasuk juga menulis kode HTML pada posting) sebenarnya tidak sama dengan cara menulis tulisan biasa. Ada beberapa kiat yang mendasarinya. Sebagai contoh di bawah ini adalah beberapa kode HTML yang sering digunakan dan sekaligus cara penulisannya:
1. Kode < ditulis dengan <
2. Kode > ditulis dengan >
3. Kode & ditulis dengan &
4. Kode " ditulis dengan "
5. Jika igin spasi ditulis dengan
Monday, October 18, 2010
Cara Buat Teks Bergerak (Marquee) di Blog
Apabila Anda melihat link atau teks yg bergerak di sidebar blog ini, itu namanya marquee (baca, marki). Program html marquee ini berguna bukan saja untuk menarik tamu yg datang agar memperhatikan apa yg tertulis di dalamnya tapi juga berfungsi untuk menghemat ruang (space) sidebar kita sehingga lebih efektif dan efisien. Bagaimana cara membuat marquee?
Cara membuatnya mudah. Cukup Anda copy dan paste code html berikut ke sidebar blog atau di manapun sesuai keinginan Anda:
< MARQUEE align="center" direction="up" height="200" scrollamount= "2"
onmouseover='this.stop()' onmouseout='this.start()' width="100%">(teks atau link tulis di sini)< /MARQUEE>
Contoh Marquee untuk link (copy & paste dan ganti contoh link sesuai keinginan Anda):
< MARQUEE align="center" direction="up" height="200" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="100%">
< a href="http://fatihsyuhud.com" target="new">- Blogger Indonesia -< /a>
< a href="http://afatih.wordpress.com target="new">- Refleksi dan Blog Tutorial -< /a>
< a href="http://www.jobvacancycareer.com/ target="new">- Jobs Info -< /a>
< a href="http://www.beasiswas.com/ target="new">- Beasiswa -< /a>
< a href="http://www.beasiswas.net/ target="new">- Beasiswa -< /a>
< a href="http://www.beasiswas.info/ target="new">- Beasiswa -< /a>
< a href="http://www.beasiswas.org/ target="new">- Beasiswa -< /a>
< a href="http://lowonganbeasiswa.com/ target="new">- Beasiswa -< /a>
< a href="http://beasiswa.blogs.ie/ target="new">- Beasiswa -< /a>
< a href="http://www.lowongankerjas.com/ target="new">- Loker -< /a>
< a href="http://www.lowongankerjas.net/ target="new">- Loker -< /a>
< a href="http://www.lowongankerjas.org/ target="new">- Loker -< /a>
< /MARQUEE>
Catatan:
1. Kode < br /> adalah singkatan dari (line break) atau ganti garis, supaya setiap link tidak numpuk dalam satu baris. Bila jarak satu link dg link yg lain dianggap terlalu sempit, bisa ditambah dg kode < br /> lagi. Sesuai selera.
2. Kode target="new" atau target="_blank" berfungsi agar supaya tercipta window baru ketika ada yg mengklik link yg ada dalam marquee sehingga pengunjung tidak meninggalkan blog Anda.
Contoh Marquee untuk teks:
< MARQUEE align="center" direction="up" height="200" scrollamount= "2"
onmouseover='this.stop()' onmouseout='this.start()' width="100%">Mengutip sebagian atau keseluruhan isi blog ini ke blog Anda dipersilahkan ASAL menyebut URL sumber tulisan dan/atau permanent link artikel yg dikutip.
< br>
Komentar, saran atau pertanyaan dapat diajukan melalui bukutamu, kotak komentar blog atau email ke: blogger.indonesia@gmail.com.
< /MARQUEE>
Catatan:
1. Jangan lupa untuk menyelipkan kode < br /> untuk ganti garis atau paragraf.
TIP PENTING:
1. tag atau kode: direction="up" artinya tulisan/teks bergerak ke atas seperti di blog ini, jadi kode "up" bisa diganti dg "down" bila ingin link/teks bergerak ke bawah; dan ganti menjadi "left" supaya bergerak ke kiri dan "right" supaya bergerak ke kanan.
2. Marquee hanya dapat digunakan di blogspot, self-hosted wordpress, dll.
3. a.Untuk di blogspot, klik Elemen -> Teks -> pasang kode marquee di atas.
b. Untuk self-hosted wordpress -> aktifkan widget -> naikkan widget text -> pasang kode marquee.
c. blogsome.com, blogs.ie dan self-hosted wordpress: klik manage -> files -> pasang kode marquee di sidebar.
Salam nge-Blog!