Hyperlink Dalam Html

Dalam istilah web, hyperlink adalah referensi (sebuah alamat) ke sumber-sumber informasi lain di Internet. Hyperlink biasanya merujuk ke sebuah halaman HTML, sebuah gambar, file suara, movie, dll. Sedangkan anchor (bahasa Indonesianya Jangkar) adalah istilah yang digunakan untuk mendefinisikan tujuan hyperlink dalam sebuah dokumen.

Jadi gini, alamat halamannya ditunjukkan oleh hyperlink, sedangkan kalau di dalam dokumen itu ada bab 2, maka kita bisa langsung merujuk ke bab 2 tadi dengan bantuan anchor.

Untuk membuat hyperlink dan anchor kita menggunakan elemen HTML anchor <a>.

Dalam tutorial kali ini, kita akan menggunakan istilah link HTML saat elemen <a> merujuk ke sebuah halaman dan istilah anchor HTML saat element <a> tersebut merujuk ke sebuah alamat di dalam dokumen.

1	<a href="http://URL">Teks Link</a>

Perhatikan, tag HTML pembuka berisi atribut link tersebut.
Isi elemen (Teks link) mendefinisikan apa yang ingin anda tampilkan ke pengunjung.
Catatan: Isi elemen tidak harus berupa teks loh! Sobat juga bisa me-link dari sebuah gambar atau elemen HTML lainnya.

Atribut href

Atribut href adalah alamat yang akan dibuka saat seseorang mengklik link yang kita buat.
Elemen <a> ini mendefinisikan sebuah link yang akan menuju ke sebuah blog yang saya kelola juga yaitu pascal204.blogspot.com :

1	<a href="http://chyber-id.blogspot.com/">KLIK DISINI</a>

Kode tersebut akan ditampilkan seperti beikut :
KLIK DISINI

Atribut target

Atribut target sangat berguna bagi kita untuk mengatur halaman yang kita tuju itu akan dibuka di mana. Sobat bisa membukanya di halaman utama ini langsung atau membukanya di halaman baru saat seorang pengunjung mengklik link yang kita sediakan.
Berbeda dengan kode sebelumnya yang membuka web site di jendela yang sama, kode ini akan membuka web site pada sebuah jendela baru :

1	<a href="http://chyber-id.blogspot.com/" target="_blank">KLIK DISINI</a>

Kode tersebut akan ditampilkan seperti beikut :
KLIK DISINI

Attribute name

Saat kita menggunakan atribut name, maka itu berarti kita mendefinisikan sebuah nama anchor yang berada di dalam sebuah halaman HTML. Nama anchor tidak akan nampak di mata pengunjung. Itu hanya merupakan pendefinisian di sebuah halaman web aja.
Cara membuat sebuah anchor :

1	<a name="label">Begini</a>

Nah, link yang menuju ke halaman itu bikinnya gini :

1	<a name="#label">Begini</a>

Perhatikan tanda # yang mendefinisikan nama anchor
Contoh:
Sebuah anchor dalam dokumen HTML:

1	<a name="top">Ini bagian paling atas</a>

Sebuah link yang merujuk ke bagian paling atas dalam dokumen yang sama:

1	<a href="#top">Kembali ke atas</a>

Sebuah link yang menuju ke sebuah anchor di halaman web lain:

1 2	<a href="http://chyber-id.blogspot.com.htm#top"> Kembali ke halaman utama paling atas</a>

Nah, kalau mau lihat bagaimana sebuah link anchor bekerja, klik Kembali ke atas ini untuk menuju ke bagian paling atas dari halaman ini.
Catatan penting dan tips yang pastinya akan berguna buat Sobat.
Ingat untuk selalu menambahkan garis miring di akhir sub folder link kita.
Jika link kita bentuknya seperti ini :
href="chyber-id.com/belajar/", maka sobat akan membuat 2 buah permintaan http ke server, karena server akan menambahkan garis miring dan membuat alamat yang kita minta tadi menjadi seperti ini:

