Akhirnya Ganti Kulit Juga

Akhirnya setelah sekian lama mendesain ulang blogku, sekarang jadilah sudah...
Ya, walaupun nggak sebagus punya Web Designer lainnya, setidaknya aku udah senang dan bersyukur bisa ngerti HTML dan CSS, yang akhirnya bisa ku gunakan :D

Oke, posting kali ini cuma sekedar cerita soal beberapa hal terbaik dari template ini menurut saya sendiri :D Semoga bisa jadi inspirasi untuk kawan2 yang mau desain templatenya juga :)

Halaman Utama
Disini saya memberikan sedikit tekstur yang saya buat dengan sederhana lewat Photoshop bajakan. Saya juga sedikit meng"hack" sejumlah tampilan blogger. Ya, sebenernya sih cuma nambahin sedikit syntax HTML dan CSS aja. Seperti pada Posting di bagian "Halaman Utama".  Kalo kawan liatnya pake browser yang udah ngedukung css transition, pasti akan merasakan betapa kerennya CSS3 :))

Sidebar
Kemudian, di sidebar, di situ terlihat seperti efek mendelep ( halah bahasanya ). Pokoknya itu deh. Sebenernya caranya simpel, nggak perlu pake gambar,

Tinggal Kasih border: 2px solid; ,terus kasih warna pake border-color: atas kanan bawah kiri; (atas, kanan, dst diganti dengan kode warna)
Triknya tinggal memberi warna lebih gelap pada bagian sisi satunya, dan warna yang lebih terang disisi lainnya. Misal atas dan kanan gelap. Bawah dan kiri terang. atau sebaliknya.

Komentar
Nah, ini dia yang paling saya sukai. Setelah beberapa kali menemui jalan buntu, akhirnya saya mendapatkan hidayah yang telah menuntun saya ke jalan yang benar.
Dengan sedikit ide dan sedikit pengetahuan tentang html, whoala! jadilah comment field ala saya (dengan nada bangga seperti salah satu acara memasak di TV)

Footer
Disini tidak ada bagian yang mencolok,
Hanya saja pada bagian ini, saya memberikan efek emboss atau timbul (saya gunakan juga pada menu navigasi, dan komentar).

Trik ini juga sangat mudah. Pada dasarnya hanya mengandalkan border. Tapi disini saya menggunakan gambar. Nggak besar kok. Cuma 2x2 pixel juga cukup :D Anda hanya perlu memberi warna gelap dibagian atas dan warna terang di bagian bawah. Sama seperti cara di bagian "Sidebar".

Kesimpulan
Kesimpulannya, disini saya tidak lagi menggunakan 100% CSS. Saya menggunakan sedikit bantuan gambar karena pada dasarnya para Web Designer profesional juga hampir selalu menggunakan gambar pada desain webnya. Jadi, tidak terlalu terpaku pada syntax CSS walaupun itu juga sebenarnya sangat penting. Tapi perlu diingat, memakai gambar juga jangan seenaknya. Pakai se"efisien" mungkin dan usahakan hanya pada bagian yang memang sangat diperlukan seperti Header dan Footer. Selain tidak "memperpuruk" loading, juga sebagai branding kita, atau dengan kata lain ciri "khas" blog/web kita :)

Oke, segitu aja menurut saya dech...
Maaf kalo mungkin bahasanya agak ketinggian ya? maklum, cita2 saya Web Designer...haha moga kesampean... amiiin
Kalo ada yang mau tanya soal edit2 template blogger, jangan ragu untuk tanya ya? sapa tau saya bisa bantu :D
Semoga bermanfaat :))

<ZepT>

Balloon Navigation dengan CSS3

WADUUH.....!

Posting yang kamu cari udah pindah masbro.
Klik disini

Perbedaan ID dan Class

WADUUH.....!

Posting yang kamu cari udah pindah masbro.
Klik disini

Smooth Back To Top Jquery

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

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

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

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

<!-- Back To Top -->
<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() &gt;= settings.min)
   {
    el.fadeIn(settings.fadeSpeed);
   }
   else
   {
    el.fadeOut(settings.fadeSpeed);
   }
  });
 });
};

$(document).ready(function() {
 $(&#39;#top-link&#39;).topLink({
  min: 300,
  fadeSpeed: 500
 });
 $(&#39;#top-link&#39;).click(function(e) {
  e.preventDefault();
  $.scrollTo(0,300);
 });
});
</script>
<!-- End Back To Top -->

udah?

belom...sabar ya

sekarang cari kode

<body>

ganti jadi

<body id='top'>

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>

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

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

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.

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>