Cara Membuat label di blog

Label diperlukan agar kita lebih mudah mengkatagorikan sebuah artikel, dengan label kita lebih mudah memilih artikel sesuai dengan kategori atau jenis artikel tertentu. Selain itu label juga berpengaruh  sebagai kata kunci atau tag cloud pada searh engine. Dalam hali ini terlebih dulu kita harus selalu memberi label pada setiap artikel yang kita buat atau akan kita posting. 

Lalu bagaimana cara membuat label ?

Okey...., untuk membuat label saya akan coba jelaskan dalam beberapa cara, mengingat banyak teman yang sudah posting artikel banyak tapi belum memberi label.

A. Pada saat kita buat artikel. 

1. Login ke blogger
2. Pilih Entri Baru

3. Tulis Artikel Anda
 
 4. Memberi Label
Pada gambar diatas, anda lihat pada bagian bawah kanan bertuliskan "Label". Silahkan anda isi sebuah atau beberapa kata kunci yang menggambarkan artikel yang anda tulis.
5. Terbitkan Entri.

B. Bila Artikel sudah dibuat tapi Label belum dibuat

Anda masih bisa buat label pada artikel anda Yaitu :
1. Login ke blogger
2. Pilih Edit Entri
 

Selanjutnya langkah ke 3 - 5 lakukan seperti langkah A.

Anda bisa lihat hasil label yang sudah anda lihat pada halaman edit entri, yaitu tulisan berwarna hijau setelah judul Posting adalah label yang kita buat. Lihat gambar dibawah :

Setelah anda membuat label pada seluruh artikel atau postingan anda, selanjutnya anda tinggal menampilkan label pada halaman depan blog anda. Perhatikan langkah berikut :

1. Login ke blogger
2. Klik Rancangan dan pilih Elemen Laman

3. Tambah Gadget



4. Pada jendela baru anda scroll kebawah dan pilih "Label"
 

5. Simpan.


Nah..., label sudah anda buat, dan gadget label sudah ditampilkan. Silahkan anda kembali kehalaman depan blog anda, perhatikan hasil yang terjadi pada gadget Label.

Keterangan :

Pada edit gadget ada beberapa pengaturan tentang penampilan label, silahkan anda atur sesuka anda.


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 Slider

Kalau yang lalu saya membahas cara membuat slideshow, tutorial blog kali ini saya akan coba share mengenai slider. Perbedaan slideshow dengan Slider yaitu Kalau slideshow bekerja secara otomatis, sedang slider yang akan saya bahas yaitu slider bergerak kesamping kanan atau kiri apa bila kita mengklik tombol yang ada di sisi kanan dan kiri slider tersebut.

Contoh 1  Gambar slider seperti ini :

Contoh 2  Gambar slider seperti ini :

LIHAT DEMO CONTOH 1

LIHAT DEMo CONTOH 2

Bila anda berminat, silahkan anda ikuti langkah-langkah berikut 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> 

Untuk slider contoh 1 :

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script> <script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script> <script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap:"both", scroll:2, animation:"slow" }); function mycarousel_initCallback(carousel) { jQuery('#featured-next-button').bind('click', function() { carousel.next(); return false; }); jQuery('#featured-prev-button').bind('click', function() { carousel.prev(); return false; }); jQuery('.button-nav span').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; jQuery('#feature-carousel').jcarousel({ wrap:"both", scroll:1, auto:10, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null }); }); </script> <style type="text/css"> .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 900px;margin: 0 auto;padding:0 20px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {width: 850px;height: 254px;} .jcarousel-skin-tango .jcarousel-item {width: 270px;height: 254px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz1tjjct0ZwK5Xma1IBa76vdCHV1iiMo5DeHaSmdCr-vfgsK_RE_A8l9Mt8w_RzKogDPQVtjMFs4vymY6bazSsf9fB0PuYtNo_1p7A15Utod2sOx3dl34Tj3-xv0A6JACsbGnGd6gYHtF6/s1600/image-slider-button.png) no-repeat scroll -46px 0; cursor:pointer; height:254px; right:20px; position:absolute; top:0; width:46px; } .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz1tjjct0ZwK5Xma1IBa76vdCHV1iiMo5DeHaSmdCr-vfgsK_RE_A8l9Mt8w_RzKogDPQVtjMFs4vymY6bazSsf9fB0PuYtNo_1p7A15Utod2sOx3dl34Tj3-xv0A6JACsbGnGd6gYHtF6/s1600/image-slider-button.png) no-repeat scroll 0 0; cursor:pointer; height:254px; left:20px; position:absolute; top:0; width:46px; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 3;display: none;} .jcarousel-prev {z-index: 3;display: none;} #news-slider{background-color:#FFFFFF;padding:10px 0;} #news-slider img{border:none;height:254px;width:250px;} </style>

Untuk slider contoh 2 :

