Share Template

Black white

Bagi yang berminat atau tertarik dengan template seperti di blog ini, silakan download saja di link di bawah. Untuk demo blognya dapat dilihat lansung di blog ini. Secara garis besar blog ini terbagi ke tiga bagian utama, yaitu header dengan menu bar tambahan yang dapat disesuaikan dengan keinginan admin. Kedua kolom posting dengan read more otomatis,  dengan font verdana ukuran 17 dan line-height 150%. Ketiga adalah sidebar satu kolom  dan botom bar tiga kolom. Memang begitu sederhana karena template ini berkonsep minimalis dengan point view di titk beratkan pada postingan.  Backgroun putih dan header warna hitam. Baik di buka pad browser Mozilla firefox 3.6 , resolusi 1024x 768

Model tampilan posting artikel pada web

Tampilan artikel merupakan hal yang utama karena biasanya tampilan ini akan muncul di halam utama, atau halaman pertama dari suatu web atau blog. Secara garis besar dapat dibagi menjadi dua macam model tampilan yaitu tampilan dengan artikel diringkas dan tidak diringkas. selain itu juga sering didapati suatu web yang hanya menampilkan dahtar judul artikel di halaman muka webnya. Semua akan terserah pada si web desainer yang membuatnya. Di bawah ini ada beberapa bentuk atau model tampilan dari artikel di halaman pertama suatu web, yang masing-masing jenis mempunyai karakteristik dan fungsi-sungsi yang khas.

Tampilan Standart

Tampilan ini adalah tampilan standart dari sebuah blog dan tampilan berupa kalimat yang tersusun panjang menjadi paragraf, tampilan standart ini sangat mudah di buat dan biasanya sudah disediakan oleh operator web yang kita ikuti, misal Blogger, Wordpress, Multiply dan lain-lain. Pada masing-masing web menyediakan tampilan posting artikel yang khas sesuai dengan webnya masing-masing. Di Blogger sendiri apabila kita menggunakan template yang sudah disediakan oleh blogger rata-rata model tampilan artikel adalah yang masih standart.

Read More, Jump Break

Adalah suatu model tampilan ringkasan-ringkasan artikel yang di posting pada web. Hal ini dilakukan dengan tujuan agar menghemat space dari suatu halaman web, dan agar pada halaman tersebut dapat diisi dengan banyak judul dari artikel untuk memudahkan pembaca dalam memilih artikel yang disukai.

Magazine Kolom

Pada model ini tampilan diserupakan dengan tampilan pada kolom-kolom majalah, sehingga enak untuk dilihat. biasanya pada model tampilan ini dilakukan peringkasan pada artikel yang di terbitkan dan ababila kita mau baca keseluruhan dari artikel tinggal mengeklik pada link untuk membaca selanjutnya. Biasanya model tampilan seperi ini banyak ditemukan pada template-template dengan jenis magazine template yang banyak bisa kita temukan diberbagai penyedia layanan template yang berbayar ataupun gratis.Pada umumnya artikel model ini di bagai kedalam beberapa kolom, bisa 2 kolom, 3 kolom atau lebih.



Daftar Menu

Model tampilan artikel ini dibuat menyerupai suatu daftar menu makanan yang banyak kita temui di berbagai restoran. Strukturnya adalah berupa teks artikel yang di ringkas dan terdapat gambar di samping text tersebut. Sehingga terlihat seperti daftar menu yang sebenarnya. biasanya banyak ditemukan pada web-web yang berhubungan dengan masakan, resep dan lain-lain. Contoh Tampilan seperti ini dapat dilihat di web menu resep makanan ini http://sauskecap.com/.

Fluid grid

blog.creativityden.com

Fluid grid adalah uatu model tampilan artikel yang di buat bekolom kotak-kotak dapat berupa persegi panjang atau persegi saja. Model tampilan seperti ini menyerupai tampilan kolo pada template-template magazine.Banyaknya jumlah artikel dapat kita sesuaikan dengan keinginan, Untuk mempelajari lebih lanjut dapat dibuaka alamat ini http://blog.creativityden.com/fluid-grid-using-jquery/, di web tersebut di bahas bagai mana cara membuat fluid grid dengan jQuery.Fluid grid ini banyak digunakan untuk mendukung tampilan pada magazine template.

Untuk sementeara cukup sekian dulu semoga bermanfaat bagi pembaca sekalian.

Sedikit Tentang Minimalis

Sebuah konsep minimalis, dalam dunia desain adalah sebuah konsep di mana berbagai hal diabaikan dan memfokuskan pada satu titik fokus yang akan diangkat temanya. Dalam beberapa hal konsep minimalist menjadi pilihan yang sangat diminati dan menjadi yang terlaris. kelebihan dari konsep minimalis ini adalah enak dilihat, dan 'To the point" tanpa embel-embel yang dianggap pemanis tapi justru malah menjadi sampah bagi mata. Di beberapa desain blog atau web telah banyak diadobsi konsep-konsep minimalist untuk menampilkan suatu informasi kepada para pembaca, menu yang di tawarkan konsep ini adalah fokus informasi dengan sedikit gangguan atau pemecah fokus. Untuk membuat suatu konsep desain web minimalist haruslah memenuhi beberapa konsep pada desain minimalis.

