Memulai Bisnis di Internet dengan Blog

Blog semula berfungsi sebagai diary (buku catatan harian) seseorang, tapi kini telah mengalami paradigma baru kearah yang lebih dari sekedar catatan. Kepopuleran blog menggeser dominasi website konvensional, hal ini karena blog merupakan platform website yang dinamis, yang selalu up-to-date sesuai dengan apa yang ada dalam pemikiran sang pemilik blog.

Beberapa tahun kebelakang blog tidak lebih dari hanya tempat untuk mencurahkan isi pikiran sang pemiliknya tapi sekarang berubah menjadi raksasa penguasa internet dengan berbagai informasi, imajinasi, kreatifitas, ide dan hal lain yang sangat menarik untuk dikaji. Pengaruh dan kepopuleran blog membuat platform ini mampu dijadikan sebagai wahana untuk memperoleh lembar demi lembar uang yang bergulir hingga trilliunan dollar di internet. Para pelaku bisnis mulai membidik blog sebagai sarana untuk mempromosikan suatu produk kepada calon konsumennya dan hal ini ternyata lebih efektif dan efisien dari pada menggunakan metode promosi konvensional yang sudah bisa dipastikan lebih banyak menguras resource (waktu dan finansial). Berbagai jenis bisnis internet pun muncul di dunia maya, para pelaku bisnis dan konsumen sudah tidak ragu lagi melakukan proses transaksi secara online. Hal inilah yang membuat internet berkembang cepat dan pesat, bisnis melalui internet sudah bukan lagi sekedar lamunan belaka tetapi sudah benar-benar menjelma menjadi suatu kenyataan yang tidak bisa dipungkiri. Orang dengan optimis memulai bisnis di internet dan perlahan tapi pasti semua yang tadinya hanya bisa dilakukan didunia nyata kini benar-benar menjadi kenyataan di dunia maya. Blog berubah menjadi kantor pengganti (virtual office) untuk menciptakan dan mengatur suatu bisnis yang mampu menghasilkan lembaran uang bahkan menjadikan seseorang kaya secara materi dengan hanya bermodal blog.

Perhatian!

Artikel ini hanya untuk konsumsi pemula, untuk para blogger senior mungkin artikel ini tidak bermanfaat dan silahkan berpindah ke artikel lain.

Bagi pemula ada banyak pertanyaan yang dikemukakan ketika akan mencoba berbisnis di internet. Pertanyaan-pertanyaan berikut mungkin bisa mewakili kebingungan untuk memulai bisnis di internet. Telah dijelaskan pada artikel sebelumnya (Berkenalan dengan Bisnis di Internet) bahwa seorang blogger pun bisa membuat blog-nya sebagai sarana penghasil uang dengan mengikuti berbagai teknik bisnis di internet. Simak pertanyaan berikut untuk mengubah hutan belantara dunia maya menjadi sebuah kota maya yang indah (Terima kasih untuk Identy dan Mahdalena yang telah mengajukan beberapa pertanyaan mengenai bisnis di internet).

