MANFAATKAN MASA MUDAMU SEBAIK MUNGKIN, RAJIN PANGKAL PANDAI

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Kamis, 25 Februari 2010

Foto Bergoyang


Kamu pengen punya sesuatu yang laen? Ini ada teknik foto bergoyang. Caranya cukup mudah, kamu cuma mengunjungi website ini. Atau klik aja dari foto di bawah ini. Setelah itu browse foto yang kamu mau bikin. Terakhir upload dan copy kode HTML-nya.

Wavy Photo Effects

Rabu, 10 Februari 2010

Cara Membuat Berbagai Macam Tabel


Tabel pada blog merupakan pelengkap sebuah artikel. Biasanya tabel terdiri atas beberapa kolom dan baris. Banyaknya kolom dan baris tentu tergantung keperluan kita. Yang penting kita tahu istilah-istilah tabel. Nah ini ada script pembuatan tabel secara sederhana. Kamu bisa modifikasi sendiri.

Nih kode-kode htmlnya, kamu harus ganti kata-katanya sesuai keinginan ya!

TABEL SATU KOLOM

<table border="1">
<tr>
<td>satu kolom</td>
</tr>
</table>

Nanti hasilnya begini:
satu kolom



TABEL DUA KOLOM

<table border="2">
<tr>
<td>Kolom pertama</td>
<td>Kolom kedua</td>
</tr>
</table>

Nanti hasilnya begini:







Kolom pertamaKolom kedua


Catatan: Untuk Wordpress, cukup dibuat seperti di atas. Namun untuk Blogspot, kode-kode html tersebut harus dirapatkan ke kanan dengan tombol backspace. Jika tidak dirapatkan hasilnya akan jauh dari judul, seperti contoh di atas. Berikut ini adalah tabel yang benar. Angka pada border bisa diganti, misalnya 3, 4, dst.

<table border="2"><tr><td>Kolom pertama</td> <td>Kolom kedua</td></tr></table>

Kolom pertamaKolom kedua


TABEL DUA KOLOM DAN DUA BARIS

<table border="1">
<tr>
<td>Satu</td>
<td>Dua</td>
</tr>
<tr>
<td>Tiga</td>
<td>Empat</td>
</tr>
</table>

Nanti hasilnya begini:

SatuDua
TigaEmpat



TABEL 2 KOLOM DAN 3 BARIS

<table border="1"><tr><th>Nama</th><th>Alamat Sekolah</th></tr><tr><td>Amat</td><td>Jalan Rusa No. 1</td>
</tr><tr><td>Amit</td><td>Jalan Badak No. 2</td></tr></table>

Nanti hasilnya begini:
NamaAlamat Sekolah
AmatJalan Rusa No. 1
AmitJalan Badak No. 2


TABEL CAMPURAN

<span style="color: rgb(255, 0, 0);"><table border="1" cellpadding="5" cellspacing="5" width="100%"></span><span style="color: rgb(255, 0, 0);"><tr></span><span style="color: rgb(255, 0, 0);"><th rowspan="2"><span style="color: rgb(0, 0, 0);">Table header</span></th><td><span style="color: rgb(0, 0, 0);">Table cell 1</span></span><span style="color: rgb(255, 0, 0);"></tr></span><span style="color: rgb(255, 0, 0);"><tr></span><span style="color: rgb(255, 0, 0);"><td><span style="color: rgb(0, 0, 0);">Table cell 2</span></td></span><span style="color: rgb(255, 0, 0);"></tr></span><span style="color: rgb(255, 0, 0);"></table></span>

Nanti hasilnya begini:
Table headerTable cell 1
Table cell 2


ADA BAGIAN TABEL YANG KOSONG

<TABLE BORDER=2>

<TR> <TD>&nbsp;</TD>
<TH>10 am - noon</TH>
<TH>noon - 2 pm</TH>
<TH>2 pm - 4 pm</TH>
</TR>

<TR> <TH>Monday</TH>
<TD>Home Ec</TD>
<TD>Math</TD>
<TD>Geography</TD>

<TR> <TH>Wednesday</TH>
<TD>History</TD>
<TD>Social Studies</TD>
<TD>P.E.</TD>

<TR> <TH>Friday</TH>
<TD>Music</TD>
<TD>Peace Studies</TD>
<TD>Sleep</TD>

</TABLE>

Nanti hasilnya begini:

10 am - noonnoon - 2 pm 2 pm - 4 pm
MondayHome EcMathGeography
WednesdayHistorySocial StudiesP.E.
FridayMusicPeace StudiesSleep



Istilah pada tabel:

