Faceblog

Advertise dan Publisher

noreply@blogger.com (IGES BATAM) — Wed, 6 Oct 2010 17:27:00 +0700

Beriklan di Faceblog
	Promosikan bisnis ke 500 juta lebih pengguna aktif dan setia di Faceblog. Kembangkan merek online dengan koneksi ke audiens Anda.

Menghemat tempat dengan PopUp Layer

noreply@blogger.com (IGES BATAM) — Wed, 6 Oct 2010 17:25:00 +0700

Kejadian ini mungkin pernah anda alami saat membuat postingan di blog, apalagi jika postingan yang dibuat memuat banyak gambar/image. Kadang tanpa kita sadari Gambar yang kita muat ukurannya jauh melebihi ukuran layar yang tersedia untuk postingan, sehingga ukuran gambar tadi mendesak layar lain terutama yang ada di sidebar sebelah kanan. Jika layar pada sidebar tidak menggunakan properti "float", kemungkinan halaman blog anda akan melebihi kapasitas layar komputer sehingga memaksa layar komputer mengeluarkan scroll horisontal yang membuat kita dan orang lain yang mengunjungi blog kita menjadi kurang nyaman melihatnya. Jika layar pada sidebar kanan menggunakan properti "float", maka layar tersebut akan jatuh ke bawah sehingga template blog menjadi tampak berantakan.

Bagaimana cara mengatasinya?. Jika memang anda tidak ingin mengecilkan ukuran gambar, maka sebaiknya anda memisahkan gambar tersebut dari postingan dengan cara menempatkannya pada layar popup. Misalnya menjadi seperti ini [ DEMO ]. Jika anda tertarik dengan metode tersebut. Silahkan diterapkan tutorialnya,

Pertama : Tempatkan script dibawah ini pada bagian atas tag </head>

function scrolltopx()

