Daftar Isi Responsive Model Tema Facebook - Selain mengisi waktu luang dengan bermain blog, sudah pasti Anda memiliki akun facebook untuk sekedar bercanda ria bersama facebooker lainnya. Seperti tutorial kali ini, saya mengambil tema Facebook untuk Membuat Daftar Isi Blog Responsive Model Tema Facebook.

Hal yang tersulit adalah mengcopy seluruh tampilan tema facebook dan memindahkannya kedalam tampilan daftar isi blog yang jelas-jelas berbeda aliran media, terlebih untuk tampilan facebook yang selalu berganti-ganti tema. Sehingga saya hanya bisa menirukan nuansa warnanya saja yang dominan berwarna biru, dan hasilnya sedikit mirip seperti ini:




DEMO SHOW




Hal yang sama seperti Cara Membuat Site Map Terbaru | Daftar Isi Blog sebelumnya, untuk mengatur kecepatan muat halaman (loading), saya menggunakan perintah JavaScript untuk memanggil hanya pada artikel terbaru saja yang akan ditampilkan dengan jumlah 10 posting per 1 halaman. Sedangkan penggunaan script-Jquery, saya menempatkan secara langsung dengan script variable sortir label seperti ini:



<script type='text/javascript'>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Prev",
    nextText       = "Next",
    siteUrl        = "http://URL-Anda.com",
    postPerPage    = 10,
    numChars       = 370,
</script>



PENEMPATAN DAFTAR ISI BLOG
Di bawah ini, saya sudah menyusun beberapa kode CSS untuk mendesain bentuk tampilan. Sebagai tambahan, pada kolom akhir daftar isi ini, saya menggunakan perintah navigasi halaman dengan sistem pagination number (Next - Prev). Anda bisa menempatkan kode ini secara langsung pada halaman Template.
Temukan kode ]]></b:skin> lalu letakkan kode ini tepat diatasnya:


#toc-outer {
  font:normal 11px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif;
  line-height:1.28 !important;
  color:rgb(51,51,51);
  text-align:left;
  text-shadow:none;
  background-color:white;
  overflow:hidden;
  border:2px solid #C4CDE0;
  -webkit-box-shadow:0px 1px 0px rgba(0,0,0,0.1);
  -moz-box-shadow:0px 1px 0px rgba(0,0,0,0.1);
  box-shadow:0px 1px 0px rgba(0,0,0,0.1);}

#toc-outer a {border:none;color:#e06666;}
#loadingscript {
  padding:0px 0px;
  height:37px;
  text-indent:-9999px;
  color:transparent;}

