Info Guweh: Programming

Showing posts with label Programming. Show all posts

Wednesday, March 10, 2010

Cara Mendeteksi Mobile User Agents dan Browsers (bag 2)

Seperti janji saya pada akhir post sebelumnya tentang merangcang RSS FEED
untuk versi mobile phone, sekarang saya coba langsung membahas bagaimana cara
mendeteksi program yang kita buat apakah hanya dapat ditampilkan khusus untuk
versi mobile phone atau dapat juga dilihat pada standar dibrowser.

untuk memahami maksud artikel ini, sekarang coba rekan mengakses
m.o-om.net, sudah jelas ya
alamat ini masih leluasa dapat ditampilkan pada halaman standar browser pada
versi dekstop. Nah, untuk contoh lainnya sekarang saya minta rekan untuk mencoba
mengakses halaman kaskus versi mobile dialamat ini
m.kaskus.us apa yang
terjadi? ya, kita tidak bisa mengakases kaskus mobile langsung dari
browser dekstop, tapi kita langsung diredirect ke situs utamanya.

Sekarang yang jadi pertanyaan gimana programmer kaskus bisa membuat redirect
seperti itu? ternyata caranya tidak terlalu sulit, walaupun saya sendiri tidak
pernah melihat langsung script dari mobile kaskus paling tidak logika
progammingnya sama saja :)

Cara yang paling mudah yaitu menggunakan script PHP yang sudah disediakan
pihak ketiga, saya biasa menggunakan script dari
detectmobilebrowsers.mobi,
atau silakan download source codenya
disini.

Saya beri sedikit gambaran bahwa script ini mempunyai fungsi terdiri dari 8
pilihan parameter untuk membuatnya bekerja. jadi bisa dikatakan setiap 8
parameter menangani skenario yang berbeda pula. namun yang perlu diingat jangan
lupa untuk memanggil fungsi ini terlalebih dahulu agar semua fungsi pendukung
bisa berkerja dengan baik.

include ( 'mobile_device_detect.php'); $ mobile = mobile_device_detect ();

Jika rekan masih bingung untuk setting setiap paramater, sebenarnya ada yang
lebih mudah lagi dengan menggunakan fungsi generator yang juga sudah disediakan
oleh situs diatas. silahkan dicoba saja. oh iya, untuk scipt pilihan bahasa
program lainnya bisa langsung pelajari saja disitus ini
detectmobilebrowser.com

Sebenarnya sampai disini saja penjelasan diatas sudah bisa saya katakan
selesai, memang untuk kali ini rekan paling tidak harus sedikit mengerti tentang
PHP, jadi tidak terlalu sulit untuk menerapkannya.

Semoga artike ini bermanfaat :)

Monday, September 7, 2009

Pubwich: Source code untuk membuat situs online Aggregator

Dulu saya pernah menyampaikan layanan aggregator via Popurl.com, dimana layanan tersebut merupakan sindikasi berita dari beberapa blog popular / sosial bookmarking seperti Digg, Reddit, Del.icio.us, metafilter dan sebagainya. Dengan kata lain web site ini merupakan aggregator untuk link-link terpopuler pada website dan blog terkemuka.

Nah, yang menarik kali ini karena saya tidak memberikan informasi dari layanan aggregator yang sama, tapi bagaimana kita juga dapat membuat layanan serupa dengan menggunaan aplikasi gratis dari Pubwich. Pubwich merupakan aplikasi PHP open source yang memungkinkan kita untuk menampilkan data seperti layaknya layanan2 aggregator.

Layanan pubwich inilah menurut saya solusi sempurna untuk membuat aplikasi aggregator secara instan. Selain kemampuan untuk menampilkan isi dari setiap situs web melalui RSS / Atom feed, juga mendukung layanan web populer seperti:

Delicious
Facebook
Flickr
Last.fm
ReaderNaut
Twitter
Vimeo
Youtube

Silahkan download source code aplikasi pubwich langsung pada situsnya :)

Monday, March 30, 2009

Menata Ulang Syntax CSS Acak-acakan Via Styleneat

Betapa sulitnya mempelajari format style pada koding CSS yang susunannya tidak
beraturan, jangankan yang baru belajar, yang sudah mengerti sekalipun pasti
dibuat pusing untuk menganalisanya ulang. Tidak masalah bila struktur pengkodean
kita sendiri yang membuatnya, bayangkan saja bila itu buatan programmer lain,
belum lagi jika si programmer menggunakan
mode
style CSS terkompresi, pasti ribet
sekali khan jika harus mempelajari dengan menelusuri kodingya satu-persatu.

Nah, kali ini ada solusi termudah dimana rekan bisa dengan cepat
mengembalikan struktur style CSS yang sebelumnya acak2an menjadi lebih
teratur dan lebih tertata rapi. Saya sarankan coba saja gunakan layanan dari
Styleneat. Udah Basi Om!!
hehehe ya enggak lah, mana mungkin saya ngasih info layanan terbaru kalo tidak
terlebih dahulu masuk best review diluar sana, yang jelas layanan ini benar2
baru di launching tahun 2009 ini :)

Contoh susunan CSS yang tidak beraturan:

#id1 { property: value; }
#id1 .class1 { property: value; }
#id1 .class1 a { property: value; property2: value2; property3: value3; }
#id1 .class1 a span { property: value; property2: value2; }
#id2 { property: value; }
#id2 .class { property: value; }

Contoh susunan CSS yang teratur dan tertata rapi:

#id1 { property: value; }
 
  #id1 .class1 { property: value; }
 
    #id1 .class1 a {
       property: value;
       property2: value2;
       property3: value3; }
 
       #id1 .class1 a span {
          property: value;
          property2: value2; }
 
#id2 { property: value; }
 
  #id2 .class { property: value; }

