Widget yang tampak berwarna hijau di atas yaitu widget recent post/posting terbaru dengan begitu banyak pilihan. Anda dapat menyembunyikan gambar, komentar, bulan terbit dan ringkasan atau sebaliknya, menampilkannya. Menentukan apakah widget ini akan dianimasikan atau tidak juga dapat dilakukan. Cukup ikuti langkah-langkah di bawah ini dan pelajari tabel konfigurasinya:
Pertama-tama masuklah ke halaman tata letak dengan mengeklik sajian Tata Letak:
Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua isyarat ini dan letakkan di dalam formulirnya:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><style scoped="scoped"> .spy-outer { border:2px solid white; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4); -moz-box-shadow:0 1px 3px rgba(0,0,0,.4); box-shadow:0 1px 3px rgba(0,0,0,.4); margin:0 auto; } .spy-outer h2 { margin:0; padding:5px 10px; background-color:#008800; background-image:-webkit-linear-gradient(#008800,#037103); background-image:-moz-linear-gradient(#008800,#037103); background-image:-ms-linear-gradient(#008800,#037103); background-image:-o-linear-gradient(#008800,#037103); background-image:linear-gradient(#008800,#037103); color:white; font:normal bold 12px/normal Helmet,Freesans,Sans-Serif; text-transform:none; text-shadow:0 1px 2px black; } .spy { margin:0; padding:0; font:normal normal 10px/12px Helmet,Freesans,Sans-Serif; color:#333; overflow:hidden; } .spy li { list-style:none; text-align:left; margin:0; padding:5px 7px; background-color:#AABD30; background-image:-webkit-linear-gradient(#AABD30,#9BB009); background-image:-moz-linear-gradient(#AABD30,#9BB009); background-image:-ms-linear-gradient(#AABD30,#9BB009); background-image:-o-linear-gradient(#AABD30,#9BB009); background-image:linear-gradient(#AABD30,#9BB009); border-top:1px solid #A7D101; border-bottom:1px solid #899D00; word-wrap:break-word; overflow:hidden; } .spy a {text-decoration:none} .spy li em { font-weight:bold; color:#409540; } .spy-header { font:normal bold 12px/14px "Trebuchet MS",Trebuchet,Geneva,Verdana,Arial,Sans-Serif; display:block; color:yellow; text-shadow:0 1px 0 rgba(0,0,0,.2); /* white-space:nowrap; overflow:hidden; text-overflow:ellipsis; */ } .spy-header:hover { color:white; text-decoration:underline; } .spy-summary { margin-top:5px; overflow:hidden; } .spy li .image-wrapper, .spy li img { float:right; margin:0 0 2px 7px; padding:0; width:72px; height:72px; border:4px solid #899D00; background:white url('data:image/gif;base64,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') no-repeat 50% 50%; } .spy li .image-wrapper { -webkit-box-shadow:0 0 2px rgba(0,0,0,.7); -moz-box-shadow:0 0 2px rgba(0,0,0,.7); box-shadow:0 0 2px rgba(0,0,0,.7); } .spy li img { border:none !important; float:none; margin:0; padding:0; display:none; } .spy-outer .loading { display:block; padding:10px; background-color:#fafafa; } </style> <div id="spy-outer" class="spy-outer"><span class="loading">Memuat...</span></div> <script> var spy_config = { widgetTitle: '<h2>Recent Post</h2>', url: 'http://nama_blog.blogspot.com', containerId: 'spy-outer', numPost: 10, numChars: 100, monthNames: [ 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember' ], noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC', showSummaries: true, showThumbnails: true, showPostDate: true, showComments: true, newTabLink: false, animatedRecentPost: true, jsonCallback: 'recentpost_spy', newsTicker: { visible: 4, interval: 3000, speed: 600 } }; </script> <script src="//dte-project.googlecode.com/svn/trunk/rp-newsticker.js"></script>Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda kemudian simpan.
Konfigurasi Widget
| Opsi | Keterangan |
|---|---|
| widgetTitle | Markup HTML untuk judul widget. |
| url | Ganti nilainya dengan URL blog Anda. |
| containerId | ID kontainer yang akan dipakai untuk menampung isi widget. |
| numPost | Jumlah posting yang ingin ditampilkan (harus lebih besar dari newsTicker => visible). |
| numChars | Jumlah huruf ringkasa posting jikalau showSummaries bernilai true. |
| monthNames | Nma-nama bulan dalam satu tahun sesuai dengan sistem penanggalan di negaramu. |
| noImage | URL gambar cadangan untuk posting yang tidak mempunyai gambar di dalamnya. |
| showSummaries | Ganti nilainya menjadi false untuk menyembunyikan ringkasan posting. |
| showThumbnails | Ganti nilainya menjadi false untuk menyembunyikan showThumbnails. |
| showPostDate | Ganti nilainya menjadi false untuk menyembunyikan bulan terbit pada item posting. |
| showComments | Ganti nilainya menjadi false untuk menyembunyikan jumlah komentar. |
| newTabLink | Ganti nilainya menjadi true untuk menciptakan tautan-tautan widget membuka pada tab/jendela gres ketika diklik. |
| animatedRecentPost | Ganti nilainya menjadi false untuk mematikan efek animasi newsticker. |
| newsTicker => visible | Jumlah posting yang ingin ditampilkan dalam widget. Sisanya disembunyikan dan akan tampil secara bergantian ketika efek animasi terjadi. Pastikan nilainya lebih kecil dari numPost. |
| newsTicker => interval | Interval perpindahan item dalam satuan milidetik. |
| newsTicker => speed | Kecepatan efek animasi kemunculan item. |
Kode yang Saya beri garis bawah yaitu jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan isyarat tersebut!