Nah, dengan menambahkan garis miring di akhir sub folder, kita sudah menghemat resource di server.
Sobat bisa menggunakan Anchor untuk membuat daftar isi di awal sebuah dokumen yang panjang.
Kalau browser tidak bisa menemukan anchor yang kita tentukan, maka secara otomatis akan menuju ke bagian paling atas dari dokumen. Tanpa error.

Read More

cara mengkonversi bilangan biner ke.html

Sebelumnya, Saya akan mencoba menjelaskan tentang apa itu itu Bilangan Biner/Binary?
Bilangan Biner adalah sistem bilangan yang menggunakan suatu bilangan dasar atau basis (Radix) tertentu. Untuk bilangan biner menggunakan basis 2, menggunakan 2 macam simbol bilangan berbentuk 2 digit angka yaitu angka 0 dan 1.
Untuk mengkorversi Bilangan Biner kedalam bentuk teks maka yang harus sobat lakukan adalah :

• RUBAH BILANGAN BINER KE DESIMAL

Sobat pasti sudah pernah melihat kode biner, seperti di bawah inikan?

01001010101010100110101

Pertama-tama yang kita lakukan adalah mengubah bilangan biner yang hanya terdi dari angka 0 dan 1 tersebut kedalam bilangan desiman. Kemudian baru kita terjemahkan bilangan decimal terseebut dalam bentuk teks agar dapat kita baca.

SISTEM BINER:

Di sini adalah satu contoh sederhana dari bilangan biner:
1 0 1 0 1 0 1

Untuk mengubah bilangna biner tersebut kedalam angka, maka yang perlu sobat lakukan adalah mengalikan setiap bilangan tersebut dengan bilangan 2 berpangkat, jadinya seperti berikut :

1 0 1 0 1 0 1 = (1x64)+(0x32)+(1x16)+(0x8)+(1x4)+(0x2)+(1x1)

1 0 1 0 1 0 1 = 64 + 0 + 16 + 0 + 4 + 0 + 1

1 0 1 0 1 0 1 = 85

NB : Untuk memberi pangkat pada Bilangan 2, lakukan dengan dengan cara berurutan dan diakhiri dengan pangkat 0
Sekarang sebagai latihan cobalah ubah beberapa bilangan biner yang sobat buat sendiri kedalam bilangan disimal.

• CARA MERUBAH BILANGAN BINER KE CODE ASCII

Untuk mempermudah mengubah bilangan biner yagn telah kita ubah menjadi bilangan decimal tadi ke dalam bentuk teks, maka kita harus memperhatikan table KODE ASCII berikut :

Setelah sobat mempelajari table kode ASCII diatas sekarang kita coba untuk mengubah bilangan biner kedalam bentuk teks.

Misalnya kita ambil contoh bilangan biner berikut :

0101011101010101010100110011001000110100

Untuk langkah pertama yang harus kita lakukan adalah kita pisahkan dulu bilangan biner di atas menjadi 8 digit seperti berikut :

01010111   01010101   01010011   00110010   00110100

Sekarang, kita ubah bilangan biner tersebut per 8 digit dengan cara menghitungnya seperti yang telah dijelaskan diatas.

Delapan Digit ke-1 :
01010111 = (0x128) + ( 1x64) + (0x32) + (1x16) + (0x8) + (1x4) + (1x2) + (1x1)
01010111 =      0       +      64    +      0    +     16    +    0     +     4    +     2    +   1

01010111 =     87

Delapan Digit ke-2 :
01010101 = (0x128) + ( 1x64) + (0x32) + (1x16) + (0x8) + (1x4) + (0x2) + (1x1)
01010101 =      0       +      64    +      0    +     16    +    0     +     4    +     0    +   1
01010101 =     85

Delapan Digit ke-3 :
01010011 = (0x128) + ( 1x64) + (0x32) + (1x16) + (0x8) + (0x4) + (1x2) + (1x1)
01010011 =      0       +      64    +      0    +     16    +    0     +     0    +     2    +   1
01010011 =     83

Delapan Digit ke-4 :
00110010 = (0x128) + ( 0x64) + (1x32) + (1x16) + (0x8) + (0x4) + (1x2) + (0x1)
00110010 =      0       +      0    +      32    +     16    +    0     +     0    +     2    +  0
00110010 =     50

