Gobby

Cek Blog Lama, Masih Ada Pengunjugnya?

noreply@blogger.com (Rifki Aria Gumelar) — Fri, 07 Oct 2011 23:26:00 +0000

Halo semua, huft sudah lama rasanya saya tidak membuka blog kumuh ini lagi, hampir2 saja saya lupa karena saking sibuknya ngurus situs baru.

Oiya buat teman-teman lama saya yang dulu sering saling komen-komen juga buat semua yang kebetulan nyangkut di blog ini, sekarang saya punya situs baru lho... :)

Namanya JavaTemplates.com, Akhir-akhir ini baru saja meluncurkan template bertema Online Store versi kedua. Buat teman-teman semua yang berminat, kunjungi ya situs saya :)

Lebih Fokus Blogging Setelah Menjadi Admin BuyMyThemes.com

noreply@blogger.com (Goomelar) — Thu, 28 Apr 2011 01:28:00 +0000

Awalnya blogging hanyalah sebagai sarana untuk melepas waktu luang sambil belajar tentang dunia blogging, namun sekarang mungkin sudah saatnya lebih serius dan fokus dengan dunia ini, kemarin tepatnya tanggal 26 April 2011 saya resmi ditunjuk oleh owner BuyMyThemes.com mas I Putu Eka Aryasa untuk menjadi admin di situs nya itu, tugasnya adalah saya harus membuat template untuk situs tersebut.

Ketika kepercayaan itu datang perasaan senang bercampur was-was melanda pikiran saya, senang karena akhirnya saya dipercaya menjadi partnernya namun was-was dengan kemampuan saya dalam membuat template namun dengan rendah hati dia berkata "Gak apa-apa itung2 belajar..!" dengan begitu saya tak berpikir panjang lagi untuk menerima penawaran itu. Hmm alangkah rendah hatinya guru baru saya itu..

Ok buat teman-teman semuanya jangan lupa ya kunjungi situs kita BuyMyThemes.com buat yang ingin nyari template buat blog tapi jangan sampai lupa tetap berkunjung ke gallery saya yang sudah berganti wajah dan akan segera memiliki domain.. hehe.

Silver Showcase - Free Blogger Template

noreply@blogger.com (Goomelar) — Thu, 31 Mar 2011 22:23:00 +0000

Akhirnya free blogger templates saya yang pertama yang saya beri nama Silver Showcase selesai dibuat. Walaupun ini free blogger template yang pertama tetapi ini bukanlah satu-satunya template yang saya buat karena sebelumnya saya juga membuat template Golden Gallery Themes namun itu sifatnya premium alias berbayar.

Desain saya terinsipirasi dari Echo - Bulid Highly Social Real-time Apps, namun itu hanya sebatas pada beberapa bagian saja selebihnya saya menambahkan beberapa fitur lain diantaranya :

1. Slider
Slider ini di buat dengan menggunakan jQuery.min.js 1.4.2 dengan penambahan beberapa script. Slider ini bisa anda gunakan untuk menampilkan postingan atau artikel penting dalam blog anda. Cara menggantinya anda login ke Blogger kemudian masuk ke menu edit HTML dan cari kode yang tertera dibawah ini dengan menggunakan ctrl + F

<div class='featured-post clearfix'>
<div class='slider-image'>
Lalu anda ganti paragraph beserta gambarnya dengan gambar dan kalimat anda sendiri, ada 5 slide yang saya sediakan semuanya bisa anda ganti dengan cara yang sama.

2. Gallery Style
Untuk konten pada halaman muka alias home page saya menggunakan gaya gallery blog dengan Js-kit rating sebagai sarana pemirsa/pengunjung untuk memberikan penilaian terhadap konten anda. Namun ini akan jelas berbeda saat anda masuk ke halaman selanjutnya dimana akan terlihat sebuah sidebar yang tidak anda temukan pada halaman muka, untuk mengubah atau mengedit sidebar yang tersembunyi ini memang memerlukan beberapa langkah yang boleh dibilang cukup rumit dan merepotkan. Untuk mengeditnya silahkan perhatikan penjelasan saya ini:

Pada awalnya bagian sidebar ini tidak akan terlihat pada menu edit page element untuk mengganti atau menambahkan widget tentu anda harus membuatnya terlihat terlebih dahulu pada edit page element, caranya masuk ke edit HTML anda cari kode seperti ini:
#sidebar-wrap {display:none}
ganti display:none menjadi display:yes kemudian simpan dulu template anda, sekarang element sidebar akan muncul pada edit page element dan anda bida menambahkan/menghilangkan beberapa widget dengan metode seperti biasa. Setelah proses penambahan anda masih harus menyembunyikannya kembali agar tidak akan muncul pada halaman muka, caranya rubah kembali display:yes menjadi display:none kemudian save kembali template anda.

Selain itu juga ada beberapa hal menarik lainnya yaitu:
- Sponsor List
- Page Navigation
- Wordpress Look
- Gallery Style
- Simple
- Ads Ready, dll

Untuk melihat demonya silahkan klik : Live Demo dan jika anda semua ada yang berminat silahkan download secara gratis.

Penting!!
- Mohon agar jangan menghilangkan credit karena saya menghabiskan banyak waktu untuk membuatnya.
- Apabila ada yang ingin anda tanyakan, saran serta kritik terhadap template ini silahkan anda tinggalkan sebuah komentar atau email saya di goomelar [at] ymail.com

Perlukah Kita Menghilangkan Outline Dotted Border Saat Link Fokus?

noreply@blogger.com (Goomelar) — Sun, 27 Mar 2011 15:34:00 +0000

Ada banyak perdebatan di beberapa forum tentang perlu atau tidaknya outline dotted border saat link fokus, banyak yang mengatakan hal itu sangat menganggu (mengurangi) keindahan dari tampilan blog/web namun tidak sedikit pula yang berpendapat hal itu kadang diperlukan bagi sebagian orang.

Fungsi dari outline dotted border saat link fokus yaitu membantu pengguna komputer yang hanya menggunakan keyboard dengan fungsi TAB. Ketika kita menekan tombol TAB outline dotted border ini lah yang akan membantu menandai posisi kita berada pada link mana dan kita tinggal menekan tombol ENTER untuk menuju link tersebut, jika kita menghilangkannya tentu akan sedikit mengganggu kemudahan menjelajah blog/web kita untuk sebagian orang.

Lalu perlukah kita menghilangkan outline dotted border? pasti akan ada tiga jawaban untuk pertanyaan tersebut:

1. Tidak perlu
Mungkin alasannya adalah seperti dijelaskan diatas yaitu untuk membantu penggunjung blog/web yang hanya keyboard sebagai navigasi pada komputer nya, memang tidak salah dengan jawaban ini.

2. Perlu
Alasannya adalah hal ini mengganggu atau mengurangi keindahan tampilan blog/web kita dan zaman sekarang mungkin hampir semua orang menggunakan mouse sebagai navigasi pada perangkat komputernya jadi tidak ada masalah kalau kita memutuskan untuk menghilangkan outline dotted border. Cara menghilangkannya pun cukup mudah yaitu dengan menggunakan kode CSS
* {outline:none}
Jawaban ini pun menurut saya tidak salah karena saya sendiri pun lebih memilih menghilangkannya.

3. Tidak tahu / tidak mau tahu
Ini mungkin adalah jawaban yang paling simpel dan paling banyak karena tidak harus menggunakan alasan.

Dari semua jawaban memang tidak ada yang salah tinggal kita yang menentukan sesuai dengan pandangan dan pendapat masing-masing, tapi ingat kita juga harus memperhatikan para pembaca/pengunjung kita apakah mereka terganggu atau terbantu dengan keberadaan outline dotted border tersebut, bila perlu kita adakan voting kepada para pengunjung untuk menentukannya.

Inline Modal Window (Popup)

noreply@blogger.com (Goomelar) — Wed, 16 Mar 2011 12:14:00 +0000

Inline Modal Window (Popup) ini adalah hasil krerasi dari Soh Tanaka, dari bentuknya mirip sekali dengan Popup milik Email Me Form, coba anda bandingkan keduanya.

Inline Modal Window (Popup) Soh Tanaka

Inline Modal Window (Popup) Email Me Form

Untuk melihat demonya silahkan klik Disini, sekarang kita lanjut ke tutorialnya. Silahkan perhatikan baik-baik:

CSS

Langkah pertama kita buat struktur dari CSS nya, silahkan masukan kode berikut ini pada template anda. Peletakannya seperti biasa anda letakan diantara kode <b:skin><![CDATA dan]]></b:skin>

