Diary Notes Theme Sitemap Responsive

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:

<script>
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://sahabatblogger77.blogspot.com",
    postPerPage    = 10,
    numChars       = 370,
    imgBlank       = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibhIQv1bVU1YhM9b0ru8Eg2VzcvKD6cU_7_-debPuOgux7f1MoI-e1ptd6kc5iAzDv24bc5PZBFedXS1Q_mhWuJO6AQxc6jm_AOomYWf_Ep_4-CBT0Njl7nitPftHxTZQh7jtjO6KUL9A/s1600/sb77-image6.jpg";
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/diary-notes-theme-sitemap.js"></script>

KETERANGAN DATA ELEMEN

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

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.

PREVIEW CSS

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Diary Notes Theme Sitemap Responsive
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2014/11/diary-notes-theme-sitemap-responsive.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77