Sebuah elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH (table header), elemen TR (table row), serta elemen TD (table data). Ada lagi neh, istilah2 untuk tabel, mohon diperhatikan:

  • bgcolor - atribut untuk menentukan warna latar belakang
  • background - atribut untuk menentukan gambar yang akan menjadi latar belakang tabel/kolom
  • width - atribut untuk menentukan lebar
  • height - atribut untuk menentukan tinggi
  • align - mengatur perataan horizontal
  • valign - mengatur perataan vertikal
  • border - atribut untuk menentukan lebar bingkai tabel
  • cellspacing - atribut untuk menentukan jarak antar kolom
  • cellpadding - atribut untuk menentukan jarak antara isi dengan tepi kolom
  • colspan - menentukan berapa kolom yang akan digabung
  • rowspan - menentukan berapa baris yang akan digabung

VARIASI TABEL

Cara membuat tabel 3 kolom cukup sederhana. Dari sini kita bisa memodifikasinya menjadi 4 kolom, 5 baris, dst, sesuai keperluan kita. Yang penting banyaknya kolom tergantung dari bagian yang berwarna merah. Sementara banyaknya baris tergantung dari bagian yang berwarna biru. Cara menambahkan kolom atau baris dengan copy paste saja. Begitu pun kalau ingin mengurangi kolom dan baris, misalnya ingin 2 kolom dan 2 baris, cukup dihapus aja kolom dan baris itu.

Setelah jadi, kode-kode HTML tersebut harus dirapatkan atau dipadatkan ke kanan. Gunakan saja backspace. Kalau tidak dirapatkan ke kanan, tabel akan jauh letaknya dari judul. Nah, selamat mencoba

<TABLE BORDER=2>
<TR>
<TH>Nomor</TH>
<TH>Nama Siswa</TH>
<TH>Nama Sekolah</TH>
</TR>

<TR>
<TD>1</TD>
<TD>Mamat</TD>
<TD>SD Satu</TD>

<TR>
<TD>2</TD>
<TD>Soleh</TD>
<TD>SMP Dua</TD>

<TR>
<TD>3</TD>
<TD>Peang</TD>
<TD>SMA Tiga</TD>

</TABLE>

Nanti hasilnya begini:
NomorNama SiswaNama Sekolah
1MamatSD Satu
2SolehSMP Dua
3PeangSMA Tiga


Sekarang kita coba untuk tabel 4 kolom dan 5 baris

<TABLE BORDER=2>
<TR>
<TH>Nomor</TH>
<TH>Nama Siswa</TH>
<TH>Nama Sekolah</TH>
<TH>Nama Kota</TH>
</TR>

<TR>
<TD>1</TD>
<TD>Mamat</TD>
<TD>SD Satu</TD>
<TD>Jakarta</TD>

<TR>
<TD>2</TD>
<TD>Soleh</TD>
<TD>SMP Dua</TD>
<TD>Bandung</TD>

<TR>
<TD>3</TD>
<TD>Peang</TD>
<TD>SMA Tiga</TD>
<TD>Semarang</TD>

<TR>
<TD>4</TD>
<TD>Panjul</TD>
<TD>STM Empat</TD>
<TD>Surabaya</TD>


</TABLE>

Nanti hasilnya begini:

NomorNama SiswaNama SekolahNama Kota
1MamatSD SatuJakarta
2SolehSMP DuaBandung
3PeangSMA TigaSemarang
4PanjulSTM EmpatSurabaya


TABEL BERISI FOTO

Bukan hanya tulisan, tabel di atas bisa diisikan foto atau lainnya, sesuai keperluan. Jika diisikan foto hasilnya seperti ini.

Jika diisikan foto maka hasilnya begini:





TABEL BERTINGKAT

Membuat tabel bertingkat tak ubahnya membuat tabel biasa. Hanya bentuknya yang agak berlainan. Metode pembuatannya tetap sama. Tinggal copy paste dan ganti nama-nama yang tercetak hitam saja.

<TABLE BORDER=3><TR><TD COLSPAN=3 ALIGN=CENTER>PANDUAN</TD></TR><TR><TD>Vivi</TD><TD>Yuli</TD> <TD>Lusi</TD></TR></TABLE>

Nanti hasilnya begini:

PANDUAN
ViviYuliLusi


Model selanjutnya adalah sbb:

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>PANDUAN</TD>
<TD>Wawan</TD>
<TD>Agung</TD>
</TR>

<TR>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>

</TABLE>

*Untuk memudahkan penulisan memang sebaiknya ditulis begini. Namun setelah dianggap memadai, kode2 html ini harus dipadatkan agar jarak tabel tidak jauh dari kalimat di atasnya.

Nanti hasilnya begini:

PANDUANWawanAgung
YuliLusi


Masih ada model lain lagi, nih dia:

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>PANDUAN</TD>
<TD COLSPAN=2>Wawan</TD>
</TR>

<TR>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>

</TABLE>

Nanti hasilnya begini:

PANDUANWawan
YuliLusi


(Sumber: gratis45.com)