#fade { display: none;  background: #000;
 position: fixed; left: 0; top: 0;
 width: 100%; height: 100%;
 opacity: .80;
 z-index: 9999;
}
.popup_block{
 display: none; background: #fff;
 padding: 20px;
 border: 20px solid #ddd;
 float: left;
 font-size: 1.2em;
 position: fixed;
 top: 50%; left: 50%;
 z-index: 99999;
 /*--CSS3 Box Shadows--*/
 -webkit-box-shadow: 0px 0px 20px #000;
 -moz-box-shadow: 0px 0px 20px #000;
 box-shadow: 0px 0px 20px #000;
 /*--CSS3 Rounded Corners--*/
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
}
img.btn_close {
 float: right;
 margin: -55px -55px 0 0;
}
/*--Hack IE--*/
*html #fade {
 position: absolute;
}
*html .popup_block {
 position: absolute;
}

jQuery

Langkah kedua adalah penambahan jQuery code, anda bisa download di situs resminya atau anda bisa memakai jQuery code yang telah di hosting google.

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

Javascript

Berikutnya adalah penambahan Javascript, silahkan masukan script berikut ini sebelum kode </head> . Script ini sudah saya hosting di Google Code.

<script src='http://goomelar.googlecode.com/files/Popup.txt' type='text/javascript'/>

HTML

Langkah terakhir anda tinggal menambahkan tag HTML nya, ada 2 buah HTML yang harus anda tambahkan.
HTML yang pertama bisa anda tempatkan dimana saja.

<div class="popup_block" id="popup_name">
<h2>Judul</h2>
Konten</div>

Sekarang anda tinggal memasukan tag <a berikut ini pada link atau image yang inginkan

<a href="#?w=500" rel="popup_name" class="poplight">Popup</a>

#?w=500 untuk menetukan lebarnya.

Selanjutnya save template anda dan lihat hasilnya, selamat mencoba!.

Source : www.sohtanaka.com - Inline Modal Window w/ CSS and jQuery

Goomelar Templates

noreply@blogger.com (Goomelar) — Sun, 27 Feb 2011 11:23:00 +0000

Hallo semua saya ingin memperkenalkan gallery template saya yang terbaru yaitu Goomelar Templates, Disini anda akan menemukan berbagai macam template khusus blogger yang pastinya sudah saya seleksi dan hanya menampilkan template-template yang berkualitas dari para designer template terbaik yang saya sediakan spesial buat anda semua.

Desain

Desain dari gallery template ini masih menggunakan desain blog Goomelar yang sedikit dipoles dengan gaya gallery blog khas Blogger Templates, namun berbeda dengan blog Goomelar yang di dominasi dengan warna hitam muda dan orange, Goomelar Templates di dominasi dengan warna hitam muda serta biru langit cerah yang terlihat lebih fresh dan mudah-mudahan bisa membuat anda semua merasa sejuk saat melihatnya :). Jadi pada intinya blog ini adalah hasil perpaduan dari dua blog saya terdahulu dan kalau dilihat secara sepintas terlihat seperti saudara kembarnya blog Goomelar.

Berikut ini adalah screenshoot dari halaman utama Goomelar Templates :

Konten

Kontenya sementara saya cari dan kumpulkan sendiri dari para designer template kenamaan, namun untuk kedepannya saya akan memberikan kebebasan kepada siapa saja yang ingin memajang template hasil karyanya tanpa dipungut biaya apapun, jadi jika ada dari anda ada yang punya template hasil kreasi sendiri tidak ada salahnya dong kalau dipublikasikan dan bisa digunakan semua orang dengan cara memajangnya di Goomelar Templates.

Pertanyaan yang mungkin muncul adalah, apakah saya ikut membuat template dan dipajang di gallery? jawabannya untuk saat ini belum ada keberanian dari saya pribadi untuk membuat template yang bisa digunakan oleh orang lain karena beberapa faktor salahsatunya adalah masih kurangnya pengetahuan saya dalam membuat template sehingga muncul ketakutan jika nanti template saya mempunyai banyak kekurangan dan semua orang kecewa dengan template buatan saya itu. Tetapi saya terus berusaha untuk itu dan itulah yang selama ini menjadi salah satu impian saya.

Untuk melongok kondisi terakhirnya di tempat konstruksi silahkan lihat disini : Goomelar Templates, memang belum 100% selesai tetapi tidak ada salahnya jika dipublikasikan terlebih dahulu siapa tahu nanti ada masukan dari teman-teman semua tentang gallery saya baik dari desain maupun kontennya.

Lalu bagaimana dengan Blogger Templates? sampai sekarang Blogger Templates masih tetap eksis biarlah Google sendiri yang menghapusnya atau barangkali ada yang berminat silahkan saya lelang deh..hahaha :D

Teknik Indented Lines Border

noreply@blogger.com (Goomelar) — Sun, 27 Feb 2011 08:39:00 +0000

Mungkin teknik ini bukan hal baru buat teman-teman tetapi saya ingin sedikit kembali mengingatkan tentang penggunaan teknik ini, indented lines border adalah sebuah line atau garis yang terlihat seperti membentuk sebuah cekungan, ribet juga sih penjelasannya. Untuk lebih jelasnya silahkan lihat contoh pada gambar dibawah ini :

Sebagian ada yang menggunakan image untuk membuat indented lines, namun karena penggunaan image bisa menambah berat blog kita maka saya sarankan jika anda ingin membuat sebuah indented lines border lebih baik menggunakan teknik yang saya paparkan dibawah ini.

Sebagai contoh jika kita akan membuat indented lines pada elemen sidebar, maka kode CSS yang digunakan adalah seperti ini:

#sidebar ul{line-height:28px; list-style-type:none}
#sidebar ul{list-style:none; padding:5px 0 8px 0}
#sidebar li{margin:0; padding:0 0 0.25em 0; line-height:18px}
#sidebar ul li{padding:8px 8px 8px 8px; border-bottom:1px solid #111; border-top:1px solid #333}
#sidebar ul li:first-child{border-top:none}

Text yang ditandai warna merah adalah garis tepi yang akan membentuk indented lines nya, ketika garis tepi bawah pada child pertama bertemu dengan garis tepi atas pada child kedua maka disitulah garis indented lines akan terbentuk, jadi untuk margin biarkan nol agar tidak ada jarak yang membatasi pertemuan kedua garis tepi tersebut.

Penggunaan first-child{border-top:none} dimaksudkan agar pada child pertama tidak memiliki garis tepi bagian atas itu karena sebelum child pertama tidak ada lagi child yang akan membantu membentuk indented lines, namun jika diantara teman-teman ada yang berpikiran lain kode itu bisa dihilangkan.

Sederhana bukan ? jadi sekarang kita bisa menghemat beban blog dengan menghindari penggunaan image untuk sekedar membuat indented lines, sekarang saatnya teman-teman mencoba sendiri. Good Luck !:)

Berkreasi dengan Membuat Animasi Day & Night Menggunakan jQuery

noreply@blogger.com (Goomelar) — Fri, 18 Feb 2011 21:08:00 +0000

Kesaktian sihir jQuery dalam urusan memperindah tampilan blog/website memang tiada habisnya, bahkan bisa menggantikan peran animasi flash seperti pada tutorial kali ini yang akan menjelaskan bagaimana jQuery bisa membuat sebuah Animasi Day and Night layaknya flash.

Animasi ini akan terlihat seperti sebuah pemandangan alam dimulai dari siang hari dan berakhir pada malam hari dengan durasi sekitar 30 detik dan berulang lagi jika kita me-refresh halaman tersebut. Sebelum kita belajar membuatnya alangkah baiknya kalo kita melihat terlebih dahulu demo-nya, jangan lupa download file nya juga.

Animasi ini bisa di pakai sebagai background blog milik teman-teman agar lebihat lebih exspresive dan beda dari yang lain, atau teman-teman juga bisa menggunakannya sebai background header, background postingan, widget di sidebar dll.

Jika teman-teman mau coba untuk membuatnya tidak terlalu sulit ko, hanya membutuhkan beberapa tahapan saja.

Struktur CSS

Langkah pertama mari kita buat Struktur CSS nya, dan kita mulai dengan membuat sebuah pondasi terlebih dahulu.

#awan, #langit, #malam, #bintang{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
}

Lalu selanjutnya kita buat kode CSS untuk tampilan awal yaitu tampilan siang hari dengan membuat background awan, langit, bukit, matahari siang dan matahari senja, kode-nya seperti ini :

#langit{
    background:#fff url(....URL Background langit) repeat-x top left;
    z-index:1;
}
#matahari-siang{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(....URL Matahari siang) no-repeat center center;
    z-index:2;
}
#matahari-senja{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(....URL Background Matahari senja) no-repeat center center;
    z-index:2;
    opacity:0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