{

ScrollTop = 0;

if( typeof( window.pageYOffset ) == 'number' ) {

ScrollTop = window.pageYOffset;

}

else

if( document.body.scrollTop ) {

ScrollTop = document.body.scrollTop;

}

else

if( document.documentElement.scrollTop ) {

ScrollTop = document.documentElement.scrollTop;

}

else

{

return ScrollTop;

}

function viewpict(gb)

{

scrolltopx()

document.getElementById('demo').style.display='block';

document.getElementById('demo').style.top=ScrollTop + 'px';

document.getElementById('pictu').src=gb;

}

function closi()
{
document.getElementById('demo').style.display='none';
document.getElementById('pictu').src='';
}

</script>

Kedua : Masukkan Script dibawah ini pada bagian atas tag </body>

<div align='right' style='background:#cccccc;width:100%'><b><a href='javascript:closi()'>Close [x]</a></b></div>

</div>

Ketiga : Cara menampilkannya pada postingannya adalah dengan menggunakan link misalnya [ VIEW IMAGE ], scriptnya adalah

[ <a href="javascript:viewpict('http://farm5.static.flickr.com/4085/5044870358_c5d9585d20.jpg')">View Image</a> ]

Ganti text yang berwarna merah dengan alamat link image anda.
Silahkan di coba semoga ada manfaatnya

Menampilkan Daftar Komentar sebuah Artikel pada Halaman Utama Blog

noreply@blogger.com (IGES BATAM) — Mon, 4 Oct 2010 00:55:00 +0700

Bagi para penggemar blog, terutama blogspot, membuat Recent Comment mungkin tidak asing lagi. Recent Comment adalah Daftar komentar terbaru User pada seluruh Postingan/Artikel di Blog anda yang bisa ditampilkan pada Halaman Utama Blog, biasanya dipasang pada sidebar dan jumlah komentar biasanya dibatasi antara 10- 20 komentar. Bagaimana jika Recent Comment yang dibuat dan ingin ditampilkan pada halaman utama blog hanya berasal dari satu postingan/artikel saja. Sampai saat ini belum ada satu blog tutorial pun yang berhasil membahas dan mewujudkannya (catatat: sepanjang pengetahuan kami). Mengapa?, karena hampir semua pencipta Recent Comment kiblatnya adalah mengekstraksi data script html dari RSS FEED COMMENT (misalnya http://abdulgamal.blogspot.com/feeds/comments/default). Padahal RSS Feed Comment itu berisi kumpulan komentar-komentar yang terdapat pada seluruh postingan/artikel pada blog yang disusun berdasarkan update terbaru sehingga sulit menyeleksi daftar komentar yang hanya berasal dari satu postingan/artikel blog saja.

Di Faceblog ini, kami selalu bereksperimen dan secara tak sengaja kami berhasil mengekstraksi data script HTML Comment dari satu postingan artikel saja untuk ditampilkan pada halaman utama blog. Data script yang kami ekstraksi bukan berasal dari RSS FEED COMMENT tapi berasal dari sini

https://www.blogger.com/comment.g?blogID=5354151026935080542&postID=5115476437086696685&isPopup=true

setiap blog memiliki blogID nya masing-masing, begitu juga dengan setiap artikel yang diposting juga memiliki postID nya sendiri-sendiri. Untuk mendapatkan blogID dan postID silahkan anda masuk ke Account Blogger, pada blog yang anda pilih, klik Edit Posts. Kemudian tentukan artikel yang akan anda pilih, lalu sorot kursor pada link Edit kemudian klik kanan, lalu pilih Properties. Catat Addressnya dan catat nomor blogID dan nomor postID kemudian gantikan pada alamat diatas blogID dan postID nya. Hasilnya kira-kira seperti ini.

Halaman inilah yang kami ekstraksi menggunakan script-script PHP. Kami sudah membuat generatornya dengan php, tinggal disandingkan saja. Alamatnya adalah

http://gmlujicoba.freetzi.com/feedkomentar3.php?url=https://www.blogger.co/comment.g?blogID=5354151026935080542&postID=5115476437086696685

Yang anda lakukan adalah silahkan ganti blogID dan post ID sesuai milik anda. Untuk menampilkannya pada blog caranya adalah pada Account Blogger, pilih Design - Page Elements - Add a Gadget - HTML/Javascript kemudian Copy paste script berikut

<div>

<form>

What On Your Mind

</textarea>

</form>

</div>

<div align="right"><a href="#" onclick="document.getElementById('ifx').style.display='none';document.getElementById('ifxx').style.display='block'"><b>Close</b></a></div>

</div>

Jangan lupa mengganti blogID dan postID nya, selamat mencoba. Hasilnya bisa dilihat di sini
http://videomedis.blogspot.com/

Bagi yang ingin menggunakan php script generatornya anda juga bisa mencobanya dengan script ini

<?php
Header("content-type: application/x-javascript");
$url="$_GET[url]&postID=$_GET[postID]&isPopup=true";
$homepage = file_get_contents($url);
$h1 = explode("<script type=\"text/javascript\">",$homepage);
$h2 = explode("</script>",$h1[4]);
$h3 = explode("<dl id=\"comments-block\">",$h2[1]);
$h4 = explode("</dl>",$h3[1]);
$h5 = str_replace("<div class=\"r\"></div>","",$h4[0]);
$h6 = str_replace("<img src=\"/img/blank.gif\" class=\"comment-icon anon-comment\" alt=\"Anonim\">","",$h5);
$h6 = str_replace("<img src=\"/img/blank.gif\" width=\"","<div style=\"display:none\">",$h6);
$h6 = str_replace("onload=\"setAttributeOnload(this, "src", "","</div><img width=\"60px\" height=\"60px\" border=\"0\" src=\"",$h6);
$h6 = str_replace("")\">","\">",$h6);
$h6 = str_replace("<div class=\"profile-image-container\"><span dir=\"ltr\">","<table><tr><td valign=\"top\">",$h6);
$h8 = str_replace("<img src=\"/img/blank.gif\" class=\"comment-icon blogger-comment\" alt=\"Blogger\">","",$h6);
$h9 = str_replace("berkata...","",$h8);
$h10 = str_replace("\r","",$h9);
$h10 = str_replace("\n","",$h10);
$h10 = str_replace("<dt","<div style=\"padding:5px;\"",$h10);
$h10 = str_replace("id=","name=",$h10);
$h10 = str_replace("</dt>"," ",$h10);
$h10 = str_replace("<dd><p>"," ",$h10);
$h10 = str_replace("<img src=\"/img/blank.gif\" class=\"comment-icon openid-comment\" alt=\"OpenID\">","",$h10);
$h10 = str_replace("</p></dd>","</div></td></tr></table></div>|",$h10);
$h10 = str_replace("\"> <span dir=\"ltr\">","\"> <table><tr><td valign=\"top\"><img width=\"60px\" height=\"60px\" src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfL1VflWeBv6X3n3B5fKMHw1PMD8EUSKD4xhpNYeo0qp-3t6ajUVUsN3KEfOBf6B_R7saczSmNA9a-7KfSXtz4f8sKe9aflHlwTyyaE8RYXvrN1MEA43YpiMfb6MV-Yo_DxWc7X5IEnTY/s800/profile_blank_gray.jpg\"></td><td valign=\"top\" align=\"left\">",$h10);
$h10 = str_replace("</span>","",$h10);
$h10 = str_replace("</div> <span dir=\"ltr\">","</td><td valign=\"top\" align=\"left\">",$h10);
$h10 = str_replace("</p><p class=\"comment-timestamp\">","<div style=\"font-size:9px;\" align=\"left\">",$h10);

$h11=explode("|",$h10);
for($a=0;$a<count($h11)-1;$a++)
{
$ab=$a+1;
$bx=(count($h11)-2)-$a;
$fe=str_replace("style=\"padding:5px;\"","id=\"a$ab\" style=\"padding:5px;\"",$h11[$bx]);

if($bx<count($h11)-6)
{
$feed=str_replace("style=\"padding:5px;\"","style=\"padding:5px;display:none\"",$fe);
}
else
{
$feed="$fe";
}
?>
document.write('<? echo"$feed"; ?>');
<?
}
$lipat3=floor(count($h11)/5);
?>
document.write("Halaman : ");
for(b=1;b<=<? echo"$lipat3"; ?>;b++)
{
var c="<a href='javascript:lipat3(\"" + b + "\",\"<? echo count($h11)-1 ; ?>\")'>" + b + "</a>";
document.write(c + "|");
}

function lipat3(d,g)
{
d=(d-1)*5;
e=d+5;
for(f=1;f<=g;f++)
{
if(f>d && f<=e)
{
document.getElementById("a" + f).style.display='block';
}

if(f<=d || f>e)
{
document.getElementById("a" + f).style.display='none';
}
}
}

Mengekstraksi Rss Feed Situs Berita Online untuk Blog

noreply@blogger.com (IGES BATAM) — Tue, 28 Sep 2010 20:23:00 +0700

RSS adalah sebuah file berformat XML untuk sindikasi yang telah digunakan (diantaranya dan kebanyakan) situs web berita dan weblog. Teknologi yang dibangun dengan RSS mengijinkan kita untuk berlangganan kepada situs web yang menyediakan umpan (feed) RSS, biasanya situs web yang isinya selalu diganti secara reguler.

RSS digunakan secara luas oleh komunitas weblog untuk menyebar ringkasan tulisan terbaru di jurnal, kadang-kadang juga menyertakan artikel lengkap dan bahkan gambar dan suara. Sekitar 2000, penggunaan RSS meluas di berbagai penerbitan berita, termasuk Reuters, CNN, dan BBC. RSS digunakan pada hampir semua situs berita atau weblog, dengan berbagai tujuan termasuk: pemasaran, press release, laporan reguler produk, atau aktivitas lain yang membutuhkan pemberitahuan periodik dan tentunya publikasi. (http://id.wikipedia.org/wiki/RSS)

Satu kelebihan utama dari RSS Feed ini adalah halaman RSS Feed umumnya tidak menggunakan template yang rumit dan menguras tempat, hanya terdiri dari teks-teks tulisan dan thumbnail gambar tanpa banyak asesoris tambahan yang umum ditemukan pada situs web atau blog. Dengan kelebihan tersebut membuat Halaman RSS Feed sangat mudah untuk diekstraksi.

Apa kegunaan mengekstraksi RSS Feed halaman web terutama halaman web dari situs-situs web populer. Pada beberapa blogger mania ada yang suka mengoleksi headline-headline berita online dari situs-situs portal berita. Ada juga yang suka mengoleksi blog-blog kawan yang dianggap penting. Dengan mengoleksi tersebut memudahkan untuk memantau berita-berita terupdate dari situs-situ berita populer hanya dari satu halaman web saja dan juga untuk mengetahui kapan update terbaru dari blog-blog kawan yang dikoleksi tersebut.

Ekstraksi RSS Feed merupakan suatu tehnik programming tertentu yang bertujuan mengambil/mengekstrak data script HTML dari Halaman Rss Feed suatu Situs Portal. Tehnik Programing yang digunakan bisa berbeda-beda, ada yang menggunakan tehnik ekstraksi dengan Javascript dan ada juga yang menggunakan tehnik ekstraksi dengan PHP. Selain itu ada juga beberapa situs web penyedia layanan ekstraksi RSS Feed yang juga bisa dimanfaatkan bagi yang tidak begitu mengerti bahasa-bahasa programing web. Contohnya adalah FeedBurner. Anda bisa mendaftar di situs resminya http://feedburner.google.com/fb/a/myfeeds , dengan catatan anda terlebih dahulu harus memiliki account di google.com. Jika belum memiliki account di google, silahkan daftar terlebih dahulu atau klik di link ini https://www.google.com/accounts/NewAccount
Setelah Login di Google, silahkan masuk ke situs FeedBurner.

Pada Situs FeedBurner cari bagian seperti di bawah ini

Setelah itu cari alamat rss feed dari situs yang akan anda ekstraksi, misalnya http://abdulgamal.blogspot.com/feeds/posts/default, lalu tekan tombol Next, seterusnya tekan lagi tombol Next dan seterusnya sampai selesai hingga anda mendapatkan teks seperti ini

"Your feed is ready for the world. Now what?"

Cari Menu seperti di bawah ini, Lalu Klik Publicize

Pada halaman Publicize, cari Link BuzzBoost, lalu klik. Pada halaman BuzzBoost klik tombol ACTIVE.

Akan muncul halaman yang berisi script seperti dibawah ini

Edit script tersebut dan cukup mengambil bagian seperti di bawah ini

kemudian modifikasi dengan menambahkan script dibawah ini tepat dibelakang text sigpro ,

&nItems=8&format=openLinks=new

&displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below

sehingga menjadi seperti dibawah ini

&displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below" type="text/javascript" ></script>

Copy Paste pada Blogspot anda dengan cara
Buka Design - Page Element - Add a gadget - Javascript/HTML - Isi Title misalnya 'Feed News' Lalu Copy Paste script diatas pada Content

Setelah itu buka kembali Design - Edit HTML - Expand Widget Templates,
Jika menggunakan Mozilla FF, buka Edit - Find lalu ketikkan keyword Feed News, sehingga akan ketemu dengan script seperti dibawah ini

<b:widget id='HTML6' locked='false' title='Feed News' type='HTML'>
<b:includable id='main'>

<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:includable>
</b:widget>

Abaikan saja jika id anda tidak sama dengan HTML6, title='Feed News' adalah title yang anda masukkan sendiri saat membuat widtget baru.

Modifikasi script diatas sehingga menjadi seperti di bawah ini

<b:widget id='HTML6' locked='false' title='Feed News' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='news'><div class='widget-content'>
<data:content/>
</div></div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Langkah selanjutnya adalah mengedit style sheet css
Tetap pada mode Edit HTML, dengan moxilla FF cari Edit - Find, lalu ketikkan kata kunci </head>
setelah ketemu bagian tersebut letakkan script dibawah ini tepat diatasnya

<style>
.news li a:hover {
display:block;
text-decoration:none;
background:#efefef;
}
.news li a:visited {
text-decoration:none;
}
.news {
float:left;
width:380px;
}
.news ul {
width:90%;
list-style-type:none;
}
.news li a {
text-decoration:none;
border-top:1px solid rgb(204,204,204);
line-height:13px;
display:block;
padding:3px 0px 3px 0;
}
.feedburnerFeedBlock div, .date, .feedItemAuthor, .feedTitle, .fbsubscribelink, .creditfooter {
display:none;
padding:3px;
margin-left:126px;
margin-bottom:12px;
width:250px;
}
.feedburnerFeedBlock li:hover .date {
position:absolute;
display:block;
font-weight:bold;
padding-left:10px;
margin-left:100px;
width:250px
}
.feedburnerFeedBlock li:hover div {
position:absolute;
display:block;
border:1px solid #c0c0c0;
background:rgb(204,204,204);
padding-left:10px;
padding-top:25px;
margin-left:100px;
}
</style>

Lakukan dari awal langkah-langkah diatas untuk mengekstrak RSS Feed situs-situs web atau blog yang anda inginkan.

Untuk melihat demo, silahkan kembali ke halaman utama blog ini dengan menekan link Faceblog atau Home, lalul klik link Rss Feeds News. Selamat mencoba

Show Layer Hidden Layer

noreply@blogger.com (IGES BATAM) — Sat, 25 Sep 2010 10:44:00 +0700

Sebuah web maupun blog pada hakekatnya tersusun dari sekumpulan layar-layar (kolom-kolom) yang tertata sedemikian rupa sehingga menghasilkan tampilan layout yang enak untuk dipandang. Biasanya blog/web tersebut awalnya disusun dengan layar-layar besar terlebih dahulu, setelah itu di dalam layar-layar besar tersebut dibuat lagi layar-layar yang lebih kecil dan demikian seterusnya.

Semakin beragam fasilitas dari sebuah web akan semakin banyak pula layar/kolom yang dibutuhkan, semakin banyak layar/kolom yang digunakan maka semakin kompleks dan rumit penataan web tersebut. Oleh karena itu biasanya para pembuat template web menata layar/kolom-kolom tersebut dengan style border atau bingkai untuk membedakan antara kolom/layar yang satu dengan yang lain. Setelah selesai, beberapa style border tersebut mungkin akan dihilangkan jika dianggap perlu.

Yang agak rumit dalam penataan layar/kolom-kolom web adalah jika membuat web dengan lebih dari satu sisi (sidebar), karena secara defaultnya layar/kolom-kolom tersusun berdasarkan pola Baris (Dari Atas ke Bawah) bukan dengan pola Kolom (dari kiri ke kanan).

Kolom-kolom pada web dibuat menggunakan bahasa standar web HTML atau bisa juga menggunakan software webbuilder WYSIWYG (What You See Is What You Get) yang banyak tersedia seperti Frontpage, DreamWeaver atau Joomla. Jika menggunakan bahasa web standar maka penulisan tag HTML sebuah kolom/layar adalah sebagai berikut : Dibuka dengan tag <div> dan ditutup dengan tag </div> . Sebagai Contoh

<div>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

Jika anda membuat layar baru lagi dibawahnya maka tampilan pada web akan disusun persis dibawahnya bukan disebelah kanannya atau disebelah kirinya.

Untuk membatasi sebuah layar biasanya kita menggunakan style CSS (cascading Style Sheet) border agar layar tersebut memiliki bingkai, caranya adalah sbb

<div style='border:1px solid #000000'>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

border:1px artinya bingkai dengan tebal 1 pixel, solid artinya tipe bingkai adalah berupa garis tunggal dan #000000 bertarti warna bingkai, dalam hal ini berarti hitam.

Show Layer
Pada kesempatan ini, kami tidak akan menjabarkan bagaimana membuat sebuah layout halaman utama dengan layar tersebut tapi kami akan menjelaskan cara membuat Layar Popup (bukan Layar Utama).
Apa perbedaan Layar Utama dan Layar Popup?. Jika membuat layar baru pada layar utama akan mempengaruhi tata letak layar-layar yang lain pada Layout halaman utama. Tapi jika membuat Layar Popup tidak akan mempengaruhi posisi letak layar-layar yang terdapat pada halaman utama melainkan Layar Popup tadi ditumpuk diatas layar utama sehingga tampak overlapping satu sama lain dan tampak seperti lembaran-lembaran sebuah buku.

Apa kegunakan dari Layar Popup?

Layar Popup biasa digunaka sebagai PreLoader sebelum halaman utama diload secara utuh, setelah halaman utama komplit, Layar popup akan secara otomatis ditutup
Layar Popup juga sering digunakan sebagai layar layanan iklan saat halaman utama dibuka
Layar Popup kadang juga digunakan sebagai zoom dari thumbnail image karena sifatnya yang tidak mengganggu layar-layar yang terdapat pada halaman utama.
Layar Popup juga biasa digunakan sebagai Main Menu tersembunyi atau Hidden layer. Yang akan terbuka saat link menu diklik.
Layar Popup kadang digunakan juga sebagai layar Tooltips pada beberapa text halaman utama yang memerlukan penjelasan. Biasanya dengan meletakkan cursor pada text yang dimaksud, layar popup pun terbuka
Yang lagi ramai digunakan para blogger adalah menyimpan Shoutbox pada layar popup yang sengaja disembunyi pada sisi kiri atau kanan halaman web dan hanya muncul secara animasi saat tombol shoutbox di klik

Cara pembuatan layar Popup adalah sebagai berikut:

<div style='position:absolute;z-index:1;border:1px solid #000000'>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

position:absolute berarti posisi layar adalah mutlak, karena itu maka secara defaulnya layar akan berada pada posisi x=0 dan y=0 atau pada posisi kiri atas halaman web.
z-index:1, berarti layar ini ditumpuk persis diatas layar utama, karena defaultnya layar utama z-indexnya adalah 0. Jika anda ingin membuat layar popup lain yang ditumpuk diatas layar popup sebelumnya gunakan z-index:2 begitu seterusnya.

Kita bisa mengatur posisi penempatan layar Popup tadi sesuai keinginan kita dengan mengatur posisi kiri dan posisi atas layar sebagai berikut:

<div style='position:absolute;top:20px;left:20px;z-index:1;border:1px solid #000000'>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

top:20px berarti posisi layar dari atas adalah 20 pixel, left:20px artinya posisi layar dari kiri adalah 20 pixel, kita juga bisa mengganti top dengan bottom atau left denga right jika ingin mengambil posisi dari bawah dan dari kanan.

Lebar dan Tinggi Layar Popup secara defaultnya mengikuti luasnya tempat yang dipakai oleh tulisan yang ditulis pada layar selebar halaman browser. Bagaimana mengatur lebar dan tinggi layar sesuai keinginan kita, caranya adalah sbb

<div style='position:absolute;top:20px;left:20px;z-index:1;border:1px solid #000000;width:500px;height:300px;'>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

width:500px artinya lebar layar adalah 500 pixel, height:300px artinya tinggi layar adalah 300 pixel. Tinggi layar ini bersifat tidak mutlak, artinya jika luasnya tempat yang dipakai oleh tulisan dalam layar melebihi tinggi yang diinginkan (dalam hal ini 300px) maka tinggi layar mengikuti tinggi luas yang dipakai oleh tulisan dalam layar, jika kurang maka tinggi layar menjadi sesuai patokan tadi yaitu 300px.

Ingat bahwa layar popup yang dibangun ini masih bersifat transparan, artinya karena ia ditumpuk diatas layar utama maka tulisan yang terdapat pada halaman utama dibelakang layar popup akan tampak pada layar popup sehingga tulisan tersebut akan tampak overlapping dengan tulisan yang terdapat pada layar popup, untuk menghindari hal tersebut gunakan style background pada layar popup, sbb

<div style='position:absolute;top:20px;left:20px;z-index:1;border:1px solid #000000;width:500px;height:300px;background:#cccccc'>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

background:#cccccc artinya layar popup diberi latar belakang warna #cccccc atau abu-abu

Hidden Layer
Hidden Layer artinya menyembunyikan layar, dalam hal ini tentunya layar yang akan disembunyikan adalah layar popup tadi. Idealnya Layar Popup yang sudah dibentuk tadi sebaiknya disembunyikan karena posisinya yang menumpuk diatas Layar Utama sehingga dapat menutupi tulisan yang terdapat pada layar utama. Oleh karena itu sebuah layar popup biasanya kalau bukan ditampilkan terlebih dahulu kemudian disembunyikan, pasti sebaliknya disembunyikan terlebih dahulu baru kemudian ditampakkan. Jika layar popup ingin dijadikan preloader, maka biasanya layar popup tersebut ditampilkan terlebih dahulu baru kemudian disembunyikan secara otomatis, Jika layar popup tersebut ingin dijadikan menu popup, maka yang terjadi sebaliknya yaitu disembunyikan terlebih dahulu baru kemudian disiapkan menu link untuk menampilkannya.

Bagaimana menyembunyikan layar popup yang sudah dibentuk,

<div style='position:absolute;top:20px;left:20px;z-index:1;border:1px solid #000000;width:500px;height:300px;background:#cccccc;display:none'>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

display:none adalah atribut yang harus ditambahkan pada layar popup untuk menyembunyikan layar tersebut.

Bagaimana cara menampilkan kembali layar popup yang sudah disembunyikan.
Pertama adalah berikan terlebih dahulu ID pada layar popup yang dibuat diatas. Id bisa anda tulis apa saja asal tidak mengandung spasi kosong.

<div style='position:absolute;top:20px;left:20px;z-index:1;border:1px solid #000000;width:500px;height:300px;background:#cccccc;display:none' id='layar'>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

id='layar' adalah identitas dari layar popup yang dibuat diatas tadi, dalam hal ini idnya adalah 'layar', silahkan menggunakan kata lain jika anda ingin mengubahnya.

Kedua, buatlah Text Link yang merupakan representasi dari layar popup tersebut.

<a href='javascript:document.getElementById("layar").style.display="block"'>Layar</a>;

javascript:document.getElementById("layar").style.display="block" , merupakan script javascript yang digunakan untuk memerintahkan membuka layar popup yang idnya adalah 'layar' jika link tersebut di klik.

Setelah layar popup dibuka, sekarang bagaimana menutupnya kembali. Pada script layar popup diatas tambahkan Link Tutup, sbb

<div style='position:absolute;top:20px;left:20px;z-index:1;border:1px solid #000000;width:500px;height:300px;background:#cccccc;display:none' id='layar'>
<div align='right'><a href='javascript:document.getElementById("layar").style.display="none"'>Tutup</a>;</div>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

javascript:document.getElementById("layar").style.display="none", merupakan script javascript yang digunakan untuk memerintahkan menyembunyikan kembali layar popup yang idnya adalah 'layar' jika link 'tutup' tersebut di klik. Selamat mencoba

Bloglist dan Tukaran Link

noreply@blogger.com (IGES BATAM) — Wed, 1 Sep 2010 11:31:00 +0700

Cobalah membuka kamus Wikipedia dan menuliskan kata kunci 'tukaran link' atau 'link exchange'. Sampai tulisan ini dibuat, belum ada penjelasan resmi tentang apa sebenarnya metode tukaran link tersebut. Di kalangan blogger mania, istilah 'Tukaran Link' malah menjadi konsumsi yang cukup populer terutama para blogger yang rajin menggeluti dunia SEO (search Engine Optimizing).

Apa sebenarnya metode 'Tukaran Link' itu?
Saya mencoba menggunakan mesin pencari Google untuk mencari informasi tentang budaya bertukar link. Ternyata ada banyak blog maupun web tutorial yang membahas tentang budaya Tukaran Link ini dengan persepsi masing-masing. Dari beberapa masukan tentang pembahasan istilah tukaran link ini, saya mencoba mendefinisikan sendiri sebagai berikut:

Tukaran Link adalah Istilah yang digunakan untuk meminta/mengajak para blogger lain memasang link alamat blog anda pada blog mereka, dan sebagai timbal baliknya, anda juga bersedia dengan suka rela memasang link alamat blog mereka pada blog milik anda. Kesepakatan terjadi tanpa aturan yang mengikat.

Apa sebenarnya manfaat yang bisa dipetik dari metode tukaran link ini?
Dari search engine google.com, ada banyak blog yang membahas ini, satu diantaranya adalah seperti yang saya kutip di bawah ini:

"Apa keuntungan Tukar Link? ada banyak, ini beberapa:

1. Anda akan mendapatkan banyak link partner bagi website anda, dimana semakin banyak maka semakin bagus ranking anda di search engine karenanya.
Jadi, tautan balik akan banyak anda dapatkan dari link partner yang anda ajak bertukar link… dan ini gratis.

2. Anda akan mendapatkan banyak anchor text dari website lain.
Anchor text adalah link yang berupa kata kunci. Ketika anda memberikan komentar di blog orang lain misalnya, lalu anda memasukkan kata kunci di bagian nama, maka kemudian itu akan menjadi ‘Anchor text’, atau jika misalnya anda menitipkan link di iklan baris dengan membayar harga tertentu, itu juga anchor text.
Nah anchor text akan sangat menentukan anda akan ranking bagus di kata kunci apa. Dan ini sangat kuat efeknya bagi website ranking anda.

Dengan Tukaran Link maka anda akan mendapatkan banyak backlink dan pada saat yang bersamaan banyak anchor text. Asyik kan?

3. Anda mendapatkan banyak tambahan kunjungan.
Karena anda saling bertukar link dengan website lain yang juga mungkin mempunyai banyak kunjungan… maka ada kemungkinan, link ke website anda yang ada di website orang lain tadi kemudian di klik oleh pengunjung disana, maka anda akan mendapatkan tambahan kunjungan.
Bayangkan jika anda bertukar link dengan ratusan website yang berbeda, tentu anda akan mendapatkan tambahan kunjungan dari sana."

(di kutip dari "http://kerjakeras.com/tukar-link-tukaran-link-perlu-nggak-yah/")

Okelah saya setuju dengan pendapat di atas, meskipun point nomor 2 masih terkesan kontroversi karena seperti mengesankan metode "no follow" dan "dofollow" yang banyak di klaim oleh pengguna blog tapi tak banyak yang bisa membuktikan fakta dan hasilnya.

Untuk membudayakan metode bertukar link ini, sejak hari ini saya pun membuka peluang bagi kawan-kawan yang ingin bertukar link di blog ini. Hanya saja metodenya kami buat sedikit lebih simple. Kami menciptakan Mesin Tukaran Link Otomatis yang bisa anda manfaatkan untuk menoreh link blog anda di blog kami. Selanjutnya bagi kawan-kawan yang ingin memback link blog kami sebagai timbal baliknya silahkan anda copy paste textarea link blog kami yang terletak sidebar sisi kanan blog ini.

Mesin Tukaran Link Otomatis ini kami perlengkapi dengan sistem notifikasi via email, sehingga bagi rekan-rekan yang memasang link blog disini secara otomatis akan dikonfirmasi ke email kami. Jadi meskipun sedang offline, hanya dalam hitungan detik, notifikasi tersebut akan terkirim ke push mail blackberry sebagai SMS.

Mesin Tukaran Link Otomatis Kami terletak pada sidebar sisi kanan blog ini, dengan title BLOGLIST. Atau anda juga bisa memulainya di sini

Catat: Masukkan Resume Tentang Blog Anda di Kotak Komentar di bawah ini dan Ingat!!!, sebisanya jangan memilih Anonymous, agar Link blog anda dapat terpasang di blog kami.

Jangan Lupa untuk memasang link blog kami pada blog anda

Bloglist Kami

Membangun SHOUTBOX berbasis PHP

noreply@blogger.com (IGES BATAM) — Wed, 25 Aug 2010 15:19:00 +0700

Shoutbox, saybox, tagboard, atau chatterbox adalah fitur semacam chatting yang memperbolehkan pengunjung suatu situs web untuk meninggalkan pesan instan situs tersebut.

Pada jenisnya yang paling sederhana, shoutbox hanya menampilkan pesan singkat, bersama dengan informasi penulisnya. Kotak shoutbox akan senantiasa diperbaharui, agar segera menampilkan pesan-pesan terbaru. Umumnya pesan yang sudah lama akan terhapus setelah jumlah tertentu telah dicapai, untuk menghemat kapasitas di server. (http://id.wikipedia.org/wiki/Shoutbox)

Para blogger, sebagian besar menyisipkan shoutbox pada blog mereka untuk tujuan saling berinteraksi dengan para user. Selain itu shoutbox juga banyak digunakan untuk Parkir Link pada Blog. Istilah yang sering digunakan oleh para blogger untuk parkir link tersebut adalah 'BLOGWALKING'.

Penyedia layanan Shoutbox baik yang gratisan maupun berbayar yang paling populer adalah http://www.shoutmix.com atau http://www.cbox.ws. Masing-masing penyedia layanan shoutbox tersebut memiliki kelebihan dan kekurangannya masing-masing. Oleh karena itu para penggunanya pun beragam, ada yang menyukai shoutmix dan ada juga yang lebih menyukai cbox.

Jalan tengah yang kami tawarkan adalah bagaimana jika kita membangun shoutbox sendiri. Untuk membangun sebuah proyek shoutbox membutuhkan beberapa syarat tertentu.

Webhosting berbasis PHP dan MySQL. Anda bisa mencari penyedia layanan free webhosting berbasis PHP yang banyak bertebaran di internet. Cari saja menggunakan mesin pencari GOOGLE kemudian ketikkan kata kunci 'free web hosting php mysql no ads'. Kami merekomendasikan menggunakan http://www.0fees.net
File-file PHP yang berisi script-script php yang digunakan untuk membangun shoutbox tersebut. File-file tersebut akan kami berikan dengan cara download.
File koneksi.inc.php yang digunakan untuk koneksi dengan database server.
Berikut ini isi script koneksi.inc.php :

<?php
mysql_connect("MySQL host","username","password");
mysql_select_db("database name");
?>
Ganti MySQL host dengan host MySQL server, username dengan username database anda, password ganti dengan password database anda dan database name ganti dengan nama database and. Sebagai contoh server 0fees.net mengirimi kami email berisi account kami seperti ini

MySQL Database Name: MUST CREATE IN CPANEL
MySQL Username : fees0_6223137
MySQL Password : 1234567
MySQL Server: SEE THE CPANEL

MySQL host dan Nama Database akan diberikan saat anda membuat database pada Cpanel, Baca kembali artikel kami berjudul 'Hosting PHP di 0fees dot Net' point 16 dan point 17.

Jadi penulisan scriptnya menjadi seperti ini

<?php
mysql_connect("sql100.0fees.net","fees0_6223137","1234567");
mysql_select_db("fees0_6223137_blogface");
?>
Simpan script tersebut sebagai file koneksi.inc.php
Langkah berikutnya adalah membangun database chatbox di server. Silahkan baca artikel kami terlebih dahulu tentang cara membangun database di server Membangun Database di PHPMYADMIN
Dengan cara yang sama, buatlah tabel 'admin'

Field Type Length/Values Index A.I

id INT 20 PRIMARY V

nama VARCHAR 50

password VARCHAR 50

Jika berhasil, akan tampak seperti gambar ini [ View Demo ]

Buat juga table 'owner'

Field Type Length/Values Index A.I

id INT 20 PRIMARY V

title VARCHAR 100

blog VARCHAR 100

url VARCHAR 100

email VARCHAR 100

Jika berhasil, akan tampak seperti gambar ini [ View Demo ]
Pada table 'admin', [ View Demo ], klik link insert, kemudian isi kolom nama dan password (terserah anda, nama dan password tersebut yang akan anda gunakan untuk login), setelah itu tekan tombol GO. [ View Demo ]
Pada table 'owner', [ View Demo ], klik link insert, kemudian isi kolom title,blog,url dan email anda (untuk url: isi dengan alamat yang diberikan pihak server untuk hosting anda, biasanya dikirim via email), setelah itu tekan tombol GO. [ View Demo ]
Langkah selanjutnya adalah melakukan upload file-file php anda ke Cpanel server. Jika anda ingin lebih mudah, silahkan menggunakan FTP SURFER. Pembahasan tentang FTP SURFER dapat anda baca pada artikel kami yang lain berjudul 'Mengolah File Menggunakan FTP SURFER'
Ikuti urut-urutan file yang harus anda upload ke server
- File koneksi.inc.php
- File admin.php [download]
- File login.php [download]
- File logout.php [download]
- File captcha.php [download]
- File shout.php [download]
- File data.php [download]
- File data2.php [download]
- File emotion.php [download]
- File delete.php [download]
- File style.css [download]
- File load.gif [download]
- File normal.gif [download]
- File button-3.wav [download]
Sebagai catatan, Semua file berekstensi .php yang wajib anda download diatas kami simpan dalam bentuk file berekstensi .txt, setelah file file tersebut berhasil anda download, silahkan anda mengubah terlebih dahulu semua file berekstensi .txt menjadi ekstensi .php sebelum anda upload ke server hosting anda.
file style.txt yang anda download juga harus anda ubah menjadi berekstensi .css sebelum anda upload ke server hosting anda.
Langkah terakhir adalah membuat widget baru di blogspot anda, lalu copy paste script berikut

<div align="right" style="font-size:10px;padding-right:5px"><a href="http://blogface.0fees.net/admin.php" target="_blank">admin</a></div>
<iframe frameborder="0" marginheight="0px" marginwidth="0px;" height="475px" src="http://blogface.0fees.net/shout.php" scrolling="no" width="100%" name="tagboard"></iframe>
Ganti http://blogface.0fees.net dengan alamat hosting anda sendiri.
Selamat mencoba dan semoga berhasil

Membangun Database di PHPMYADMIN

noreply@blogger.com (IGES BATAM) — Wed, 25 Aug 2010 09:57:00 +0700

phpMyAdmin adalah perangkat lunak bebas yang ditulis dalam bahasa pemrograman PHP yang digunakan untuk menangani administrasi MySQL melalui Jejaring Jagat Jembar (World Wide Web). phpMyAdmin mendukung berbagai operasi MySQL, diantaranya (mengelola basis data, tabel-tabel, bidang (fields), relasi (relations), indeks, pengguna (users), perijinan (permissions), dan lain-lain).

Pada dasarnya, mengelola basis data dengan MySQL harus dilakukan dengan cara mengetikkan baris-baris perintah yang sesuai (command line) untuk setiap maksud tertentu. Jika seseorang ingin membuat basis data (database), ketikkan baris perintah yang sesuai untuk membuat basis data. Jika seseorang menghapus tabel, ketikkan baris perintah yang sesuai untuk menghapus tabel. Hal tersebut tentu saja sangat menyulitkan karena seseorang harus hafal dan mengetikkan perintahnya satu per satu.

Saat ini banyak sekali perangkat lunak yang dapat dimanfaatkan untuk mengelola basis data dalam MySQL, salah satunya adalah phpMyAdmin. Dengan phpMyAdmin, seseorang dapat membuat database, membuat tabel, mengisi data, dan lain-lain dengan mudah, tanpa harus menghafal baris perintahnya.

phpMyAdmin merupakan bagian untuk mengelola basis data MySQL yang ada di komputer. Untuk membukanya, buka browser lalu ketikkan alamat http://localhost/phpmyadmin, maka akan muncul halaman phpMyAdmin. Di situ nantinya seseorang bisa membuat (create) basis data baru, dan mengelolanya. (http://id.wikipedia.org/wiki/PhpMyAdmin)

Bagaimana cara mendapatkan Perangkat Lunak phpMyAdmin?
Biasanya jika kita mendaftar pada suatu Web Hosting berbasis PHP dan MySQL fasilitas pengolahan database phpMyAdmin ini sudah built in pada paket layanan data server penyedia webhosting tersebut sehingga kita tak perlu lagi harus mendowloadnya secara terpisah.

Di bawah ini akan kami bahas bagaimana membangun sebuah proyek database MySQL memanfaatkan perangkat lunak PHPMYADMIN.

Buka phpMyAdmin yang link alamatnya biasa terdapat pada Cpanel server penyedia layanan webhosting berbasis PHP MySQL. Sebagai contoh http://www.php-myadmin.com/index.php?db=fees0_6223137_blogface besutan http://www.0fees.net. Tampilan antar mukanya seperti gambar ini [ View Demo ].
Sebagai contoh, kita akan membangun sebuah tabel database untuk sebuah proyek database Shoutbox atau Chatbox. Tabel tersebut kita namakan misalnya 'chatbox'.
Pada bagian bawah tulisan 'Create new table on database fees0_6223137_blogface', isilah Name dengan text 'chatbox', sedangkan Number of fields dengan angka 5. Angka 5 dimaksudkan adalah bahwa kita akan membuat 5 kolom fields yang berisi id, user, url, chat, waktu. Setelah itu tekan tombol GO [ View Demo ]
Isilah kolom-kolom yang kosong sesuai urut-urutan sebagai berikut :

Field Type Length/Values Index A.I

id INT 20 PRIMARY V

user VARCHAR 50

url VARCHAR 100

chat TEXT

waktu INT 100

Lalu tekan tombol Save
Ketrangan : Type INT = 'bilangan', VARCHAR = 'text yang jumlah hurufnya kurang dari 250 karakter', TEXT = text yang jumlah hurufnya lebih dari 250 karakter
id merupakan PRIMARY KEY yang akan secara otomatis bertambah 1 dari angka terakhir yang dimasukkan. A.I (Auto Increament) adalah penambahan angka sesuai urutan.
Jika berhasil akan tampak tabel 'chatbox' seperti gambar ini [ View Demo ]
Tabel 'chatbox' sudah terbentuk, langkah selanjutnya adalah bagaimana mengisi tiap-tiap field tersebut. Untuk pembahasan tersebut, silahkan lihat dan baca artikel kami yang lain, 'Membangun Shoutbox berbasis PHP'

Hosting PHP di 0fees dot Net

noreply@blogger.com (IGES BATAM) — Tue, 24 Aug 2010 11:14:00 +0700

Web Hosting adalah salah satu bentuk layanan jasa penyewaan tempat di Internet yang memungkinkan perorangan ataupun organisasi menampilkan layanan jasa atau produknya di web / situs Internet. Tempat dapat juga diartikan sebagai tempat penyimpanan data berupa megabytes (mb) hingga terabytes (tb) yang memiliki koneksi ke internet sehingga data tersebut dapat direquest atau diakses oleh user dari semua tempat secara simultan. Inilah yang menyebabkan sebuah website dapat diakses bersamaan dalam satu waktu oleh multi user. (http://id.wikipedia.org/wiki/Webhosting)

PHP adalah bahasa pemrograman script yang paling banyak dipakai saat ini. PHP banyak dipakai untuk memrogram situs web dinamis, walaupun tidak tertutup kemungkinan digunakan untuk pemakaian lain.(http://id.wikipedia.org/wiki/Php)

http://www.0fees.net adalah salah satu server penyedia layanan WEB HOSTING GRATIS yang kami rekomendasikan bagi anda yang ingin memanfaatkan layanan free webhosting.

Berikut Adalah Langkah-langkah untuk membuat hosting php di http://www.0fees.net

Buka webside http://www.0fees.net [ View Demo ]
Klik link text Free Web Hosting [ View Demo ]
Klik link text Order Now [ View Demo ]
Lakukan Sign Up, Isi username, password, email dst, setelah itu klik tombol Register
Setelah itu akan muncul tombol "Click Me To Continue". Klik tombol tersebut
Anda akan diminta untuk mengisi Image Verification, lalu tekan tombol Register
Setelah berhasil akan muncul pernyataan seperti berikut ini

An account activation email has been sent to abdgamal16@gmail.com
Langkah selanjutnya adalah buka email anda yang sudah diverifikasi
Anda akan menerima email konfirmasi [ View Demo ]
Klik link text yang terdapat dibawah tulisan "To continue using your account...."
Setelah jendela link terbuka, anda kembali diminta mengisi Image Verification, lalu tekan tombol Register
Setelah itu akan muncul informasi mengenai account anda. Informasi ini juga dikirimkan langsung ke email anda [ View Demo ]
Selanjutnya klik link text "Click here to log into your VistaPanel"
Di VistaPanel, anda dipersilahkan mengisi Username dan Password [ View Demo ]
Halaman VistaPanel tampak seperti ini [ View Demo ]
Langkah berikutnya adalah membuat Database. Pada Database Management klik link MySQL Databases. Disini anda akan diminta untuk create a New database [ View Demo ]
Jika berhasil, akan terbentuk 1 database [ View Demo ]
Klik pada link text [Admin] , maka anda akan jump ke PHPMYADMIN untuk membangun database anda. Bagaimana cara membangun database menggunakan PHPMYADMIN akan kami bahas pada artikel kami yang lain yang bertajuk "Membangun Database di PHPMYADMIN"
Informasi yang sangat penting pada VistaPanel adalah Account Information [ View Demo ]
Bagaimana memanage File pada VistaPanel. Pada prinsipnya bisa dilakukan dengan 2 cara. Pertama: Pada VistaPanel, pada submenu Site Management, klik Online File manager, setelah itu akan muncul jendela File manager seperti ini [ View Demo ]. Atau Cara Kedua menggunakan software khusus File Transfer Protocol (Admin merekomendasikan menggunakan freeware FTP SURFER). Bagaimana cara mengolah file-file anda menggunakan FTP Transfer Protocol. Simak Artikel kami yang lain "Mengolah File Menggunakan FTP SURFER".
Selamat Mencoba, semoga berhasil

Mengolah File Menggunakan FTP SURFER

noreply@blogger.com (IGES BATAM) — Thu, 12 Aug 2010 15:32:00 +0700

FTP (singkatan dari File Transfer Protocol) adalah sebuah protokol Internet yang berjalan di dalam lapisan aplikasi yang merupakan standar untuk pentransferan berkas (file) komputer antar mesin-mesin dalam sebuah internetwork.

FTP merupakan salah satu protokol Internet yang paling awal dikembangkan, dan masih digunakan hingga saat ini untuk melakukan pengunduhan (download) dan penggugahan (upload) berkas-berkas komputer antara klien FTP dan server FTP. Sebuah Klien FTP merupakan aplikasi yang dapat mengeluarkan perintah-perintah FTP ke sebuah server FTP, sementara server FTP adalah sebuah Windows Service atau daemon yang berjalan di atas sebuah komputer yang merespons perintah-perintah dari sebuah klien FTP. Perintah-perintah FTP dapat digunakan untuk mengubah direktori, mengubah modus transfer antara biner dan ASCII, menggugah berkas komputer ke server FTP, serta mengunduh berkas dari server FTP. (http://id.wikipedia.org/wiki/File_Transfer_Protocol)

Salah satu free FTP yang kami rekomendasikan dan cukup bagus digunakan adalah FTP SURFER, Anda bisa mendownloadnya di http://download.cnet.com/FTP-Surfer/3000-2160_4-10027849.html

Tampilan awal Software FTP SURFER seperti gambar ini [ View Demo ]

Langkah-langkah mengelola File menggunakan FTP SURFER

Pada Halaman utama FTP SURFER, klik File > New > Site Profile [ View Demo ]
Name : bisa diisi apa saja, Address isi dengan alamat ftp server anda, isi juga Username dengan username ftp server dan Password
Jika akses berhasil maka akan tampak seperti ini [ View Demo ]
Cari ikon untuk UPLOAD atau untuk DOWNLOAD file

Field	Type	Length/Values	Index	A.I
id	INT	20	PRIMARY	V
nama	VARCHAR	50
password	VARCHAR	50