Diary Notes Theme Sitemap Responsive - Mengubah tampilan daftar artikel pada halaman beranda/home mungkin sangat jarang yang melakukannya, lebih memilih menggunakan apa yang sebelumnya sudah tersedia saat template diadopsi ke blog (Bawaan Template). Tutorial kali ini hanya merupakan sebuah pilihan buat sahabat semua pecinta SAHABAT BLOGGER 77 yang barangkali saat ini sedang berusaha melakukan perbaikan pada tampilan blog, mempercantik tampilan blog serta mendesain dan memodifikasi ulang tampilan dibeberapa halaman blog terutama pada halaman beranda. Karena untuk HOME PAGE, disanalah tersusun daftar postingan terbaru ditampilkan saat Anda telah mempublikasikan sebuah artikel.
Selain Daftar Isi yang pada umumnya Anda letakkan pada formulir laman posting, pada halaman Home/Beranda juga terdapat daftar postingan yang semuanya itu dapat kita ubah bentuk tampilannya sekeren mungkin seperti Diary Notes Theme Sitemap Responsive seperti ini:
DEMO SHOW
Tidak jauh berbeda dengan Daftar Isi Responsive Model Tema Facebook pada postingan sebelumnya, namun untuk Diary Notes Theme Sitemap Responsive kali ini akan kita tempatkan pada halaman Home untuk menggantikan daftar artikel yang Anda gunakan saat ini.
Agar memudahkan pekerjaan sahabat semua, saya sudah memodifikasi semua tampilan sekeren mungkin, seperti melengkapinya dengan ringkasan posting setelah judul, memberi tanggal terbit dan jumlah komentar dan Anda juga bisa memilih artikel yang tampil berdasarkan label tertentu dengan format pengaturan JavaScript dengan mengganti nilai-nilai pada masing-masing elemen data.
DESAIN TAMPILAN
Sebelum Anda akan meng-Copy kode script dibawah ini, terlebih dahulu silahkan sesuaikan desain tampilan sesuai dengan selera Anda sendiri, caranya cukup ganti nilai yang ada pada elemen data script seperti ini:
TAHAP PENERAPAN KE BLOG
Untuk menempatkan tampilan widget ini ke halaman beranda, tentu saja terlebih dahulu Anda harus menghilangkan daftar artikel yang sebelumnya saat ini Anda gunakan.
Setelah halaman home dikosongkan, selanjutnya copy kode script diatas, lalu letakkan pada formulir kosong tadi, namun jangan lupa untuk sebelumnya meletakkan CSS berikut pada Template Anda untuk mendukung performa tampilan.
Selain Daftar Isi yang pada umumnya Anda letakkan pada formulir laman posting, pada halaman Home/Beranda juga terdapat daftar postingan yang semuanya itu dapat kita ubah bentuk tampilannya sekeren mungkin seperti Diary Notes Theme Sitemap Responsive seperti ini:
Tidak jauh berbeda dengan Daftar Isi Responsive Model Tema Facebook pada postingan sebelumnya, namun untuk Diary Notes Theme Sitemap Responsive kali ini akan kita tempatkan pada halaman Home untuk menggantikan daftar artikel yang Anda gunakan saat ini.
Agar memudahkan pekerjaan sahabat semua, saya sudah memodifikasi semua tampilan sekeren mungkin, seperti melengkapinya dengan ringkasan posting setelah judul, memberi tanggal terbit dan jumlah komentar dan Anda juga bisa memilih artikel yang tampil berdasarkan label tertentu dengan format pengaturan JavaScript dengan mengganti nilai-nilai pada masing-masing elemen data.
DESAIN TAMPILAN
Sebelum Anda akan meng-Copy kode script dibawah ini, terlebih dahulu silahkan sesuaikan desain tampilan sesuai dengan selera Anda sendiri, caranya cukup ganti nilai yang ada pada elemen data script seperti ini:
<script>
var showPostDate = true,
showComments = true,
idMode = true,
sortByLabel = false,
labelSorter = "JQuery",
loadingText = "Loading...",
totalPostLabel = "Jumlah posting:",
jumpPageLabel = "Halaman",
commentsLabel = "Komentar",
rmoreText = "Selengkapnya ►",
prevText = "Sebelumnya",
nextText = "Berikutnya",
siteUrl = "http://sahabatblogger77.blogspot.com",
postPerPage = 10,
numChars = 370,
imgBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj18cpyjpG4mx3FDlpNMvW6b6oxnxHwdu8zhOD2yy-tBTixiNCaZlkL9isLu7KUUfcCeB0ha3_hXoQn6alAWSvZcByGeYuk61O2Xg6A1rRBMnb7bweodlKRdROh-dgS9cgL65w6q3EdktQ/s1600/sb77-image6.jpg";
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/diary-notes-theme-sitemap.js"></script>| DATA | NILAI ELEMENT | KETERANGAN FUNGSI |
|---|---|---|
| showPostDate | true | false | Nilai true untuk menampilkan bulan terbit. Ganti nilainya menjadi false jika tidak ingin tampil |
| showComments | true | false | true untuk menampilkan jumlah komentar false untuk tidak menampilkannya |
| idMode | true | false | Sistem penggunaan bahasa pada tanggal. true - Tanggal terbit dengan bahasa Indonesia false - Tanggal terbit dengan bahasa Inggris |
| sortByLabel | true | false | Untuk menampilkan posting dengan label tertentu |
| labelSorter | "jQuery","nama label.." | Tentukan nama label, jika nilai data pada sortByLabel bernilai true |
| totalPostLabel | "Jumlah posting" | Ganti teks berikut sesuai selera Anda |
| jumpPageLabel | "Halaman" | Ganti teks berikut sesuai selera Anda (Teks Dibawah Navigasi) |
| commentsLabel | "Komentar" | Untuk menentukan jumlah komentar, seperti: 10,20 Komentar |
| rmoreText | "Selengkapnya" | Link untuk menuju halaman posting |
| prevText | "Sebelumnya"" | Pagination untuk menuju halaman sebelumnya |
| nextText | "Berikutnya" | Pagination untuk menuju halaman selanjutnya |
| siteUrl | URL Link | Ganti dengan URL Blog Anda |
| postsPerPage | 10,15 | Untuk menentukan jumlah posting yang tampil pada satu halaman penuh |
| numChars | 100,300 | Untuk menentukan jumlah karakter yang tampil pada ringkasan posting |
| imgBlank | URL-Gambar | Digunakan untuk menggantikan jika artikel tidak memiliki gambar |
TAHAP PENERAPAN KE BLOG
Untuk menempatkan tampilan widget ini ke halaman beranda, tentu saja terlebih dahulu Anda harus menghilangkan daftar artikel yang sebelumnya saat ini Anda gunakan.
INGAT: Jangan dihapus, hanya menghilangkan isi tampilan agar tidak terlihat saat halaman Home terbuka. Sehingga pada opsi tata-letak halaman home akan kosong (No Posting), dan sudah berubah menjadi formulir kosong untuk menambahkan widget-gadget.
Caranya Baca ► Menghilangkan Daftar Artikel Pada Halaman Beranda
Caranya Baca ► Menghilangkan Daftar Artikel Pada Halaman Beranda
Setelah halaman home dikosongkan, selanjutnya copy kode script diatas, lalu letakkan pada formulir kosong tadi, namun jangan lupa untuk sebelumnya meletakkan CSS berikut pada Template Anda untuk mendukung performa tampilan.