.itemposts {
  margin:0px auto 1px;
  padding:5px 5px 5px;
  height:auto;
  overflow:hidden;
  display:block;
  border-bottom:1px solid #D2D9E7;}

.itemposts h6 {
  margin:0px 0px 0px;
  font:bold 11px/16px "lucida Grande",Tahoma,Verdana,Arial,Sans-Serif;
  line-height:16px !important;
  height:16px;
  overflow:hidden;
  color:white;
  padding:5px 10px;
  background-color:#3B5998;
  border-bottom:1px solid #133783;
  text-transform:none;
  border-radius:15px;}

.itemposts h6 a {color:#fff !important;text-decoration:none;}
.itemposts img {
  float:left;
  height:72px;
  width:72px;
  margin:2px 10px 2px 0px;
  padding:0px 0px;
  background-color:#fff;
  border:1px solid #999;
  -webkit-box-shadow:0px 0px 1px 1px #3B5998;
  -moz-box-shadow:0px 0px 1px 1px #3B5998;
  box-shadow: 0px 0px 1px 1px #3B5998;
  outline:none;}

.itemposts .iteminside {margin:10px 0px 0px;}
.itemposts .itemfoot {
  clear:both;
  padding:5px 10px;
  margin:10px 0px 0px;
  background-color:#EDEFF4;
  border-left:2px solid #A8B2CE;
  color:#333;
  overflow:hidden;}

.itemposts .itemfoot a.itemrmore {
  font-weight:bold;
  color:#3B5998;
  float:right;
  text-decoration:none;}

.itemposts .itemfoot a.itemrmore:hover {
  text-decoration:underline;
  border-color:transparent;}

#itempager {
  background: linear-gradient(left, transparent 0%,#6495ED 50%,transparent 100%);
  background:-webkit-linear-gradient(left, transparent 0%,#6495ED 50%,transparent 100%);
  background:-moz-linear-gradient(left, transparent 0%,#6495ED 50%,transparent 100%);
  background:-o-linear-gradient(left, transparent 0%,#6495ED 50%,transparent 100%);
  padding:15px 0px;
  border-bottom:1px solid #133783;
  color:#111;}

#pagination span.hidden {display:none;}
#pagination, #totalposts {text-align:center;}
#pagination {margin:0px 10px 10px;}
#pagination span, #pagination a {
  font-weight:bold;
  color:white;
  display:inline;
  margin:0 1px;
  padding:3px 6px;
  text-indent:0px;
  background-color:#1F4189;
  text-decoration:none;
  border:none;
  border-radius:50%;}

#pagination a:hover,
#pagination span.actual {
  background-color:red;
  color:#fff;
  border-radius:50%;}


Dimana Anda harus meletakkan script ini.?
Pada halaman posting, formulir laman atau pada widget sidebar, terserah Anda dimana selayaknya, namun jangan lupa untuk mengganti kode yang saya beri warna Merah dengan URL blog Anda terlebih dahulu seperti ini:


<script type='text/javascript'>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Prev",
    nextText       = "Next",
    siteUrl        = "http://sahabatblogger77.blogspot.com",
    postPerPage    = 10,
    numChars       = 370,
    imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/sitemap-blogger-facebook-theme.js"></script>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Daftar Isi Responsive Model Tema Facebook
Ditulis oleh= Devy Indriyani
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 =

61 komentar

  1. wiiih ,,,, tak praktek dulu ,,,, eh tapi brt loading gak nih ? hhe

    BalasHapus
    Balasan
    1. hehe modus.. kalo aku mampu tak coba dulu ya..

      Hapus
    2. hahahahaha, ih mbk tika dah curiga nih ,,,, emg modus apa coba ? org gak ada modus tanya ama devy .... :p

      Hapus
    3. Fiu.S
      tanpa script-Jquery insyaAllah tidak berat loadingnya, terkecuali jika sambil manggul semen 2sak saat membuka halaman ini, hehe

      Hapus
    4. iya neh, Devy juga jadi bingung, semua kode sudah diperiksa dan alhamdulillah tidak ada text Modus disana. hehe..

      Hapus
    5. hehehe, devy bisa aja ,,, masa semen 2sak mw dipanggul .... :) tpi klo ada devy sh biar 3 sak juga kuat kok ...hahahahahahaha

      mb tka@ tuh kan bnr,,,, devy dah periksa kodenya gak diemukan modus sdkit pun .... :p

      Hapus
    6. benar kan mas, sudah manggul beban berat, 2 sak semen lagi plus ditambah Devy, gimana gak berat coba, semen 40kg dikali 2 + devy 51kg= 130kg beban yang harus dipanggul.
      hmmm...bisa ringsek tuh badan, hehe...

      Hapus
    7. Mendingan saya santap dulu deh artikelnya Mbak Devy ini =p~ biar blog saya tambah keren, biar sebelas dua belas sama Adminya. makasih ya Mbak Devy :)

      Hapus
    8. biar ringsek ,,,klo buat devy apa sh yg gak bisa .... ciaaaaaaaaaaaaaaaaaaaaah ,,,, hak hak hak hak ,,,, :)

      Hapus
    9. haloooo semua..pada ngapain nih

      Hapus
    10. tuuh modusnya ga ada di script ya.. mas afgan keluarin jurus belangnya hihi

      Hapus
    11. jurus kungfu teriakan bruce lee..ciaaaaaahhhhhh... :)

      Hapus
    12. hahahahaha,,,, awas awas jngn ngributin ih ,,,, :p

      Hapus
    13. saya nyimak aja anak muda lg bercengkrama.hehehe

      Hapus
    14. ini mau berantem mas Yan, bukannya dibelain kok malah nyimak doangk sih, hehe

      Hapus
    15. hati2 loh mba

      biasanya pertamanya berantem lama2........

      Hapus
    16. lama2 ???? :-b hahahahaha

      Hapus
  2. ijin bookmark daftar isi responsivenya ya bu, soalnya daftar isi punya saya ternyata jauh banget dari responsive, cari waktu luang dulu buat praktekinnya

    BalasHapus
    Balasan
    1. silahkan kang, dan terimakasih atas kunjungan sorenya.

      Hapus
  3. cakep juga ya demonya ada beberapa pilihan, tapi aku juga tertarik yang atas vy, yang membuat sitemap terbaru, izin buka ya..

    BalasHapus
    Balasan
    1. Desainnya sama teh, menampilkan daftar artikel dengan thumbanail image, hanya saja pada sebelumnya, devy menggunakan pengaturan tab pada halaman header.

      Hapus
  4. kapan-kapan kalau ada waktu luang saya tester mbak devy :p

    BalasHapus
    Balasan
    1. jangan paki rahasia-rahasiaan donk kang jum, yang pastinya kapan neh, hehe...!!

      Hapus
    2. ntr saya konfirmasi mbak devy dch kalau mau praktek kode diatas :p
      soalnya lepinya lagi rusak dah hampir sebulan mbak :-(

      Hapus
    3. siap mbak devy :p (c)

      Hapus
  5. kalau melihat demonya daftar isi ini berdasarkan dari artikel baru kelama yambak

    BalasHapus
    Balasan
    1. tepat sekali mas Yan, devy menghapus tampilan label, dan menggatikannya dengan perintah script untuk mengambil artikel terbaru, sedangkan untuk melihat artikel yang sudah lama (lampau); saya membuatnya dengan navigasi halaman paginations number

      Hapus
    2. kayaknya mas Yan ada bakat jadi peramal neh, tulisan saya saja bisa ditebak, dan benar lagi hehe..
      hmmm...ramal devy donk mas Yan.?

      Hapus
    3. kan makan dulu baru bayar, jadi buktiin dulu baru dibayar, hehe..

      Hapus
  6. untuk kode CSS nya bisa ndak disingkat menjadi javascript CSS mbak, maksudnya biar menghemat aja :D

    BalasHapus
    Balasan
    1. Bisa saja mas, namun sifatnya akan menjad permanent kalau dikompres ke php. sehingga bentuk dan desainnya tidak akan bisa diubah.

      takutnya bagaimana bila sahabat lain ingin mengubah tampilan warna biru menjadi merah misalnya.

      Hapus
  7. oya mbak, ni kalau boleh request ya! jika daftar isi di atas dibuat juga untuk tampilan label ketika di buka bisa ndak ya mbak, soalnya kan kalau setiap label dan dibuka, tampilan standarnuta kurang menarik heehee

    BalasHapus
    Balasan
    1. seip requestnya akan segera Devy terbitkan.

      Hapus
  8. Bagusnya buat halaman utama itu mbak, hehe

    BalasHapus
    Balasan
    1. menggantikan daftar artikel pada halaman beranda mas, pasti terlihat lebih keren

      Hapus
  9. Langsung ke tkp ya mbak :)

    BalasHapus
  10. Keren sih, tapi saya masih betah sama daftar isi saya yg lama.

    BalasHapus
  11. Keren nich saya langsung praktekkan ya Mbak :)

    BalasHapus
  12. Menarik juga nih tutorial Daftar isinya, punya saya biasa aja Mbak Devy,, maaf yang ini sudah tervalidasi Html belum Mbak..? agar tidak penasaran langsung coba dulu deh, makasih Mbak

    BalasHapus
    Balasan
    1. nah ini dia mas saud, devy lupa mengeceknya, karena devy cuma tets pada responsivenya saja, tetapi devy menggunakan script yang friendly kok, bebas malware, jadi aman untuk di komsumsi.

      Hapus
  13. keren juga nih tampilan daftar isi nya, hampir mirip dengan facebook ya warna nya pakai biru, kebetulan blog saya juga pakai daftar isi, tapi pakai plugin hehehe :D soalnya kalau pakai kode script agak susah :D

    BalasHapus
  14. wihh keren sekali ini dilihat demo daftar isi buatan buatan mbak Devy pengin banget nyoba sayang belum cukup waktu tuk mempelajarinya

    BalasHapus
    Balasan
    1. ntar kalau sudah ada waktu, beritahu Devy ya, biar devy bisa siap-siap..hehe..

      Hapus
  15. eh bagus ya daftar isinya...tapi saya tetap akan menunggu daftar isi blognya mbak devi...itu yg paling mantab dan cantik...

    BalasHapus
    Balasan
    1. yang mana sih pak uztadt..!!
      yang pada menu navigasi maksud pak ustad.

      Hapus
    2. yup bentulll itu...share dunk mbak...saya tunggu ya :D

      Hapus
  16. Keren nih daftar isi responsive bikinan mba Devy :) lihat di demonya.
    bookmark dulu deh buat nanti coba

    BalasHapus
  17. kalau dibuat cuma judulnya saja yang tampil bisa gak mba? :-?

    BalasHapus
    Balasan
    1. meringkas muatan kontent, seperti menghilangkan ringkasan karakter,tanggal terbit artikel dan jumlah komentar, lalu hapus thumbanail gambar dengan menambahkan kode CSS seperti ini:

      [pre].iteminside,
      .itemfoot {
      display:none !important;
      }[/pre]

      lalu scroll sedikit kebawah untuk mengubah beberapa script variabel menjadi seperti ini:

      [pre]// Untuk enghilangkan tampilan
      Ganti nilainya menjadi false (true menjadi false)
      var showPostDate = true,
      showComments = true,
      ...
      ...
      numchars = 0, // Menghilangkan ringkasan
      imgBlank = ""; // Anda bisa menghapus kode ini seluruhnya[/pre]

      Hapus
  18. Tambah Cerdas aja ni Devy, good luck ya,..
    Ini adalah penjabaran dari Kalimat :
    Semakin banyak kita berbagi, maka akan didapat keberhasilan yang gemilang.

    SEMANGAT DEVY, semoga ga lelah untuk terus menjadi Motivator yang Inovatif.

    BalasHapus
  19. ijin pasang yo . . . mbak/mas nih . . . hehe

    BalasHapus
  20. Dari sekian blog baru ini yang membuat saya betah muter2 di halaman ini

    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