Cara membuat slideshow

Biasanya slideshow di taruh pada halaman utama sebuah web ataupun blog. Dalam hal ini slideshow banyak digunakan untuk menampilkan profil sebuah website ataupun blog, ada juga website yang menggunakan slideshow untuk menampilkan produknya.
Silahkan anda LIHAT DEMO DISINI.
 
Dengan slideshow ini, anda tidak perlu menggunakan java script yang diberikan jasa pembuat slide. Anda bisa menambahkan slideshow pada web atau blog anda dengan membuat slideshow sendiri. Dan cara buatnya sangat mudah, yaitu anda tinggal copy paste kode-kode dibawah, kemudian anda bisa mengubah  kecepatan  tampilan slide dan ukuran panjang serta lebar gambar yang disesuaikan dengan web atau blog anda. Kemudian anda tinggal mengganti ulr yang ada dengan ulr gambar anda dan memberi uraian setiap gambar yang akan ditampilkan.

OK...!!!, Silahkan kuti langkah-langkah yang saya berikan di bawah ini :
1. Login ke blogger
2. Klik Rancangan dan pilih edit html
3. Sebagai pengaman silahkan download dulu template dan simpan dikomputer anda.
4. Silahkan anda cari kode </head>
5. Copy kode dibawah ini, dan paste diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
//Execute the slideShow, set 5 seconds for each images
slideShow(3000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h1></h1><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h1').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
        function () {
                clearInterval(timer);
        },
        function () {
                timer = setInterval('gallery()',speed);
        }
);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({left:500}, 300, function () {
                //Display the content
                $('#slideshow-caption h1').html(title);
                $('#slideshow-caption p').html(desc);
                $('#slideshow-caption').animate({left:0},1000);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
//]]>
</script>

<style type='text/css'>
ul.slideshow {
list-style:none;
width:500px;
height:320px;
overflow:hidden;
position:relative;
margin:5;
padding:5;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:500px;
height:300px;
border:none;
}
#slideshow-caption {
width: 500px;
height: 100px;
margin-left: 5px;
padding-left: 20px;
padding-top: 10px;
color:#000;
background:#fff;
z-index:500;
}

#slideshow-caption .slideshow-caption-container {
margin-left: 5px;
padding-left: 0px;
z-index:1000;
}
#slideshow-caption h1 {
margin-left: 20px;
padding-left: 10px;
font-size: 30px;
}
#slideshow-caption p {
margin-left: 20px;
padding-left: 10px;
padding-bottom: 10px;
}
</style>

Keterangan :
Ganti nilai dari width:600px; height:240px; sesuai dengan kebutuhan web atau blog anda.
Ganti nilai dari waktu slideShow(3000); sesuai keinginan anda.

Langkah selanjutnya :
4. Simpan  template.
5. Lankah selanjutnya kembali ke Rancangan dan pilih Elemen Halaman.
6. Silahkan tambah Gadget'.
7. Pilih 'HTML / Javascript' dan masukkan kode dibawah ini :

<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRklNtazJoJ8ZkIpHiWdEVi_300SL5aw_yrKybGTyQ05NagnMpfaqh65Nq6cNsiO32UxQC8To2nLdHT8Kk6Tuj5fTbOZbKe3nCWkfEAIL6eMTQw2-Ucq021hNi9aUTb8iVI_gkRAB-Wsw/s1600/1.jpg" title="Judul Description/uraian ke 1" alt="Ganti tulisan ini dengan Description/uraian 1 anda" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6V1xuL5gMFbDYgyiRBXIyW-RpKi85UvtEmNvGxqvQQkWkdQyiAcWT_LHuZZg6VwLOsMswzXB8el_Qb-ZbV6S85XDjL4Pph8pCpsPI8xo6d6UU9GpmgKv2dxIbkFQdUPkyJUlpDATTiNg/s1600/2.jpg" title="Judul Description/uraian ke 2" alt="Ganti tulisan ini dengan Description/uraian ke 2 anda" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgERkc3Sd_C7TqGlgxjPp5sXfyghheYS5zA9ooPJwf7Qu2Y7G53agbBjfVpqe2xJ6EENwGKHWNLZWzWpDQ8WrP2pm4dpjt5HO4t_ja2qdJnJEDkXb4MUqp5bEEa5wx9AEAT-GTng8w3wV0/s1600/3.jpg" title="Judul Description/uraian ke 3" alt="Ganti tulisan ini dengan Description/uraian ke 2 anda" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO6_egF_C9xeS1vb7-E_l23kWwlCUAMcy10kyv4e2vcRsfpLVHSvBUx4ibZxEAr2StJYpdZ5GXnot240PVT7g3P4zDp9LAkGQKTLzCjjgaV6ikUbT-3cSRkzLOGEeaajZyCuSoOci44OI/s1600/4.jpg" title="Judul Description/uraian ke 4" alt="Ganti tulisan ini dengan Description/uraian ke 2 anda" /></a></li>