#awan{
    background:transparent url(....URL Background awan) repeat-x top left;
    z-index:3;
}
#bukit{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:232px;
    background:transparent url(....URL background bukit) repeat-x bottom center;
    z-index:3;
}

Berikutnya kita buat kode CSS untuk tampilan malam hari yaitu dengan membuat background langit pada malam hari, bintang serta bulan.

#malam{
    background-color:#000;
    z-index:4;
    opacity:0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
#bintang{
    bottom:200px;
    background:transparent url(....URL Background bintang) repeat bottom center;
    z-index:5;
    opacity:0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
#bintang-jatuh{
    position:absolute;
    left:40%;
    top:10%;
    width:126px;
    height:80px;
    background:transparent url(....URL Background taburan bintang) no-repeat 80px -200px;
    z-index:5;
    opacity:0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
#bulan{
    position:absolute;
    left:45%;
    top:60%;
    width:168px;
    height:168px;
    background:transparent url(....URL Background bulan) no-repeat center center;
    z-index:6;
    opacity:0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

Ok selesai untuk CSS nya tinggal kita gabungkan dan tempatkan pada template, penempatanya seperti biasa bisa anda letakan setelah kode <b:skin><![CDATA[ atau sebelum kode ]]></b:skin>.

jQuery

Langkah berikutnya kita tambahkan script jQuery versi 1.3.2 yang telah saya sediakan pada file yang telah anda download tadi, tapi seperti biasa upload terlebih dahulu di tempat hosting dan masukan URL nya pada script berikut.

<script src='URL jQuery 1.3.2' type='text/javascript'/>

Atau kalau tidak mau ribet teman-teman bisa pakai jQuery yang telah di hosting Google.

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

Sebetulnya saya lebih menyarankan agar menggunakan jQuery yang di hosting sendiri, jika teman-teman memakai jQuery yang telah di Hosting Google bisa jadi karena orang yang memakai file tersebut terlalu banyak prosesnya akan menjadi agak sedikit terganggu.

Javascript

Setelah jQuery tadi tambahkan kedua javascript dibawah ini.

Javascript yang ini berfungsi untuk efek pewarnaannya, (file sudah saya sediakan pada file download).

<script src='URL jQuery.color' type='text/javascript'/>

dan yang ini adalah script untuk menghidupkan efek animasi pada struktur CSS diatas.

<script type='text/javascript'/>
$(function() {
   $('#matahari-siang').animate({'top':'96%','opacity':0.4}, 12000,function(){
       $('#bintang').animate({'opacity':1}, 5000,function(){
            $('#bulan').animate({'top':'30%','opacity':1}, 5000, function(){
                $('#bintang-jatuh').animate({'opacity':1}, 300);
                $('#bintang-jatuh').animate({
                    'backgroundPosition':'0px 0px','top':'15%', 'opacity':0
                }, 500);
            });
       });
   });
   $('#matahari-senja').animate({'top':'96%','opacity':0.8}, 12000);
   $('#langit').animate({'backgroundColor':'#4F0030'}, 18000);
   $('#awan').animate({'backgroundPosition':'1000px 0px','opacity':0}, 30000);
   $('#malam').animate({'opacity':0.8}, 20000);
});
</script>

Tag HTML

Langkah terakhir kita tinggal memasukan tag HTML-nya, untuk penempatannya tergantung dari teman-teman mau menambahkannya di bagian mana.

<div id="langit"></div>
<div id="Matahari-siang"></div>
<div id="Matahari-senja"></div>
<div id="awan"></div>
<div id="bukit"></div>
<div id="malam"></div>
<div id="bintang"></div>
<div id="bintang-jatuh"></div>
<div id="bulan"></div>

Selesai dan save pekerjaan teman-teman dan lihat hasilnya, semoga berhasil ya..

Congratulations! Your Google AdSense application has been approved

noreply@blogger.com (Goomelar) — Thu, 17 Feb 2011 23:05:00 +0000

Saya tertarik dengan Program Google Adsense setelah membaca beberapa artikel dan ternyata banyak sekali orang yang membicarakan tentang program ini dari mulai keuntungan mengikuti Adsense yang memberikan kita bayaran setiap ada orang yang mengklik iklan yang kita pasang sampai proses pendaftarannya yang sangat sulit dengan kriteria-kriteria yang ketat dan tidak sedikit yang ditolak mentah-mentah dengan berbagai alasan.

Dari situlah saya mulai penasaran dengan program ini tapi bukan penasaran karena bisa mengahasilkan duitnya tapi saya penasaran tentang pendaftarannya yang dibilang orang sangat sulit sekali, saya pun mencoba mengirimkan aplikasi saya pada yang pertama tapi ternyata ditolak karena katanya bermasalah dengan jenis halaman, ah ternyata benar kata orang sulit sekali untuk bisa diterima. Saya berpikir memang ada yang salah dengan blog saya? apakah karena umur blognya yang masih beberapa hari atau mungkin karena kontennya berbahasa indonesia, tetapi apa salahnya dengan konten yang berbahasa indonesia karena pada aplikasi pendaftarannya pun tersedia banyak pilihan bahasa termasuk bahasa indonesia.

Lalu kemarin saya iseng coba-coba buat mendaftar lagi, dan tidak lama mungkin 3-4 jam ada email masuk ke akun gmail saya, kalimat awalnya seperti ini :

Your Google AdSense application has been approved. You'll soon begin to

see relevant Google ads appear on....

Akhirnya diterima juga jadi partner Adsense walaupun dalam hati masih bertanya kenapa sekarang bisa diterima padahal tidak ada perubahan berarti yang saya lakukan pada blog ini. Jadi kesimpulan akhirnya bukan bermasalah dengan umur blog atau konten bahasa indonesia tapi mungkin faktor keberuntunganlah yang bermain.

Jadi buat teman-teman yang ingin bergabung dengan adsense dan belum mendapatkan kesempatan itu jangan ragu bergabunglah sekarang juga. Saya rasa tidak harus mempunyai blog yang sudah berumur atau membuat artikel-artikel berbahasa inggris terbukti dengan blog yang baru beberapa minggu dengan konten berbahasa indonesia pun saya bisa diterima, saran saya yang pertama lebih tekankan perhatian teman-teman pada kesederhanaan desain blog, jangan terlalu banyak menggunakan widget-widget yang tidak terlalu penting karena membuat blog kita terlihat kurang profesional, yang kedua usahakan dengan memperkecil ukuran blog agar menjadi lebih ringan serta berdoa dan berharap keberuntungan akan menghampiri kita. Good luck!

Template Untuk Blog Demo Akhirnya Rampung

noreply@blogger.com (Goomelar) — Wed, 16 Feb 2011 23:51:00 +0000

Lelah juga ternyata setelah beberapa hari sibuk menyempurnakan template untuk blog demo saya sampai-sampai lupa menunaikan rukun blogging yang kedua yaitu posting artikel. Tetapi rasa lelah itu terbayar sudah dengan selesainya project pembuatan template yang saya beri nama Goomelar Live Demo.

Template ini di buat khusus untuk blog demo saya yang menampilkan contoh atau preview dari tutorial-tutorial yang saya berikan, struktur dari template ini sangat sederhana hanya terdapat 3 struktur utama yaitu sebuah header bar, dan tombol back di bagian ujung kiri bawah yang berfungsi untuk membawa pengunjung kembali ke halaman sebelumnya, serta sebuah frame dengan lebar 100% yang menampilkan halaman web yang dikunjungi dari ketiga struktur yang ada bagian frame-lah yang paling dominan karena ukurannya yang luas.

Screenshoot dari blog demo saya ketika mengunjungi situs Google

Dengan selesainya project ini bukan berarti tugas saya sudah selesai namun masih ada satu lagi yang harus dikerjakan, yaitu template demo untuk Blogger Template.

Mau lihat seperti apa bentuknya silahkan klik disini, Nah bagaimana menurut teman-teman semua tentang blog demo ini? silahkan tinggalkan komentar ya untuk memberikan kritik dan saran.

Bubble Navigation jQuery

noreply@blogger.com (Goomelar) — Sun, 13 Feb 2011 15:41:00 +0000

Ayo siapa yang mau percantik blog dengan navigasi cantik ini? menurut saya ini adalah salah satu navigasi paling keren, menu navigasi ini saya rekomendasikan buat teman-teman yang memiliki hasrat terhadap hal-hal unik.

