Perpustakaan jQuery pada Blogger

Sebenarnya artikel tentang perpustakaan jQuery pernah dibahas lengkap pada beberapa artikel Blogger Tune-Up, namun entah karena arsipnya sudah lama atau karena malas menjelajah Blogger Tune-Up sehingga masih ditemukan beberapa kesalahan-kesalahan dan kekurang telitian para blogger dalam menggunakan perpustakaan jQuery. Perpustakaan jQuery di sebut juga jQuery Library, jQuery Framework atau sering di sebut jQuery saja.

Apa sebenarnya jQuery?

jQuery adalah sebuah perpustakaan JavaScript lintas-browser (cross-browser JavaScript library) yang dirancang untuk menyederhanakan client-side scripting dari HTML. jQuery Versi 1.0 dirilis pada bulan Januari 2006 di BarCamp NYC oleh John Resig. Perpustakaan jQuery telah digunakan oleh lebih dari 43% dari 10.000 website yang paling sering dikunjungi, jQuery adalah pustaka JavaScript yang paling populer dan paling banyak digunakan saat ini.
jQuery dapat digunakan secara bebas karena merupakan bagian dari perangkat lunak sumber terbuka (open source software), memiliki dual-lisensi yaitu di bawah MIT License dan GNU General Public License. Sintak-sintak jQuery Versi 2 dirancang lebih mudah untuk menangani navigasi dokumen, memilih elemen DOM, membuat animasi, menangani event, dan pengembangan aplikasi Ajax. jQuery juga menyediakan kemampuan bagi pengembang untuk membuat plugin di atas perpustakaan JavaScript. Dengan disediakannya fasilitas ini, pengembang dapat menciptakan abstraksi interaksi untuk tingkat rendah (low-level interaction) dan animasi, efek canggih dan tingkat tinggi (high-level), tema-widget. Hal ini memberikan kontribusi untuk penciptaan halaman web yang hebat dan dinamis.
Microsoft dan Nokia telah mengumumkan rencananya untuk membundel jQuery di dalam platform mereka, Microsoft mengadopsinya lebih awal dalam bahasa pemrograman Visual Studio untuk digunakan dalam kerangka kerja Microsoft AJAX ASP.NET dan ASP.NET MVC Framework sementara Nokia telah mengintegrasikannya ke dalam platform pengembangan widget Web Run -Time mereka. jQuery juga telah digunakan pada MediaWiki sejak versi 1.16.

Artikel Perpustakaan jQuery

Blogger Tune-Up pernah membahas jQuery ini dalam beberapa artikel terdahulu. Dibawah ini arsip artikel yang berhubungan dengan Perpustakaan jQuery dan lebih baik anda membaca artikel-artikel dibawah ini dengan seksama supaya lebih mudah untuk memahami jQuery.

• Mempercepat Pemuatan Perpustakaan JavaScript
• Memahami dan Mengatasi Konflik Script jQuery
• Manajemen Script jQuery
• Percepat Script jQuery

Pemasangan Perpustakaan jQuery pada Blogger

Dibawah ini akan dijelaskan kembali beberapa cara untuk melengkapi Blogger dengan perpustakaan jQuery dan silahkan gunakan salah satu cara yang dianggap paling mudah untuk diterapkan.

Cara I - Memanfaatkan Perpustakaan jQuery pada CDN

Karena kehebatan jQuery yang mampu mengubah suatu website menjadi lebih dinamis dan canggih ini membuat beberapa perusahaan terkenal rela menjadi CDN Perpustakaan jQuery. CDN adalah kepanjangan dari content delivery network atau content distribution network yaitu sebuah sistem komputer yang memiliki salinan data yang sama dengan aslinya. Data salinan ini ditempatkan di berbagai titik tempat pada suatu jaringan untuk memaksimalkan bandwidth dalam mengakses keseluruhan data jaringan klien. Dibawah ini beberapa perustakaan jQuery pada CDN yang dapat kita gunakan untuk kita gunakan pada blog kita:

CDN - Google Ajax API
Perpustakaan jQuery dibawah ini terdapat pada server Google dan sangat direkomendasikan menggunakan CDN ini.

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

CDN - Microsoft
Perpustakaan jQuery dibawah ini terdapat pada server Microsoft, CDN ini dapat digunakan sebagai alternatif.

<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js' type='text/javascript'/>