TABEL BERWARNA

Kalau berwarna hitam putih saja mungkin terasa menjenuhkan, ya? Karena itu tabel bisa dibuat berwarna. Soal kode2 warna, aq pernah memasukkannya ke dalam postingan, cari aja sendiri. Gak repot kok.

Tapi kamu jangan sembarang ngopy kode2 html berikut. Kamu masih perlu merapikannya, pokoknya sisi kanan dipenuhin. Gak percaya? Nih liat kalo cuma copy paste mentah2, jadinya terlalu jauh begini.

<TABLE BORDER=3>

<TR BGCOLOR="#FF9999">
<TD>PANDUAN</TD>
<TD>Wawan</TD>
<TD>Agung</TD>
</TR>

<TR BGCOLOR="#99CCCC">
<TD>Vivi</TD>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>

</TABLE>

Nanti hasilnya begini:















PANDUANWawanAgung
ViviYuliLusi


Tapi kalo dirapikan seperti ini:

<TABLE BORDER=3><TR BGCOLOR="#FF9999"><TD>PANDUAN</TD>
<TD>Wawan</TD><TD>Agung</TD></TR><TR BGCOLOR="#99CCCC"><TD>Vivi</TD><TD>Yuli</TD><TD>Lusi</TD></TR></TABLE>

maka hasilnya...eng...ing...eng rapi begini:



PANDUANWawanAgung
ViviYuliLusi


Selamat mencoba. Pokoknya begitu dasarnya. Soal bentuk dan model tabel, cari aja di Um Gugel, dengan kata kunci "membuat tabel html". Tinggal pilih, lalu modifikasi aja.

Nah ada lagi tabel dengan tiga kolom. Jadi kalo kamu mau buat tabel dengan 10 baris, misalnya, kamu cukup copy paste saja dari script ini. Tinggal ganti kata-katanya sesuai keperluan.

Nih script html-nya:

<table border="2"><tbody><tr><td style="font-weight: bold;">Hasil Perhitungan </td><td style="font-weight: bold;">Rumus 1</td><td style="font-weight: bold;">Rumus 2</td></tr><tr><td>Positif</td><td>A x B + C</td><td>A + B x C</td></tr><tr><td>Negatif</td><td>A - B - C</td><td>A : B - C</td></tr><tr><td>Netral</td><td>A + B + C</td><td>A + B - C</td></tr></tbody></table>

Nanti hasilnya begini:

Hasil Perhitungan Rumus 1Rumus 2
PositifA x B + CA + B x C
NegatifA - B - CA : B - C
NetralA + B + CA + B - C


Begitu cara membuat tabel yag rapi. Kalo kamu mau membuat 4 kolom atau lebih ya tinggal di copy paste aja. Coba dulu, kalo uda positif bagus, baru dilanjutin. Selamat mencoba.

Selasa, 17 November 2009

Widget Jadwal Azan


Anda ingin mengetahui jadwal azan? Silakan copy paste kode html berikut. Anda bisa mengganti kota, sesuai tempat Anda berdomisili.

<script type="text/javascript" src="http://www.mahesajenar.com/scripts/adzan.php?kota=Jakarta&type=text1" > </script>

Maka nanti jadinya begini:



(Sumber: mahesajenar.com)



Senin, 16 November 2009

Widget Tahun Hijriah


Kita mengenal berbagai jenis kalender, di antaranya kalender masehi dan kalender hijriah. Pemakaiannya tentu disesuaikan dengan keperluan masing-masing. Biasanya kita sulit untuk mengonversi dari tahun masehi ke tahun hijriah atau sebaliknya. Widget ini berisi keduanya. Anda cukup meng-copy kode html berikut, lalu paste-kan di blog Anda.

<br/><center><script src="http://www.mahesajenar.com/scripts/hijriah.php?tz=7&type=jadwal" type="text/javascript"> </script></center>


Maka nanti jadinya begini:





Kalau ingin bentuk lain, silakan copy paste kode html berikut:

<img src="http://www.mahesajenar.com/scripts/hijriah.php?tz=7&type=img" />


Maka nanti jadinya begini:




Catatan:

<br/>
berarti break atau jarak 1 spasi, bisa dihapus atau ditambah sesuai keperluan

<center> berarti postingan ada di tengah, harus diakhiri dengan </center>

Contoh kedua, tanpa <br/> dan <center>


(Sumber: mahesajenar.com)


Selasa, 14 April 2009

Mengetahui Jumlah Pengunjung Online


Mengetahui jumlah pengunjung blog yang sedang online bisa dilakukan dengan berbagai cara. Ada yang terintegrasi ke dalam widget lain, misalnya mypagerank.net atau 24counter.com. Ada yang terpisah, bahkan dilengkapi dengan info mengenai asal pengunjung, halaman yang dibaca, berapa lama dia membaca, dsb.