</ul>

Keterangan :

Anda dapat menambahkan lebih banyak gambar dan uraian untuk dijadikan slide, sesuai yang Anda inginkan.

OK...!!! Silahkan anda mencoba.
Semoga bermanfaat untuk anda, jangan lupa luangkan waktu anda sebentar untuk memberi komentar anda dibawah ya........ Terima kasih.

Baca artikel lain :

Membuat variasi Font pada Teks

Sebuah Web ataupun Blog diharapkan memberi tampilan yang indah dan menarik. Salah satunya mengan memberikan variasi pada teks sesuai dengan selera kita,seperti memberi warna pada teks, memberi ukuran besar kecil dll. Dan kali ini saya akan memberi contoh bagaimana cara penulisan dalam HTML, agar tulisan lebih bervariasi.

Nama-nama Font bisa anda lihat dibagian paling bawah halaman ini. Daftar font yang saya contohkan saya ambil dari nama-nama font yang di pakai di Notepad, versi script western.

OK...!!!, sekarang silahkan anda perhatikan perbedaan contoh-contoh berikut :

1. Teks standart :

<font>Teks dengan fon standart</font>

berikut hasilnya :

Teks dengan font standart

2. Teks dengan nilai besar-kecil :

<font size="6">Teks dengan ukuran font</font>

 berikut hasilnya :

Tek dengan ukuran font

3. Teks dengan nilai ukuran dan berwarna :

<span style="color: #FF0000; font-size: 45px;">Teks dengan nilai ukuran dan berwarna merah</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna merah

<span style="color: #ffff20; font-size: 50px">Teks dengan nilai ukuran dan berwarna kuning</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna kuning

<span style="color: #009600; font-size: 30px;">Teks dengan nilai ukuran dan berwarna hijau</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna hijau

<span style="color: #1418ff; font-size: 20px;">Teks dengan nilai ukuran dan berwarna biru</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna biru

4. Teks berwarna dengan besar 30px,font Goudy Stout :

<span style="color: #1418ff; font-size: 30px"><span style="font-family: Goudy Stout,sans-serif;">Teks berwarna dengan besar 30px,font Goudy Stout</span></span>

berikut hasilnya :
Teks berwarna dengan besar 30px,font Goudy Stout

Gimana mudah kan....?
Berikut ini daftar macam-macam font untuk anda coba terapkan pada artikel anda :

Nama-nama Font

Agency FB Algerian Arial Arial Rounded MT Baskerville Old Face Bauhaus 93 Bell MT Berlin Sans FB ArialBernard MT Blackadder ITC Bodoni MT Bodoni MT Poster Book Antiqua Bookman Old Style Bradley Hand ITC Britannic Broadway Brush Script MT Calibri Century Gothic Century Schoolbook Chiller Colonna MT Comic Sans MS Cooper Copperplate Gothic Courier Curlz MT Edwardian Script ITC Elephant Engravers MT Eras ITC Felix Titling Fixedsys Footlight MT Forte Franklin Gothic Freestyle Script French Script MT Futura Md BT Gabriola Georgia Gigi Gill Sans Gloucester MT Goudy Old Style Goudy Stout Haettenschweiler Harlow Solid Harrington High Tower Text Impact Informal Roman okermanJ Juice ITC Kristen ITC Kunstler Script Latin Lucida Calligraphy Lucida Console Lucida Handwriting Lucida Sans Magneto Maiandra GD Matura MT Script Capitals Microsoft Sans Serif Mistral Modern Modern No. 20 Monotype Corsiva MS Sans Serif MS Serif Niagara Engraved Niagara Solid OCR-A BT Old English Text MT Onyx Palace Script MT Palatino Linotype Papyrus Playbill Poor Richard Pristina Rage Ravie Rockwell Roman ArialScript Script MT Segoe Print Segoe Script Segoe UI ArialShowcard Gothic Small Fonts Snap ITC Stencil System Tahoma Tempus Sans ITC Terminal Times New Roman Trebuchet MS Tw Cen MT Verdana Viner Hand ITC Vivaldi Vladimir Script

