coin

Menampilkan widget pada halaman tertentu

Menampilkan Widget Hanya di Homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>
..........................
</b:if>


Menampilkan Widget Hanya di Archieve
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
......................................
</b:if>


Menampilkan Widget Hanya di Item
<b:if cond='data:blog.pageType == &quot;item&quot;'>
............................................
</b:if>


Menampilkan Widget Hanya di Laman
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
..................................
</b:if>


Menampilkan Widget Hanya di URL tertentu
<b:if cond='data:blog.url == &quot;alamatpostingan&quot;'>
.........................................
</b:if>


Sebagai tambahannya, anda juga bisa mengatur widget untuk tampil SELAIN dari halaman-halaman diatas. caranya dengan mengganti Tanda == diganti dengan tanda !=
sebagai contoh:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
..........................
</b:if>
Maka widget tersebut akan tampil pada halaman SELAIN Homepage. tanda tersebut juga dapat digunakan untuk Halaman-halaman lainya yang telah disebutkan diatas.
[READ MORE]

jquery featured content slider

Inilah hasil rekayasa Jquery, mungkin anda pernah berkunjung sebuah situs dan melihat sebuah tampilan Headline News yang dapat berganti secara lembut. Contohnya silakan lihat disini.
Nau itu adalah hasil rekayasa Jquery yang biasanya digunakan untuk menampilkan beberapa konten dari situs, supaya pengunjung tertarik untuk membacanya.

Widget ini terdiri dari dua bagian, bagian sebelah kiri merupakan tempilan utama berupa gambar besar dilengkapi judul dan ringkasan artikel. Bagian sebelah kanan merupakan list konten yang berisi gambar kecil dan judul artikel.

Itu tadi sedikit review tentant Jquery featured contente slider, oke sekarang kita langsung pada pemasangannya, jangan lupa backup dulu template anda

letakkan kode warna biru ini sebelum ]]></b:skin>
#featured{
width:565px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
position:relative;
height:280px;
background:#fff;
border:0px solid #fff;
}

#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;display:none
}

#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}

#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}

#featured .ui-tabs-panel{
width:565px; height:280px;
background:#999; position:relative;
overflow:hidden;
}

#featured .ui-tabs-hide{
display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}

#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}

#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('selected-item.gif') top left no-repeat;
}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}

#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}

#featured .ui-tabs-panel .info{
position:absolute;
top:215px; left:0;
height:70px; width: 565px;
background: url('transparent-bg.png');
}

#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}

#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}

#featured .info a{
text-decoration:none;
color:#fff;
}

#featured .info a:hover{
text-decoration:underline;
}



Selanjutnya, letakkan kode warna merah di bawah ini setelah ]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
});
</script>



tambahkan kode berikut pada elemen laman
<div id="featured">

<ul class="ui-tabs-nav">

<li id="nav-fragment-1" class="ui-tabs-nav-item ui-tabs-selected"><a href="#fragment-1"><img alt="" src="/image1-small.jpg" /><span>15+ Excellent High Speed</span></a></li>

<li id="nav-fragment-2" class="ui-tabs-nav-item"><a href="#fragment-2"><img alt="" src="/image2-small.jpg" /><span>20 Beautiful Long Exposure</span></a></li>

<li id="nav-fragment-3" class="ui-tabs-nav-item"><a href="#fragment-3"><img alt="" src="/image3-small.jpg" /><span>35 Amazing Logo Designs</span></a></li>

<li id="nav-fragment-4" class="ui-tabs-nav-item"><a href="#fragment-4"><img alt="" src="/image4-small.jpg" /><span>Create a Vintage</span></a></li>

</ul>

<!-- First Content -->
<div id="fragment-1" style="" class="ui-tabs-panel">
<img alt="" src="http://gambar1.jpg" />
<div class="info">
<h2><a href="#">Fresh and Convinience</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="http://contoh">read more</a></p>
</div>
</div>


<!-- Second Content -->
<div id="fragment-2" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="http://gambar2.jpg" />
<div class="info">
<h2><a href="#">Perfect Taste</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="http://contoh">read more</a></p>
</div>
</div>


<!-- Third Content -->
<div id="fragment-3" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="http://gambar3.jpg" />
<div class="info">
<h2><a href="#">Home-made and Delicious Food</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="http://contoh">read more</a></p>
</div>
</div>


<!-- Fourth Content -->
<div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="http://gambar4.jpg" />
<div class="info">
<h2><a href="#">Our Favorite Menu</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="http://contoh">read more</a></p>
</div></div></div>
[READ MORE]