Menampilakan kontent ke permukaan dan meminimalkan gangguan bagi pengguna

Yang dimaksud disini adalah bagaimana kita menampilkan suatu informasi di halaman utama sebagai titik poinnya, dan meminimalkan gangguan bagi pengguna adalah suatu pemecah konsentrasi misalkan dalam suatu site kita tampilkan sebuah artikel dan di sampingnya kita tampilakan beberapa gambar dengan animasi maka fokus pembaca akan pecah pada artikel atau pada gambar animasi tersebut. oleh karena itu sangat begitu penting memprioritaskan fokus mana yang akan kita anggkat artikel atau gambar.

Satu titik Fokus, Membuang hal yang tidak penting

Begitu penting mengarahkan pembaca pada satu titik fokus dimana titik ini yang akan difokuskan untuk semua tampilan, banyak desain-desain yang membuat suatu desain dengan penuh gambar yang membuat pembaca akan sulit memahami maksud dari informasi tersebut atau cukup dengan satu gambar yang menjadi titik fokusnya dan memudahkan kita untuk memahami informasinya. Jadi sebuah informasi akan mudah diterima oleh pengguna hanya dengan menggunakan bahasa yang sederhana, bahasa yang sederhana inilah sebuaha konsep minimalis dengan satu titik fokus."just one important feature the focal point". Meminimalkan hal yang tidak begitu penting, dan hal-hal yang justru akan menjadi sampah mata,

Ruang putih = White space = Minimalist, Kesimbangan, Keselarasan, dan Kontras

Minimalis biasanya di identikkan dengan dengan space background putih dan dengan titik fokus yang kontras, misalkan background putih dengan gambar hitam. selain kontras juga di perhatikan keseimbangan dan keselarasan, sebab merupakan hal yang sangat penting bangaimana menyeimbangkan dan menyelaraskan suatu kontent agar di peroleh hal yang baik.


sumber : webdesainerdepot.com

Colorbox v1.3.6 untuk aplikasi web link

Pada blog ini saya pasang aplikasi colorbox untuk membuka web link. Untuk medapatkan plugin ini sangat mudah karena tinggal download saja di web pembuatnya Color Powered.com, terdapat 5 varian dari aplikasi ini, untuk proses instlasinya adalah sebagai berikut

Pertama upload file pendukung

1. Pertama adalah Download paket colorbox dari website pembuatnya ColorPoweed.com, setelah itu ektrak file, dan kita akan mendapatkan satu folder yang berisi sub folder colorbox, content dan example dari 1 sampai 5,
2. Subfolder color box terdapat 2 file js yang harus kita upload hosting kita. dan dapatkan alamtnya misal

   http://ifanadi.fileave.com/jquery.colorbox-min.js

3. Subfolder example1-example5 terdapat contoh tampilan dan terdapat satu file css yang dapat kita buka dengan notepad untuk di edit dan selanjutnya upload file tersebut. Pilih tampilan yang kita inginkan dari example1-5 pilih salah satu kemudian upload file cssnya. misal

   http://ifanadi.fileave.com/example4/colorbox.css

   saya gunakan example4 dan alamatnya adalah

Kedua Instalasi Pada blog

1. Login pada blogger, masuk ke blog, tataletak, edit html.
2. cari kode </head>, kopikan kode berikut tepat diatasnya
   <link href='http://ifanadi.fileave.com/example4/colorbox.css' media='screen' rel='stylesheet' type='text/css'/>
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   <script src=' http://ifanadi.fileave.com/jquery.colorbox-min.js ' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $("a[rel='example1']").colorbox(); $("a[rel='example2']").colorbox({transition:"fade"}); $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"}); $("a[rel='example4']").colorbox({slideshow:true});
   $(".single").colorbox({}, function(){ alert('Howdy, this is an example callback.'); });
   $(".colorbox").colorbox();
   $(".youtube").colorbox({iframe:true, width:650, height:550}); $(".iframe").colorbox({width:"80%", height:"80%", iframe:true}); $(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"}); //Example of preserving a JavaScript event for inline calls. $("#click").click(function(){
   $('#click').css({"background-color":"#f00", "color":"#000", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script>
3. ganti kode warna merah dengan kode yang telah di upload
4. Simpan template

Ketiga adalah cara penggunaannya

1. Untuk membuaka web link kita harus memasang kode class='iframe' contoh sebagai berikut:

   <a class=' iframe' href='http//alamatweb.com'>namalink</a>

   dapat di buka contoh di blog ini pada menubar contact us di atas.
2. untuk gambar kita tinggal menambahkan rel='example yang di pilih' misal

   <a href='http//alamtgambardiweb.com'rel='example1'>namagambar</a>

   dapat diklik gambar di posting ini sebagai contoh, pilihan tampilan untuk gambar adalah

elastis transisi: rel = "example1"

memudar transisi: rel = "example2"

no transition + fixed width and height (75% of screen size) : rel="example3"

slideshow : rel="example4"

Untuk pngembangannya kita dapat menerapkan pada beberapa aplikasi yang kita miliki misal pada sosial bookmarking, form contact dll, selanjutnya silahkan coba dan semoga berhasil.