Jujur saja, sebenarnya banyak juga programmer yang kadang malas mengatur tata
letak dari selector, value dan property pada CSS Syntax ini, masalahnya
kebanyakan si programmer merasa kode tersebut dia sendiri yang menyusunnya, jadi
mau diedit kapanpun juga dia merasa tetap mengerti alurnya. Saya sendiri
sebenarnya termasuk yang malas juga mengatur struktur pengkodean ini, padahal
bila ditata dengan rapi untuk kedepannya pasti lebih mudah untuk mempelajarinya
kembali, yang jelas ini memudahkan kita mengingat antara satu kode dengan lainya
yang saling berhubungan. Silhakan dicoba dan dipelajari sendiri ok :)

Friday, January 9, 2009

Belajar CSS Font Size Property

Mengatur ukuran font-size menggunakan style pada CSS tidakah semudah yang
anda bayangkan. Kadang memang diperlukan pemahaman lebih agar bisa memahami
properti pada font-size ini. Pada kenyataanya, tidak semua format yang digunakan
juga bisa sesuai pada sebagian Web Browser. Saat ini saja ada sekitar 5 unit besaran
font-size yang saya kenal yaitu px (pixel), em (em), % (persent), pc (pica) dan
pt (point) atau ada juga pilihan standar lainnya yang dapat anda gunakan diantaranya
xx-large, x-large, larger, large, medium, small, smaller, x-small,
xx-small dan length.

Secara default web browser kebanyakan menggunakan 16px untuk standar
font-size, tapi tidak semua font-size dengan ukuran 16px sesuai dengan keinginen
web developer. Sebagai contoh, bila anda menggunakan ukuran % misalkan 20%
berarti anda menampilkan font standar menjadi lebih kecil 20% dari ukuran
standar. berbeda dengan satuan em, jika anda semisalkan membuat font-size .3em
berarti ukuran font yang ditampilkan akan berukuran 3 kali lebih besar dari font
standarnya.

Contoh penerapan Font-Size pada CSS:

body

{

font-size: x-large

}

p

{

font-size: 10px

}

Contoh Penerapan lainnya:

Absolute size

<p style="font-size : x-large;">

This paragraph is extra large.

</p>

Relative size

<p style="font-size : smaller;">

This paragraph is smaller than the base font size.

</p>

Length

<p style="font-size : 1.5em;">

This paragraph is 1.5 ems.

</p>

Sebenarnya penjelasan kali ini bisa lebih mudah dimengerti jika anda
mengunakan tools konversi untuk mempermudah anda memahaminya. Salah satu tools
yang sering saya gunakan yaitu dari layanan
PXtoEM. Dari namanya saja sudah
jelas ini merupakan layanan conversion dimana anda anda dapat melakukan konversi
PX to EM atau kebalikannya EM to PX.

Dengan layanan ini kita dapat memilih nilai font-size yang ada dalam tabel,
nilai konversi yang digunakan menggunakan 16px sesuai standar default browser.
Saat anda memilih , saat itu juga anda akan menemukan hasil konversi di tabel
sebelahnya.

Untuk mendapatkan hasil yang benar2 siap digunakan dalam bentuk kode CSS
sesuai nilai konversi pilihan anda, silahkan menuju button Get CSS..jadi lebih
mudah ya :)

Rumus yang digunakan PXtoEM juga bisa anda pelajari:

PX to EM: text size in pixels / body text size in pixels = size in
EMs

o Example: 12px / 16px = .75em

PX to %: text size in pixels / body text size in pixels * 100 = size in %

o Example: 12px / 16px * 100 = 75%

PX to PT: text size in pixels * points per inch / pixels per inch = size
in pt

o Example: 16px * 72 (72 points = 1 inch) / 96 (96 pixels per inch in Windows,
72 in Mac) = 12pt

EM to PX: text size in EMs * body text size in pixels = size in
pixels

o Example: .75em * 16px = 12px

EM to %: text size in EMs * 100 = size in %

o Example: .75em * 100 = 75%

% to PX: text size in % * body text size in pixels / 100 = size in pixels

o Example: 75 * 16px / 100 = 12px

% to EM: text size in % / 100 = size in EMs

o Example: 75 / 100 = .75em

PT to PX: text size in pt * pixels per inch / points per inch = text
size in pixels

o Example: 12pt * 96ppi / 72ppi = 16px

Saya mengakui tulisan kali ini jauh dari sempurna, semoga tulisan singkat ini bisa berguna aja ya :)

Sunday, December 28, 2008

Pixastic: Open Source Online Image Editor (Javascript Library)

Anda yang memiliki skill web programming dan berminat
membangun sendiri Free Online Image Editor berbasis Javascript, saya
sarankan wajib mengunjungi layanan
Pixastic. Pilihan pada
Pixastic (versi Beta) ini selain karena Full Open Source dan
dukunganya pada Javascript based, tentu saja saya melihatnya dari segi
kelengkapan komponen pendukung olah gambar yang terbilang sangat lengkap. Bahkan
sangat Powerfull untuk membangun sebuah aplikasi profesional sebagai penyedia
jasa olah gambar via Online. Untuk mencoba sample aplikasi yang dibangun
menggunakan Pixastic Javascript Library silakan klik
Editor.pixastic.com

Sekilas tentang Pixastic

Pixastic merupakan Javascript Library yang
kembangkan oleh Jacob Seidelin dimana ia telah memutuskan untuk melepas
semua kode (istilah Open Source) kedalam sekumpulan library dibawah lisensi MIT.
Dengan memanfaatkan berbagai dari teknik yang sama yang digunakan oleh berbagai
aplikasi untuk memanipulasi gambar, pixastic bekerja dengan memanfaatkan elemen
HTML5 canvas yang saat ini hanya didukung sepenuhnya oleh Web Browser Firefox,
Opera dan Safari.

Kunjungi saja Pixastic untuk informasi selengkapnya pada
dukungukan browser dan filter yang tersedia. Terdapat juga berbagai potongan kode
yang menunjukkan bagaimana anda menggunakan Pixastic dengan jQuery.

Download
Pixastic |
Dokumentasi Selengkapnya

News In 10 Seconds: Jangan lupa untuk mengujungi Komunitas Pemerhati Desa
Santan Kalimantan Timur Indonesia di
ainuddin.web.id