selamat mencoba dan semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentarmu ya......terima kasih.

Baca artikel lain :

Cara Buat Kotak menggunakan atribut Fieldset

Saat yang lalu saya menjelaskan cara membuat tabel. Dan pada tutorial blog kali ini hampir mirip dengan tabel, sama-sama berbentuk kotak. Tapi kotak yang ini berfungsi sebagai teks area dan bentuknya lebih sederhana, tapi tetap indah dan rajin. Cara buat kotak ini mudah, hanya dengan menggunakan atribut html : <fieldset>

Berikut kodenya silahkan anda copy, bila anda berminat :

Kotak 1

<fieldset>
Teks anda disini
</fieldset>

Berikut hasil kode diatas :

Teks anda disini

Kotak 2

<fieldset><br>
<legend><b>Judul Teks disini</b></legend>Isi Teks anda disini
</fieldset>

Berikut hasil kode diatas :

Judul Teks disini Isi Teks anda disini

Kotak 3

<fieldset><br>
<legend><b><fieldset>Judul Teks disini</fieldset></b></legend>Isi Teks anda disini
</fieldset>

Berikut hasil kode diatas :

Judul Teks disini Isi Teks anda disini

Nah.....,mudah kan...?
Silahkan anda bisa otak - atik sendiri sesuai selera anda. Semoga bermanfaat.
Mohon luangkan waktu anda untuk meninggalkan komentar anda ya..... Terima kasih.

Baca artikel lain :

Cara membuat Scroll Box

Pada Tutorial blog kali ini saya akan kasih tips cara membuat Scroll Box. Scroll Box banyak digunakan di web atau blog. Scroll Box sangat berguna sekali untuk menghemat tempat, terutama bila halaman web atau blog sudah penuh dan sementara masih banyak artikel atau apa saja yang ingin tetap ditampilkan pada satu halaman. Scroll Box selain bisa digunakan untuk tempat artikel, banyak juga yang menggunakan Scroll Box sebagai tempat daftar isi.

Cara membuat Scroll Box sangat mudah, silahkan anda perhatikan contoh dibawah ini berikut kodenya :

JUDUL ARTIKEL
Silahkan anda bisa mengisi artikel atau daftar isi atau apa saja disini. Semakin banyak teks yang anda isikan dalam scroll box ini, dengan sendirinya akan membentuk kotak scroll box secara otomatis, sehingga dapat menghemat tempat. Lihat Contoh scroll box dibawah dengan isi teks yang lebih banyak.

Berikut Kode untuk scroll box diatas :

<div align="center">

<table width="250" border="1">

<tr> <th colspan="100%" scope="col">JUDUL ARTIKEL</th> </tr>

<tr><td><div style="font-family: arial; font-size: 12px; overflow: scroll; width: 250px; height: 150px;"><div style="text-align: center; width: 100%; padding: 0 px; overflow: hidden;">Silahkan anda bisa mengisi artikel atau daftar isi atau apa saja disini. Semakin banyak teks yang anda isikan dalam scroll box ini, dengan sendirinya akan membentuk kotak scroll box secara otomatis, sehingga dapat menghemat tempat. Lihat Contoh scroll box dibawah dengan isi teks yang lebih banyak.</div></div></td></tr>

</table>

</div>

Anda juga bisa memberi warna sesuka anda, seperti scroll box dibawah ini berikut kodenya :

CONTOH DAFTAR ISI TUTORIAL BLOG

