Blog Tips and Trick

New 3D Template Transformers

2009-10-08T03:30:00.000-07:00

New 3D Template Transformers

Eventually Blog Tips and Trick finished well to make this 3D template,This template besides looks elegant, also been equipped with the latest features such as auto readmore, animated text, image opacity effect, the tab view menu, show hide floating menu, and cool horizontal menu. if you want to use this template, you can download it for free. by clicking the download below.

This is an example of image templates

Auto Readmore and Tabview Feature

Cool Horizontal Menu

Show Hide Guest Book/Shoutbox

Lower and Footer Bar

Download Here | Demo Here

Keep enjoy and thank you for downloading my Template

How To Create a Circle in CSS

2009-10-05T20:12:00.000-07:00

How To Create a Circle in CSS atau membuat sebuah bagian template menjadi berbentuk bulat,bundar dan sebagainya. Tips ini hampir sama dengan Tips sebelumnya yaitu How To Rounded Corner in CSS , tentang membuat sudut-sudut melingkar pada bagian template, bedanya tips kali ini yaitu membuat bagian template menjadi bulat atau bundar seluruhnya. sebagai contoh Blog Tips and Trick membuat bagian header template yang dibagi 3 bagian, dan 2 dari bagian header tersebut manjadi bulat seperti pada gambar dibawah ini.

Gambar 0.1

Untuk membuat agar bagian header tersebut menjadi bulat atau berbentuk lingkaran. kita perlu menggunakan kode -Moz-Border-Radius- pada kode CSS yang ada pada halaman HTML template kita pada bagian header tersebut. contohnya seperti dibawah ini.

#header-wrapper1 {
float: left;
margin: 12px 0px 12px 0px;
padding: 0px 0px 0px 0px;
width: 170px;
height: 170px;
background: $headerbgColor;
border-top: 10px solid #747474;
border-bottom: 10px solid #747474;
border-left: 10px solid $headerBorderColor;
border-right: 10px solid $headerBorderColor;
-moz-border-radius-topleft: 95px;
-moz-border-radius-topright: 95px;
-moz-border-radius-bottomleft: 95px;
-moz-border-radius-bottomright: 95px;
}

Pada contoh kode diatas yang berwarna kuning adalah kode radius yang akan membuat header tersebut menjadi bulat, dan kode yang berwarna biru adalah ketebalan garis pinggir atau border tersebut. bila kamu tidak mau memakai garis pinggir, kamu bisa menghapus kode yang berwarna biru tersebut. yang penting untuk membuat header tersebut menjadi bulat adalah menentukan nilai ukuran dari setiap -Moz-Border-Radius-Width( Lebar) dan Height(tinggi).

pada dasarnya, setiap template yang kamu download dan kamu gunakan. biasanya jarang terdapat ukuran Height pada setiap bagian template tersebut. seperti pada bagian Header sidebar dll. karena dapat membatasi jumlah widget pada bagian tersebut. bila kamu ingin membuat bagian dari template tersebut menjadi bulat, hal pertama yang haru kamu lakukan adalah membuatnya menjadi kotak terlebih dulu dengan memberi nilai ukuran height dan width yang sama. setelah itu kamu masukan kode -moz-border-radius- nya. contohnya untuk ukuran 170px; X 170px. saya memberi nilai 95px pada setiap sisi radiusnya. Untuk lebih jelasnya silahkan kamu praktekkan tips ini seperti contoh kode di atas. bila kamu berhasil membuat bagian dari template tersebut menjadi bulat, kamu bisa memasukan gambar yang bulat juga seperti contoh gambar speaker dibawah ini.

Sehingga menjadi seperti gambar dibawah ini

Gambar 0.3

Selamat Mencoba dan semoga bermanfaat, mohon maaf bila terapat kekurangan pada postingan kali ini, maklum masih pemula nieh....Salam blogger mania.

How to Create Rounded Corner in CSS

2009-10-05T18:53:00.000-07:00

How to Create Rounded Corner in CSS" atau bagaimana caranya untuk membuat sudut melingkar atau bulat pada kode CSS. Tips ini cocok sekali bagi anda yang ingin agar tampilan templatenya terlihat 3D.dengan sudut-sudut melingkar pada setiap bagian templatenya, seperti sidebar, header dll. Untuk membuat setiap bagian body template kita agar mempunyai sudut melingkar, caranya yaitu kita perlu menambahkan kode CSS -Moz-Border-Radius, pada bagian body template tersebut. misalnya kita ingin membuatnya pada bagian sidebar. caranya yaitu edit kode CSS sidebar pada halaman HTML template kamu dengan menambahkan kode -Moz-Border-Radius- seperti contoh dibawah ini.

#sidebar1 .widget {
margin: 0px 0px 5px 0px;
padding: 5px 5px 5px 5px;
background: $sidebar1bgColor;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
}

Maka hasilnya akan seperti gambar dibawah ini : maaf gambar ini hanya contoh loch....

Contoh gambar sidebar diatas menggunakan kode -moz-border-radius- pada setiap sisinya dengan ukuran 20px atau 20pixel. bila kamu ingin membuat agar sudut bulatan tersebut hanya pada sebagian sisi sidebar saja. kamu hanya cukup menggunakan 1, 2 atau tiga bagian dari kode radius tersebut.

contohnya untuk semua sisi

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;

Contoh untuk sisi sebelah kiri atas dan kanan atas

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;

Pada dasarnya kita hanya cukup menambahkan kode -moz-border-radius- ditambah dengan nilai ukuran dari radius tersebut dan sisi yang kita inginkan, seperti Topleft, Topright, Bottomleft, Bottomright dll.

Ok saya rasa cukup sekian dulu postingan Blog Tips and Trick tentang membuat sudut melingkar dengan kode CSS kali ini. mohon maaf bila terdapat kekurangan pada setiap isi postingan saya. maklum masih pemula.... semoga bermanfaat dan salam Blogger mania.

How To Create 3D Template

2009-10-05T17:46:00.000-07:00

How to create 3D Template, atau bagaimana caranya membuat agar template kita terlihat 3D. cara untuk membuat bagian dari body template kita agar terlihat 3D, yaitu kita hanya perlu menambahkan nilai ukuran border dan perpaduan warna pada pada bagian template tersebut. ada juga cara lainnya, yaitu dengan memasukan background gambar yang sudah berbentuk 3D pada bagian template tersebut.

Yang akan Blog Tips and Trick bahas kali ini, yaitu tentang cara membuat agar tampilan dari template kita terlihat 3D tanpa menggunakan Background gambar. contohnya untuk membuat bagian sidebar, Headder, dll dari template tersebut terlihat 3D seperti contoh pada gambar dibawah ini.

Agar bagian template kita terlihat 3D seperti pada contoh gambar diatas. caranya adalah sebagai berikut ini.

1. Misalnya kita akan membuat bagian sidebar kita terlihat 3D. yang harus kamu lakukan adalah Edit kode CSS sidebar tersebut pada halaman HTML template kamu dengan memberi nilai ukuran border dan paduan warna pada background dan setiap sisi sidebar itu, contohnya :

#sidebar1 .widget {
margin: 0px 0px 5px 0px;
padding: 5px 5px 5px 5px;
background: #0000c0; /*-Background = Biru --*/
border-top: 10px solid #6666ff;   /*-Border atas = Biru Muda-*/
border-bottom: 10px solid #6666ff; /*-Border Bawah = Biru Muda-*/
border-left: 10px solid 1414b0; /*-Border kiri = Biru Tua--*/
border-right: 10px solid 1414b0; /*-Border kanan = Biru Tua--*/
}

2. Terus misalnya pada bagian Header sidebar tersebut ingin dibuat 3D juga, caranya yaitu :

#sidebar1 h2 {
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: center;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: none;
text-decoration: none;
background: #cc0000; /*-Background = Merah --*/
border-top: 10px solid #ff7070;   /*-Border atas = Merah Muda--*/
border-bottom: 10px solid #ff7070; /*----Border Bawah = Merah Muda-*/
border-left: 10px solid #b00000;   /*-Border kiri = Merah Tua-*/
border-right: 10px solid #b00000;   /*Border kanan = Merah Tua--*/
}

Maka hasilnya akan seperti pada gambar dibawah ini.

Pada dasarnya untuk membuat bagian template tersebut agar terlihat 3D, kita hanya perlu memberi ukuran border dan perpaduan warna saja, silahkan kamu coba praktekkan tips ini pada template kamu. dan bila kamu berminat dengan template 3D karya Blog Tips and Trick, kamu bisa lihat contoh templatenya dan mendownloadnya disini. saya rasa cukup sekian dulu postingan Blog Tips and Trick tentang cara membuat tampilan template 3D kali ini. semoga bermanfaat dan salam Blogger mania.

Teks Area dengan Flip Background Image

2009-10-04T13:01:00.000-07:00

Teks area dengan Flip Background Image, Pada postingan kali ini, Blog tips and Trick akan membahas tentang cara membuat text area dengan 2 background gambar yang akan berubah dengan mouse over, mungkin para blogger ataupun anda sudah tak aneh lagi dengan yang namanya Teks area yang sering anda lihat pada setiap blog ataupun website, dimana terdapat beberapa tulisan yang terletak pada kotak teks area tersebut. tapi bagaimana dengan kotak teks area yang mempunyai background gambar serta warna tulisan yang bisa berubah dengan mouse over. mungkin sebagian dari anda masih banyak yang belum tahu tentang trik ini. contohnya kurang lebih seperti dibawah ini, coba anda gerakan mouse anda ke kotak area dibawah ini, Tulisan dan gambar backgroundnya akan berubah dengan digerakkannya mouse anda.

Bagi anda yang berminat untuk membuat teks area seperti pada contoh di atas pada begian postingan anda, caranya adalah sebagai berikut ini.

1. Anda copy semua kode dibawah ini, lalu paste kode tersebut tepat dibawah kode ]]></b:skin> pada bagian halaman Html template anda.

Silahkan anda rubah tulisan yang dicetak tebal dan berwarna kuning diatas sesuai dengan yang anda inginkan. misalnya pada bagian textarea.imageOne, tertulis background-color:000000; yaitu untuk warna background. background-image:url(Masukan Link gambar ana disini); yaitu untuk background gambar, silahkan anda masukan link gambar yang anda inginkan. dan color:ff0000; yaitu untuk warna Teks. semua kode yang ada pada bagian bawah textarea.imageOne, yaitu gambar ataupun warna Teks yang akan tampil pertama dan kode yang terdapat dibawah textarea.imageTwo, yaitu yang akan tampil ketika mosue digerkan atau Mouse over.

3. Setelah anda selesai mencopy, meng-edit dan mempaste semua kode diatas. sekarang adalah cara memasukan kode Teks area kedalam postingan. caranya yaitu anda copy kode dibawah ini terus anda masukan kedalam postingan anda.

<textarea
rows="12" cols="60"
class="imageOne"
onMouseOver="this.className='imageTwo'"
onMouseOut="this.className='imageOne'">

Tulis teks yang anda inginkan disini

</textarea>

Keterangan :

Bila anda ingin merubah ukuran Teks area tersebut. silahkan anda ganti ukuran rows dan cols-nya seperti yang dicetak tebal dan berwarna kuning pada bagian kode di atas. rows yaitu untuk ukuran tinggi dan cols untuk ukuran lebar kotak teks area tersebut.

4. Selesai.