Nah, yang widget khusus kamu bisa liat di sini: whos.amung.us, radarurl.com, atau whosread.com. Coba aja sendiri, pelajari apa kekurangan dan kelebihan setiap website itu. Cukup gampang mendapatkan widget2 itu, gak perlu sign up atau mendaftar kok.

Nih contoh dari whos.amung.us dan radarurl.com

whos-among-us-widget


radarurl-widget

Kamis, 26 Februari 2009

Memasang Kotak "Kontak Saya"


Agar komunikasi antara pemilik blog dengan pembaca blog terjalin erat, tentu perlu ada saling kontak. Selain lewat shoutmix dan semacamnya sebagai "buku tamu" ada pula ruangan di bawah setiap postingan. Caranya adalah mengklik kata "komentar".

Ada cara lain untuk melakukan hal itu, yakni memasang kotak "contact form" atau "contact us". Dalam bahasa Indonesia "kontak kami" atau "kontak saya". Lihat contohnya punya aq di bagian hampir paling bawah.

Untuk memasang kotak seperti itu, silakan kunjungi kontactr.com . Kamu mesti daftar dulu, isikan alamat email, user name, dan password. Setelah itu klik...

Lantas bukan berarti kotak itu sudah dapat dipasang. Kamu harus buka email kamu, verifikasi ke kontactr dari sana. Isikan username dan password yang kamu isikan tadi. Selanjutnya adalah embed atau copy kode html yang ada. Kalo kamu cuma mau kotaknya saja boleh. Atau boleh juga bersama kotak kecil yang berisi "contact me", "kontactr me", dan "contact us". Aq pasang keduanya, liat yang kotak kecil di bagian sidebar kanan.

Kamu boleh ganti kata "your name" dengan "nama kamu", "your email" dengan "email kamu", dsb. Gampang kok.

Kode-kode html nya kamu pasang dengan cara sign in di blogger -> tata letak -> tambah gadget -> html/javascript -> simpan

Senin, 23 Februari 2009

Membuat Nomor Halaman Pada Blog


Coba kamu perhatiin mesin-mesin pencari. Begitu kamu memasukkan kata kunci lalu klik, kan muncul beberapa website. Di bawahnya ada angka-angka 1 2 3 4 5 6, dst yang menunjukkan halaman yang bisa diklik.

Pada beberapa website, muncul pula angka-angka demikian. Begitu pula pada blog aq ini. Coba liat pada bagian paling bawah. Ada tulisan page 1 of 10, lalu angka 2 3 4 5 dan next. Namun kalo kita klik angka 5, misalnya, maka muncul prev. Itulah yang aq maksud nomor halaman pada blog.

Aq juga dapetnya secara kebetulan di master-blog-ayiek. Katanya tinggal copy paste saja, ya aq ikutin. Nih, aq kasih tau tulisan amburadulnya. Kamu tinggal copy -> sign in ke blogger -> tata letak -> tambah gadget -> dasar-dasar -> html/javascript -> simpan. Lihat hasilnya...


<style>

.showpageArea {padding: 1 1px;margin-top:5px;margin-bottom:5px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 1px 1px !important;
padding: 1px 1px ;margin:0px 1px;
text-decoration: none;
}