Delapan Digit ke-5 :
00110100 = (0x128) + ( 0x64) + (1x32) + (1x16) + (0x8) + (1x4) + (0x2) + (0x1)
00110100 =      0       +      0     +      32    +    16    +    0     +     4    +     0    +   0
00110100 =     52

Jadi, hasil konversi Biner ke Decimal adalah :
01010111 =     87
01010101 =     85
01010011 =     83
00110010 =     50
00110100 =     52

Untuk mengetahui karakter apa yg di hasilkan dari bilangan biner diatas, maka kita harus melihat table kode ASCII.

01010111 =     87  = W
01010101 =     85  = U
01010011 =     83  = S
00110010 =     50  = 2
00110100 =     52  = 4

Read More

Facebook Meluncurkan Fitur Verifikasi Untuk Akun Asli dan Palsu

Jika Anda adalah seorang pengguna setia Facebook dan menjadi follower selebriti favorit, Merek Produk, dan Komunitas, mungkin yang mengganggu Anda adalah untuk menemukan fan page resmi dari kategori itu. Facebook Fan Page telah memberikan dorongan nyata untuk situs jejaring sosial ini di mana hampir setiap orang bisa membuat fan page penggemar sehingga sulit bagi pengguna untuk mengidentifikasi fan page yang asli. Untuk melawan masalah ini, Facebook telah hadir dengan strategi baru untuk membantu pengguna mengidentifikasi akun otentik untuk menghindari menjadi korban dari fan page palsu.

Identifikasi Akun Otentik dan Akun Palsu

Facebook masuk ke bisnis verifikasi, meminjam sebuah fitur yang pertama kali diperkenalkan Twitter hampir empat tahun lalu. Lencana verifikasi Facebook untuk untuk fan page dan profil juga meniru Twitter dengan meninggalkan banyak proses yang tidak diketahui dan internal.

Ini jelas mengapa Facebook membuat langkah untuk memverifikasi merek dan tokoh terkenal dengan khalayak yang besar di situs dan berencana untuk memulai proses proaktif selama beberapa hari mendatang. Perusahaan akan "otomatis memverifikasi halaman terbesar di Facebook yang berada pada risiko terbesar dari duplikasi", kata juru bicara Facebook.

"Saya berpikir bahwa itu adalah masalah bagi banyak merek-merek terkenal," kata Raina Penchasky, direktur strategi untuk Digital Brand Architects. "Sosial dan digital adalah ruang sulit bagi pemilik merek-merek mewah, karena merek-merek mewah lebih memilih untuk mempertahankan aura eksklusivitas dengan membatasi eksposur dan akses mereka ke khalayak yang tidak ditargetkan lebih luas," tambahnya.

Sementara halaman diverifikasi dan profil akan ditambahkan beberapa bukti keaslian, merek tidak benar-benar mengemis untuk fitur tersebut atau menghindari Facebook karena mereka tidak memiliki lencana biru kecil dan tanda periksa di samping nama mereka di seluruh situs.

Namun, menurut Penchansky, beberapa merek mungkin sedikit gelisah tentang proses verifikasi, terutama karena Facebook tidak menguraikan persyaratan untuk verifikasi atau kemampuan untuk meminta profil atau halaman untuk diverifikasi.

Tanda cek biru mengidentifikasi bahwa halaman telah diverifikasi dan profil akan muncul di timeline, stories, hasil pencarian, news feed ads. Merek yang tidak secara otomatis menerima verifikasi selama beberapa minggu mendatang sedang dirujuk ke pusat bantuan Facebook di mana masalah duplikasi dapat diselesaikan.

Pembaruan ini meskipun tidak seberapa namun adalah sesuatu yang akan sangat membantu dalam membuat pengguna Facebook lebih mudah bagi masyarakat. Halaman-halaman Fan yang ada walau bagaimanapun tidak bisa membuat diri mereka sebagai halaman otentik dan halaman yang ada akan dinyatakan otentik berdasarkan jumlah pelanggan.

