Hari ini saya akan menunjukkan bagaimana Anda dapat menambahkan Tabel menakjubkan Isi widget ke halaman blog Anda. Widget ini dibuat oleh Taufik Nurrohman dari DTE. Konsep widget ini sangat sederhana. Hal ini dikodekan dengan bantuan JavaScript dan CSS. Ia juga memiliki banyak pilihan dan pengaturan yang akan saya jelaskan di bawah.
Sebuah demo kerja live widget ini dapat dilihat dengan mengklik tombol di bawah ini.
DEMO
Setelah melihat demo jika Anda ingin menambahkan widget ini ke dalam blog kemudian ikuti langkah-langkah berikut.
Langkah 1: Membuat Halaman Baru
Pertama-tama kita perlu membuat sebuah halaman baru dan untuk melakukan hal ini terlebih dahulu pergi ke Blog Judul → Pages → New Page → Halaman Kosong. Halaman editor akan terbuka, sekarang klik pada tab HTML.
Langkah 2: Menambahkan kode
Setelah Anda berada di tab HTML Editor Halaman tambahkan kode di bawah ini di dalamnya.
<link rel="stylesheet" href="http://reader-download.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" />
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://indraahmadrobani.blogspot.com/" title="Tabbed TOC">DRobani</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://your-url.blogspot.com", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
monthNames: [ // Array of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>
Copy dan paste kode yang diberikan di atas dalam editor posting.
Langkah 3: Daftar Isi Pengaturan
Sekarang ubah code yg berwarna merah menjadi URL Blog anda. Anda dapat mengubah pengaturan lain. Hal ini dijelaskan secara singkat dalam kode apa yang mereka dan bagaimana untuk mengubahnya. Setelah melakukan perubahan menyimpan halaman.
Anda telah selesai sekarang. Sekarang Anda dapat menghubungkan halaman manapun Anda inginkan. Anda dan pengunjung Anda sekarang dapat melihat tabel ini menakjubkan konten di blog blogger Anda.
Semoga Bermanfaat ya ^_^
Post a Comment