Septian DC

Smooth Back To Top Jquery

12/22/2010 7

Akhirnya update juga,
Hari ini, ane mau bahas tentang tutorial membuat "back to top" nih

tutorial back to top dengan efek smooth scroll jquery

Eitsss.... Bukan back to top biasa lho!!

Tapi kalo diliat2.... emang biasa sih,
Yang jelas bisa bikin balik lagi keatas
tapi lebih lembuuut gitu... :P

Langsung aja deh, lagi males basa-basi...hehe
Oke, Login Blogger - rancangan -Edit HTML - Expand Template Widget

Cari kode ini:

</head>

lalu copy kode ini diatas kode tadi

Tadi itu kode Jquery, kalo ngerasa udah pernah masang. Kode tadi nggak perlu ditambahin ya...
Terus...Copy kode ini dibawah kode Jquery tadi

<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>

udah?

belom...sabar ya

sekarang cari kode

<body>

ganti jadi

Lalu, sekarang kode CSS-nya. Copy syntax CSS berikut di atas </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;}

Almost there....
copy kode dibawah ini sebelum </body>

Tulisan "Back To Top" bisa kamu ganti. Bisa juga pake gambar,
kalo pake gambar tinggal kamu ganti "Back To Top"-nya dengan kode ini:

<img src='url-gambar-kamu.com" />

Save, trussss preview....

Jangan lupa komennya ya Gan
kalo ada yang ga ngerti dan sebagainya, silahkan...
Malu bertanya bingung dijalan....

This tutorial, came from here:

CSS-Trick

<ZepT>

CSS3 Glowing Text Effect

12/19/2010 8

Oke, menindaklanjuti postingan saya yang kemarin. yang kebetulan membahas tentang cara penggunaan Text-Shadow. Kali ini saya akan membahas tutorial yang masih berhubungan dengan text shadow.

glowing text effect tutorial - css3 - typography

Penggunaan text shadow ternyata nggak cuma segitu aja
Kita bisa melakukan sedikit trik sehingga text kita bisa tampil lebih menarik. Salah satunya adalah Glowing Effect. Triknya cukup sederhana, kita hanya perlu menambahkan nilai bayangan lagi dan dipisahkan dengan koma . Lebih jelasnya ikuti terus ya....

Okay, to the tuts :D
Masih ingat dengan cara penggunaan syntax text-shadow yang kemarin sudah saya bahas??
Nah, untuk menerapkan trik glowing text effect ini, nilai yang kita isi hanya blur-nya saja. Nilai x-offset (horizontal) dan y-offset (vertikal) -nya kita beri nilai 0 (nol).

Get Ready Readers!!
Buat coba2 aja, kita buat kata "Teks Percobaan" lalu diberi tag <span>
Ini contohnya:

<span>Teks Percobaan</span>

Kemudian kita tambahkan text-shadow nya dengan menambahkan tag style di tag span. Kita mulai dengan warna hitam dulu ya?

<span style='text-shadow: 0px 0px 5px black;'>Teks Percobaan</span>

Teks Percobaan

Mulai keliatan??
Berikutnya, kita tinggal menambahkan nilai text-shadow lagi. Ingat, dipisah dengan koma.
Caranya, syntax text-shadow tadi, kita tambahin dengan nilai seperti berikut:

text-shadow: 0px 0px 5px black, 0px 0px 10px black;

(nilai blur kedua usahakan lebih besar dari nilai blur sebelumnya, tapi jangan terlalu jauh. Ya..kira2 jaraknya antara 2-5px lah. Ini akan membuat bayangan menyebar dengan terlihat rapi)

Teks Percobaan

Bisa ditambahin lagi

text-shadow: 0px 0px 5px black, 0px 0px 10px black, 0px 0px 15px black;

Teks Percobaan

Haha, berhasil nggak??
Sekarang mungkin keliatan jelek, berikutnya tinggal kamu yang coba cari warna sendiri. Jangan lupa sesuaikan sama background, terus warna teks samakan dengan warna bayangan (tapi kalo menurutmu lebih bagus dengan warna lain, silahkan :D ). Sisanya, tinggal kamu yang menentukan!
Oiya, nilai bayangan bisa kita tambah lagi. Sesuaikan aja ama kebutuhan kita (tapi saya belom tau, ada batas maksimumnya apa nggak. kalo ada yg tau, komen aja ya).