Thursday, December 25, 2008

MyCSSMenu: Online CSS Menu Generator

Wow kren!! ini kesan pertama setelah saya mencoba layanan
Online MyCSSMenu,
bagaimana tidak, hanya dalam waktu sekitar 15 menit saya sudah bisa mendesain
menu yang ciamik sesuai keinginan saya. Sangat berbeda dengan layanan

StyledMenus yang siap pakai yang pernah saya bahas sebelumnya. Dengan
MyCSSmenu anda tidak perlu menguasai tehnik programming HTML dan CSS yang
rumit, cukup ikuti saja petunjuknya. Selain itu anda diberikan kemudahan untuk
mementukan beberapa jenis pilihan menu, bisa menu vertikal dan horizontal dan
beberapa pilihan menu lainnya. Jika menu yang ada pilih sudah sesuai tinggal
klik tombol saja "Customize Menu" untuk mengeditnya. Simple yah :)

Mungkin anda berpikir layanan CSS Menu Generator
sejenis ini kan banyak bertebaran? Yups benar, tapi saya berani mengatakan
aplikasi MyCSSmenu yang baru di lounching tahun 2008 ini sangat berbeda
dan layak untuk dicoba. Bila anda masih belum puas dengan CSS menu generator versi
online ini, saya sarankan juga mencoba CSS menu generator versi Dekstop
(Offline) yang pernah dibahas sahabat saya

kang Rohman di sini. Selamat mencoba :)

Monday, December 22, 2008

CodedPreview: Solusi Page Previews untuk Design Templates

Cukup satu baris kalimat untuk mendeskripsikan layanan
CodedPreviews "The first dedicated service for creating preview pages for
your design templates!", Kalimat yang menerangkan "layanan pertama yang
didedikasikan untuk menciptakan halaman preview untuk desain template anda",
CodedPreviews
merupakan solusi yang baik untuk mempermudah webmaster menampilkan hasil
desainnya tanpa harus upload gambar berukuran besar secara manual. Benar-benar
sangat efektif untuk solusi biaya murah dan tanpa harus membebani kapasitas
hosting.

Sebagai programmer, pemilik layanan ini (Mr. Seb Silas)
mengatakan, dia menciptakan layanan ini karena sudah merasa kesal dengan proses upload gambar secara manual melalui FTP hanya untuk menunjukan page preview berupa
srceenshot desain template kepada pembacanya. Wow..om setuju sekali dengan pemikiran ini..jujur saja, proses upload file gambar yang besar cuma buang2 waktu saja :)

Sekali lagi, layanan Coded Previews ini sangat cocok
untuk menghindari sekaligus mengalihkan kapasitas simpan gambar pada hosting
anda. Nah, untuk anda pengguna platform blogger boleh2 saja mencobanya, yang jelas aplikasi ini sepertinya tidak begitu banyak berpengaruh, jadi abaikan saja hehehe

Sunday, October 19, 2008

Pasang Stripe-Ad ala Navbar Blogger

Boost Your Blog's Response Rate With "Stripe Ad"

Menayangkan iklan bergaya Stripe-Ad tentu lebih baik dari pada
menayangkan iklan dalam bentuk Popup Ad (Pop-ups, pop-overs and pop-unders),
Selain dapat menghindari Popup Blocker, memasang Stripe-Ad terasa sangat pas untuk
menampilkan satu focus informasi yang dirasa penting (bisa berupa iklan baris,
pengumuman, Feed atau informasi apa saja sesuai kebutuhan).

Jika anda melihat contoh Stripe-Ad diatas pada blog ini, sekilas
terlihat hampir serupa dengan standar Navigation Bar (Navbar) Blogger.
Pengunjungpun dapat melihat langsung batang navigasi ini ketika pertama kali
mereka mengunjungi halaman blog anda. Iklan ini akan tetap tampil walaupun
pembaca melakukan Mouse Scroll pada halaman. Jika tertarik kemungkinan
besar pembaca akan mengkliknya, jika dirasa mengganggu mereka dapat dengan mudah
menutupnya dengan mengklik tombol X pada pojok kanan atas.

Stripe-Ad tentu saja bukan hal yang baru. Pengguna Wordpress biasanya
menggunakan plugin Strip-Ad buatan

MaxBlogPress cara installasinya pun terbilang mudah dan sudah ditulis dengan
lengkap caranya, silahkan pelajari sendiri disitusnya ya :)

Cara Pasang Strip-Ad di Blogger:

1. Upload File javascript dibawah ke lokasi penyimpanan file anda, Simpan file dengan nama
Stript-ad.js

2. Tuju kehalaman Edit HTML di blogger.

Copi-Paste kode CSS dibawah, letakan diatas kode
]]></b:skin>

#mta_bar { background: #FFFFE1; border-bottom: 1px
solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0;
width: 100%; overflow: auto; position: fixed; }

* html #mta_bar{ /*IE6 hack*/

position: absolute; width: expression(document.compatMode=="CSS1Compat"?
document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }

#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size:
13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}

#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right;
text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0;
width: 30px; white-space: nowrap;}

#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}

#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration:
none;}

#left_bar a { text-decoration: none; color: #0000FF; }

#left_bar a:hover { text-decoration: underline; color: #0000FF; }

3. Masukan kode pemanggilan JS dibawah, letakan diatas kode
</head>, jangan lupa
sesuaikan dengan alamat lokasi URL dimana anda meyimpan file JS-nya.

4. Letakan kode dibawah ini dibawah kode <body>,
Silahkan sesuaikan setingan dibawah dengan link dan deskripsi anda
sendiri.

<div id='mta_bar'>

<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/ooms-logs'
target='_blank'>Kurang lebih 3200 pembaca Rss Feed
sudah bergabung, Sudahkah anda?</a></span></div>

<span class='right' onmouseout='self.status=''' onmouseover='self.status='o-om.com.com';return
true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;'
src='http://http://www.alamatserveranda.com/close.gif'
style='cursor:hand;cursor:pointer;'/></span></div>