Tutorial ini dulu saya temukan pada blog milik Marry Lou dengan judul Awsome Buble Navigation With jQuery . Kata pertama yang keluar dari mulut saya waktu pertama melihatnya "wooow..!, keren dan unik" kenapa saya bilang unik karena biasanya navigasi menu berformat horizontal atau vertikal tapi yang ini menggunakan format setengah lingkaran, navigasi ini pernah saya coba pada blog ini pada masa konstruksi awal dan ternyata berhasil tapi kemudian saya tidak pake lagi karena kurang cocok dengan ide awal tampilan blog saya yang lebih berorientasi ke "Black Misterius".

Sekarang giliran teman-teman yah buat mencobanya, tutorialnya simpel ko...

Persiapan

Langkah pertama download file rar diatas, disitu ada file gambar untuk icon navigasi-nya serta file javascript, kemudian anda upload file-file tersebut di tempat hosting teman-teman atau kalau yang ga punya hosting berbayar anda bisa upload gambar-gambar anda di Picassa dan upload file Javascript nya di Google Code. Kenapa saya sarankan memakai kedua tempat penyimpanan tersebut karena keduanya masih satu keluarga dengan Blogger, ya seperti manusia lah kalo antar keluarga kan proses ini itu cenderung lebih cepat dan mudah. Untuk cara upload di Google Code silahkan lihat disini Hosting Javascript di Google Code.

CSS

Lanjut ke langkah berikutnya, tambahkan kode CSS ini:

.navigation{
    margin: 0px auto;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1.4px;
}
.navigation .item{
    position:absolute;
}
.user{
    top:125px;
    left:110px;
}
.home{
   top:50px;
   left:360px;
}
.shop{
   top:90px;
   left:625px;
}
.camera{
   top:230px;
   left:835px;
}
.fav{
   top:420px;
   left:950px;
}
a.icon{
    width:52px;
    height:52px;
    position:absolute;
    top:0px;
    left:0px;
    cursor:pointer;
}
.user a.icon{
    background:transparent url(../images/user.png) no-repeat 0px 0px;
}
.home a.icon{
    background:transparent url(../images/home.png) no-repeat 0px 0px;
}
.shop a.icon{
    background:transparent url(../images/shop.png) no-repeat 0px 0px;
}
.camera a.icon{
    background:transparent url(../images/camera.png) no-repeat 0px 0px;
}
.fav a.icon{
    background:transparent url(../images/fav.png) no-repeat 0px 0px;
}
.navigation .item a.active{
    background-position:0px -52px;
}
.item img.circle{
    position:absolute;
    top:0px;
    left:0px;
    width:52px;
    height:52px;
    opacity:0.1;
}
.item h2{
    position:absolute;
    width:147px;
    height:52px;
    color:#222;
    font-size:18px;
    top:0px;
    left:52px;
    text-indent:10px;
    line-height:52px;
    text-shadow:1px 1px 1px #fff;
    text-transform:uppercase;
}
.item h2.active{
    color:#fff;
    text-shadow:1px 0px 1px #555;
}
.item ul{
    list-style:none;
    position:absolute;
    top:60px;
    left:25px;
    display:none;
}
.item ul li a{
    font-size:15px;
    text-decoration:none;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#222;
    padding:3px;
    float:left;
    clear:both;
    width:100px;
    text-shadow:1px 1px 1px #fff;
}
.item ul li a:hover{
    background-color:#fff;
    color:#444;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
}

Teks yang berwarna merah ganti dengan URL gambar yang telah di upload.

jQuery

Jangan lupa untuk menambahkan kode jQuery agar efek hover-nya terlihat lebih hidup.

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

Javascript

Lalu tambahkan kode javascript ini tepat setelah kode jQuery tadi. Formatnya seperti ini

<script type="text/javascript" src="jquery.easing.1.3.js"></script>

Text yang saya tandai dengan warna merah adalah alamat dari file Javascript yang telah anda upload tadi.

<script type="text/javascript">
 $(function() {
  $('#nav > div').hover(
  function () {
   var $this = $(this);
   $this.find('img').stop().animate({
    'width'     :'199px',
    'height'    :'199px',
    'top'       :'-25px',
    'left'      :'-25px',
    'opacity'   :'1.0'
   },500,'easeOutBack',function(){
    $(this).parent().find('ul').fadeIn(700);
   });

   $this.find('a:first,h2').addClass('active');
  },
  function () {
   var $this = $(this);
   $this.find('ul').fadeOut(500);
   $this.find('img').stop().animate({
    'width'     :'52px',
    'height'    :'52px',
    'top'       :'0px',
    'left'      :'0px',
    'opacity'   :'0.1'
   },5000,'easeOutBack');

   $this.find('a:first,h2').removeClass('active');
  }
 );
 });
</script>

HTML

Nah sekarang tinggal menempatkan tag HTML nya di mana saja yang anda mau, tapi biar lebih pas tambahkan sebelum <div id='header-wrapper'>.

<div class="navigation" id="nav">
 <div class="item user">
  <img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
  <a href="#" class="icon"></a>
  <h2>User</h2>
  <ul>
   <li><a href="#">Profile</a></li>
   <li><a href="#">Properties</a></li>
   <li><a href="#">Privacy</a></li>
  </ul>
 </div>
 <div class="item home">
  <img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
  <a href="#" class="icon"></a>
  <h2>Home</h2>
  <ul>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Contact</a></li>
  </ul>
 </div>
 ...
</div>

Save

Langkah terakhir simpan template anda dan lihat apa berhasil apa tidak, kalo belum coba baca kembali tutorialnya.

Sumber : tympanus.net - Awsome Bubble Navigation with jQuery

Release, Introductions, and Short Stories During The Construction

noreply@blogger.com (Goomelar) — Sat, 12 Feb 2011 02:02:00 +0000

Saya yakin setiap blogger pasti mempunyai angan-angan untuk mempunyai sebuah blog yang sempurna baik dari desain, konten maupun popularitas. Begitu juga dengan saya, sampai-sampai angan-angan itu terbawa-bawa sampai kedalam mimpi dan terbayang-bayang terus setiap hari (lebay..!).

Untuk mencapai semua itu memang tidak mudah butuh sebuah pondasi yang kokoh yaitu usaha, tekad yang kuat serta kesabaran. Dengan ketiga hal tersebut saya yakin semua angan-angan itu akan tercapai dan saat ini ketiga hal itulah yang saya coba tanamkan kuat-kuat dalam diri saya pribadi.

Kemarin tanggal 11 Februari 2011 bertepatan dengan 11 hari umur blog ini.. baru 11 hari? ya betul baru 11 hari umur blog saya ini, boleh dibilang bayi merah yang baru lahir. Yah semoga saja bayi ini akan tumbuh sehat sampai mencapai titik kedewasaan. Amiiin!

Sekilas Tentang Saya

Teman-teman blogger perkenalkan nama saya Aria lengkapnya Rifki Aria Gumelar, lahir di Bandung 20 tahun yang lalu. Saat ini saya berstatus lajang dan saya bekerja sebagai staf Konsultan Lingkungan (cuma konsultan freelance), saya lulusan SMK Otomotif tahun 2008 dan tidak melanjutkan pendidikan lagi. Saat ini saya berdomisili di Kota Bandung, Jawa Barat.

Mungkin itulah sekilas tentang saya, memang tidak ada yang spesial tapi itulah saya.

Latar Belakang / Kisah Perjalanan Blogging

Blog ini dibuat berawal dari keingintahuan saya tentang dunia blogging setelah saya membaca sebuah buku tentang WordPress pemberian seorang teman. Akhir tahun 2010 tepatnya 17 Desember 2010 saya mulai mengenal blog dan membuat sebuah blog di WordPress.com tetapi mungkin rumah saya bukan disana, lalu beberapa hari kemudian saya coba berkenalan dengan Blogger.com dan ternyata saya merasa cocok dengan dengan rumah baru saya ini karena menurut saya Blogger.com lebih mudah dalam mengelolanya.

Dari situ saya mulai menikmati apa yang namanya blogging, entah kenapa bukan posting artikel yang saya kerjakan dengan blog pertama saya di Blogger.com tapi justru malah keasyikan obrak-abrik template, sampai-sampai waktu itu dalam satu hari saya berganti template bisa sampai 4 - 5 kali ganti dan semakin hari saya semakin kecanduan untuk obrak-abrik template bahkan dari sejak itu sampai sekarang durasi saya blogging hampir 14 jam perharinya. Disitulah mulai tumbuh cita-cita untuk membuat blog untuk berbagi pengalaman saya dalam otak-atik template dan mudah-mudahan cita-cita saya terpenuhi dengan lahirnya blog ini.

Tujuan

Tujuan dibuatnya blog ini seperti yang sudah saya katakan diatas adalah untuk berbagai informasi tentang dunia bloging baik itu bersumber dari para blogger senior maupun yang berasal dari pengalaman saya pribadi. Mudah-mudahan blog ini dapat bermanfaat buat kita semua. Amiin!