Nah, buat contohnya, bisa liat teks eksperimen saya berikut:

text-shadow: #5CE4FF 0px 0px 4px, #5CE4FF 0px 0px 6px, #5CE4FF 0px 0px 10px, #5CE4FF 0px 0px 20px;

hasilnya:

TEKS EKSPERIMEN :)

Simple Glowing Text Effect

*bener2 tanpa gambar lho* hehehe

Silakan berkreasi :D Semoga berhasil !!

Kalo ada yang nggak dipahami, atau ada yang ingin share, atau ada yang mau mengoreksi tutorial diatas,
monggoooo komentarnya ya =)

<ZepT>

Tutorial Penggunaan Text Shadow CSS3

12/16/2010 9

Coba liat Header Blog saya (Judul Blog dan Descriptionnya), mungkin biasanya orang akan menggunakan gambar untuk membuat effek teks seperti itu. Namun dengan perkembangan CSS yang saat ini begitu cepat, kita bisa mengurangi penggunaan gambar dan meminimalisir size page. Sehingga halaman situs kita tetap tampil menarik walaupun sedikit gambar.

Membuat efek teks dengan CSS3 sebenernya nggak begitu susah kok. Tips saya, dalam mempelajari syntax2 seperti HTML, CSS, sampai PHP sekalipun, kita cuma perlu teliti dan sabar. Kita harus mengenali betul karakteristik dan fungsi dari setiap baris kode. Jika kita telaten, pasti akan bisa dengan sendirinya.

Tadinya saya mau langsung ngasih tutorial tentang Glowing Text Effect atau Efek Teks Bercahaya dengan CSS3. Tapi berhubung kayaknya banyak yang belum ngerti, jadi saya terangin sedikit ya

Oke, kita mulai...
Mungkin sebelumnya anda bisa ngeliat salah satu contoh penggunaan text-shadow di blog teman saya, Johanes. Disitu juga udah disinggung sedikit mengenai pengenalan text-Shadow.

Nah, buat yg belom ngerti, saya jelasin sedikit ya...
coba liat gambar syntax text shadow berikut

[Sori ya gambarnya jelek...hehe]

Penjelasannya kira2 seperti ini:

syntax berwarna hitam adalah perintah untuk menampilkan text shadow (bayangan teks), kemudian
Warna merah adalah besar jarak bayangan secara horizontal, (bila nilai kita isi angka lebih dari "1", maka posisi bayangan akan semakin ke kanan. Tapi bila kita isi lebih dari "-1", maka sebaliknya, posisi bayangan akan semakin ke kiri)
Warna biru adalah panjang jarak bayangan secara vertikal. (pengisian nilainya sama dengan yang sebelumnya. Bisa negatif, atau postitif. Bila positif posisi bayangan akan semakin ke bawah, dan bila negatif akan semakin ke atas)
Hijau adalah tingkat blur (kekaburan bayangan). (semakin besar nilai blur, bayangan akan semakin kabur/tidak jelas. Tapi bila semakin kecil, maka bayangan akan semakin jelas/tegas)
Dan warna ungu adalah warna bayangan. (bisa menggunakan RGB, Heksa, atau HSL. Gampangnya sih pake heksa aja)

Oke, kemudian...

1. Contoh Pertama

Kita akan membuat syntax text shadow dengan nilai sebagai berikut: text-shadow: 1px -2px 3px #000000;

hasilnya-->

text-shadow: 1px -2px 3px #000000;

Nah, bayangan yang muncul akan ke arah kanan 1pixel (horizontal), ke atas -2pixel (vertikal), dan tingkat kekaburan/blur 3pixel.

2. Memasukkan Syntax Text-Shadow ke dalam Teks