Silahkan mencoba dan semoga bermanfaat. salam blogger mania.

Cara Membuat Google Sitemap

2009-10-03T10:36:00.000-07:00

Cara membuat google sitemap untuk blogger blogspot, caranya yaitu pertama kamu login ke layanan gratis google yaitu Webmasters tools google dengan account google kamu. setelah itu kamu klik Add site, terus masukan url blog kamu pada kolom add site. setelah kamu klik add site, kemudian dari pihak webmasters google akan memberikan kode berupa meta content, dengan tujuan untuk memverifikasi apakah kamu itu adalah pemilik website tersebut atau bukan. kurang lebih contoh meta contentnya seperti dibawah ini..

Yang perlu kamu lakukan adalah, copy kode tersebut, terus kamu paste ke ke dalam halaman HTML template blog kamu, tepat dibawah kode <head>. contoh lengkapnya seperti dibawah ini.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='+u636AvikZsTh2E3QLuMozuF7mFa8+2c/dJw3HTZpGo=' name='verify-v1'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

Setelah kamu paste kode tersebut pada halaman html kamu juga setelah kamu klik simpan/save template kamu, kemuadian kamu kembali ke webmaters tools google. untuk melakukan verifikasi, dengan mengklik verify. bila status website kamu telah terverifikasi oleh webmasters google. langkah selanjutnya yaitu kamu klik Add General Web Sitemap . pada pilihan Add Sitemap. kemudian masukkan pilihan sitemap dibawah ini,

Atom.xml
Rss.xml
feeds/posts/default
feeds/posts/default?alt=rss
feeds/posts/default?orderby=updated

Biasanya url website kamu sudah tertulis sebelum kolom isian add sitemap. misalnya :http://blog-tips-and-trick.blogspot.com/ ,jadi bila kamu memasukan salah satu dari pilihan sitemap diatas. nantinya akan menjadi http://blog-tips-and-trick.blogspot.com/Atom.xml , Kamu bisa pilih salah satu dari pilihan sitemap di atas, atau kamu juga memasukkan semuanya. yaitu untuk cadangan. siapa tahu salah satu dari sitemap diatas gagal. karena pada pilihan sitemap no 1 dan 2, terkadang suka gagal. jadi baiknya kamu copy semua pilihan sitemap di atas terus paste ke dalam kolom add sitemap.

setelah itu kamu itu tunggu hasilnya dari google untuk beberapa saat, apakah dari semua pilihan sitemap diatas ada yang gagal atau tida, bila ada yang gagal kamu bisa menghapusnya.

Ok saya rasa cukup sekian dulu sekilas tentang cara membuat google sitemap untuk blogger blogspot kali ini, mohon maaf bila banyak kekurangan dalam postingan saya diatas, maklum masih pemula banget...salam blogger mania

Memasang Gambar Animasi Pada Judul Posting

2009-09-30T16:23:00.000-07:00

Blog Tips and Trick kali ini akan membahas cara memasang gambar animasi pada judul postingan.format gambar yang digunakan adalah format gift. contohnya seperti dibawah ini.

Untuk yang berminat cara memasang gambar animasi tersebut pada judul postingan yaitu sebagai berikut.

1. Setelah anda logi ke Blogger.com, selanjutnya anda masuk ke menu Tata Letak/Layout>>Edit Html

2. Pada halaman Html, anda cari kode .post h3. atau lebih lengkapnya seperti dibawah ini.

.post h3 {
background:url(Masukan Link gambar anda disini) no-repeat;
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 35px;
color: $postTitleColor;
font: $postTitleFont;
text-decoration: none;
text-align: left;
line-height: 1.4em;
/* text-transform: uppercase; */
border-bottom: 2px solid $posttitleBorderColor;
}

3. Setelah anda menemukan kode seperti di atas, selanjutnya anda masukan link gambar animasi anda pada background url seperti tulisan yang saya beri warna kuning di atas.sebagai contoh Blog Tips and Trick memakai animasi gambar Emoticon dengan link.

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif ,

maka anda tulis linknya seperti ini.

backround url (http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif) no-repeat;

4. Klik simpan/save.

5. Selesai

Silahkan anda buka blog anda untuk melihat hasilnya.

Selamat Mencoba dan semoga bermanfaat, salam blogger mania.

Widget Label Animasi Vertikal

2009-09-30T15:23:00.000-07:00

Blog Tips and Trick Kali ini akan membahas tentang bagaimana caranya membuat widget label animasi dengan menggunakan efek Marquee. Semua tulisan label seperti contohnya : Tips and Trick, Make Money dan lain-lainnya akan bergerak ke atas secara berulang-ulang. Tulisan label itu juga akan berhenti bila pointer mouse kita di arahkan ke tulisan tersebut dan akan bergerak kembali bila pointer mouse kita dijauhkan lagi. Contoh dari tampilannya bisa anda lihat seperti yang ada dibagian samping blog saya ini.

Untuk anda yang gemar mempercantik tampilan blognya, tak ada salahnya bila anda mencoba tips yang satu ini.cara untuk membuat Widget Label animasi vertikal tersebut adalah sebagai berikut ini.

1. Setelah anda login ke Blogger, selanjutnya anda masuk ke menu Tata letak/Layout >> elemen halaman. terus anda tambahkan gadget baru, yaitu gadget Html/javascript

2. Copy dan paste semua kode dibawah ini ke gadget Html anda. tapi sebelumnya anda edit terlebih dahulu beberapa bagian kode dibawah ini.

<span style="text-align: center;font-family:georgia;font-size:130%;color:white;"><marquee onmouseout="this.start()" direction="up" padding="5px" behavior="scroll" scrollamount="2" onmouseover="this.stop()" scrolldelay="10" style="text-align: left;" height="200px" bgcolor="black" width="145px">

<li><a href="Masukan Link label anda disini"> Tulis nama Label disini</a><li>

<li><a href="Masukan Link label anda disini"> Tulis nama Label disini</a><li>

</marquee></span>

Keterangan :

Silahkan anda edit beberapa bagian kode yang saya beri warna kuning di atas. misalnya ukuran font atau teks yang tadinya 130% menjadi 150% Sesuai keinginan anda. untuk warna teks yang tadinya White misalnya anda ganti dengan blue dan sebagainya. jangan lupa untuk menyesuaikan ukuran widget tersebut dengan amerubah ukuran width dan height nya.tergantung ukuran dimana anda akan menempatkannya. jadi semuanya tinggal anda sesuaikan saja.

Untuk isi konten seperti nama label dan link labelnya silahkan anda masukan ke bagian kode yang berwarna biru di atas. untuk mencari Link label,baiknya anda gunakan dulu widget label standar dari blogger.com. setelah semua linknya anda dapat baru anda hapus kembali widgetnya.

bila anda ingin memperbanyak isi konten, anda cukup mengcopy kode seperti dibawah ini dan anda paste sebelum kode </marquee>. kode yang diperbanyak yaitu.

<li><a href="Masukan Link label anda disini"> Tulis nama Label disini</a><li>

3. klik simpan/save
4.selesai, silahkan anda lihat hasilnya pada blog anda.

kurang lebih tampilannya seperti dibawah ini.

Silahkan Mencoba dan semoga bermanfaat, salam blogger mania.

Widget Donasi Paypal Button

2009-09-30T11:29:00.000-07:00

Panduan Cara Memasang Donasi Paypal Button di Blog

Pada posting kali ini saya akan menjelaskan bagaimana caranya memasang ataupun menambah Button Donasi Paypal pada halaman Blog. Bila anda telah memiliki account paypal maka anda sudah dapat memasukan atau menambahkan Button Donasi Paypal ke halaman Blog anda. jika anda belum memiliki account paypal maka anda harus daftar terlebih dulu. untuk mendaftar dan memiliki account paypal anda bisa klik disini. cara untuk menambahkan Button Donasi Paypal adalah sebagai berikut :

1. Login ke paypal dengan memasukan Email paypal anda.

2. Setelah itu anda klik 'Merchant Services' tab Pada bagian atas halaman seperti pada gambar dibawah berikut :

3.Gerakan mouse anda dan klik "Donation" pada tampilan menu disebelah kanan

4. Setelah anda klik donation maka akan melihat menu drop down yang isinya terdapat beberapa pilihan seperti product, servis, subcription & recurring billing, donations, dan gift certificates. anda cukup pilih saja yang donations.

5. Setelah itu anda klik create Button pada bagian bawah halaman.

6. Setelah anda klik create Button maka akan tampil halaman seperti pada gambar dibawah ini. dan yang anda harus lakukan yaitu cukup mengcopy semua code HTML nya.

7. Setelah mengcopy code HTML nya anda login ke Blogger dan tambahkan elemen halaman pada Blog anda dan paste semua kode tersebut.

8. Klik simpan/save dan selesai.

Buka blog anda untuk melihat hasilnya. semoga bermanfaat dan salam blogger mania.

Tips Memasang Widget Shoutbox di Blog

2009-09-30T11:19:00.000-07:00

Apa sih Shoutbox itu ? Shoutbox adalah sebuah widget yang mempunyai fungsi yang tidak jauh berbeda dengan chatting, dimana semua pengunjung ataupun pemilik blog itu sendiri.bisa saling mengirimkan pesan-pesan singkat seperti perkenalan, pemberitahuan dan lain sebagainya

Bila kita melihat blog ataupun website yang sudah memasang shoutbox, biasanya shoutbox ini terletak pada halaman depan blog ataupun website tersebut, karena dengan adanya Widget shoutbox ini sangat memudahkan bagi para pengunjung untuk berkomunikasi secara langsung dengan pemilik blog ataupun dengan pengunjung lainnya secara bersamaan

Untuk anda yang berminat memasang widget shoutbox ini pada Blog ataupun website anda. Caranya adalah sebagai berikut :

1. Buka situs http://www.shoutmix.com kemudian pada halaman website tersebut anda klik CREATE YOUR SHOUTBOX NOW. Seperti pada gambar dibawa ini.

2. Setelah itu anda akan dibawa ke halaman pendaftaran seperti dibawah ini, dimana pada halaman tersebut anda harus mengisi semua data yang diperlukan dengan benar.

3. setelah anda mengisi data-data anda pada halaman pendaftaran tadi, kemudian anda akan diminta untuk memilih style ataupun bentuk tampilan shoutbox yang akan anda pasang pada blog anda nantinya. Seperti pada gambar dibawah ini.

4. Setelah anda pilih salah satu style shoutbox seperti pada gambar di atas dan setelah anda mengisi kode verifikasinya juga maka proses pembuatan account shoutbox anda telah selesai. Dan anda sudah bisa memasang shoutbox dengan style yang anda pilih tadi pada blog anda

5. Untuk memasang shoutbox pada blog anda yaitu dengan cara, klik Go to my control panel now” setelah itu pada bagian menu Quick Start anda klik Get Codes untuk mendapatkan code widgetnya. seperti pada gambar seperti dibawah ini.

6. Setelah anda klik Get codes kemudian anda pilih Place Shoutbox on webpage. Terus Copy semua kode HTML yang ada dalam kotak Generated Codes.

7. Setelah anda copy semua kode tersebut anda bisa pastekan dulu kode tersebut untuk sementara ke notepad, microsoft word dsb.

8. Login ke blogger terus klik Layout dan klik page element untuk menambah widget baru pada blog anda dengan cara klik add a Gadget terus anda pilih yang HTML/JavaScript. Seperti pada gambar dibawah ini :

9. Setelah itu anda paste kan semua kode shoutbox yang anda dapatkan sebelumnya seperti contoh pada gambar dibawah ini.

10. Klik save dan setelah itu maka proses pembuatan widget shoutbox anda telah selesai. Untuk melihat hasilnya anda tinggal klik view blog. Gampang kan hehehe….

Ok Cukup sekian dulu postingan Blog Tips and Trick tentang cara membuat ataupun memasang shoutbox di blogger kali ini. Semoga bermanfaat dan salam blogger mania.

Cara Membuat Menu Tab View

2009-09-30T11:14:00.000-07:00

Cara Membuat Menu Tab View

gambar : 1

Untuk anda yang ingin membuat Menu Tab View seperti gambar di atas untuk halaman blog anda, caranya adalah sebagai berikut :

01. Save template anda terlebih dulu yaitu dengan mendownload full template anda. kemudian Buka menu edit template atau Layout, terus buka edit HTML. jangan lupa kasih tanda centang pada Expand widget template. setelah itu cari kode ]]></b:skin> pada halaman HTML dengan menekan ctrl+F dan paste kan ]]></b:skin> tersebut pada kotak find dan tekan enter contoh nya seperti pada gambar

berikut ini :

gambar : 2

2. Langkah berikutnya adalah copy semua kode dibawah ini terus paste kan tepat di atas ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;

border-top: 1px solid #d9e3ff;
border-left: 1px solid #d9e3ff;
border-right: 1px solid #d9e3ff;
border-bottom: 1px solid #d9e3ff;
font-family: "verdana", Serif;
font-weight: 900;
color: #ffffff; /* Warna text menu tab */
background-color: #ca0a0a; /* Warna background menu tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #1200ff; /* Warna background menu tab yang active */
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #d9e3ff;
border-right: 1px solid #d9e3ff;
border-bottom: 1px solid #d9e3ff;
overflow: hidden;
background-color: #ffffff; /* Warna background menu halaman */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Catatan : semua kode warna yang saya tandai pada kode diatas bisa anda rubah sesuai keinginan anda. contoh anda ganti dengan kode #ffffff untuk warna putih ataupun dengan kode warna lainnya.

3. Setelah anda mamasukan semua kode di atas kemudian anda cari kode </head> setelah itu copy kode berikut ini dan paste tepat di atas kode </head>.

4. Klik simpan atau save template anda.

5. Setelah anda selesai mengcopy dan mempastekan semua kode-kode diatas pada halaman HTML template anda. langkah selanjutnya anda buka menu elemen halaman dan klik add a Gadget dan pilih seperti pada gambar berikut ini :

gambar : 3

gambar : 4

gambar :5

6. Kemudian Copy dan paste semua code berikut ini pada gadget HTML tersebut seperti contoh pada gambar 5 diatas.

<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 300px;" class="Tabs">

<a class="Active" href="javascript:tabview_switch('TabView',%201);">Recent Post</a>

<a class="" href="javascript:tabview_switch('TabView',%202);">Most Popular</a>

<a class="" href="javascript:tabview_switch('TabView',%203);">Wallpaper</a>

</div>

<div style="width: 298px; height: 150px;" class="Pages">

<div style="overflow: auto; height: 150px; display: block;" class="Page">

<div class="Pad">

</ol>

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>

</ol>

</div>

</div>

<div style="overflow: auto; height: 150px; display: none;" class="Page">

<div class="Pad">

<ol>

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
</ol>

</div>

</div>

<div style="overflow: auto; height: 150px; display: none;" class="Page">

<div class="Pad">

<ol>

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<ol>

</div>

</div>

</div>

</div></form>

<script type="text/javascript"><br/>
<br/>tabview_initialize('TabView');<br/><br/></script>

Catatan : Untuk kode yang diberi warna kuning diatas bisa anda rubah sesuai keinginan anda contoh,

<div style="width: 298px; height: 150px;" class="Pages"> . 298px adalah ukuran lebar gadget tersebut

sedangkan 150px adalah ukuran tinggi gadget tersebut.contoh berikutnya adalah tentang

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li> ini juga anda rubah sesuai dengan yang anda iningkan. Masukan Link yang di tuju disini yaitu masukan link yang anda tuju misalnya link untuk alamat posting anda ataupun link alamat yang lain. judul posting disini myaitu untuk judul postingan anda ataupun yang lainnya. Bila anda ingin memperbanyak tampilan daftar judul posting ataupun yang lainnya. anda cukup mengcopy dan memperbanyak kode :

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>

seperti contoh yang saya berikan pada kode diatas yaitu untuk 3 judul content untuk tiap halaman.

7. Selesai dan anda lihat blog anda untuk melihat hasilnya.

Ok saya rasa cukup sampai disini postingan saya tentang bagaiman caranya membuat menu tab view.
Semoga bermanfaat dan salam blogger mania.

Tips Merubah Domain Blogspot Menjadi CO.CC

2009-09-30T10:57:00.000-07:00

Bila anda mempunyai Blog dari Blogger.com yaitu penyedia blog milik Google tentunya Blog anda mempunyai nama sub domain dari blogspot misalnya http://namaanda.blogspot.com sebenarnya nama sub domanin tersebut bisa dirubah, misalnya menjadi “http://www.namaanda.co.cc” .

Bila anda menginginkan mengganti nama sub domain blog anda menjadi co.cc caranya adalan sebagai berikut ini :

1.Sebelum anda melanjutkan ke tahap pendaftaran account untuk mendapatkan domain co.cc, anda harus menentukan dulu nama url yang anda inginkan.caranya yaitu clik disini, nanti akan ada tampilan seperti pada gambar dibawah ini :

2.Pada gambar tersebut anda harus memasukan nama url yang anda inginkan, misalkan anda menginginkan nama url tersebut www.namaanda.co.cc maka anda ketik pada kotak isian dengan namaanda kemudian klik chek availability

3.Setelah anda mengklik chek availability, nanti anda akan melihat apakah nama yang anda masukan tersebut tersedia ataukah tidak. bila tidak tersedia anda harus memasukan nama yang lainnya.bila nama anda yang anda pilih ternyata tersedia maka anda tinggal mengklik continue registration.

4.Setelah anda selesai melakukan registrasi tahap selanjutnya adalah menyetting domain anda, caranya adalah masuk ke menu Domain Setting >> Manage Domain >> Setup.

5.Pada menu setup, anda abaikan dulu menu manage DNS, anda langsung klik menu ke 2. yaitu menu Zona Record. pada menu ini anda harus mengisi beberapa data dengan rincian sebagai berikut :

Host : Isi dengan nama url yang anda pilih sebelumnya, misalkan www.namaanda.co.cc
TTL : 1D ( tidak perlu dirubah )
Type : pilih CNAME
Value : isi dengan ghs.google.com

kurang lebih hasilnya seperti pada gambar dibawah ini :

Bila anda telah selesai anda tinggal klik setup.

6. Setelah anda selesai menentukan nama domain dan settingnya,kemudian anda lanjutkan ke setting blogspot pada account blogger.com anda.caranya yaitu sebagai berikut :

Masuk / login ke “blogger.com” dengan account anda tentunya.

Setelah login kemudian anda masuk ke menu setting / pengaturan.

Lalu klik menu Publishing / publikasikan

Pada menu publishing anda klik “Switch to: • Custom Domain”

Klik already “Already own a domain? Switch to advanced settings”

Isikan pada kolom “Your Domain” dengan “domain co.cc”" yang anda daftarkan sebelumnya misal “www.namaanda.co.cc”

Pada pilihan Use a missing files host? pilih no

Masukan Code Verivication dan klik save setting

Setelah selesai anda tinggal menunggu proses sincronisasinya dari co.cc ke Blogspot maksimal 24 jam setelah itu anda sudah bisa mengakses url “blogspot.com” anda dengan nama domain co.cc anda tersebut, yang tadinya http://namaanda.blogspot.com/ menjadi http://namaanda.co.cc/.

Silahkan mencoba dan semoga bermanfaat. salam blogger mania..

Mempromosikan Blog ke Chitika

2009-09-30T10:45:00.000-07:00

Chitika sebenarnya bukanlah sebuah program yang baru, dan merupakan sebuah program yang telah lama berdiri. Mungkin teman-teman disini juga sudah banyak yang mengenal dan menggunakan program chitika ini.

CHITIKA berbeda dengan adsense karena iklannya perpaduan dari iklan text dan icon gambar, jadi iklan adsense dan chitika bisa dipasang bersamaan dan tidak akan melanggar TOS dari adsense. Nilai payout yang harus dicapai oleh chitika sekitar $50 melalui paypal, sedikit lebih rendah dari adsense.

Kelebihan dari chitika dari adsense adalah nilai click through ratenya (CTR) yang bisa dibilang lebih besar dari rata-rata nilai CTR adsense. Besarnya nilai CTR chitika memang sangat sesuai karena mereka membidik pasar orang US dan Canada. Jadi ketika seseorang yang berasal dari US atau Canada berkunjung ke website atau blog kita lewat search engine iklan dari chitika akan muncul. Memang jauh lebih sulit dari adsense yang bisa muncul kapan saja dan siapapun yang berkunjung. Inilah yang sebenarnya membuat chitika menjadi salah satu jenis iklan yang disukai advertiser karena targeted traffic.

Untuk teman-teman disini yang ingin mencoba daftar ke chitika sebenarnya persyaratannya mudah-mudah saja, kalau berdasarkan pengalaman saya untuk bisa daftar ke chitika cukup memenuhi :

a. Blog atau site yang berbahasa inggris murni.

b. Postingan blog sekitar 10 posts.

c. Alexa cukup dibawah 2 jutaan juga sudah diterima.

d. Bisa dipasang dengan blog yang ber-adsense.

Bagaimana sebenarnya bentuk iklan chitika ini ? Dapat dilihat pada screenshot dibawah.

Ketika kita sudah memasang kode html chitika nantinya iklan chitika tidak akan muncul, kecuali kalau kita melakukan test seperti ini di blog atau site.

http://www.namadomainanda.com/#chitikatest=car

untuk mengetest iklan yang muncul bila kata pencarian di search engine adalah “car”

http://www.namadomainanda.com/#chitikatest=mortage

untuk mengetest iklan yang muncul bila kata pencarian di search engine adalah “mortage”

Ok, mungkin sudah cukup jelas dengan CHITIKA kali ini. Bila ingin bergabung klik disini.
semoga bermanfaat, salam blogger mania

Tips Mempromosikan Blog Ke SE

2009-09-30T10:41:00.000-07:00

Siapa yang tidak kenal dengan search engine Google, Yahoo, AOL, MSN dan ODP Dmoz (Web directory), 5 search engine inilah yang harus anda focuskan dalam promosi blog anda, jika anda melihat statistik pada gambar disamping tentu ada bisa menyimpulkan sendiri yang mana search engine yang harus anda opitmalkan.

Dalam posting Blog Tips and Trick kali ini tidak menjelaskan secara rinci bagaimana cara mengoptimalkannya tapi anda akan memahami bagaimana cara melakukan promosi dengan mendaftarkan blog anda ke search engine Google, Yahoo dan MSN serta bagaimana cara sukses agar blog anda terdaftar di ODP Dmoz.

Cara Daftar ke Google:

Google bisa dikatakan sebagai Rajanya search Engine, saya sangat menyarankan kepada anda untuk mendaftarkan blog anda pertamakali di search engine ini.Caranya Klik http://www.google.com/addurl/ Kemudian pada formulir pendaftaran Masukan Alamat Blog pada kolom URL dan beri komentar pada kolom comment sesuai dengan tema blog anda.

Cara Daftar ke Yahoo:

Yahoo sebagai search engine kedua yang banyak digunakan, untuk mendaftarkan Blog anda ke Yahoo ikuti langkahnya sebagai berikut. Sebelum anda mendaftarkan blog anda ke Yahoo pastikan anda sudah memiliki account Yahoo, seperti namaanda@yahoo.com jika anda sudah memilikinya anda tinggal klik http://siteexplorer.search.yahoo.com/submit
kemudian pada kotak isian pertama silahkan memasukan alamat blog anda,

Contoh :

http://www.namaanda.blogspot.com

Atau

http://www.namaanda.wordpress.com

Untuk pilihan kedua anda diminta memasukan alamat feed anda seperti Contoh :

Http://www.namaanda.blogspot.com/atom.xml

Atau

http://www.namaanda.wordpress.com/rss.xml

kemudian tekan tombol submit.

Cara daftar ke MSN :

Dalam statistik Search Engine, MSN milik Microsoft ini juga termasuk banyak digunakan jadi kalau bisa blog anda juga harus terdaftar di Search Engine ini. Cara daftarnya yaitu masuk ke:
http://search.msn.co/docs/submit.aspx?FORM=WSDD2
lalu anda tinggal memasukan kode verifikasi dan memasukan alamat blog anda.

Cara Praktis Mendaftarkan blog ke Search Engine

Cara yang paling praktis adalah dengan menggunakan auto web submit. Ada banyak layanan gratis yang menyediakan layanan untuk pendaftaran, anda bisa mencarinya sendiri di search engine atau tanyakan langsung ke Google. untuk memudahkan dalam mendaftar ke Search engine, saya sarankan anda menggunakan layanan Mypagerank Layanan lain yang dikhususkan dalam pencarian blog diantaranya adalah Google Blog Search dan Blogdigger kedua layanan ini merupakan pencarian blog yang paling banyak digunakan saat ini.

hampir semua penyedia layanan blog mempunyai fasilitas pencarian dengan cara mengindex link pada database mereka sendiri, selain itu kita juga lebih diuntungkan apabila penyedia layanan blog tersebut mempunyai fasilitas ping karena hal ini akan memudahkan kita dalam mempromosikan blog yang telah dibuat. Salah satu web auto submit adalah mypagerank, layanan ini akan memudahkan kita mendaftarkan blog ke beberapa search engine besar seperti dibawah ini :

{www.google.com}{www.searchengine.com}{www.infotiger.com}

{www.scrubtheweb.com}{www.searchuk.com}{www.entireweb.com}

{www.maxpromo.com}{www.aesop.com}{www.whatuseek.com}

{www.splatsearch.com}{www.walhello.com}{www.acoon.de}

{www.szukacz.pl}{www.daypop.com}{www.fybersearch.com}

{www.biveroo.de}{www.infoseek.co.jp}{www.yandex.ru}

{www.amfibi.com}{www.bigfinder.com}{www.metawebsearch.com}

{www.jayde.com}{www.cipinet.com}{www.websquash.com}

{www.Search-o-rama.com}{www.unasked.com}{www.uk.abacho.com}

{www.mixcat.com}

Untuk mempromosikan blog anda keseluruh SE diatas silankan anda klik disini tapi saya tidak menjamin kalau dalam waktu cepat situs ataupun blog anda akan terdaftar, semua ini tergantung dari bagaimana semua search engine diatas tersebut meng-index halaman blog ataupun situs anda.

Untuk keterangan lebih lanjut mengenai bagaimana cara mempromosikan blog anda ke search engine silahkan anda download E-book gratisnya disini. Salam blogger mania....

10+ Daftar File Hosting Terbaik

2009-09-30T10:33:00.000-07:00

FileFactory

• No file type restrictions.
• Files can be up to 300MB in size.
• Upload up to 25 files at once.
• Upload faster with Turbo.
• Embed widget or music player.
• Share files on blogs, forums, Facebook or MySpace.
• Mix images into slideshows.
• Earn reward for sharing popular files.
• Earn up to $10 per 1,000 downloads.

MediaFire

•    Unlimited storage
•    Up to 100MB per file
•    Unlimited uploads
•    Unlimited downloads
•    Unlimited bandwidth
•    Image galleries
•    No sign up required
•    No software to install

FileSavr

•    Fastest and easiest file hosting service as an
      alternative to sites like MegaUpload and RapidShare.
•    Do not force users to sign up for paid accounts
      to download files.
•    Do not show long countdown timers, pop up ads,
      or any other spam related activities.
•    Upload size is 10 GB

FileQube

•   Store up to 2GB free for remote file access.
•   Organize, tag, search and move files and folders easily.
•   Share files and images with friends, peers or family
•   Limit access to resources with password-protection features
•   Publish your photos, documents, audio, or video anywhere
•   Create custom rss-feed for every folder you share to
     give your visitors ability to track updates.
•   Tag your resources for more order and faster search.
•   Instantly share your files with others - skipping download page

FileDen

•    Hotlinking allowed for all allowed file extensions,
      including videos and music files.
•    1GB of personal storage space.
•    A 50mb maximum file size limit.
•    5GB of monthly bandwidth.

SaveFile

•    100MB Filesize
•    Unlimited Diskspace
•    Unlimited Traffic
•    Sorted by Projects
•    Password Protection
•    Replace Files
•    File Statistics
•    Project Statistics
•    User Subscriptions

FileHosting

•    Unlimited file hosting.
•    2 GB/sec bandwidth.
•    20 highspeed server.
•    You can upload any type of file
      (movies, music, documents, images, zip files and more).
•    Any file in any format can be uploaded and downloaded for free.
•    No file size limit.
•    No restrictions on the number of times a file can be downloaded.
•    Keep your files private, or send your download links only to friends or family.
•    Share your download links on blogs, forums and social networking sites.

Uploading

•    Download speed limited
•    Maximum parallel download - 1
•    Maximum upload size per file - 100 Mb
•    Download limit per 24 hours - 300 Mb
•    Wait time before the download begins - 60 seconds
•    Earn cash with your files.

WikiUpload

•    Upload any files upto 5GB that do not violate their Terms of Service
•    Share files on forums or with friends
•    If your file is public, they also place the file in right public category
      based on your tags and description

FileSend

•    300 MB file size limit
•    Manage uploaded files
•    Recover lost file links
•    Less download wait time

FileSave

•    100% Free
•    Upto 1Gb Free Disk Space
•    Upto 1Gb Per File
•    No Sign Up Required
•    Upload Music, Videos, and all other files.
•    Share with your friends

InfiniteMB

•    Free File Image Audio Video
•    500Mb per file
•    Highest Upload Speeds
•    Unlimited Downloads
•    Share files via e-mail, forums, MySpace, etc.

Box

•    5 collaboration folders
•    1 GB of storage
•    25 MB file uploads

ZippyShare

•    Completely free, reliable and extremely popular.
•    Extremely fast download speeds.
•    The maximum filesize for a single file is 100 MB.
•    The file can be downloaded at any time and as often as you need it.
•    File Life: 30 days after no activity.
•    No ridiculous queues.
•    No limits.

Semoga bermanfaat, Salam blogger mania

Widget Label Cloud Animasi

2009-09-30T10:28:00.000-07:00

Blogumus "adalah Flash tag cloud widget yang menggunakan konversi script dari Roy Tanck's WP Cumulus plugin untuk Wordpress. saya sangat suka sekali plugin karya Roy Cumulus ini ketika saat pertama kali saya melihatnya, dan kita hanya harus belajar bagaimana mengubah plugin ini agar bisa digunakan di Blogger blog. Hasilnya adalah widget yang dapat Anda lihat seperti pada gambar di atas,.atau anda bisa melihat bagaiman effect animasi dari widget tersebut dengan cara menggerakan mouse anda ke atas objek Flash widget tersebut. Pada posting ini, saya akan menjelaskan bagaimana caranya agar anda dapat menambahkan Widget Tag Cloud Animasi tersebut pada blog anda.

Cara untuk memasang widget ini pada template blog anda tidaklah begitu sulit yaitu dengan Cara pada menu dashboard anda klik Tata letak >> Edit Html terus anda cari kode dibawah ini pada halaman Edit Html.

<b:section class="sidebar" id="sidebar" preferred="yes">

Bila anda telah menemukankode tersebut, kemudian anda paste kan kode dibawah ini tepat dibawah kode yang anda cari tadi.

<b:widget id="Label99" locked="false" title="Labels" type="Label">

<b:includable id="main">

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

</b:if></b:includable></b:widget></b:section>

<h2>

<data:title></data:title></h2>

Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

// uncomment next line to enable transparency

//so.addParam("wmode", "transparent");

so.addVariable("tcolor", "0x333333");

so.addVariable("mode", "tags");

so.addVariable("distr", "true");

so.addVariable("tspeed", "100");

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

so.addParam("allowScriptAccess", "always");

so.write("flashcontent");

</script>

<b:include name="quickedit">

</b:include></div>

Kemudian anda klik save atau simpan, setelah itu anda lihat blog anda untuk melihat bagaimana perunaham tamiplan blog anda setelah anda melakukan penambahan kode2 tersebut.

Untuk merubah tampilan widget tersebut sesuai keinginan anda anda hanya perlu merubah beberapa bagian code yang anda tambahkan tadi,karena Secara default widget ini di set dengan rincian sebagai berikut

Lebar = 240px

Tinggi = 300px

Background = putih

Warna Text = abu2

Ukuran Text = "12"

Bila anda ingin merubah bentuk tampilan widget tersebut sesuai dengan selera anda,misalnya memperlebar, mempertinggi, merubah warna background, warna text serta ukuran textnya, anda cukup merubah sebagian dari code tersebut seperti pada rincian sebagai berikut :

Cari dan rubah code yg saya warnai dibawah ini sesuai dengan keinginan anda

example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

240 = Lebar, ganti sesuai keinginan anda misalnya jadi 200

ffffff = Warna Background , ganti sesuai keinginan anda misalnya jadi 0000 untuk warna hitam

333333 = warna text, ganti sesuai keinginan anda misanya jadi ff000

300 = Tinggi, ganti sesuai keinginan anda misanya jadi 150

‘12’ = Ukuran text, ganti sesuai keinginan anda misanya jadi 16

100 = Adalah ukuran untuk kecepatan gerakan teks, silahkan anda ganti sesuai keinginan anda misalnya 150, semakin besar maka akan semakin cepat gerakan animasi teks nya.

Selamat mencoba dan semoga bermanfaat, salam blogger mania

Merubah File PDF ke Doc

2009-09-30T10:15:00.000-07:00

Mungkin sebagian dari kita telah tahu bagaimana merubah sebuah file ke bentuk file pdf, misalkan dari file microsoft word doc ke pdf, atau dari file microsoft excel xls ke bentuk pdf. Tapi bagaimana bila kita ingin melakukan hal yang sebaliknya, merubah file pdf ke format file lainnya, misalnya merubah atau mengconvert file pdf ke word .doc, dibawah ini ada beberapa solusi bila anda ingin merubah atau mengconvert file pdf entah itu meng-convert pdf ke doc, atau pdf menjadi rtf atau bahkan merubah pdf menjadi txt.