Read More

Cara Mengetahui Web Server yang Digunakan Suatu Website

Sebagai Web Developer ataupun Website Administrator terkadang kita ingin mengetahui jenis web server yang digunakan oleh suatu website. Seperti yang kita ketahui bahwa cukup banyak jenis web server yang populer digunakan di internet.
Berdasarkan survey yang dilakukan Netcraft pada tahun 2010, Apache Web Server mendominasi jagat internet dengan penggunaan sebesar 53,93%. Diikuti oleh IIS Web Server milik Microsoft sebesar 24,97%. Dua web server ini adalah yang paling banyak digunakan di internet.

Ada 2 metode untuk mengetahui web server yang digunakan sebuah website.

Metode Pertama: test Apache error .htaccess

Cara ini adalah cara tercepat untuk mengetahui apakah suatu website menggunakan web server apache atau IIS. Sebagai catatan cara ini tidak selalu berhasil menampilkan informasi web server yang digunakan, tapi patut dicoba. Jika cara ini gagal untuk mengetahui informasi web server, coba metode kedua. Berikut langkah-langkahnya:

Step 1: Sebagai contoh kita ingin mengetahui web server apa yang digunakan oleh www.swimsmooth.com. Jalankan web browser yang biasa anda gunakan seperti: Chrome, Mozilla Firefox, dll

Step 2: Di address bar browser anda, ketik URL home page + .htaccess. Berikut contoh lengkap penulisan di address bar:

http://www.swimsmooth.com/.htaccess

Step 3: Tekan Enter dan lihat hasil yang ditampilkan. By default, Apache web server akan menampilkan halaman forbidden error 403, karena .htaccess tidak dapat diakses secara publik. Kemudian akan ditampilkan informasi web server yang digunakan seperti screen shot berikut:



Dari screen shot diatas jelas terlihat bahwa www.swimsmooth.com di hosting menggunakan Apache Web Server, karena forbidden error 403 akan menambahkan Apache Server Tag dibawahnya.


Contoh lainnya, mari kita coba www.dotnetspider.com. Menggunakan "test Apache error .htaccess" akan menampilkan seperti screen shot berikut:

Gambar diatas menampilkan bahwa www.dotnetspider.com dihosting menggunakan IIS Web Server.

Metode Kedua: Menggunakan online tool.

 

Menggunakan online tool http://web-sniffer.net/

Step 1: Akses URL http://web-sniffer.net/
Step 2: Di bagian “HTTP(S)-URL,” ketik URL lengkap website yang akan diperiksa. Sebagai contoh kita akan coba cari tahu web server yang digunakan oleh dagang.com. Ketik URL: http://www.dagang.com/.
Step 3: Pilih “HTTP/1.1.” di bagian HTTP Version.
Step 4: Pilih "GET" dan set user agent dengan "Web-Sniffer."
Step 5: Klik "Submit."

Sekarang perhatikan hasilnya dibawah “HTTP Response Header” dan lihat value “Server:.” Dagang.com menggunakan Apache web server karena di value tertulis "Apache".
web-sniffer adalah tool yang cukup handal dan bisa melacak selama website tersebut masih online. 

Menggunakan online tool Netcraft.

Keunggulan menggunakan Netcraft adalah tidak hanya menampilkan web server yang digunakan, tapi juga mampu menampilkan Sistem Operasi yang digunakan.

Step 1: akses http://uptime.netcraft.com/up/
Step 2: Di bagian “What’s that site running?", masukkan nama domain spt: dagang.com
Step 3: Klik search. Hasilnya akan ditampilkan seperti screen shot berikut:

 Data di atas menampilkan bahwa dagang.com running di Sistem Operasi Linux, menggunakan Apache web server dan record tercatat dari 8 Maret 2005. Namun, untuk saat ini Sistem Operasi yang digunakan tidak dapat diketahui.

Read More

Cara Daftar Payza

