Dummy Blog: Maret 2012

Rabu, 21 Maret 2012

Slideshow Otomatis Blogger dengan TinyCarousel (Custom)

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:

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:relative;
  background-color:#eee;
  border:1px solid #ccc;
}

#tinycarousel ul.overview {
  list-style:none !important;
  position:absolute;
  padding:0 0 !important;
  margin:0 0 !important;
  width:240px;
  left:0;
  top:0;
}

#tinycarousel ul.overview li {
  list-style:none !important;
  float:left;
  margin:5px 0 5px 5px !important;
  padding:0 0 !important;
  height:auto !important;
  width:168px; /* Lebar satu unit slide */
  background-color:white;
  color:#666;
  border:1px solid #ccc;
}

#tinycarousel .inner {
  margin:10px;
  height:260px;
  overflow:hidden;
}

#tinycarousel img {
  width:auto;
  height:170px;
  border:none;
  outline:none;
  padding:0 0;
  margin:0 0;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

#tinycarousel h6 {
  border-top:1px solid #ddd;
  font:normal bold 11px/12px Verdana,Tahoma,Arial,Sans-Serif;
  color:#39f;
  margin:9px 0 5px;
  padding:10px 0 0;
  background:none;
  overflow:hidden;
}

#tinycarousel h6 a {
  color:inherit;
  text-decoration:none;
  border:none;
}

#tinycarousel p {
  margin:0 0;
  padding:0 0;
  overflow:hidden;
}

#tinycarousel em {
  font-style:normal;
  color:#aaa;
  background-color:#333;
  background-image:-webkit-linear-gradient(top,#555,#333);
  background-image:-moz-linear-gradient(top,#555,#333);
  background-image:-ms-linear-gradient(top,#555,#333);
  background-image:-o-linear-gradient(top,#555,#333);
  background-image:linear-gradient(top,#555,#333);
  display:block;
  padding:5px 10px;
  margin:0 0;
}

#tinyarrow {
  display:block;
  background-color:white;
  border:1px solid #ccc;
  padding:5px;
  margin:2px 0 0;
  overflow:hidden;
}

#tinyarrow .buttons {
  background-color:#666;
  border:none;
  outline:none;
  display:block;
  padding:2px 5px;
  overflow:hidden;
  position:relative;
  float:left;
  margin:0 1px;
  color:white;
  text-decoration:none;
  font-weight:bold;
}

#tinyarrow .disable {display:none}

#tinyarrow .buttons:active {
  background-color:#900;
  position:relative;
  top:1px;
}

#tinyarrow span {
  float:right;
  font:normal bold 11px/12px Tahoma,Verdana,Arial,Sans-Serif;
  margin:2px 5px 0 0;
}

/*
 * Orientasi Vertikal
 * CSS diatur secara manual pada versi aslinya
 * tapi di sini semuanya sudah cukup teratur
 */
#tinycarousel.vertical {width:242px}
#tinycarousel.vertical ul.overview li {
  float:none;
  display:block;
  width:228px;
  margin:5px auto 10px !important;
}

#tinycarousel.vertical img {
  width:100%;
  height:auto;
}

Kemudian temukan kode ini:

</head>

Salin kode di bawah ini kemudian letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $('#tinycarousel').tinycarousel({
        start       : 1,
        display     : 1,
        axis        : 'x',
        interval    : false,
        intervaltime: 3000,
        animation   : true,
        duration    : 1000,
        callback    : null
    }); 
});
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/jquery.tinycarousel-custom.js' type='text/javascript'></script>

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

Tahap 2: Meletakkan Slideshow

Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script type="text/javascript">
var showPostDate_g  = true,
    showComm_g      = true,
    slideOpenNewTab = true,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Komentar",
    numposts_g      = 7,
    numchars_g      = 100,
    showText        = "Menampilkan",
    postText        = "Posting",
    tinyprevNav     = "&lt;",
    tinynextNav     = "&gt;",
    home_page       = "http://nama_blog.blogspot.com";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4TinyCarousel.js" type="text/javascript"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu klik Simpan Template.

Konfigurasi Slideshow - JSON & Custom TinyCarousel

Pengaturan JSON - Auto Content Slider

Opsi	Keterangan
showPostDate_g	Jika bernilai `true`, bulan terbit artikel akan ditampilkan. Jika bernilai `false`, bulan terbit artikel akan disembunyikan.
slideOpenNewTab	Jika bernilai `true`, setiap tautan akan terbuka di tab/jendela baru. Jika bernilai `false`, setiap tautan akan terbuka di tab/jendela yang sama.
idMode	Jika bernilai `true`, sistem penanggalan akan berubah menjadi berbahasa Indonesia. Jika bernilai `false`, sistem penanggalan akan berubah menjadi berbahasa Inggris.
slidebyLabels	Ubah nilainya menjadi `true` jika ingin menampilkan daftar slide artikel dengan label yang spesifik. Setelah itu tentukan nama label pada variabel `slideLabelName`.
slideLabelName	Digunakan untuk menentukan nama label yang spesifik setelah mengubah nilai `slidebyLabels` menjadi `true`.
pBlank	Adalah gambar cadangan yang akan ditampilkan jika artikel tidak memiliki gambar.
text	Digunakan untuk menentukan label jumlah komentar (contoh: 7 Komentar).
numposts_g	Digunakan untuk menentukan jumlah slide.
numchars_g	Digunakan untuk menentukan jumlah karakter ringkasan artikel.
showText & postText	Digunakan untuk mengubah teks "Menampilkan" N "Posting".
tinyprevNav	Digunakan untuk menentukan simbol navigasi mundur pada slideshow.
tinynextNav	Digunakan untuk menentukan simbol navigasi maju pada slideshow.
home_page	URL blog Anda.

Konfigurasi Slideshow

Terdapat beberapa konfigurasi standar yang sangat umum dijumpai pada plugin animasi JQuery. Yaitu kecepatan, delay, opsi animasi otomatis dan hal-hal umum lainnya:

Opsi	Nilai	Keterangan
start	1, 2, 3, ... (urutan)	Digunakan untuk menentukan slide nomor ke berapa yang akan tampil terlebih dulu saat halaman dikunjungi.
display	1, 2, 3, ... (jumlah)	Digunakan untuk menentukan berapa banyak slide yang akan bergeser dalam sekali klik navigasi/sekali animasi.
axis	'x'	Nilai `'x'` akan membuat orientasi slideshow menjadi horizontal, nilai `'y'` akan membuat orientasi slideshow menjadi vertikal.
axis	'y'
interval	true	Nilai `true` akan membuat slideshow bergerak secara otomatis, nilai `false` akan membuat slideshow mati dan hanya bisa bergerak jika Anda mengeklik tombol navigasi.
interval	false
intervaltime	500, 3000, ... (kecepatan)	Digunakan untuk menentukan lama waktu slide berhenti diantara animasi (hanya berlaku untuk animasi otomatis).
animation	true	Nilai `true` akan membuat slideshow bergerak dengan efek animasi, nilai `false` akan membuat slideshow bergerak kaku dan tampak meloncat.
animation	false
duration	500, 3000, ... (kecepatan)	Digunakan untuk menentukan kecepatan animasi perpindahan slide.
callback	null	Digunakan untuk menerapkan fungsi tambahan yang akan dieksekusi setiap kali slide berpindah.
callback	function() { ... }

Contoh Konfigurasi Animasi Otomatis

$('#tinycarousel').tinycarousel({
    start       : 1,
    display     : 1,
    axis        : 'x',
    interval    : true,
    intervaltime: 3000,
    animation   : true,
    duration    : 1000,
    callback    : null
});

Lihat Demo

Contoh Konfigurasi Orientasi Vertikal

$('#tinycarousel').tinycarousel({
    start       : 1,
    display     : 1,
    axis        : 'y',
    interval    : true,
    intervaltime: 3000,
    animation   : true,
    duration    : 1000,
    callback    : null
});

Lihat Demo

Contoh Konfigurasi Menggeser Slide 3 Buah/Klik Navigasi

$('#tinycarousel').tinycarousel({
    start       : 1,
    display     : 3,
    axis        : 'x',
    interval    : false,
    intervaltime: 3000,
    animation   : true,
    duration    : 1000,
    callback    : null
});

Lihat Demo

Label: Gambar, JQuery, Menengah, Slideshow, Widget

# posted by Taufik Nurrohman @ Maret 21, 2012 0 comments

Kamis, 15 Maret 2012

Dua Versi Konverter HTML

HTML Convertion Tool — 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 ctarea = document.getElementById('codes'),
        cv = ctarea.value;
    cv = cv.replace(/&/g, "&amp;");
    cv = cv.replace(/'/g, "&#039;");
    cv = cv.replace(/"/g, "&quot;");
    cv = cv.replace(/</g, "&lt;");
    cv = cv.replace(/>/g, "&gt;");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>

Klik Simpan.

Lihat Demo

Versi JQuery

Terserah apakah kode ini akan Anda letakkan di dalam halaman statis atau widget, cukup pastikan bahwa template Anda sudah dilengkapi dengan JQuery, maka konverter HTML ini akan bekerja:

<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 id="convert">Konversi</button>
    <button id="clear">Bersihkan</button>
</div>
<script type="text/javascript">
$(function() {
    $('button#convert').click(function() {
        $('textarea#codes').val(
        $('textarea#codes').val()
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#39;")
        ).focus().select();
        return false;
    });
    $('button#clear').click(function() {
        $('textarea#codes').val('').focus().select();
        return false;
    });
});
</script>

Klik Simpan.

Lihat Demo

Label: Browser, Code Snippet, JQuery, Regular Expression, Widget

# posted by Taufik Nurrohman @ Maret 15, 2012 0 comments

Sabtu, 03 Maret 2012

Daftar Tema - Widget Daftar Isi Blogger dengan Navigasi

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 Theme

Lihat Demo

<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_CSS3-diary-book-theme.css" type="text/css" />

Minima White Theme

Lihat Demo

<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-white-theme.css" type="text/css" />

Dark Red Theme

Lihat Demo

<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_dark-red-theme.css" type="text/css" />

Yellow Green Theme

Lihat Demo

<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_yellow-green-theme.css" type="text/css" />

Construction Theme

Lihat Demo

<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_construction-theme.css" type="text/css" />

Dark Blue Theme

Lihat Demo

<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_blue-theme.css" type="text/css" />

Yang lain? Ada saran??

Label: CSS, Desain Tampilan, Widget

# posted by Taufik Nurrohman @ Maret 03, 2012 0 comments

Widget Daftar Isi Blogger dengan Navigasi Halaman

Pembaharuan: 28 Februari 2013

Table of Content for Blogger with Pagination — 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-in-script&amp;callback=yourfunction

Dengan cara itu, maka posting yang ditampilkan akan dimulai dari posting ke 17 (start-index=17) dan akan berhenti pada posting ke 27 (max-results=10).

Hal itulah yang dilakukan oleh navigasi JSON, yang hanya akan mengubah nilai start-index untuk meloncat dari halaman yang satu ke halaman yang lainnya, bahkan tanpa harus memuat halaman secara keseluruhan:

Lihat Demo

Saya telah memodifikasinya untuk memperkaya konten. Selain judul dan thumbnail, Saya juga telah melengkapinya dengan ringkasan posting, keterangan komentar dan bulan terbit artikel. Selain itu, widget ini juga bisa difilter berdasarkan nama label tertentu.

Memasang Widget Daftar Isi pada Blog Anda

Di sini Saya menggunakan tema hijau dan putih. Mungkin Anda tidak suka dengan tampilannya, tapi jika Anda berminat, cukup tuliskan keinginan pada formulir komentar di bawah mengenai tema apa lagi yang sekiranya bagus untuk widget ini. Jika ada kesempatan pasti akan Saya buat tema-tema yang baru untuk widget daftar isi ini atau juga widget-widget lainnya yang ada di blog ini.

Edit: Tema-tema selengkapnya bisa Anda lihat di sini »

Untuk membuatnya, pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_default-theme.css" type="text/css" />
<script type="text/javascript">
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://nama_blog.blogspot.com",
    postsPerPage   = 10,
    numChars       = 370,
    imgBlank       = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-archive-with-pagination.js"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu simpan.

Pengaturan

Opsi	Nilai	Keterangan
showPostDate	true	Ganti nilainya menjadi `false` jika Anda tidak ingin menampilkan bulan terbit artikel.
showPostDate	false
showComments	true	Ganti nilainya menjadi `false` jika Anda tidak ingin menampilkan jumlah komentar pada artikel.
showComments	false
idMode	true	Jika bernilai `true`, sistem penaggalan artikel akan menjadi berbahasa Indonesia. Jika bernilai `false` sistem penanggalan artikel akan berubah menjadi berbahasa Inggris.
idMode	false
sortByLabel	true	Digunakan untuk memfilter artikel/posting. Jika ingin menampilkan posting dengan kategori tertentu saja, pilihlah nilai `true`. Setelah itu tentukan nama label pada variabel `labelSorter`.
sortByLabel	false
labelSorter	"JavaScript", "Widget", ... (nama label)	Tentukan nama label jika opsi `sortByLabel` bernilai `true`.
totalPostLabel	"Jumlah posting:", ... (teks)	Tentukan keterangan jumlah posting (yang di bawah navigasi).
jumpPageLabel	"Halaman", ... (teks)	Tentukan keterangan lompatan posting (yang di bawah navigasi).
commentsLabel	"Komentar", "Comments", ... (teks)	Digunakan untuk menentukan label jumlah komentar (contoh: 10 Komentar).
rmoreText	"Baca Selengkapnya", "Read More", ... (teks)	Digunakan untuk menentukan label link menuju posting asli.
prevText	"Sebelumnya", "Previous", ... (teks)	Digunakan untuk menentukan label navigasi mundur.
nextText	"Berikutnya", "Next", ... (teks)	Digunakan untuk menentukan label navigasi maju.
siteUrl	(URL Blog)	Ganti URL ini dengan URL blog Anda.
postsPerPage	10, 30, ... (numerik)	Digunakan untuk menentukan jumlah posting yang tampil pada satu halaman.
numChars	100, 200, ... (numerik)	Digunakan untuk menentukan jumlah karakter ringkasan posting.
imgBlank	no-image.jpg (URL Gambar)	Gambar cadangan jika posting yang tampil tidak memiliki gambar.

Label: JavaScript, Tingkat Lanjut, Widget

# posted by Taufik Nurrohman @ Maret 03, 2012 0 comments

Dummy Blog

Rabu, 21 Maret 2012

Slideshow Otomatis Blogger dengan TinyCarousel (Custom)

Tahap 1: Mengedit Template

Tahap 2: Meletakkan Slideshow

Konfigurasi Slideshow - JSON & Custom TinyCarousel

Pengaturan JSON - Auto Content Slider

Konfigurasi Slideshow

Contoh Konfigurasi Animasi Otomatis

Contoh Konfigurasi Orientasi Vertikal

Contoh Konfigurasi Menggeser Slide 3 Buah/Klik Navigasi

Kamis, 15 Maret 2012

Dua Versi Konverter HTML

Versi JavaScript Mentah

Versi JQuery

Sabtu, 03 Maret 2012

Daftar Tema - Widget Daftar Isi Blogger dengan Navigasi

Minima Brown Theme

Elegant Black Theme

Facebook Theme

CSS3 Diary Book Theme

Minima White Theme

Dark Red Theme

Yellow Green Theme

Construction Theme

Dark Blue Theme

Widget Daftar Isi Blogger dengan Navigasi Halaman

Memasang Widget Daftar Isi pada Blog Anda

Pengaturan

Mengenai Saya

Links

archives