5. Simpan hasil kerja anda :)

Selamat Mencoba..happy blogging with o-om.com

Thursday, October 9, 2008

Menampilkan Syntax Highlighter (Javascript based)

SyntaxHighlighter merupakan cara mudah untuk menampilkan penggalan kode
pos-line agar terlihat lebih menarik. Dengan menambahkan Syntax Highlighter,
pembaca akan lebih mudah memahami setiap syntax baris kode yang anda tampilkan
sebagaimana bahasa program aslinya. Syntax Highlight ini menggunakan 100% JavaScript based, jadi anda bisa
menampilkannya pada platform (blog/site) apa saja, termasuk blogger tentunya.

SyntaxHighlighter menggunakan ekspresi reguler untuk parse teks. Jadi jika
anda hanya mencoba untuk menyorot beberapa puluhan baris kode, mungkin tidak ada
masalah. Tapi jika anda mencoba untuk menyorot 10kb lebih nilai teks,
kemungkinan akan ada masalah karena lamanya waktu dalam proses eksekusi.

Bahasa Program yang didukung:

Language	Aliases
C++	`cpp`, `c`, `c++`
C#	`c#`, `c-sharp`, `csharp`
CSS	`css`
Delphi	`delphi`, `pascal`
Java	`java`
Java Script	`js`, `jscript`, `javascript`
PHP	`php`
Python	`py`, `python`
Ruby	`rb`, `ruby`, `rails`, `ror`
Sql	`sql`
VB	`vb`, `vb.net`
XML/HTML	`xml`, `html`, `xhtml`, `xslt`

Cara mengguakan

S yntax
highlighter pada blogger.

1. Silahkan anda

download dulu semua filenya.

2. Extrack file SyntaxHighlighter_1.5.1.rar

3. Upload semua file Java Srcipt (pada folder Scripts) ke server milik anda,
pages.google.com misalkan.

4. Letakan kode ini di bawah kode <head>

5. Kemudian letakan ini diatas kode </body>

6. Simpan sebelumnya hasil kerja anda

Cara mengaktifkan kode pada halaman Post Editor

Letakkan kode anda pada halaman ditandai dengan tag
<pre>. Kemudian menetapkan nama atribut untuk kode kelas dan
atribut ke salah satu bahasa alias yang ingin Anda gunakan. (lihat tabel alias
untuk type class)

<pre name="code" class="c-sharp">
... some code here ...
</pre>

Alternatif untuk <pre> adalah dengan menggunakan
tag <textarea>. Tidak ada masalah dengan
< karakter dalam kasus ini. Masalah utamanya adalah
<pre> tidak dapat bekerja dengan baik jika tag
JavaScript tetap digunakan untuk beberapa alasan (di RSS feed misalnya)

<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>

Maaf saya tidak menyertakan contoh nyata dalam tutorial ini, namun anda
jangan kuatir, ini sudah saya uji coba dan 100% berhasil.

Pelajari kode selengkapnya di alamat ini

http://code.google.com/p/syntaxhighlighter/

Thursday, August 21, 2008

Pengenalan Blogger data API - Client Applications

Artikel kali ini mengenalkan pada pembaca
yang memiliki basic programming untuk mempelajari Blogger Data API dan
memanfaatkannya sebagai Blogger Client Applications. Dimana selanjutnya
seorang programmer mampu merancang sendiri

Tools Blogger Edittor pada Aplikasi Desktop, Browser Plug-in, bahkan
mampu merancang sendiri Aplikasi Blog Aggregator. Sebagai contoh anda tentu pernah menggunakan salah satu
tools aplikasi dekstop maupun pada layanan online,
dengan tools tersebut kita dapat mengedit, menghapus, dan memperbaharui conten blog
tanpa harus login langsung pada engine sebenarnya. Disini saya yakin anda sudah
memiliki gambaran bagaimana blog editor tersebut bekerja,
tools inilah yang saya maksud nantinya sebagai salah satu contoh Blogger Client Applications.

Mempelajari Blogger Data API berarti kita (programmer)
sebagai pihak pengembang diberi kuasa untuk memanfaatkannya. Sebelum
mempelajarinya perlu di ketahui Blogger data API merupakan
bagian dari salah satu service Google data APIs (Gdata). Gdata ini menggunakan
dua format standar XML-based yaitu ATOM dan RSS. Gdata inilah yang merupakan
simple standard protocol yang digunakan untuk mempermudah proses baca dan tulis
data di web. Untuk mengenal lebih lanjut mengenai Gdata bisa anda baca di alamat
ini:

http://code.google.com/apis/gdata/overview.html

Pengenalan Bogger data Api?

Blogger data api membolehkan pihak ketiga (pengembang) untuk menampilkan dan update terhadap
isi content blogger melalui proses pengambilan data melalui Google Data API
feeds. kita dapat mengedit isi postingan, menghapus dan memperbaharuinya, tidak
sampai disitu kita juga dapat mengirim dan menghapus komentar yang telah
diterbitkan sebelumnya.

Untuk pengenalan dasar mengenai blogger data API ada 3
langkah untuk mulai mempelajarinya, pertama pelajari dulu
Google
data APIs, lanjutkan kelangkah berikutnya mengenai Blogger data API

Developer's Guide atau anda bisa membaca pedoman selanjutnya disini

Reference Guide jika memang diperlukan selengkapnya bisa baca sini

http://code.google.com/apis/blogger/

Pemrograman

Ada beberapa cara yang bisa ditempuh untuk membuat aplikasi client,
jika anda berada pada halaman

Developer's Guide: Protocol disitu sudah lengkap dijelaskan bahasa
program yang dapat anda gunakan, sampai saat ini ada lima standar dukungan
bahasa program yang bisa anda pelajari, diantaranya :

.NET

Java

JavaScript

Python