Solusi 1 : secara Online

Bila komputer anda terkoneksi ke internet mungkin solusi online akan menjadi sebuah pilihan yang bisa anda pertimbangkan, anda tidak perlu menginstal software apapun untuk bisa mulai merubah file pdf anda menjadi format lain. Beberapa alternatifnya adalah

Solusi 2 : Zamzar

Zamzar adalah salah satu website yang menyediakan proses konversi online file pdf ke bentuk file lainnya, baik meng-convert file PDF ke file word (DOC), maupun ke format lainnya seperti HTML, ODT, PCX, PNG, PS, RTF, and TXT. Anda tinggal memilih (browse) file yang akan anda rubah, setelah selesai zamzar akan mengirimkan sebuah Link ke email anda, untuk mendownload hasil konversi.

Solusi : PDF Online

Alternatif lain yang anda bisa memanfaatkan PDF Online dari BCL Technologies, setelah proses konversi selesai anda tinggal mengklik kanan pada link yang diberikan dan plih “save link as” sebagai RTF Word document.

Solusi 3 : Free PDF Converter

Solusi online lainnya untuk merubah file PDF adalah Free PDF Converter. Hampir sama dengan Zamzar tapi di Free PDF Converter, anda hanya bisa melakukan konversi setiap 30 menit. Selain itu ukuran filepun sangat terbatas. Lainnya halnya bila anda menjadi Member Free PDF Converter dengan biaya sekitar 9 dollar per bulan, anda bisa bebas merubah PDF anda tanpa dibatasi waktu dan ukuran, alias unlimited.

Solusi 4 : Menggunakan Software

Khusus bagi anda yang tidak selalu terkoneksi internet, menggunakan sebuah software untuk merubah file PDF anda mungkin akan menjadi satu-satunya solusi. Dan berikut ini beberapa software yang bisa anda gunakan.

BCL Easy Converter Desktop
Anda bisa mencoba BCL Easy Converter Desktop 1.0 untuk waktu 30 hari. Dengan BCL Easy Converter Desktop 1.0 anda bisa dengan mudah file PDF anda menjadi format RTF

DocSmartz

Kalau dengan BCL Easy Converter Desktop 1.0 anda hanya bisa merubah bentuk PDF ke bentuk RTF saja, maka DocSmartz menawarkan solusi yang lebih banyak pilihan, karena anda bisa merubah file PDF anda menjadi format lain seperti Excel, HTML, atau Postscript.

ABBYY PDF Transformer 2.0

ABBYY PDF Transformer 2.0 , mampu merubah format file PDF anda menjadi berbagai macam format seperti Word, Excel, RTF, HTML, TXT.

Semoga bermanfaat, salam blogger mania.

Free Ebook

2009-09-30T10:00:00.005-07:00

Free Ebook, Ebook Gratis

Dibawah ini adalah daftar free ebook yang saya koleksi sampai saat ini. ebook-ebook tersebut diantaranya adalah tentang bisnis online, tutorial dll. free ebook hasil karya beberapa penulis ebook terkenal, seperti O-om guru dll.bila anda berminat dengan free ebook ini. silahkan anda untuk mendownloadnya.

Semoga bermanfaat dan salam blogger mania

Free 3D Blogger Template Transformers

2009-09-30T10:00:00.003-07:00

Finally Blog Tips and Trick done well to make a simple template with this 3d style.This template is not using the image element in each part of the template body.We only use the combination of colors, to make this template look stylish 3-dimensional, so you can also edit this template colors easily.

Besides that, this template has been equipped with auto readmore. so, as long as any content of your post, which will appear in front page only partly by automatic. This template has been our first feasibility test before we publish this template. below is a sample picture of the template display. if you want to use this template, you can download it by clicking the download button is below.

Transformers ZX

Download Here

Transformers Blue

Download Here

Transformers Head Corner

Download Here

Transformer Black

Download Here

May be useful and thank you for the interest in using this template, please write your comments about this template.

Wdget Collection # 02

2009-09-30T10:00:00.001-07:00

Widget Collection

Showing your IP adress, Country, Browser and OS

Just Copy This Code to Your Website

Auto Scrolling Image

Just Copy and Edit This Code to Your Website

35 Social Bookmarking Tools

Just Copy This Code to Your Website

Auto Scrolling Recent Post

Just Copy and Edit This Code to Your Website

US zip code

Just Copy This Code to Your Website

Back to TOP

Example :

Just Copy and Edit This Code to Your Website

<<< Back

HTML Tutorial

2009-09-30T09:59:00.005-07:00

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
               P A N D U A N     R I N G K A S     H T M L
                 Judul asli: THE BARE BONES GUIDE TO HTML
                 oleh Kevin Werbach <http://werbach.com/>
                      Version 3.0 -- July 21, 1996
              Alih bahasa Indonesia oleh Kristianto Jahja
        <http://www.angelfire.com/ky/KAIZEN/>, January 09, 1997
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Dokumen ini tersedia secara permanen di <http://werbach.com/barebones/>.

Panduan Ringkas HTML ini memuat semua tag yang dikenali oleh hampir semua
browser terkemuka versi terkini. Saya telah memuatkan semua Tag yang terdapat
pada Spesifikasi HTML 3.2, demikian juga dengan tag perluasan Netscape yang
terdapat pada Netscape Navigator sampai dengan versi 3.0b5. Panduan ini dirancang
seringkas mungkin; namun bila dikehendaki informasi rinci lebih lanjut tentang
HTML, jadi di sini tidak dibahas rincian cara menggunakannya. Ada banyak panduan
HTML rinci di WEB; saya juga menyiapkan berbagai acuan bagi anda yang terdapat
di <http://werbach.com/web/wwwhelp.html>.

Segenap saran dan komentar anda akan disambut dengan senang hati, anda dapat
menghubungi saya melalui E-mail di <barebones@werbach.com>.

PRAKATA ALIH BAHASA INDONESIA
---------------------------------------------------------------------------
Alih bahasa "The Bare Bones Guide to HTML" menjadi "Panduan Ringkas HTML" adalah
hasil karya liburan menjelang Natal tahun 1996 dan tahun baru 1997. Meskipun
pada umumnya orang Indonesia yang melek Internet juga melek bahasa Inggris,
namun saya berharap agar alih bahasa ini dapat memperkaya khazanah bahasa
Indonesia di samping memperbanyak populasi masyarakat Internet di Indonesia.

Panduan Ringkas ini sangatlah bermanfaat terutama dalam menetapkan pemakaian
tag tertentu dalam lembar halaman Web yang anda ciptakan. Saya sendiri telah
membuktikannya dan anda dapat pula melihatnya dengan berkunjung ke lembar
halaman Web saya di Kedai kopi KAIZEN <http://www.angelfire.com/ky/KAIZEN/>,
yang dalam penyusunannya telah banyak diilhami oleh berbagai petunjuk dalam
"The Bare Bones Guide to HTML". Pertanyaan dan komentar dalam bahasa Indonesia
dapat diajukan ke <kaizen@indosat.net.id>   Selamat mempelajari.

FORMAT DOKUMEN INI
---------------------------------------------------------------------------
Dokumen ini tampil prima bila diperagakan dengan huruf monospace.

Untuk kejelasan, saya telah memisahkan berbagai atribut tag berbeda yang dapat
diterapkan pada baris tag. Umumnya, berbagai atribut tag dapat dikombinasikan
untuk diwujudkan pada satu tag.

Tag ditulis dengan huruf besar guna kemudahan, meskipun pada dasarnya tag tidak
peka terhadap huruf besar-kecil.

SIMBOL YANG DIGUNAKAN
---------------------------------------------------------------------------
URL    URL dari file luar (atau file name saja bila terletak pada direktori
    yang sama)
?    Bilangan apa saja (mis. <H?> dapat berarti <H1>, <H2>, <H3>, dst.)
%    Persentasi apa saja (mis. <hr align=left width="%"> dapat berarti
    <hr align=left width="50%">, dsb.)
***        Teks apa saja (mis. ALT="***" berarti boleh diisi dengan teks apa saja)
$$$$$$     Hex apa saja (mis. BGCOLOR="#$$$$$$" dapat berarti BGCOLOR="#00FF1C",
    dsb.)
,,,        Pembatas koma(mis. COORDS=",,," dapat berarti COORDS="0,0,50,50", dsb.)
|          Alternatif pilihan (i.e. ALIGN=LEFT|RIGHT|CENTER berarti pilih salah
    satu yang dikehendaki)

KOMPATIBILITAS (ingat, HTML berevolusi dan penerapan browser beragam)
---------------------------------------------------------------------------

       (tanpa notasi) Spesifikasi HTML 3.2; didukung oleh browser umum masa kini
N1.0   Tag perluasan Netscape dari Navigator versi 1.0
N1.1   Tag perluasan Netscape dari Navigator versi 1.1
N2.0   Tag perluasan Netscape dari Navigator versi 2.0
N3.0b Tag perluasan Netscape dari Navigator version 3.0 beta
===========================================================================
===========================================================================

ELEMEN DASAR (semua dokumen HTML harus memuatnya)
---------------------------------------------------------------------------
       Jenis Dokumen    <HTML></HTML>      (awal dan akhir file HTML)
       Judul        <TITLE></TITLE>    (harus terdapat di mukadimah)
       Mukadimah        <HEAD></HEAD>      (keterangan umum, spt judul dsb.)
       Batang Tubuh     <BODY></BODY>      (isi halaman HTML)

ANCANGAN STRUKTURAL (tampilan yang tergantung pada browser pemakai)
---------------------------------------------------------------------------
       Kepala           <H?></H?>          (memiliki 6 tingkatan Heading)
         Penataan Kepala   <H? ALIGN=LEFT|CENTER|RIGHT></H?>
       Bagian           <DIV></DIV>
         Penataan Bagian   <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
       Kutipan Blok     <BLOCKQUOTE></BLOCKQUOTE>    (jeda batas pinggir)
       Penekanan        <EM></EM>          (umumnya huruf miring)
       Penguatan        <STRONG></STRONG> (umumnya huruf tebal)
       Kutipan Singkat <CITE></CITE>      (citation, huruf miring)
       Kode             <CODE></CODE>      (source code)
       Contoh keluaran <SAMP></SAMP>    (sample output)
       Papan ketik      <KBD></KBD>        (Keyboard input)
       Variabel         <VAR></VAR>
       Definisi         <DFN></DFN>        (jarang digunakan)
       Pengarang        <ADDRESS></ADDRESS>
       Huruf ukuran besar <BIG></BIG>
       Huruf ukuran kecil <SMALL></SMALL>

FORMAT TAMPILAN (tampilan yang tergantung pada kehendak penulis)
---------------------------------------------------------------------------
       Huruf Tebal      <B></B>
       Huruf Miring     <I></I>
N3.0b Garis bawah      <U></U>            (jarang digunakan)
       Huruf Coret      <STRIKE></STRIKE> (jarang digunakan)
N3.0b Huruf Coret      <S></S>            (jarang digunakan)
       Huruf Geser Bawah <SUB></SUB>
       Huruf Geser Atas <SUP></SUP>
       Huruf Mesin Ketik <TT></TT>         (jarak antara tetap)
       Pra-format       <PRE></PRE>        (jarak huruf pra-format)
         Lebar jarak      <PRE WIDTH=?></PRE>   (dalam jumlah huruf)
       Rata Tengah      <CENTER></CENTER> (untuk teks, gambar dan tabel)