(Sebelumnya, untuk yang belum tau. Kode CSS Template Blogger normalnya ditempatkan setelah kode <b:skin><![CDATA[ dan sebelum kode </bskin> )

Misalnya kita ingin efek bayangan ditambahkan ke bagian header blog kita. Kode header title normalnya adalah "h1", jadi coba cari kode h1 tersebut di edit HTML (utk pengguna blogger). kamu akan liat kode seperti ini-->

.header h1 {syntax css...}

[kode mungkin berbea tiap template, tapi intinya nggak beda jauh]

Kemudian, kita tinggal memasukkan syntax text-shadow di dalam kurung kurawal tersebut. Jadinya (contoh aja)-->

.header h1 {
font-size: 40px;
font-family: arial, serif;
color: #737373;
text-shadow: 1px -2px 3px #000000;
line-height:1.2em;
letter-spacing:1px;
}

----save dan preview. hasilnya???? Oke nggak??

Lha trus, gimana kalo kita mau nambahin text shadow di description header, atau lainnya? Nggak beda jauh kok sama cara barusan. Cuma, perhatiin kode CSSnya aja, yang mana yang mau ditambahkan text-shadow.

3. Text Shadow di Tengah-Tengah Kalimat

Nah, kalo untuk penggunaan text shadow di kata2 tertentu atau ditengah2 kalimat??

Cukup simpel kok. Kita bisa memanfaatkan kode HTML "span" di tengah2 kalimat dan masukkan syntax text-shadownya di dalam tag "style". Contoh penggunaanya=>

Sebelum
ini adalah sebuah kalimat biasa dan hanya kata ini yang diberi text shadow

Setelah
ini adalah sebuah kalimat biasa dan hanya <span style='text-shadow:1px -3px 3px #000000;'>kata ini<span> yang diberi text shadow

Hasilnya
ini adalah sebuah kalimat biasa dan hanya kata ini yang diberi text shadow

Catatan!

tag style bisa diganti dengan class, atau id. Tapi kalo dijelasin sekarang bakal lebih ribet lagi. hehehe

nanti Insyaallah akan saya jelasin sedikit di lain posting :D

Sekarang, tinggal kamu yang berkreasi!!

Silahkan dicoba sendiri ya....

kalo ada yang kurang paham atau ada penjelasan yang nggak jelas, silahkan ditanya.....

[next ----> Glowing Text Effect With CSS3]

Ditunggu komentarnya ya???

<ZepT>

Let's Choose The Right Browser

12/08/2010 3

Udah lama nggak posting nih. Kangen juga rasanya... Haha, akhir2 ini sibuk ngedesain templatenya. Hehe, maklum baru ngarti HTML & CSS... Itu juga baru dasarnya sih :D
Ya setidaknya hasilnya juga nggak jelek2 amat lah :P

Let's get to the topic,
Choose The Right Browser, bukannya "Pilih Browser yang kanan"...
Tapi pilih browser yang BENAR.

Diantara sekian banyak browser, pasti kawan sudah kenal dengan IE, Safari, Firefox, Netscape atau yang sekarang lagi ngetrend "Crhome". Masing masing browser tentunya memiliki keunggulan dan kekurangannya masing2.

Jika kawan berkunjung, pasti kawan yang memakai browser XX (nanti tau) akan tanya, "lah, kok bentuknya nggak jelas ya?", dan komentar lainnya

Ini bukan salah saya, yang salah ya si browser itu....
Kalo kawan mau dapetin kenyamanan dan tampilan maksimal saat browsing, gunakanlah browser yang tepat...
Nah, di bawah ini adalah perbandingan fitur beberapa browser bedasarkan hasil test :

Safari 4 (Win)

Firefox 3.5 (Win)

Google Chrome (Win)

Opera 10 (Win)

Internet Explorer 6, 7 & 8

Coba kawan bandingkan....
Sudah tau kan kenapa kadang di browser anda suka ada bagian yang nggak muncul dengan baik...

Makanya sekarang saya lebih milih pake Chrome, selain bisa menampilkan halaman web dengan baik, programnya enteng banget alias nggak boros2in memory, untuk belajar web designing juga bagus kok. Apalagi ada HTML Inspector-nya....

Sekarang, tinggal anda yang memilih... Browser mana yang terbaik menurut anda....

Ada yang nggak setuju?
monggo saran dan kritiknya.... :D

<ZepT>