Payza adalah : suatu layanan jasa pembayaran dan pengiriman uang melalui internet atau secara online dengan aman dan cepat. Jadi dengan Payza kamu dapat menarik semua gaji yang kamu miliki dari bisnis online (Payza, salah satu syarat untuk memulai bisnis online), bahkan dapat menarik langsung ke rekening bank local anda seperti BCA, BNI, Mandiri ataupun bank lain. Cara daftar Payza atau Alertpay labih simple dari pada daftar PayPal.

Cara daftar Payza. Jika telah melakukan transaksi maka pihak Payza akan mengirimkan kepada keduanya yaitu Anda dan orang yang bertransaksi dengan Anda, e-mail konfirmasi sebagai tanda bukti pembayaran. Payza merupakan rekening online yang sangat praktis dan aman karena kita bisa melakukan transaksi dengan melalui jaringan internet saja dan uang yang kita miliki bisa kita cairkan melalui Rekening Pribadi kita. Tidak hanya itu Payza menjamin kerahasiaan informasi pribadi anda, sehingga siapapun tidak akan dapat mengakses informasi kita dan Anda akan selalu aman dalam setiap melakukan transaksi online karena Payza menggunakan system keamanan dengan teknologi Called Secure Socket Layer (128 bit SSL) sehingga pada saat transaksi tidak ada yang dapat membaca informasi kita, sehingga uang Anda akan selalu aman dari heackher yang nakal. 

Cara menarik dana dari rekening Payza

Payza mempunyai beberapa metode penarikan :

- Transfer BANK

- CEK

Berikut Langkah Cara Daftar Payza

1. Buka halaman website Payza silahkan KLIK DISINI

Lalu Klik Sign Up Now!

2. Pilih negara dan jenis account. Untuk jenis account Pilih “Personal Pro” .

3. Isi Formulir dengan lengkap. Data harus sesuai dengan KTP.

4. Selanjutnya Anda harus melengkapi data untuk login Anda, mulai dari email, password, Dan PIN untuk bertransaksi (seperti di ATM). Masukkan, dan jangan sampai lupa. Lengkapilah dengan data yang tepat dan mudah diingat. Setelah lengkap Klik Final Step (Contohnya Seperti pada gambar di bawah).

5. Kemudian Anda akan diminta untuk melakukan Validasi Via Email. Bukalah email yang Anda gunakan sewaktu mendaftar tadi. Setelah itu, pada inbox (kotak masuk) cari email validasi dari Payza. Setelah itu Klik Link Validate yang ada di Email anda.

6. Selamat, Anda sekarang sudah punya account Payza, Tapi statusnya masih Unverified. Untuk melakukan verifikasi bisa menggunakan Nomor HandPhone. Klik Return to Login.

7. Langkah selanjutnya silahkan login dulu, masukkan email dan password yang anda daftarkan, lalu Klik Login atau Tekan Enter.

8. Lalu Klik Unverified lihat seperti contoh pada gambar.

9. Pilih Phone Validation (mobile phone only)

10. Request phone Validation Code, No HP yang masih aktif, terus klik Send Validation Code

11. Tunggu SMS dari Payza. Setelah codenya datang, masukan ke Payza . Jika sudah ada Masukan Kode Verifikasi, kemudian Klik Send.

12. Selamat kini Payza anda sudah VERIFIED dan telah siap untuk di gunakan.

Demikian Cara Daftar Payza

Read More

Membuat iklan melayang di samping kiri kanan

Assalamualaikum Wr. Wb.

Cara Memasang Iklan Melayang di Sebelah Kanan dan Kiri Blog | Kali ini Blog Ariflaw akan sedikit meberikan Tips dan Cara Memasang Iklan Melayang di Sebelah Kanan dan Sebelah Kiri Blog keren. Nah kalian pasti udah pernah liatkan Blog yang memasang Iklan di Samping kana dan Kiri Blog. Biasanya jenis penempartan Iklan ini adalah jenis yang paling Mahal dari beberapa Tempat yang ada di blog. 

Kenapa paling mahal !! yah tau sendirikan iklan ini akan selalu tampil di semua Halaman yang pengunjung buka, nga cuman di home doang. Trus jenis tempat iklan ini juga bisa mengikuti Scroll dari Brouser, jadi mau di atas blog ataupun di bawah Blog ikan ini akan selalu tampil sesuai dengan ukuran dan Bentuknya. Seperti ini niee kira-kira contohnya.