Jika anda menanyakan mana yang lebih mudah maka akan saya
jawab semuanya sulit, yang membuatnya mudah ditentukan sesuai dengan basic
programing anda masing-masing. Jika saya harus memilih tentu pilihan akan jatuh
ke .Net dan Javasript karena saya cuma ngerti dibahasa program ini
saja. Satu pilihan yang paling disarankan, sebaiknya anda memilih Javascript
saja, karena disitu sudah disertakan tutorial beserta sample code dan hasil
output-nya tentu anda langsung bisa mencobanya. selengkapnya bisa anda lihat

disini

Standard Authentication (bukti
keaslian)

Standar Authentication merupakan sebuah protocol yang
memungkinkan user untuk melakukan Authentication (pembuktian keaslian),
Authorize (otoritas/pemberian hak) untuk para pengguna atau user yang ingin
mengakses suatu sistem atau layanan dari pusat server jaringan komputer.
Authentication ini juga dibutuhkan
pada saat kita ingin melakukan akses pada jaringan Blogger (Google)
yaitu dengan cara memasukan username dan password.
Pada Authentication ke
Servies Blogger kita dapat mengakses Blogger dengan dua cara yaitu menggunakan
hak Private dan Public Feeds. Biasanya public feeds tidak mengharuskan kita
menggunakan Authentication, berbeda
dengan Private Feeds yang mengharuskan kita melakukan Authentication terlebih
dahulu.

Sample Aplikasi

Menggunakan Visual Basic.Net

Untuk memudahkan anda mengerti cara kerja Blogger data API
dibawah ini saya sertakan source code menggunakan VB.Net. Tools ini pernah saya
ulas akhir 2007 yang lalu, dengan tools ini anda akan memahami bagaimana
melakukan backup blogger menggunakan akses Gdata memalui Feeds
Blogger Backup
Utility (VB.Net open source)

Menggunakan JavaScript Client Library

Blog.Gear sebenarnya merupakan salah satu proyek dari
Google Gear dimana
layanan ini rencananya digunakan untuk mengakses aplikasi Blogger pada modus
Offline. Namum anda bisa mencoba untuk mempelajari penerapannya menggunakan
Blogger Data API. Anda juga bisa mempelajari source codenya

disini, untuk videonya bisa anda simak

disini.

Tulisan ini hanya pengenalan dasar dan tentu saja masih jauh
dari sempurna. Semoga bermanfaat :)

Penulis : Agus Ramadhani (o-om.com)

Friday, January 18, 2008

Cara menampilkan posting yang berkaitan (Related Posts)

Related Posts atau biasa disebut "link yang bekaitan", "artikel pada
kategori yang sama", "artikel yang bertautan", "postingan terkait" atau apa aja
namanya, merupakan bagian judul posting terkait dan biasanya ditampilkan
berdasarkan penamaan label (kategori), Realated Post ini biasanya
berupa link yang tampilkan dibawah postingan tunggal tepatnya di bawah kolom
komentar. Keuntungan dengan pemasangan post yang berkaitan tentu saja akan
mempermudah pengunjung blog kita untuk menemukan artikel terkait tanpa harus
menuju dan membuka satu persatu halaman dalam link label. Agar gak bingung lihat gambar
dibawah ini:

Kayaknya gak usah dibahas panjang lebar ya, pasti rekan semua dah ngerti maksudnya. OK langsung aja ke proses pemasangan :)

Langkah I:

Masuk pada Template -> Edit HTML -> kemudian masukan kode javascript dibawah ini diantara kode
<head>..</head> atau lebih
mudahnya cari kode </head> saja, kemudian
letakan kodenya diatas kode </head> ->
jangan lupa disimpan

Langkah II:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda
centang pada Expand Widget Template -> cari kode dibawah ini.

Jika sudah ketemu, masukan kode berwarna merah dibawah diantara kode diatas.

     <b:if cond='data:post.labels'>

          <data:postLabelsLabel/>

          <b:loop values='data:post.labels'
var='label'>

            <a expr:href='data:label.url'
rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>

<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"'
type='text/javascript'/>

</b:if>

          </b:loop>

        </b:if>

Pada proses ini pengeditan pada kode HTML sudah selesai, Jangan lupa disimpan

Langkah III:

Masuk pada Template -> Elemen halaman -> kemudian buat elemet
baru atau klik "Tambahkan sebuah Elemen Halaman" -> copy-paste kode
dibawah ini dan jangan lupa memberikan nama judul misal, "Artikel pada kategori
yang sama" -> kemudian jangan lupa disimpan.

Langkah IV:

Agar related post ini tidak tampil pada halaman utama dan hanya tampil
pada halaman posting tunggal maka kita perlu penambahan beberapa kode, caranya:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda
centang pada Expand Widget Template -> cari kode dibawah ini, sebisanya
cari sesuai dengan title yang kita masukan, sebagai contoh, tadi saya memberi
mana dengan Artikel pada kategori yang sama,
jika sudah ditemukan masukan ke dua kode berwarna merah dibawah.

Catatan: dibawah ini ada kode HTML13 ini jangan
dijadikan patokan pencarian, sebaiknya abaikan saja karena setiap elemen pasti
berbeda-beda, cukup cari title saja.

<b:widget id='HTML13'
locked='false' title='Artikel pada kategori yang
sama' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>



<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Selamat mencoba, Happy Blogging :)

Sunday, January 13, 2008

New! Tips of the day : Tips harian tampil berdasarkan tanggal

Tips of the day merupakan tips singkat yang akan
disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa
berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips
bercinta dan lain sebagainya. (Banyak rekan sahabat blogger yang
sudah memasang
tips of
the day dengan code yang pertama..sudahkah anda...?)

Tutorial sebelumnya sudah kita pelajari bagaimana membuat
Random
tips of the day dimana tips tersebut akan tampil secara acak ketika
pengunjung melakukan refresh atau reload pada halaman, yang membedakan tips
of the day sekarang dengan sebelumnya kali ini kita benar-benar membuat
tips of the day yang dapat tampil berdasarkan tanggal hari ini, jadi selama
31 hari pengunjung akan menerima tips yang berbeda dalam jangka waktu satu
hari selama 1 x 24 jam. Sedikit saya beri masukan, sebenarnya tips ini tidak
hanya digunakan sebagai tips harian, rekan sebenarnya bisa menggunakan tips ini
misalnya, sebagai jadwal pengingat (alarm harian) jika pada tanggal tertentu
merupakan tanggal yang dirasa penting.