Cara pasang tombol share Cara mencari kode HTML Cara membuat Blog menjadi Dofollow Cara membuat textarea dengan tombol "select all" Cara membuat effek scroll pada Titel Bar Cara membuat tanggal otomatis update Cara Membuat Pop-up Window Cara Membuat Navigasi Halaman Cara Membuat Subscribe email pada blog Cara membuat efek shadow pada kotak dan gambar Cara Membuat Tabel (Tahap 2) Cara membuat List pada daftar Cara pasang Iklan diatas postingan Cara membuat "Embed ULR, HTML, Link Forum" dibawah artikel Cara membuat artikel berhubungan Cara Menambah widget pengatur Ukuran dan Warna teks pada Blog Cara Menambahkan Efek Teks pada Cursor Mouse Cara buat kotak Pencarian Cara buat Menu navigasi Drop-Down Horisontal Cara Membuat Label Animasi "blogumulus" Cara membuat Tag Cloud Cara Pasang Radio Online Cara Membuat label di blog Cara membuat Slider Cara membuat slideshow Cara Membuat variasi Font pada Teks Cara Buat Kotak atau Teks Area Cara membuat Scroll Box Cara Membuat Tabel (Tahap 1) Cara membuat Link Terbuka di halaman Baru Cara Menambah Gadget diatas Header Cara Buat Sitemap / Peta Situs Cara buat tabel kode warna Cara Membuat Teks Berjalan ( Marquee ) Cara Membuat Refresh Otomatis pada Blog Cara Membuat Rounded Corner Cara membuat Text-Shadow Cara Memasang Background Gambar pada postingan Cara membuat daftar isi otomatis Cara Menambah Widget Jam pada Blog Cara Membuat Read more Cara Menghilangkan Navbar Pada blog Cara Membuat Navbar Auto-Hide Cara Membuat Forum Login Cara Membuat Anti Copy Paste Cara Membuat pesan selamat datang Cara Membuat Animasi Status Loading Cara Membuat Text Area blok Otomatis

Berikut Kode untuk scroll box diatas :

<div align="center">
<table width="250" border="1">
<tr> <th colspan="100%" scope="col"bgcolor="#F2F2F2">CONTOH DAFTAR ISI TUTORIAL BLOG</th> </tr><tr><td>
<div style="font-family: arial; font-size: 12px; overflow: scroll; background: #FFFFFF; border-color: #CCCCCC; width: 250px; height: 250px;"><div style="text-align:left; width: 100%; padding: 0 px; overflow: hidden; color: #FFFFFF; background: #EFEFFB;">