Nahh gimana tuh udah ada gambaran !! oh yaa scrip ini ada tombol Closenya Lo, jadi kalo pengunjung nga suka kan mereka tinggal Close aja. hee hebat kan. Tertarik buat masang di blog, siapa tau setelah masang space iklannya ada Advister yang minat hee..

Berikut adalah Cara Memasang Iklan Melayang di Sebelah Kanan dan Kiri Blog :

• Kita masuk Ke Blogger terlebih dahulu.

• Kalo udah kita ke Menu Tata Letak. 

• Pilih Tambahkan Gadged.

• Pilih yang HTML/Java Scrip.

•  Setelah itu tambahkan Kode Html di bawah ini:

 

<script type='text/javascript'>
    $(document).ready(function() {
    $('img#closed').click(function(){
    $('#btm_banner').hide(90);
    });
    });
    </script>
    <script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
    </script><script type="text/javascript">
    if (window.jstiming) window.jstiming.load.tick('headEnd');
    </script>
    <!--start: floating ads-->
    <div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">
    <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiRu0xXR8DD-8JWk71dDeSViQr9oXEubBQD43uCNp6cuIwefMkIWgAI5Hagw66YAm3zMsQvjGpilOiqxghQ4BjxTXxKRl3nnhRIf40yEXgsQ3Rt946cAQxYBIDGC1-cLn8TUhq9YMlaItT/s1600/PhoXo2.png'/></center></a></div>
    <!--Mulai-->

Scrip Iklan tarus di sini

    <!--Akhir-->
    </div>
    <!--end: floating ads-->
    <!--start: floating ads-->
    <div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">
    <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiRu0xXR8DD-8JWk71dDeSViQr9oXEubBQD43uCNp6cuIwefMkIWgAI5Hagw66YAm3zMsQvjGpilOiqxghQ4BjxTXxKRl3nnhRIf40yEXgsQ3Rt946cAQxYBIDGC1-cLn8TUhq9YMlaItT/s1600/PhoXo2.png'/></center></a></div>
    <!--Mulai-->

scrip iklan kalian taruh di sini

    <!--Akhir-->
    </div>
    <!--end: floating ads-->

 

 Nahh Kalo udah dimasukin Tinggal Di Save dah

 

Read More

Free Download template blogger Yahoo

Template Blogger Mirip Yahoo! - ini bukan template buatan saya tapi buatan dari seorang ahli pembuat template yaitu herdiansyah. tapi mungkin banyak cari/pengen dengan template ini Oke tanpa perlu basa-basi saya juga mau berbagi template ini kepada Sobat Sekalian :D .
oh iya template ini juga sudah didukung dengan blogger komentar style fantastis, tombol share dan juga cocok untuk ADSENSE

Untuk Demo :DEMO
Download : Mediafire
Password : CBR

Untuk tampilan template ini lebih wow atau lebih mirip dengan yahoo silahkan tambahkan script berikut. mungkin sudah banyak yang tahu cara tambah script ini buat yang belum tau klik Rancangan > Tambah Gadget > HTML/JavaScript

Search Engine/Mesin Pencari

<div style='font:normal 12px arial;padding-left:5px;height:23px;'>
<strong><i>Hi, guest<strong></strong></i> ! </strong> welcome to <strong>rianul.com</strong>. | <a href='#'>About Us</a> | <a href='#'>Contact</a> | <a href='http://www.blogger.com' title='registered now for free account'>Register</a> | <a href='http://www.blogger.com' title='sign in to blogger to share'>Sign In</a></div>
<form action=' /search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;&quot;;}' onfocus='if (this.value == &quot;&quot;) {this.value = &quot;&quot;}' type='text' value=''/>
<input class='searchbutton' type='submit' value=''/>
</form>

2. Slideshow