Cara memasang kode Tips of the day pada blogger :

Pada halaman Template -> klik Tambahkan sebuah
Elemen Halaman -> Copy-Paste semua kode dibawa ini.

<SCRIPT>

writeTip();

</SCRIPT>

Catatan : Jangan lupa mengganti dengan memasukan 31 tips pada code warna
merah diatas.

Selamat mencoba, Happy Blogging :)

Thursday, January 10, 2008

Manajemen Iklan: Random Banner Pada Satu Area

Ada sesuatu yang lucu jika ingat minggu lalu ketika sahabat karib (bukan blogger) menanyakan
kepada saya bagaimana menampilkan iklan secara acak (Random banner) dalam
satu area. Pertama kali ditanyakan hal ini saya juga kebingungan mau jawab apa,
wong blog ini gak pernah ada iklan-nya apalagi mengelola pemasang iklan. Setelah
lama bercuap-cuap sahabat saya langsung nyeletuk "katanya blogger mania masa
buat koding untuk iklan aja gak bisa" Gubraaakkkk, gila.. nantang bener nih
orang. saya balas bertanya "kalo om bisa dikasih apa??" teman saya menjawab
"saya
traktir makan di cak koting (tempat makan terkenal di yogya)" OK, kasih om waktu
satu hari, kemudian kami pun bersalaman tanda sepakat. (akhirnya..om ditraktir makan hehehe)

Back ke laptop....sebenarnya membuat Iklan (Banner) satu tampilan
dalam satu area tidak terlalu sulit, kita hanya tinggal mengarahkan saja ke
lokasi gambar, namun yang jadi masalah bagaimana jika kita mempunyai 10 pemasang
iklan yang ingin ditampilkan dalam satu lokasi area, ini yang munkin menjadi
kendala utama pengelola iklan. Perlu diketahui bahwa banner yang kita buat nanti hanya
pada Image Banner bukan sebagai Text Banner, iklan ini akan tampil secara
acak jika pengunjung melakukan reload atau refresh pada halaman. Lihat Random
Banner dengan iklan Dmoz dibawah sebagai contoh:

Contoh kode Dengan Javascript :

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT>

Penjelasan:

Jika ingin menambah jumlah iklan tinggal menambahkan saja code script-nya,
contoh diatas kita mempunyai 3 jumlah iklan yang ditampilkan, jika rencana
menambah 1 iklan lagi jangan lupa juga menambahkan nilai baru dengan 4,
begitupun seterusnya. Lihat contoh kode dibawah:

if (pasang_iklan==4)
{

txt="Tulis Title";

url="Alamat URL";

alt="Alamat URL";

banner="Alamat URL Gambar";

width="468";

height="60";

}

Ups hampir lupa, jangan lupa menambah total jumlah iklan yang ditampilkan,
Contoh: var jumlah_iklan = 4;

Selamat Mencoba, Happy Blogging :)

ADA YANG MAU PASANG IKLAN DI BLOG INI ?? bisa hubungi saya via email:
oom [at] o-om [dot] com

Friday, January 4, 2008

Random Photo tanpa reload page (Slideshow)

Informasi : Code ini
tidak suport pada blogger sebaiknya jangan digunakan, thanks

Pada artikel sebelumnya sudah saya jelaskan bagaimana cara membuat

Random Banner Pada Satu Area dimana kita dapat menampilkan
gambar banner secara random (acak) pada area yang sama, sayangnya untuk
menampilkan gambar dengan cara ini kita harus melakukan reload page atau
refresh page, kali ini kita akan membuat kode javascript untuk menampilkan
gambar "Random Photo tanpa reload page (Slideshow)" yang berarti
kita akan menampilkan gambar pada satu area tanpa perlu melakukan reload page sama sekali.

Mungkin rekan akan bertanya apa hubungannya "Random Photo
tanpa reload page (Slideshow)" dengan "Manajemen
iklan : Random Banner Pada satu Area" kesamaan yang tampak tentu saja kedua
cara ini sama-sama untuk menampilkan gambar secara Random, yang membedakan
hanyalah kegunaan saja, bisa untuk
manampilkan Photo, Banner atau apalah terserah mau di pasang gambar apa saja :)

Contoh Penggunaan Kode:

Kode I:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var mfBanners = [

['Alamat URL', 'Alamat
URL Gambar'],

['Alamat URL', 'Alamat
URL Gambar''],

['Alamat URL', 'Alamat
URL Gambar''],

['Alamat URL', 'Alamat
URL Gambar''],

['Alamat URL', 'Alamat
URL Gambar'']];

Kode II

Penjelasan

['Alamat
URL', 'Alamat URL
Gambar''], ->>
Untuk menambah gambar yang ditampilkan kita tinggal menambahkan saja
alamatnya

5000 -->> ini merupakan durasi
tampilan gambar yang berarti gambar akan berubah setelah 5 detik berikutnya.

Selamat Mencoba, Happy Blogging :)

Cara pasang photo Author di setiap komentar

"Tanya om, Gimana pasang photo Author pada setiap komentar kaya punya mas oom?"

Ada beberapa email yang masuk dan menanyakan hal yang sama seperti diatas,
yaitu bagaimana memasang photo Author pada setiap komentar? untuk menjawab
pertanyaan yang sama saya post disini saja. Sedikit penjelasan, blogger
sebenarnya juga menampilkan photo Author pada setiap komentar, namum photo yang
ditampilkan bukan pada halaman komentar yang tepatnya dibawah posting, melainkan
menampilkan pada kolom komentar terpisah.