.showpageArea a:hover {
font-size:9px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 1px 1px !important;
padding: 1px 1px ;margin:0px 1px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:9px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpagePoint {font-size:11px;
padding: 1px 2px 1px 2px;
margin: 1px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}

.showpage a:hover {font-size:9px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a:link,.showpage a:link {
font-size:9px;
padding: 1px 2px 1px 2px;
margin: 1px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:9px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>

<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=3;
var firstPageWord = '<=';
var endPageWord = '=>';
var upPageWord ='Prev';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script><a href='http://master-blog-ayiek.blogspot.com' target='_blank'>..</a>

Kalo kamu bisa, kamu boleh mengubah warna utama, warna latar, dan ukuran font. Tapi begini juga gak apa-apa. Selamat mencoba.

Jumat, 20 Februari 2009

Cek Google PageRank


Bagi sementara blogger, keberadaan pagerank atau pemeringkatan dianggap penting. Kabarnya, pihak tertentu seperti advertiser hanya mau memasang iklan atau bekerja sama, dengan blog yang memiliki rank atau peringkat tinggi. Setau aq peringkat dalam Google berkisar antara 0 hingga 10. Makin tinggi angkanya, makin bagus ranknya.

Biasanya rank yang dilakukan Google berdasarkan GIP (Google Index Pages) dan GBL (Google Back Link). Silakan cek Google PageRank blog kamu di sini. Masukkan nama blog kamu, klik Check PR, dan hasilnya akan keluar dalam beberapa detik. Cepat, kan.




Check Page Rank of any web site pages instantly:




This free page rank checking tool is powered by Page Rank Checker service

Memasang Widget Artikel Terpopuler


Di antara sekian banyak artikel atau postingan yang ada di blog kamu, artikel apa yang terpopuler? Artikel terpopuler biasanya dilihat dari dua segi. Pertama, dari banyaknya komentar yang masuk, baik melalui kotak di bawah postingan maupun dari bagian lain. Yang jelas bukan dari shoutmix atau buku tamu.

Kedua, dari banyaknya artikel yang dilihat atau dibaca pengunjung. Mungkin juga gak dibaca sampe abis, yang penting diklik. Sayangnya susah nyari blog dari negeri kita yang memuat rahasia itu. Aq iseng-iseng cari lewat Om Gugel, eh dapet dua website dari negeri seberang. Coba kamu iseng2 buka wowzio.com dan foxrecord.com.

Yang wowzio aq agak bingung makenya. Kalo dulu, kata salah satu blog dari Indon, pertama-tama kita klik build widgets lalu masukin nama blog kita dan bla...bla...bla... Tapi kemarin begitu aq klik build widgets, yang keluar lain, mungkin lagi di-upgrade kali websitenya.

Tentang foxrecord, langsung buka aja websitenya dari sini, tinggal klik di sini. Nanti ketemu tombol "add to blogger", klik, sign in, sampe deh ke blog kita dan langsung terpasang. Widget ini bisa juga untuk Wordpress. Nih, contohnya punya aq di side bar bagian kanan paling bawah.

Yang di bawah ini kode-kode untuk artikel terpopuler berdasarkan komentar yang paling banyak masuk dari pengunjung blog kita. Copy dan paste-kan lewat -> tata letak (layout) -> tambah gadget -> dasar-dasar -> html/javascript -> simpan.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback
&_id=ff855e4f4d4a10fde1c2eb32074f99cd&url=http%3A%2F%2Fnamablog.blogspot.com&num=10"
type="text/javascript"></script>
<span >Widget by
<a href="http://www.bloggerbuster.com" target="_blank">Blogger Buster </a></span>

Kata yang berhuruf hitam harus diganti dengan nama blog kamu, sementara yang hijau boleh diganti dengan angka lain, terserah kamu.

Sori nih, aku liat kode-kode ini dari beberapa blog. Jadi aq gak tahu siapa yang copy paste pertama. Biasanya sih suka dimodifikasi. Maka sumbernya aq belum tulis. Soalnya aq berusaha cari sumber aslinya.

Selasa, 17 Februari 2009

Mengetahui Berapa Lama Loading Suatu Blog


Bila blog memiliki terlalu banyak pernak-pernik, biasanya baru bisa terbuka dalam jangka waktu relatif lama. Apalagi bila koneksi internet sedang lemot. Bisa-bisa orang yang akan mengunjungi blog kita, tidak sabaran dan pergi begitu saja. Nah, untuk mengukur berapa lama loading bblog kamu, klik aja di sini. Kamu cuma masukin nama blog kamu, lalu klik tombol start stop watch. Tunggu deh beberapa lama, ya sekitar 20 detik. Kalo 1 menit lebih baru terbuka semua, wah berat sekali. Perlu ada widget yang dibuangin. Nih, contoh gambarnya, supaya kamu lebih jelas.


Mengetahui Jumlah Postingan dan Jumlah Komentar


Berapa banyak jumlah postingan kamu di blog? Berapa banyak pula jumlah komentar dari pengunjung blog yang sudah kamu terima? Beberapa waktu lalu aq sudah menuliskannya di bawah judul "statistik blog". Tak jauh berbeda dengan itu, ada cara lain, lho. Ini dia kode html-nya. Cara memasukkannya, ya seperti biasa:

buka blogger -> tata letak (layout) -> tambah gadget -> html/javascript -> simpan.


JUMLAH POSTINGAN


<script style="text/javascript">
function showpostcount(json) {
document.write('<b><i> <font color="#9E5205" size="6">' + parseInt(json.feed.openSearch$totalResults.$t,10) + '<br></font></i></b>');
}</script>

<script src="http://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>


JUMLAH KOMENTAR

<script style="text/javascript">
function showcommentcount(json) {
document.write('<b><i> <font color="#9E5205" size="6">' + parseInt(json.feed.openSearch$totalResults.$t,10) + '<br></font></i></b>');
}</script>

<script src="http://yourblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showcommentcount"></script>

Ini cuma kodenya. Kata yang berwarna hitam, harus diganti dengan nama blog kamu. Kamu mesti buat sendiri judulnya, misalnya "jumlah postingan", "artikel di blog ini", "jumlah komentar", "komentar di blog ini", dsb. Nanti yang keluar cuma angka. Tapi itu saja sudah merupakan info yang sangat berharga.

(Sumber: anujpathania.blogspot.com)


Membuat "Page Views Counter" atau "Telah Dibaca Sekian Kali"


Apakah kamu pernah menghitung berapa kali postingan kamu sudah dibaca pengunjung blog? Pasti belum, kan? Nah, untuk mengetahui postingan mana yang disukai pengunjung blog, kamu perlu memasang widget "page views counter". Dari situ kamu tau postingan-postingan mana aja yang sering dibaca pengunjung.

Setelah berkelana lewat Om Gugel dan cari-cari di blog orang, aq menemukan sesuatu yang menarik dari anujpathania.blogspot.com. Ternyata, cara memasang "views" pada blog relatif mudah. Tapi kata dia hal tersebut masih eksperimen. Aq belum tau jadinya bagus gak, tapi coba aja deh supaya gak penasaran.

Pertama, buka blogger kamu -> tata letak (layout) -> Edit HTML.

Kedua, back up template kamu.

Ketiga, centang expand widget.

Keempat, temukan kode <p><data:post.body/></p>

Kelima, paste kode di bawah ini persis di atas kode tadi.

<b:if cond='data:blog.pageType == "item"'>
<div id='hit-counter'>
<p><i><font color='#666666'><script src='http://hitcounter.6te.net/counter.php' type='text/javascript'/> Views </font></i></p>
</div></b:if>

Setelah simpan template, coba dulu misalnya dengan membuka artikel A. Kalo sudah keluar kata "Views" di bawah judul postingan, berarti copy paste berjalan sukses. Kamu boleh mengganti kata "views" dengan kata apa saja sesuai selera kamu. Nah, selamat mencoba.

Sabtu, 14 Februari 2009

Salam Sapaan untuk Pengunjung Blog


Untuk mengakrabkan pemilik blog dengan pengunjung blog, tentu perlu ada salam sapaan. Misalnya "Selamat datang di blog ini" atau "Selamat menikmati blog ini". Bisa pula dengan kalimat lain. Nah, bagaimana cara membuatnya? Seperti halnya yang lalu-lalu, setelah bolak-balik liat blog orang, saya dapat scriptnya. Mudah-mudahan memudahkan kamu, sekaligus memperkaya aksesori blog kamu.


SCRIPT PERTAMA

<script type="text/javascript">
var yourName = prompt("Boleh Tahu Nama Anda?", "Nama Anda");
</script>


SCRIPT KEDUA

Selamat Datang <script type="text/javascript">document.write(yourName)</script>! Suatu kehormatan bagi Tips & Trik blog atas kunjungan <script type="text/javascript">document.write(yourName)</script> ini. Tips & Trik Blog sangat berharap kunjungan <script type="text/javascript">document.write(yourName)</script> berikutnya


Perlu diperhatikan, script pertama dan script kedua jangan dijadikan satu. Buat dalam dua bagian terpisah. Script pertama harus di atas script kedua. Masih ingat kan cara melakukan copy paste? Kalau lupa, nih begini: masuk halaman blog kamu --> tata letak --> tambah gadget --> dasar-dasar --> html/javascript --> simpan --> jadi dah.

Kata-kata dalam script boleh kamu ganti, lho. Script ini saya ambil dari mana hayo? Liat aja pada script kedua, di situ tertulis nama blognya.

Ada lagi nih aksesori "tanda peringatan" akan suatu konten blog. Gak usah basa-basi lagi, nih kode htmlnya:

<script type="text/javascript">
confirm('Blog ini berisi konten dewasa. Apakah Anda yakin untuk melanjutkan?');
if (confirm('Blog ini berisi konten dewasa. Apakah Anda yakin untuk melanjutkan?')) {
window.location = "http://asahotakbersama.blogspot.com/";
}
else {
window.location = "http://numismatik-indonesia.blogspot.com/";
}
</script>

Jika ditekan OK akan menuju asahotakbersama.blogspot.com, sementara jika ditekan CANCEL akan menuju numismatik-indonesia.blogspot.com. Ganti aja nama blog tersebut.

Sudah dulu ya, nanti kalo ketemu widget atau aksesori menarik, aq akan posting lagi. Bye...bye...

Efek Burung, Kupu-kupu, dan Bintang pada Blog


Jenuh melihat blog kamu? Jangan dong, supaya tidak jenuh tambahkan saja beberapa aksesori. Nah, ini aq kasih tau yang menarik, yakni burung dan kupu-kupu terbang. Ya, supaya seru aja. Liat, si kupu-kupu terbang ke sana ke mari mengepakkan sayapnya. Perhatikan di blog aq ini. Tunggu beberapa detik, dia emang gak langsung muncul, mesti makan dan minum dulu, he...he...he...Karena kupu-kupunya aq pasang duluan, burung dan bintangnya aq gak pasang. Takut kupu-kupunya mati.

Ini dia kode html nya. Kamu tinggal copy, masuk ke blog kamu, buka tata letak, lalu klik tambah gadget. Sesampainya di "Dasar-dasar" cari "html/javascript", paste, simpan, dan selesai dah.


BURUNG TERBANG

<script language="JavaScript1.2"
src="http://www.geocities.com/yono_pati/burung.js">
/***********************************************
* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/
</script>


KUPU-KUPU TERBANG

<script language="JavaScript1.2" src="http://www.geocities.com/yono_pati/kupu.js">
</script>


BINTANG JATUH

<script language="JavaScript"
src="http://www.geocities.com/yono_pati/bintang.js">
</script>

Aq dapet sumbernya dari sini nih.

Kamis, 12 Februari 2009

Membuat Daftar Isi Blog


Kalo blog kita kepenuhan, orang tentu jadi susah mencari-cari suatu artikel atau tulisan. Sama seperti kita ingin membeli buku, yang sering diliat adalah daftar isi. Nah, kalo orang ingin liat-liat blog kita, daftar isilah sasarannya. Sayangnya blog kamu tidak mempunyai daftar isi sehingga pengunjung blog kelimpungan mencari tulisan yang dianggap menarik.

Jangan gundah, sobat, kini ada penangkalnya. Copy aja kode html berikut ke dalam blog sobat, ingat lewat "tambah gadget"-->"html/javascript"-->"paste"-->SIMPAN. Jadi deh.

<div style="border: 1px solid #000; overflow: auto; height: 220px;">
<script style="text/javascript" src="http://mizwar.blog.googlepages.com/daftar_isi.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://NAMA-BLOG-KAMU.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&max-results=999
&callback=showrecentposts"></script>
</div>

Ingat, NAMA-BLOG-KAMU harus diganti, ya dengan nama blog kamu. Kata "var numchars = 100" boleh diganti angkanya menjadi 30, 40, 50, atau berapa saja. Begitu pula kata "true", bisa diganti "false". Liat contohnya di sidebar blog aq, itu tuh di sebelah kanan.

Selasa, 10 Februari 2009

Membuat "Back to Top" dan "Statistik Blog"


Bila suatu artikel panjang dan kamu sudah mencapai halaman paling bawah, tentu makan waktu lama bila harus kembali ke atas menggunakan scroll pada monitor atau mouse. Nah, supaya cepat biasanya pada bagian bawah ditulis "back at top" atau "kembali ke atas". Caranya cukup mudah kok, kamu tinggal klik YANG INI. Nanti copy kode html itu, lalu paste-kan ke blog kamu. Jadi dah. Cuma kadang langsung jadi, kadang agak bermasalah. Bila belum bisa kembali ke atas, coba ganti tulisan www.blogger.com menjadi nama blog kamu. Oke?

Sekarang tau gak, berapa banyak jumlah postingan kamu dan berapa banyak komentar dari pembaca blog yang kamu uda terima? Belum tahu, kan? Makanya pasang widget ini, biasa co-pas aja kode html di bawah ini:


<script style="text/javascript">

function numberOfPosts(json) {
document.write('Jumlah Postingan: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}

function numberOfComments(json) {
document.write('Jumlah Komentar: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}

</script>

<ul><li><script src="http://namablogkamu.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>

<li><script src="http://namablogkamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>

<span ><a href="http://assessmyblog.blogspot.com/" target="_blank">Widgets for Blogger</a></span>

Kata yang berwarna hitam boleh kamu ganti, misalnya "jumlah postingan" menjadi "jumlah artikel", "total posts", atau lainnya. Sementara yang berwarna biru harus kamu ganti dengan nama blog kamu, misalnya abrakadabra.blogspot.com. Lihat contohnnya pada sidebar di bagian kanan atas. Lumayan 'kan.

Rabu, 04 Februari 2009

Kumpulan Tag HTML

<!-- -->
Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser

<a href>
Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut

<a name>
Membuat nama bagian yang didefinisikan pada link pada halaman yang sama

<applet>
Sebagai awal dari Java applets

<area>
Mendefinisikan daerah yang dapat diklik (link) pada image map

<b>
Membuat teks tebal

<basefont>
Membuat atribut teks default seperti jenis, ukuran dan warna font

<bgsound>
Memberi (suara latar) background sound pada halaman web

<big>
Memperbesar ukuran teks sebesar satu point dari defaultnya

<blink>
Membuat teks berkedip

<body>
Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link

<br>
Pindah baris

<caption>
Membuat caption pada tabel

<center>
Untuk perataan tengah terhadap teks atau gambar

<comment>
Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser

<dd>
Indents teks

<div>
Represents different sections of text.

<embed>
Menambahkan sound or file avi ke halaman web

<fn>
Seperti tag <a name>

<font>
Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks

<form>
Mendefinisikan input form

<frame>
Mendefinisikan frame

<frameset>
Mendefinisikan attribut halaman yang akan menggunakan frame

<h1> ... <h6>
Ukuran font

<head>
Mendefinisikan head document.

<hr>
Membuat garis horizontal

<html>
Bararti dokumen html

<i>
Membuat teks miring

<img>
Image, imagemap atau an animation

<input>
Mendefinisikan input field pada form

<li>
Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>,
<menu>, <ol> and <ul> )

<map>
Mendefinisikan client-side map

<marquee>
Membuat scrolling teks (teks berjalan) - hanya pada MS IE

<nobr>
Mencegah ganti baris pada teks atau images

<noframes>
Jika browser user tidak mendukung frame

<ol>
Mendefinisikan awal dan akhir list

<p>
Ganti paragraf

<pre>
Membuat teks dengan ukuran huruf yg sama

<script>
Mendefinisikan awal script

<table>
Membuat tabel

<td>
Kolom pada tabel

<title>
Mendefinisikan title

<tr>
Baris pada tabel

<u>
Membuat teks bergaris bawah

Minggu, 01 Februari 2009

Mengecek Index, Page Rank, IP Address

Apakah blog kamu sudah terindex oleh Um Gugel, Pak Yahu, dan Mas MSN? Kalo belum gampang, nih pergi ke sini CEK INDEKS. Langkahnya cukup mudah. Kamu cuma masukin nama blog, klik, kotak "CHECK!" dan tunggu beberapa detik. Eng...ing...eng...muncul dah.

Kalo mau ngecek Google Rank ato Alexa Rank, klik YANG INI. Ditanggung tokcer hasilnya.

Kalo pengen tahu Page Rank blog kamu, nih PENCET AJA. Sip deh keluarannya.

Coba berapa IP address kamu? Gak tahu kan? Makanya, masuk ke sini IP ADDRESS. Akan terlihat juga, alamat hostname, detil browser kamu, dan masih banyak lagi. Coba deh, jadi tahu nanti.

Mau tau berapa harga link kamu? Cek di sini LINK PRICE. Paling-paling $0,00000, seperti punya saya ini, ha...ha...ha...Buktikan sendiri!

Seberapa tinggi popularitas link kamu bisa dilihat di LINK POPULARITY.

Udahan dulu ya, nanti kalo ada hal-hal baru aku postingin lagi. Bye...bye...

Mengukur Berat Blog


Untuk mengukur seberapa berat blog kamu, silakan pergi ke sini nih: SPEED TEST. Maksimal kamu bisa memasukkan 10 blog. Jadi ngukurnya sekalian. Kalau blog berat biasanya orang susah melakukan loading. Bisa-bisa orang gak jadi mampir ke blog kita. Biasanya kalau berukuran lebih dari 100 KB, memerlukan waktu beberapa detik untuk loading. Yang harus diperhatikan adalah sizenya. Makin besar, ya makin lama loading-nya. Agar blog tidak berat, sebaiknya widget yang kurang berguna dibuang saja.

Boleh juga ngukur di sini, cuma adanya agak ke bawah. Maklum nih masih bingung soal2 kode html. Gak apa2 ya buat sementara waktu mah.

































Your domain(s): Enter each address on a new line (Maximum 10)




(eg. iwebtool.com)








Powered by iWEBTOOL



Sabtu, 31 Januari 2009

Siapa yang Melakukan Copy Paste dan Harga Blog

Ada cara untuk mengetahui siapa saja yang telah menyontek blog kamu. Atau mungkin kamu sendiri yang melakukan copy paste pada blog orang? Sebenarnya boleh saja kita melakukan copy paste, tentu asalkan menyebutkan sumbernya. Kan semakin banyak sumber, semakin mudah orang mencarinya. Nah, website itu namanya copyscape.com . Boleh dicoba.

Nah, yang ini buat mengetahui segala macam, misalnya apakah blog kita sudah dikenal oleh Google, Yahoo, atau MSN. Berapa halaman yang diliat pengunjung hari ini dan kemarin, dsb, dll. Nama websitenya mypagerank.net. Tinggal masuk aja, lalu tulis nama blog kita, ketahuan dah hasilnya. En terakhir copy - paste ke blog kita. Gampang kan?

Mau tau berapa harga blog kita? Masuk aja ke SINI. Tentu ini harga bukan sungguhan, hanya menunjukkan banyak sedikitnya pengunjung. Bisa saja blog yang isinya berkualitas, jarang didatangi pengunjung. Sebaliknya blog yang cuma co-pas (copy paste) rame didatangi pengunjung, padahal yang datang cuma mau kasih komentar doang, seperti blogwalking, visiting u, hi..., mampir bentar, dsb.

Kontak Saya

Your Name :
Your Email :
Subject :
Message :
Image (case-sensitive):
Glitter Text Generator at TextSpace.net