jqurey simple featured content

Melihat widget ini memang sudah tak asing lagi dengan. Tampilan content dengan bergeser kekanan (right slider) dan kekiri (left slider). Tampilan blog akan lebih elegan dan pengunjung lebih terterik untuk dapat membaca artikel pada konten yang ditampilkan.

letakkan kode warna biru ini sebelum ]]></b:skin>
#contentSlide {
background : #ddd;
height : 228px;
padding : 10px 0;
}
#slideshow {
margin : 0 auto;
width : 945px;
height : 230px;
background : #eeeeee none repeat scroll 0 0;
position : relative;
}
#slideshow #slidesContainer {
margin : 0 auto;
width : 845px;
height : 228px;
overflow : auto;
position : relative;
}
#slideshow #slidesContainer .slide {
margin : 0 auto;
width : 845px;
height : 228px;
}
.control {
display : block;
width : 39px;
height : 228px;
text-indent : -10000px;
position : absolute;
cursor : pointer;
}
#leftControl {
top : 0;
left : 0;
width : 55px;
background : transparent url(http://lh6.ggpht.com/_9b1traaMESE/Sms_Pg_IsqI/AAAAAAAAAXU/tTxdiIsFY4g/previous%20gray.jpg)no-repeat scroll 0 0;
}
#rightControl {
top : 0;
right : 0;
background : transparent url(http://lh6.ggpht.com/_9b1traaMESE/Sms-s5qb9iI/AAAAAAAAAXQ/edpXAZIaxCI/next%20gray.jpg) no-repeat scroll 0 0;
width : 55px;
}
.slide h2, .slide p {
margin : 15px;
}
.slide h2 {
font : italic 24px Georgia, "Times New Roman", Times, serif;
color : #212421;
letter-spacing : -1px;
}
.slide img {
float : right;
margin : 0 15px;
padding : 1px;
}



Selanjutnya, letakkan kode warna merah di bawah ini setelah ]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat script JQuery maka langkah kedua abaikan saja.
3. Tambahkan juga script berikut setelah script JQuery tadi

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=845;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>