Sebagai contoh kita bisa melihat pada pengguna wordpress dimana kita dapat
melihat photo siapa saya yang memberikan komentar. Masih bingung? coba buka
halaman posting milik saya disitu pasti rekan bisa melihat photo yang telah
memberikan komentar, namum photo ini hanya tampil jika pemberi komentar dalam
modus login saja, jika tidak maka yang tampil hanya gambar kosong atau tanda
tanya seperti milik saya. Coba lihat gambar dibawah:

Langkah pasang kode (script) pada blogger:

Pertama:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang
pada Expand Template Widget

Cari kode dibawah ini (cari yang warna hijau, bukan warna
merah), jika sudah
ketemu, kemudian masukan kedua kode warna merah
dibawah ini diantara kode warna hijau.

Penjelasan:

Kode float:right; berati kita memasang
photo sebelah kanan, jika ingin meletakan photo pada sebelah kiri tinggal ganti
saja dengan float:left;

Kedua:

Tetap pada halaman Template -> Edit HTML -> jangan lupa beri tanda
centang pada Expand Template Widget

Tinggal Copy/Paste lalu masukan kode javascript dibawah ini, agar gak bingung
cari code </head> kemudian paste kode scriptnya diatas kode </head>.

Penjelasan:

BloggerProfiles.noimage = 'http://oom.blog.googlepages.com/nopoto.gif';

Kode ini merupakan gambar/photo default yang akan tampil jika pemberi
komentar tidak dalam modus login

BloggerProfiles.imageWidth = 30;

BloggerProfiles.imageHeight = 30;

Kode ini merupakan ukuran photo yang ditampilan, contoh diatas berarti
ukurannya 30x30, kalian bisa mengubah
ukuran sesuai selera misalnya dengan ukuran 50 agar gambar tampil lebih lebar.

Selamat Mencoba, Happy Blogging :)

Tuesday, December 25, 2007

Anti Mail Spider/Grabber (Proteksi alamat email)

Banyak cara yang bisa kita lakukan menghindari mail spider atau mail
grabber sebagai proteksi alamat mail pada halaman web/blog, salah satunya
mengganti tanda @ dengan [at] atau tanda titik dengan [dot] namun cara ini tidak
terlalu menjamin email kita bakal aman dari spider mail grabber. Kenapa menurut saya tidak aman? mungkin tulisan dibawah ini bisa sedikit memberikan sedikit jawaban tentang pemahaman cara Spider Mail bekerja.

Lihat contoh proteksi alamat email yang banyak digunakan:

namaemail[at]domain[dot]com

namaemail@domain[dot]com

namaemail[at]domain.com

Biasanya progammer mail grabber akan mencari kata "mailto:" kemudian
diikuti pencarian tanda @ dan titik sebagai penanda alamat mail pada halaman
web, mencarian bermula dari kata pertama sebelum tanda @ kemudian mencari tanda
titik setelah tanda @, jika tanda @ dan titik sudah ditemukan tinggal mencari 3
- 4 huruf untuk nama domain setelah tanda titik (yang harus diingat format mail
tidak pernah menggunakan spasi). Sekarang yang menjadi pertanyaan, bagaimana
jika programmer menambahkan algoritma pencarian untuk tanda ini [at] - [dot], at
- dot, @ - dot, at - titik, yang jelas cara diatas tidak menjamin alamat email
kita aman. Namun jika tetap berkeras menggunakan cara diatas, solusi dari saya
cukup tambahkan saja spasi untuk menghindari mail spider ( contoh namaemail [at]
domain [dot] com )

Sebenarnya ada cara proteksi email yang lebih baik dari cara diatas dimana
spider mail tidak mampu melacak dengan baik, selain anti spider cara ini
tetap menampilkan tanda @ dan titik pada alamat mail yang ingin di tampilkan
pada halaman web/blog:

<SCRIPT LANGUAGE="JavaScript">







</SCRIPT>

Cara menggunakan kode javascript diatas cukup ganti kode warna
merah dengan alamat email
milik kita sendiri.

Contoh tampilan mail bisa dilihat pada sebelah kanan profile, lihat gambar
dibawah:

Catatan: Cara proteksi alamat email dengan javascript tidak akan
berfungsi dengan baik jika kita melakukan disable javasript pada web browser

Sunday, December 16, 2007

Cara menampilkan judul posting tanpa isi (halaman) posting

Ketika melakukan pencarian atau membuka isi label (kategory) di blog saya
pasti akan melihat hasil tampilan berupa link judul
posting beserta tanggal tanpa menampilkan isi posting sama sekali, tentu
saja dengan cara ini sangat menguntungkan dan mempermudah mengunjung ketika berselancar di blog
kita, coba bayangkan ketika pengunjung membuka label atau kategory yang isinya
ada 100 posting, tentu hal ini menjadi masalah nantinya dan membutuhkan waktu
yang lama sampai halaman benar-benar terbuka sempurna.

Untuk mengatasi masalah diatas ada baiknya kita hanya
menampilkan judul posting beserta tanggal posting saja, selain mempermudah,
tentu saja loading page kita akan 50x lebih cepat dari biasanya ketika membuka
halaman label.

Lihat contoh gambar yang hanya menampilkan judul posting dan tanggal:

Pengen tau cara buatnya ikuti langkah dibawah ini:

Pertama :

Buka Template -> Edit HTML -> Jangan lupa lakukan backup
template :) -> kemudian beri tanda cek pada 'Expand
Widget Templates'

Kedua :

Lihat kode dibawah ini:

 <!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>

Kemudian cari kode warna merah diatas, jika sudah ketemu ganti kode warna
merah diatas dengan kode dibawah ini :

 <b:if cond='data:blog.homepageUrl !=
                data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
         <data:post.title/></a><br/><br/>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>
 <b:else/>
     <b:include data='post' name='post'/>
 </b:if>

Ketiga :

Jangan lupa disimpan dan lihat hasilnya. selamat mencoba :)

Cara menampilkan semua judul posting