CDN - jQuery
Perpustakaan jQuery dibawah ini terdapat pada server jQuery itu sendiri, CDN ini sangat tidak direkomendasikan.

<script src='http://code.jquery.com/jquery-1.5.2.min.js.' type='text/javascript'/>

Cara II - Memanfaatkan Google API Load

Selain menggunakan Cara I, dibawah ini merupakan cara lain yang merupakan teknik cara cepat untuk memanggil perpustakaan jQuery. Cara ini dibagi menjadi 2 bagian yaitu tanpa menggunakan API Key dan yang menggunakan API key.

(1) Tanpa API Key
Cara dibawah ini tanpa menggunakan API Key:

<script src='https://www.google.com/jsapi' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
google.load("jquery", "1.5.2");
//]]></script>

(2) Menggunakan API Key

Cara dibawah ini menggunakan API Key, dan cara ini direkomendasikan untuk digunakan. Karena API Key merukapan identitas unik dari suatu website sehingga Google API akan dengan mudah untuk mengidentifikasi perpustakaan apa saja yang digunakan dan akan memilihkan cara tercepat untuk mengidentifikasi perpustakaan-perpustakaan yang digunakan. Untuk mendapatkan API Key blog anda silahkan klik link ini. Setelah mendapatkan API Key, ganti XXXX pada script dibawah ini.

<script src='https://www.google.com/jsapi?key=XXXX' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
google.load("jquery", "1.5.2");
//]]></script>

Cara III - Memanfaatkan Google API AutoLoad

Cara III ini diklaim sebagai cara yang paling cepat untuk memanggil perpustakaan jQuery. Cara III ini dibagi lagi menjadi 3 teknik, silahkan pilih salah satunya saja.

(1) Tanpa API Key
Cara dibawah ini tanpa menggunakan API Key namun lebih cepat dibanding cara II (1)

<script src="http://www.google.com/jsapi?autoload={"modules" : [{"name" : "jquery","version" : "1.5.2"}]}" type="text/javascript"/>

(2) Menggunakan API Key

Cara dibawah ini mengguankan API Key dan pemanggilan perpustakaan jQuery lebih cepat dari cara diatas. Klik link ini untuk mendapatkan API Key blog anda dan ubah XXXX sesuai dengan API Key yang anda dapatkan sesuai dengan blog yang anda daftarkan.

<script src="http://www.google.com/jsapi?autoload={"modules" : [{"name" : "jquery","version" : "1.5.2"}]}&amp;key=XXXX" type="text/javascript"/>

(3) Menggunakan URL Encoder

Cara yang terakhir ini adalah cara yang paling rumit namun merupakan cara yang paling cepat untuk memanggil perpustakaan jQuery dibanding semua cara diatas.
Kode dibawah ini adalah kode asli yang digunakan untuk memanggil perpustakaan jQuery (perhatikan Cara III - 2 diatas)

{"modules" : [{"name" : "jquery","version" : "1.5.2"}]}

Kemudian kode tersebut di Encode untuk memudahkan dan mempercepat browser dalam membaca dan memanggil perpustakaan jQuery. Gunakan URL DEncoder buatan Blogger Tune-Up untuk meng-encode kode diatas, sehingga akan dihasilkan kode hasil encode seperti dibawah ini:

%7B%22modules%22%20%3A%20%5B%7B%22name%22%20%3A%20%22jquery%22%2C%22version%22%20%3A%20%221.5.2%22%7D%5D%7D

Setelah dilakukan encode pada kode diatas, gabungkan kode sehingga menjadi seperti dibawah ini:

<script src="https://www.google.com/jsapi?autoload=%7B%22modules%22%20%3A%20%5B%7B%22name%22%20%3A%20%22jquery%22%2C%22version%22%20%3A%20%221.5.2%22%7D%5D%7D&amp;key=XXXX"/>

Klik link ini untuk mendapatkan API Key yang sesuai dengan blog anda dan ubah XXXX pada kode diatas.

Ketentuan Memasang Perpustakaan jQuery

Dibawah ini beberapa ketentuan yang harus diperhatikan oleh para blogger agar kesalahan-kesalahan menggunakan jQuery tidak menjadi beban blog anda.