<div id="gal1" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_ha4bEfjE_Bfxf13ehK64N2fxwvqWY6o-W_K_f6-Quif3GvAYfDuBGhI3i5aRtVIny8yHKiFnB0ocQPxPkLNx5_Ff5XYidprWDvoOy-o5829ygIZfjzJTewTtYTQiZ3hQC1r-1zKqsDJp/s1600/Privacy+Policy+of+Template+Today.jpg&cat=1&pid=210 7&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>PRIVACY POLICY</strong></div>
<div class="des_1 font16 c_white"><a href="http://rianul.com"><strong>Read the Privacy Policy Of Template Today and Buy This Template Now</strong></a>
</div>
</div>
</div>
<div id="gal2" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix1bnAYIvWG-u3Lg3uLd-TXkcQ_Utu8-JSPoLfsQSvbX1p73Nxt7Pn7kS2kRld10qsTBrGMwCq-8aRwxKK2I_j-uUSp0ZxdpYOpeqEFKwtRMmWZXquyW6C3V1LPduou9S-I3GqGej2HvtT/s1600/What+is+a+Blog.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>BASIC KNOWLEDGE</strong></div>
<div class="des_1 font16 c_white"><a href="http://rianul.com"><strong>Basic knowledge, what is a Blog ?</strong></a>
</div>
</div>
</div>
<div id="gal3" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt1TNpDvIDP9i-f51Eb6o9BTu2kM6phjfNgOEHyNlmNl6K_gh58cMiXN9sxDcE7TqGQjEXQ5b-tl4h67EPDbfKTFN3E5RLXsICfdy7f3n8VD0UKoUCxf0jnvVDLJ5FO0enG3Er8-MfSQlH/s1600/Lionel+Messi.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>SPORT NEWS</strong></div>
<div class="des_1 font16 c_white"><a href="http://rianul.com"><strong>Lionel Messi, the legend of the future football</strong></a>
</div>
</div>
</div>
<div id="gal4" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPfw7PuYnD-Zoj7WH76t1bfCCLY4wmupLg2eGVuVaDVj2psHLnTHoC6q0bRyYelYh38jqa95d4rwTD4AmCvd5azN8g_edtpiTQYxUGpfspi6c4-AYwjf0lelIhoB3DHisobNm1QAHqaBlT/s1600/Font+Style.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>FONT STYLE</strong></div>
<div class="des_1 font16 c_white"><a href="http://rianul.com"><strong>The Quick Brown Fox</strong></a>
</div>
</div>
</div>
<div id="gal5" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimzGIf-saIEcqqZC9AcI9UdOBenF9HqlB1ick1CnFUSn8tvMi8JvvfzwYaXdiKlo3QZjX8B1uQDvzxujnxeLG8Ck7D7G9nyiKz1sUfvRJ4fPOFYI7CvUrBS9dDj1PNxfdvnkKcwOvqG27r/s1600/Google+Office.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>MAKE MONEY</strong></div>
<div class="des_1 font16 c_white"><a href="http://rianul.com"><strong>Monetize your site with Google Affiliate Network</strong></a>
</div>
</div>
</div>
<div style="height:250px; margin-top:-250px;"><div id="galtabs" class="page_hl pd_5"><a href="#" rel="gal1">1</a> <a href="#" rel="gal2">2</a> <a href="#" rel="gal3">3</a> <a href="#" rel="gal4">4</a> <a href="#" rel="gal5">5</a> </div></div><div class="clearit"></div>
<div class="clearit pb_10"></div>
<script type="text/javascript">
var myheads=new ddtabcontent("galtabs");myheads.setpersist(false); myheads.setselectedClassTarget("link");myheads.ini t(5000)
</script>

3. Menu Blog

