Wednesday, September 2, 2009
Tutorial
alamat web panduan buat oprek blog...lebih cepat lebih bagus
http://panduan-blogger-mania.blogspot.com
http://blogtemplate4u.com/
http://ariawijaya.com
http://www.blogcatalog.com
Mau Lanjut...
http://panduan-blogger-mania.blogspot.com
http://blogtemplate4u.com/
http://ariawijaya.com
http://www.blogcatalog.com
Mau Lanjut...
Tuesday, September 1, 2009
Monday, August 31, 2009
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/AVvXsEh0KGEGe8CkvSlqEwfTnCKwA2F4KeHbzF8GHEARoH7ld6uFeNt1JnvZWW-rYLbUv7GL-sNWyrUeMD-YgIMpbmjH_X9gB06YI31e8fVphal_4CRzApWuH_S_Z2iEo1rKpESBvtXWNxf2VTYt/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 >
Mau Lanjut...
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/AVvXsEh0KGEGe8CkvSlqEwfTnCKwA2F4KeHbzF8GHEARoH7ld6uFeNt1JnvZWW-rYLbUv7GL-sNWyrUeMD-YgIMpbmjH_X9gB06YI31e8fVphal_4CRzApWuH_S_Z2iEo1rKpESBvtXWNxf2VTYt/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 >
Mau Lanjut...
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 >
Mau Lanjut...
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 >
Mau Lanjut...
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.
Mau Lanjut...
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.
Mau Lanjut...
Tips Mengedit HTML Blogspot
Jika kita mengotak-atik atau mengedit HTML blog kadang2 akan mengalami kesulitan, apalagi bagi yang masih agak pemula. Entah itu gak bisa nemu kode yang mau diedit lah, gak bisa disimpan karena error lah, Ada pesen error yang gak jelas lah, dan lah-lah yang lain, ya to…??? Nha trik dan tips kali ini akan mencoba gimana cara untuk mengatasi atau setidaknya mengurangi masalah “lah-lah” yang kadang2 atau sering terjadi tersebut.
Berikut ini beberapa tips untuk edit HTML bogger:
Berikut ini beberapa tips untuk edit HTML bogger:
1. Backup Template
Membackup template ini penting karena jika terjadi hal-hal yang tidak dinginkan, misalnya blog jadi rusak maka kita bisa membuatnya seperti sediakala (sebelum rusak) jika kita sebelumnya sudah membackup template. Cara membackup template ini mudah. Cukup klik pada link “Download Full Template” lalu simpan file template di komputer kita. Kalo terjadi kesalahan yang tidak bisa kita atasi, kita tinggal upload aja file template tersebut.
2. Memberi Tanda Centang pada Kotak “Expand Widget Template”
Ini yang kadang2 dilupakan para “editor”. Kalau kotak “Expand Widget Templates” tidak dicentang maka kode2 yang dicari kemungkinan tidak ditemukan. Tapi kadang2 hal ini tidak perlu dilakukan tergantung dari petunjuk tutorialnya. Makanya perhatikan baik2 tutorialnya kalo mau Edit HTML blog.
3. Tips Mempermudah Pencarian
Untuk mempermudah pencarian kode yaitu dengan meng-copy dulu kode yang mau dicari kemudian tekan “Ctrl+f” lalu masukkan kode yang dicopy tadi kedalam kotak yg muncul. Kalo misalkan kode yang dicari tidak muncul maka cobalah mencari sebagian dari kode tersebut. Misal mau mencari kode
4. Tips Menghadapi Error Yang Muncul
Jika saat menyimpan hasil editan kemudian muncul pesan error, misal seperti ini:
we were unable to save your template. Please correct the error below, and submit your template again. Your template could not be parsed as it is not well-formed. Please make sure…
Maka hal yang harus kita lakukan adalah berusaha memahami pesan error tersebut. Kemudian kita cek kembali tutorial yang kita baca apakah langkah-langkah yang sudah kita lakukan benar-benar sesuai dengan tutorialnya. kalau tidak yakin maka kita bisa mengulangi lagi tutorialnya dari awal dengan mengklik tombol “Clear Edit” terlebih dahulu.
Mau Lanjut...
Berikut ini beberapa tips untuk edit HTML bogger:
Berikut ini beberapa tips untuk edit HTML bogger:
1. Backup Template
Membackup template ini penting karena jika terjadi hal-hal yang tidak dinginkan, misalnya blog jadi rusak maka kita bisa membuatnya seperti sediakala (sebelum rusak) jika kita sebelumnya sudah membackup template. Cara membackup template ini mudah. Cukup klik pada link “Download Full Template” lalu simpan file template di komputer kita. Kalo terjadi kesalahan yang tidak bisa kita atasi, kita tinggal upload aja file template tersebut.
2. Memberi Tanda Centang pada Kotak “Expand Widget Template”
Ini yang kadang2 dilupakan para “editor”. Kalau kotak “Expand Widget Templates” tidak dicentang maka kode2 yang dicari kemungkinan tidak ditemukan. Tapi kadang2 hal ini tidak perlu dilakukan tergantung dari petunjuk tutorialnya. Makanya perhatikan baik2 tutorialnya kalo mau Edit HTML blog.
3. Tips Mempermudah Pencarian
Untuk mempermudah pencarian kode yaitu dengan meng-copy dulu kode yang mau dicari kemudian tekan “Ctrl+f” lalu masukkan kode yang dicopy tadi kedalam kotak yg muncul. Kalo misalkan kode yang dicari tidak muncul maka cobalah mencari sebagian dari kode tersebut. Misal mau mencari kode
4. Tips Menghadapi Error Yang Muncul
Jika saat menyimpan hasil editan kemudian muncul pesan error, misal seperti ini:
we were unable to save your template. Please correct the error below, and submit your template again. Your template could not be parsed as it is not well-formed. Please make sure…
Maka hal yang harus kita lakukan adalah berusaha memahami pesan error tersebut. Kemudian kita cek kembali tutorial yang kita baca apakah langkah-langkah yang sudah kita lakukan benar-benar sesuai dengan tutorialnya. kalau tidak yakin maka kita bisa mengulangi lagi tutorialnya dari awal dengan mengklik tombol “Clear Edit” terlebih dahulu.
Mau Lanjut...
Saturday, August 29, 2009
Cara Membuat Kotak Ngoceh (Shout Box)
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.....
Mau Lanjut...
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.....
Mau Lanjut...
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.
Mau Lanjut...
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.
Mau Lanjut...
Subscribe to:
Posts (Atom)
