Blogger Tune-Up ganti Template

Setelah bersemedi sekitar 2 minggu lebih lamanya tanpa membuat satu pun artikel, akhirnya Blogger Tune-Up kembali hadir dengan baju baru. Template yang sempat membuat kepala nyut-nyut selama hampir satu minggu ini akhirnya rampung dan launching untuk menggantikan template lama yang sudah semakin berat dengan berbagai plugin yang terpasang didalamnya. Tentunya dengan berbagai resiko yang sudah menghadang yang harus siap atau pun tidak siap akan menyita banyak waktu untuk membenahinya.

Template yang baru ini belum punya nama, tetapi jika melihat warna dasar yang digunakan jadi teringat beberapa saat yang lalu ketika belajar software animasi 3D Studio Max yang dominan dengan warna darkness. Apa ya kira-kira nama template yang pantas atau mencerminkan konsep template yang Blogger Tune-Up gunakan?
Setelah bermain-main dengan beberapa template, Blogger Tune-Up menemukan berbagai hal dan rasa baru, tapi dari sekian hal yang ditemui ada satu hal yang sangat mahal bagi seorang Web Desainer yaitu imajinasi konsep dasar. Hal tersebut akan mampu mencerminkan seorang Web Desainer, walaupun tidak ada tim khusus yang bertugas untuk menilai, tetapi hasil akhir inilah yang akan mampu menunjukan kepada dunia, seberapa hebat seorang web desainer. Bahasan mengenai Web Desainer akan dibahas dalam artikel terpisah.
Jika diperhatikan template baru ini masuk dalam kategori template minima atau template sederhana, tetapi jika sudah ditelusuri akan ditemukan beberapa hal yang sangat berbeda dari template sebelumnya. Apa saja yang digunakan oleh Blogger Tune-Up untuk membangun template sederhana ini?

1. Warna dasar gelap, ini sangat berbeda dengan template sebelumnya yang menggunakan warna dasar putih, hal inilah yang menjadi permasalahan selanjutnya bagi Blogger Tune-Up dalam membenahi artikel-artikel yang pernah dibuat. Karena beberapa artikel menggunakan huruf dengan warna gelap, proses pembenahan pun harus dilakukan satu persatu pada setiap artikel.
2. Framework jQuery, ini yang menjadi kekuatan Blogger Tune-Up. Mungkin bagi teman-teman yang sudah sempat menelusuri blog ini akan merasakan efek-efek gerakan lembut di beberapa bagian, semisal menu utama. Semua efek yang digunakan menggunakan framework jQuery. Hal ini Blogger Tune-Up pilih karena jQuery merupakan salah satu platform yang berdiri diatas JavaScript dengan kecepatan akses (latency) paling cepat dibanding framework yang lainnya, selain itu memiliki ukuran file yang lebih kecil.
3. Minim grafik atau gambar, hal ini dibuat untuk membuat kesan sederhana. Tampilan tidak terlalu rame dengan gambar-gambar yang kadang justru membuat tampilan blog menjadi kurang menarik untuk dilihat. Template ini lebih menitik beratkan pada perpaduan warna gelap dengan perbedaan-perbedaan warna yang tipis satu sama lain.
4. Selamat jalan iklan, dirimu ternyata kurang menguntungkan bagi Blogger Tune-Up dan hanya menjadi benalu yang terus menerus menggerogotiku. Keputusan yang dipertimbangkan sangat rumit ini akhirnya berbunyi "bahwa iklan pada Blogger Tune-Up dibuang". Tetapi tidak menutup kemungkinan dipasang lagi dikemudian hari jika hal itu dirasa perlu dengan syarat dan ketentuan yang telah ditetapkan dan dalam tempo yang tidak menentu. (Nyatut teks proklamasi)

Dalam proses pembuatan template ini, Blogger Tune-Up melibatkan beberapa software dan perangkat untuk membantu tahap demi tahap penyusunan kode-kode template, diantaranya:

1. HTML Notepad, software yang satu ini sungguh sangat membantu Blogger Tune-Up dalam merancang kode demi kode template. Software yang sedikit berbeda dengan Notepad standar ini sangat mumpuni karena mampu menulis dan menyimpan bahasa pemrograman HTML, XHTML, CSS, PHP, Perl, Java, VBScript, JavaScript, SQL, C#, Ruby, Python, XML syntax highlighting, can edit files: *.htm, *.html, *.css, *.js, *.php, *.php3, *.phtml, *.inc, *.pl, *.pm, *.cgi, *.xml, *.xsd, *.xsl, *.xslt, *.dtd, *.java, *.vbs, *.py, *.rb, *.rbw, *.cs, *.asp, *.aspx, *.jsp, *.sql, *.conf, *.txt, *.type, *.ini, *.sh. Selain itu ukurannya file softwarenya kecil yang hanya 436 Kilobyte dan tanpa perlu installasi pada sistem. Jika mau mencobanya, silahkan unduh disini.
2. Adobe Photoshop, siapa yang tidak kenal software Digital Imaging yang satu ini? Software ini digunakan untuk mendesain gambar Header dan beberapa bagian lainnya. Sedangkan untuk icon, Blogger Tune-Up mengambilnya dari Crystal Project milik Everaldo.
3. Adobe Dreamweaver, ada yang belum tahu software yang satu ini? Software ini digunakan untuk mendesain layout template mentah, mulai dari mendesain header, content, sidebar, footer, penempatan gambar, pencampuran warna dan lain sebagainya. Tetapi jangan harap bisa langsung dipakai template hasil desain pada Adobe Dreamweaver. Kita hanya dapat menggunakan desain CSS dan JavaScript-nya untuk digunakan pada blog kita, sedangkan kode XHTML dibuat pada HTML Notepad.
4. Laptop, mouse, keyboard, rokok, kopi dan listrik. Perlu dicantumkan link-nya?
5. Sedangkan efek yang digunakan Blogger Tune-Up antara lain; Kwick Menu, Sliding Panel, Facebox, Slide Accordion dan ScrollTop (tunggu artikelnya). Sebelumnya Blogger Tune-Up mencoba menggunakan Page Navigation milik Abu Farhan tetapi setelah dicoba pada template, ditemukan beberapa kejanggalan yang belum ditemukan perbaikannya.

Tetapi bukan berarti template ini sudah sempurna, justru masih banyak kekurangan yang masih menjadi Pekerjaan Rumah yang harus diselesaikan, diantaranya:

• Daftar Isi, ini masih menjadi permasalahan karena ternyata daftar artikel yang ditampilkan pada daftar isi tidak mampu sampai ratusan dan juga conditional expression-nya belum ditemukan yang cocok alias masih mumet. Ada saran?
• Search Site, ini juga masih menjadi masalah, karena hasil pencarian tidak bisa berupa link judul artikel saja, tetapi termasuk isi artikelnya. Mau ikut mengkoreksi?
• HTML Validation dan CSS Validation masih banyak terdapat kesalahan (error). Ada ide?
• Main Menu yang masih bingung isinya. Apa ya kira-kira?

Demikian sekilas tentang Blogger Tune-Up dengan template baru. Jika ada ide, saran, kritik, masukan, hujatan, cacian, makian, silahkan tinggalkan pada kotak komentar. Sedangkan untuk donasi, silahkan ditunggu dengan senang hati melalui PayPal.

Read More

Pratinjau Gambar dengan jQuery

Framework jQuery akhir-akhir ini menjadi perhatian Blogger Tune-Up. Kesederhanaan dan mudahnya penerapan pada Blogger menjadi nilai plus tersendiri bagi penulis. Teka-tekinya membuat penasaran untuk menelusuri lebih jauh tentang framework jQuery. Blogger Tune-Up pernah membahas beberapa artikel tentang jQuery walaupun lupa tidak membuatkannya kategori jQuery. Dalam artikel kali ini kita akan menerapkan efek Pratinjau Gambar (Image Preview) dengan jQuery pada artikel blog. Silahkan lihat demonya pada blog All In One Template dan arahkan mouse pada salah satu gambar pada deretan artikel. Sepintas efek ini mirip dengan artikel yang pernah dibahas yaitu "Tampilkan Gambar dengan Efek Membesar". Mungkin beberapa teman sudah mencoba efek tersebut, kelemahan dari efek tersebut adalah kode yang rumit yang harus dimasukan didalam artikel dan hampir serba manual. Dengan jQuery semuanya menjadi lebih mudah walaupun belum 100% otomatis.