• Pilihlah salah satu cara pemasangan perpustakaan jQuery pada blogger
• Sebaiknya perpustakaan jQuery diletakan pada template blog diantara tag <head> dan tag </body>
• Setiap blog atau web sebaiknya hanya memasang satu perpustakaan jQuery, jadi jika kita pernah memasang perpustakan jQuery maka tidak perlu lagi memasang perpustakaan jQuery lagi walau dalam suatu tips trik di sertakan perpustakaan jQuery, sebaiknya anda membuang perpustakaan jQuery tersebut tanpa mengikut sertakannya jika anda pernah memasang sebelumnya.
• Hindarilah memasang perpustakaan jQuery berulang-ulang karena hal tersebut akan membuat ukuran blog menjadi lebih besar dan load halaman menjadi lebih lambat.

Google API Key

URL DEncoder

Selamat mencoba dan semoga berhasil. Happy Blogging :) Write Less, Do More

Read More

Animasi CD/DVD Promosi dengan CSS 3

CSS atau Cascading Style Sheet telah mengalami perkembangan yang semakin hari semakin menakjubkan. Animasi yang sebelumnya di dominasi oleh file-file flash sekarang sudah mulai ditinggalkan dan para profesional desainer web beralih pada penggunaan jQuery dan CSS 3 sebagai animasi pada tampilan website yang dibuatnya. Selain ukuran file lebih kecil sehingga waktu load halaman lebih cepat juga proses penulisan script yang semakin hari semakin sederhana namun tanpa berpengaruh pada hasil akhir yang tetap menakjubkan. Bagi para pemula yang baru saja berkecimpung di dunia web desain mungkin agak sulit untuk membedakan mana animasi yang dihasilkan dari flash dan mana animasi yang dihasilkan dari jQuery atau CSS 3.

Pada artikel kali ini Blogger Tune-Up tidak akan menyuguhkan animasi menggunakan jQuery tetapi kita akan mengeksplorasi kekuatan CSS 3 dalam menciptakan dan menampilkan animasi pada website. Walaupun hanya menggunakan CSS 3 namun hasilnya sangat menawan dan menarik perhatian sehingga tampilan website akan tampak lebih dinamis dan hidup. Bagaimana animasi CD/DVD promosi ini bekerja? Ketika kita mengarahkan pointer mouse pada cover CD/DVD maka cover akan bergerak kesamping agak miring beberapa derajat. Sedangkan kepingan cakram CD/DVD akan berputar keluar dari cover-nya. Ketika kita menggeser pointer mouse keluar dari cover CD/DVD maka cover akan kembali pada posisi semula. Sedangkan kepingan cakram CD/DVD akan berputar dan masuk kedalam cover-nya.
Penasaran ingin mencoba? Lihat demonya pada link dibawah ini dan rasakan kekuatan animasi yang dihasilkan walaupun hanya menggunakan CSS 3.

Demo Animasi CD/DVD Promosi

Integrasi kode CSS 3 pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

div.dvd-promo {
width : 940px;
margin : 0 auto 3em auto;
}
div.dvd-promo:after {
content : "\0020";
display : block;
height : 0;
clear : both;
visibility : hidden;
overflow : hidden;
}
div#dvd-promo-wadah {
position : relative;
float : left;
width : 240px;
margin-right : 60px;
padding : 320px 0 1.5em 0;
}
div.dvd-promo img[alt*="Cover"] {
z-index : 2;
position: absolute;
top : 0;
left : 0;
}
div.dvd-promo img[alt*="Disc"] {
z-index : 1;
position: absolute;
top : 70px;
left : 85px;
}
div.dvd-promo a:hover img[alt*="Cover"] {
-moz-transform : rotate(-1deg);
-moz-transform-origin : 50% 100%;
-o-transform : rotate(-1deg);
-o-transform-origin : 50% 100%;
-webkit-transform : rotate(-1deg);
-webkit-transform-origin : 50% 100%;
transform : rotate(-1deg);
transform-origin : 50% 100%;
}
div.dvd-promo a:hover img[alt*="Disc"] {
-moz-transform : translate(40px,0) rotate(300deg);
-o-transform : translate(40px,0) rotate(300deg);
-webkit-transform : translate(40px,0) rotate(300deg);
transform : translate(40px,0) rotate(300deg);
}
div.dvd-promo img[alt*="Cover"], div.dvd-promo img[alt*="Disc"] {
-moz-transition : all .5s ease-in-out;
-o-transition : all .5s ease-in-out;
-webkit-transition : all .5s ease-in-out;
transition : all .5s ease-in-out;
}