N1.0   Huruf Kedip      <BLINK></BLINK>    (tag yang paling lucu)
       Ukuran huruf     <FONT SIZE=?></FONT>       (dari 1-7)
       Rubah ukuran huruf <FONT SIZE="+|-?"></FONT>
N1.0   Basis Ukuran Huruf <BASEFONT SIZE=?>   (dari 1-7; default=3)
       Warna Huruf      <FONT COLOR="#$$$$$$"></FONT>
N3.0b Jenis Huruf      <FONT FACE="***"></FONT>
N3.0b Multi-Kolom      <MULTICOL COLS=?></MULTICOL>
N3.0b    Jarak antar Kolom <MULTICOL GUTTER=?></MULTICOL>
N3.0b    Lebar Kolom       <MULTICOL WIDTH=?></MULTICOL>
N3.0b Celah            <SPACER>
N3.0b    Jenis Celah      <SPACER TYPE=horizontal|vertical|block>
N3.0b    Ukuran Celah     <SPACER SIZE=?>
N3.0b    Dimensi Celah    <SPACER WIDTH=? HEIGHT=?>
N3.0b    Penataan Celah   <SPACER ALIGN=left|right|center>

ACUAN DAN GRAFIK
---------------------------------------------------------------------------
       Acuan ke dokumen <A HREF="URL"></A>
         Acuan Target     <A HREF="URL#***"></A> (bila ada di dokumen lain)
                          <A HREF="#***"></A>     (bila ada di dokumen ini)
N2.0     Jendela Sasaran <A HREF="URL" TARGET="***"></A>
       Nama Target      <A NAME="***"></A>
       Peragaan Gambar <IMG SRC="URL">
         Penataan Gambar <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
N1.0     Penataan Gambar <IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|
                             BASELINE|ABSBOTTOM>
         Alternatif teks <IMG SRC="URL" ALT="***"> (saat gambar belum tampil)
         Dimensi Gambar   <IMG SRC="URL" WIDTH=? HEIGHT=?>     (dalam pixels)
         Garis Batas      <IMG SRC="URL" BORDER=?>             (dalam pixels)
         Ruang pembatas   <IMG SRC="URL" HSPACE=? VSPACE=?>    (dalam pixels)
N1.0     Gambar Low-Res   <IMG SRC="URL" LOWSRC="URL">
         Daerah Gambar    <IMG SRC="URL" ISMAP>     (perlu program script)
         Daerah Gambar    <IMG SRC="URL" USEMAP="URL">
       Uraian Daerah    <MAP NAME="***"></MAP>
       Pembagian Derah <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>
N1.1   Pemindahan Tarik <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
N2.0   Objek Cantum     <EMBED SRC="URL"> (cantumkan object ke dokumen)
N2.0     Ukuran Objek     <EMBED SRC="URL" WIDTH=? HEIGHT=?>

PEMISAH
---------------------------------------------------------------------------
       Paragraf         <P></P>            (tag penutup seringkali tak perlu)
         Penataan teks    <P ALIGN=LEFT|CENTER|RIGHT></P>
       Pindah Baris     <BR>               (pindah satu baris)
         Putus penataan baris <BR CLEAR=LEFT|RIGHT|ALL>
       Garis Datar      <HR>
         Penataan Garis   <HR ALIGN=LEFT|RIGHT|CENTER>
         Tebal Garis      <HR SIZE=?>      (dalam pixels)
         Lebar Garis      <HR WIDTH=?>     (dalam pixels)
N1.0     Lebar Garis persen <HR WIDTH="%">     (persen terhadap lebar halaman)
         Garis Pejal      <HR NOSHADE>     (tanpa pola 3D)
N1.0   Tanpa Ganti Baris <NOBR></NOBR>     (cegah ganti baris)
N1.0   Sambung suku kata <WBR>             (letak ganti baris bila diperlukan)

DAFTAR (daftar dapat disusun bertingkat)
----------------------------------------------------------------------------
       Tanpa Nomor     <UL><LI></UL>                  (<LI> sebelum tiap butir)
         KompaK          <UL COMPACT></UL>
         Jenis butiran   <UL TYPE=DISC|CIRCLE|SQUARE> (berlaku menyeluruh)
                         <LI TYPE=DISC|CIRCLE|SQUARE> (butir ini dan seterusnya)
       Dengan Nomor    <OL><LI></OL>                  (<LI> sebelum tiap butir)
         Kompak          <OL COMPACT></OL>
         Jenis Nomor     <OL TYPE=A|a|I|i|1>      (berlaku menyeluruh)
                          <LI TYPE=A|a|I|i|1>     (butir ini dan seterusnya)
         Nomor Mulai   <OL START=?>               (berlaku menyeluruh)
                          <LI VALUE=?>            (butir ini dan seterusnya)
       Daftar Definisi <DL><DT><DD></DL>          (<DT>=istilah, <DD>=uraian)
         Kompak          <DL COMPACT></DL>
       Daftar Menu     <MENU><LI></MENU>          (<LI> sebelum tiap butir)
         Kompak          <MENU COMPACT></MENU>
       Daftar Direktori <DIR><LI></DIR>          (<LI> sebelum tiap butir)
         Kompak            <DIR COMPACT></DIR>