<div id='sidebarnavigation'>
<ul>
<li class='about'><a href="#"/>About Us</a></li>
<li class='contact'><a href="#"/>Contact Us</a></li>
<li class='facebook'><a href="#" target="_blank"/> Facebook</a></li>
<li class='twitter'><a href="#" target="_blank"/> Twitter</a></li>
<li class='email'><a href="#" target="_blank"/> Email</a></li>
<li class='video'><a href="#" target="_blank"/> Video</a></li>
<li class='music'><a href="#" target="_blank"/> Music</a></li>
<li class='download'><a href="#" target="_blank"/> Download</a></li>
<li class='data'><a href="#" target="_blank"/> Data</a></li>
<li class='rss'><a href="#" target="_blank"/> RSS Feed</a></li>
<li><a href='#'>Archieves</a></li>
</ul>
</div>
<div style='font:bold 11px arial;float:right;line-height:1.4em;padding:5px 10px;color:#333;'>
<a href='http://chyber-id.blogspot.com/'>More CATEGORIES »</a>
</div>

NOTE * : Kalau Bisa Link Credit Jangan Dihapus. Seorang blogger yang baik tidak menghapus link credit template.

Read More

Membuat Halaman Posting Dan Komentar dalam Tab View

Pernah saya menerapkan Halaman Posting Dan Komentar dalam Tab View pada blog ini namun menggunakan jQuery, kali ini saya akan membagikan TAB yang tidak menggunakan jQuery maupun Javascript. Ok, langsung saja berikut cara membuatnya, Untuk DEMO nya bisa dilihat diblog ini.

1. Cari kode ini : 

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

  <b:include data='top' name='status-message'/>
  <data:defaultAdStart/>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.isDateStart'>
      <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      <div class="date-outer">
    </b:if>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      <div class="date-posts">
    </b:if>
---------------------------------------------------------------------------
    <div class='post-outer'>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
   </div>
---------------------------------------------------------------------------
    <b:if cond='data:post.includeAd'>
      <b:if cond='data:post.isFirstPost'>
        <data:defaultAdEnd/>
      <b:else/>
        <data:adEnd/>
      </b:if>
      <div class='inline-ad'>
        <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
  </b:loop>
  <b:if cond='data:numPosts != 0'>
    </div></div>
  </b:if>
  <data:adEnd/>
</div>

Perhatikan kode yang saya beri garis putus2, Ganti kode tersebut dengan kode ini : 

<div class='post-outer'>
    <div class='testsaja'>
  <input checked='checked' id='s1' name='s' type='radio'/>
  <input id='s2' name='s' type='radio'/>
  <div class='tabs'>
  <label for='s1'>Post</label>
  <label for='s2'>Komentar</label>
  </div>
 <ul class='sections'>
   <li><b:include data='post' name='post'/></li>
    <li><b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <b:include data='post' name='comment_picker'/>
       </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
          </b:if></li>
</ul></div></div>

Selanjutnya tambahkan kode ini diatas kode ]]></b:skin> 

input[type="radio"] {
    left: -9999px;
    position: absolute;
    top: -9999px;
}
.tabs {
    font-size: 0;
    height: 27px;
    position: relative;
    white-space: nowrap;
    z-index: 999;
}
.tabs label {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #DDDDDD;
    color: #666666;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 20px;
    text-transform: uppercase;
    vertical-align: bottom;
}
.tabs label:first-child {
    margin-left: 0;
}
.tabs label:hover {
    background-color: #DDDDDD;
}
input:nth-child(1):checked ~ .tabs label:nth-child(1), input:nth-child(2):checked ~ .tabs label:nth-child(2), input:nth-child(3):checked ~ .tabs label:nth-child(3), input:nth-child(4):checked ~ .tabs label:nth-child(4) {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: none;
    color: #000000;
    padding: 6px 20px;
}
.sections {
}
.sections li {
    display: none;
    height: auto;
}
input:nth-child(1):checked ~ .sections li:nth-child(1), input:nth-child(2):checked ~ .sections li:nth-child(2), input:nth-child(3):checked ~ .sections li:nth-child(3), input:nth-child(4):checked ~ .sections li:nth-child(4) {
    display: block;
}

Agar TAB tersebut tidak muncul di homepage tambahkan kode css ini diatas kode </head>

<b:if cond="data:blog.pageType != &quot;static_page&quot;">
<b:if cond="data:blog.pageType != &quot;item&quot;">
<style type="text/css">
.tabs  {display:none !important}
.sections li {display:block !important;}
</style>
</b:if>
</b:if>










SUmber :Here

Read More