Trik Memproteksi Blog dari Penjiplakan
Mungkin bagi sebagian para pemilik blog sering kali jengkel jika melihat artikel-artikel yang dibuatnya dengan memeras otak (emangnya cucian) tiba-tiba sudah ada di tempat blog milik orang lain, apalagi kalo disitu tidak disebutkan sumber asli dari artikel tersebut, pasti orang tersebut akan bilang "ANJRIT" :@ dan sumpah serapah yang lain (apa aja ya kata sumpah serapah?, aku taunya cuma itu doang, aku kan selalu ngomong yg baik2 jadi nggak tahu kata-kata kotor :D hooooeeeekkkkk..). Tapi mungkin bagi sebagian orang lagi sih nggak mempermasalahkannya, entah artikelnya diambil kek, di copy kek, di cekek kek "No Problem". Nha, kamu termasuk golongan yang mana nih? yang Protectif atau yang Cuekif (bahasa mana tuh "Cuekif"). Kalo kamu termasuk yang yang Protectif alias golongan orang yang artikelnya nggak mau dicuri orang, sini ikut saya , tak tunjukin jalan menuju sorga, eeh, maksudnya cara melakukannya.
Udah berdebar-debar ya?, nggak sabar nunggu ya? ya udah deh ini dia Tips dan Trik untuk memproteksi artikel dari pencurian...
pertama-tama kita panjatkan puja dan puji sukur kita kepada Tuhan YME. Walah malah pidato. Langsung aja deh
Pertama-tama kita panjatkan, walah kok itu lagi sih :@
Pertama-tama kita analisa dulu, biasanya kalo mau nyuri artikel kan ada beberapa cara nih, mulai dari menyeleksi tulisan yang mau dicuri kemudian di copy-paste. Atau melihat "Source Code"nya dengan meng-klik kanan dan lain-lain. Ada beberapa cara untuk mengatasi masalah tersebut, mulai dari cara yang mudah sampai cara yang sulit. Nha untuk Tips dan Trik kali ini kita akan mencoba menggunakan cara yang mudah saja, tapi ingat, cara ini hanya efektif untuk menghadapi maling kelas teri, jadi nggak akan mempan menghadapi para penjahat kelas kakap yang sudah banyak makan asam garam dunia internet (emangnya enak makan asam ama garam?). Tapi lumayan kan untuk berjaga jaga dari maling-maling kelas teri. Nha berikut adalah triknya...
copy script dibawah ini kedalam body kamu (lho? kok kedalam body sih?), maksudnya kedalam tag <body .....
begini deatil caranya:
pertama login dulu ke blogger, terus pilih Layout --> Edit HTML
cari kode ini <body> letaknya kira-kira di tengah bagian kiri, dan biasanya setelah kode </head> . perlu diperhatikan bahwa di dalam kode html terdapat banyak tulisan "body", jangan salah memilih body :D .
kalo sudah ketemu letakkkan script ini didalamnya
onmousedown="return false" oncontextmenu="return false" onselectstart="return false"
contohnya kayak gini nih
<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false" >
Nha, script diatas untuk memproteksi agar text yang ada tidak bisa di seleksi untuk dicopy, dan juga tidak bisa di klik kanan.
trus bagaimana kalo kalo pencurinya lihat source code kita lewat menu-menu yang ada di web browser? misalnya yang pake Mozilla dengan cara Klik View -->> Page Source atau dengan menekan Ctrl+u. Nha untuk menakali masalah ini kita kita pakai cara licik aja, yaitu dengan menurunkan script html kebawah, caranya gimana tuh?
gini, taruh kursor/pointer ke atas tag <head> (letaknya dibagian atas), trus tekan enter sampai kira-kira 70 kali. Nha kalo pencurinya melihat source code kita, dia hanya akan melihat kode kepala dari html kita, sedangkan isi dari blog kita kan udah turun ke bawah, tul ga? :D
tapi ingat sekali lagi, ini hanya untuk pencuri kelas teri, walaupun diproteksi secanggih apapun, pasti tetap aja ada orang yang akan bisa membongkarnya, tapi kan setidaknya kita berjaga-jaga, ya tho?
Monggo di jajal..
Perhatian : Kalo pake trik proteksi ini, maka untuk form-form isian seperti search engine, kotak komentar haloscan, shoutbox ogix. tidak bisa diisi. Jadi kalo memang tidak benar-benar diperlukan, jangan menggunakan trik ini. he..he.. :D
Udah berdebar-debar ya?, nggak sabar nunggu ya? ya udah deh ini dia Tips dan Trik untuk memproteksi artikel dari pencurian...
pertama-tama kita panjatkan puja dan puji sukur kita kepada Tuhan YME. Walah malah pidato. Langsung aja deh
Pertama-tama kita panjatkan, walah kok itu lagi sih :@
Pertama-tama kita analisa dulu, biasanya kalo mau nyuri artikel kan ada beberapa cara nih, mulai dari menyeleksi tulisan yang mau dicuri kemudian di copy-paste. Atau melihat "Source Code"nya dengan meng-klik kanan dan lain-lain. Ada beberapa cara untuk mengatasi masalah tersebut, mulai dari cara yang mudah sampai cara yang sulit. Nha untuk Tips dan Trik kali ini kita akan mencoba menggunakan cara yang mudah saja, tapi ingat, cara ini hanya efektif untuk menghadapi maling kelas teri, jadi nggak akan mempan menghadapi para penjahat kelas kakap yang sudah banyak makan asam garam dunia internet (emangnya enak makan asam ama garam?). Tapi lumayan kan untuk berjaga jaga dari maling-maling kelas teri. Nha berikut adalah triknya...
copy script dibawah ini kedalam body kamu (lho? kok kedalam body sih?), maksudnya kedalam tag <body .....
begini deatil caranya:
pertama login dulu ke blogger, terus pilih Layout --> Edit HTML
cari kode ini <body> letaknya kira-kira di tengah bagian kiri, dan biasanya setelah kode </head> . perlu diperhatikan bahwa di dalam kode html terdapat banyak tulisan "body", jangan salah memilih body :D .
kalo sudah ketemu letakkkan script ini didalamnya
onmousedown="return false" oncontextmenu="return false" onselectstart="return false"
contohnya kayak gini nih
<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false" >
Nha, script diatas untuk memproteksi agar text yang ada tidak bisa di seleksi untuk dicopy, dan juga tidak bisa di klik kanan.
trus bagaimana kalo kalo pencurinya lihat source code kita lewat menu-menu yang ada di web browser? misalnya yang pake Mozilla dengan cara Klik View -->> Page Source atau dengan menekan Ctrl+u. Nha untuk menakali masalah ini kita kita pakai cara licik aja, yaitu dengan menurunkan script html kebawah, caranya gimana tuh?
gini, taruh kursor/pointer ke atas tag <head> (letaknya dibagian atas), trus tekan enter sampai kira-kira 70 kali. Nha kalo pencurinya melihat source code kita, dia hanya akan melihat kode kepala dari html kita, sedangkan isi dari blog kita kan udah turun ke bawah, tul ga? :D
tapi ingat sekali lagi, ini hanya untuk pencuri kelas teri, walaupun diproteksi secanggih apapun, pasti tetap aja ada orang yang akan bisa membongkarnya, tapi kan setidaknya kita berjaga-jaga, ya tho?
Monggo di jajal..
Perhatian : Kalo pake trik proteksi ini, maka untuk form-form isian seperti search engine, kotak komentar haloscan, shoutbox ogix. tidak bisa diisi. Jadi kalo memang tidak benar-benar diperlukan, jangan menggunakan trik ini. he..he.. :D
Cara Membuat Template di Blogger
Yak akhirnya jadi juga, seperti yang aku janjikan kemarin yaitu "Cara Membuat Template Blogger". Mulai dari mana ya? nnnngg.. :t ohya, tak jelasin dulu deh tentang artikel ini. Gini, dalam trik berikut, kita akan mencoba membuat template yang paling sederhana dan paling mudah. Sebenarnya dalam mebuat template di blogger harus mengerti tentang CSS dan HTML, tapi untuk kali ini kita hanya memerlukan sedikit kemampuan tersebut karena kita akan membuat template yang paling sederhana, tapi jangan salah walaupun caranya sederhana tapi hasilnya bisa sangat luar biasa, tergantung dari desainernya. Ok deh mulai aja deh ya, kayaknya udah pada nggak sabar nih.
Gini, cara termudah dalam membuat template blogger yaitu dengan mendownload sebuah template kemudian kita otak-atik sendiri, jadi kita tidak perlu membuat dari awal. Untuk bahan praktek kali ini kita coba memakai template yang aku dah pernah aku buat, downlad disini bahannya. Sebelum kita mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu.
Tahap Desain
Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer. seperti yang ada dalam gambar berikut:
Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :
background
header
main
footer
8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.
Nha modeng po ra?
Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit HTML".
2. Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:
body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }
4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :
#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}
6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }
8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }
10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:
#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }
kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.
#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }
kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.
#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }
kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }
kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }
kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.
12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.
:f akhirnya selesai juga aku buat artikel tentang pembuatan template, capek ya? tapi ingat sekali lagi ini adalah metode membuat template yang mudah dan sederhana, jadi sebenrnya isi dari template lebih rumit lagi, munkin kapan-kapan akan kita bahas detail dari bagian-bagina template tersebut.
OK SELAMAT BERJUANG......
Gini, cara termudah dalam membuat template blogger yaitu dengan mendownload sebuah template kemudian kita otak-atik sendiri, jadi kita tidak perlu membuat dari awal. Untuk bahan praktek kali ini kita coba memakai template yang aku dah pernah aku buat, downlad disini bahannya. Sebelum kita mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu.
Tahap Desain
Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer. seperti yang ada dalam gambar berikut:
Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :
background header main 
footer 8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.
Nha modeng po ra?
Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit HTML".
2. Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:
body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }
4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :
#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}
6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }
8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }
10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:
#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }
kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.
#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }
kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.
#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }
kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }
kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }
kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.
12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.
:f akhirnya selesai juga aku buat artikel tentang pembuatan template, capek ya? tapi ingat sekali lagi ini adalah metode membuat template yang mudah dan sederhana, jadi sebenrnya isi dari template lebih rumit lagi, munkin kapan-kapan akan kita bahas detail dari bagian-bagina template tersebut.
OK SELAMAT BERJUANG......
Cara Membuat Dropdown Menu
Dengan dropdown menu kita bisa mnghemat space/ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak. Itu bisa diisi dengan arsip, blogroll dll.
Gimana? Mau mencobanya?
Gini nih caranya :
Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>
Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.
Contohnya seperti ini :
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://trik-tips.blogspot.com/2008/01/membuat-menu-horizontal.html"> Cara Membuat Menu Horizontal </option>
<option value="http://trik-tips.blogspot.com/2007/12/cara-membuat-search-engine.html"> Cara Membuat Search Engine </option>
</select>
maka hasilnya akan seperti ini :
untuk menambahkan menu lagi, tambahkan kode seperti ini :
<option value="Links 2">Text 2</option>
sebelum kode </select>
Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb.
Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
ganti dengan kode ini :
<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
Gimana? Mau mencobanya?
Gini nih caranya :
Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>
Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.
Contohnya seperti ini :
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://trik-tips.blogspot.com/2008/01/membuat-menu-horizontal.html"> Cara Membuat Menu Horizontal </option>
<option value="http://trik-tips.blogspot.com/2007/12/cara-membuat-search-engine.html"> Cara Membuat Search Engine </option>
</select>
maka hasilnya akan seperti ini :
untuk menambahkan menu lagi, tambahkan kode seperti ini :
<option value="Links 2">Text 2</option>
sebelum kode </select>
Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb.
Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
ganti dengan kode ini :
<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
file asli ada di sini
Cara Membuat Search Engine
Tentu kita semua sudah tahu apa itu Search Engine (hari gini gak tahu apa itu search engine? cape' deeh...). Search Engine adalah ... bla.. bla..bla.. dst.
Saat ini Search Engine tidak bisa dipisahkan dalam dunia internet. Dengan Search Engine kita bisa mencari tahu tentang suatu hal yang kita inginkan sesuai dengan keyword yang kita ketikkan dan juga bla.bla..bla..... udah ah penjelasannya, yang mau dibahas disini adalah bagaimana caranya membuat search engine di blogger . Caranya sangat mudah, yaitu:
1. Login ke blogger terus klik Layout terus pilih page elements nha disitu kan banyak tulisan Add a page elements klik link tersebut dan sesuaikan dimana tempatnya menaruh search engine
2. kemudian pada layar baru yang muncul pilih HTML/Javascript kemudian copy/paste script/kode berikut ini di dalam kolom content.
<form action="http://nama-blogmu.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
Ganti nama-blogmu dengan nama blog kamu. Aangka 30 menunjukkan panjang kotak (text box) semakin banyak angkanya maka semakin panjang textbox-nya
Saat ini Search Engine tidak bisa dipisahkan dalam dunia internet. Dengan Search Engine kita bisa mencari tahu tentang suatu hal yang kita inginkan sesuai dengan keyword yang kita ketikkan dan juga bla.bla..bla..... udah ah penjelasannya, yang mau dibahas disini adalah bagaimana caranya membuat search engine di blogger . Caranya sangat mudah, yaitu:
1. Login ke blogger terus klik Layout terus pilih page elements nha disitu kan banyak tulisan Add a page elements klik link tersebut dan sesuaikan dimana tempatnya menaruh search engine
2. kemudian pada layar baru yang muncul pilih HTML/Javascript kemudian copy/paste script/kode berikut ini di dalam kolom content.
<form action="http://nama-blogmu.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
Ganti nama-blogmu dengan nama blog kamu. Aangka 30 menunjukkan panjang kotak (text box) semakin banyak angkanya maka semakin panjang textbox-nya
Cara Menuliskan Script/Kode Dalam Artikel Blog
Untuk menuliskan script/kode kedalam artikel blog memang ada tekniknya sendiri, karena jika kita menuliskannya dengan cara yang biasa maka yang akan muncul kemudian di blog tidaklah seperti dengan apa yang kita tuliskan. Misalnya gini, jika kita menuliskan kode <head> dengan cara yang biasa maka hasilnya tidak akan muncul dalam postingan karena kode tersebut langsung diterjemahkan kedalam bahasa HTML. Jadi untuk menuliskan kode <head>, maka yang seharusnya dituliskan supaya bisa muncul kode tersebut adalah ini <head>. Nah terus bagaimana kalau ada banyak kode yang harus kita posting?
Mau tahu bagaimana caranya menuliskan kode2/script2 tersebut ke dalam blog?
Ada beberapa cara untuk menuliskan kode-kode tersebut kedalam blog, diantaranya yaitu:
Cara Pertama :
- Gunakan software-software web design, misalnya Macromedia Dreamwaver, Microsoft Frontpage, Namao Web Editor. Atau bisa juga dengan software-software blogtools seperti post2blog dll.
- Trus tuliskan semua kode pada area design, kemudian copy kode-kode tersebut dari area HTML Code. Nha kode-kode dalam area HTML Code tersebut lah yang harus diposting.
Cara Kedua :
- Tuliskan semua kode/script ke dalam notepad
- Kemudian ganti/replace kode-kode berikut
- Udah tahu kan caranya mereplace di notepad? itu lho dengan memilih menu edit --> replace kemudian pada kotak yang muncul masukkan kode yg akan direplace pada kolom "Find what" trus masukkan kode pengantinya pada kolom "Replace with"trus tekan tombol Replace All.
- Nha kalo udah semua baru kamu copy semua kode yang udah direplace all tadi, trus kamu masukkan kedalam postingan kamu.
Cara Ketiga :
- Buka situs ini http://centricle.com/tools/html-entities, trus isikan kode-kode kamu kedalam kotak yang disediakan, nha kalo sudah tekan tombol "Encode", nha maka kamu akan mendapatkan script baru untuk diposting di blog kamu.
Piye? Gampang to? gitu aja kok repot.....
Mau tahu bagaimana caranya menuliskan kode2/script2 tersebut ke dalam blog?
Ada beberapa cara untuk menuliskan kode-kode tersebut kedalam blog, diantaranya yaitu:
Cara Pertama :
- Gunakan software-software web design, misalnya Macromedia Dreamwaver, Microsoft Frontpage, Namao Web Editor. Atau bisa juga dengan software-software blogtools seperti post2blog dll.
- Trus tuliskan semua kode pada area design, kemudian copy kode-kode tersebut dari area HTML Code. Nha kode-kode dalam area HTML Code tersebut lah yang harus diposting.
Cara Kedua :
- Tuliskan semua kode/script ke dalam notepad
- Kemudian ganti/replace kode-kode berikut
Kode | Kode Pengganti |
< | < |
> | > |
" | " |
- Nha kalo udah semua baru kamu copy semua kode yang udah direplace all tadi, trus kamu masukkan kedalam postingan kamu.
Cara Ketiga :
- Buka situs ini http://centricle.com/tools/html-entities, trus isikan kode-kode kamu kedalam kotak yang disediakan, nha kalo sudah tekan tombol "Encode", nha maka kamu akan mendapatkan script baru untuk diposting di blog kamu.
Piye? Gampang to? gitu aja kok repot.....
Hal-hal Yang Harus Diperhatikan Dalam Mengganti Template Blogger
Blog adalah ibarat rumah kita, dan tentunya kita ingin blog tersebut tampil menjadil lebih cantik dan indah. Banyak cara yang dilakukan untuk membuat blog menjadi lebih cantik, diantaranya dengan menambah pernak pernik dan juga dengan mengganti tampilan/template blog. Jika kita mengganti template dengan template yang sudah disediakan blogger maka itu adalah cara yang paling mudah, tinggal pilih simpan langsung jadi. Namun template yang disediakan sangat sedikit dan tampilannya juga standar, sehingga kita seringkali mencari template lain yang lebih cantik, karena sekarang banyak sekali situs-situs yang menyediakannya dengan gratis. Namun jika kita menganti template dengan template lain yang disediakan oleh selain blogger, maka itu tidaklah semudah sebagaimana dengan menggunakan template yg disediakan blogger, karena ada beberapa efek sampingnya, diantaranya yaitu kamu akan kehilangan element2 kamu ato malah blog kamu jadi rusak. Nha berikut ini akan aku jelaskan hal-hal apa aja yang harus diperhatikan jika kamu pingin ganti template dengan jasa lain.
Pertama kamu harus membackup dulu tempalte kamu jika template baru kamu tidak berhasil diinstall, caranya masuk ke menu "Layout --> Edit HTML", trus klik link bertuliskan "Download Full Template" terus simpan file yang diberikan.
Kedua yaitu membackup elemen-elemen atau widget-widget yang sudah pernah kamu pasang, caranya gini, Masuk ke menu "Page Element", nha disitu kan banyak tuh element-element yang udah kamu pasang trus dibawahnya kan ada link bertiliskan "edit" klik link-link tersebut satu persatu, copy isi dari elemen itu dan taruh dalam notepad. Kalo kamu nanti dah ganti template dan mau memasang elemen-elemen tersebut tinggal copy dari notepad terus pasang di "add page elements".
Ketiga, jika template dan elemen-elemen sudah kamu backup langkah selanjutnya yaitu mengupload template yang sudah kamu download. Biasanya file template yang di download berextenxi "xml" tapi kadang-kadang ada juga yang berekstensi "zip atau rar", kalo begitu kamu harus mengekstraknya dulu sehingga kamu akan mendapat file berekstensi "xml". Trus gini cara ngaploadnya, Kembali ke menu "Edit HTML", trus disitu kan ada tombol "brows" klik tombol tersebut terus cari file template yg pingin kamu pakai sudah kamu download, trus klik tombol :upload".
Keempat, biasanya kamu akan mendapat konfirmasi seperti gambar dibawah ini, itu artinya elemen-elemen kamu akan dihapus. Klik tombol "Confirm & Save"
Kelima, jika ternyata yang muncul adalah seperti gambar dibawah ini maka itu artinya ada yang tidak beres dengan template kamu dan kamu tidak bisa memakai template tersebut di blog kamu, jadi kamu ganti aja dengan template yang lain.
Keenam, coba preview blog baru kamu, merasa sudah cocok ikuti langkah ketuju. Jika kamu mendapati ada gambar header yang sebelumnya kamu pake buat header masih muncul di template baru kamu dan posisinya sepertinya tidak cocok, maka kamu harus menghilangkannya dulu gambar header tersebut, caranya masuk kembali ke menu "Page Element", dibagian header coba kemu edit dan hapus gambar kamu. Jika di bagian header tidak ada link "edit" coba kamu ganti dulu templatenya dengan template yang disediakan oleh blogger dan kembali ke "Page Element" trus "edit dibagian header dan hapus gambar header kamu kemudian ikuti lagi langkah-langkah ketiga
Ketuju, Kembalikan elemen-elemen yang sudah kamu backup tadi sehingga kini kamu memiliki template baru dan elemen-elemen yang dulu tidak ilang.
Kedelapan, Selamat bermumet-mumet :z
Pertama kamu harus membackup dulu tempalte kamu jika template baru kamu tidak berhasil diinstall, caranya masuk ke menu "Layout --> Edit HTML", trus klik link bertuliskan "Download Full Template" terus simpan file yang diberikan.
Kedua yaitu membackup elemen-elemen atau widget-widget yang sudah pernah kamu pasang, caranya gini, Masuk ke menu "Page Element", nha disitu kan banyak tuh element-element yang udah kamu pasang trus dibawahnya kan ada link bertiliskan "edit" klik link-link tersebut satu persatu, copy isi dari elemen itu dan taruh dalam notepad. Kalo kamu nanti dah ganti template dan mau memasang elemen-elemen tersebut tinggal copy dari notepad terus pasang di "add page elements".
Ketiga, jika template dan elemen-elemen sudah kamu backup langkah selanjutnya yaitu mengupload template yang sudah kamu download. Biasanya file template yang di download berextenxi "xml" tapi kadang-kadang ada juga yang berekstensi "zip atau rar", kalo begitu kamu harus mengekstraknya dulu sehingga kamu akan mendapat file berekstensi "xml". Trus gini cara ngaploadnya, Kembali ke menu "Edit HTML", trus disitu kan ada tombol "brows" klik tombol tersebut terus cari file template yg pingin kamu pakai sudah kamu download, trus klik tombol :upload".
Keempat, biasanya kamu akan mendapat konfirmasi seperti gambar dibawah ini, itu artinya elemen-elemen kamu akan dihapus. Klik tombol "Confirm & Save"
Kelima, jika ternyata yang muncul adalah seperti gambar dibawah ini maka itu artinya ada yang tidak beres dengan template kamu dan kamu tidak bisa memakai template tersebut di blog kamu, jadi kamu ganti aja dengan template yang lain.
Keenam, coba preview blog baru kamu, merasa sudah cocok ikuti langkah ketuju. Jika kamu mendapati ada gambar header yang sebelumnya kamu pake buat header masih muncul di template baru kamu dan posisinya sepertinya tidak cocok, maka kamu harus menghilangkannya dulu gambar header tersebut, caranya masuk kembali ke menu "Page Element", dibagian header coba kemu edit dan hapus gambar kamu. Jika di bagian header tidak ada link "edit" coba kamu ganti dulu templatenya dengan template yang disediakan oleh blogger dan kembali ke "Page Element" trus "edit dibagian header dan hapus gambar header kamu kemudian ikuti lagi langkah-langkah ketiga
Ketuju, Kembalikan elemen-elemen yang sudah kamu backup tadi sehingga kini kamu memiliki template baru dan elemen-elemen yang dulu tidak ilang.
Kedelapan, Selamat bermumet-mumet :z
Cara Membuat Blog Lebih Expressive
Hallo sobat tua dan muda dimanapun anda berada, kita jumpa lagi dalam acara Trik dan Tips :D . Dalam episode kali ini kita akan mencoba membahas tentang "Bagaimana Cara Membuat Postingan/Content Blog Agar Lebih Expressive. Maksudnya apaan tuh?
Gini lho, kalo di layanan Blog lain semisal Wordpress, setiap kita mengetikkan tanda ini :) maka yang muncul adalah gambar ini :) , kalo tanda ini :p maka yang muncul gambar ini :p dan lain-lain . Nha kalo gitu kan akan membuat blog kita menjadi lebih expressive tuh. Sayangnya bagi kita yang memakai layanan di Blogger tidak mendapat fasilitas tersebut. Tapi tenang aja bung, dalam Trik dan Tips kali ini kita akan mencoba membahas bagaimana supaya bagi kita yang memakai layanan Blogger bisa seperti yang ada di Wordpress. Langkahnya cukup mudah, gini lho.....
1. Login ke blogger trus pilih Layout -->> Edit HTML
2. Beri tanda centang pada jawaban yang benar, eh, maksudnya pada Expand Widget Templates
3. Cari kode ini ]]></b:skin> (letaknya kira2 di bagian tengah posisi kiri)
4. Masukkan script di bawah ini persis dibawah kode ]]></b:skin>
<script src='http://kendhin.890m.com/smile/smile.js' type='text/javascript'/>
Jangan lupa disimpan, trus coba deh kamu posting dengan memakai kode-kode tersebut, Insya4JJI berhasil. kalo gagal coba lagi, kalo masih gagal ya coba sekali lagi, kalo masih gagal lagi ya mengkin servernya lagi down atau itu emang karena kamu kurang beruntung. :D
Berikut ini adalah beberapa standar kode smile yang bisa digunakan :
:) --> :)
:D --> :D
:$ --> :$
:( --> :(
:p --> :p
;) --> ;)
:k --> :k
:@ --> :@
:# --> :#
:x --> :x
:o --> :o
:L --> :L
:O --> :O
:r --> :r
:y --> :y
:t --> :t
:s --> :s
:~ --> :~
:v --> :v
:f --> :f
:d --> :d
:c --> :c
:z --> :z
Sebelum mengetikkan kodenya, harus di spasi dulu.
untuk sementera itu dulu, icon-smile selanjutnya masih dalam penelitian di laboratorium :D
Gini lho, kalo di layanan Blog lain semisal Wordpress, setiap kita mengetikkan tanda ini :) maka yang muncul adalah gambar ini :) , kalo tanda ini :p maka yang muncul gambar ini :p dan lain-lain . Nha kalo gitu kan akan membuat blog kita menjadi lebih expressive tuh. Sayangnya bagi kita yang memakai layanan di Blogger tidak mendapat fasilitas tersebut. Tapi tenang aja bung, dalam Trik dan Tips kali ini kita akan mencoba membahas bagaimana supaya bagi kita yang memakai layanan Blogger bisa seperti yang ada di Wordpress. Langkahnya cukup mudah, gini lho.....
1. Login ke blogger trus pilih Layout -->> Edit HTML
2. Beri tanda centang pada jawaban yang benar, eh, maksudnya pada Expand Widget Templates
3. Cari kode ini ]]></b:skin> (letaknya kira2 di bagian tengah posisi kiri)
4. Masukkan script di bawah ini persis dibawah kode ]]></b:skin>
<script src='http://kendhin.890m.com/smile/smile.js' type='text/javascript'/>
Jangan lupa disimpan, trus coba deh kamu posting dengan memakai kode-kode tersebut, Insya4JJI berhasil. kalo gagal coba lagi, kalo masih gagal ya coba sekali lagi, kalo masih gagal lagi ya mengkin servernya lagi down atau itu emang karena kamu kurang beruntung. :D
Berikut ini adalah beberapa standar kode smile yang bisa digunakan :
:) --> :)
:D --> :D
:$ --> :$
:( --> :(
:p --> :p
;) --> ;)
:k --> :k
:@ --> :@
:# --> :#
:x --> :x
:o --> :o
:L --> :L
:O --> :O
:r --> :r
:y --> :y
:t --> :t
:s --> :s
:~ --> :~
:v --> :v
:f --> :f
:d --> :d
:c --> :c
:z --> :z
Sebelum mengetikkan kodenya, harus di spasi dulu.
untuk sementera itu dulu, icon-smile selanjutnya masih dalam penelitian di laboratorium :D
Membuat Menu Vertikal (Vertical)
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');
Pilihan Warna menu vertikal :
 | blue1.gif blue2.gif |
 | green1.gif green2.gif |
 | red1.gif red2.gif |
 | pink1.gif pink2.gif |
 | black1.gif black2.gif |
