![]() |
Black white |
blog
Share Template
Model tampilan posting artikel pada web

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 |
Untuk sementeara cukup sekian dulu semoga bermanfaat bagi pembaca sekalian.
Sedikit Tentang Minimalis

Menampilakan kontent ke permukaan dan meminimalkan gangguan bagi pengguna

Satu titik Fokus, Membuang hal yang tidak penting

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

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
- 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,
- 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
- 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
- Login pada blogger, masuk ke blog, tataletak, edit html.
- 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> - ganti kode warna merah dengan kode yang telah di upload
- Simpan template
Ketiga adalah cara penggunaannya
- 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. - 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.
Langganan:
Postingan (Atom)