tambahkan kode berikut pada elemen laman
<!-- Slideshow HTML -->
<div id='contentSlide'><div id='slideshow'>
<div id='slidesContainer'>
<div class='slide'>
<h2>Featured Content Slider Using JQuery!</h2>
<p><a href='http://amatullah83.blogspot.com/2010/02/featured-content-slider-using-jquery.html'><img alt='External links - Jquery' height='115' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCDyRDRuORJ_1L2F7j_GNVPW4wdGNMjMN7bWyQsnxaHFMotg2ryzeJIh8JKswybchl8QBY6bzoNdfbOAgEzCOoqf2jLdFjcB_gDhnP4pvm-caXnp98hy5awA8Y4p3ZLXQ2v4fg2pE_uNep/?imgmax=800' width='215'/></a> Featured Content Slider Using JQuery. Both of these examples use the featured Slider pretty much &#8220;out of the box&#8221;. Sure the design was heavily altered to fit the job, but the actual functionality wasn&#8217;t altered in any way. I recently had the calling to build a &#8220;featured content area&#8221;.</p>
<p>All you need to try it here you wont be sorry ! go try it GUMGUM :) <a href='http://amatullah83.blogspot.com/2010/02/featured-content-slider-using-jquery.html' target='_blank'>visit my another explained post</a> about this tutorial</p>
</div>
<div class='slide'>
<h2>Thumbnail With Caption Using Simple JQuery</h2>
<p><a href='http://amatullah83.blogspot.com/2010/02/membuat-sebuah-thumbnail-dengan-caption.html'><img alt='External links - Jquery' height='115' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVZfHdbnSQkTYCcMD7fIwSsSX0-4fN6doFEZSqQ0QF6Opb_4_h59zuMvKNo_6OOzckO4FKAz_p8Qb2kyzKYIJPMnR6cKLhmwFR-EVcHqe730kl7UjIWshErtbKEjzDT7X0tSOm4B6uIsY/?imgmax=800' width='215'/></a> This tutorial will show how to add heading and caption to your thumbnail and display it with jQuery cool transition effect. It&#39;s an elegant way to put content in your website, and only display it when users want to see it. It keeps your website clean!..</p>
<h3>How to Create a Thumbnail With Caption Using Simple JQuery? <a href='http://amatullah83.blogspot.com/2010/02/membuat-sebuah-thumbnail-dengan-caption.html' target='_blank'>GO HERE AND READ HOW</a> :)</h3>
</div>
<div class='slide'>
<h2>Multi Level Drop-Down Menu Dengan CSS dan JQuery!</h2>
<p><a href='http://amatullah83.blogspot.com/2010/02/multi-level-drop-down-menu-dengan-css.html'><img alt='External links - Jquery' height='115' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLrFiQdYAfz8-pLzFZTjqH-kByQvwgLx8-Wm8hxo8oLsDFHzevbQzFAzhqAqExGPfPBNrVjIRsXXdb2yxIqAfnDfvoFFuLvj2yxpfaUPLtZMP04Gf3A670aGYSplJvnARq2JqzWzHJ4-0/?imgmax=800' width='215'/></a> This is a multi-level horizontal CSS menu created using a regular nested HTML list, then turned into a fully functional drop down menu using CSS and a touch of jQuery. The sub menus slide in and out into view, which also automatically reposition themselves horizontally if too close to the window&#39;s right edge. If you want to create it in your blogger blog, here&#39;s what you should do ! (these instructions refer to the &quot;new&quot; Blogger layouts templates) <a href='http://amatullah83.blogspot.com/2010/02/multi-level-drop-down-menu-dengan-css.html' target='_blank'>GO GET IT GUMGUM:)</a></p>
</div>
<div class='slide'>
<h2>Super Sexy Bookmarks Widget for Blogger !</h2>
<p><a href='http://amatullah83.blogspot.com/2010/02/cara-memasang-widget-sexy-sosial.html'><img alt='Thumbnail image that says sleek button using photoshop that links to a Photoshop tutoril.' height='115' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmy6BXQjbEG6usdtelmlgwOf1BdLjUfKrZgu4NZYHX8NEviUVQJji-okxQEXf-mp8XwERh73rMbz7FwHLbW4kwDE7xVE1pfUaa07te0gA5oVyMGC4U-su5U9cSBKinTlIQYVO7CH_Ol70/?imgmax=800' width='215'/></a> Looking for professional Social Bookmark Buttons for your blog ! me too :) however, while i was searching the net too, I came across a post by Naeemnur, that had instructions for Blogger (BlogSpot.com) based blogs which was really good.If you have a blog on blogger you can definitely give this a try. </p>
<p>Its very attractive social bookmarking widget ! it can help you to let your visitors bookmark your page effectively .</p>
<p>for instructions about the use of this SEXY Social bookmarking widget ! <a href='http://amatullah83.blogspot.com/2010/02/cara-memasang-widget-sexy-sosial.html' target='_blank'>you can go here and get it GUMGUM:)</a></p>
</div>
</div>
</div></div>
<!-- Slideshow HTML -->
<div class='clear'/>
[READ MORE]

jquery disable right click

Saya telah melihat membagikan posting di forum tentang cara menonaktifkan klik kanan di acara JavaScript. Yah solusinya sangat lurus ke depan jika Anda menggunakan jQuery! Caranya adalah dengan mengikat ke acara ContextMenu. Kode di bawah ini adalah contoh dari cara melakukannya.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery disable right click easily</title>
<script language="javascript" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});
</script>
</head>
<body>
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis.
Nam bibendum. In nulla tortor, elementum vel, tempor at,
varius non, purus. Mauris vitae nisl nec consectetuer.
Donec ipsum. Proin imperdiet est. Phasellus dapibus semper
urna. Pellentesque ornare, orci in consectetuer hendrerit,
urna elit eleifend nunc, ut consectetuer nisl felis ac diam.
Etiam non felis. Donec ut ante. In id eros.
</body>
</html>
[READ MORE]

css link

dasdasdsadas

Warna Border


border-color: value;
Contoh value yang digunakan
Color name: red, green, blue,…
Hexadecimal number: #ff0000, #d4d4d4,...
RGB color code: rgb(255,0,0), rgb(0,0,0),….









dsadsadsad
[READ MORE]

css float

dasdasdas

Float


float: value;
Contoh value yang digunakan:
Kanan: right
Kiri: left

Konten1 tanpa menggunakan pengaturan Float.
Konten2 tanpa menggunakan pengaturan Float.


Konten1 menggunakan pengaturan Float Left.
Konten2 menggunakan pengauran Float Left.


Konten1 menggunakan pengaturan Float Right.
Konten2 menggunakan pengaturan Float Right.