Blogger sebenarnya mempunyai URL default untuk menampilkan semua posting
maupun hanya posting dalam jumlah tertentu, Contoh URL default yang
digunakan biasanya ditandai dengan code seperti ini http://{namablog.blogspot.com}/search?max-results={jumlah
posting} Namun
penggunaan code ini sangat jarang saya temui d gunakan para sahabat
blogger, mungkin alasan kurang efektif membuat blogger enggan untuk memasangnya.
Pada tutorial sebelumnya saya juga pernah menyampaikan

Cara buat daftar tabel seluruh posting (Show Table of Contents) namun cara
ini juga saya akui kurang efektif karena load scriptnya cukup memakan waktu.

Sebagai contoh klik Link ini :
Lihat semua daftar posting
»»

Untuk mengoptimalkan penggunaan code http://{namablog.blogspot.com}/search?max-results={jumlah
posting} saya tetap menyarankan kita tetap harus merubah Script/Html
standar blogger, lihat disini

Cara menampilkan judul posting tanpa isi (halaman) posting hal ini bertujuan
agar halaman posting yang ditampilkan nantinya bisa lebih singkat dan loading
page akan semakin cepat ketika membuka semua judul posting.

Untuk memasang kode ke blogger ada dua cara yang bisa kita gunakan (pilih
salah satu ya):

Cara Pertama:

Masuk ke Template -> Elemen Halaman -> Tambahkan
sebuah Elemen Halaman -> kemudian pilih "Daftar Link"

Masukan url dibawah ini pada alamat situs.

http://{namablog.blogspot.com}/search?max-results={jumlah
posting}

Masukan teks dibawah ini pada nama situs.

Lihat semua daftar posting »»

Cara Kedua:

Masuk ke Template -> Elemen Halaman -> Tambahkan
sebuah Elemen Halaman -> pilih "HTML/JavaScript" -> Kemudian
Copy-Paste code dibawah ini.

<a href="{namablog.blogspot.com}/search?max-results={jumlah
posting}">Lihat semua daftar posting »»</a>

Catatan:

{namablog.blogspot.com} => Ganti dengan nama
alamat blog kamu.

{jumlah posting} =>
Jumlah dari posting yang akan ditampilkan, jika ingin menampilkan seluruh
posting tinggal tentukan saja sesuai dengan banyaknya jumlah posting di blog
kamu.

Lihat semua daftar posting »»
=> Terserah mau ditulis kalimat sendiri :)

Selamat Mencoba, Happy Blogging :)

Saturday, December 8, 2007

Cara menampilkan halaman lain di blog (Tab Document Viewer)

"oya om gimana cara bikin "preview page" web lain di blog kita?"

Pertanyaan diatas disampaikan salah satu sahabat blogger di shoutbox, yaitu
bagaimana menampilkan halaman lain di blog kita, biasanya ini dinamakan
Document Viewer. Gunanya buat apa om? *sambil garuk-garuk kepala* buat apa
ya? mungkin buat aksesoris tambahan aja. Menurut om kayaknya aksesoris
ini gak terlalu berguna selain itu juga bikin lambat loading page. Namum tidak
ada salahnya kita mencoba membuat Document Viewer ini sekalian aja buat
nambah ilmu untuk belajar koding :)

Agar gak bingung kita lihat gambar dibawah:

Contoh tampilan tab document viewer.

Halaman yang kita buat nantinya merupakan Tab Dokumen Viewer, setiap tab akan
mempunyai link tersendiri yang bisa kita modifikasi.

Ikuti langkah dibawah ini:

LANGKAH I.

Buka Template -> Edit HTML -> masukan kode CSS dibawah diantara
kode CSS yang ada pada coding blogger kita, biasanya di antara code
<head>....</head>

/*Eric Meyer's based CSS tab*/

#tablist{

padding: 3px 0;

margin-left: 0;

margin-bottom: 0;

margin-top: 0.1em;

font: bold 12px Verdana;

}

#tablist li{

list-style: none;

display: inline;

margin: 0;

}

#tablist li a{

text-decoration: none;

padding: 3px 0.5em;

margin-left: 3px;

border: 1px solid #778;

border-bottom: none;

background: white;

}

#tablist li a:link, #tablist li a:visited{

color: navy;

}

#tablist li a:hover{

color: #000000;

background: #C1C1FF;

border-color: #227;

}

#tablist li a.current{

background: lightyellow;

}

LANGKAH II

Kemudian masukan lagi kode javacript dibawah ini diantara code
<Body>....</Body>

Jika sudah jangan lupa di simpan.

LANGKAH III

Buka Template -> Element Halaman -> Tambahkan sebuah Elemen Halaman ->
Lakukan Copy-Paste Kode dibawah ini -> kemudian simpan dan lihat hasilnya.

<li><a class="current" href="http://www.o-om.com"
onClick="return handlelink(this)">O-om's Blog</a></li>

<li><a href="http://www.google.com"
onClick="return handlelink(this)">Google</a></li>

<li><a href="http://www.yahoo.com"
onClick="return handlelink(this)">Yahoo</a></li>

<li><a href="http://www.msn.com"
onClick="return handlelink(this)">MSN</a></li>

<li><a href="http://www.news.com"
onClick="return handlelink(this)">News.com</a></li>

<li><a href="http://www.dynamicdrive.com"
onClick="return handlelink(this)">Dynamic Drive</a></li>

</ul>

<iframe id="tabiframe" src="http://www.o-om.com"
width="98%" height="350px"></iframe>

<form name="tabcontrol" style="margin-top:0">

<input name="tabcheck" type="checkbox" onClick="handleview()" value="ON"> Open
tab links in browser window instead.

</form>

URL yang berwarna biru bisa kita ganti
sesuai dengan keinginan.

URL yang berwarna pink merupakan
alamat yang akan ditampilkan pertama kali

Cara menambahkan Alamat:

Untuk menambahkan halaman kita tinggal menambahkan kode dibawah ini dibawah
code warna merah diatas :)

Sumber :
http://www.dynamicdrive.com/dynamicindex3/tabdocviewer.htm