3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
</li>
</ul>
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
</li>
</ul>
Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.
Dah gitu aja. Gampang kan???? :D
Cara Membuat Read More / Baca Selengkapnya di Blogger
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) :
4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:
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:
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 :
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...
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>
<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>
</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>
</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...
Menambahkan Widget SMS Gratis! pada blog anda.
Waduh....... gak bisa d bayangin kalo pcar kita sms trus kita ga punya pulsa !!! ahh, dunia kerasa ancur bgt(lebay model on.. hhe)..... Tapi tenang ajja buat kalian yang ingin tetep sms-an sma pacar ato ke yang laen bisa coba widget ini..
Langsung aja yha.. widget SMS Gratis! ini di sponsori oleh sms-online.web.id, mereka ngasih sms gratis ke kita sepuasnya, jdi g pke pulsa dong.(ya iyalah namanya juga SMS Gratis!,, hhe)
Cara smsnya pun mudah tinggal kalian klik BUKA SMS trus tulis sms yang kalian inginkan trus masukin nmernya tinggal klik KIRIM.... eitsss tunggu dulu kalian bakal dikasih perntanyaan,, tenanng ajja gmpang kok...
Nihh kodenya :
<span style="color: rgb(114, 45, 50);"><span class="Apple-style-span" style="font-family: Verdana,sans-serif;"><i> </i></span></span><span style="color: rgb(255, 0, 0);" class="apple-style-span"><b><i><span style="font-size: 10pt; line-height: 115%;"><div style="margin: 5px 20px 20px;"><input value="BUKA SMS" style="margin: 0px; padding: 0px; width: 90px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP SMS'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA SMS'; }" type="button" /> </div><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;"><div style="display:none;"><iframe name="I2" src=http://sms-online.web.id/widget width="270" height="350"> not support </iframe> <a href="http://bangunharyadi.blogspot.com/2011/03/menambahkan-widget-sms-gratis-pada-blog.html" target="_blank">Pasang SMS Garatis! Di Blog Kamu Klik Disini</a></div></div></span></i></b></span><span class="fullpost"><code><span class="Apple-style-span" style="font-family: Verdana,sans-serif;"><i></i></span></code></span>
Langsung aja yha.. widget SMS Gratis! ini di sponsori oleh sms-online.web.id, mereka ngasih sms gratis ke kita sepuasnya, jdi g pke pulsa dong.(ya iyalah namanya juga SMS Gratis!,, hhe)
Cara smsnya pun mudah tinggal kalian klik BUKA SMS trus tulis sms yang kalian inginkan trus masukin nmernya tinggal klik KIRIM.... eitsss tunggu dulu kalian bakal dikasih perntanyaan,, tenanng ajja gmpang kok...
Tampilan widgetnya kayak gnie nieh...
sederhana yah,,,, gpp lah yg penting bsa buat smsan hhe
CARA MEMASANG WIDGET :
- Silakan login ke blogger
- Pilih tata letak
- Tambah widget baru
- Setelah itu pilih
- Edit HTML/Javascript
- Copy dan paste-kan kode dibawahini script code nya
Nihh kodenya :
<span style="color: rgb(114, 45, 50);"><span class="Apple-style-span" style="font-family: Verdana,sans-serif;"><i> </i></span></span><span style="color: rgb(255, 0, 0);" class="apple-style-span"><b><i><span style="font-size: 10pt; line-height: 115%;"><div style="margin: 5px 20px 20px;"><input value="BUKA SMS" style="margin: 0px; padding: 0px; width: 90px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP SMS'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA SMS'; }" type="button" /> </div><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;"><div style="display:none;"><iframe name="I2" src=http://sms-online.web.id/widget width="270" height="350"> not support </iframe> <a href="http://bangunharyadi.blogspot.com/2011/03/menambahkan-widget-sms-gratis-pada-blog.html" target="_blank">Pasang SMS Garatis! Di Blog Kamu Klik Disini</a></div></div></span></i></b></span><span class="fullpost"><code><span class="Apple-style-span" style="font-family: Verdana,sans-serif;"><i></i></span></code></span>
Membuat login dengan Php dan Mysql
Cara Membuat login dengan Php dan Mysql, bagaimana cara membuat halaman login menggunakan pemrogaman Php yg di hubungkan menggunakan database mysql.
Syarat-syarat sebelum membuat login dengan php dan mysql adalah
1. Mempersiapkan webserver ( bisa menggunakan lokal atau online) baca: Cara Menginstall Appserv di Komputer Lokal
2. Program editor ( notepad ++ atau gedit untuk linux
3. kalau sudah siapkan database terlebih dahulu
4. kita asumsikan teman-teman sudah membuat file koneksi.php
simak penjelasan di bawah ini
1 Membuat tabel untuk user_login
tabel yang diperlukan untuk membuat halaman login antara lain.
username type varchar 20
name type varchar 30
pass type varchar 50
maka bisa langsung menggunakan quey dengan copy kode di bawah ini pada kolom query:
kemudian iput username menggunakan manual dengan cara dan pass menggunakan encyp Md5
2. kemudian kita membuat halaman login
Cara Membuat halaman login dengan PHP
copy kode di bawah ini dan simpan dengan nama login.php
Dari program tampilan awal di atas, kita bisa lihat bahwa program menggunakan
form inputan sbb :
- username bertype text
- password bertype password
- tombol login bertype submit
Jika tombol login ditekan maka isi form akan diproses di halaman periksa.php
sesuai dengan action pada tag form
dari beberapa tahap mungkin teman-teman sudah faham tentang bagaimana cara membuat halaman login dengan php dan my sql, bagaimana kalau cara membuat halaman logout, okey.. habis materi ini kita akan bahas materi tersebut.
Syarat-syarat sebelum membuat login dengan php dan mysql adalah
1. Mempersiapkan webserver ( bisa menggunakan lokal atau online) baca: Cara Menginstall Appserv di Komputer Lokal
2. Program editor ( notepad ++ atau gedit untuk linux
3. kalau sudah siapkan database terlebih dahulu
4. kita asumsikan teman-teman sudah membuat file koneksi.php
simak penjelasan di bawah ini
1 Membuat tabel untuk user_login
tabel yang diperlukan untuk membuat halaman login antara lain.
username type varchar 20
name type varchar 30
pass type varchar 50
maka bisa langsung menggunakan quey dengan copy kode di bawah ini pada kolom query:
- CREATE TABLE `user` (`username` VARCHAR (20) NOT NULL, `nama` VARCHAR
- (30) NOT NULL, `password` VARCHAR (50) NOT NULL, PRIMARY
- KEY(`username`), UNIQUE(`username`));
2. kemudian kita membuat halaman login
Cara Membuat halaman login dengan PHP
copy kode di bawah ini dan simpan dengan nama login.php
- <style type="text/css">
- <!--
- table {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 11px;
- }
- input {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 11px;
- height: 20px;
- }
- -->
- </style>
- <div align="center">
- <form action="periksa.php" method="post" name="login">
- Page 3
- <table width="286" border="0" cellpadding="0" cellspacing="0">
- <!--DWLayoutTable-->
- <tbody><tr bgcolor="#ff6633">
- <td colspan="2" valign="middle" align="center" height="19">
- <font color="#ffffff">LOGIN DI SINI</font></td>
- </tr>
- <tr>
- <td width="106" height="27"> </td>
- <td width="180"> </td>
- </tr>
- <tr>
- <td valign="middle" align="right" height="18">Username : </td>
- <td valign="middle">
- <input name="username" id="username" size="20" type="text"></td>
- </tr>
- <tr>
- <td valign="middle" align="right" height="18">Password : </td>
- <td valign="middle">
- <input name="password" id="password" size="20" type="password"></td>
- </tr>
- <tr>
- <td height="19"> </td>
- <td></td>
- </tr>
- <tr>
- <td valign="top" height="18"><!--DWLayoutEmptyCell--> </td>
- <td valign="middle">
- <input name="login" id="login" value=" Login " type="submit"></td>
- </tr>
- <tr>
- <td height="28"> </td>
- <td></td>
- </tr>
- <tr bgcolor="#ff6633">
- <td colspan="2" valign="top" height="18"><!--DWLayoutEmptyCell--> </td>
- </tr>
- </tbody></table>
- </form>
- </div>
form inputan sbb :
- username bertype text
- password bertype password
- tombol login bertype submit
Jika tombol login ditekan maka isi form akan diproses di halaman periksa.php
sesuai dengan action pada tag form
dari beberapa tahap mungkin teman-teman sudah faham tentang bagaimana cara membuat halaman login dengan php dan my sql, bagaimana kalau cara membuat halaman logout, okey.. habis materi ini kita akan bahas materi tersebut.
TUTORIAL MEMBUAT PROGRAM SEDERHANA PHP
Sekarang saat yang ditunggu-tunggu. kita buat website sederhana dengan PHP
Ikuti langkah-langkah berikut..
3.1. Pendahuluan
Buka program notepad atau program Text Editor lainnya. lalu ketik Script dibawah ini.
<html>
<head>
<title>coba-coba</title>
</head>
<body>
<?php
echo "Hai saya dari Script PHP";
?>
</body>
</html>
Simpan di C:\apache\htdocs coba3_1.php
lalu buka pada Web Browser. ketik http://localhost/coba3_1.php
3.2. Non Embedded Script
Adalah pembuatan program dengan PHP, tag HTML yang dihasilkan merupakan bagian dari script PHP
<?php
echo "<html>";
echo "<head>";
echo "<title>"; echo "coba2"; echo "</title>";
echo "</head>";
echo "<body>";
echo " <p> <b>SELAMAT DATANG PROGRAMER MUDA </b> </p>";
echo "</body>";
echo "</html>";
?>
Simpan di C:\apache\htdocs coba3_2.php
lalu buka pada Web Browser. ketik http://localhost/coba3_2.php
3.3. Tag Awal dan Tag Akhir
Dalam Script PHP ada Awal dan ada Akhir. dibawah ini menunjukan 4 cara penggunaan tag PHP didalam dokumen HTML. <html>
<head>
<title>coba3</title>
</head>
<body>
<?echo "Hai saya dari Script PHP dengan cara I"; ?>
<?php echo"Hai saya dari Script PHP dengan cara II"; ?>
<%
echo"Hai saya dari Script PHP dengan cara III";
$str="Hai saya dari Script PHP dengan cara IV"; ?>
<br>
<% =$str; %>
</body>
</html>
Kemudian simpan dengan nama coba3_3.php
3.4. Tag Script
Berikut ini cara penggunaan tag <script> dan </script> <script language="php">
Isi Script disini
</script>
Berikut ini contoh script PHP yang dimasukkan kedalam Tag script.
<html>
<head>
<title>coba4</title>
</head>
<body>
<script language="php">
echo"Penggunaan Script PHP";
echo"Juga bisa digunakan";
</script>
</body>
</html>
Kemudian simpan dengan nama coba3_4.php
3.5. Case Sensitive
Script PHP menerapkan aturan Case Sensitivenya. misalkan perbedaan antara huruf besar dan huruf kecil setiap penulisan didalam Script harus mengikuti penulisannya yang ditentukan. Case Sensitive biasanya dikenakan untuk nama-nama ;variable. <html>
<head>
<title>coba5</title>
</head>
<body>
<?php
$a=10;
print "Isi Variable \$a =$a" ;
print "<br>";
print "Isi Variable \$a =$A" ;
?>
</body>
</html>
Kemudian simpan dengan nama coba3_5.php
Penggunaan JAVASCRIPT
Kelihatannya bakalan sangat sulit nih!. Ah tidak juga karena yang kita bahas kali ini hanya
meliputi pembuatan window pop-up, no right click, tanggal dan script ringan lainnya. Kita tidak
akan membahas penggunaan javascript untuk membuat animasi yang “berat”. Materi yang
harus anda kuasai hanya seputar:
Pengertian Javascript
Aplikasi Javascript
Input Box
Pop Up Window
Dilarang Klik Kanan
Menampilkan Hari dan Tanggal
Pengertian Javascript
Javascript merupakan bahasa pemrograman berbasis web dan berorientasi objek atau sering
juga disebut OOP (Object Oriented Programming). Dimana dianggap sebuah objek memiliki
metode, properti dan event yang berbeda. Contohnya ketika kita mengklik tombol maka akan
muncul sebuah pesan peringatan. Ketika kursor melintasi link muncul pesan. Itulah beberapa
contoh OOP sederhana.
Kode javascript dalam HTML diapit oleh tag:
<script language=”javascript”>
……
</script>
s
eperti halnya CSS kode javascript dapat disimpan pada sebuah file. Untuk mengaksesnya
digunakan perintah
<script language=”javascript” src=”lokasi_file”></script>
Sebenarnya isi dari language tidak hanya javascript tetapi anda juga dapat menggunakan
Vbscript. Yaitu bahasa pemrograman berbasis Visual Basic Script. Kita tidak membahas vbscript
karena tidak kompatible dengan browser selain Internet Explorer. Perlu juga anda ketahui
sedikit pengetahuan tentang javascript akan sangat membantu anda dalam memahami bahasa
pemrograman lainnya seperti PHP karena syntaxnya hampir mirip.
Javascript biasanya gunakan untuk event-event tertentu. Seperti event onload, onkeydown,
onkeyup, onchange, onclick dan sebagainya.
PERSIAPAN
Seperti biasa sebelum memulai praktik kita lakukan beberapa persiapan terlebih dahulu.
Buatlah folder baru di direktori C:\HTML beri nama folder tersebut Bab 7. Kita akan menyimpan
semua file yang kita praktikkan pada bab 7 pada folder ini.
Aplikasi Javascript
Input Box
1. warning.html
OK, saatnya membuat file javascript pertama kita. Untuk yang pertama kita buat yang mudah
dulu agar tidak kaget. Kali ini kita akan membuat sebuah pesan peringatan sederhana dan input
box. Ini hanya untuk memudahkan anda bagaimana memahami kerja javascript
Seperti biasa jalankan program favorit kita yaitu PHP DESIGNER 2006 klik menu File-New-
HTML/XHTML. Ketik kode dibawah ini dengan baik dan benar?!?!
<html>
<head>
<title>Menampilkan pesan Warning</title>
<script>
var pesan = “Dilarang Masuk selain Petugas!”;
function warning()
{
alert(pesan);
}
f
unction password()
{
var passwd = prompt(“Masukkan Password”);
if (passwd != ‘petugas’)
{
alert(‘Gagal’);
}
else
{
alert(‘Sukses’);
}
}
</script>
</head>
<body>
<p><b>TEMPAT RAHASIA</b></p>
<p>Sekali lagi saya tegaskan jangan memasuki area ini selain petugas.
BERBAHAYA!!!</p>
<a href=”javascript: password();”>Masuk =></a>
</body>
</html>
Simpan dengan nama warning.html letakkan di C:\HTML\Bab 7. Jalankan pada browser
hasilnya akan terlihat seperti gambar 7.0.
PENJELASAN SCRIPT
Arti dari var pada script diatas adalah definisi sebuah variabel. Nama variabel pada javascript
selalu diawali syntax var. Isi variabel dapat berupa string(huruf) atau integer(angka). Jika
variabel berjenis string maka selalu diapit oleh tanda ‘…..isi variabel…‘ (petik satu) atau “ …isi
variabel…” (petik dua).
Pada javascript setiap akhir dari suatu baris kode diakhiri dengan tanda ;(titik koma).
Sekarang perhatikan script yang memiliki syntax function. Function merupakan syntax untuk
menuliskan suatu fungsi. Fungsi sangat berguna agar kita tidak perlu menuliskan beberapa
perintah berulang-ulang. Pada script diatas terdapat dua fungsi buatan kita sendiri yaitu fungsi
warning() dan fungsi password().
Nama suatu fungsi tidak boleh mengandung spasi dan harus diawali oleh huruf dan harus
ditutup dengan tanda (). Fungsi diapit oleh tanda { …. }. Dalam suatu fungsi bisa terdapat
fungsi lagi. Pada fungsi warning() kita menuliskan alert(pesan), alert() merupakan fungsi builtin(
bawaan) javascript yang fungsinya untuk menampilkan box warning. Begitu pula dengan
prompt() pada fungsi kedua kita, prompt() juga merupakan fungsi built-in javascript yang
fungsinya untuk menampilkan input box.
Pada fungsi password() passwordnya adalah petugas. Tanda != artinya tidak sama dengan.
Fungsi password menggunakan pengambilan keputusan else. else digunakan untuk mengambil
keputusan diantara 2 kejadian. Jadi fungsi password kalau diterjemahkan kedalam bahasa
indonesia yang baik dan benar bunyinya adalah jika password tidak sama dengan petugas maka
munculkan box gagal selain itu munculkan box sukses.
PARAMETER PADA FUNGSI
Lihat pada fungsi alert(pesan), pesan dalam hal ini yang disebut parameter. Fungsi dapat
memiliki lebih dari satu parameter. Pada fungsi yang kita buat pada file warning.html tidak
memilki parameter. Untuk yang kedua ini kita akan buat yang berparameter.
2. warning_2.html
Jalankan PHP DESIGNER 2006 klik File-New-HTML/XHTML. Ketiklah kode dibawah ini untuk
mengetahui lebih banyak tentang parameter.
<html>
<head>
<title>PARAMETER DALAM FUNGSI</title>
<script>
function warning(pesan_kita)
{
alert(pesan_kita);
}
function password(pesan_prompt, pesan_sukses, pesan_gagal)
{
var passwd = prompt(pesan_prompt);
if (passwd != ‘petugas’)
{
alert(pesan_gagal);
}
else
{
alert(pesan_sukses);
}
}
</script>
</head>
<body>
<p><b>TEMPAT RAHASIA</b></p>
<p>Sekali lagi saya tegaskan jangan memasuki area ini selain petugas.
BERBAHAYA!!!</p>
<a href=”javascript: password(‘Masukkan Password:’, ‘Password Benar!’, ‘Password
Salah’);”>Masuk =></a>
</body>
</html>
Simpan dengan nama warning_2.html lalu jalankan pada browser gimana sudah ngerti? Apa
perlu dijelaskan? OK saya akan jelaskan sedikit.
Gambar 7.1: output warning_2.html
PENJELASAN SCRIPT
Script yang saya tandai kuning adalah untuk fungsi warning(). Sedangkan yang hijau adalah
untuk fungsi password(). Fungsi warning() memiliki 1 parameter yaitu pesan_kita. Isi dari
alert() nantinya akan diganti oleh input yang kita masukkan saat menjalankan fungsi warning()
dalam hal ini pada saat onload. Karena isi dari alert adalah string maka kita beri tanda petik
pada Dilarang Masuk Selain Petugas!.
Sedangkan untuk fungsi password() memiliki 3 parameter yaitu pesan_prompt, pesan_sukses,
pesan_gagal. Nantinya kita menjalankan fungsi password harus dengan 3 parameter. Pada
script diatas kita menjalankan fungsi password() dengan mengetikkan password(‘Masukkan
Password:’, ‘Password Benar!’, ‘Password Salah’). Jadi ketika user salah memasukkan password
akan muncul box warning yang bertuliskan Password Salah. Sebaliknya jika password benar
akan muncul box warning bertuliskan Password Benar!.
Parameter juga ada yang bersifat optional artinya bersifat pilihan boleh diisi boleh tidak. Jika
kita ingin membuat parameter yang bersifat optional kita harus memberi nilai pada parameter
tersebut. Perhatikan contoh berikut!
f
unction param_opt(param1, param2 = ‘pilihan’)
{
if (param 2 != null)
{
alert(param1); alert(param2);
}
else{
alert(param1);
}
}
Arti fungsi diatas adalah jika parameter 2 tidak kosong(not null) maka blababla…. selain itu
blablala…. Jadi kita dapat menuliskan parameter tersebut dengan hanya menulis
param_opt(‘pesan no.1’). Kita juga dapat menuliskan 2 parameter untuk fungsi ini yaitu
param_opt(‘pesan no.1’, ‘pesan no. 2’).
Pop-Up Window
Secara sederhana pop-up window dapat diartikan window tambahan yang muncul mengiringi
window utama. Misalnya kita mengunjungi suatu website tetapi juga muncul window lainnya
setelah website utama muncul. Nah metode ini banyak yang dimanfaatkan para pengiklan
untuk memunculkan iklan mereka.
Makanya banyak muncul istilah pop-up blocker yang artinya menghentikan pemunculan window
pop-up. Pada pembahasan kita kali ini kita akan coba membuat pop-up window. Ya.. tentu
masih menggunakan jurus baru kita yaitu javascript.
Dalam contoh ini kita akan mambuat dua file. File yang pertama bernama popup_1.html dan
yang kedua adalah popup_2.html. Tugas file popup_1.html adalah memunculkan window
popup_2.html. Sekarang jalankan PHP DESIGNER 2006 klik File-New-HTML/XHTML lalu ketik
kode berikut ini.
<html>
<head>
<title>Membuat Pop-Up Window</title>
<script>
function buka_popup()
{
window.open(‘popup_2.html’, ”, ‘width=640, height=480, menubar=yes,
location=yes,scrollbars=yes, resizeable=yes, status=yes, copyhistory=no,
toolbar=no’);
}
</script>
<body>
<p>Anda juga dapat membuka window popupnya dari sini</p>
<a href=”javascript: buka_popup();”>KLIK DISINI</a>
</body>
</html>
Simpan dengan nama popup_1.html. Kemudian buatlah file baru lagi, ketik kode dibawah ini
untuk window ke dua.
<html>
<head>
<title>Ini Window Ke 2</title>
</head>
<body>
<p>Jika anda dapat melihat saya maka anda berhasil</p>
<a href=”javascript: window.close()”>Tutup Window[X]</a>
</body>
</html>
Simpan dengan nama popup_2.html. Jalankan file popup_1.html. Maka akan muncul window
ke dua yaitu file popup_2.html. Perlu anda ketahui jika anda menggunakan browser firefox atau
IE dengan SP 2 maka browser akan block terlebih dahulu dan minta persetujuan anda apakah
window akan ditampilkan. Hasil dari kode diatas akan seperti gambar 7.2
Gambar 7.2: output popup_1.html & popup_2.html
Untuk membuka window lain kita menggunakan metode open dari object window. Metode open
memiliki 3 attribut kalau istilah dalam fungsi parameter. Attribut pertama adalah lokasi file
yang akan kita buka. Attribut kedua kurang penting yaitu nama window, jika window yang akan
dibuka sudah mempunyai nama maka attribut ini tidak berguna. Attribut yang ketiga ini cukup
banyak isinya
Dilarang Klik-Kanan
Pernahkah anda mengalami saat ketika sedang surfing dan ingin menyimpan gambar yang ada
di website tersebut, namun saat anda mengklik kanan tiba-tiba oops. Sorry, not allowed to save
the pictures. Kali ini saya akan tunjukkan bagaimana membuatnya. Dan membalas dendam
pada pengunjung agar tidak bisa menyimpan gambar anda. Just Kidding…!.
Seperti biasa jalankan software favorit kita PHP DESIGNER 2006. Klik menu File-New-
HTML/XHTML. Salin kode berikut ini.
<html>
<head>
<title>No Right Click</title>
<script>
var pesan = ‘Boy, mau ngapain?’;
function klik_IE()
{
if (event.button == 2){
alert(pesan);
}
}
function klik_NS(e)
{
if (document.layers || document.getElementById && !document.all){
if (e.which == 2 || e.which == 3){
alert(pesan);
}
}
}
if (document.layers)
{
document.captureEvents(event.mousedown);
document.onmousedown = klik_NS;
}
else if (document.all && !document.getElementById)
{
document.onmousedown = klik_IE;
}
document.oncontextmenu = new Function(“alert(pesan); return false”)
</script>
</head>
<body>
<p>COBA KLIK KANAN</p>
</body>
</html>
Simpan dengan nama no_klik_kanan.html. Jalankan pada browser anda.
PENJELASAN SCRIPT
Script diatas dirancang untuk bekerja pada browser Internet Explorer, Netscape Navigatior,
Mozilla dan FireFox. Perhatikan fungsi klik_IE() fungsi ini khusus pada browser IE. Pada fungsi
ini terdapat syntax event. Event merupakan syntax yang digunakan untuk menangani suatu
aksi dari user. Pada script diatas event digunakan untuk menangani penekanan tombol
mouse(button) kanan(2). Jadi ketika user mengklik tombol mouse kanan akan dimunculkan box
warning.
Pada fungsi klik_NS, e dalam hal ini mengindikasikan event yang terjadi bukan parameter.
Fungsi ini khusus untuk browser keluarga Netscape(Navigator, Mozilla, dan Firefox). Tanda ||
artinya “atau” sama dengan syntax OR sedangkan tanda && aritnya “dan” sama dengan syntax
AND.
Arti dari
if (document.layers)
{
document.captureEvents(event.mousedown);
document.onmousedown …..
….
adalah jika pada dokumen terjadi event klik jalankan fungsi klik_NS. Sedangkan fungsi klik_NS
akan memunculkan box warning jika hanya tombol mouse kanan yang diklik. Arti dari kode
dibawahnya juga sama.
Menampilkan Hari dan Tanggal
Tanggal merupakan elemen yang cocok untuk ditampilkan pada halaman kita. Adanya hari dan
tanggal akan menjadi nilai plus bagi website kita. Pada contoh kali ini kita akan coba membuat
hari dan tanggal sekarang.
Jalankan PHP DESIGNER 2006 klik menu File-New-HTML/XHTML. Ketik dan nikmati kode
dibawah ini.
<html>
<head>
<title>Menampilkan Hari dan Tanggal</title>
<script>
function show_hari()
{
//membuat variabel bertipe array untuk nama hari
var NamaHari = new Array(“Minggu”, “Senin”, “Selasa”, “Rabu”, “Kamis”, “Jumat”,
“Sabtu”);
//membuat variabel bertipe array untuk nama bulan
var NamaBulan = new Array(“Januari”, “Februari”, “Maret”, “April”, “Mei”,
“Juni”, “Juli”, “Agustus”, “September”, “Oktober”, “November”, “Desember”);
var sekarang = new Date();
var HariIni = NamaHari[sekarang.getDay()];
var BulanIni = NamaBulan[sekarang.getMonth()];
var tglSekarang = sekarang.getDate();
var TahunIni = sekarang.getFullYear();
document.write(HariIni + “, ” + tglSekarang + ” ” + BulanIni + ” ” + TahunIni);
}
</script>
</head>
<body>
<p><font color=”red”>Hari Ini: </font><script>show_hari();</script>.</p>
</body>
</html>
Simpan dengan nama hari.html, lalu jalankan pada browser. PENJELASAN SCRIPT
Bagaiaman keren kan!. Hu….. mesti dari mana menjelaskannya nih. Pada ada beberapa hal
baru bagi anda yaitu Array. Array merupakan variabel yang dapat berisikan beberapa nilai
sekaligus. Nilai index dari array dimulai dari 0. Pada variabel NamaHari berisikan 7 nilai. Yaitu
minggu, senin, dan seterusnya. Karena dimulai dari 0 maka minggu=0, senin=1, selasa=2,
hingga sabtu=6.
Apa artinya ini? Contohnya seperti ini. Jika anda menuliskan fungsi
document.write(NamaHari[2]). Maka ouput dari perintah diatas adalah selasa. Are you
understand now?. Hal yang sama berlaku untuk variabel NamaBulan.
Pada variabel sekarang isinya adalah new Date(). Date adalah fungsi javascript untuk
mendapatkan tanggal, hari, waktu, tahun sekarang. Disini kita akan menerapkan OOP secara
lebih relevan.
Variabel HariIni berisi array dari NamaHari. Sekarang merupakan object tanggal dan memiliki
beberapa metode diantaranya getDay() = untuk mendapatkan hari dalam angka 0 sampai 6.
getMonth() = untuk mendapatkan bulan dalam angka antara 0 sampai 11. getDate() =
untuk mendapatkan tanggal 1 sampai 29 atau 30 atau 31. getFullYear() = untuk
mendapatkan tahun dalam 4 digit angka.
Sehingga dapat disimpulkan fungsi sekarang.getNamaFungsi() hanyalah untuk
mengembalikan nilai dalam angka. Sehingga variabel array NamaHari memiliki angka/index
yang dapat digunakan untuk mengembalikan nama hari dalam string(huruf).
Contohnya kita asumsikan sekarang adalah hari Sabtu tanggal 1 Oktober 2010. jika kita
menuliskan HariIni = NamaHari[sekarang.getDay()];. Maka sekarang.getDay() akan
menghasilkan nilai 6. Ingat NamaHari[6] artinya apa ya Sabtu. Hmm… akhirnya selesai sudah
penjelasan saya.
meliputi pembuatan window pop-up, no right click, tanggal dan script ringan lainnya. Kita tidak
akan membahas penggunaan javascript untuk membuat animasi yang “berat”. Materi yang
harus anda kuasai hanya seputar:
Pengertian Javascript
Aplikasi Javascript
Input Box
Pop Up Window
Dilarang Klik Kanan
Menampilkan Hari dan Tanggal
Pengertian Javascript
Javascript merupakan bahasa pemrograman berbasis web dan berorientasi objek atau sering
juga disebut OOP (Object Oriented Programming). Dimana dianggap sebuah objek memiliki
metode, properti dan event yang berbeda. Contohnya ketika kita mengklik tombol maka akan
muncul sebuah pesan peringatan. Ketika kursor melintasi link muncul pesan. Itulah beberapa
contoh OOP sederhana.
Kode javascript dalam HTML diapit oleh tag:
<script language=”javascript”>
……
</script>
s
eperti halnya CSS kode javascript dapat disimpan pada sebuah file. Untuk mengaksesnya
digunakan perintah
<script language=”javascript” src=”lokasi_file”></script>
Sebenarnya isi dari language tidak hanya javascript tetapi anda juga dapat menggunakan
Vbscript. Yaitu bahasa pemrograman berbasis Visual Basic Script. Kita tidak membahas vbscript
karena tidak kompatible dengan browser selain Internet Explorer. Perlu juga anda ketahui
sedikit pengetahuan tentang javascript akan sangat membantu anda dalam memahami bahasa
pemrograman lainnya seperti PHP karena syntaxnya hampir mirip.
Javascript biasanya gunakan untuk event-event tertentu. Seperti event onload, onkeydown,
onkeyup, onchange, onclick dan sebagainya.
PERSIAPAN
Seperti biasa sebelum memulai praktik kita lakukan beberapa persiapan terlebih dahulu.
Buatlah folder baru di direktori C:\HTML beri nama folder tersebut Bab 7. Kita akan menyimpan
semua file yang kita praktikkan pada bab 7 pada folder ini.
Aplikasi Javascript
Input Box
1. warning.html
OK, saatnya membuat file javascript pertama kita. Untuk yang pertama kita buat yang mudah
dulu agar tidak kaget. Kali ini kita akan membuat sebuah pesan peringatan sederhana dan input
box. Ini hanya untuk memudahkan anda bagaimana memahami kerja javascript
Seperti biasa jalankan program favorit kita yaitu PHP DESIGNER 2006 klik menu File-New-
HTML/XHTML. Ketik kode dibawah ini dengan baik dan benar?!?!
<html>
<head>
<title>Menampilkan pesan Warning</title>
<script>
var pesan = “Dilarang Masuk selain Petugas!”;
function warning()
{
alert(pesan);
}
f
unction password()
{
var passwd = prompt(“Masukkan Password”);
if (passwd != ‘petugas’)
{
alert(‘Gagal’);
}
else
{
alert(‘Sukses’);
}
}
</script>
</head>
<body>
<p><b>TEMPAT RAHASIA</b></p>
<p>Sekali lagi saya tegaskan jangan memasuki area ini selain petugas.
BERBAHAYA!!!</p>
<a href=”javascript: password();”>Masuk =></a>
</body>
</html>
Simpan dengan nama warning.html letakkan di C:\HTML\Bab 7. Jalankan pada browser
hasilnya akan terlihat seperti gambar 7.0.
PENJELASAN SCRIPT
Arti dari var pada script diatas adalah definisi sebuah variabel. Nama variabel pada javascript
selalu diawali syntax var. Isi variabel dapat berupa string(huruf) atau integer(angka). Jika
variabel berjenis string maka selalu diapit oleh tanda ‘…..isi variabel…‘ (petik satu) atau “ …isi
variabel…” (petik dua).
Pada javascript setiap akhir dari suatu baris kode diakhiri dengan tanda ;(titik koma).
Sekarang perhatikan script yang memiliki syntax function. Function merupakan syntax untuk
menuliskan suatu fungsi. Fungsi sangat berguna agar kita tidak perlu menuliskan beberapa
perintah berulang-ulang. Pada script diatas terdapat dua fungsi buatan kita sendiri yaitu fungsi
warning() dan fungsi password().
Nama suatu fungsi tidak boleh mengandung spasi dan harus diawali oleh huruf dan harus
ditutup dengan tanda (). Fungsi diapit oleh tanda { …. }. Dalam suatu fungsi bisa terdapat
fungsi lagi. Pada fungsi warning() kita menuliskan alert(pesan), alert() merupakan fungsi builtin(
bawaan) javascript yang fungsinya untuk menampilkan box warning. Begitu pula dengan
prompt() pada fungsi kedua kita, prompt() juga merupakan fungsi built-in javascript yang
fungsinya untuk menampilkan input box.
Pada fungsi password() passwordnya adalah petugas. Tanda != artinya tidak sama dengan.
Fungsi password menggunakan pengambilan keputusan else. else digunakan untuk mengambil
keputusan diantara 2 kejadian. Jadi fungsi password kalau diterjemahkan kedalam bahasa
indonesia yang baik dan benar bunyinya adalah jika password tidak sama dengan petugas maka
munculkan box gagal selain itu munculkan box sukses.
PARAMETER PADA FUNGSI
Lihat pada fungsi alert(pesan), pesan dalam hal ini yang disebut parameter. Fungsi dapat
memiliki lebih dari satu parameter. Pada fungsi yang kita buat pada file warning.html tidak
memilki parameter. Untuk yang kedua ini kita akan buat yang berparameter.
2. warning_2.html
Jalankan PHP DESIGNER 2006 klik File-New-HTML/XHTML. Ketiklah kode dibawah ini untuk
mengetahui lebih banyak tentang parameter.
<html>
<head>
<title>PARAMETER DALAM FUNGSI</title>
<script>
function warning(pesan_kita)
{
alert(pesan_kita);
}
function password(pesan_prompt, pesan_sukses, pesan_gagal)
{
var passwd = prompt(pesan_prompt);
if (passwd != ‘petugas’)
{
alert(pesan_gagal);
}
else
{
alert(pesan_sukses);
}
}
</script>
</head>
<body>
<p><b>TEMPAT RAHASIA</b></p>
<p>Sekali lagi saya tegaskan jangan memasuki area ini selain petugas.
BERBAHAYA!!!</p>
<a href=”javascript: password(‘Masukkan Password:’, ‘Password Benar!’, ‘Password
Salah’);”>Masuk =></a>
</body>
</html>
Simpan dengan nama warning_2.html lalu jalankan pada browser gimana sudah ngerti? Apa
perlu dijelaskan? OK saya akan jelaskan sedikit.
Gambar 7.1: output warning_2.html
PENJELASAN SCRIPT
Script yang saya tandai kuning adalah untuk fungsi warning(). Sedangkan yang hijau adalah
untuk fungsi password(). Fungsi warning() memiliki 1 parameter yaitu pesan_kita. Isi dari
alert() nantinya akan diganti oleh input yang kita masukkan saat menjalankan fungsi warning()
dalam hal ini pada saat onload. Karena isi dari alert adalah string maka kita beri tanda petik
pada Dilarang Masuk Selain Petugas!.
Sedangkan untuk fungsi password() memiliki 3 parameter yaitu pesan_prompt, pesan_sukses,
pesan_gagal. Nantinya kita menjalankan fungsi password harus dengan 3 parameter. Pada
script diatas kita menjalankan fungsi password() dengan mengetikkan password(‘Masukkan
Password:’, ‘Password Benar!’, ‘Password Salah’). Jadi ketika user salah memasukkan password
akan muncul box warning yang bertuliskan Password Salah. Sebaliknya jika password benar
akan muncul box warning bertuliskan Password Benar!.
Parameter juga ada yang bersifat optional artinya bersifat pilihan boleh diisi boleh tidak. Jika
kita ingin membuat parameter yang bersifat optional kita harus memberi nilai pada parameter
tersebut. Perhatikan contoh berikut!
f
unction param_opt(param1, param2 = ‘pilihan’)
{
if (param 2 != null)
{
alert(param1); alert(param2);
}
else{
alert(param1);
}
}
Arti fungsi diatas adalah jika parameter 2 tidak kosong(not null) maka blababla…. selain itu
blablala…. Jadi kita dapat menuliskan parameter tersebut dengan hanya menulis
param_opt(‘pesan no.1’). Kita juga dapat menuliskan 2 parameter untuk fungsi ini yaitu
param_opt(‘pesan no.1’, ‘pesan no. 2’).
Pop-Up Window
Secara sederhana pop-up window dapat diartikan window tambahan yang muncul mengiringi
window utama. Misalnya kita mengunjungi suatu website tetapi juga muncul window lainnya
setelah website utama muncul. Nah metode ini banyak yang dimanfaatkan para pengiklan
untuk memunculkan iklan mereka.
Makanya banyak muncul istilah pop-up blocker yang artinya menghentikan pemunculan window
pop-up. Pada pembahasan kita kali ini kita akan coba membuat pop-up window. Ya.. tentu
masih menggunakan jurus baru kita yaitu javascript.
Dalam contoh ini kita akan mambuat dua file. File yang pertama bernama popup_1.html dan
yang kedua adalah popup_2.html. Tugas file popup_1.html adalah memunculkan window
popup_2.html. Sekarang jalankan PHP DESIGNER 2006 klik File-New-HTML/XHTML lalu ketik
kode berikut ini.
<html>
<head>
<title>Membuat Pop-Up Window</title>
<script>
function buka_popup()
{
window.open(‘popup_2.html’, ”, ‘width=640, height=480, menubar=yes,
location=yes,scrollbars=yes, resizeable=yes, status=yes, copyhistory=no,
toolbar=no’);
}
</script>
<body>
<p>Anda juga dapat membuka window popupnya dari sini</p>
<a href=”javascript: buka_popup();”>KLIK DISINI</a>
</body>
</html>
Simpan dengan nama popup_1.html. Kemudian buatlah file baru lagi, ketik kode dibawah ini
untuk window ke dua.
<html>
<head>
<title>Ini Window Ke 2</title>
</head>
<body>
<p>Jika anda dapat melihat saya maka anda berhasil</p>
<a href=”javascript: window.close()”>Tutup Window[X]</a>
</body>
</html>
Simpan dengan nama popup_2.html. Jalankan file popup_1.html. Maka akan muncul window
ke dua yaitu file popup_2.html. Perlu anda ketahui jika anda menggunakan browser firefox atau
IE dengan SP 2 maka browser akan block terlebih dahulu dan minta persetujuan anda apakah
window akan ditampilkan. Hasil dari kode diatas akan seperti gambar 7.2
Gambar 7.2: output popup_1.html & popup_2.html
Untuk membuka window lain kita menggunakan metode open dari object window. Metode open
memiliki 3 attribut kalau istilah dalam fungsi parameter. Attribut pertama adalah lokasi file
yang akan kita buka. Attribut kedua kurang penting yaitu nama window, jika window yang akan
dibuka sudah mempunyai nama maka attribut ini tidak berguna. Attribut yang ketiga ini cukup
banyak isinya
Dilarang Klik-Kanan
Pernahkah anda mengalami saat ketika sedang surfing dan ingin menyimpan gambar yang ada
di website tersebut, namun saat anda mengklik kanan tiba-tiba oops. Sorry, not allowed to save
the pictures. Kali ini saya akan tunjukkan bagaimana membuatnya. Dan membalas dendam
pada pengunjung agar tidak bisa menyimpan gambar anda. Just Kidding…!.
Seperti biasa jalankan software favorit kita PHP DESIGNER 2006. Klik menu File-New-
HTML/XHTML. Salin kode berikut ini.
<html>
<head>
<title>No Right Click</title>
<script>
var pesan = ‘Boy, mau ngapain?’;
function klik_IE()
{
if (event.button == 2){
alert(pesan);
}
}
function klik_NS(e)
{
if (document.layers || document.getElementById && !document.all){
if (e.which == 2 || e.which == 3){
alert(pesan);
}
}
}
if (document.layers)
{
document.captureEvents(event.mousedown);
document.onmousedown = klik_NS;
}
else if (document.all && !document.getElementById)
{
document.onmousedown = klik_IE;
}
document.oncontextmenu = new Function(“alert(pesan); return false”)
</script>
</head>
<body>
<p>COBA KLIK KANAN</p>
</body>
</html>
Simpan dengan nama no_klik_kanan.html. Jalankan pada browser anda.
PENJELASAN SCRIPT
Script diatas dirancang untuk bekerja pada browser Internet Explorer, Netscape Navigatior,
Mozilla dan FireFox. Perhatikan fungsi klik_IE() fungsi ini khusus pada browser IE. Pada fungsi
ini terdapat syntax event. Event merupakan syntax yang digunakan untuk menangani suatu
aksi dari user. Pada script diatas event digunakan untuk menangani penekanan tombol
mouse(button) kanan(2). Jadi ketika user mengklik tombol mouse kanan akan dimunculkan box
warning.
Pada fungsi klik_NS, e dalam hal ini mengindikasikan event yang terjadi bukan parameter.
Fungsi ini khusus untuk browser keluarga Netscape(Navigator, Mozilla, dan Firefox). Tanda ||
artinya “atau” sama dengan syntax OR sedangkan tanda && aritnya “dan” sama dengan syntax
AND.
Arti dari
if (document.layers)
{
document.captureEvents(event.mousedown);
document.onmousedown …..
….
adalah jika pada dokumen terjadi event klik jalankan fungsi klik_NS. Sedangkan fungsi klik_NS
akan memunculkan box warning jika hanya tombol mouse kanan yang diklik. Arti dari kode
dibawahnya juga sama.
Menampilkan Hari dan Tanggal
Tanggal merupakan elemen yang cocok untuk ditampilkan pada halaman kita. Adanya hari dan
tanggal akan menjadi nilai plus bagi website kita. Pada contoh kali ini kita akan coba membuat
hari dan tanggal sekarang.
Jalankan PHP DESIGNER 2006 klik menu File-New-HTML/XHTML. Ketik dan nikmati kode
dibawah ini.
<html>
<head>
<title>Menampilkan Hari dan Tanggal</title>
<script>
function show_hari()
{
//membuat variabel bertipe array untuk nama hari
var NamaHari = new Array(“Minggu”, “Senin”, “Selasa”, “Rabu”, “Kamis”, “Jumat”,
“Sabtu”);
//membuat variabel bertipe array untuk nama bulan
var NamaBulan = new Array(“Januari”, “Februari”, “Maret”, “April”, “Mei”,
“Juni”, “Juli”, “Agustus”, “September”, “Oktober”, “November”, “Desember”);
var sekarang = new Date();
var HariIni = NamaHari[sekarang.getDay()];
var BulanIni = NamaBulan[sekarang.getMonth()];
var tglSekarang = sekarang.getDate();
var TahunIni = sekarang.getFullYear();
document.write(HariIni + “, ” + tglSekarang + ” ” + BulanIni + ” ” + TahunIni);
}
</script>
</head>
<body>
<p><font color=”red”>Hari Ini: </font><script>show_hari();</script>.</p>
</body>
</html>
Simpan dengan nama hari.html, lalu jalankan pada browser. PENJELASAN SCRIPT
Bagaiaman keren kan!. Hu….. mesti dari mana menjelaskannya nih. Pada ada beberapa hal
baru bagi anda yaitu Array. Array merupakan variabel yang dapat berisikan beberapa nilai
sekaligus. Nilai index dari array dimulai dari 0. Pada variabel NamaHari berisikan 7 nilai. Yaitu
minggu, senin, dan seterusnya. Karena dimulai dari 0 maka minggu=0, senin=1, selasa=2,
hingga sabtu=6.
Apa artinya ini? Contohnya seperti ini. Jika anda menuliskan fungsi
document.write(NamaHari[2]). Maka ouput dari perintah diatas adalah selasa. Are you
understand now?. Hal yang sama berlaku untuk variabel NamaBulan.
Pada variabel sekarang isinya adalah new Date(). Date adalah fungsi javascript untuk
mendapatkan tanggal, hari, waktu, tahun sekarang. Disini kita akan menerapkan OOP secara
lebih relevan.
Variabel HariIni berisi array dari NamaHari. Sekarang merupakan object tanggal dan memiliki
beberapa metode diantaranya getDay() = untuk mendapatkan hari dalam angka 0 sampai 6.
getMonth() = untuk mendapatkan bulan dalam angka antara 0 sampai 11. getDate() =
untuk mendapatkan tanggal 1 sampai 29 atau 30 atau 31. getFullYear() = untuk
mendapatkan tahun dalam 4 digit angka.
Sehingga dapat disimpulkan fungsi sekarang.getNamaFungsi() hanyalah untuk
mengembalikan nilai dalam angka. Sehingga variabel array NamaHari memiliki angka/index
yang dapat digunakan untuk mengembalikan nama hari dalam string(huruf).
Contohnya kita asumsikan sekarang adalah hari Sabtu tanggal 1 Oktober 2010. jika kita
menuliskan HariIni = NamaHari[sekarang.getDay()];. Maka sekarang.getDay() akan
menghasilkan nilai 6. Ingat NamaHari[6] artinya apa ya Sabtu. Hmm… akhirnya selesai sudah
penjelasan saya.
Membuat Tulisan Address Bar Berjalan
Jika anda masih bingung bagaimana cara membuat tulisan address bar di blog bisa berjalan.tidak usah bingung!!!! Ada banyak kode kode untuk bisa membuat itu dan saya akan memberitahu 1 code saja.dan caranya sebagai berikut:
1. kamu harus sigin dulu ke blog anda
2. klik tata letak -> edit html
3. cari kode </head> kalau bingung klik ctrl+f
4. lalu copy kode di dawah ini dan letakan di atas </head>
<script type='text/javascript'>
//<![CDATA[
msg = " --- welcome to my blog--- ";
msg = " --Belajar Sabar| Belajar Ngerti | Belajar Semua--" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",100);
}
scrollMSG();
//]]>
</script>
5. ganti kata welcome to my blog dan Belajar Sabar| Belajar Ngerti | Belajar Semua sesuai keinginan anda.
6. Klik save...
Cara Membuat Pesan Pembuka di Blog
Pernah melihat sebuah blog yang saat diakses tidak akan langsung kebuka tetapi ada sebuah pesan yang muncul? Jangan heran, fasilitas itu disebut alert script. Cara membuat pesan pembuka di blog seperti itu gampang sekali.
1. Login ke blog
2. Klik Tata Letak
1. Login ke blog
2. Klik Tata Letak
3. Klik Edit HTML
4. Beri centang pada kotak di samping Expand Template Widget
5. Cari kode </head> lalu pastekan skrip berikut ini di atasnya:
<script language="JavaScript">alert("Selamat datang . Semoga dapat bermanfaat");</script>
6. Simpan. Selesai
Ket:
- Ganti kata "Selamat datang . Semoga dapat bermanfaat" dengan pesan sesuai keinginan anda.
- Tanda kutip jangan dihapus.
9 TIPS AGAR BLOG RAMAI DIKUNJUNGI
Kita membuat blog mungkin bertujuan untuk menuliskan suatu ide-ide (berita terhangat) untuk bisa dibaca oleh orang lain. Tetapi apalah artinya jika kita membuat blog tetapi tidak ada alias sepi pengunjung (pembaca). Disini saya mencoba menuliskan 9 tips agar blog ramai dikunjungi:
1. Bersikap sabar.
Mendatangkan pembaca memang perlu waktu, jadi kunci yang utama bersabar tetap berusaha dan jangan menyerah membuat posting terbaru.
2. Membuat Konten yang berkualitas
Pada saat ini sudah ada jutaan blog di dunia maya yang menjadi pesaing anda. jadi buatlah sesuatu yang unik dan bermanfaat untuk dibaca guna memancing perhatian pengunjung.
3. Buat link ke Blog lain
Ternyata selain membuat konten original yang tentu saja bukan hasil COPAS (copy paste), melink blog lain juga bisa membuat sarana untuk menarik perhatian blogger yang lainnya. Tetapi jangan sembarangan memilih link ke semua blog, tetapi pilihlah yang memiliki konten yang benar-benar berkualitas.
4. Memberikan komentar diblog lain
Berikan komentar sesuai dengan posting dan jangan menyimpang dari topik yang dibahas. Sering-seringlah berkomentar diblog yang dofollow karena setiap kita berkomentar akan mendapatkan satu backlink yang menuju ke blog kita.
5. Update secara teratur
Meskipun kita membuat posting yang berkualitas dan menarik tetapi apabila kita jarang mengupdate secara berkala akan membuat pengunjung enggan untuk kembali ke blog kita, Dengan update secara teratur akan membuat bot mesin pencari mendatangi blog kita secara teratur dan lebih sering.
6. Daftarkan ke blog search engine
Ternyata mendaftarkan blog kita ke situs seperti technorati, akan memudahkan pengunjung untuk melakukan pencarian melalui kata kunci atau topik.
7. Kirim tulisan ke situs sosial bookmark
Dengan mengirim tulisan kita ke sosial bookmark seperti digg.com atau lintas berita, akan mempercepat datangnya pengunjung ke blog kita
8. Buatlah Judul yang Bombastis
Judul posting ternyata sangat berpengaruh terhadap kunjungan pembaca. Dengan membuat judul yang bombastis akan membuat pengunjung tertarik untuk membaca dan berkomentar.
9. Jadi diri sendiri
Mungkin ada ratusan atau bahkan jutaan tips dan trik seputar cara mendatangkan pengunjung. Namun yang perlu diingat buatlah tips dan trik yang merupakan hasil dari pengalaman. Jangan ragu untuk bereksperimen terutama gaya menulis dan topic yang akan ditulis.
Jumlah pengunjung bukan SEGALANYA!! Yang paling penting dalam blogging adalah mengembangkan kualitas persahabatan dan jaringan, serta berbagi ide kepada orang lain.
Semua tulisan diatas adalah hasil eksperimen. Jadi mohon koreksi dari para blogger senior demi kemajuan kita bersama. Jangan lupa sarannya ditunggu loooh…
Memasang widget alexa pada blog di blogspot
Mencoba tips meningkatkan rangking alexa blog. Sekalian belajar membuat screenshot.
Salah satu cara yang sangat direkomendasikan untuk mengangkat peringkat blog kita berdasarkan alexa rank adalah dengan memasang Alexa Rank Widget pada blog kita. Dengan memasang alexa widget di blog, maka mesin alexa akan mengetahui secara akurat berapa pengunjung serta Page view (halaman yang di lihat) pada blog kita
Pentingkah peringkat Alexa ini ?
Alexa Rank menurut saya penting dilakukan terutama bagi kita yang sedang mencoba membangun blog yang memiliki nilai jual. Beberapa website/situs penyedia layanan iklan komersil menjadikan ranking Alexa dengan batasan tertentu sebagai syarat jika kita ingin menjadi mitranya, yang itu berarti sumber pendapatan bagi kita.
Karena itu sangat dianjurkan untuk memasang widget peringkat alexa untuk memperbaiki peringkat blog kita.
Memasang widget alexa pada blog di blogspot sangat mudah dilakukan. Saya coba berbagi hasil praktek saya yang mudah-mudahan bisa berguna bagi rekan-rekan :
1. Langkah awal, menuju situs alexa.com
- Klik menu For Site Owner (tab paling kanan)
- Klik menu Site Widget
- Ketikkan alamat blog/URL sobat pada kotak yang tersedia (cth.www.butuhbelajar.blogspot.com). Pilih salah satu kotak isian sesuai selera sobat. (yang ditunjuk panah merah)
Bentuk widgetnya terlihat di sebelahnya.
Setelah itu Klik tombol Build Widget.
Akan muncul halaman yang menampilkan 3 ukuran widget yang bisa anda pilih
- Copy kode html yang ada di kotak kuning di samping widget
- Paste pada notepad atau text editor lainnya.
- Simpan kode tersebut di komputer untuk nanti di masukan ke blog.
2. Menempatkan kode HTML widget pada blog
- Login ke blogger dengan ID sobat
- Klik Tata Letak.
- Klik menu Elemen Halaman.
- Pilih dan Klik Tambah Gadget.
- Pilih Gadget HTML/JavaScript dan Klik tanda Plus ( + ) di samping tulisan.
- Paste kode HTML Widget Alexa yang tadi telah disimpan di notepad kedalam kolom dibawah tulisan konten)
- Klik tombol Simpan yang ada di bawah
- Atur penempatan elemen yang baru sobat buat tadi di tata letak sesuai selera
- Klik tombol Simpan yang ada di sebelah kanan atas.
- Lihat blog. Widget alexa sudah terpasang di side bar blog sobat.
Alexa rank terbilang cepat dalam melakukan update sehingga hasilnya akan otomatis terlihat dalam beberapa hari saja.
Memasang widget alexa merupakan perangkat pendukung untuk meningkatkan eksistensi blog kita. Hal utama yang harus selalu menjadi perhatian kita adalah untuk terus membuat konten yang berisi dan menarik sebanyak mungkin dan dipublish sesering mungkin, karena hal inilah yang menjadi pusat gravitasi dari blog untuk menarik sebanyak mungkin pengunjung dan penikmat blog kita.
Salah satu cara yang sangat direkomendasikan untuk mengangkat peringkat blog kita berdasarkan alexa rank adalah dengan memasang Alexa Rank Widget pada blog kita. Dengan memasang alexa widget di blog, maka mesin alexa akan mengetahui secara akurat berapa pengunjung serta Page view (halaman yang di lihat) pada blog kita
Pentingkah peringkat Alexa ini ?
Alexa Rank menurut saya penting dilakukan terutama bagi kita yang sedang mencoba membangun blog yang memiliki nilai jual. Beberapa website/situs penyedia layanan iklan komersil menjadikan ranking Alexa dengan batasan tertentu sebagai syarat jika kita ingin menjadi mitranya, yang itu berarti sumber pendapatan bagi kita.
Karena itu sangat dianjurkan untuk memasang widget peringkat alexa untuk memperbaiki peringkat blog kita.
Memasang widget alexa pada blog di blogspot sangat mudah dilakukan. Saya coba berbagi hasil praktek saya yang mudah-mudahan bisa berguna bagi rekan-rekan :
1. Langkah awal, menuju situs alexa.com
- Klik menu For Site Owner (tab paling kanan)
- Klik menu Site Widget
- Ketikkan alamat blog/URL sobat pada kotak yang tersedia (cth.www.butuhbelajar.blogspot.com). Pilih salah satu kotak isian sesuai selera sobat. (yang ditunjuk panah merah)
Bentuk widgetnya terlihat di sebelahnya.
Setelah itu Klik tombol Build Widget.
Akan muncul halaman yang menampilkan 3 ukuran widget yang bisa anda pilih
- Copy kode html yang ada di kotak kuning di samping widget
- Paste pada notepad atau text editor lainnya.
- Simpan kode tersebut di komputer untuk nanti di masukan ke blog.
2. Menempatkan kode HTML widget pada blog
- Login ke blogger dengan ID sobat
- Klik Tata Letak.
- Klik menu Elemen Halaman.
- Pilih dan Klik Tambah Gadget.
- Pilih Gadget HTML/JavaScript dan Klik tanda Plus ( + ) di samping tulisan.
- Paste kode HTML Widget Alexa yang tadi telah disimpan di notepad kedalam kolom dibawah tulisan konten)
- Klik tombol Simpan yang ada di bawah
- Atur penempatan elemen yang baru sobat buat tadi di tata letak sesuai selera
- Klik tombol Simpan yang ada di sebelah kanan atas.
- Lihat blog. Widget alexa sudah terpasang di side bar blog sobat.
Alexa rank terbilang cepat dalam melakukan update sehingga hasilnya akan otomatis terlihat dalam beberapa hari saja.
Memasang widget alexa merupakan perangkat pendukung untuk meningkatkan eksistensi blog kita. Hal utama yang harus selalu menjadi perhatian kita adalah untuk terus membuat konten yang berisi dan menarik sebanyak mungkin dan dipublish sesering mungkin, karena hal inilah yang menjadi pusat gravitasi dari blog untuk menarik sebanyak mungkin pengunjung dan penikmat blog kita.
Tips Dan Trik Agar Blog Ramai Pengunjungnya
Sebelum saya menulis tentang Tips dan trik agar blog ramai pengunjung dari para blogger, saya mau memberi tahu anda bahwa 50% pengunjung blog itu adalah para blogger, yang mencari informasi tentang, ide-ide, tutorial, tips, trik, SEO untuk perkembangan blog mereka. Coba anda lihat rata-rata yang menduduki top blog isinya rata-rata berbicara tentang seputar blog dan hanya sekian persen saja yang bertopik lain . Contohnya blog .o-om.com, kang rohman, maseko.com, bayumukti, alfatih suhud dan banyak lagi blog master-master tutorial maupun SEO yang ramai pengunjungnya dari para blogger dan itu akan berlaku terus menerus karena tiap tahunnya blog baru terus bermunculan dan akan mengidolakan mereka juga.
Jadi menurut hemat saya jika memang ingin blog ramai kita harus kreatif dalam mengisi blog ,ibarat kita bangun hotel disamping untuk tamu menginap untuk tidur buat juga aksesoris yang memanjakan mereka seperti restoran, kolam renang, gim, spa, salon, ktv room, permainan anak, taman,dan free-free service, discont dan lain.
Begitu juga blog walau tema atau judul utama blog kita tentang cerita-cerita kehidupan,puisi atau tentang hobby tidak Salahnya kita selip beberapa tips atau trik berdasarkan pengalaman kita selama ngeblog. Misalnya kita buat suatu label khusus tentang tips dan trik ngeblog untuk mendukung artikel utama kita , intinya pancing mereka datang dulu ,setelah datang mereka pasti tertarik untuk melihat-lihat hal lainnya yang ada pada blog kita, seperti saya sekarang lagi mencoba menambah 1 label baru tentang tips dan trik ngeblog tujuan saya disamping memancing para pengunjung dari blogger juga untuk menghilangkan rasa bosan saya terhadap tema yang telah banyak saya bahas dulu agar tetap semangat ngeblog ,ya seperti anak kecil yang punya mainan baru,dan masalah ramai atau tidaknya hanya waktu serta keberuntungan yang bisa menjawabnya.
Saya rasa ini saja dulu trik asal-asal dari seorang newbie ini, segala yang saya tulis ini hanya pandangan dari sebelah pihak dan saya tidak menyarankan anda mengikutinya karena tiap kita punya prinsip masing-masing dalam ngeblog, cuma saya mau mengingatkan anda saja tujuan kita membuat blog itu, untuk diri sendiri dan untuk dibaca orang lain .
Akhirnya tetap saya tunggu Masukkan dan kritikan anda......
Jadi menurut hemat saya jika memang ingin blog ramai kita harus kreatif dalam mengisi blog ,ibarat kita bangun hotel disamping untuk tamu menginap untuk tidur buat juga aksesoris yang memanjakan mereka seperti restoran, kolam renang, gim, spa, salon, ktv room, permainan anak, taman,dan free-free service, discont dan lain.
Begitu juga blog walau tema atau judul utama blog kita tentang cerita-cerita kehidupan,puisi atau tentang hobby tidak Salahnya kita selip beberapa tips atau trik berdasarkan pengalaman kita selama ngeblog. Misalnya kita buat suatu label khusus tentang tips dan trik ngeblog untuk mendukung artikel utama kita , intinya pancing mereka datang dulu ,setelah datang mereka pasti tertarik untuk melihat-lihat hal lainnya yang ada pada blog kita, seperti saya sekarang lagi mencoba menambah 1 label baru tentang tips dan trik ngeblog tujuan saya disamping memancing para pengunjung dari blogger juga untuk menghilangkan rasa bosan saya terhadap tema yang telah banyak saya bahas dulu agar tetap semangat ngeblog ,ya seperti anak kecil yang punya mainan baru,dan masalah ramai atau tidaknya hanya waktu serta keberuntungan yang bisa menjawabnya.
Saya rasa ini saja dulu trik asal-asal dari seorang newbie ini, segala yang saya tulis ini hanya pandangan dari sebelah pihak dan saya tidak menyarankan anda mengikutinya karena tiap kita punya prinsip masing-masing dalam ngeblog, cuma saya mau mengingatkan anda saja tujuan kita membuat blog itu, untuk diri sendiri dan untuk dibaca orang lain .
Akhirnya tetap saya tunggu Masukkan dan kritikan anda......
artikel terkait :
Tips dan trik ngeblog
- Cara membuat tampilan mobile pada blogspot
- Cara menstabilkan sinyal internet GPRS pada modem eksernal menggunakan tutup panci
- Cara Paling Cepat Mendatangkan Banyak Pengunjung ke Blog Kita
- Mobil keluarga ideal terbaik indonesia | serps artikel saya semakin menurun
- Cara menambah jumlah page view blog dengan 7 trik dasar seo
- Trik dasar seo yang terbukti ampuh
- Dukungan buat gerakkan seo “anak smp”
- Optimalisasi keyword game online point blank
- SEO untuk domain baru
- Anak SMP keyword positif yang diusung bang attayaya dan manajemen emosi
- Cara tepat submit konten di lintasberita
- bermain dengan keyword terbanyak
- Menerapkan seo kembali
- Cara membuat kotak pencarian artikel pada blog
- pengunjung blog
- Mempertahankan keyword dengan cara sederhana
- Trik agar artikel dapat halaman pertama di lintasberita.com
- Cara mensubmit artikel di lintasberita
- Menambah jumlah kunjungan blog secara sembunyi-sembunyi
- Cara mengisi kata kunci dan menulis tentang award
- Kecepatan loading blog berpengaruh pada pengindekskan
- Memilih untuk optimalisasi secara acak
- belajar nembak keyword di social bookmark
- Teknik membuat judul postingan agar punya dua kekuatan , dimesin pencari dan manusia
- Cara menambah jumlah pengunjung selain dari mesin pencari
Membuat Link Berwarna Pelangi
Ingin membuat link pada blog anda berkedip dan berwarna pelangi ketika tersentuh pointer? Caranya sangat mudah
* Dalam keadaan loggin,
* Masuk pada menu template,
* Klik Edit HTML,
* Cari kode <head>
Kemudian copy code berikut dan paste tepat dibawah code tadi :
<script language='javascript' src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/LinkPelangi.js'/>
* Terakhir simpan template.
Selamat mencoba!
* Dalam keadaan loggin,
* Masuk pada menu template,
* Klik Edit HTML,
* Cari kode <head>
Kemudian copy code berikut dan paste tepat dibawah code tadi :
<script language='javascript' src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/LinkPelangi.js'/>
* Terakhir simpan template.
Selamat mencoba!
Cara Menulis Kode HTML di Posting Blog
Kalangan blogger pemula yang sudah pernah mencoba menulis kode html / javascript di posting dan ingin kode tersebut tampil seperti waktu ditulis mungkin merasa heran karena setelah dipublish jadi berbeda. Contoh, umpamanya Anda menulis kode < dan > dan ingin tampil persis seperti itu diposting Anda, kenyataannya kode tersebut malah hilang. Ikuti tutorial praktis berikut, oh ya tip ini berlaku baik di posting wordpress atau blogger / blogspot.
1. Kunjungi Encode Decode HTML Converter klik di sini
2. Masukkan kode html / javascript yang ingin Anda tampilkan di posting di kotak yang tersedia, terus klik menu “Encode”
3. Copy dan paste hasil encode yang ada dalam kotak ke posting Anda. Selesai.
Catatan: Jangan lupa klik menu “Kode” atau “Code” sebelum memasukkan kode html yang sudah di-encode tadi.
1. Kunjungi Encode Decode HTML Converter klik di sini
2. Masukkan kode html / javascript yang ingin Anda tampilkan di posting di kotak yang tersedia, terus klik menu “Encode”
3. Copy dan paste hasil encode yang ada dalam kotak ke posting Anda. Selesai.
Catatan: Jangan lupa klik menu “Kode” atau “Code” sebelum memasukkan kode html yang sudah di-encode tadi.
Trik Menulis Variasi Di CBOX
Blogwalking merupakan salah satu cara untuk memperkenalkan blog dengan menelusuri satu blog ke blog yang lain. Dengan menelusuri blog ke blog dan meninggalkan komentar di CBox, dapat meningkatkan rangking alexa blog karena dapat meningkatkan pengunjung.
Sekarang lagi banyak orang yang menggunakan variasi tulisan pada CBox. Tentu ada segi keuntungan seperti tulisan akan nampak lebih tersorot karena perbedaannya. Tetapi disebagian orang mungkin ada yang menganggap tidak perlu karena bikin tambah kerjaan menulis-nulis pada CBox. Bagaimanapun lebih banyak segi keuntungan bila menggunakan trick ini. Dijamin !
1. Cara Membuat Text Tampak Tebal [Bold]
Contoh : [b]Semua Butuh Belajar[/b]
Hasilnya : Semua Butuh Belajar
2. Cara Membuat Text Tampak Miring [Italic]
Contoh : [i]Semua Butuh Belajar[/i]
Hasilnya : Semua Butuh Belajar
3. Cara Membuat Tulisan Bergaris Tengah [Strike]
Contoh : [s]Semua Butuh Belajar[/s]
Hasilnya :
4. Cara Membuat Text Bergaris Bawah [underline]
Contoh : [u]Semua Butuh Belajar[/u]
Hasilnya : Semua Butuh Belajar
5. Cara Membuat Text Berukuran Kecil [Small]
Contoh : [small]Semua Butuh Belajar[/small]
Hasilnya : Semua Butuh Belajar
6. Cara Membuat Text Berukuran Besar [Big]
Contoh : [big]Semua Butuh Belajar[/big]
Hasilnya : Semua Butuh Belajar
7. Cara Membuat Text Berisi Link [Url]
Contoh : [url=www.butuhbelajar.blogspot.com]Semua Butuh Belajar[/url]
Hasilnya : Semua Butuh Belajar
8. Cara Membuat Text Rata Tengah [Center]
Contoh : [center]Semua Butuh Belajar[/center]
Hasilnya : Semua Butuh Belajar
9. Cara Membuat Text Bewarna [Color]
Contoh : [color=green]Semua Butuh Belajar[/color]
Hasilnya : Semua Butuh Belajar
nb: untuk warna kalian bisa isi kata dalam bahasa inggris seperti red, yellow, green, blue, black, silver, pink, purple, dan masih banyak yang lainnya
10. Cara Membuat Text Berjalan Kanan-Kiri [Scroll]
Contoh : [scroll]Semua Butuh Belajar[/scroll]
Hasilnya :ya kekanan kekiri..
hhe
BIOMASS POWER PLANT STATION
Terletak di lokasi pedesaan di daerah sabuk hijau di Inggris, tujuan utama Hinton Cook Arsitek 'untuk desain struktur terus menerus permanen untuk rumah pembangkit listrik biomassa generasi adalah untuk meminimalkan dampak visual pada sekitarnya. Mereka berhasil melakukan ini dengan menggunakan sistem façade kompleks, sengaja dirancang untuk memecah massa visual dari pembangkit listrik, yang terutama mengambil inspirasi dari hutan sekitarnya.
Situs
Kontekstual, situs ini dalam jarak dekat dari sebuah dusun sekitar 0.5miles ke selatan dan terletak antara dua jalan raya Inggris sibuk. Situs ini secara bertahap lereng dari Utara Barat ke tenggara dengan sabuk mapan hutan di sepanjang batas selatan. Mengambil keuntungan dari tingkat, situs ini memberikan peluang yang cukup untuk variasi dalam massa / tinggi dan kesempatan untuk memberikan struktur laporan.
Karena skala yang dibutuhkan elemen tertentu dan persyaratan fungsional dari pembangkit listrik, itu penting untuk menjaga proses bersama-sama, dan fokus pada menggunakan sistem façade terus menerus. Hal ini bertujuan untuk membungkus proses bervariasi secara kolektif dalam pabrik sementara berhasil mengatasi lanskap. Komponen utama yang digunakan dalam memecahkan massa visual dari bangunan adalah sistem cladding dan bingkai struktural, yang keduanya didesain untuk prefabrikasi off-site, mengurangi permintaan situs.
STRUKTUR
Sebuah bingkai kayu kisi terkena dirancang untuk duduk pada kulit luar bangunan dan mengekspresikan suatu bermain rumit bekisting. Kerangka struktural utama digunakan untuk mendukung sistem cladding. Dalam rangka untuk mengungkapkan 'flora dan fauna' dari hutan, struktur tersebut dibiarkan dalam bentuk meter 8 beririsan kisi berlian representasional dari hutan itu sendiri. Dengan mengekspos struktur eksternal, garis bangunan terganggu dan karenanya massa bangunan secara visual berkurang.
Bentuk kisi-bekerja berjalan terus-menerus di seluruh fasad menghasilkan 'tema' tetapi bervariasi di ketinggian untuk mengatasi proses internal tanaman. Bingkai eksternal memastikan tidak ada penghalang maka ruang internal memaksimalkan area internal. Elemen-elemen tertentu dari struktur tidak mengandung kelongsong yang pada gilirannya menciptakan kesenjangan memungkinkan lanskap untuk muncul dan mengubah persepsi pemirsa bangunan. Di malam hari sendi struktural berpotongan diterangi untuk mencerminkan melewati gerakan lalu lintas di jalan raya.
Sistem cladding eksternal terdiri dari panel berlian padat, buram dan tembus, yang telah offset balik bingkai kisi struktural untuk memaksimalkan area internal memungkinkan untuk mencakup internal yang jelas, sementara juga memungkinkan bayangan akan dilemparkan pada façade itu. Kedua panel solid dan opak yang sembarangan diatur dalam berbagai nuansa hijau, yang membuat façade menarik.
Untuk lebih meningkatkan ini, elemen façade telah berlebihan dan diperluas untuk meningkatkan penjajaran gedung dengan pemandangan bila dilihat dari jauh. Berbagai nuansa hijau dan tingkat tembus, yang terinspirasi oleh permainan belang-belang terang dan gelap di hutan - di mana istirahat dalam daun memungkinkan cahaya untuk menembus dan kawasan di luar garis pohon untuk dilihat - dan menciptakan pola halus.
Panel cladding sistem juga menawarkan kesempatan untuk panel di lokasi tertentu yang akan diganti oleh panel hidup, yang selanjutnya perpaduan bangunan dengan hutan sekitarnya. Untuk lebih mengurangi dampak dari bangunan di Sabuk Hijau, atap sedum digunakan untuk campuran bangunan di dalam lanskap. Sebuah dasar sedum datar diusulkan di atas atap struktural. Sebuah kotak kayu struktural atas bingkai ruang yang memungkinkan mencakup internal yang jelas untuk peralatan pabrik diusulkan. Ini juga akan diintegrasikan kepada anggota dinding luar struktur untuk memastikan tema yang konsisten berjalan di gedung.
Pendekatan yang dilakukan ini dimaksudkan untuk menciptakan sebuah bangunan tengara, peka terhadap perusahaan lokasi Green Belt dan merupakan contoh dari desain arsitektur dan lingkungan untuk pembangkit listrik di masa depan.
Andaikan ada di Indonesia pasti seluruh Wilayah Indonesia akan tercukupi kebutuhan listriknya.
Langganan:
Postingan (Atom)