Proses Pembuatan - Perkembangan Terakhir

Proses Pembuatan

Setelah saya sudah menentukan sebuah tema, barulah saya mulai mengerjakan rancangan awalnya dimulai dari sebuah file notepad kosong yang kemudian saya isi dengan kode-kode CSS standar lalu saya upload ke blog saya dan melengkapinya dengan tag HTML.

Saya mendesain blog ini dengan bantuan secara tidak langsung dari artikel dan tutorial luar biasa dari Master Soh. Siapa Master Soh?? ah masa gak tau..nama aslinya SohTanaka (www.sohtanaka.com) lengkapnya saya tidak tau, saya memanggilnya dengan julukan Master Soh karena dia lah yang mengajari saya walaupun secara tidak langsung dan tidak "serumpun" karena dia memakai WordPress sedangkan saya Blogspot. dan disini saya mengucapkan "Thank you Master Soh....!!!!"

Perkembangan Terakhir

Desain masih jauh dari harapan saya, ya sekitar diangka 20% dari angan-angan saya, masih banyak kekurangan disana-sini bahkan mungkin diantara teman-teman semua ada yang beranggapan "Jelek" (maaf bukan menuduh).

Konten apalagi, jauh sekali dari professional dari mulai cara menyampaikan sampai apa yang disampaikan. Tetapi Insya Allah blog ini mempunyai etika, apa maksudnya? maksudnya saya memakai etika dalam mengelola blog ini, postingan yang bukan berasal dari pengalaman saya atau hasil dari kreasi orang lain pasti saya cantumkan sumbernya diakhir setiap postingan dan saya berkomitmen 'SAY NO TO COPY-PASTE' artinya semua artikel yang bersumber dari blogger/webmaster lain saya tulis kembali dengan point yang sama tetapi dengan kata dan gaya tulisan saya dan tidak lupa mencantumkan link ke artikel aslinya.

Harapan

Saya berharap blog ini bisa lebih bermanfaat baik itu buat saya maupun untuk teman-teman blogger semua dan saya juga berharap mendapat dukungan dari teman-teman semua dengan menyampaikan kritik dan saran melalui komentar untuk perkembangan blog ini.

Penutup

Memang saya terlalu awam untuk memberikan artikel-artikel tutorial dan bukan maksud saya untuk sok mengajari teman-teman semua tapi saya disini mengajak teman-teman untuk belajar bersama dan mudah-mudahan bisa berkembang bersama-sama. Serta yang paling penting seperti kata pepatah " Janganlah lihat siapa yang berbicara tetapi lihatlah apa yang dia bicarakan..." jadi untuk teman-teman semua jangan tersinggung yah, saya tegaskan lagi saya bukan bermaksud mengajari atau menggurui tetapi mengajak untuk belajar bersama. Let's learn together !!

Akhir kata dengan penuh rasa hormat saya ucapkan salam "Salam Kenal Semuanya...",
Happy blogging and keep spirit..!

Test Kecepatan Loading Blog Kamu!

noreply@blogger.com (Goomelar) — Wed, 09 Feb 2011 15:57:00 +0000

Kecepatan loading halaman blog atau website merupakan hal yang paling utama dalam Optimalisasi SEO, lalu apakah anda tahu seberapa beratkah ukuran blog anda dan seberapa cepatkah sebuah browser meloading halaman blog anda?

Untuk mengetahuinya anda bisa menggunakan fasilitas tools yang banyak disediakan oleh beberapa pengembang. Namun diantara sekian banyaknya tools yang tersedia saya rasa Website Speed Test dari IWEBTOOLS merupakan salah satu tools pengecek loading halaman yang fasilitasnya terbilang komplit, tools ini memberikan informasi dari Size, Load time dan Average speed per KB, asyiknya lagi tools ini bisa mengecek lebih dari satu website/blog dalam satu kali pengecekan ini dapat mempermudah kita dalam membandingkan mana diantara blog-blog kita yang berukuran paling berat dan loading halamannya paling lambat.

Silahkan cek ukuran dan kecepatan loading blog anda disini dengan memasukan alamat URL dari blog atau website anda misalnya : goomelar.blogspot.com, untuk memasukan beberapa URL sekaligus metodenya adalah dengan memasukan alamat URL per baris jadi setelah anda memasukan URL yang pertama, untuk memasukan URL selanjutnya anda tinggal menekan tombol Enter lalu ketikan alamat URL yang kedua dan begitu seterusnya.

Sebagai informasi, hasil pengecekan dari blog-blog saya:
- Goomelar ( http://goomelar.blospot.com), Size : 72.13 KB, Load time : 0.16 seconds, dan Average per KB : 0 seconds.
- Blogger Template (http://shoot-template.blogspot.com), Size: 98.16 KB, Load time : 0.19 seconds, dan Average per KB : 0 seconds.

Memang keduanya mempunyai ukuran yang terbilang besar untuk ukuran sebuah blog, maklumlah karena saya memasukan terlalu banyak script di dalamnya Namun sekarang saya jadi tahu kalo blog ini mempunyai ukuran yang lebih kecil dengan load time yang lebih cepat dibandingkan dengan blog saya yang satu lagi, dan sekarang waktunya untuk merombak kembali template dari blog-blog saya agar ukurannya bisa menjadi lebih kecil. Lalu bagaimana dengan blog anda? silahkan cek yah dibawah.

Membuat Sponsor List dengan CSS Sprites dan Mootools

noreply@blogger.com (Goomelar) — Wed, 09 Feb 2011 06:54:00 +0000

Sponsor adalah pihak yang mendukung kita dalam sebuah bidang atau kegiatan, dan kita sangat diuntungkan dengan keberadaan para sponsor itu, baik secara finansial ataupun untuk keberlangsungan suatu bidang atau kegiatan yang kita tekuni. Namun sudahkah kita memperlihatkan respect atau penghargaan terhadap mereka?.

Untuk kita sebagai seorang blogger penghargaan yang bisa kita berikan kepada para sponsor yaitu salah satu yang paling sederhana adalah dengan menyediakan space atau ruang yang enak dipandang dan terlihat elegant untuk menempatkan nama-nama brand mereka dalam blog kita atau bahasa keren nya Sponsor list , lalu bagaimana cara membuat sebuah Sponsor list yang terlihat elegant dan enak dipandang serta terkesan professional ?.

Sebelum kita pelajari langkah-langkahnya lebih baik teman-teman melihat demo-nya terlebih dahulu disini:

Gimana tertarik ga? kalo tertarik ayo kita lanjut ke tutorialnya.

CSS

Langkah pertama adalah membuat beberapa Sprite image untuk logo atau banner sponsornya. Sprite image adalah gabungan dari beberapa gambar menjadi satu gambar tunggal, contoh Sprite image seperti ini:

untuk membuatnya teman-teman siapkan dua buah gambar yang sama dengan format color dan grayscale dan gabungkan keduanya menjadi satu kesatuan, teman-teman bisa pake CorelDraw atau Photoshop untuk membuatnya atau kalau ga mau ribet bikinnya silahkan teman-teman download gambar nya disini.

Setelah semua gambar yang akan dipasang sudah siap, upload terlebih dahulu ke tempat hosting gambar semacam Picasa atau Photobucket. Selanjutnya tambahkan kode CSS ini pada template punya teman-teman.

<!--
#sponsors {
 width:auto; height:20px;
 display: block;
 clear: both;
 border: 1px solid #eee;
 padding: 10px 5px;
 margin: 15px auto;
 text-transform: uppercase;
 font-weight: bold;
 color: #666;
}
#sponsors span {
 display: block;
 float: left;
 padding: 0 10px;
 height: 20px;
 line-height: 20px;
}
#sponsors a {
 display: block;
 float: left;
 height: 20px;
 padding: 0 10px;
}
a.mootools {background: url(images/mootools.jpg) no-repeat 0 0; width:85px;}
a.drupal {background: url(images/drupal.jpg) no-repeat 0 0; width:74px;}
a.technorati {background: url(images/Technorati.Jpg) no-repeat 0 0; width:107px;}
a.jquery {background: url(images/jquery.jpg) no-repeat 0 0; width:63px;}
a.miro {background: url(images/miro.jpg) no-repeat 0 0; width:23px;}
a.mozilla {background: url(images/mozilla.jpg) no-repeat 0 0; width:63px;}
a.nbc {background: url(images/nbc.jpg) no-repeat 0 0; width:75px;}
a.twitter {background: url(images/twitter.jpg) no-repeat 0 0; width:87px;}
a.wordpress {background: url(images/wordpress.jpg) no-repeat 0 0; width:20px;}
 
 /*mouseover*/
 a:hover.mootools, 
 a:hover.drupal, 
 a:hover.technorati, 
 a:hover.jquery, 
 a:hover.miro, 
 a:hover.mozilla, 
 a:hover.nbc, 
 a:hover.twitter, 
        a:hover.wordpress {background-position: 0 -20px;}

