Daftar Isi Responsive Model Tema Facebook

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>