<ul>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-pasang-tombol-share.html">Cara pasang tombol share</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-mencari-kode-html.html">Cara mencari kode HTML</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-blog-menjadi-dofollow.html">Cara membuat Blog menjadi Dofollow</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-textarea-dengan-tombol.html">Cara membuat textarea dengan tombol "select all"</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-effek-scroll-pada-titel.html">Cara membuat effek scroll pada Titel Bar</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-tanggal-otomatis-update.html">Cara membuat tanggal otomatis update</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-pop-up-window.html">Cara Membuat Pop-up Window</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-navigasi-halaman.html">Cara Membuat Navigasi Halaman</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/cara-membuat-subscribe-email-pada-blog.html">Cara Membuat Subscribe email pada blog</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/cara-membuat-efek-shadow-pada-kotak-dan.html">Cara membuat efek shadow pada kotak dan gambar</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/cara-membuat-tabel-tahap-2.html">Cara Membuat Tabel (Tahap 2)</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/cara-membuat-list-pada-daftar.html">Cara membuat List pada daftar</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/cara-pasang-iklan-diatas-postingan.html">Cara pasang Iklan diatas postingan</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/cara-membuat-ulr-html-link-forum.html">Cara membuat "Embed ULR, HTML, Link Forum" dibawah artikel</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/cara-membuat-artikel-berhubungan-atau.html">Cara membuat artikel berhubungan</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/menambah-widget-pengatur-ukuran-dan.html">Cara Menambah widget pengatur Ukuran dan Warna teks pada Blog</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-menambahkan-efek-teks-pada-cursor.html">Cara Menambahkan Efek Teks pada Cursor Mouse</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-buat-kotak-pencarian-untuk-web.html">Cara buat kotak Pencarian</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-buat-menu-navigasi-drop-down.html">Cara buat Menu navigasi Drop-Down Horisontal</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/membuat-label-animasi.html">Cara Membuat Label Animasi "blogumulus"</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-membuat-tag-cloud.html">Cara membuat Tag Cloud</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/radio-online.html">Cara Pasang Radio Online</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-membuat-label-di-blog.html">Cara Membuat label di blog</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-membuat-slider.html">Cara membuat Slider</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-membuat-slideshow.html">Cara membuat slideshow</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/membuat-variasi-font-pada-teks.html">Cara Membuat variasi Font pada Teks</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-buat-kotak-atau-teks-area.html">Cara Buat Kotak atau Teks Area</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-membuat-scroll-box.html">Cara membuat Scroll Box</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-membuat-tabel-tahap-1.html">Cara Membuat Tabel (Tahap 1)</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-membuat-link-terbuka-di-halaman.html">Cara membuat Link Terbuka di halaman Baru</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-menambah-gadget-diatas-header.html">Cara Menambah Gadget diatas Header</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/12/cara-buat-sitemap-peta-situs.html">Cara Buat Sitemap / Peta Situs</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/12/cara-buat-tabel-kode-warna.html">Cara buat tabel kode warna</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/12/membuat-teks-berjalan-marquee.html">Cara Membuat Teks Berjalan ( Marquee )</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/12/membuat-refresh-otomatis-pada-blog.html">Cara Membuat Refresh Otomatis pada Blog</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/11/cara-membuat-rounded-corner.html">Cara Membuat Rounded Corner</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/11/cara-membuat-text-shadow.html">Cara membuat Text-Shadow</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/11/cara-memasang-background-gambar-pada.html">Cara Memasang Background Gambar pada postingan</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/11/cara-membuat-daftar-isi-otomatis.html">Cara membuat daftar isi otomatis</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/10/menambah-widget-jam-pada-blog.html">Cara Menambah Widget Jam pada Blog</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-read-more.html">Cara Membuat Read more</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-menghilangkan-navbar-pada-blogger.html">Cara Menghilangkan Navbar Pada blog</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-navbar-auto-hide.html">Cara Membuat Navbar Auto-Hide</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-forum-login.html">Cara Membuat Forum Login</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-agar-postingan-tidak-dapat-di-copy.html">Cara Membuat Anti Copy Paste</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/membuat-pesan-selamat-datang-pada-blog.html">Cara Membuat pesan selamat datang</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-animasi-status-loading.html">Cara Membuat Animasi Status Loading</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-text-area-blok-otomatis.html">Cara Membuat Text Area blok Otomatis</a></li>
</ul>

</div>
</div>
</td></tr>
</tbody></table>
</div></div></div></td></tr>
</table></div>

Silahkan anda ganti teks berwarna merah dia atas dengan daftar isi milik anda. Untuk memilih warna beserta kodenya silahkan anda lihat tabel kode warna yang ada disebelah samping halaman ini. 

Dan cara penulisan  link untuk daftar seperti diatas, silahkan anda lihat artikelnya di : http://www.carabuatwebgratis.com/2011/03/penggunakan-atribut-hyperlinks.html

Demikian cara membuat scroll box,

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

Cara Membuat Tabel (Tahap 1)

Tutorial Blog kali ini saya akan membahas bagaimana cara membuat tabel. Karena tabel sangat penting dan sering diperlukan ketika kita edit atau posting artikel pada web atau blog. Biasanya tabel digunakan untuk membuat Daftar atau forum. Tapi dengan tabel kita juga bisa membuat artikel kita menjadi beberapa Kolom atau Layout, seperti halnya yang sering kita lihat kolom-kolom yang ada di Koran atau majalah.

Untuk membuat tabel, ada beberapa unsur elemenatau atribut html yang kita butuhkan, yaitu :

-    Table width : nilai lebar tabel keseluruhan.

-    Border : nilai ketebalan garis

-    Baris tabel ditandai dengan tag awal <tr> dan tag akhir </tr>

-    Kolom tabel ditandai dengan tag awal <td> dan tag akhir </td>

Silahkan anda  perhatikan cara penulisan kode untuk membuat tabel :

1. Tabel 1 kolom, dan 1 baris

<table width="500" border="1">
<tr>
<td scope="col">Tabel 1 kolom, dan 1 baris</td>
</tr>
</table>

Berikut hasilnya :

Tabel 1 kolom, dan 1 baris

2. Tabel 1 kolom, dan 2 baris

