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

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.

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
<!-- Slide 1 Code Start -->
<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

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

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

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>

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

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