Download Pratinjau Gambar jQuery

Integrasi Image Preview (Pratinjau Gambar) dengan jQuery

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

]]></skin>

Langkah 5
Masukan (Copy Paste) kode CSS dibawah ini diatas kode pada langkah 4:

#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

Langkah 6
Cari kode dibawah ini:

</head>

Langkah 7
Masukan (Copy Paste) kode dibawah ini diatas kode pada langkah 6:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type='text/javascript'>
this.imagePreview = function(){ 
xOffset = 10;
yOffset = 20;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = ""; 
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");        
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");      
},
function(){
this.title = this.t; 
$("#preview").remove();
}); 
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});   
};
$(document).ready(function(){
imagePreview();
});
</script>

Langkah 8
Simpan template

Menyisipkan kode Pratinjau Gambar (Image Preview)

Langkah A
Buatlah sebuah artikel dan upload gambar pada artikel tersebut
Langkah B
Masuk/klik ke mode "Edit HTML" pada editor artikel
Langkah C
Lihat kode seperti contoh dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/s1600-h/full_preview.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 387px; height: 400px;" src="http://1.bp.blogspot.com/s400/full_preview.jpg" border="0" />
</a>

Langkah D
Buang kode "-h" (tanpa tanda kutip) pada kode "s1600-h" (tanpa tanda kutip)
Langkah E
Tambahkan/sisipkan kode dibawah ini pada kode langkah C:

class="preview"

Sehingga menjadi seperti dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/s1600/full_preview.jpg" class="preview">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 387px; height: 400px;" src="http://1.bp.blogspot.com/s400/full_preview.jpg" border="0" />
</a>

Langkah F
Jika Pratinjau Gambar ingin di tambahkan judul gambar, sisipkan kode dibawah ini:

title="All In One Template"

Sehingga kode menjadi seperti dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/s1600/full_preview.jpg" class="preview" title="All In One Template">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 387px; height: 400px;" src="http://1.bp.blogspot.com/s400/full_preview.jpg" border="0" />
</a>

Langkah H
Terbitkan artikel...

Demo Pratinjau Gambar

Keterangan:

• Ubah All In One Template pada title (Langkah F) sesuai dengan keterangan judul gambar

Selamat mencoba dan semoga berhasil. Happy blogging... :)

Read More

Mempercantik Daftar Isi dengan CSS

Tips-n-trik kali ini dibuat untuk melengkapi artikel sebelumnya yaitu "Membuat Daftar Judul Artikel tanpa Isi" dan "Memanajemen Arsip Blog". Sehingga tampilan daftar isi akan semakin menarik jika kita sudah menerapkan kedua artikel tersebut dan mempercantiknya dengan kode CSS yang akan dibahas dibawah ini. Pemanis ini akan berlaku disemua arsip, jika pengunjung membuka arsip dari kategori atau dari arsip secara keseluruhan. Coba silahkan klik disini untuk melihat hasilnya modifikasi arsip blog.

Percantik Daftar Isi Dengan CSS

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
cari kode dibawah ini:

]]></skin>

Langkah 4
Masukan kode dibawah ini diatas kode pada langkah 3:

.daftar_isi{
padding: 5px 0pt 5px 5px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-bottom: 2px; background: none repeat scroll 0% 0% #eae9e9;
color: #406a0e;
}

Langkah 5
Cari kode dibawah ini:

<data:post.title/>

Secara keseluruhan kode yang dicari seperti dibawah ini (ini kode hasil modifikasi pada artikel "Membuat Daftar Judul Artikel tanpa Isi"):

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Langkah 6
Tambahkan kode dibawah ini:

<div class="daftar_isi"><data:post.title/></div>

Sehinga secara keseluruhan kode menjadi seperti dibawah ini:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div class="daftar_isi"><data:post.title/></div>
</a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Langkah 7
Simpan template dan preview

Keterangan:

• Jika blogger anda belum menerapkan artikel "Membuat Daftar Judul Artikel tanpa Isi" maka hal ini tidak akan berjalan dan atau bahkan membuat tampilan layout blog anda menjadi kacau.
• Silahkan anda atur-atur kode CSS yang ada pada langkah 4

Selamat mencoba dan semoga berhasil... happy Blogging...:)

Read More