Untuk membuat tabel 2 baris dan seterusnya, kita tinggal menambahkan elemen tag <tr></tr>  diantara tag <table> </table>  yaitu :

<table width="500" border="1">

<tr>

<td>Tabel 1 kolom, dan baris pertama</td>

</tr>

<tr>

<td>Tabel 1 kolom, dan baris kedua</td>

</tr>

</table>

Berikut hasilnya :

Tabel 1 kolom, dan baris pertama

Tabel 1 kolom, dan baris kedua

3. Tabel 2 kolom, dan 1 baris

Untuk membuattabel 2 kolom dan seterusnya kita tinggal menambahkan elemen tag <td></td> diantara <tr></tr>  yaitu :

<table width="500" border="1">

<tr>

<td> Kolom Pertama</td>
<td>Kolom Kedua</td>

</tr>

</table>

Berikut hasilnya :

Kolom Pertama

Kolom Kedua

4. Tabel 2 kolom dengan 2 baris

<table width="500" border="1">
<tr>
<td>Baris pertama dan Kolom Pertama</td>
<td>Baris pertama dan Kolom Kedua </td>
</tr>
<tr>
<td>Baris Kedua dan Kolom Pertama</td>
<td>Baris Kedua dan Kolom Kedua</td>
</tr>
</table>

Berikut hasilnya :

Baris pertama dan Kolom Pertama	Baris pertama dan Kolom Kedua
Baris Kedua dan Kolom Pertama	Baris Kedua dan Kolom Kedua

5. Tabel dengan garis tebal

Garis tebal ditentukan oleh Nilai border, semakin besar nilainya semakin Tebal garisnya dan terlihat seperti 3D (efek bevel)

<table width="500" border="5">
<tr>
<td><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :

Teks

6. Tabel dengan garis berwarna

Untuk memberi  warna border kita tinggal menambah  “bordercolor “

<table width="0" border="1" bordercolor="#3083FF">
<tr>
<td><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :

Teks

7. Tabel dengan warna background sama

Untuk memberi warna Background dengan warna sama seluruh tabel kita tinggal menambah  “bgcolor “.

<table width="500" border="1" bgcolor="#00FF00">
<tr>
<td><div align="center">Teks</div></td>
<td><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :

Teks

Teks

8. Tabel dengan warna beda

Untuk memberi warna Background dengan warna berbeda pada setiap kolomnya :

<table width="500" border="1">
<tr>
<td bgcolor="#D9F5FF"><div align="center">Teks</div></td>
<td bgcolor="#E1FACD"><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :

Teks

Teks

9. Tabel dengan Judul

<table width="500" border="1">

<tr> <th colspan="100%" scope="col"bgcolor="#FFF7DB">JUDUL TABEL</th> </tr>
<tr>
<td bgcolor="#E4FADE"><div align="center"><strong>Judul Kolom 1</strong></div></td>
<td bgcolor="#EDFBFF"><div align="center"><strong>Judul Kolom 2</strong></div></td>
<td bgcolor="#FDF0FF"><div align="center"><strong>Judul Kolom 3</strong></div></td>
</tr>
<tr>
<td bgcolor="#E4FADE"><div align="center">Teks</div></td>
<td bgcolor="#EDFBFF"><div align="center">Teks</div></td>
<td bgcolor="#FDF0FF"><div align="center">Teks</div></td>
</tr>
<td bgcolor="#E4FADE"><div align="center">Teks</div></td>
<td bgcolor="#EDFBFF"><div align="center">Teks</div></td>
<td bgcolor="#FDF0FF"><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :

JUDUL TABEL
Judul Kolom 1	Judul Kolom 2	Judul Kolom 3
Teks	Teks	Teks
Teks	Teks	Teks

Nah....., Silahkan anda bisa otak - atik sendiri sesuai selera anda. Semoga bermanfaat.
Mohon luangkan waktu anda untuk meninggalkan komentar anda ya..... Terima kasih.

Baca artikel lain :

Pasang Iklan Gratis Nempel Terus