Konten1 menggunakan pengaturan Float Left.
Konten2 menggunakan pengaturan Float Right.



dasdasdas
[READ MORE]

css margin padding

dfdfdfsdfsdfs

Margin Padding


margin: value;
padding: value;
Contoh value yang digunakan:
pixel: 1px, 3px, 5px, 8px,...
Percentage: 5%, 10%, 15%,...

pengaturan text menggunakan padding 10px. pengaturan menggunakan padding 10px. pengaturan text menggunakan padding 10px.
pengaturan menggunakan margin 10px pengaturan menggunakan margin 10px. pengaturan menggunakan margin 10px.
pengaturan menggunakan margin 10px dan padding 10px pengaturan menggunakan margin 10px. dan padding 10px. pengaturan menggunakan margin 10px dan padding 10px.


Margin Padding (atas)


margin-top: value;
padding-top: value;
Contoh value yang digunakan
pixel: 1px, 3px, 5px, 8px,...
Percentage: 5%, 10%, 15%,...

pengaturan text menggunakan padding 10px. pengaturan menggunakan padding 10px. pengaturan text menggunakan padding 10px.
pengaturan menggunakan margin 10px pengaturan menggunakan margin 10px. pengaturan menggunakan margin 10px.
pengaturan menggunakan margin 10px dan padding 10px pengaturan menggunakan margin 10px. dan padding 10px. pengaturan menggunakan margin 10px dan padding 10px.

Margin Padding (kanan)


margin-right: value;
padding-right: value;
Contoh value yang digunakan
pixel: 1px, 3px, 5px, 8px,...
Percentage: 5%, 10%, 15%,...

pengaturan text menggunakan padding 10px. pengaturan menggunakan padding 10px. pengaturan text menggunakan padding 10px.
pengaturan menggunakan margin 10px pengaturan menggunakan margin 10px. pengaturan menggunakan margin 10px.
pengaturan menggunakan margin 10px dan padding 10px pengaturan menggunakan margin 10px. dan padding 10px. pengaturan menggunakan margin 10px dan padding 10px.

Margin Padding (bawah)


margin-bottom: value;
padding-bottom: value;
Contoh value yang digunakan:
pixel: 1px, 3px, 5px, 8px,...
Percentage: 5%, 10%, 15%,...

pengaturan text menggunakan padding 10px. pengaturan menggunakan padding 10px. pengaturan text menggunakan padding 10px.
pengaturan menggunakan margin 10px pengaturan menggunakan margin 10px. pengaturan menggunakan margin 10px.
pengaturan menggunakan margin 10px dan padding 10px pengaturan menggunakan margin 10px. dan padding 10px. pengaturan menggunakan margin 10px dan padding 10px.

Margin Padding (kiri)


margin-left: value;
padding-left: value;
Contoh value yang digunakan
pixel: 1px, 3px, 5px, 8px,...
Percentage: 5%, 10%, 15%,...

pengaturan text menggunakan padding 10px. pengaturan menggunakan padding 10px. pengaturan text menggunakan padding 10px.
pengaturan menggunakan margin 10px pengaturan menggunakan margin 10px. pengaturan menggunakan margin 10px.
pengaturan menggunakan margin 10px dan padding 10px pengaturan menggunakan margin 10px. dan padding 10px. pengaturan menggunakan margin 10px dan padding 10px.





dasdasdsa
[READ MORE]

css border

sdasdasdas

Warna Border


border-color: value;
Contoh value yang digunakan
Color name: red, green, blue,…
Hexadecimal number: #ff0000, #d4d4d4,...
RGB color code: rgb(255,0,0), rgb(0,0,0),….



Warna Border #ff00ff

Warna Border #0000ff

Warna Border #ff0000

Warna Border #ff00ff




Gaya Border


border-style: value;
Contoh value yang digunakan
Garis penuh : solid
Garis putus : dashed
Garis titik : dotted
Garis ganda : double
Garis Alur : Groove
Garis 3D Timbul: ridge
Garis 3D kedalam: inset
Garis 3D keluar: outset


A dotted border.


A dashed border.


A solid border.


A double border.


A groove border.


A ridge border.


An inset border.


An outset border.




Tebal Border


border-style: value;
Contoh value yang digunakan
General: Thin, medium, thick
Pixel: 1px, 3px, 6px, 10px,...




Tebal border thin

Tebal border medium

Tebal border thick

Tebal border 2px

Tebal border 4px



dasdasdas
[READ MORE]

css background

dsdsadasds




warna background


background-color: value;
Contoh value yang digunakan
Color name: red, green, blue,…
Hexadecimal number: #ff0000, #d4d4d4,...
RGB color code: rgb(255,0,0), rgb(0,0,0),….

background warna biru
background warna merah





Background Gambar


background-image: value;
Contoh value yang digunakan


background gambar






Posisi background


background-position: value;
Contoh value yang digunakan
Color name: red, green, blue,…
Hexadecimal number: #ff0000, #d4d4d4,...
RGB color code: rgb(255,0,0), rgb(0,0,0),….

background gambar kanan atas

background gambar kiri atas

background gambar kiri bawah

background gambar kanan bawah






Pengulang background


background-Repeat: value;
Contoh value yang digunakan
Color name: red, green, blue,…
Hexadecimal number: #ff0000, #d4d4d4,...
RGB color code: rgb(255,0,0), rgb(0,0,0),….

background gambar






asas
[READ MORE]

css font

jkjkjkjkjkj




Ukuran Font


font-size: value;
Contoh value yang digunakan
General : large, medium,
Percent : 10%, 13%, 19%, 25%,
Pixel : 3px, 7px, 10px, 15px,

Ukuran font 100%

Ukuran font 200%

Ukuran font 15px

Ukuran font 30px

Ukuran font 0.875em

Ukuran font 1.875em


Jenis Font


font-family: value;
Contoh value yang digunakan
General font family : verdana, sans-serif, arial,

Kalimat ini menggunakan Times New Roman font.

Kalimat ini menggunakan Arial font.

Kalimat ini menggunakan verdana

Kalimat ini menggunakan Georgia

Gaya Font


font-Style: value;
Contoh value yang digunakan
General font style : normal, italic, oblique,..

Kalimat ini menggunakan Normal font

Kalimat ini menggunakan Italic font

Kalimat ini menggunakan Oblique font

Variasi Font


font-variant: value;
Contoh value yang digunakan
General font weight : normal, small-caps

Kalimat ini menggunakan normal font

Kalimat ini menggunakan small-caps font

Berat Font


font-weight: value;
Contoh value yang digunakan
General font weight : lighter, normal, bold
Number font weight : 100, 200, 300, 400,…

Kalimat ini menggunakan normal font

Kalimat ini menggunakan lighter font

Kalimat ini menggunakan bolder font

Kalimat ini menggunakan bold font

Kalimat ini menggunakan 900



SDSADSADAS
[READ MORE]

css text

pembuksdsdjnasjdas

Warna Text


color: value;
Contoh value yang digunakan
Color name: red, green, blue,…
Hexadecimal number: #ff0000, #d4d4d4,...
RGB color code: rgb(255,0,0), rgb(0,0,0),….

warna text biru
warna text orange
warna text hijau
warna text merah
warna text ungu

Perataan Text


text-align: value;
Contoh value yang digunakan:
Rata kiri : left
Rata kanan : right
Rata tengah : center
Rata penuh : justify

Contoh text dengan menggunakan pengaturan rata kiri. Text dengan menggunakan pengaturan
rata kiri Pengaturan rata kiri.

Contoh text dengan menggunakan pengaturan rata tengah.Contoh text dengan menggunakan pengaturan rata tengah.

Contoh text dengan menggunakan pengaturan rata penuh. Contoh text dengan menggunakan pengaturan rata penuh. Pengaturan rata penuh.

Spasi Huruf


letter-spacing: value;
Contoh value yang digunakan:
Pixel letter spacing : 5px, 13px, 20px,..
General letter spacing : normal, length.

Contoh text dengan spasi huruf normal

Text menggunakan spasi huruf 5px spasi huruf 5px

Contoh spasi huruf 15px

Dekorasi Text


text-decoration: value;
Contoh value yang digunakan:
Tanpa dekorasi : none
Garis bawah : underline
Garis atas : overline
Berkedip : Blink

Contoh tanpa dekorasi

Contoh dekorasi text garis bawah

Contoh dekorasi text garis atas

Contoh dekorasi text berkedip

Perubahan Text


text-transform: value;
Contoh value yang digunakan:
Tanpa perubahan : none
Huruf besar tiap kata : capitalize
Huruf besar semua : uppercase
Huruf kecil semua : lowecase

Contoh tanpa dekorasi

Capitalize Huruf Besar Tiap Kata

uppercase huruf besar semua

Lowercase huruf kecil semua

zzasasa
[READ MORE]