Postingan

Menampilkan postingan dari Maret, 2012

Slideshow Otomatis Blogger dengan TinyCarousel (Custom)

Gambar
Menjawab permintaan dari It's a Hardlife , Saya mencoba untuk memodifikasi JQuery Carousel yang sederhana karena slideshow versi Agile Carousel itu terlalu rumit. Saya mengambil TinyCarousel sebagai bahan utama, yang pada awalnya hanya berupa slideshow gambar biasa untuk dimodifikasi lagi sesuai dengan tipografi slideshow Agile Carousel sehingga setiap slide menjadi lebih kaya akan konten: Lihat Demo Tahap 1: Mengedit Template Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan : Mengedit HTML Temukan kode ini: ]]></b:skin> Salin kode di bawah ini, kemudian letakkan di atasnya: /** * Custom TinyCarousel by Taufik Nurrohman * Visit:http://hompimpaalaihumgambreng.blogspot.com */ #tinycarousel { width:532px; /* Lebar Slideshow */ height:1%; overflow:hidden; font:normal 10px/12px Arial,Sans-Serif; color:#666; margin:30px auto; } #tinycarousel .viewport { height:336px; overflow:hidden; position:relativ

Dua Versi Konverter HTML

Gambar
Membuat konverter HTML dengan JavaScript atau JQuery Versi JavaScript Mentah Konverter HTML dengan JavaScript mentah bisa dibuat dengan mudah. Tambahkan sebuah elemen halaman HTML/JavaScript , kemudian salin kode ini dan letakkan di dalam formulirnya: <style type="text/css"> #codes { border:1px solid #666; width:98%; height:200px; margin:5px auto 10px; display:block; } .button-group { margin:0 auto; text-align:center; } </style> <textarea id="codes"placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></textarea> <div class="button-group"> <button onclick="cdConvert();">Konversi</button> <button onclick="cdClear();">Bersihkan</button> </div> <script type="text/javascript"> function cdClear() { var wtarea = document.getElementById('codes'); wtarea.value = ''; } function cdConvert() { var ct

Daftar Tema - Widget Daftar Isi Blogger dengan Navigasi

Gambar
Di bawah ini adalah daftar tema untuk widget daftar isi Blogger dengan navigasi halaman . Untuk menerapkannya, caranya cukup dengan mengganti kode <link rel='stylesheet' media='screen' href='style.css' type='text/css' /> dengan kode ini: Minima Brown Theme Lihat Demo <link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-brown.css" type="text/css" /> Elegant Black Theme Lihat Demo <link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_elegant-black-theme.css" type="text/css" /> Facebook Theme Lihat Demo <link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_facebook-theme.css" type="text/css" /> CSS3 Diary Book Th

Widget Daftar Isi Blogger dengan Navigasi Halaman

Gambar
Pembaharuan: 28 Februari 2013 Navigasi halaman pada widget daftar isi??? Blogger??? Pada akhirnya Saya menemukannya, seorang penggagas JSON Blogger dengan sistem navigasi halaman. Beliau berasal dari Spanyol ( Vagabundia ). Pada dasarnya cara kerja navigasi widget ini di dalam mengontrol JSON hanyalah dengan cara mengubah nilai parameter start-index secara tidak langsung: http://nama_blog.blogspot.com/feeds/posts/default? start-index=1 &amp;max-results=10&amp;orderby=published&amp;alt=json-in-script&amp;callback=yourfunction Kode di atas akan menampilkan posting terbaru dengan keadaan normal yaitu mulai dari posting pertama ( start-index=1 ) dan berhenti pada posting ke sepuluh ( max-results=10 ). Namun, dengan cara mengubah nilai start-index , Anda bisa memanggil posting dari urutan berapapun meski bukan dari urutan pertama. Misalnya: http://nama_blog.blogspot.com/feeds/posts/default? start-index=17 &amp;max-results=10&amp;orderby=published&amp;alt=json-i