Anda ingin Agar Link ke Web atau Blog Anda nempel terus dan dibantu promosikan oleh 1 juta orang lebih? Jika Ya, maka Anda dapat menggunakan iklan dengan Faktor Kali. Cara Kerjanya sangat sederhana. Anda mendaftar gratis tanpa biaya tersembunyi di link yang akan saya sebutkan beberapa saat lagi. Kemudian langsung LOGIN dan isi Data Anda meliputi Blog Anda, judul Blog Anda dan keterangan singkat tentang Blog Anda tersebut. Segera setelah itu anda akan punya WEBSITE REPLIKA KHUSUS dengan id Anda yang unik untuk Anda promosikan.

Bagaimana detailnya promosi Anda bisa dahsyat begitu? Cara kerjanya silahkan baca disini:
Satu Link Tukar Sebar Sejuta

Link untuk Registrasi dan Login ada di bagian bawah halaman ini. Anda akan segera mendapatkan affiliate URL tersebut setelah mendaftar. Idealnya Anda memang mengajak 2 orang teman Anda untuk memasang bisnis mereka disini agar bisnis Anda berpotensi nempel pada jutaan orang. Namun jika Anda tidak mengajak orang sekalipun, link Anda TETAP akan nempel pada sponsor, asalkan Anda telah mendaftar dan setting data Anda di member area WEBSITE REPLIKA anda. Disini Sponsor dibantu, Member pun dibantu. Saya jelaskan di bagian bawah halaman ini.

 

Berikut ini Iklan 20 Level itu, berturut-turut dari sponsor saat ini, diikuti oleh upline mereka:

Cara Buat Website& Blog Gratis Mudah, Cepat, Langsung Praktek Menghasilkan

Rahasia Website Pemula (RWP), Satu-satunya Bisnis Online bagi Pemula yg Memiliki Metode Belajar Online dan Offline. (Link ini dipasang oleh noer cholis, sponsor level 0)

Pasang iklan metode terbaru...Lebih interaktif.

Pasang iklan dengan pola get member selain iklan bisa dilihat ribuan orang akan mendapatkan income tanpa batas. (Link ini dipasang oleh Mukhtarudi, sponsor level 1)

DBSgold jaringan Group MANTAP system Lock

Anda pusing mikir bisnis on line sdh saatnya Anda tentukan jalan Anda sekarang juga...ini Real sdh ciptakan Jutawan di Indonesia.. Ingat Anak Istri dan (Link ini dipasang oleh pamuji, sponsor level 2)

werbsite termurah di Indonesia

jadikan website sarana bisnis anda agar dikenal di seluruh dunia hub:08197471696 (Link ini dipasang oleh mashudilubis, sponsor level 3)

MODEM Akses Internet Cepat 24 Jam Non Stop ! BIAYA MURAH

Ingin internetan sepuasnya 24 Jam non stop (UNLIMITED) Biaya MURAH MERIAH. Tanpa takut tagihan membengkak. Miliki MODEM AKSES INTERNET disini. (Link ini dipasang oleh Darmadi, sponsor level 4)

Belajar Bisnis Internet Marketing Gratis + Dapat Ebook Marketing Dahsyat Gratis

Tempat dimana anda akan menemukan artikel seputar seluk beluk bisnis internet marketing. Dari strategi, sistem , hingga cara bisnis di internet (Link ini dipasang oleh Umar Hadi, sponsor level 5)

Bagaimana Uang Rp 200.000 Anda menjadi Rp 8.043.750 dalam waktu 6 bulan

Bonus Puluhan Juta PASIF INCOME PERBULAN yang Anda Pasti dapatkan Hanya Dalam Waktu 3-6 Bulan Saja Dan Anda Dapat Mulai Mewujudkan Impian Anda Bersama (Link ini dipasang oleh feri setiawan, sponsor level 6)

Rumus Bikin Duit Ala Indonesia Yang Canggih

Rahasia Hebat, bagaimana cara mendapat uang secara online hanya dalam 30 menit (Link ini dipasang oleh Gatoet Agoes, sponsor level 7)

Segera wujudkan mimpi anda

Bersiaplah untuk mendapatkan penghasilan penuh cuma dari rumah. (Link ini dipasang oleh Sunarto Hadiurip, sponsor level 8)

Panduan Belajar WordPress Gratis

Belajar bagaimana menginstall WordPress dan mengelolanya menjadi blog yang handal (Link ini dipasang oleh Lutvi Avandi, sponsor level 9)