LATAR BELAKANG DAN WARNA
---------------------------------------------------------------------------
       L/B Gambar       <BODY BACKGROUND="URL">
       L/B Warna        <BODY BGCOLOR="#$$$$$$"> (urutan merah/hijau/biru)
         Warna Teks       <BODY TEXT="#$$$$$$">
         Warna Acuan      <BODY LINK="#$$$$$$">
         Acuan Lepas Kunjung   <BODY VLINK="#$$$$$$">
         Acuan Aktif           <BODY ALINK="#$$$$$$">
      (Info lanjut di <http://werbach.com/web/wwwhelp.html#color>)

HURUF SPESIAL (harus ditulis dengan huruf kecil)
---------------------------------------------------------------------------
       Special Character &#?;            (? adalah kode ISO 8859-1)
       <                 <
       >                 >
       &                 &
       "                 "
       Registered TM     ®
       Registered TM     ®
       Copyright         ©
       Copyright         ©
       Spasi tak putus            Non-Breaking Spc
(Daftar lengkap di <http://www.uni-passau.de/%7Eramsch/iso8859-1.html>)

FORMULIR (umumnya membutuhkan program script pada server)
---------------------------------------------------------------------------
       Rancangan Form   <FORM ACTION="URL" METHOD=GET|POST></FORM>
N2.0     File Upload      <FORM ENCTYPE="multipart/form-data></FORM>
       Input Field      <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|
                          IMAGE|HIDDEN|SUBMIT|RESET">
         Nama Field       <INPUT NAME="***">
         Nilai Field      <INPUT VALUE="***">
         Kotak Periksa    <INPUT CHECKED> (kotak periksa dan tombol radio)
         Ukuran Field     <INPUT SIZE=?>       (dalam jumlah karakter)
         Panjang Maksimum <INPUT MAXLENGTH=?> (dalam jumlah karakter)
       Daftar Pilihan   <SELECT></SELECT>
         Nama Daftar      <SELECT NAME="***"></SELECT>
         Jumlah Pilihan   <SELECT SIZE=?></SELECT>
         Pilihan Banyak   <SELECT MULTIPLE>    (dapat memilih lebih dari satu)
       Pilihan          <OPTION>           (butir yang dapat dipilih)
         Pilihan Default <OPTION SELECTED>
       Ukuran Input Box <TEXTAREA ROWS=? COLS=?></TEXTAREA>
         Nama Box         <TEXTAREA NAME="***"></TEXTAREA>
N2.0     Rangkum Teks     <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>

TABEL
---------------------------------------------------------------------------
       Rancangan Tabel <TABLE></TABLE>
         Garis Batas      <TABLE BORDER></TABLE>        (on atau off)
         Garis Batas      <TABLE BORDER=?></TABLE>     (penetuan nilai)
         Celah Sel        <TABLE CELLSPACING=?>             celah datar
         Penyangga Sel    <TABLE CELLPADDING=?>          celah vertikal
         Lebar            <TABLE WIDTH=?>               (dalam pixels)
         Lebar persentasi <TABLE WIDTH=%>               (persentasi halaman)
       Baris Tabel      <TR></TR>
         Penataan         <TR ALIGN=LEFT|RIGHT|CENTER
                             VALIGN=TOP|MIDDLE|BOTTOM>
       Sel Tabel        <TD></TD>          (harus ada di setiap baris tabel)
         Penataan         <TD ALIGN=LEFT|RIGHT|CENTER
                             VALIGN=TOP|MIDDLE|BOTTOM>
         Tanpa Ganti Baris <TD NOWRAP>
         Rentang Kolom    <TD COLSPAN=?>
         Rentang Baris    <TD ROWSPAN=?>
N1.1     Lebar Sel        <TD WIDTH=?>             (dalam pixels)
N1.1     Lebar Persen     <TD WIDTH="%">             (persentasi tabel)
N3.0b    Warna Sel        <TD BGCOLOR="#$$$$$$">
       Kepala Tabel     <TH></TH>     (seperti data, dengan bold dan center)
         Penataan         <TH ALIGN=LEFT|RIGHT|CENTER
                             VALIGN=TOP|MIDDLE|BOTTOM>
         Tanpa Ganti baris <TH NOWRAP>
         Rentang Kolom    <TH COLSPAN=?>
         Rentang Baris    <TH ROWSPAN=?>
N1.1     Lebar Sel Kepala <TH WIDTH=?>             (dalam pixels)
N1.1     Lebar Persentasi <TH WIDTH="%">             (persentasi tabel)
N3.0b    Cell Color       <TH BGCOLOR="#$$$$$$">
       Keterangan Tabel <CAPTION></CAPTION>
         Penataan         <CAPTION ALIGN=TOP|BOTTOM>    (di atas/di bawah tabel)

FRAMES (merumuskan daerah dan kelakuan sebagaian daerah layar)
---------------------------------------------------------------------------
N2.0   Dokumen Frame    <FRAMESET></FRAMESET>           (sebagai ganti <BODY>)
N2.0     Tinggi Baris     <FRAMESET ROWS=,,,></FRAMESET>      (pixels atau %)
N2.0     Tinggi baris     <FRAMESET ROWS=*></FRAMESET> (* = ukuran relatif)
N2.0     Lebar Kolom      <FRAMESET COLS=,,,></FRAMESET>      (pixels atau %)
N2.0     Column Widths    <FRAMESET COLS=*></FRAMESET> (* = ukuran relatif)
N3.0b    Garis Batas      <FRAMESET FRAMEBORDER="yes|no">
N3.0b    Lebar Garis      <FRAMESET BORDER=?>
N3.0b    Warna Garis      <FRAMESET BORDERCOLOR="#$$$$$$">
N2.0   Rancangan Frame <FRAME>           (contents of an individual frame)
N2.0     Tampilan Dokumen <FRAME SRC="URL">
N2.0     Nama Frame        <FRAME NAME="***"|_blank|_self|_parent|_top>
N2.0     Lebar Frame       <FRAME MARGINWIDTH=?>    (batas kiri dan kanan)
N2.0     Tinggi Frame      <FRAME MARGINHEIGHT=?>   (batas atas dan bawah)
N2.0     Scrollbar?        <FRAME SCROLLING="YES|NO|AUTO">
N2.0     Frame tak berubah <FRAME NORESIZE>
N3.0b    Garis Batas       <FRAME FRAMEBORDER="yes|no">
N3.0b    Warna Batasr      <FRAME BORDERCOLOR="#$$$$$$">
N2.0   Isi tanpa Frame <NOFRAMES></NOFRAMES>     (bagi browser tanpa Frame)

JAVA
---------------------------------------------------------------------------
       Applet           <APPLET></APPLET>
         Name file applet <APPLET CODE="***">
         Parameter        <APPLET PARAM NAME="***">
         Sumber Applet    <APPLET CODEBASE="URL">
         Identifier       <APPLET NAME="***">        (sebagai rujukan)
         Teks alternatif <APPLET ALT="***">         (bagi non-Java browsers)
         Penataan         <APPLET ALIGN="LEFT|RIGHT|CENTER">
         Ukuran           <APPLET WIDTH=? HEIGHT=?> (in pixels)
         Celah batas      <APPLET HSPACE=? VSPACE=?> (in pixels)

LAIN-LAIN
---------------------------------------------------------------------------
       Komentar                (tak diperagakan oleh browser)
       Prolog HTML3.3   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
       Mampu Cari       <ISINDEX>          (indikasi index cari-temu)
        Prompt           <ISINDEX PROMPT="***">    (teks sebagai prompt)
       Perintah Cari    <A HREF="URL?***"></a> (gunakan ? sesungguhnya)
       URL File ini     <BASE HREF="URL"> (terdapat di header)
N2.0   Nama Window      <BASE TARGET="***">(terdapat di header)
       Kaitan           <LINK REV="***" REL="***" HREF="URL"> (pada header)
       Informasi Meta   <META>             (terdapat di header)
       Lembar Gaya Tulis <STYLE></STYLE>    (masih jarang dipakai)
       Scripts            <SCRIPT></SCRIPT> (masih jarang dipakai)

===========================================================================
Hak Cipta (c) 1995-1997 Kevin Werbach. Redistribusi non-komersial diijinkan.
Panduan ini bukan produk dari Bare Bones Software, kesamaan nama hanyalah
kebetulan. Hubungi penulis untuk informasi lebih lanjut.

PANDUAN RINGKAS HTML

Judul Asli: THE BARE BONES GUIDE TO HTML
oleh Kevin Werbach
Versi 3.0 Formatted -- July 21, 1996
Alih bahasa Indonesia oleh Kristianto Jahja
Versi Bahasa Indonesia -- 23 Desember 1996

Versi terakhir dokumen ini terdapat di <http://werbach.com/barebones/>.

Panduan ini memuat semua tag yang dikenali oleh hampir semua browser terkemuka versi terkini. Saya telah memuatkan semua Tag yang terdapat pada Spesifikasi HTML 3.2, demikian juga dengan tag perluasan Netscape yang terdapat pada Netscape Navigator sampai dengan versi 3.0b5. Panduan ini dirancang seringkas mungkin; namun bila dikehendaki informasi rinci lebih lanjut tentang HTML anda dapat mencarinya di WWW Help Page yang saya susun. Segenap saran dan komentar anda akan disambut dengan senang hati.

Daftar Isi

   1. PENDAHULUAN dan PERKENALAN
          * Keunikan dari panduan ini
          * Tag HTML apa saja yang tercakup
          * Bagimana dokumen ini diformat (termasuk uraian tentang simbol dan singkatan)

   2. TAG HTML
          * Elemen Dasar (semua dokumen HTML harus memuatnya)
          * Ancangan Struktural (tampilan terkendali oleh pilihan browser)
          * Format tampilan (penulis menetapkan tampilan naskah)
          * Acuan (links) dan grafik
          * Pemisah (dividers)
          * Daftar (lists)
          * Latar belakang dan warna
          * Huruf spesial
          * Formulir (forms)
          * Table (tables)
          * Frame
          * Java
          * Lain-lain

      Penting: Bila anda tidak cukup paham tentang perbedaan antara HTML 2.0, HTML 3.0, HTML 3.2, dan Netscape extensions, sebaiknya anda membaca W3C statement tentang perkembangan HTML.

ELEMEN DASAR



Jenis Dokumen


<HTML></HTML>


(terdapat pada awal dan akhir dari file HTML)



Judul


<TITLE></TITLE>


(harus selalu terdapat pada mukadimah)



Mukadimah (Header)


<HEAD></HEAD>


(keterangan umum, seperti judul dsb.)



Batang Tubuh


<BODY></BODY>


(isi dari halaman HTML)

ANCANGAN STRUKTURAL



Kepala


<H?></H?>


(Heading - spesifikasi untuk menetapkan 6 tingkatan kepala)



Penataan (Align) Kepala


<H? ALIGN=LEFT|CENTER|RIGHT></H?> [*]




Bagian (Division)


<DIV></DIV>




Penataan Bagian


<DIV ALIGN=LEFT|RIGHT|CENTER></DIV>




Kutipan Blok (Block Quote)


<BLOCKQUOTE></BLOCKQUOTE> [*]


(tampilan dengan jeda terhadap batas pinggir)



Penekanan (Emphasis)


<EM></EM>


(umumnya huruf miring)



Penguatan (Strong Emphasis)


<STRONG></STRONG>


(umumnya huruf tebal)



Kutipan singkat (Citation)


<CITE></CITE>


(umumnya huruf miring)



Kode


<CODE></CODE>


(Code - untuk source code listings)



Contoh Keluaran


<SAMP></SAMP>


(Sample Output)



Masukan Papan Ketik


<KBD></KBD>


(Keyboard Input)



Variabel


<VAR></VAR>


(Variable)



Definisi


<DFN></DFN>


(Definition - jarang dipakai)



Alamat Pengarang (Author's Address)


<ADDRESS></ADDRESS>




Huruf ukuran Besar


<BIG></BIG>




Huruf Ukuran Kecil


<SMALL></SMALL>


FORMAT TAMPILAN



Huruf Tebal


<B></B>


(Bold)



Huruf Miring


<I></I>


(Italic)

N3.0b


Garis Bawah


<U></U>


(Underline - jarang digunakan)



Huruf Coret


<STRIKE></STRIKE>


(Strikeout - jarang digunakan)

N3.0b


Huruf Coret


<S></S>


(Strikeout - jarang digunakan)



Huruf Geser Bawah


<SUB></SUB>


(Subscript)



Huruf Geser Atas


<SUP></SUP>


(Superscript)



Huruf Mesin Ketik


<TT></TT>


(Typewriter - huruf berjarak tetap)



Pra-format (Preformatted)


<PRE></PRE>


(menampilkan dengan jarak pra-format)



Jarak Huruf


<PRE WIDTH=?></PRE>


(mengatur jarak huruf)



Rata Tengah


<CENTER></CENTER> [*]


(Center - berlaku untuk teks maupun gambar)

N1.0


Huruf Kedip


<BLINK></BLINK>


(Blinking - tag terlucu sampai kini)



Ukuran Huruf


<FONT SIZE=?></FONT>


(Font Size - boleh diisi dari 1 sampai 7)



Rubah Ukuran Huruf


<FONT SIZE="+|-?"></FONT>


N1.0


Basis Ukuran Huruf


<BASEFONT SIZE=?>


(boleh diisi 1 sampai 7; ukuran standard/default=3)



Warna Huruf


<FONT COLOR="#$$$$$$"></FONT>


N3.0b


Pilih Jenis Huruf


<FONT FACE="***"></FONT>


N3.0b


Teks Multi Kolom


<MULTICOL COLS=?></MULTICOL>


N3.0b


Jarak Batas Kolom


<MULTICOL GUTTER=?></MULTICOL>


(default = 10 pixels)

N3.0b


Lebar Kolom


<MULTICOL WIDTH=?></MULTICOL>


N3.0b


Celah (Spacer)


<SPACER>


N3.0b


Jenis Celah


<SPACER TYPE=horizontal| vertical|block>


N3.0b


Ukuran Celah


<SPACER SIZE=?>


N3.0b


Dimensi Celah


<SPACER WIDTH=? HEIGHT=?>


N3.0b


Penataan Celah


<SPACER ALIGN=left|right|center>


ACUAN DAN GRAFIK



Acuan pada dokumen tertentu


<A HREF="URL"></A>




Acuan pada sasaran dalam dokumen


<A HREF="URL#***"></A>


(bila terdapat pada dokumen lain)

<A HREF="#***"></A>


(bila terdapat pada dokumen yang sama)

N2.0


Jendela Sasaran (Target Window)


<A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"></A>




Penamaan sasaran pada dokumen


<A NAME="***"></A>




Kaitan(Relationship)


<A REL="***"></A>


(jarang digunakan)



Kaitan terbalik (Reverse Relationship)


<A REV="***"></A>


(jarang digunakan)



Peragaan Gambar


<IMG SRC="URL">




Penataan Letak Gambar


<IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>


N1.0


Penataan Letak Gambar


<IMG SRC="URL" ALIGN=TEXTTOP| ABSMIDDLE|BASELINE|ABSBOTTOM>




Alternatif Teks


<IMG SRC="URL" ALT="***">


(saat gambar belum/tidak ditampilkan)



Daerah Gambar (Imagemap)


<IMG SRC="URL" ISMAP>


(membutuhkan program script)



Daerah Gambar pihak klien


<IMG SRC="URL" USEMAP="URL">




Uraian Daerah Gambar


<MAP NAME="***"></MAP>




Pembagian Daerah Gambar


<AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>




Dimensi Gambar


<IMG SRC="URL" WIDTH=? HEIGHT=?>


(in pixels)



Garis Batas


<IMG SRC="URL" BORDER=?>


(dalam satuan pixel)



Ruang Pembatas


<IMG SRC="URL" HSPACE=? VSPACE=?>


(dalam satuan pixel)

N1.0


Gambar Low-Res Proxy


<IMG SRC="URL" LOWSRC="URL">


N1.1


Pemindahan Tarik


<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">


(Client Pull)

N2.0


Objek Cantum


<EMBED SRC="URL">


(Embed Object - mencantumkan objek pada dokumen)

N2.0


Ukuran Objek


<EMBED SRC="URL" WIDTH=? HEIGHT=?>


PEMISAH



Paragraf


<P></P> [*]


(tag penutup seringkali tak diperlukan)



Align Text


<P ALIGN=LEFT|CENTER|RIGHT></P> [*]




Pndah Baris


<BR>


(pindah ke baris berikut)



Putus Penataan Baris


<BR CLEAR=LEFT|RIGHT|ALL>


(Clear Textwrap)



Garis Datar


<HR>


(Horizontal Rule)



Penataan Letak Garis


<HR ALIGN=LEFT|RIGHT|CENTER>




Tebal Garis


<HR SIZE=?>


(dalam satuan pixel)



Lebar Garis


<HR WIDTH=?>


(dalam satuan pixel)

N1.0


Lebar Garis Persentasi


<HR WIDTH="%">


(dalam persentasi terhadap lebar halaman)



Garis Pejal


<HR NOSHADE>


(Solid Line - tanpa pola 3D)

N1.0


Tanpa Ganti Baris


<NOBR></NOBR>


(No Break - mencegah ganti baris)

N1.0


Sambung Suku Kata


<WBR>


(Word Break - letak ganti baris bila diperlukan)

DAFTAR




Daftar Tanpa Nomor


<UL><LI></UL>


(Unordered List - Cantumkan <LI> sebelum tiap butir)




Kompak


<UL COMPACT></UL>


(Compact)



Jenis Butiran


<UL TYPE=DISC|CIRCLE|SQUARE>


(Bullet Type - berlaku umum bagi butir terdaftar)


<LI TYPE=DISC|CIRCLE|SQUARE>


(berlaku khusus pada butir ini dan selanjutnya)




Daftar Bernomor


<OL><LI></OL>


(Ordered List - Cantumkan <LI> sebelum tiap butir)




Kompak


<OL COMPACT></OL>




Jenis Penomoran


<OL TYPE=A|a|I|i|1>


(berlaku umum untuk semua butir dalam daftar)


<LI TYPE=A|a|I|i|1>


(berlaku khusus pada butir ini dan selanjutnya)




Nomor Mulai


<OL START=?>


(berlaku umum untuk semua butir dalam daftar)


<LI VALUE=?>


(berlaku khusus pada butir ini dan selanjutnya)




Daftar Definisi


<DL><DT><DD></DL>


(Definition List - <DT>=istilah, <DD>=uraian)




Kompak


<DL COMPACT></DL>




Daftar Menu


<MENU><LI></MENU>


(Cantumkan <LI> sebelum butir menu)




Kompak


<MENU COMPACT></MENU>




Daftar Direktori


<DIR><LI></DIR>


(Cantumkan <LI> sebelum tiap butir direktori)




Kompak


<DIR COMPACT></DIR>


LATAR BELAKANG DAN WARNA



Latar Belakang Gambar


<BODY BACKGROUND="URL">


(Tiled Background)



Warna Latar Belakang


<BODY BGCOLOR="#$$$$$$"> [*]


(Background Color - urutan: merah/hijau/biru)



Warna Huruf Teks


<BODY TEXT="#$$$$$$"> [*]




Warna Acuan


<BODY LINK="#$$$$$$"> [*]




Acuan Lepas Kunjung


<BODY VLINK="#$$$$$$"> [*]


(Visited Link)



Acuan Aktif


<BODY ALINK="#$$$$$$"> [*]


(Active Link)

(Info lanjut di http://werbach.com/web/wwwhelp.html#color)

HURUF SPESIAL(these must all be in lower case)



Special Character


&#?;


(where ? is the ISO 8859-1 code)



<


<




>


>




&


&




"


"




Registered TM


®




Copyright


©




Spasi tak putus


 


Non-breaking Space

(Daftar lengkap huruf khusus terdapat di http://www.uni-passau.de/%7Eramsch/iso8859-1.html)

FORMULIR



Rancangan Formulir


<FORM ACTION="URL" METHOD=GET|POST></FORM>


Define Forms

N2.0


Mengirimkan File


<FORM ENCTYPE="multipart/form-data"></FORM>


File Upload



Input Field


<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| IMAGE|HIDDEN|SUBMIT|RESET">




Nama Field


<INPUT NAME="***">




Nilai Field


<INPUT VALUE="***">




Kotak Periksa


<INPUT CHECKED>


(checkboxes dan radio boxes)



Ukuran Field


<INPUT SIZE=?>


(dalam satuan jumlah karakter)



Panjang Maksimum


<INPUT MAXLENGTH=?>


(dalam satuan karakter)



Daftar Pilihan


<SELECT></SELECT>


Selection List



Nama Daftar Pilihan


<SELECT NAME="***"></SELECT>




Jumlah Pilihan


<SELECT SIZE=?></SELECT>




Banyak Pilihan


<SELECT MULTIPLE>


(dapat memilih lebih dari satu)



Pilihan


<OPTION>


(butir yang dapat dipilih)



Pilihan Default


<OPTION SELECTED>




Ukuran Input Box


<TEXTAREA ROWS=? COLS=?></TEXTAREA>




Nama Input Box


<TEXTAREA NAME="***"></TEXTAREA>


N2.0


Rangkuman Teks


<TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>


Wrap Text

TABEL



Rancangan Tabel


<TABLE></TABLE> [*]




Garis Batas Tabel


<TABLE BORDER=?></TABLE>




Celah Sel


<TABLE CELLSPACING=?>


Cell Spacing



Penyangga Sel


<TABLE CELLPADDING=?>


Cell Padding



Lebar Tabel


<TABLE WIDTH=?>


(dalam satuan pixel)



Lebar Tabel Persentasi


<TABLE WIDTH="%">


(dalam satuan persen terhadap lebar halaman)



Baris dalam Tabel


<TR></TR>




Penataan Letak Baris


<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>




Sel dalam Tabel


<TD></TD>


(harus ada dalam setiap baris tabel)



Penataan Letak Sel


<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>




Tanpa Ganti Baris


<TD NOWRAP>




Rentang Kolom


<TD COLSPAN=?>


Columns to span



Rentang Baris


<TD ROWSPAN=?>


Rows to span

N1.1


Lebar Sel


<TD WIDTH=?>


(dalam satuan pixel)

N1.1


Lebar Sel Persentasi


<TD WIDTH="%">


(dalam satuan persen terhadap lebar tabel)

N3.0b


Warna Sel


<TD BGCOLOR="#$$$$$$">




Kepala Tabel


<TH></TH>


(Table Header - seperti data dengan Bold dan Center)



Penataan Letak Kepala Tabel


<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>




Tanpa Baris Baru


<TH NOWRAP>




Rentang Kolom


<TH COLSPAN=?>


Columns to Span



Rentang Baris


<TH ROWSPAN=?>


Rows to Span

N1.1


Lebar Kepala Tabel


<TH WIDTH=?>


(dalam satuan pixel)

N1.1


Lebar Persentasi


<TH WIDTH="%">


(dalam persentasi terhadap lebar tabel)

N3.0b


Warna Kepala Tabel


<TH BGCOLOR="#$$$$$$">




Keterangan Tabel


<CAPTION></CAPTION>


Caption



Penataan Keterangan


<CAPTION ALIGN=TOP|BOTTOM>


(di atas / di bawah tabel)

FRAMES

N2.0


Dokumen dalam Frame


<FRAMESET></FRAMESET>


(sebagai pengganti <BODY>)

N2.0


Tinggi Baris Frame


<FRAMESET ROWS=,,,></FRAMESET>


(dalam satuan pixel atau %)

N2.0


Tinggi Baris Frame


<FRAMESET ROWS=*></FRAMESET>


(* = ukuran relatif)

N2.0


Lebar Kolom Frame


<FRAMESET COLS=,,,></FRAMESET>


(dalam satuan pixel atau %)

N2.0


Lebar Kolom Frame


<FRAMESET COLS=*></FRAMESET>


(* = ukuran relatif)

N3.0b


Lebar Garis Batas


<FRAMESET BORDER=?>


N3.0b


Garis Batas


<FRAMESET FRAMEBORDER="yes|no">


N3.0b


Warna Garis Batas


<FRAMESET BORDERCOLOR="#$$$$$$">


N2.0


Rancangan Frame


<FRAME>


(isi dari frame individu)

N2.0


Tampilan Dokumen Frame


<FRAME SRC="URL">


N2.0


Nama Frame


<FRAME NAME="***"|_blank|_self| _parent|_top>


N2.0


Lebar Batas


<FRAME MARGINWIDTH=?>


(batas kiri dan kanan)

N2.0


Tinggi Batas


<FRAME MARGINHEIGHT=?>


(batas atas dan bawah)

N2.0


Scrollbar?


<FRAME SCROLLING="YES|NO|AUTO">


Memungkinkan scrolling pada frame

N2.0


Ukuran Frame tak bisa diubah


<FRAME NORESIZE>


N3.0b


Batas Frame


<FRAME FRAMEBORDER="yes|no">


N3.0b


Warna Garis Batas


<FRAME BORDERCOLOR="#$$$$$$">


N2.0


Isi tanpa Frame


<NOFRAMES></NOFRAMES>


(bagi browser yang tak mampu frame)

JAVA



Applet


<APPLET></APPLET>




Nama File Applet


<APPLET CODE="***">




Parameter Applet


<APPLET PARAM NAME="***">




Sumber Applet


<APPLET CODEBASE="URL">




Identifier Applet


<APPLET NAME="***">


(sebagai rujukan di tempat lain pada halaman sama)



Teks Alternatif


<APPLET ALT="***">


(untuk browser tanpa kemampuan Java browsers)



Penataan Applet


<APPLET ALIGN="LEFT|RIGHT|CENTER">




Ukuran Applet


<APPLET WIDTH=? HEIGHT=?>


(in pixels)



Celah batas Applet


<APPLET HSPACE=? VSPACE=?>


(in pixels)

LAIN-LAIN



Komentar





(tidak ditampilkan oleh browser)



Prolog HTML 3.2


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> [*]




Mampu Cari


<ISINDEX>


(indikasi indeks yang dapat dicari-temukan)



Prompt


<ISINDEX PROMPT="***">


(teks sebagai prompt)



Perintah Cari


<A HREF="URL?***"></a>


(gunakan tanda tanya yang sebenarnya)



URL dari file ini


<BASE HREF="URL">


(harus terletak di header)

N2.0


Nama Dasar Window


<BASE TARGET="***">


(harus terletak di header)



Kaitan


<LINK REV="***" REL="***" HREF="URL">


(Relation dan Reverse Relation, harus terletak di header)



Informasi Meta


<META>


(harus terletak di header)



Lembar Gaya Penulisan


<STYLE></STYLE>


(Style Sheet - belum didukung sepenuhnya)



Scripts


<SCRIPT></SCRIPT>


(belum didukung sepenuhnya)

Copyright ©1995-1997 Kevin Werbach. Redistribusi Non-kommersial diperbolehkan. Panduan ini bukan produk dari Bare Bones Software; kesamaan nama hanyalah kebetulan saja.

My Template Collection

2009-09-30T09:59:00.001-07:00

My Template Collection

Widget Collection # 01

2009-09-30T09:58:00.007-07:00

Widget Collection's

Hampir Semua Widget yang ada pada halaman posting ini adalah product Google, kamu bisa melihat lebih banyak lagi koleksi widget Google disini

Kalender Islam

Just Copy This Code to Your Website

Internet Speed Test

Just Copy This Code to Your Website

Calendar

Just Copy This Code to Your Website

Links to google service

Just Copy This Code to Your Website

SEO tool

Just Copy This Code to Your Website

Widget Untuk Mengetahui Hari Ulang Tahun dll

Just Copy This Code to Your Website

Multiple chat message

Just Copy This Code to Your Website

Unit converter

Just Copy This Code to Your Website

Currency converter

Just Copy This Code to Your Website

Time and calendar

Just Copy This Code to Your Website

Horoscop of the day

Just Copy This Code to Your Website

Locaty ip adress

Just Copy This Code to Your Website

Next >>>

Test 02

2009-09-30T09:58:00.003-07:00

My Picture Collection

Template Simple Dengan Sentuhan 3D

2009-09-30T09:58:00.001-07:00

Bila anda ingin merubah settingan warna tampilan pada template ini.anda cukup masuk ke menu, Tata Letak/Layout >> Font and Color. Silahkan anda rubah sesuai keinginan anda. silahkan mencoba dan salam blogger mania.