Langkah 5
Simpan template dan lanjutkan...

Memasang Animasi CD/DVD Promosi pada Blogger

Langkah 6
Masuk ke "Rancangan - Elemen Laman"
Langkah 7
Tambahkan sebuah widget dengan jenis HTML/JavaScript
Langkah 8
Masukkan (copy paste) kode dibawah ini pada bagian konten pada widget

<div class="dvd-promo">
<!-- awal bagian -->
<div id="dvd-promo-wadah">
<a href="http://modification-blog.blogspot.com">
<img src="http://hosinganda.com/dvd_cover_promo.png" alt="DVD Cover">
<img src="http://hosinganda.com/dvd_disc_promo.png" alt="DVD Disc">
</a>
</div>
<!-- akhir bagian -->
</div>

Langkah 9
Simpan widget dan preview blog anda

Unduh Animasi CD/DVD Promosi

Keterangan:

• Unduh seluruh source code Animasi CD/DVD Promosi dengan CSS 3 pada link diatas
• Ubahlah URL http://modification-blog.blogspot.com sesuai dengan alamat yang anda maksud
• Buatlah sendiri gambar yang anda perlukan dan upload-lah pada situs file hosting anda kemudian gantilah http://hosinganda.com/dvd_cover_promo.png (lihat langkah 8) sesuai dengan alamat URL pada file hosting
• Perhatingkan kode yang diblok pada langkah 8, Cover dan Disc pada tag alt harus selalu tersedia, karena tag ini terkait dengan kode CSS yang ada pada langkah 4 dan digunakan untuk memberikan animasi pada DVD Cover dan DVD Disc
• Jika anda ingin menambahkan jumlah CD/DVD Cover Disc lainnya silahkan tambahkan kode yang diapit tag <!-- awal bagian --> sampai dengan tag <!-- akhir bagian --> namun semua kode penambahan ini harus berada didalam tag <div class="dvd-promo"> dan </div> paling akhir

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Read More

Mohon Bantuan - Akun Facebook di Palsukan

Entah apa maksud orang ini sehingga melakukan pemalsuan akun. Mungkin karena saya punya salah dimasa lalu atau mungkin bentuk sentimen pribadi saja, yang jelas orang tersebut telah melakukan tidakan yang tidak menyenangkan kepada saya. Untuk itu kepada teman-teman blogger, mohon bantuannya untuk memblok dan melaporkan akun palsu facebook Dede Hendriono.

Beberapa alasan kuat bahwa akun tersebut duplikat dan memalsukan akun saya yang asli adalah sebagai berikut:

• Foto profile yang digunakan merupakan foto lama
• Foto profile yang digunakan merupakan foto asli dan saya tidak pernah mengunggah foto yang asli pada akun apapun
• Akun tersebut memiliki identitas yang sama dengan keadaan saya sekarang
• Pada saat artikel ini dibuat akun tersebut baru selesai dibuat

Untuk itu saya berharap bantuan teman-teman blogger untuk melaporkan akun ini bahwa akun tersebut adalah palsu dan merupakan tindakan tidak menyenangkan. Berikut dibawah ini cara untuk melaporkan bahwa akun tersebut palsu atau sahabat blogger bisa menggunakan cara yang lain yang dirasa lebih enak untuk melaporkan.

Ini link akun asli Dede Hendriono :

Akun Asli Dede Hendriono

Ini link akun palsu Dede Hendriono :

Akun Palsu Dede Hendriono

Atas segala peduli, partisipasi, apresiasi dan bantuannya saya mengucapkan banyak terima kasih.

Banjarsari, 16 April 2011

Dede Hendriono

Read More

jQuery Image Hover Fade Effect

Bismillah. Tips trik jQuery kali ini digunakan untuk memberikan sentuhan lembut memudar pada gambar blog. Ketika halaman blog dipanggil (load) maka semua gambar pada blog akan tampak memudar (fade). Dan ketika pointer mouse berada diatas (hover) gambar pada blog maka gambar akan ditampilkan dengan jelas namun ketika pointer mouse meninggalkan (mouse out) gambar maka gambar akan kembali memudar. Demikian penjelasan pintas tentang jQuery Image Hover Fade Effect...

Demo jQuery Image Hover Fade Effect

Integrasi jQuery Image Hover Fade Effect pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Langkah 5
Simpan template dan preview blog anda, kemudian perhatikan gambar-gambar memudar yang ada pada blog

Memahami Script Code jQuery Image Hover Fade Effect

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>

Kode diatas untuk memanggil framework jQuery, jika anda pernah memasangnya, maka kode ini tidak perlu diikutsertakan.

<script type='text/javascript'>

Script identitas bahwa selanjutnya dikenali sebagai JavaScript

$(document).ready(function() {

Fungsi script jQuery telah siap di-load

$('img').fadeTo('slow', 0.5);

Efek fade sebagai efek default (opacity 0.5) pada semua gambar dengan tag img pada seluruh halaman yang di-load

$('img').hover(function() {

Ketika mouse pointer berada di atas gambar (hover) maka...

$(this).fadeTo('slow', 1.0);

Gambar dengan tag img akan diperjelas hingga 1.0

}, function() {

Jika mouse pointer meninggalkan gambar maka...

$(this).fadeTo('slow', 0.5);

Gambar dengan tag img akan memudar (opacity 0.5) lagi.

});
});

Fungsi script jQuery dihentikan

</script>

Fungsi JavaScript di tutup

Unduh Script Code jQuery Image Hover Fade Effect

Demikianlah integrasi jQuery Image Hover Fade Effect pada blogger template. Selamat mencoba dan semoga berhasil. Happy Blogging :)

Read More

5 Pratinjau Dinamis Baru dari Blogger

Hebat!!! Itulah komentar yang terucap spontan saat melihat 5 tampilan dinamis yang dipersembahkan oleh Blogger. Tepat tanggal 31 Maret 2011 Blogger memperkenalkan prantinjau baru untuk template Blogger yang sedang direncanakan, dengan harapan para pengguna Blogger akan terbiasa dengan tampilan yang masih dalam pengembangan tersebut. 5 pratinjau tampilan Blogger ini menggunakan teknologi web terbaru termasuk didalamnya Ajax, HTML 5, dan CSS 3.

Sekarang Blogger mengejutkan penggunanya dengan pratinjau dan fasilitas baru diantaranya:

• Infinite scrolling; fasilitas ini memberikan kemudahan kepada para pemilik blog dan para pengunjung dengan tampilan satu halaman yang tersusun rapi disertai efek yang lembut, sehingga kita tidak perlu memanggil (load) halaman baru ketika ingin membaca suatu artikel. Cukup klik halaman yang akan dibaca maka slide halaman akan segera muncul dengan cepat tanpa reload.
• Layout baru; penampilan yang sangat menarik dan berbeda dari sebelumnya, lebih terkesan futuristik dan canggih sehingga cocok untuk berbagai tipe blog.
• Kecepatan; menampilkan gambar hanya ketika kita melihatnya, tanpa ditampilkan semua dihalaman muka. Teknik jitu mengakali bandwitdh yang rendah, sehingga bagi blogger yang memiliki koneksi internet lambat hal ini sangat menguntungkan. Gambar tidak semuanya didownload dari server pada saat awal membuka halaman dan gambar ditampilkan hanya ketika browser diarahkan ke gambar tersebut. Brilian!!!
• Interakitivitas; banyak cara sekarang untuk bisa merasakan dan melibatkan konten blog. Lebih mudah, lebih cepat, lebih menarik, lebih canggih dan semua kemudahan ini didapatkan dengan gratis.
• Keyboard Shortcut; ini memudahkan para pengunjung dalam memperlakukan halaman yang sedang dibaca. Kombinasi tombol yang digunakan adalah; J untuk posting lama, K untuk posting baru, dan Escape untuk kembali ke halaman utama.

Video Blogger Dynamics View

Silahkan klik pada salah satu link ini untuk menikmati pratinjau baru dan rasakan kecanggihannya baik dari sisi kecepatan, tampilan dan efek-efek yang dihasilkan dari penampilan blogger baru. Inilah hasil dari pratinjau dinamis baru Blogger :

Pratinjau Dinamis Flipcard

Pratinjau Dinamis Mosaic

Pratinjau Dinamis Sidebar

Pratinjau Dinamis Snapshot

Pratinjau Dinamis Timeslide

Pratinjau Dinamis Blogger Jenis Flipcard

Cara memperlakukan halaman flipcard:

• Arahkan mouse salah satu kartu untuk melihat judul posting dan jumlah komentar. Ketika kita menggulung layar kebawah, posting tambahan akan terus di-load.
• Klik kartu untuk melihat posting di tampilan penuh. Anda dapat menggunakan navigasi pada halaman posting menggunakan J (posting lama) dan K (posting baru) atau tombol panah. Tombol Escape atau klik Back to all posts untuk kembali ke halaman utama Flipcard.
• Pada kiri atas, klik untuk mengurutkannya menurut Tanggal, Penulis dan Kategori.

Pratinjau Dinamis Blogger Jenis Mosaic

Cara memperlakukan halaman mosaic:

• Klik pada salah satu ubin maka halaman akan ditampulkan penuh, dan klik halaman posting maka halaman akan kembali ke posisi semula.
• Posisi ubin ditentukan secara acak setiap kali halaman blog dipanggil, tetapi tampilan akan muncul secara kronologis dari kiri atas ke kanan bawah.
• Setelah posting ditampilan secara penuh, kita dapat berpindah halaman dengan menggunakan tombol panah kiri dan kanan serta J dan K.
• Tampilan ini dioptimalkan untuk tampilan tablet, dan mendukung rotasi layar.

Pratinjau Dinamis Blogger Jenis Sidebar

Cara memperlakukan halaman sidebar:

• Ini merupakan tampilan halaman yang dioptimalkan untuk penelusuran dan membaca cepat.
• Sidebar kiri adalah daftar posting yang disusun secara kronologis, dengan jumlah komentar dan tampilan thumbnail untuk setiap posting.
• Tombol J dan tombol K atau panah digunakan sebagai menavigasi perpindahan halaman, dan komentar dapat ditampilkan pada halaman yang sama dengan mengklik link Tampilkan/Show.

Pratinjau Dinamis Blogger Jenis Snapshot

Cara memperlakukan halaman snapshot:

• Tampilan ini hanya akan menampilkan tulisan yang memiliki gambar.
• Mengklik salah satu foto yang mana saja akan menampilkan halaman posting secara penuh, dengan link navigasi digunakan untuk berpindah posting baru dan lama
• Ketika mengarahkan mouse diatas foto apapun maka akan ditampilkan potongan posting

Pratinjau Dinamis Blogger Jenis Timeslide

Cara memperlakukan halaman timeslide:

• Pandangan ini membagi konten blog ke dalam tiga wilayah yang berbeda:
• Kolom Kiri : Pembesaran gambar dengan potongan artikel, judul, dan snipppet ditampilkan dalam urutan kronologis
• Kolom Tengah: Hanya menampilkan judul posting dan sedikit potongan artikel
• Kolom Kanan : Hanya menampilkan judul posting
• Saat mencari posting pada tampilan timeslide ini, kata kunci yang terkandung dalam artikel hasilnya akan disorot (highlight).

Untuk menikmati prantinjau dinamis pada blog anda sendiri cukup dengan menambahkan "/view" pada akhir url blog anda^[1], misal http://tutsadobe.blogspot.com/view. Menurut informasi dari Blogger Help^[2] bahwa pratinjau dinamis ini dapat bekerja sempurna dengan mengikuti beberapa hal seperti dibawah ini:

• Blog anda tersedia sebagai blog public bukan blog private. Siapapun pengunjungnya dapat melihat blog anda tanpa harus sign in.
• Fasilitas feed diaktifkan secara keseluruhan pada blog anda. Silahkan periksa pada Pengaturan - Feed Situs dan pastikan terpilih Penuh pada opsi Umpan Entri Blog, sedangkan tampilan penuh pad artikel atau terpenggal (Jump Break) tidak berpengaruh (diperbolehkan).
• Fasilitas Tampilan Dinamis diaktifkan. Silahkan periksa pada Pengaturan - Format dan terpilih Ya pada opsi Aktifkan Tampilan Dinamis.

Jika hal diatas tidak dipenuhi maka tampilan pratinjau dinamis baru tidak akan berjalan dan justru akan diteruskan (redirect) pada tampilan asli blog anda dalam beberapa detik.

Jika anda memiliki saran, kritik atau masukan tentang Pratinjau Dinamis Baru Blogger (Dynamic Views in Blogger) silahkan berkontribusi pada pooling yang disediakan Blogger disini.

Referensi:
[1] All about Dynamic Views for Readers
[2] All about Dynamic Views for Authors
[3] Blogger Buzz: Fresh new perspectives for your blog

Read More