Kue Kering Enak dan Lezat !!!

Pesan sekarang kue kering enak dan lezat, terbuat dari bahan bermutu dan sehat. (Link ini dipasang oleh Andreas, sponsor level 10)

Bisnis Super Langka Sedang Diburu Didarat dan Di Internet

Produk Unggulan Rekomendasi Dokter Boyke, Bonus Mingguan Super Cepat, Semudah Bisnis Ebook, Lagi Booming (Link ini dipasang oleh Mufli, sponsor level 11)

Yang Hebat Lagi,

Saya Juga Akan Membantu Anda

Saya noer cholis, Siap Membantu Anda berpromosi disini. Bukan hanya link sponsor yang nempel terus tetapi Anda juga akan ikut saya perkenalkan di POSISI INI jika Anda join. Apa lagi yang Anda tunggu? Silahkan Dafar Lewat Sini (noer cholis, Sponsor Anda).
Jadi di website ini Sponsor dibantu, Member Juga dibantu!.

Active Member Terbaru Lainnya:  

andry sijabat, Sudiyanto Pandji Wiryoatmodjo, andika faris, Reborn Fashionline, Ida Bagus Widnya, lim mulyono, Irwan, Dariansyah, Ikramullah Mahmuddin, tunardi, juharwadi, Adrian, hendratedjokusumo, kusmanto, BisnisinetdotCom, adheafx24, harsono, Andi Agus, reza adi nugraha, armin damar jaya, eko tri, Reince, Teridefira, inok, kresno, chairil muhsin, imam budianto, makmun friana, devi, SINAR PELANGI EDUTOYS, Sopyan, lalu muhanan lubis, berry septian, Umaruddin, dasep setiawan chonim, I Made Dhita Prianthara, hasan joe armstrong, taufik, A Rahim BA, candra boni, mbah saeun, azbyanwar, dadan hamdani, nurmann, rony robianto, yadi suryadi, Slamet Estriyanta, mudher, Aris Mukti, mira miranti, ... You?

Silahkan Mendaftar, Klik Tombol Diatas
Gratis

Baca artikel lain :

Cara membuat Link Terbuka di halaman Baru

Sering kali kita mendapati banyak link yang terdapat pada halaman sebuah web atau blog, baik terletak pada teks, gambar, baner atau yang lain. Dan ketika link-link tersebut kita klik, biasanya akan terbuka halaman baru tapi halaman sebelumnya masih tetap terbuka. Hal ini dimaksudkan agar pengunjung bisa melihat dokumen yang tersimpan pada link tersebut, tanpa harus meninggalkan halaman yang masih dilihat atau dibaca.

Cara membuat Link tersebut sangat mudah, kita tinggal menambahkan atribut " target=”_blank”> " pada link yang kita buat. Perhatikan perbedaan contoh link dibawah ini :

Link yang tidak membuka halaman baru :

<a href=" http://htmlnoer.blogspot.com">Klik disini</a>

Link yang membuka halaman baru :

<a href=" http://htmlnoer.blogspot.com" target=”_blank”>Klik disini</a>

Mudah kan.....?

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya...... Terima kasih.

Baca artikel lain :

Cara Menambah Gadget diatas Header

Pada umumnya blog bawaan dari blogger tidak terdapat gadget yang berada diatas header. Tapi kita sering melihat web maupun blog yang meletakkan gadget diatas header, seperti iklan baris, baner, gambar, teks berjalan, animasi, atau apa saja sesuai selera atau kebutuhan blog. Lalu bagaimana cara menambah gadget diatas header ?.

Ok....Silahkan ikuti langkah - langkah berikut ini :

1. Login ke Blogger.

2. Klik Tata Letak/layout/rancangan.

3. Klik Edit HTML.

4. Lalu cari kode berikut :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Catatan : 

Setiap template mempunyai kode yang berbeda-beda, cari saja yang mirip seperti kode diatas.

5. Ganti kode diatas dengan kode berikut ini :

<b:section class='header' id='header' preferred='yes'>

6. Klik Save Template

7. Klik Page Element -> 
Lihat perubahan yang terjadi, sudah terdapat penambahan add a gadget diatas header yang dapat anda isi sesuai kebutuhan blog anda.

Mudah kan.....?

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :