11.11.14
76
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
DATANILAI ELEMENTKETERANGAN FUNGSI
showPostDatetrue | falseNilai true untuk menampilkan bulan terbit.
Ganti nilainya menjadi false jika tidak ingin tampil
showCommentstrue | falsetrue untuk menampilkan jumlah komentar
false untuk tidak menampilkannya
idModetrue | falseSistem penggunaan bahasa pada tanggal.
true - Tanggal terbit dengan bahasa Indonesia
false - Tanggal terbit dengan bahasa Inggris
sortByLabeltrue | falseUntuk 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
siteUrlURL LinkGanti dengan URL Blog Anda
postsPerPage10,15Untuk menentukan jumlah posting yang tampil pada satu halaman penuh
numChars100,300Untuk menentukan jumlah karakter yang tampil pada ringkasan posting
imgBlankURL-GambarDigunakan 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 >>
= TERIMA KASIH =

76 komentar

  1. cuma liat ajalah mbak kodenya cz ga mudeng, yang ada malah mubeng :p

    BalasHapus
    Balasan
    1. ya kang, dilihat-lihat aja dulu, ntar kalau ada yang pas baru dibeli ya, hehe..

      Hapus
    2. dih, nggak jadi no 1...kedahuluan kang jum beberapa detik

      Hapus
    3. ah, mas jum nggak mudegan sih...sama dong

      Hapus
    4. pura-pura aja mah itu pak Us, ternyata kang jum mah yang beginian sudah lewat,

      Hapus
    5. wah, mbak devy tahu banyak nih ya :D

      Hapus
    6. tentang apa dulu neh,,?

      Hapus
    7. tentang ituu....kode script.... :>)

      Hapus
    8. wah komentarnya diborong berduaan nih ceritanya

      Hapus
    9. kan saya temenan sama mbak Devy dari kecil SD, pak ustadz
      :p

      Hapus
    10. kayaknya sich begitu kang yanto :p

      Hapus
    11. tau nie gak ngajak-ngajak...seakan-akan dunia milik berdua....
      nu lain mah ngontrak kabeh :D

      Hapus
    12. tau tuch pak ustadz :p

      Hapus
    13. Semacam Daftar isi blog yang di modifkasi ini ya Mbak Devy?

      Hapus
    14. benar mas, hanya lebih bagus dan mantaf jika ditempatkan pada halaman Homepage

      Hapus
    15. untuk memudahkan menerapkan diary notes ini saya juga butuh membaca para komentatornya deh...lebih mudah mahaminnya.

      Hapus
  2. dari kemarin itu saya lagi nyari cara untuk mengedit/menentukan jumlah karakter yang tampil pada ringkasan posting...tapi karena mngkin ndak sesuai dengn kata kuncinya, saya blum dapatkan artikel tsb d mbah gogel...ternyata saya dapat di sini....trimakasih ya mbak devy...salam hangat

    BalasHapus
    Balasan
    1. coba aja dari kemarin pak ustad nyarinya di neng gogel, pasti langsung terjawab, hehe..!!

      Hapus
    2. hehehe...neng satu ini memang top wess ...mbah gogelnya ja kalah...

      Hapus
    3. gimana gak kalah, dia sudah mbah-mbah, kan Devy masih neng-neng, hehe..
      yang muda kan masih aktif dibanding yang sudah jadi mbah.

      Hapus
    4. hehe...tapi jangan terlalu aktif, bisa2 ndak nyadar dah mau pagi belum tidur

      Hapus
    5. huff...oh iya, sudah jam 00.05, kalau begitu Devy pamitan dulu ya pak, next time devy mampir kerumah online pak ustad, assalamualaikum..!!

      Hapus
    6. waalaikumussalaam...kalau ada waktu tolong postngkan cara ngasih emoticon ya mbak..saya nyoba di beberapa blg yg ngasih tips gituan ndak berhasil2...mungkin neng gogelny bisa memberikan cara yang manjurr.. :)

      Hapus
    7. ustadz juga bisa modus ya :)) :)) :))

      Hapus
    8. jiaaaaaah.,...dikatain modus :D

      Hapus
    9. setuju sama mbak sussi :)

      Hapus
  3. hmm....keren banget mbak
    jadi pengen nih,seperti biasa saya simpen dulu mbak

    BalasHapus
    Balasan
    1. jangan kelamaan disimpen tar keburu basi lho :-)

      Hapus
    2. bener tuh mas yanto jangan kelamaan di simpan nanti hilang loh... :)

      Hapus
    3. bukan takut hilang sih, ntar kelamaan takutnya bau apek, hehe..!!

      Hapus
    4. tinggal dicuci aja mbak kalau bau apek :)

      Hapus
  4. kayanya sich begitu kang yanto :p

    BalasHapus
  5. Barusan dah liat demonya teh, keren bingits...
    hatiku langsung terpikat nie, saya bungkus dulu kalo gituh... :)

    BalasHapus
  6. Lihat demo nya menarik juga Mbak Devy, di simak dulu,.. sambil belajar. soalnya lumayan kodenya membuat mata berbinar binar hh :-d tapi bagus tutornya deh makasih sudah berbagi

    BalasHapus
  7. cakep ,,,, gambarnya bisa muter2 lg klo di sentuh ,,,,hehehe :)

    BalasHapus
    Balasan
    1. =)) mas fiu pun bisa muter-muter jgua kalau di sentuh sama mbak devy... heheh :>)

      Hapus
    2. kemarin dia sudah muter-muter mas nyariin kacamatanya yang hilang ntah kemana,,?

      Hapus
    3. iya nih devy bkin sy muter2 trus tiap hari ....... :D

      dicari muter2 eh kacamatanya ada sama devy ... :)

      Hapus
    4. lagian devy kan selalu ada disamping mas FIU, pain cari muter-muter coba,?

      Hapus
    5. mas aldino : kalau udud enaknya sambil (c)

      Hapus
  8. sitemap ini lagi di terapkan di tampilan blog saya mbak... :) di bagian homepage mbak.. (p)

    BalasHapus
    Balasan
    1. Silahkan Mas Jay..!,.tandatangan di sini dulu..sebagi tanda jadinya..!, ingat ya..ahr bulan sy ke tempat Mas JJay..!

      Hapus
    2. di kredit donk..Hmmmm..!!!!

      Hapus
    3. yaa harus tanda tangan dulu ya mas aldino.... hadehh... :)

      Hapus
  9. cantik, unik, menarik.. kamu makan apa sih bisa pinter begini :)

    BalasHapus
  10. mbak devi top benelan deh
    :)
    tiga jempol pokoke

    BalasHapus
    Balasan
    1. gak mau jempol, mau jengkol, hehe

      Hapus
    2. kalau jengkol minta sama mbak santika, mbak devy...

      Hapus
  11. oke deh nanti di coba tema nya biar blog ku cantik menawan hati deh ,,, neng

    BalasHapus
  12. aku juga mau praktek akh ntar habis lebaran
    :) (c)

    BalasHapus
  13. 1.kang marnes
    2.kang yanto
    3.Mas fiu
    4.Mas AL
    5.Pak Ustadz
    pandawa lima udah pada keluar semua dari pertapanya untuk menggapai admin nya yang cantik.

    BalasHapus
  14. feminim sekali ya mbak, cocok buat bloggerista :D hihii

    BalasHapus
  15. ada hadiah nich buat mbak devy, mohon koreksinya
    :p

    BalasHapus
    Balasan
    1. maksudnya apa yang mau dikoreksi kang jum.?

      Hapus
    2. ada yang perlu diedit ga mbak hadiahnya
      :p (c)

      Hapus
    3. Devy belum terima hadiahnya kok kang, suerrr..!!!???

      Hapus
    4. kan mbak dah mampir di (keamatiransemata dot wordpress dot com)

      Hapus
  16. Gak ngerti kalo soal html ini

    BalasHapus
  17. keren juga ya sitemap nya kalau dikasih kode script html, bisa belajar nih bikin nya biar blog tampil cantik dan menarik ;)

    BalasHapus
  18. yup sangat inspiratif dan kreatif. jempol buat sitemapnya. salam sahabat blogger.

    BalasHapus
  19. menyimak dulu ya mba devy :p

    BalasHapus
  20. Baru mampir lagi nih ke blognya mbak devy hehe :)

    BalasHapus
  21. benar-benar keren jadinya ya, seperti tampilan home page. Oya itu tampilannya responsive kan vy :D

    BalasHapus
  22. mati rasa kalo liat koding, tapi pengen bisa.... hadeuuuh [-(

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK