UTta Tutorial

LIVE TV STREAMING INDONESIA

2012-05-23T06:29:00.000+07:00

Properti Bayangan (Shadow Property) di CSS3

2012-05-20T15:48:00.000+07:00

HTML5 memang sedang populer, tapi untuk style CSS3 tak kalah populer. CSS3 merupakan versi Cascading Style Sheet terbaru yang bisa digunakan untuk mempercantik tampilan website. Bagi yang belum mengenal CSS, referensinya bisa Anda temukan di wikipedia atau situsnya W3C.

Ada banyak property, selector, dan pseudo-class baru di CSS3, tapi kali ini kita akan coba bermain dengan shadow-property, yaitu efek yang akan memberi bayangan pada objek yang diberi properti bayangan ini.

Text Shadow

Sintak dasarnya adalah seperti ini:

text-shadow:   * *

yang bertanda * adalah opsional, dapat dipakai atau tidak dipakai.
offsetx adalah jarak horizontal (mendatar) bayangan terhadap teks. Nilai negatif (-) akan membuat bayangan berada disebelah kiri teks.
offsety adalah jarak vertikal (menurun) bayangan terhadap teks. Nilai negatif (-) akan membuat bayangan berada di atas teks.
blur-radius adalah ketajaman dari efek blur.
color adalah warna dari bayangan yang dihasilkan.

Dari sintak di atas, mari kita mulai coba bermain dengan beberapa contoh berikut:

Contoh berikut akan memberikan efek bayangan yang tajam (blur 0).

text-shadow: 5px 5px 0 #959595;

UT2A MOG MOG

Contoh berikut akan memberikan efek bayangan yang halus (blur 7).

text-shadow: 5px 5px 7px #959595;

UT2A MOG MOG

Contoh berikut akan memberikan efek bayangan 3D.

text-shadow: 1px 1px black, 2px 2px #149c14, 3px 3px #149c14, 4px 4px #149c14, 5px 5px #149c14, 6px 6px #149c14, 7px 7px #149c14, 8px 8px #149c14;

UT2A MOG MOG

Yang ini akan memberikan efek yang menyala.

background:black;
text-shadow: 0 0 5px #FFFFA0, 0 0 10px #FFFF4D, 0 0 15px #FFFF41, 0 0 20px #FFFF2A, 0 0 25px #FFFF2B, 0 0 30px #FEFE00, 0 0 35px #F7F700;

UT2A MOG MOG

Sekarang Anda tahu, menu yang kami pakai dalam website ini merupakan modifikasi dari contoh di atas.

Box Shadow

Box-shadow intinya sama dengan text-shadow, cuma dia di terapkan pada objek selain teks, bisa pada kotak atau gambar. Sintaknya pun sama, cuma untuk text-shadow diganti dengan box-shadow:

box-shadow:   * *

Berikut contoh pada objek kotak.

width:300px; height:50px; padding:5px; background:navy; border: 1px solid black;
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);

UT2A MOG MOG

Kok di baris terakhir ada tambahan filter? Itu dipakai untuk browser Internet Explorer, karena Internet Explorer punya metode sendiri untuk dapat membaca bayangan.

Site Maps

2012-05-19T12:24:00.000+07:00

Hanya Menampilkan Halaman Muka Blog

2012-05-19T08:42:00.000+07:00

Sebuah impian mungkin, bagi kalian untuk memiliki halaman muka/homepage blog tersendiri yang terbebas dari daftar posting yang telah diterbitkan. Dulu Saya juga begitu, sampai Saya mempelajari tag kondisional Blogger lebih jauh. Kali ini Saya akan membagikannya kepada kalian tentang bagaimana cara menghilangkan semua posting dan menambahkan pesan selamat datang di halaman muka.
Yang kita butuhkan pada dasarnya hanya satu jenis tag kondisional, yaitu tag kondisional halaman muka seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Mengedit HTML

Temukan kode yang kurang lebih tampak seperti ini:

<b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Tepat di atas kode tersebut, letakkan kode ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='main' id='homepage'></b:section>
<b:else/>

dan tepat di bawahnya, letakkan kode ini:

</b:if>

sehingga hasilnya akan menjadi seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='main' id='homepage'></b:section>
<b:else/>
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
</b:if>

Seperti yang kalian lihat bahwa apa yang kalian lakukan sebenarnya hanyalah menggandakan elemen <b:section> dimana salah satu hanya akan tampil di halaman muka, sedangkan satunya lagi hanya akan tampil selain di halaman muka.

Klik Simpan Template. Sekarang masuklah ke halaman Tata Letak. Jika berhasil, seharusnya widget posting akan menghilang, digantikan oleh sebuah navigasi untuk menambahkan widget baru seperti ini:

Widget posting akan menghilang, dan sebuah elemen untuk menambahkan widget baru akan tampil seperti halnya pada sidebar blog.

Dari elemen itu Anda bisa menambahkan widget yang hanya akan ditampilkan pada halaman muka. Widget bisa berupa apa saja. Misalnya seperti teks ucapan selamat datang seperti gambar di atas, widget daftar isi, slideshow otomatis, atau yang lainnya.

Catatan: Menerapkan manipulasi ini akan membuat fitur pratinjau pada editor posting tidak berfungsi. Sebenarnya bukannya tidak berfungsi, hanya saja saat Anda mengeklik tombol Pratinjau, yang akan Anda lihat selalu berupa widget yang Anda tambahkan, sedangkan posting yang seharusnya ingin Anda lihat tidak akan tampil.

Dangerous Ishhq (2012) DVDScr 450mb

2012-05-17T10:41:00.000+07:00

MOVIE INFO:

[TITLE]…………………….[ Dangerous Ishhq (2012)
[DIRECTOR]………………….[ Vikram Bhatt
[RELEASE DATE]………………[ 11 May 2012(India)
[FORMAT]:…………………..[ Matroska (MKV)
[GENRE]:……………………[ Romance, Thriller
[NO OF CDs]…………………[ 1
[FILE SIZE]:………………..[ 450mb
[RESOLUTION]:……………….[ 720x304
[LANGUAGE]:…………………[ Hindi
[SUBTITLES]:………………..[ None
[RELEASE RUNTIME]:…………..[ 02:08:55
[SOURCE]:…………………..[ DDR
[iMDB RATING]:………………[ 4.2/10
SCREENS:

DOWNLOAD LINKS:

JUMBO FILES SINGLE LINK

MEDIAFIRE LINKS:

CLICK HERE FOR PART 1
CLICK HERE FOR PART 2
CLICK HERE FOR PART 3

JUMBOFILES:

CLICK HERE FOR PART 1
CLICK HERE FOR PART 2
CLICK HERE FOR PART 3

Tom and Jerry: Around the World (2012) DVDRip 350MB Mediafire Movies

2012-05-16T23:49:00.000+07:00

Download movies free: Tom and Jerry: Around the World (2012) DVDRip 350MB DVDrip BRRip BluRay 720p High Quality, Small Size from Mediafire, Rapidshare, Jumbofiles, Single Links, Fileserve, Hotfile, Filesonic, mkv film

Info

Mediafire Movies: Tom and Jerry: Around the World (2012) DVDRip 350MB

[TITLE]…………………….[ Tom and Jerry: Around the World (2012)
[FORMAT]:…………………..[ Matroska (MKV)
[GENRE]:……………………[ Animation, Comedy, Family
[NO OF CDs]…………………[ 1
[FILE SIZE]:………………..[ 350mb
[RESOLUTION]:……………….[ 680x400
[LANGUAGE]:…………………[ English
[SUBTITLES]:………………..[ None
[RELEASE RUNTIME]:…………..[ 00:52:30
[SOURCE]:…………………..[ DVDRip Xvid-UnknOwN

Screenshot

Download Movies

Single Link
Hn3.Tom.Jerry.12DVD_Hnmovies.com.mkv

Hn3.Tom.Jerry.12DVD_Hnmovies.com.mkv.001
Hn3.Tom.Jerry.12DVD_Hnmovies.com.mkv.002
Hn3.Tom.Jerry.12DVD_Hnmovies.com.mkv.003

Password

hnmovies.com

Subtitles

N/A

Threaded Comment styles dengan CSS

2012-05-13T08:34:00.000+07:00

Nah pasti kalian udah pada tau tentang Threaded Comment Blogger yang baru baru ini diluncurkan .

Tentunya ini memberi kesan decak kagun kepada pengguna blogger. dengan adanya Threaded Comment jadi komentar lebih agak keren dibanding yang standar dulu. Tapi tadi setelah nemu salah satu Blogger Prayag Verma dan menemukan arsip keren bin ajaib tentang Prayag Verma dan sudah saya terapkan pada blog ini, liat bagian bawah dan test dengan komentar kalian :

Masuk ke Blogger
Rancangan - Edit Html - Centang Expand Widget Template.
Kemudian letakkan kode berikut ini diatas kode ]]></b:skin>

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #F1F1F1;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #EBDDE2;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #F3F3F3;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #EBDDE2;}
.comments .comment-block {padding: 11px !important;margin-left: 48px;position: relative;left: 60px;background:#F1F1F1;border-radius: 10px;width: 400px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #F1F1F1;padding: 5px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .comment-header {width: 450px;background:#F1F1F1;position: relative;left: -73px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 270px;}
.comment-thread ol div.continue {display:none !important;}

Save Template dan lihat hasilnya.

Sekian dulu ya tutorial Threaded Comment styles dengan CSS.

Cara Mematikan tombol ctrl U, ctrl A, ctrl C, dan Disable Klik Kanan

2012-04-28T20:56:00.000+07:00

Langsung saja. Inilah caranya:

1. Seperti biasa Log In dulu Blogger kamu.
2. Pilih template / Edit HTML pada bagian TAB Rancangan
3. Lalu kamu cari kode <body> (Untuk memudahkan pencarian, tekan CTRL F pada keyboard mu)
4. Nah ganti kode tersebut dengan kode di bawah ini

    <body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

5. Klik pratinjau dulu jika ingin memastikan script di atas bekerja apa tidak.
6. Jika sudah Save Template

Tambahan :

    - oncontextmenu=’return false;’ (Berfungsi untuk mematikan fungsi klik kanan / right klik pada mouse)
    - onkeydown=’return false;’ (Berfungsi untuk mematikan fungsi CTRL+A dan CTRL+U pada keyboard)
    - onmousedown=’return false;’ (Berfungsi untuk mematikan block select pada text/artikel)
    - ‘return false;’ (Untuk mengaktifkan script yang digunakan)

Sebagai contoh, Kita hanya ingin mematikan fungsi CTRL U pada blog, maka script yang dimasukan hanya ini :

    <body onkeydown='return false;'>

Salam Blogger

Cara Membuat Blog Tidak dapat di Copas, CTRL+U , dan BLock

2012-04-28T20:49:00.000+07:00

Baiklah saya tidak akan panjang lebar untuk menjelaskan trik ini mungkin para sobat semua sudah paham apa yang saya bahas kali ini. Jika tertarik dan berminat ikuti langkah-langkah berikut :

1. Masuk ke Dasbor
2. Klik tab Tata Letak
3. Klik tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </head>
    Kalau sudah ketemu, anda Copy Pastekan script yang ada dibawah ini "Persis setelah kode </head>".

        <SCRIPT type="text/javascript">
        if (typeof document.onselectstart!="undefined") {
        document.onselectstart=new Function ("return false");
        }
        else{
        document.onmousedown=new Function ("return false");
        document.onmouseup=new Function ("return true");
        }
        </SCRIPT>

6. Simpan

Cara men-disable klik kanan dan CTRL+U pada keyboard

1. Masuk ke edit html
2. Cari <body>
3. Gantikan kode tersebut dengan kode dibawah ini

    <body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

4. Simpan

Cara Membuat Blog Tidak dapat di Copas, CTRL+U

2012-04-28T20:44:00.000+07:00

1.Login ke Blog

2.Rancangan -->Edit HTML

3.Cari kode </body> Lalu Ganti Kode </body> Dengan Kode Dibawah Ini

<body onkeydown='return false;'>

Selamat Mencoba

Emotion Blackberry

2012-04-10T15:24:00.000+07:00

Ok, langsung aja deh..

Angry Japanese Emoticons

(≧m≦)	(>_<)	(,,#ﾟДﾟ)
ヽ(ｏ`皿′ｏ)ﾉ	o(>< )o	ｏ( ><)o
ヽ(≧Д≦)ノ	（＞д＜）	（;≧皿≦）
[○･｀Д´･○]	ヽ(#`Д´)ﾉ	Σ(-`Д´-ﾉ；)ﾉ
(((p(>o<)q)))	(/ﾟДﾟ)/	(¬д¬。)
ヽ(#`Д´)ﾉ	(¬､¬)	（；¬＿¬)
(;¬_¬)	(；¬д¬)	(≧σ≦)
o(-`д´- ｡)	ヽ(●-`Д´-)ノ	(*￣m￣)
(´Д｀)	(；￣Д￣）	(¬_¬)ﾉ
(＃｀д´)ﾉ	(」゜ロ゜)」	Σ(▼□▼メ)
(━┳━ _ ━┳━)	(┳◇┳)	{{\|└(>o< )┘\|}}
＼(＠O＠)／	（≧▼≦；)	＼(〇O〇)／
s(・｀ヘ´・;)ゞ	（▼へ▼メ）	＼(`O´θ／
θ＼(；￢_￢)	ヽ(｀⌒´メ)ノ	凸(-0-メ)
凸(｀△´＋）	凸(｀0´)凸	凸(｀⌒´メ)凸
＼(｀0´)／	-`д´-	(>人<)

Apologizing Emoticons

m(_ _)m	m(._.)m	ｍ（．＿．）ｍ
（ﾉ´д｀）	(シ_ _)シ	<(_ _)>
＜(。_。)＞	ｍ（＿　＿；；ｍ	m(￢0￢)m

Bear Emoticons

(￣(エ)￣)	(｡･ω･｡)	(●｀･(ｴ)･´●)
(*ノ・ω・）	川´･ω･`川	( (ﾐ´ω`ﾐ))
ヾ(T(エ)Tヽ)	＼(・｀(ｪ)・)/	⊂(ο･㉨･ο）⊃
(^(エ)^)	(^(I)^)	(￣(ｴ)￣)ﾉ
⊂(￣(工)￣)⊃	⊂(^(工)^)⊃	⊂(・(ェ)・)⊃
(￣(ｴ)￣)	ヾ(´(ｴ)｀ﾉﾞ	(／(ｴ)＼)
⊂(￣(ｴ)￣)⊃	“(`(エ)´)ノ	(｀(エ)´)ﾉ
(ó㉨ò)	(♥ó㉨ò)ﾉ♡	(/-(ｴ)-＼)
(´(エ)｀)	ヽ(￣(ｴ)￣)ﾉ	(／￣(ｴ)￣)／
⊂(◎(工)◎)⊃	(●￣(ｴ)￣●)	《/(￣(ｴ)￣)ゞ》

Ψ(￣(ｴ)￣)Ψ This bear I think looks especially awesome
┏((＝￣(ｴ)￣=))┛An awesome dancing bear
・㉨・ It’s very simple but it totally works

Cat Emoticons

(=^･ｪ･^=)	(=^‥^=)	(=^･^=)
V(=^･ω･^=)v	(=｀ω´=)	o(^・x・^)o
＼(=^‥^)/’`	( =①ω①=)	d(=^･ω･^=)b
(=ＴェＴ=)	(=;ェ;=)	ヽ(=^･ω･^=)丿
(=^･ω･^)y＝	(^-人-^)	ヽ(^‥^=ゞ)
(^・ω・^ )	(=^-ω-^=)	b(=^‥^=)o
(.=^・ェ・^=)	（=´∇｀=）	ヾ(=ﾟ･ﾟ=)ﾉ
~(=^‥^)ノ	~(=^‥^)/	(=ｘェｘ=)
(=；ェ；=)	(=｀ェ´=)	(^･o･^)ﾉ”
(^._.^)ﾉ	└(=^‥^=)┐	=’①。①’=

<(*ΦωΦ*)> This is totally an Azumanga Diaoh cat!

Confused Emoticons

(´･_･`)	(◎_◎;)	(｀_´)ゞ
(◎-◎；)	(・_・ヾ	(￣(エ)￣)ゞ
(-_-)ゞ゛	(‘◇’)?	ヽ(゜Q。)ノ？
(´｀;) ？	【・ヘ・?】	【・_・?】
( ・◇・)？	(゜-゜)	ヾ(´･･｀｡)ノ”
｢(ﾟﾍﾟ)	( ?´_ゝ｀)	o(´^｀)o
(´−｀) ﾝｰ	(」ﾟヘﾟ)」	(•ิ_•ิ)?
「(°ヘ°)	(。ヘ°)	ヽ(゜Q。)ノ？
(´｀;) ？	〈(゜。゜)	(゜。゜)
く（＾_・）ゝ	(^～^;)ゞ

Dancing Emoticons

ヘ(^_^ヘ)	(ノ^_^)ノ	o(^^o)
(o^^)o	(ノ´＿ゝ｀）ノ	ヾ(^ ^ゞ
(ノ‥)ノ	( ﾉ^ω^)ﾉﾟ	ヾ(*´∇`)ﾉ
ヾ(･ω･*)ﾉ	(*ﾉ´□`)ﾉ	。(⌒∇⌒。)
(。⌒∇⌒)。	〜(￣▽￣〜)	(〜￣▽￣)〜
〜(^∇^〜）	（〜^∇^)〜	〜(￣△￣〜)
(〜￣△￣)〜	┗(｀ー´)┓	┏(｀ー´)┛
┗(＾0＾)┓	┏(＾0＾)┛	(ノ￣ー￣)ノ
ヘ(￣ー￣ヘ)	ヘ(￣ω￣ヘ)	(ノ￣ω￣)ノ
ヘ(^o^ヘ)	(ノ^o^)ノ	ヾ(-_- )ゞ
ヾ(＠^∇^＠)ノ	(ﾉ≧∀≦)ﾉ	＼(^ω^＼)
(ﾉﾟ▽ﾟ)ﾉ	ヽ(ﾟｰﾟ*ヽ)	ヽ(ﾟｰﾟ)ﾉ
(ﾉ*ﾟｰﾟ)ﾉ	ヽ(´Д｀)ﾉ	(o´･_･)っ
ヾ(д)ﾉ゛	ヽ(°◇° )ノ	ヽ( °◇°)ノ
(ノ°ο°)ノ	(ﾉ･o･)ﾉ	ヾ(^^ゞ)
ヾ(ﾟ∀ﾟゞ)	ヽ(´ー`)ﾉ	ヾ（⌒ヮ⌒）ゞ
〈( ^.^)ノ	┌（★ｏ☆）┘	└（★ｏ★）┐
♪(┌・。・)┌

Dead Emoticons

（x_x；）	(_)	(×_×;）
(×_×#	(#+_+)	(+_+)
ヾ(×× ) ﾂ	（Ω_Ω）	へ（>_<へ)
(＊0＊;)

Defeat of Surrender Emoticons

＼（－－）／	＼(-___________-;)／	/(;-_-)
~(>_<。)＼	((-_-))	（ー△ー；）
（◎ー◎；）	(/ _ ; )	(o_ _)o
ﾍ(￣￣;ﾍ)	(;*´Д`)ﾉ	(ﾉ_ _)ﾉ
ヘ(_ _ヘ)	(ﾉ￣д￣)ﾉ	(;-_-)ノ
o(-_-;*)	ﾍ(;´Д｀ﾍ)	(;-_-)/
(oT-T)尸	ヘ（´ｏ｀）ヘ	(一。一;;）
(ノ#-_-)ノ	（~～~）	y-(~。~；)
(　-。-)

Dog Emoticons

Uo･ｪ･oU	∪･ω･∪	U｡･ｪ･｡U
▽・ω・▽	▽・ｗ・▽	Ｕ^皿^Ｕ
ｖ・。・Ｖ	ＵＴｪＴＵ	(^・(I)・^)
U・♀・U	ｏ（Ｕ・ω・）⊃	(^・x・^)
(U・x・U)	▼o・ェ・o▼	U＾ェ＾U
U￣ｰ￣U	┌U･ｪ･U┘	└@(･ｪ･)@┐
ヾ(●ω●)ノ Adventure time!	(〓￣(∵エ∵)￣〓)

Drinking Emoticons

ｏ口(・∀・ )	(。・・)_且	且_(ﾟ◇ﾟ；)ノﾞ
~旦_(^O^ )	(　゜Д゜)⊃旦	( ´･ω･`)_且~
( ^-^)_旦”"	(*^◇^)_旦	(*｀▽´)_旦~~
~(=^‥^)_旦~	(＾-＾)＿日	~~旦_(･o･;)
( -_-)旦~	(＃´ー´)旦	且_(・_・ )

Evil, Plotting or Sneaky Emoticons

(・｀ω´・)	ψ(｀∇´)ψ	（｀ー´）
(｡･｀ω´･｡)	o(｀ω´*)o	\| ｀Д´\|
(｀ε´)	(σ-`д･´)	(｀Д´*)
（=｀〜´=）	(ﾒ｀ﾛ´)/	Ψ(｀▽´)Ψ
^(#｀∀´)_Ψ	(*-`ω´- )人	(ц｀ω´ц*)
(｀∀´)Ψ	ψ(*｀ー´)ψ	Ψ(｀◇´)Ψ
“ψ(｀∇´)ψ

Fish Emoticons

>=<	>゜))))彡	ζ°)))彡
>_)))彡	>^)))< ～～	(°)#))<<
（：。）ミ	Ｃ：。ミ	(Q )) >
(°))<<	>°))))彡	≧〔゜゜〕≦
ミ(・・)ミ	V=(° °)=V	＜コ：ミ
(゜))<<	ミ[°°]ミ	くコ:彡
ミ．．ミ

Friends Emoticons

ヽ(∀゜ )人( ゜∀)ノ	(･∀･)／＼(･∀･)
＼（＾∀＾）メ（＾∀＾）ノ	＼（★´−｀）人（´▽｀★）／
（　＾＾）人（＾＾　）	(〃⌒▽⌒)八(〃⌒▽⌒〃)八(⌒▽⌒〃)
☆-(ノﾟДﾟ)八(ﾟДﾟ )ノ	( ｡･_･｡)人(｡･_･｡ )
ヽ(^ｰ^)人(^ｰ^)ノ	━(○´ｴ｀)(´ｴ｀●)━
(◎｀・ω・´)人(´・ω・｀*)	｡*:★(´・ω・人・ω・`)｡:゜★｡
(´∀｀人´∀｀)	（＾▽＾）／＼（＾▽＾）
（＾ω＾）人（＾ω＾）	ヽ(○´∀)乂(´∀`）乂(∀`●)
＼（＾∀＾）メ（＾∀＾）ノ	ヽ(´Д｀)人(´Д｀)人(´Д｀)ノ〜♪
(((°▽°)八(°▽°)))♪	♡(´∀｀)人(´∀｀)♡
(〃￣д￣)八( ￣д￣ )八(￣д￣〃)	ヽ(＾▽＾)人(＾▽＾)人(＾▽＾)ﾉ
(((＠°▽°＠)八(＠°▽°＠)))	(･_･”)/＼(･_･”)
(○｀ε´○)／＼(○｀ε´○)	ヘ( ^o^)ノ＼(^_^ )
(/^-^(^ ^*)/	( 。・_・。)人(。・_・。 )
(・_・)〆＼(Ｔ＿Ｔ）	(^^)-(^^)-(^^)-(^^)-(^^)
ヽ(´Д｀)人(´Д｀)人(´Д｀)ノ	ヾ(￣ー￣)X(^∇^)ゞ
♪ヽ( ⌒o⌒)人(⌒-⌒ )v ♪	(^o^)人(^o^)
＼(　^o)( ^ 0 ^ )(o^　)／	ヽ（　＾＾）人（＾＾　）ノ
(・_・”)／＼(・_・”)	└(^o^ )Ｘ( ^o^)┘
(＾○＾)オ(＾▽＾)ハ(＾０＾)ツ～	( ⌒o⌒)人(⌒-⌒ )v
(°◇°人°◇°)

Greetings or Goodbyes Emoticons

ヾ(＾∇＾)	(^-^*)/	( ﾟ▽ﾟ)/
( ^_^)／	(^o^)/	(^ _ ^)/
( ´ ▽ ` )ﾉ	(ﾉ´∀｀*)ﾉ	ヾ(´･ω･｀)
☆ﾐ(o*･ω･)ﾉ	＼(＾▽＾*)	(*＾▽＾)／
(￣▽￣)ノ	ヾ(-_-;)	ヾ( ‘ – ‘*)
ヾ(＠⌒ー⌒＠)ノ	~ヾ＾∇＾	~ヾ(＾∇＾)
＼(￣O￣)	(｡･ω･)ﾉﾞ	(*^･ｪ･)ﾉ
(￣∠ ￣ )ﾉ	(*￣Ｏ￣)ノ	ヾ(｡´･_●･`｡)☆
(/・0・)	(ノ^∇^)	(,, ･∀･)ﾉ゛
(。･д･)ﾉﾞ	＼(°o°；）	(｡´∀｀)ﾉ
(o´ω`o)ﾉ	( ･ω･)ﾉ	(。^_・)ノ
( ・_・)ノ	＼(-o- )	(。-ω-)ﾉ
＼(-_- )	＼( ･_･)	ヾ(´￢｀)ﾉ
ヾ(☆▽☆)	(^ Q ^)/゛	~(＾◇^)/
ヘ(‘◇’、)/	ヘ(°◇、°)ノ	ヘ(°￢°)ノ
ヘ(゜Д、゜)ノ	（゜ρ゜)ノ	ー( ´ ▽ ` )ﾉ

Happy or Joyful Emoticons

(●´∀｀●)	(｀・ω・´)”	ヽ(；▽；)ノ
ヽ(；▽；)ノ	(*´・ｖ・)	(((o(ﾟ▽ﾟ)o)))
☆:.｡. o(≧▽≦)o .｡.:☆	(⌒▽⌒)☆	⊂((・▽・))⊃
(≧∇≦)/	(´∇ﾉ｀*)ノ	（・◇・）
( ´ ▽ ` )ﾉ	（＾_＾）	（￣ー￣）
(^▽^)	(＾▽＾)	（’-’*)
∩( ・ω・)∩	(*≧▽≦)	＼（＾＾）／
Ｏ(≧∇≦)Ｏ	（　´∀｀）	(^～^)
＼（＠￣∇￣＠）／	(☆^O^☆)	(★^O^★)
(☆^ー^☆)	(´ω｀★)	＼（Ｔ∇Ｔ）／
ヽ(*≧ω≦)ﾉ	(´∀｀*)☆	Ｏ(≧▽≦)Ｏ
ヽ(⌒∇⌒)ﾉ	d=(´▽｀)=b	＼(T▽T)／
ヽ(‘ ∇‘ )ノ	（＾ワ＾）	ヽ(＾Д＾)ﾉ
(´∀`)	(°◇°;)	(゜▽゜;)
(/^▽^)/	(ﾉ´ｰ`)ﾉ	ヽ(´ー`)ﾉ
(　＾∇＾)	＼( ｀.∀´)／	(●⌒∇⌒●)
o(≧∇≦o)	ヽ(｀◇´)/	ヽ(*・ω・)ﾉ
（＾ω＾）	｡◕‿◕｡	⊙ω⊙
⊙△⊙	⊙▽⊙	o (◡‿◡✿)
(◕‿◕✿)	(∩_∩)	｡◕‿◕｡
(•ิ_•ิ)	(/•ิ_•ิ)/	（ΦωΦ）
（＾＾)	（＾⊆＾）	(-^〇^-)
(ノ゜▽゜)	ヾ(´▽｀;)ゝ	(゜▼゜＊）
(￣个￣)	＼(^▽^＠)ノ	(“⌒∇⌒”)
へ(゜∇、°)へ	（-＾〇＾-）	（＞ｙ＜）
ヽ(^。^)丿	(ヘ。ヘ)	（＾ｖ＾）
ヾ(@^▽^@)ノ	ヾ(@°▽°@)ノ	ヾ（＠＾▽＾＠）ノ
ヾ(＠^∇^＠)ノ	o((^▽^))o	ヾ(@゜∇゜@)ノ
ヾ(＠゜▽゜＠）ノ	（＠´＿｀＠）	ヾ(＠† ▽ †＠）ノ
(ノ＞▽＜。)ノ	＼（＠；◇；＠）／	＼(☆o◎)／
(((＼（＠v＠）／)))	(°◇°;)	(゜▽゜;)
(o;TωT)o	ヽ(;^o^ヽ)	（⌒▽⌒ゞ
“ヽ(´▽｀)ノ”	(((o(ﾟ▽ﾟ)o)))	ヾ(＠⌒ー⌒＠)ノ
Ψ(´▽｀)Ψ	（ｖ＾＿＾）ｖ

Hiding Emoticons

\|･ω･｀)	ﾍ(･_\|	｜−・;）
\|ω・）	\|_・)

Infatuation or in Love Emoticons

(´∀｀)♡	(‘∀’●)♡	（´▽｀）
(*°∀°)=3	（´ω｀♡%）	ヽ(愛´∀｀愛)ノ
♡o｡.(✿ฺ｡ ✿ฺ)	(｡･ω･｡)ﾉ♡	（●´∀｀）ノ♡
♡＾▽＾♡	(｡-_-｡ )人( ｡-_-｡)	(●♡∀♡)
（＿´ω｀）	(´ ▽｀).。ｏ♡	(o⌒．⌒o)
（人´∀`*）	（〃・・〃）	♥（ﾉ´∀`）
(ღ˘⌣˘ღ)	(｡’▽’｡)♡

Kissing Emoticons

(´ε｀ )♡	～(^з^)-☆	\|°з°\|
（＿ε＿）	(‘ε’)	\|(￣3￣)\|
（￣ε￣＠）	（*＾3＾）	(´ε｀*)
(○´3｀)ﾉ	(☆´3｀)	(*￣з￣)
(づ￣ ³￣)づ	（○゜ε＾○）	(TεT)
(-ε- )	（＠ーεー＠）	（*＾3＾）/～☆
ლ(\|\|\|⌒εー\|\|\|)ლ

Laughing Emoticons

（・∀・）	（　´∀｀）	（⌒▽⌒）
（＾ｖ＾）

Mellow or Whatever Emoticons

ヽ（´ー｀）┌	┗┐ヽ(′Д、`*)ﾉ┌┛	ヽ( ´¬`)ノ
┗┃・ ■ ・┃┛	ヾ(´A｀)ノﾟ	ヽ（・＿・；)ノ
ヽ(　￣д￣;)ノ	＼（〇_ｏ）／	ヽ(。_°)ノ
＼(;´□｀)/	ヾ(*´ー`)ノ	ヽ(‘ー`)ノ
ヽ(ー_ー )ノ	ヽ(´～｀；）	┐(‘～`；)┌
ヽ（*ω。）ノ	(;´・`)>	（＾～＾）

Miscellaneous Animal Emoticons

(=ﾟωﾟ)ﾉ	(○’ω’○)	[´・ω・`]
ヾ(｡･ω･｡)	(´-ω-｀)	(*･ω･)
(*-ω-)	┗(･ω･;)┛	｛・ω-*}
(* >ω<)	ヾ(ｏ･ω･)ﾉ	w(´･ω･`)w
(´・ω・`)	(・ω・；)	Σ(・ω・`\|\|\|)
ヾ(・ω・ｏ)	(´o・┏ω┓・o｀)	ヽ(･ω･｡)ﾉ
(ﾉ･ω･)ﾉﾞ	ヽ(･ω･ゞ)	ヾ(･ω･`｡)
(。-`ω´-)	(=ﾟωﾟ)ノ	(｡+･`ω･´)
ヽ(｡ゝω・｡)ﾉ	(´・ω・`)	⊂^j^⊃
（⊂((・⊥・))⊃）	~(-仝-)~	⊂((〃’⊥’〃))⊃
○(・x・)	◎▼◎	（-Φ-）
⊆（⌒◎⌒）⊇	≫(‘♀’)≪	（’∽’）
（≡・　x　・≡）	(∵)	Σ( ﾟωﾟ；≡⊃
ヽ(´･ω･`)､	(*´ω｀)o	(´・ω・)ﾉ
~(-仝-)~	～>゜）～～～～	＞°）m～～～∈
～＞°）mニニニニ＝～	(∩ё∩)	～>`)～～～
]＾：山

༼´◓ɷ◔`༽ This could very well be Pedobear…

Miscellaneous Japanese Emoticons

(´Д` )	・゜・(ノД`)	ヽ(´Д｀ヽ
（ゝ。∂）	(-_＼)	( 　ﾟ,_ゝﾟ)
ヽ(･∀･)ﾉ	ヽ(´Д｀)ﾉ	v(｡-_-｡)v
（＾凹＾）	(　ﾟдﾟ)	(/・・)ノ
(ﾉ･ｪ･)ﾉ	＼(ﾟｰﾟ＼)	o(‧”’‧)
(◕〝◕)	( c//”-}{-*\x)	(◐ o ◑ )
（;´_ヘ;）	（πーπ）	w(@。@;)w
＼(●o○;)ノ	(V)o\o;;(V)	（＄０＄）
（ｏ。ｏ；）	ヘ（゜◇、゜）ノ	☆⌒(*＾-°)v
☆⌒（＊＾∇゜）v	m{oYo}屮	*~●＞＾）
━━☆＞＾）	（´・｀）	(^ц^ )

☆彡　　★彡　　☆彡　　★彡
☆.。.:*・°☆.。.:*・°☆.。.:*・°☆.。.:*・°☆
`*:;,．★ ～☆・:.,;*

Miscellaneous Action Japanese Emoticons

Flipping over a table in anger: (╯°□°）╯︵ ┻━┻
Putting the table back nicely: ┬──┬◡ﾉ(° -°ﾉ)
Throwing the guy who put the table back nicely: (╯°Д°）╯︵/(.□ . \)
Taking a memo: 〆(・∀・＠)
Picking something up: ((((*｡_｡)_
Throwing something: (*・_・)ノ⌒*
Praying or hoping: 八(＾□＾*)
Pointing: (?・・)σ
Calling: (ι´Д｀)ﾉ
Thumbs up: d(-_^)
Whisper to someone: ( ﾟ∀(・－・)
Cheering: p(*＾-＾*)q
Poking someone: (*・)σσσ(*゜Д゜*)
Shower: ヽ｀、ヽ｀ヽ(*￣o￣*)>ヽ｀、ヽ｀
Holding a gun: ￢o(￣-￣ﾒ)
Spraying something: （　＾）／占~~~~~
Playing with a yoyo: （*＾＾）/~~~~~~~~~~◎
Hitting someone: （。_°☆＼(- – )
Two people fighting: ( `_)乂(_’ )
A different two people fighting: Ｏ( ｀_´)乂(｀_´ )Ｏ
A salute! “Yessir, I’m working on it!”: (`･ω･´)ゞ
Hi-Five: (●ゝω)ノヽ(∀＜●)
Giving someone the finger! 凸(⊙▂⊙✖ )
Glomp (with a kiss)! (づ￣ ³￣)づ
Lower those eyebrows! ๏[-ิ_•ิ]๏
Playing Ping Pong: ( ^o)ρ┳┻┳°σ(o^ )
Playing Ping Pong: ヽ(^o^)ρ┳┻┳°σ(^o^)/
Playing Catch: (／_^)／　　　　　　●　＼(^_＼)
Bowling: ＝( ^o^)ノ．．．…___ｏ
Playing Tennis: (-^-^)p_____|_o____q(^-^ )
Playing Volleyball: (／o^)/ °⊥ ＼(^o＼)
Patting someone on the head: (ｏ・_・)ノ”(ノ_＜。)
Shot in the head with an arrow: ―(T_T)→
Licking Lips: ლ(´ڡ`ლ)

Monkey Emoticons

@(o･ｪ･)@	└@(･ｪ･)@┐	@(｡･o･)@
@(o･ｪ･o)@	@(/o･ｪ･o)@/	@(*^ｪ^)@

Mustache Emoticons

(´┏o┓｀)	ﾐ(´┏ω┓｀)/	(´┏･┓｀)
(￣┏Д┓￣°*)	(￣┏Д┓￣ )	( ￣┏＿┓￣)
(ノ≧┏Д┓≦)ノ	(￣┏∞┓￣)

Painful Emoticons

☆⌒(＞。≪)	☆￣(＞。☆)	~(>_<~)
ヘ(>_<ヘ)	(。_＋)＼	(xLx)ヾ
/(ι)ヾ	(ノ>ノ)	／(x~x)＼
◎☆（♯××）┘	ヘ（。□°）ヘ

Pig Emoticons

( ´(00)`)	ヾ(；ﾟ(OO)ﾟ)ﾉ	ヽ(*’(OO)’)ﾉ
(￣(oo)￣)ﾉ	(○｀（●●）´○)ﾉ	(’(OO)’)
( ´(00)`)	(；ﾟ(OO)ﾟ)	(*´(00)`)’
ヽ(*’(OO)’)ﾉﾟ	q(￣(oo)￣)p	｡ﾟ(ﾟ´(00)`ﾟ)ﾟ｡
(￣（∞）￣)	(￣(▽▽)￣)	(=｀(∞)´=)

Sad or Crying Emoticons

（ ; ; ）	(T＿T)	（ＴДＴ）
(ToT)	(Ｔ▽Ｔ)	(‘A`)
（；_・）A single tear…	(T_T)	((T.T； )
(； T.T))	（；へ：）	(ノД`)・゜・。
・(/Д`)・	(´＿｀。)	(´Д｀。)
(´Ａ｀。)	(´∩｀。)	｡：ﾟ(｡ﾉω＼｡)ﾟ･｡
(┳Д┳)	(´；д；`)	(´；ェ；`)
｡･ﾟﾟ･(>д<)･ﾟﾟ･｡	(。┰ω┰。)	(゜´Д｀゜)
（ｉДｉ）	(´；ω；`)	。ﾟ(ﾟﾉД｀ﾟ)ﾟ｡
ヽ(´□｀。)ﾉ	(ﾟ´Д｀ﾟ)ﾟ	{{p´Д｀q}}
ヽ(●ﾟ´Д｀ﾟ●)ﾉﾟ	( p_q)	.・゜゜・（／。＼）・゜゜・．
(个_个)	((´д｀))	( ≧Д≦)
｡゜(｀Д´)゜｡	(。┰ω┰。)	p(´⌒｀｡q)
(/□＼*)・゜	((o(;△;)o))	（；￣д￣）
(ㄒoㄒ)	⊙︿⊙	o(╥﹏╥)o
o(；△；)o	(;△;)	（´＿｀）
╥﹏╥

Scared Emoticons

(ノдヽ)	ヽ(ﾟДﾟ)ﾉ	(／。＼)
（／_＼）	（／．＼）

Shocked or Surprised Emoticons

( ꒪Д꒪)ノ	(((( ;°Д°))))	((((；゜Д゜)))
（゜◇゜）	（￣□￣；）	∑(O_O；)
＼(>o<)ノ	━Σ(ﾟДﾟ\|\|\|)━	Σ(゜ロ゜;)
Σ(゜゜)	(*ﾟﾛﾟ)	(」゜ロ゜)」
щ(゜ロ゜щ)	(ﾉﾟ0ﾟ)ﾉ~	⊙▂⊙
⊙０⊙	w(°ｏ°)w	L(・o・)」
(○o○)	（・□・；）	((((；゜Д゜)))

Shy, Embarrassed or Bashful Emoticons

(^_^;)	(^^ゞ	(^^;)
(#^.^#)	(‘-’*)	(^^)
（＠´＿｀＠）	(⌒_⌒;)	(#｀ε´#ゞ
（/∇＼）	(〃￣ω￣〃ゞ	(´ｪ｀)
(´∀`)	(*´_ゝ｀)	(´∀`)
(/ω＼)	(*ﾉ▽ﾉ)	(*ﾉωﾉ)
（/｡＼)	（。-＿-。）	(#／。＼#)

Singing Emoticons

ヾ(´□｀* )ノ	（＾Ｏ＾☆♪	＼(^o^)／
(´▽｀)ノ♪	“ヽ(´▽｀)ノ”	ヽ(´▽｀；)/♪
ヽ(´・｀)ﾉ	ヽ(○´∀`)ﾉ♪	ヾ(´ρ｀)〃
ヾ(´〇｀)ﾉ	(´△｀)♪	(ﾉ´▽｀)ﾉ♪

Sleeping, Tired or Waking Up Emoticons

Σ(￣。￣ノ)ノ	(-ｪ-)｡o	(;´ρ`)
(´ο`)	ε-(´・｀)	＼(o￣∇￣o)/
＼（´Ｏ｀）／	［(－－)］zzz	(´～`)
ヾ(。￣□￣)ﾂ	ヾ(￣0￣； )ノ	ヾ(。￣□￣)ﾂ
ヾ(￣□￣;)ﾉ	(。-ω-)zzz	(-_-) zzz
(∪｡∪)｡｡｡zzz	(´〜｀*) zzz	∑(￣□￣)
(o´Д`)	（)´д`(）	（;≧皿≦）
（´□｀川）

(_ _)ヾ(‘ロ‘) Waking someone up

Smug Emoticons

ー(￣～￣)ξ	(((￣へ￣井)	(`へ´*)ノ
(￣^￣)	（￣へ￣）	（￣～￣;）
(￣ェ￣;)	(-、-)	( ；｀ヘ´)
o(´^｀)o	(￣ω￣;)	（｀＾´）ノ

Winking Emoticons

（＾＿－）	(－ｏ⌒)	（＾＿−）
(^_-)	(^_−)☆	(⌒.−)＝★
（＾_-）	（＾＿・）	๏[-ิ_•ิ]๏
（○゜ε＾○）	（＾＿－）≡★	☆～（ゝ。∂）
＼（^０＾）／

Worried Emoticons

(ーー;)	( ；´Д｀)	（；￣ェ￣）
ヽ(￣д￣;)ノ	(￣◇￣;)	ヽ(￣д￣;)ノ
（−＿−；）	(~_~;)	((*゜Д゜)ゞ”
(･_-｡ )	⊙﹏⊙	ミ●﹏☉ミ
(-’๏_๏’-)	(⊙…⊙ )	( ´△｀)
(;° ロ°)	ヽ（゜ロ゜；）ノ	（°o°；）

Writing Emoticons

φ(￣ー￣ )ノ	φ(°ρ°*)メ	＿φ(□□ヘ)
＿φ(￣ー￣ )	φ(._.)	φ（．．）
___ψ(‥ )	ψ(。。)	φ(◎◎ヘ)
＿φ( °-°)/	＿φ(°-°=)	φ(◎◎へ）
φ(^∇^ )	＿〆(。。)	φ(．．;)
φ(・ω・｀ ) Semoga bermanfaat, dan selamat menyoba. :D

10 Website Pengguna JavaScript Mengagumkan

2012-04-06T15:24:00.000+07:00

Sejak diperkenalkannya framework JavaScript seperti jQuery, Mootools, Prototype dan lain sebagainya, banyak sekali para web desainer yang beralih dalam menyusun website-nya dari konten berbasis flash menjadi konten berbasis JavaSript. Efek-efek yang dibuat pada website sudah hampir meninggalkan basis flash, mereka berbondong-bondong beralih ke basis JavaScript, selain dapat memperingan load website, juga proses penulisan script yang lebih mudah dari pada menggunakan flash namun tentunya dengan hasil akhir yang tetap memukau.

Dibawah ini adalah kumpulan website yang saya bookmark sebagai bahan referensi saat kehilangan ide untuk membuat berbagai efek-efek JavaScript. Website-website ini menggunakan framework yang sangat mudah dipelajari dan sebagian merupakan plugin framework yang murni ditulis sendiri. Selain sebagai referensi juga sebagai pembangkit motivasi diri disaat mengalami kejenuhan coding script.

Krieasi - http://www.kriesi.at/

Aviary - http://aviary.com/

Toolani - http://www.toolani.de/

Podcasttuneup – http://www.podcast-tuneup.com/

We are Sofa - http://www.madebysofa.com/

Monofactor - http://www.monofactor.com/

Alex Buga - http://www.alexbuga.com/

Coda - http://www.panic.com/coda/

Kobe - http://www.arcinspirations.com/kobe/

Dibusoft mmdv - http://www.dibusoft.com/

Highlight Color Style Block

2012-04-05T15:07:00.000+07:00

Untuk contohnya silahkan block teks yang ada dibawah, yang terlihat warna teksnya berubah menjadi warna pink. itulah yang saya maksud ditutorial ini.

Cukup Letakkan kode berikut diatas kode ]]></b:skin>



/* HTML5 Color Select STYLES */

::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }

::selection { background:

#FF5E99

; color:#fff; text-shadow: none; }

a:link { -webkit-tap-highlight-color:

#FF5E99

; }

Text-Shadow Cool

2012-04-05T15:00:00.000+07:00

DEMO

Text-Shadow Cool

KODE CSS :



/*cooltext*/

#cooltext {font: 3.1em/1.3em dicotmedium;

font-weight: bold;

color:#111;

text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px;

-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;

}

#cooltext:hover{color:#fff;

text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #00FCDA,0 0 70px #00FCDA,0 0 80px #00FCDA,0 0 100px #00FCDA,0 0 150px #00FCDA;

}

KODE HTML :

<div id="cooltext">TEKS HERE</div>

HTML Marque

2012-03-07T03:11:00.000+07:00

Sample:

MARQUEE STANDAR

code:

<marquee>MARQUEE STANDAR</marquee>

Sample:

MARQUEE BEHAVIOUR-SCROLL DIRECTION-RIGHT WIDTH-70%

code:

<marquee behavior="scroll" direction="right" width="70%">MARQUEE BEHAVIOUR-SCROLL DIRECTION-RIGHT WIDTH-70%</marquee>

Sample:

MARQUEE BEHAVIOUR-SCROLL DIRECTION-UPMARQUEE BEHAVIOUR-SCROLL DIRECTION-DOWN

code:

<marquee behavior="scroll" direction="up">MARQUEE BEHAVIOUR-SCROLL DIRECTION-UP</marquee>

<marquee behavior="scroll" direction="down">MARQUEE BEHAVIOUR-SCROLL DIRECTION-DOWN</marquee>

Sample:

MARQUEE BEHAVIOUR-ALTERNATE (MEMANTUL)

code:

<marquee behavior="alternate">MARQUEE BEHAVIOUR-ALTERNATE (MEMANTUL)</marquee>

Sample:

MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-1

MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-5

MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-10

MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-15

MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-20

code:

<marquee behavior="scroll" direction="left" scrollamount="1">MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-1</marquee> <marquee behavior="scroll" direction="left" scrollamount="5">MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-5</marquee> <marquee behavior="scroll" direction="left" scrollamount="10">MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-10</marquee> <marquee behavior="scroll" direction="left" scrollamount="15">MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-15</marquee> <marquee behavior="scroll" direction="left" scrollamount="20">MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-20</marquee>

Berikut Penggunaan gambar pada tag marquee:

<- Mogok

Membuat Artikel Terkait (Related Post) di Sidebar

2012-03-06T15:49:00.000+07:00

Menampilkan Artikel Terkait atau Related Post sekarang sudah menjadi hal yang umum ada di setiap Blog, sepertinya keberadaan Artikel Terkait ini sudah tidak bisa dipisahkan lagi dengan Blog.

Karena dengan salah satu cara inilah Page View blog akan meningkat (dampaknya akan kepada Alexa Ranking) lalu dengan cara ini pula (read: Artikel Terkait) para pengunjung Blog akan bisa menemukan artikel lainya yang masih dalam 1 kategori atau label.maka pada kesempatan kali ini saya ingin share kepada teman-teman semua tentang Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog.

Sidebar blog merupakan salah satu tempat yang saya pikir sangat strategis apabila dipasang dengan Artikel Terkait ini karena akan terlihat terlebih dahulu ketimbang ditaruh di bawah postingan (tetapi dua cara itu sama baiknya, selera).

Ok, bagi teman-teman yang mau membuat Artikel Terkait di Sidebar Blog, silahkan ikuti langkah-langkah di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Cari kode </head> dan copy kode di bawah ini lalu pastekan persis di atas kode tadi:

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

4. Lanjutkan dengan mencari kode berikut:

<b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
    </b:if>

5. Ganti kode tersebut dengan kode di bawah ini:

<b:if cond='data:post.labels'><data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    <b:if cond='data:blog.pageType == "item"'>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>

Ket: Sebelum di save kode max-results=10 (ini adalah kode untuk menampilkan berapa banyak artikel yang akan ditampilkan perlabel), bisa teman-teman ubah semisal hanya 5 atau 8.

6. Save Templates (belum selesai...)

7. Selanjutnya, masuk ke Page Element >> Add a Gadget >> HTML/JavaScript >> copy kode di bawah ini dan masukkan ke dalam konten HTML/Javascript:

Lalu masukkan kode berikut ini di gadget Anda.

<script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>

8. Jika sudah klik Save dan lihat semua perubahannya.

Seperti itulah Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog, semoga ini bisa bermanfaat dan selamat mencoba. Salam

Back To Top jQuery

2012-03-06T12:07:00.000+07:00

Back To Top sudah banyak digunakan oleh para blogger untuk memperindah tampilan blognya. Banyak ragam kreasinya, seperti salah satunya menggunakan jQuery.

Back to top memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik bacaan "back to top".

Tahapan Pembuatan Back to Top - Jquery:
1. Login ke blogger » layout / tata letak » edit HTML
2. Masukan script jquery berikut diatas </head>

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

<script src='http://riky-rizkiyana.googlecode.com/files/back-to-top.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
var el = $(this);
el.hide();
$(window).scroll(function() {
   if($(window).scrollTop() >= settings.min)
   {
    el.fadeIn(settings.fadeSpeed);
   }
   else
   {
    el.fadeOut(settings.fadeSpeed);
   }
});
});
};

$(document).ready(function() {
$('#top-link').topLink({
min: 300,
fadeSpeed: 500
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>

4. Cari kode <body>, lalu masukkan atribut id='top' ke dalam tag <body>, maka hasilnya akan seperti : <body id='top'>
5. Lalu masukan CSS dibawah sebelum kode ]]></b:skin>

#top-link {display:none;font-weight:bold;font-family:tahoma;font-size:10px;width:70px;background:#000;color:#fff;text-shadow:1px 1px 1px #666;font-size:11px;position:fixed;right:-20px;bottom:150px;padding:5px;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}

6. Lalu Masukkan kode HTML berikut diatas </body>

<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>

7. Simpan template. Dan berhasil.

Keterangan:
- Script jquery jika sudah memiliki tidak perlu dipasang lagi (biar tidak double)
- 'id=top' atau '#top-link' anda dapat rubah, itu merupakan kunci perintah dari effect.
- Anda dapat merubah warna, kata "Back To Top" dan posisinya sesuai selera anda.
- Script back to top ini dikembangkan dari smooth page scroll.

Twitter Buttons Animasi Pilihan

2012-03-05T07:14:00.000+07:00

Tiggal Pilih Sesuka hati anda.

online casino

Canadian roulette

Kasino på nett

gamblinginsider.ca

up your game at Gambling Insider

Canadian roulette

online gambling insider.ca

online casino

Canadian roulette

Semoga Bermanfaat bagi anda. ^^

Daftar Isi

2012-03-05T04:45:00.002+07:00

RCTI TV : RCTI ONLINE

2012-03-04T09:49:00.000+07:00

Catatan: 1. Perbesar tampilan (full screen) tekan tombol bagian kanan bawah TV (nomor 3 dari kanan).

Metal Slug

2012-03-03T13:00:00.000+07:00

Google Sitemap

2012-03-03T12:55:00.000+07:00

Google Sitemap adalah sebuah Peta Situs yang memberikan anda kesempatan untuk menampilkan halaman situs anda ke Google. Google akan datang kemudian melalui spider mengindeks halaman anda dengan lebih cepat. Membuat dan mengirimkan peta situs membantu memastikan bahwa Google mengetahui tentang semua halaman di situs anda, termasuk URL yang mungkin tidak ditemukan oleh proses normal Google.

Sebelum meneruskan artikel ini anda harus sudah Submit dan Verifikasi Blog ke Google Webmaster Tools. Untuk lebih jelasnya Cara Submit Sitemap ke Google Webmaster Tools, silahkan ikuti langkah-langkah berikut ini :

1. Silahkan Masuk ? Google Webmaster Tools.

2. Login dengan akun anda.

3. Silahkan klik nama blog anda.

Perhatikan pada bagian kiri atas, klik menu Site Configuration.

Klik Sitemaps.

4. Kemudian klik “Submit a Sitemap” disitu:

- Dan masukin Seluruh kode sitemap ini, satu-satu :

1. atom.xml?redirect=false

2. atom.xml?redirect=false&start-index=1&max-results=500

3. atom.xml?redirect=false&start-index=501&max-results=500

4. atom.xml?redirect=false&start-index=1001&max-results=500

5. atom.xml?redirect=false&start-index=1501&max-results=500

6. atom.xml?redirect=false&start-index=2001&max-results=500

7. atom.xml?redirect=false&start-index=2501&max-results=500

8. atom.xml?redirect=false&start-index=3001&max-results=500

9. feeds/posts/default?orderby=updated

Contohnya:

Dan ulangi langkah digambar, hingga semua atau Seluruh url atom Sitemap diatas anda submit, jangan lupa klik Submit Sitemap. Setelah itu biarkan Google mengidentifikasi sitemap yang anda submit dan berserta statusnya, dan hasilnya akan seperti ini:

Atau Bisa juga pkai cra berikut :

Semoga bermanfaat.

Navigasi Breadcrumb

2012-03-03T05:35:00.000+07:00

Seberapa penting Navigasi Breadcrumb di Blog? Jawabannya cukup penting, karena dengan adanya navigasi ini, mempermudah user ataupun spider dalam menelusuri blog kita (tidak tersesat).

Konon pula katanya, dengan menambahkan fasilitas navigasi breadcrumb ini pada blog, mampu meningkatkan nilai SERP (Search engine results page) dari blog kita.
agar lebih jelas kira-kira akan seperti dibawah ini.

Browse » Home » turorial blogger » Membuat breadcrumb navigation.

Langkah-langkahnya adalah sebagai berikut:

1. Pertama Login Blog
2. Pilih Layout untuk memulai pengeditan pada Blog yang diinginkan
3. Pilih Tab Edit HTML
4. Letakkan kode berikut ini, tepat di bawah kode <b:if cond='data:post.title'>

<b:if cond='data:blog.pageType == "item"'>
<a href='http://uttajadoel.blogspot.com/'>Home</a> »
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
»
</b:if>
<data:post.title/>
</b:if>

5. Kemudian Simpan Template. dan lihat hasilnya.

Ket:
- Teks yang berwarna Hijau anda dapat menggantinya dengan alamat blog sobat.
Jika tidak ada kesalahan dalam penempatan script, maka akan terlihat tampilan berbeda (navigasi breadcrumb) di atas judul artikel, seperti berikut ini:

Cara Kecil Menghindari Tulisan Dari Copy Paste

2012-02-20T19:29:00.000+07:00

Dalam postingan kali ini saya akan memberikan sedikit Tips atau Trick agar tulisan anda saat akan di Copy Paste akan mencantumkan sumbernya yang biasanya banyak dilupakan atau bahkan memang dilupakan oleh para Blogger. Sebenarnya sudah ada cara yang lebih extrime lagi, yaitu mencegak mouse tak bisa di klik kanan atau melakukan block.

Tapi untuk blog type tutorial seperti ini yang suatu saat berbagi code HTML atau JavaScript tak bisa melakukan hal itu. Jalan satu-satunya hanya menambahkan sumbernya secara otomatis saat akan di copy paste, seperti yang ada pada blog ini.

Untuk contohnya silahkan anda copy paste tulisan ini sebagian atau seluruhnya di dalam Notepad, pasti nanti akan ikut tercantum sumber dari mana beserta alamat URL nya.

Blog anda bisa juga melakukannya, termasuk blog di BLOGDETIK ini. Caranya sangat mudah. Anda hanya mencantumkan script yang telah diberikan oleh situs penyedia nya.

Untuk yang di BLOGDETIK silahkan pasang code nya pada Dashboard - Settings - WP-Highslide, kemudian save. Untuk chek silahkan buka blog anda, kemudian buka page atau sebuah postingan nanti di address bar dibelakang URL ada tambahan karakter huruf, seperti : #axzz1mJztRmOa dan sebagainya.

Pertama silahkan anda mendaftar di situs tynt.com, isi form nya dengan benar maka anda akan mendapatkan sebuah script code yang bisa anda pasang di blog anda.

Semoga trik ini bisa mengingatkan para blogger yang suka melakukan Copy Paste untuk mencantumkan alamat Sumbernya. Semoga trik ini berguna…

UTta Tutorial

LIVE TV STREAMING INDONESIA

Properti Bayangan (Shadow Property) di CSS3

Site Maps

Hanya Menampilkan Halaman Muka Blog

Dangerous Ishhq (2012) DVDScr 450mb

Tom and Jerry: Around the World (2012) DVDRip 350MB Mediafire Movies

Download movies free: Tom and Jerry: Around the World (2012) DVDRip 350MB DVDrip BRRip BluRay 720p High Quality, Small Size from Mediafire, Rapidshare, Jumbofiles, Single Links, Fileserve, Hotfile, Filesonic, mkv film

Threaded Comment styles dengan CSS

Cara Mematikan tombol ctrl U, ctrl A, ctrl C, dan Disable Klik Kanan

Cara Membuat Blog Tidak dapat di Copas, CTRL+U , dan BLock

Cara Membuat Blog Tidak dapat di Copas, CTRL+U

Emotion Blackberry

Angry Japanese Emoticons

Apologizing Emoticons

Bear Emoticons

Cat Emoticons

Confused Emoticons

Dancing Emoticons

Dead Emoticons

Defeat of Surrender Emoticons

Dog Emoticons

Drinking Emoticons

Evil, Plotting or Sneaky Emoticons

Fish Emoticons

Friends Emoticons

Greetings or Goodbyes Emoticons

Happy or Joyful Emoticons

Hiding Emoticons

Infatuation or in Love Emoticons

Kissing Emoticons

Laughing Emoticons

Mellow or Whatever Emoticons

Miscellaneous Animal Emoticons

Miscellaneous Japanese Emoticons

Miscellaneous Action Japanese Emoticons

Monkey Emoticons

Mustache Emoticons

Painful Emoticons

Pig Emoticons

Sad or Crying Emoticons

Scared Emoticons

Shocked or Surprised Emoticons

Shy, Embarrassed or Bashful Emoticons

Singing Emoticons

Sleeping, Tired or Waking Up Emoticons

Smug Emoticons

Winking Emoticons

Worried Emoticons

Writing Emoticons

10 Website Pengguna JavaScript Mengagumkan

Recent Comment dengan Tooltip

Highlight Color Style Block

Text-Shadow Cool

DEMO

HTML Marque

Membuat Artikel Terkait (Related Post) di Sidebar

Back To Top jQuery

Twitter Buttons Animasi Pilihan

Daftar Isi

RCTI TV : RCTI ONLINE

Metal Slug

Google Sitemap

Navigasi Breadcrumb

Cara Kecil Menghindari Tulisan Dari Copy Paste