kode berwarna biru ganti dengan nama sponsor, sedangkan yang berwarna merah ganti dengan URL dari gambar yang telah di upload tadi.

Mootools

Langkah selanjutnya kita poles CSS tadi dengan sentuhan magic dari Mootools dengan menempatkan kode dibawah ini sebelum kode </head>

<script src='http://goomelar.googlecode.com/files/mootools-1.2.1-core-yc.js' type='text/javascript'><!--mce:0--></script>
<script src='http://goomelar.googlecode.com/files/colorize.js' type='text/javascript'><!--mce:1--></script>

Javascript

Setelah itu tambahkan kode Javascript ini setelah kode Mootools tadi, fungsinya adalah untuk menghidupkan kode Mootools dan kode pewarnaan pada gambar.

<script type='text/javascript'>
window.addEvent(&#39;domready&#39;, function(){
 
 var sponsors = $$(&#39;#sponsors a&#39;).setStyle(&#39;opacity&#39;, 0.5); // Set opacity to 0.5 for grayscale image
 
 sponsors.set(&#39;tween&#39;,{duration:200, wait:false}).addEvents({
 
  //On mouseenter
  &#39;mouseenter&#39;: function(){
   this.setStyle(&#39;background-position&#39;,&#39;0 -20px&#39;); //Reveal color image
   this.get(&#39;tween&#39;).start(&#39;opacity&#39;,1); //set opacity to 1
  },  
 
  //on mouseleave
  &#39;mouseleave&#39;:function(){
   this.setStyle.delay(500,this,[&#39;background-position&#39;,&#39;0 0&#39;]); //set back initial background-position for grayscale image
   var tween =  this.get(&#39;tween&#39;);
   tween.start.delay(500, tween,[&#39;opacity&#39;,0.5]); //set back initial opacity
  }
 
 });
});
</script>

HTML

Terakhir teman-teman tinggal menempatkan tag HTML nya pada tempat yang diinginkan misalnya sebelum footer atau setelahnya.

<div id="sponsors">
    <span>Our Sponsors:</span>
 
    <a class="mootools" title="Judul link" href="Link"></a>
    <a class="drupal" title="Judul link" href="Link"></a>
    <a class="technorati" title="Judul link" href="Link"></a>
    <a class="jquery" title="Judul link" href="Link"></a>
    <a class="miro" title="Judul link" href="Link"></a>
    <a class="mozilla" title="Judul link" href="Link"></a>
    <a class="nbc" title="Judul link" href="Link"></a>
    <a class="twitter" title="Judul link" href="Link"></a>
    <a class="wordpress" title="Judul link" href="Link"></a></div>

Selanjutnya tinggal save template dan lihat hasilnya. Selamat mencoba!

Sumber : www.web-kreation.com - Sponsor list with CSS Sprites And Mootools 1.2

Membuat Tooltips dengan CSS & jQuery

noreply@blogger.com (Goomelar) — Tue, 08 Feb 2011 23:36:00 +0000

Tooltips merupakan sebuah tools yang memberikan kita informasi atau keterangan dari link atau gambar yang kita sorot, dengan menambahkan tools ini akan sangat membantu para pengunjung dalam memperoleh informasi dari sebuah link atau gambar tertentu.

Tooltips yang saya akan bahas kali ini adalah tooltips yang menggunakan CSS & jQuery. Langkah pembuatan tooltips ini cukup sederhana dan mudah dipraktekan bahkan untuk yang teman-teman yang baru mengenal jQuery.

Silahkan teman-teman simak baik-baik cara menambahkan tools ini ke dalam blog kita, berikut ini langkah-langkahnya

CSS

Langkah pertama adalah penambahan CSS, untuk penempatan CSS biasanya diantara <b:skin><!CDATA[ dan [[</b:skin>.

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none;
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

untuk menyesuaikan CSS dengan template silahkan anda berkreasi sendiri agar tampilannya sesuai dengan template anda, khusus untuk teks yang berwarna merah pastikan angkanya tetap 1000 untuk membuatnya berada pada layer paling atas.

jQuery

Selanjutnya anda tambahkan kode jQuery setelah kode <head> atau </head>, untuk kodenya anda bisa download di situs pengembangnya atau anda bisa menggunakan kode jQuery dibawah ini yang sudah di hosting di Google.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript">
</script>

Setelah itu tambahkan kode script dibawah ini tepat setelah kode tadi

<script src="http://goomelar.googlecode.com/files/tooltip.js" type="text/javascript">
</script>

atau teman-teman bisa mendownloadnya terlebih dahulu script-nya disini dan menyimpannya di hosting pribadi.

HTML

Sekarang kita masuk ke langkah penerapannya pada HTML, ada empat style yang bisa teman-teman terapkan yaitu:

1. Tooltips sederhana
Style ini adalah yang paling mudah dimana sebuah teks jika disorot akan memunculkan keterangan berupa teks juga.

<a href="#" class="tip_trigger">Teks <span class="tip">Keterangan</span></a>

2. Teks dengan keterangan gambar
Sebuah teks jika disorot maka akan memunculkan sebuah gambar sebagai keterangannya.

<a class="tip_trigger" href="#">Teks<span class="tip"><img src="URL Gambar"/></span></a>

3. Gambar dengan keterangan teks
Style yang ini adalah kebalikan dari style yang kedua yaitu apabila kita menyorot sebuah gambar maka akan muncul keterangan berupa teks

<a class="tip_trigger" href="#"><img src="URL Gambar"/><span class="tip">Teks</span></a>

4. Gambar dengan keterangan gambar
Style ini akan memberikan keterangan berupa gambar apabila kita menyorot sebuah gambar

<a class="tip_trigger" href="#"><img src="URL Gambar"/><span class="tip"><img src="URL Gambar untuk Keterangan"/></span></a>

Sumber : www.sohtanaka.com - Simple Tooltips w/ jQuery & CSS

Drag & Drop Image dengan Draggable jQuery

noreply@blogger.com (Goomelar) — Tue, 08 Feb 2011 21:46:00 +0000

Draggable jQuery adalah sebuah fasilitas hasil pengembangan dari jQuery, fungsinya yaitu agar sebuah icon atau image tertentu bisa kita seret dan letakan ke sembarang tempat (drag and drop).

Draggable yang saya bicarakan disini adalah draggable yang di kembangkan UI/API/1.7.1/Draggable pada blogger template dan telah dipraktekan oleh Mas Choen pada blognya.

Untuk demo nya silahkan anda cari icon RSS dan coba teman-teman klik dan seret untuk memindahkannya, keren bukan? nah sekarang mari kita sama-sama belajar cara membuat Draggable jQuery karena saya sendiri pun belum mempraktekannya.

jQuery

Langkah pertama letakan script jQuery berikut ini setelah kode <head> atau sebelum kode </head>, dan seperti biasa yang sudah pernah menambahkannya tidak perlu ditambahkan lagi

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

Javascript

Langkah kedua tambahkan kode ini persis setelah kode script jQuery tadi.

<script src='http://jquery-ui.googlecode.com/svn/tags/1.8rc1/jquery-1.4.1.js' type='text/javascript'/>
<script src='http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.draggable&quot;).draggable();
});
</script>

HTML

Langkah terakhir teman-teman tinggal meletakan kode class='draggable' pada bagian yang akan di beri fungsi Draggable, misalkan kita akan meletakan fungsi tersebut pada icon RSS seperti yang Mas Choen buat, kode aslinya adalah seperti ini :

<div id="rssicon">
<a href="http://demojquery.blogspot.com/feeds/posts/default"><img alt="rss" src="http://lh4.ggpht.com/_dfnTVAxeWMI/Sl9cKBBUxnI/AAAAAAAABfs/OKjk6Kjry5M/s800/rss.jpg" /></a></div>

Kita hanya perlu menambahkan kode class='draggable' pada kode HTML diatas, maka setelah ditambahkan kodenya akan menjadi seperti ini

<div class='draggable' id='rssicon'>
<a  href="http://demojquery.blogspot.com/feeds/posts/default"><img  alt="rss"  src="http://lh4.ggpht.com/_dfnTVAxeWMI/Sl9cKBBUxnI/AAAAAAAABfs/OKjk6Kjry5M/s800/rss.jpg"  /></a></div>

Perhatikan teks kode berwarna hijau itu adalah kode yang akan memanggil efek jQuery-nya.

Save

Terakhir save template anda dan coba anda lihat perubahannya. Selamat mencoba teman!

Sumber : http://deconstructioncode.blogspot.com - Drag Me Donk jQuery

Cute Toggle Slide dengan jQuery

noreply@blogger.com (Goomelar) — Sun, 06 Feb 2011 20:22:00 +0000

Cute Toggle Slide adalah tools yang berfungsi untuk membuka atau menutup sebuah widget atau element, sehingga jika sewaktu-waktu kita tidak ingin melihat widget tersebut kita bisa menyembunyikannya menggunakan Cute Toggle Slide ini.

Cute Toggle Slide ini memakai efek jQuery sehingga gerakan saat menutup maupun membukanya akan terlihat lembut. Contohnya bisa anda lihat dibawah ini, dimana jika teman-teman tekan tombol nya maka text yang ada dibawahnya akan tertutup dan jika di tekan sekali lagi maka text nya akan kembali terbuka.

Demo For Toggle Slide

Ini adalah demo untuk toogle slide!! Bisa teman-teman tutup dan buka dengan tombol diatas, jika teman-teman tertarik silahkan ikuti langkah-langkahnya dibawah ini dan jangan lupa tinggalkan komentar yaa...

Berikut saya jelaskan langkah-langkah untuk membuatnya.

jQuery

Langkah pertama letakan kode jQuery berikut ini setelah kode <head> atau sebelum </head>, dan jika teman-teman sudah pernah menambahkannya tidak perlu ditambahkan lagi.

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

Javascript

Langkah kedua silahkan teman-teman masukan kode Javascript dibawah ini tepat setelah kode tadi.

<script type='text/javascript'>
$(document).ready(function(){
    $(&quot;.btn-slide&quot;).click(function(){
        $(&quot;#panel&quot;).slideToggle(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;); return false;
    });        
});
</script>

Atau teman-teman bisa menyimpan terlebih dahulu kode Javascript tersebut di Google Code agar template tidak terlalu penuh dengan kode-kode yang bikin kepala pusing ini, tutorialnya bisa teman-teman pelajari disini Hosting Javascript di Google Code

CSS

Langkah selanjutnya teman-teman tambahkan kode CSS dibawah ini setelah kode ]]></b:skin>.

/*---- Cute Toggle Slide ----*/
.slide {margin:0 0 5px; font-family:arial; font-size:9px; text-align:center; font-color:#000}
.btn-slide{border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; margin:0 auto; background:#510b74; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; width:150px; height:auto; padding:5px 5px; display:block}

Teks yang berwarna merah adalah warna dari background tombol slide nya sementara teks yang berwarna hijau adalah kode untuk mengatur sudut radiusnya.

HTML

Selanjutnya letakan kode HTML berikut ini pada bagian yang diinginkan.

<p class='slide'><a class='btn-slide' href='' style='color:#fff'>Hit Me!!</a></p></b:if>
<div id='panel'>......</div>

Teks yang berwarna merah adalah teks yang akan muncul pada tombol slide nya, sedangkan yang berwarna hijau anda ganti dengan kode elemen atau widget yang ingin anda tambahkan tombol toggle slide ini.

Misalnya jika kita ingin meletakannya pada bagian sidebar secara keseluruhan, susunan kodenya akan menjadi seperti ini.

<div id='sidebar-wrapper'>
<p class='slide'><a class='btn-slide' href='' style='color:#fff'>Hit Me!!</a></p></b:if>
<div id='panel'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>

Sedangkan jika teman-teman ingin menggunakannya pada satu widget atau element saja maka susunan kodenya seperti ini.

<div id='sidebar-wrapper'>
 <b:section class='sidebar2' id='sidebar2' preferred='yes'>
<p class='slide'><a class='btn-slide' href='' style='color:#fff'>Hit Me!!</a></p></b:if>
<div id='panel'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</div> 
</b:section>
</div>

Teman-teman juga bisa mencoba menempatkannya pada elemen-elemen lain misalnya pada bagian postingan, kolom dibawah header atau pada bagian footer.

Save

Langkah terakhir save template anda dan lihat hasilnya. Selamat mencoba dan semoga berhasil..!!

Hosting Javascript di Google Code

noreply@blogger.com (Goomelar) — Mon, 31 Jan 2011 23:23:00 +0000

Penggunaan Javascript makin banyak dipakai untuk memaksimalkan sebuah blog ataupun website, setelah ditutupnya Geocity milik Yahoo! sebagai alternatif kita bisa menggunakan Google Code.

Google Code adalah tempat hosting khusus untuk menampung project seperti jQuery, mootools, Javascript dll bisa diibaratkan sebagai perpustakaan kode-kode. Google Code disediakan oleh Google yang bisa kita gunakan secara gratis.

Ketika terlalu banyak Javascript yang kita tempelkan dalam sebuah template blog seringkali kita merasa dipusingkan dengan keberadaan kode-kode tersebut karena biasanya kode Javascript terlihat rumit dan acak-acakan, nah untuk mempersingkat kode-kode tersebut kita bisa menyimpan kode-kode yang kita miliki di Google Code dan kemudian kita mengganti kode yang ada di template dengan alamat file kode tersebut, tahapan nya bisa teman-teman pelajari dibawah ini.

Langkah pertama daftar Google Code dengan menggunakan akun Gmail. Untuk masuk ke alamatnya silahkan klik sini Google Code lau pilih Create a new project untuk mulai membuat sebuah project dan untuk mempelajari bagaimana memulai menggunakannya silahkan teman-teman pilih Learn more about project hosting.

Mempersiapkan Kode

Langkah kedua siapkan terlebih dahulu kode-kode yang akan kita upload, misalnya kita mempunyai kode Javascript seperti ini:

<script type='text/javascript'>
//<![CDATA[
function extractPageName(b){var a=b.split("/");return(a.length<2)?b:a[a.length-2].toLowerCase()+a[a.length-1].toLowerCase()}function setActiveMenu(a,c){for(var b=0;b<a.length;b++){if(extractPageName(a[b].href)==c){if(a[b].parentNode.tagName!="DIV"){a[b].className="current";a[b].parentNode.className="current"}}}}function setPage(){hrefString=document.location.href?document.location.href:document.location;if(document.getElementById("nav")!=null){setActiveMenu(document.getElementById("nav").getElementsByTagName("a"),
extractPageName(hrefString))}};
//]]>
</script>

Kemudian teman-teman edit terlebih dahulu dengan menghilangkan kode yang saya beri tanda merah menggunakan Javascript editor, bagi yang belum punya silahkan download dulu disini. Selanjutnya save as kode tersebut dengan type file js dengan nama yang sesuai dengan fungsi kode tadi agar kita mudah mengenalinya, contohnya : currentnav.js.

Upload

Langkah ke tiga silahkan teman-teman upload file Javascript tadi dengan cara masuk ke akun Google Code, pada halaman utama teman-teman pilih Downloads > New Download dan silahkan isi kolom-kolom dalam form dengan nama project berikut deskripsinya lalu pada kolom File pilih file Javascript tadi selanjutnya anda klik tombol submit dibagian bawah.

Ganti Kode

Langkah selanjutnya untuk mempersingkat kode nya teman-teman tinggal ganti kode Javascript yang ada pada template dengan alamat dari file yang telah diupload, maka kodenya akan menjadi seperti ini:

<script src='http://goomelar.googlecode.com/files/currentnav.js' type='text/javascript'/>

Fungsi dari kode diatas adalah untuk memanggil dan mengaktifkan kode Javascript milik teman-teman yang ada di Google Code, yang berwarna merah adalah alamat dari file Javascript nya, terlihat lebih sederhana dan tidak terlalu menghabiskan banyak space pada template kita.

Save

Langkah terakhir tentunya save template anda dan silahkan anda coba apakah Javascript tadi berfungsi atau tidak.

Sebagai tambahan trik ini juga bisa anda pakai untuk menyimpan kode jQuery, Mootools dll. Akhir kata terimakasih dan selamat mencoba.

Compress CSS dengan CSS Drive Compressor

noreply@blogger.com (Goomelar) — Mon, 31 Jan 2011 04:57:00 +0000

Susunan dan kerapatan kode CSS pada template blog merupakan salah satu faktor yang mempengaruhi kecepatan loading halaman blog, kode CSS yang acak-acakan akan menyebabkan browser kesulitan me-loading halaman blog kita akibatnya proses untuk menampilkan halaman memerlukan waktu yang lama walaupun dengan koneksi internet yang normal.

Kode CSS yang tersusun rapih selain memudahkan browser meloading halaman juga agar blog kita lebih SEO Friendly dan mudah mengedit kode-kode tersebut serta nyaman dilihat tentunya. Namun hal ini sering yang kali kurang diperhatikan, cara merapihkan kode CSS bisa dengan cara manual yaitu dengan menghilangkan spasi-spasi pada kode tersebut di HTML editor sehingga menjadi lebih rapat, tetapi jika kode CSS nya terlalu banyak akan sedikit membingungkan juga bukan? salah-salah kita ga sengaja menghapus salah satu kode penting dalam CSS tersebut seperti kode penutup ' } ' atau kode separator ' ; ' yang malah berakibat tampilan blog kita menjadi acak-acakan. Nah untuk mensiasatinya kita bisa memakai CSS Compressor.

CSS Compressor merupakan salah satu layanan dari CSS Driver yang bisa anda nikmati secara gratis, Fungsi dari tools ini adalah untuk menghilangkan spasi dan komentar-komentar yang tidak perlu dan malah menambah berat template kita, ada tiga pilihan mode kompresi yaitu Light, Normal dan Super Compact seta tiga pilihan untuk handle comment's ada Strip any commnets, Don't strip all comment dan Strip comment at least chars long, terserah anda mau pilih mode yang mana tetapi saya sarankan untuk memakai mode Light dan Don't srip all comment untuk handle comment's nya yang belum terlalu mengerti dalam hal otak-atik CSS. Disini tersedia pula Advanced Mode untuk teman-teman yang ingin mode kompresi dengan opsi yang lebih spesifik.

Caranya cukup mudah anda tinggal masuk ke alamat ini CSS Drive Compressor, kemudian masuk ke edit HTML terus back-up dulu template anda dan copy-paste kode CSS dari template nya, kode CSS adalah deretan kode yang berada antara <b:skin> <![CDATA[ dan [[</b:skin>. Selanjutnya pilih mode kompresi sesuai dengan yang anda inginkan dan klik tombol Compress it! tunggu beberapa saat sampai proses kompresi nya selesai, jika sudah copy-paste lagi kode hasil kompresi tersebut pada tempatnya semula lalu save template anda. Kemudian rasakan perubahanya, kalau masih terasa lambat mungkin teman-teman perlu membenahi koneksi internetnya. Selamat mencoba ya!

Smoothscrool Back to Top dengan Javascript & jQuery

noreply@blogger.com (Goomelar) — Sun, 30 Jan 2011 19:20:00 +0000

Sudah tahu kan teman-teman apa itu back to top? kalau belum saya terangkan saja secara singkat, back to top adalah sebuah elemen atau widget yang mebantu kita dalam menavigasi halaman lebih spesifiknya adalah membantu kita untuk kembali ke posisi atas di halaman tersebut, contohnya bisa anda lihat pada footer bagian kanan dari blog saya ini, anda klik maka akan secara otomatis halaman akan scrolling ke atas.

Ada berbagai macam back to top yang biasa digunakan, ada yang memakai CSS ada juga yang menggunakan jQuery, nah untuk yang ini adalah back to top yang menggunakan Javascript dan jQuery yang sudah terbukti gerakannya lebih smooth dan berjalan mulus di berbagai browser, jadi tidak ada salahnya untuk dicoba supaya pengunjung lebih mudah menjelajahi blog kita. Ok kita langsung ke tutorialnya.

JQuery

Langkah pertama masukan kode jQuery ini setelah kode <head> atau sebelum kode </head>, untuk yang sudah ada, kode ini tidak perlu dimasukan lagi.

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

Javascript

Langkah kedua masukan kode Javascript setelah kode tadi, atau sebelum kode </head>

<script src='http://goomelar.googlecode.com/files/backtotop.js' type='text/javascript'/>

HTML

Selanjutnya anda tinggal memasukan kode HTML nya, biasanya ini di letakan disamping kanan pada bagian footer.

<a href='#' onclick='MGJS.goTop();return false;'><img src='URL Gambar'/></a>

Kode yang berwarna merah adalah alamat URL gambar untuk icon back to top nya, tapi jika anda ingin menggunakan text saja tanpa gambar, pakai kode ini

<a href='#' onclick='MGJS.goTop();return false;'>Top</a>

Kata "Top" bisa anda ganti dengan kata yang anda inginkan.

Save

Langkah terakhir save template anda.

Selamat mencoba...!

Membuat Efek Link Hover Animasi jQuery

noreply@blogger.com (Goomelar) — Sun, 30 Jan 2011 04:04:00 +0000

Untuk artikel pertama saya akan menjelaskan bagaiman membuat link hover animasi dengan sentuhan jQuery, contoh efek ini bisa teman-teman temukan pada beberapa link dan widget di blog ini, sudah tahu bagaimana efek ini bekerja?.

Kalau sudah mari kita lanjut ke tutorialnya, mohon diperhatikan dengan seksama agar trik ini berkerja sempurna.

Kode jQuery

Langkah pertama kita mulai dengan menambahkan kode jQuery, caranya masuk ke Rancangan/Design lalu pilih edit HTML dan masukan kode jQuery dibawah ini dibawah kode <head> atau diatas </head>.

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

teman-teman juga bisa pake kode ini.

<script src='http://jqueryui.com/latest/jquery-1.3.2.js' type='text/javascript'></script>

terserah teman-teman mau pilih yang mana.

Javascript

Langkah kedua masukan kode Javascript dibawah ini tepat setelah kode jQuery tadi.

<script type='text/javascript'>
$(document).ready(function() {
$('a').hover(function() { //mouse in
$(this).animate({ opacity: '0.3' } , 1000);
}, function() { //mouse out
$(this).animate({ opacity: '1' }, 1000);
});
});
</script>

Perhatikan kode yang saya beri warna merah, itu menunjukan bagian yang akan ditambahkan fungsi animasi ini. Teman-teman bisa menambahkan beberapa kode lagi setelah kode berwarna merah tadi dengan koma sebagai pemisah, contohnya seperti ini:

<script type='text/javascript'>
$(document).ready(function() {
    $('.sidebar a,.btn-slide, #head-inner, .menu li, .post-body a, .showpageArea a, .post h2 a, #nav ul li a, #bottom a, #upper-footer a').hover(function() { //mouse in
        $(this).animate({ opacity: '0.4'; }, 1000);
    }, function() { //mouse out
        $(this).animate({ opacity: '1' }, 1000);
    });
});
</script>

Perhatikan lagi kode yang berwarna merah, itu adalah beberapa bagian yang akan ditambahkan fungsi efek animasi ini, dan "koma" adalah tanda pemisahnya.

Untuk kode yang berwarna kuning, itu adalah angka yang mengatur tingkat opacity pada efek yang akan dibuat, anda bisa mengaturnya sesuai selera anda. Bila gak mau pusing-pusing kode-nya biarkan begitu saja.

Kode 'opacity' nya pun bisa anda ganti dengan 'color' untuk memberikan efek warna atau bisa juga diganti dengan 'padding', pokoknya sesuaikan dengan selera anda.

Save

Langkah terakhir, save template anda dan lihat hasilnya. Jika belum berhasil coba diperhatikan baik-baik langkah-langkahnya.

Sebagai tambahan diusahakan jangan menggunakan font 'Bold' pada bagian yang akan ditambahkan efek ini karena akan kurang sempurna pada browser Internet Explorer.

Semoga berhasil ya..!

Preface

noreply@blogger.com (Goomelar) — Sat, 29 Jan 2011 21:52:00 +0000

Syukur alhmdulilah, senang bercampur bahagia akhirnya desain untuk blog ini selesai juga. Walaupun masih banyak kekurangan disana-sini tetapi saya tetap bangga dengan blog ini karena template nya 100% saya buat dan saya desain sendiri. Jika terasa terlihat kurang professional saya rasa wajar saja karena saya baru mengenal dunia blogging dan mulai mebuat blog sejak 17 Desember 2010, dan saya belajar sendiri tanpa ada yang mengajari dan tanpa sekolah khusus.

Sebelumnya juga saya membuat sebuah blog khusus yang menyediakan template-template pilihan untuk para blogger yaitu Blogger Template, blog itu pun saya rancang sendiri tetapi untuk desainya saya terinspirasi oleh seorang blogger sukses Indonesia, dan mungkin tanpa saya sebutkan dengan hanya melihatnya teman-teman semua sudah pasti tahu dari siapa saya terinspirasi.

Ok..mungkin cukup sekian kata pengantar untuk blog saya ini dan semoga blog ini bisa sukses sesuai dengan harapan saya..amin!!, akhir kata saya ucapkan terimakasih dan selamat datang.