<script src="http://bnote.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> <script src="http://bnote.googlecode.com/files/jquery.jcarousel.pack.js" type="text/javascript"></script> <script src="http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap:"both", scroll:2, animation:"slow" }); function mycarousel_initCallback(carousel) { jQuery('#featured-next-button').bind('click', function() { carousel.next(); return false; }); jQuery('#featured-prev-button').bind('click', function() { carousel.prev(); return false; }); jQuery('.button-nav span').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; jQuery('#feature-carousel').jcarousel({ wrap:"both", scroll:1, auto:10, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null }); }); </script> <style type="text/css"> .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;border:2px solid #5d5d5d; background-color:#aaa;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 900px;margin: 0 auto;padding:10 10px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {-moz-border-radius: 5px;width: 840px;height: 100px;margin: 0 auto;padding:10px;border:2px solid #fff; background-color:#bbb;} .jcarousel-skin-tango .jcarousel-item {width: 100px;height: 110px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png) no-repeat scroll 0 0; cursor:pointer; height:25px; right:0px; position:absolute; width:25px; top: 50%; } .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png) no-repeat scroll 0 0; cursor:pointer; height:25px; left:5px; position:absolute; width:25px; top: 50%; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 100;display: none;} .jcarousel-prev {z-index: 100;display: none;} #news-slider{background-color:#FFFFFF;padding:10px 0;} #news-slider img{border:none;height:100px;width:100px;} </style>

Catatan : Untuk membuat satu slider, anda tinggal pilih salah satu kode diatas.

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 :

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='Ulr dokumen 1'><img src='Ulr gambar 1'/></a></li>
<li><a href='Ulr dokumen 2'><img src='Ulr gambar 2'/></a></li>
<li><a href='Ulr dokumen 3'><img src='Ulr gambar 3'/></a></li>
<li><a href='Ulr dokumen 4'><img src='Ulr gambar 4'/></a></li>
<li><a href='Ulr dokumen 5'><img src='Ulr gambar 5'/></a></li>
</ul>
</div>

Kalau sudah diisi ulr nya, bentuknya seperti dibawah ini :

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivE0o245y9ON1TYPf6iMtnKKmGLBqtU00HUx3lHIsVwFuj4mswXRHIpqre5p-1u6Eo9g3lrds7pShGGc5WbY2HeYMAojk-tiP1_uH5Wyu_iPxLmmfVdKKCP-7SAVR2hn6O5nw5pw0LryyP/s1600/Business+Company+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzjkIMp5vbMQPQdrlN7RT2EsaeFCZ97Su_SqVsbL3exR1pjpCZvIsoeMLSZVB1lfHI9UkNOqYVQ1JdFUw9FJoEzuOGG9ExQOEFcTCZ-NcKSrtl_lnzo0zuBwbZqXjuUfGYhXygIAwqChwj/s1600/Incorporate+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16_CDnb4Va1eK7SZFolwzREtLTe3QyOb_Et_Zsvz9dPsUzRjZE2p2H2KE8BDtmKCMSS31ZR4bwG0Kky2oHwQw0Igv8vGt0SGjE0BCqop7Q7QKIGnyg9mnmBryDndLtiNKRYqWhkFlXsg7/s1600/Business+Style+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Wvhn2eHu4DgAI5CKIQA2-rQj0ptbwo8dYIYSocb_Nfx8eJSnloClwfQ1-oMc2wSVP0WiewoD-aoVXIrJJxA83xNWy04pfpk-p3TJ_4dtF4pz-RVyipYbXjZnytQK3FCrPcAKNMIMoDjY/s1600/Dominate+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqo4ZadeD7MrFSl6gYDDuGe66n6gs4lspPporEkQX9IFIELb1PI3XL5z6Youqkxa4bwcOfmXQ0U4GmnJyOiDzzlKw8KqSpqmCdpp1otx9C_526gLtvMqFT0UzUbLHvaa4sLXXd6p_opNTG/s1600/Business+Corp+Blogger+Template-1.jpg'/></a></li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZqxZ2VNmRdiYJGBYTUjZr7OxFI_jliL32BGwWUK0ZRYxeBNh5Tnv_-8BmoZJD9Y2e-nTZW4t2WqUD3SUzW7mYVIugp5IZD_5mznp1jMRg534S6kv_B14cFQmeuvlgmR4fH9gtkMYgEH8p/s1600/Business+View+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Nw6WujBwLedpeGE7iiQxBhezzEiv4IaEW2eltDr6JDJCL_ECM8oUSq4KGcTHs-up1lg9BlKg2qtqMtW78zDwaY7S4TKnZ8Rhce9pOhe3Ih4eSofeO4Tw0sutAc-Nf0N7ftCjYE772hZZ/s1600/Glorius+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEippK0MNCU15XwtJvP-twBpZczZ4H3N6K94tOd0T88iSsOSQZUBSgCS9qy9a1j4_CDYK8x2llwtphZeKbUHwMvyPZ-oiUxrCO99EimUQctcMNx_NafzY9yLr76koKSatPZgIdhu-z8AZEw-/s1600/iFinance+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4l_jdyaRLhCPBb8wifWIkth4d8rUMyulfWfRd_D7SLOxhIMxloL7PLjThu8gDRrCne_vI8e77LT9QNr5Bi0GqFXioBVsKGIFKpqpJH342M21Ng1xfcpzzBIKycOCbmeK5B3_RYBkl-Gm/s1600/Company+Style+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIyxqw4RjvT-AOBOSgvDcvmfvgHTrm9JpD59gtOhmmibIQwLZKWfiiDwibc3XZpBBNhfH7_EWh_saONOxZUDRcMalLmcsNAQ2dTzlMni4cLyIBQKhW_Z6xnk3MnFmFDfX2Q0i7UriWy0N0/s1600/Business+Top+Blogger+Template-1.jpg'/></a>
</li>
</ul>
</div>

 
8. Simpan.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

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 :