Pertanyaan.: Apa yang dibutuhkan untuk memulai bisnis di internet?
Jawaban.....: Blog dan ilmu.
Pertanyaan.: Berapa biaya yang diperlukan untuk membuat blog?
Jawaban.....: Mulai dari gratis sampai tidak terhingga.
Pertanyaan.: Yang gratis dimana? Dan yang berbayar dimana?
Jawaban.....: Rekomendasi gratis blogspot.com dan wordpress.com, janganlah dulu melangkah ke yang berbayar sebelum kita menguasai teknik manajemen blog.
Pertanyaan.: Setelah punya blog, apa yang kita lakukan selanjutnya terhadap blog kita?
Jawaban.....: Menulis artikel.
Pertanyaan.: Artikel mengenai apa? Fiksi atau non fiksi?
Jawaban.....: Artikel mengenai suatu ilmu yang kita kuasai, rekomendasi non fiksi tetapi bisa juga fiksi.
Pertanyaan.: Dari mana kita menghasilkan uang?
Jawaban.....: Dari pemasang iklan atau dari artikel itu sendiri, coba baca lagi artikel sebelumnya.
Pertanyaan.: Kenapa mereka mau membayar kita?
Jawaban.....: Karena kita ikut mempromosikan produk mereka.
Pertanyaan.: Bagaimana perhitungan mereka (advertiser) untuk membayar kita?
Jawaban.....: Tergantung peraturan advertiser atau tergantung kesepakatan bersama antara pemilik blog dengan pemasang iklan (advertiser).
Pertanyaan.: Bagaimana teknik pembayarannya?
Jawaban.....: Secara online melalui virtual bank, virtual credit card atau yang sejenis dan atau secara offline melalui check atau transfer ke rekening bank pribadi secara langsung.
Pertanyaan.: Apakah mereka (advertiser) jujur?
Jawaban.....: Bisa ya bisa tidak, dalam hal ini banyaklah belajar dan ikutilah program periklanan yang sudah di rekomendasikan para blogger senior dan terbukti jujur dalam perhitungan dan pembayaran. Rekomendasi Google Adsense.
Pertanyaan.: Apalagi ya?
Jawaban.....: Tidak tahu... :-)
Pertanyaan.: Oh ya... Artikelnya menggunakan bahasa Indonesia?
Jawaban.....: Bisa ya bisa juga tidak, rekomendasi menggunakan bahasa Inggris.
Pertanyaan.: Kenapa harus menggunakan bahasa Inggris?
Jawaban.....: Karena bahasa Inggris adalah bahasa yang banyak digunakan dan menyeluruh sehingga siapapun dapat membaca dan mengerti tentang artikel yang kita buat. Dan program periklanan yang sudah terbukti menghasilkan uang banyak mengharuskan kita membuat artikel berbahasa Inggris.
Pertanyaan.: Kenapa dengan artikel berbahasa Indonesia?
Jawaban.....: Tidak tahu... :-)
Pertanyaan.: Lho katanya bisa ya bisa tidak, kalau ya bagaimana?
Jawaban.....: Sebab jika kita membuat artikel dengan bahasa Indonesia targetnya hanya mereka yang mengerti bahasa Indonesia dan ini kurang universal, sehingga para pemasang iklan tidak bersedia jika artikel yang dibuat menggunakan bahasa Indonesia, target pasarnya terlalu sempit.
Pertanyaan.: Kenapa artikel berbahasa Indonesia target pasarnya sempit?
Jawaban.....: Asumsinya begini, jumlah pengguna internet yang mengerti bahasa Indonesia ada 1000 orang, para pengunjung (pembaca) blog kita 1000 orang per hari dan dari 1000 pengunjung tersebut 10 diantaranya tertarik dengan iklan yang ada di blog kita hingga melakukan transaksi dengan pihak perusahaan yang memasang iklan di blog kita, harga kesepakatan iklan misalnya, jika terjadi 1 kali transaksi maka kita dibayar Rp. 1000,- sedangkan dalam hari tersebut terjadi 10 transaksi maka penghasilan kita hari itu adalah Rp. 1000,- x 10 = Rp. 10.000,-. Seandainya blog kita menggunakan bahasa Inggris tentunya jumlah pengunjung bisa lebih dari 1000 per hari dan kita bisa menghitung sendirikan???
Pertanyaan.: Ya... Kalau begitu kita juga harus mempromosikan blog kita agar pengunjungnya banyak?
Jawaban.....: Ya... Berarti sudah mulai mengerti?
Pertanyaan.: Ya... Bagaimana kita mempromosikan blog kita?
Jawaban.....: Ada banyak cara dan faktor-faktor yang harus dikuasai untuk mempromosikan blog kita. Masalah ini akan kita bahas lain waktu.
Pertanyaan.: Mau kemana?
Jawaban.....: Sudah dulu ya...? Aku ngantuk mau tidur dulu... Selamat menunggu...
Pertanyaan.: Ya...
Jawaban.....: Hah...
Pertanyaan.: (censored...)

Ma'af tanya jawab tidak bisa dilanjutkan...

Mudah-mudahan artikel diatas dapat membantu untuk memahami tentang bisnis internet melalui blog. Jika ada hal yang perlu ditanyakan silahkan tinggalkan pertanyaan dalam kotak komentar dibawah. Happy Blogging... :-)

Bisnis Blogging

Penggunaan Tag iframe pada Artikel

IFrame atau Internal Frame adalah salah satu fasilitas didalam coding pemrograman HTML yang berfungsi untuk memasukan halaman web lain ke dalam halaman web kita. Jika kita membuat suatu kode pemrograman tertentu tetapi ternyata kode pemrograman tersebut tidak didukung oleh blog kita atau jika pun di dukung, ternyata memberatkan loading page halaman blog maka lebih baik menggunakan fasilitas iframe.

Halaman yang ada didalam iframe hanya akan di-load dan ditampilkan jika kita membuka halaman yang bersangkutan. Tetapi jika kita memasukan kode pemrograman tersebut secara langsung didalam blog kita ini berarti kode-kode pemrograman itu bisa saja akan di-load walaupun halaman yang berkaitan tidak ditampilkan. Hal inilah yang memberatkan loading main page halaman blog kita. Pemasangan kode iframe sangatlah sederhana seperti dijelaskan dibawah ini...

Pemasangan iframe

Langkah 1
Buatlah suatu artikel yang akan kita sisipi halaman lain
Langkah 2
Masuklah ke mode "Edit HTML"
Langkah 3
Masukan kode dibawah ini kedalam artikel

<iframe align="center" src="http://blogku.com/halaman_lain.html" style="width: 100%; height: 280px;" frameborder="0">
</iframe>

Keterangan:

• Untuk memasukan halaman lain maka gunakan tag <iframe ...> dan tutup dengan tag </iframe>
• align berfungsi untuk menempatkan halaman lain dalam posisi tertentu, ada tiga posisi, yaitu; align="center"; posisi halaman lain ditempatkan di tengah-tengah frame, align="left"; posisi halaman lain ditempatkan di sebelah kiri frame, align="right"; posisi halaman lain ditempatkan di sebelah kanan frame.
• src="http://halaman-tujuan.html" berfungsi untuk mengarahkan frame agar menampilkan halaman yang dituju. Halaman yang dituju ditempatkan didalam tanda kutip.
• width dan height berfungsi untuk menentukan lebar dan tinggi frame, hal ini harus disesuaikan dengan lebar dan tinggi halaman artikel. Tetapi bukan mengatur lebar dan tinggi halaman lain yang dituju. Satuan yang digunakan bisa menggunakan persen (%) atau pixel (px). Jika menggunakan satuan persen maka lebar atau tinggi frame akan mengikuti lebar atau tinggi halaman artikel dan atau browser, jika menggunakan satuan pixel maka lebar atau tinggi frame tidak akan berubah mengikuti halaman artikel dan atau browser.
• frameborder digunakan untuk memberikan ketebalan garis pinggir frame, jika diberi nilai "0" (nol) maka garis pinggir tidak ditampilkan.
• Parameter lain yang bisa ditambahkan adalah scrolling yang berfungsi untuk menambahkan baris scroll vertikal dan horisontal, parameter ini hanya tambahan saja. Parameter scroll memiliki tiga settingan yaitu: no; scroll tidak ditampilkan, yes; scroll ditampilkan, auto;scroll akan ditampilkan jika halaman yang dituju lebih besar dari frame, jika tidak lebih besar maka scroll tidak ditampilkan.

Mudah-mudahan bermanfaat... Happy blogging... :-)

Basic Blog

Tampilkan Gambar dengan Efek Membesar

Beberapa saat yang lalu Blogger TuneUp pernah membahas Blogger Hack dengan judul artikel "Tampilkan Gambar dengan Efek LightBox", kali ini masih berhubungan dengan efek gambar yaitu efek membesar atau sering dikenal dengan nama "Zoom Effect". Biasanya jika kita ingin melihat suatu gambar yang terdapat pada artikel maka kita harus meng-klik gambar tersebut sehingga gambar akan ditampilkan pada link baru dengan ukuran sebenarnya pada browser.

Dengan menggunakan efek membesar ini kita cukup mengarahkan mouse kearah gambar (tanpa klik) dan dengan sendirinya gambar akan tampil seketika pada halaman yang sama dengan ukuran sebenarnya. Efek ini tidak menggunakan kode JavaScript yang rumit, cukup menambahkan beberapa baris kode CSS (cascading style sheet), dan sedikit modifikasi kode pada gambar artikel. Contoh penggunaan Zoom Effect Image silahkan arahkan mouse pada gambar dibawah ini...

Untuk menerapkan efek ini pada blog silahkan ikuti langkah dibawah ini:Langkah 1
Login ke Blogger
Langkah 2
Masuk ke tab "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan kode dibawah ini tepat diatas kode pada Langkah 3:

.perbesar{position: relative; z-index: 0;}
.perbesar:hover{background-color: transparent; z-index: 50;}
.perbesar span{position: absolute; background-color: #80ffff; padding: 5px; left: -1000px; border: 2px solid rgb(192, 192, 192); -moz-border-radius:10px; visibility: hidden; color: black; text-decoration: none;}
.perbesar span img{border-width: 0; padding: 2px;}
.perbesar:hover span{visibility: visible; top: 0; left: 60px;}

Langkah 5
Simpanlah template...

Modifikasi kode pada gambar artikel:
Langkah 1
Masukan sebuah gambar pada artikel
Langkah 2
Masuk ke tab "Edit Html" pada halaman pembuatan artikel

Hal yang harus diperhatikan:

• Kode class="perbesar" harus selalu ditambahkan pada gambar yang disertakan pada artikel, sehingga pada saat pengunjung mengarahkan mouse pada gambar, maka gambar akan ditampilkan dengan efek membesar (lihat contoh dibawah ini, kode class="perbesar" dengan warna biru).
• Tambahkan kode pengulangan yang diapit <span>kode gambar</span> pada akhir kode gambar (lihat contoh dibawah warna biru).
• Buang kode "-h" (tanpa tanda kutip) pada gambar yang disertakan pada artikel, karena jika kode "-h" ini tidak dibuang maka gambar tidak akan mampu diload/ditampilkan. Cukup satu kode "-h" pada kode yang dibuang diantara <span>kode gambar</span>.

Contoh modifikasi kode:

Lakukan modifikasi pada kode gambar seperti contoh dibawah ini dengan memperhatikan Langkah 2

<a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}" href="http://2.bp.blogspot.com/AAAAB9g/s1600-h/image.jpg" class="perbesar"><img style="cursor:pointer;" src="http://2.bp.blogspot.com/AAAAB9g/s400/image.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXX" border="0"><span><img src="http://2.bp.blogspot.com/AAAAB9g/s1600/image.jpg"></span></a>

Langkah 3
Terbitkan artikel...!

Mudah bukan? Selamat mencoba, mudah-mudahan berhasil dan tinggalkan komentar jika mengalami kegagalan. Happy Blogging :)

Bloghack Tips Trik

Tampilkan Gambar dengan Efek LightBox

Efek LightBox sangat menarik dan indah untuk menampilkan gambar-gambar pada Blogger. Ketika pengunjung meng-klik gambar yang disertakan pada artikel, maka gambar akan muncul dengan ukuran sebenarnya pada halaman yang sama dengan warna latar hitam transparan. Jika pernah menggunakan software semacam Picasa, maka seperti itulah efek LightBox yang akan kita terapkan pada Blog*Spot kali ini. Efek LightBox dibuat dan dikembangkan oleh Lokesh Dhakar, versi terbaru adalah Lightbox JS v2.04.

Blogger TuneUp menerapkan efek LightBox ini pada gambar-gambar artikel Electronic Project, silahkan dilihat terlebih dahulu untuk meyakinkan bahwa anda menyukai efek LightBox ini. Pada awalnya Blogger TuneUp mengalami kegagalan pada saat mencoba menerapkannya pada Blog*Spot, gambar tidak mampu diload (ditampilkan). Ternyata setelah tanpa lelah mencoba kesalahan ditemukan, dan kesalahan itu bukan pada proses pemasangan berbagai kode LightBox tapi terdapat pada karakter kode gambar Blog*Spot itu sendiri.

Screenshot diambil dari Electronic Project

Pemasangan Efek LightBox pada Blog*Spot:

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan kode CSS dibawah ini diatas kode pada Langkah 3:

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.lokeshdhakar.com/projects/lightbox2/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.lokeshdhakar.com/projects/lightbox2/images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }   
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}   
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan kode dibawah ini diatas kode pada Langkah 5:

<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/prototype.js' type='text/javascript'/>
<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/lightbox.js' type='text/javascript'/>

Langkah 7
Simpanlah Template, sampai Langkah 7 ini proses pemasangan efek LightBox pada Blog*Spot sudah selesai, tetapi efek LightBox ini tidak akan berjalan jika tidak ditambahkan beberapa kode pada gambar yang disertakan pada artikel. Lanjutkan membaca langkah berikutnya...

Proses Modifikasi Kode Gambar:

Langkah 1

Pada saat memasukan gambar pada artikel, biasanya menggunakan metode seperti gambar dibawah ini:

Langkah 2

Setelah gambar berhasil di-upload lakukan penambahan kode pada mode "Edit Html" posting seperti gambar dibawah ini:

Hal yang harus diperhatikan:

1. Kode rel="lightbox" harus selalu ditambahkan pada gambar yang disertakan pada artikel, sehingga pada saat pengunjung meng-klik gambar, maka gambar akan ditampilkan dengan efek LightBox (lihat contoh dibawah ini, kode rel="lightbox" dengan warna biru).
2. Jika gambar pada artikel lebih dari satu, tambahkan kode rel="lightbox[roadtrip]" pada setiap kode gambar. Dengan penambahan kode ini maka gambar akan ditampilkan dengan efek LightBox dan efek Slide. Semua gambar akan dikumpulkan dalam satu frame dan akan ditampilkan seperti slideshow.
3. Buang kode "-h" (tanpa tanda kutip) pada gambar yang disertakan pada artikel, karena jika kode "-h" ini tidak dibuang maka gambar tidak akan mampu diload/ditampilkan (lihat contoh dibawah ini, kode "-h" dengan warna merah).

Perhatikan contoh dibawah ini :
Kode LightBox jika hanya satu gambar!

<a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}"href="http://2.bp.blogspot.com/AAAAB9g/s1600-h/image.jpg" rel="lightbox"><img style="cursor:pointer;" src="http://2.bp.blogspot.com/AAAAB9g/s400/image.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXX" border="0"></a>

Kode LightBox jika lebih dari satu gambar!

<a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}"href="http://2.bp.blogspot.com/AAAAB9g/s1600-h/image.jpg" rel="lightbox[roadtrip]"><img style="cursor:pointer;" src="http://2.bp.blogspot.com/AAAAB9g/s400/image.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXX" border="0"></a>

Langkah 3
Artikel telah siap lepas landas dengan efek gambar LightBox plus Slide dan KLIK Terbitkan!

Keterangan:

• Blogger TuneUp tidak menjamin semua source yang berupa Gambar, dan JavaScript akan selalu tersedia, dari itu silahkan anda upload sendiri pada hosting pribadi anda.
• Efek LightBox ini menggunakan source disini (klik kanan save as)
• Ubahlah arah URL source diatas ke arah URL source hosting anda (perhatikan "Pemasangan Efek LightBox pada Blog*Spot" berwarna biru yang ada pada langkah 4 dan langkah 6).

Mudah-mudahan berhasil. Tinggalkan komentar jika mengalami kegagalan dan Happy Blogging :)

Bloghack Tips Trik

Cegah Translator Artikel Blog Ilegal

Hal ini berawal dari kekesalan dan kekecewaan terhadap blogger lain. Suatu hari Blogger TuneUp mencoba kembali Chat di YM! karena permintaan salah satu pembaca setia Blogger TuneUp untuk membantu melakukan beberapa tips trik blogger hack dari artikel Blogger TuneUp. Ketika terjadi tanya jawab muncul seseorang bergabung dan minta untuk ditambahkan. Tanpa pikir panjang saya menambahkan dia menjadi teman dalam daftar teman (Friend List).

Seorang blogger tersebut ternyata berasal dari negara tetangga yang baru-baru ini gencar diberitakan media televisi sedang membasmi para militan dinegara tersebut. Kemudian percakapan berlanjut dengan tukar informasi yang sebagian besar tidak nyambung karena memang blogger tersebut kurang fasih berbahasa Inggris (sama dengan penulis), tukar alamat blog dan saling menjadi follower.

Seminggu kemudian Blogger TuneUp mengunjungi sang blogger tersebut, sungguh diluar dugaan, kaget plus kecewa ternyata sudah hampir seperempat artikel Blogger TuneUp sudah diterjemahkan kedalam Bahasa Inggris. Kemudian saya melakukan konfirmasi mengenai maksud dan tujuannya melakukan penterjemahan artikel tanpa memberitahu atau ijin terlebih dahulu, jawabannya sederhana "Dia ingin bergabung dengan program Google Adsense". Setelah kejadian tersebut Blogger TuneUp segera melakukan tindakan preventif untuk mencegah proses terjemahan lebih lanjut dan bisa mematikan ide sang blogger. Berikut ini tindakan Blogger TuneUp untuk mencegah proses terjemahan secara ilegal.

1. Dengan menggunakan Meta Tag
Metode ini cukup efektif untuk mencegah translate dengan Google Translator, teknik ini akan mencegah penterjemahan semua konten yang ada pada blog kita. Tambahkan kode Meta Tag dibawah kode <head>:

<meta name="google" value ="notranslate">

2. Dengan menggunakan Class
Metode ini akan mencegah proses translator pada beberapa bagian blog saja, bagian yang akan diblok untuk proses translator harus ditambahkan kode seperti dibawah ini:

Kirim email ke <span class="notranslate">penjualan at gmail dot com</span>

Kata penjualan at gmail dot com tidak akan diterjemahkan oleh Google Translator.

Informasi ini berasal dari Google sendiri, silahkan baca disini.

Hal ini Blogger TuneUp lakukan karena merasa perlu untuk melindungi artikel berbahasa Indonesia, dan kita sebagai para Blogger Indonesia harus bangga dengan bahasa kita. Mari lindungi artikel kita! Untuk perlindungan artikel blog lebih lanjut silahkan baca disini (cegah copy paste artikel). Happy Blogging :)

Basic Tips Trik

Membuat Widget Blogger Login

Pada artikel sebelumnya Blogger TuneUp pernah membuat Widget Blogger Login layaknya WordPress yang terdiri dari Dashboard, Pengaturan, Tata Letak, Artikel Baru, Edit Artikel. Fasilitas ini sama dengan pembuatan Float Navigation Bar (Baris Navigasi Terapung), tetapi karena setiap blogger memiliki karakter masing-masing maka sekarang Blogger TuneUp akan menyuguhkan bentuk lain dari Blogger Login berupa widget yang biasanya kita lihat pada saat login ke halaman muka Blog*Spot.

Widget ini mudah untuk diterapkan pada Blogger dengan mengikuti langkah dibawah ini. Seperti biasa sebelum artikel ini di buat, Blogger TuneUp telah meng-integrasi-kannya pada blog Electronic Project.

Screenshot diambil dari Electronic Project

Dibawah ini langkah pemasangan Widget Blogger Login
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 3
Tambahkan Gadget Baru dengan tipe HTML/JavaScript dengan Judul "Blogger Login"
Langkah 4
Masukan kode dibawah ini:

<form id="start-login" action="https://www.google.com/accounts/ServiceLoginBoxAuth" name="login" onsubmit="onlogin()" method="post">
<input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/>
<input value="blogger" name="service" type="hidden"/>
<input value="8" name="nui" type="hidden"/>
<input value="8" name="naui" type="hidden"/>
<input value="2" name="fpui" type="hidden"/>
<input value="3" name="uilel" type="hidden"/>
<input value="true" name="skipvpage" type="hidden"/>
<input value="false" name="rm" type="hidden"/>
<input value="true" name="alwf" type="hidden"/>
<input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/>
<input value="0" name="alinsu" type="hidden"/>
<input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/>
<div>
<label for="Email"> Username: <br/>
<input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/>
</label>
</div>
<div>
<label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/>
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/>
</div><br/>
<input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/>
</form>
<span><a style="font-size: 10px; text-decoration:none; color: #cccccc;" href="http://modification-blog.blogspot.com/" target="_blank">Gadget by Blogger Tune-Up</a></span>

Langkah 5
Simpan Gadget tersebut dan Preview Blog...

Bagi yang tidak mau ribet atau kurang paham dengan langkah diatas, silahkan klik tombol "Tambahkan Blogger Login Widget" dibawah ini:

Silahkan masukan nama pengguna dan password anda!<br/><br/><form id="start-login" action="https://www.google.com/accounts/ServiceLoginBoxAuth" name="login" onsubmit="onlogin()" method="post"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"><input value="blogger" name="service" type="hidden"><input value="8" name="nui" type="hidden"><input value="8" name="naui" type="hidden"><input value="2" name="fpui" type="hidden"><input value="3" name="uilel" type="hidden"><input value="true" name="skipvpage" type="hidden"><input value="false" name="rm" type="hidden"><input value="true" name="alwf" type="hidden"><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"><input value="0" name="alinsu" type="hidden"><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"><div><label for="Email"> Username: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"></form><span><a style="font-size: 10px; text-decoration:none; color: #cccccc;" href="http://modification-blog.blogspot.com/2009/07/membuat-widget-blogger-login.html" target="_blank">Gadget by Blogger Tune-Up</a></span>

Mudah-mudahan berhasil... Happy Blogging :)

Tips Trik Widget

Memahami Tag Anchor

Anchor kalau diterjemahkan kedalam bahasa Indonesia (Prof. Drs. S. Wojowasito, Kamus Lengkap Inggris - Indonesia 1980:6) berarti jangkar; sauh. Entah apa hubungannya antara Tag Anchor pada bahasa HTML dengan Anchor dalam arti sebenarnya? Tetapi kalau ditelaah mengandung tujuan yang sama. Anchor dalam arti sebenarnya adalah jangkar, suatu alat yang digunakan untuk mengkaitkan kapal dipelabuhan atau sebagai alat pengait.

Begitupun anchor dalam bahasa HTML, digunakan untuk mengaitkan/link suatu dokumen/halaman terhadap dokumen/halaman lainnya^[1]. Jika suatu kata atau kalimat dalam sebuah halaman web memiliki keterkaitan/link dengan dokumen/halaman lain, maka browser akan menampilkan kata atau kalimat tersebut dengan format berbeda. Secara standar kata atau kalimat anchor (terkait dengan halaman lain) akan berwarna biru dengan garis bawah, hal ini sering pula disebut hyperteks link, hyperlink atau link saja.

Tag Anchor

Sesuai dengan standar bahasa HTML, anchor menggunakan tag <a> untuk membuat suatu link terhadap dokumen lain dalam web. Tag <a> digunakan untuk mendefinisikan suatu kata atau kalimat yang akan dikaitkan dengan halaman lain dalam web. Perhatikan contoh dibawah ini :

Hari minggu aku bertemu <a href="http://dedehendriono.blogspot.com">Hendriono</a>.

Kata Hendriono terletak diantara tag anchor, ini berarti kata Hendriono adalah kata yang dikaitkan dengan halaman lain atau dibuat sebagai anchor. Sedangkan href adalah atribut anchor yang digunakan sebagai referensi halaman yang dituju, halaman yang dituju terletak diantara tanda kutip "http://dedehendriono.blogspot.com".

Atribut href

Atribut href selalu digunakan bersama anchor, karena tag anchor tidak akan lengkap tanpa href. href atau hyperlink refference (ma'af ini tanpa sumber) mempunyai tiga jenis, yaitu :

1. Link Relatif

Jenis link relatif digunakan untuk membuat suatu link halaman yang akan dikaitkan dengan halaman lain dan halaman terkait masih dalam satu komputer. Jika dua halaman terdapat pada direktori yang sama maka tidak perlu menggunakan alamat internet yang lengkap. Cukup dengan menuliskan nama file html tersebut, seperti dibawah ini :

<a href="halaman_2.html">Halaman 2</a>

2. Link Absolute

Jenis Link Absolut digunakan untuk membuat link ke halaman lain yang berada di website lain di Internet. Maka alamat halaman tersebut harus ditulis lengkap, seperti dibawah ini :

<a href="http://dedehendriono.blogspot.com/wulan_guritno_xxx.html">Wulan Guritno tidak berpakaian</a> ketika sedang mandi.

3. Link dalam dokumen yang sama

Link ini digunakan jika halaman tersebut panjang dan ada kalimat yang akan dijelaskan kemudian pada paragraf berikutnya, maka penggunaan link internal page sangat membantu para pembaca. Pembaca tidak perlu mencari artikel mana yang terhubung dengan artikel yang sedang dibaca pada halaman yang sama. Pembaca cukup mengklik kata yang sedang dibaca untuk mengetahui maksud dan penjelasannya pada paragraf berikutnya.

Contoh penggunaan link dalam dokumen yang sama :

Paragraf 1

<a href="#johntitor">John Titor</a> menyebutkan bahwa paradoks itu SALAH. Sebab jika si A balik ke masa lalu ataupun maju ke masa depan, dia akan mendarat di DUNIA LAIN serupa tapi tak sama.

...
...
Paragraf 10

<a name="johntitor">John Titor</a> mengaku sebagai tentara Amrik dari tahun 2036. Dia menge-post foto mesin waktunya dan buku manualnya. John diperintahkan balik ke tahun 1970an untuk mengambil komputer kuno milik kakeknya (IBM 5100).

Perhatikan contoh diatas :

Yang diberikan tag anchor href adalah John Titor paragraf 1 dan ketika pembaca meng-klik John Titor pada paragraf 1, maka artikel akan bergeser ke paragraf 10 yang menjelaskan tentang siapa John Titor.

Target href

Secara default (standar) setiap kita membuat tag anchor href maka ketika pembaca meng-klik link tersebut halaman yang di tuju akan dibuka dan menutup halaman yang sedang dibaca. Kita bisa mengarahkan pembaca ketika mereka meng-klik link tersebut, halaman baru akan terbuka tanpa menutup halaman yang sedang dibaca. Hal seperti ini sering disebut Target Anchor Link, yang terdiri dari;

• target="_top"; dengan penambahan target="_top" pembaca akan diarahkan pada artikel yang dituju dengan membuka halaman baru dan posisinya diatas halaman yang sedang dibaca tanpa menutup halaman yang sedang dibaca.
• target="_blank"; dengan penambahan target="_blank" pembaca akan diarahkan pada artikel yang dituju dengan membuka halaman baru dan posisinya dibelakang halaman yang sedang dibaca tanpa menutup halaman yang sedang dibaca.

Mudah-mudahan artikel ini bermanfaat... Happy Blogging :)

Catatan Kaki:
[1] Wikipedia : HTML a tag

(X)HTML Basic