Pembuatan Sitemap Interesting on Blog ·Id Tutor Plus

NAMA BLOG	URL BLOG	DESCRIPSI BLOG
KOD Blog	https://kang-onk.blogspot.com/	Konsep Blogging Sederhana
Stok Data	https://stokdata.blogspot.com/	Share something beautiful for you
Cipta Desa	http://ciptadesa.com	Seputar Informasi Tentang Desa

Wednesday, July 9, 2014

Seperti yang dituliskan sebelumnya tentang pembuatan daftar isi perlebel dan table of contents interesting bisa menarik perhatian pembaca untuk diterapkan dalam blog Anda.

Pada kesempatan yang berbahagia ini, Admin ingin mengintegrasikan kedua tutorial tersebut kedalam sebuah tool sitemap yang minimalis dan responsive. Bagi kalangan blogger ini untuk memudahkan pencarian artikel atau tulisan kedalam page statis

Lihat Demo

#resultDesc {
  margin:0;
  padding:0 0;
  color:#999;
  font-weight:bold;
}

#resultDesc span {
  margin:0 auto;
  padding:5px 10px 7px;
  color:#D64D52;
}

#feedNav,
#feedNav:hover {
  margin:0 auto;
  height:34px;
  line-height:34px;
  text-align:center;
  color:#fff;
  font:bold 12px/30px Arial,Sans-Serif;
  background-color:#3c3c3c;
  border-top:1px solid #444;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}

#feedNav a,
#feedNav span {
  color:#999;
  padding:0;
  text-decoration:none;
}

#feedNav:hover {
  color:white;
  background-color:#444;
}

#feedNav:active {
  background-color:#527915;
}

#feedNav span {
  cursor:wait;
}

#table-outer {
  height:30px;
  text-align:center;
  padding:0;
  margin:15px 20px 0;
}

#table-outer #orderFeedBy {
  float:left;
}

#table-outer #postSearcher {
  float:right;
}

#table-outer input {
  display:inline-block;
  vertical-align:right;
  margin:0 2px 0 0;
  padding:0 0;
}

#table-outer select[disabled] {
  opacity:.4;
}

#postSearcher input,
#table-outer select {
  width:33%;
  background-color:#111;
  border:none;
  padding:5px 5px;
  font:normal normal 10px Tahoma,Verdana,Arial,Sans-Serif;
  text-transform:uppercase;
  color:#777;
  outline:none;
  -webkit-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  -moz-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  box-shadow:inset 0 1px 3px black,0 1px 0 #444;
}

#postSearcher {
  width:33%;
  padding:0;
  margin:0;
}

#postSearcher input {
  width:96%;
  padding:5px 5px;
}

#postSearcher input:focus,
#table-outer select:focus {
  background-color:#090909;
}

#tabbed-toc {
  width:100%;
  margin:5px auto 0;
  background-color:#333;
  border-left:1px solid #222;
  border-right:1px solid #444;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  overflow:hidden;
  position:relative;
  color:#888;
}

#tabbed-toc .loading {
  margin:20px 47%;
}

#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

#tabbed-toc #labelSorteres {
  width:20%;
  float:left;
  margin:0 auto;
}

#tabbed-toc #labelSorter ul {
  position:relative;
  margin-top:-36px;
  background-color:#333;
}

#tabbed-toc #labelSorter li a,
#tabbed-toc #labelSorteres #loadCat li a {
  display:block;
  font:bold 10px/28px Helmet,Freesans,Sans-Serif;
  height:34px;
  line-height:34px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#CCC;
  border-top:1px solid #444;
  border-left:1px solid #444;
  border-bottom:1px solid #222;
  border-right:1px solid #222;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 10px;
  margin:0;
  cursor:pointer;
}

#tabbed-toc #labelSorteres #loadCat .allowed,
#tabbed-toc #labelSorter .allowed {
  cursor:not-allowed;
}

#tabbed-toc #labelSorter li a:hover {
  outline:none;
  background-color:#3c3c3c;
  color:white;
}

#tabbed-toc #labelSorter li a.active-tab {
  color:#C4DEF0;
  font-size:13px;
  font-weight:bold;
  outline:none;
  z-index:1;
  padding:0 10px;
  margin:0;
  background-color:#3c3c3c;
}

#tabbed-toc #labelSorter li a.active-tab:hover {
  cursor:not-allowed;
}

#tabbed-toc #labelSorter .disabled,
#tabbed-toc #labelSorter .disablet {
  display:none;
}

#tabbed-toc .feedline {
  width:80%;
  float:right;
  text-align:left;
  margin:0 auto;
  padding:0;
  background-color:#333;
  border-bottom:1px solid #222;
}

#tabbed-toc #feedContainer {
  background-color:#333;
}

#tabbed-toc #feedContainer li {
  float:left;
  width:100%;
  margin:0 auto;
  list-style:none;
  background-color:#333;
  font:10px Helmet,Freesans,Sans-Serif;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}

#tabbed-toc #feedContainer li.bold {
  width:50%;
}

#tabbed-toc #feedContainer li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}

#tabbed-toc #feedContainer li a.item-title {
  display:block;
  position:relative;
  font-weight:normal;
  font-size:13px;
  color:#999;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  height:34px;
  line-height:34px;
  padding:0 12px;
  text-transform:uppercase;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}

#tabbed-toc #feedContainer li a.item-title:hover,
#tabbed-toc #feedContainer li a.item-title:focus {
  color:#999;
  outline:none;
  border-left:4px solid #066696;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}

#tabbed-toc #feedContainer li .summary {
  display:block;
  height:50px;
  padding:10px 12px 10px;
  font-style:italic;
  color:#ccc;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;
}

#tabbed-toc #feedContainer li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #3c3c3c;
  background-color:#292929;
}

#tabbed-toc #feedContainer li .itemfoot {
  clear:both;
  height:34px;
  line-height:34px;
  padding:0 10px;
  color:#666;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;
  position:relative;
}

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

#tabbed-toc #feedContainer li .itemfoot a.itemrmore:hover {
  color:#555;
  background-color:transparent;
  text-decoration:none;
  border-color:transparent;
}

<div id="table-outer">
    <select id="orderFeedBy">
        <option value="published" selected>POSTING TERBARU</option>
        <option value="updated">POSTING DIPERBAHARUI</option>
    </select><span id="resultDesc"></span>
    <form id="postSearcher">
        <input type="text" id="feed-q-box" value="" autocomplete="off" onkeyup="resetField();" />
    </form>
</div>
<div id="tabbed-toc"><span id="labelSorteres"><div id="loadCat"></div><div id="labelSorter"><li class="toc-tab-item"><a class="allowed" href="javascript:changeSort(0);">SEDANG MEMUAT LABEL...</a></li></div></span>
    <div class="feedline">
        <ul id="feedContainer"></ul>
        <div id="feedNav"></div>
    </div>
</div>

<script type="text/javascript">
var tocConfig = {
    url: "https://nama-blog.blogspot.com", // Ganti nilainya menjadi URL blog anda
    feedNum: 12, // Jumlah posting yang tampil
    numChars: 100, // Jumlah ringkasan posting
    thumbWidth: 40, // Ukuran thumbnail posting
    newTabLink: true, // Membuka link pada tab baru
    showDates: true, // Menampilkan tanggal publis
    labelName: false, // Menentukan label yang akan di tampilkan
    showSummaries: true, // Menampilkan ringkasan posting
    showThumbnails: true, // Menampilkan thumbnail posting
    navText: "Berikutnya &#9660;", // Memuat artikel lainnya
    frontText: "Kembali ke Awal &uArr;", // Artikel sudah mencapai batas
    moreText: "Selengkapnya &#9658;", // Readmore atau baca selengkapnya
    loading: "<span>Memuat Content...</span>", // Sedang memuat content
    searching: "<span>Mencari...</span>", // Sedang mencari content
    noResult: "Tak Ditemukan", // Content tidak di temukan
    loadCat: "Sedang Memuat Label...", // Memuat label
    resetCat: "Reset Ulang Category...", // Reset label
    noImage: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==", // Artikel tanpa gambar
    monthNames: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"] // Bulan terbit artikel
};
</script>
<script src="https://cekidot.96.lt/file/js/tocConfig.js"></script>

Pengaturan

Opsi	Nilai	Keterangan
url	https://nama_blog.blogspot.com	Ganti nilainya menjadi url blog anda.
feedNum	12	Ganti nilainya menjadi, misal 40 jika Anda ingin menampilkan jumlah artikel lebih dari 12.
numChars	100	Digunakan untuk menentukan jumlah potongan snippet posting.
thumbWidth	40	Digunakan untuk menentukan ukuran besar kecil thumbnail/gambar posting.
newTabLink	true	Jika bernilai `true` maka link akan terbuka pada tab baru begitupun sebaliknya jika bernilai `false` maka link tersebut akan termuat pada tab yang sama.
newTabLink	false
showDates	true	Jika bernilai `true` maka tanggal penerbitan posting akan di tampilkan begitupun juga sebaliknya jika bernilai `false` maka tanggal penerbitan posting tidak akan di tampilkan.
showDates	false
labelName	false	Jika bernilai `false`, akan menampilkan artikel berdasarkan posting terbaru. Dan jika anda ingin menampilkan berdasarkan kategori ganti nilainya menjadi nama label anda, misal Code Snippet
labelName	Nama label
showSummaries	true	Jika bernilai `true` maka `numChars` atau jumlah potongan snippet posting akan ditampilkan begitupun juga sebaliknya jika bernilai `false` maka `numChars` atau jumlah potongan snippet posting tidak akan di tampilkan.
showSummaries	false
showThumbnails	true	Jika bernilai `true` maka `thumbWidth` atau thumbnail/gambar posting akan ditampilkan begitupun juga sebaliknya jika bernilai `false` maka `thumbWidth` atau thumbnail/gambar posting tidak akan di tampilkan, ini berkaitan dengan showSummaries nilainya harus sama.
showThumbnails	false
navText	Berikutnya	Digunakan untuk memanggil posting berikutnya.
frontText	Kembali ke Awal ⇑	Digunakan untuk memberitahukan jika post uda mencapai batas.
moreText	Selengkapnya ►	Digunakan untuk text read more atau baca selengkapnya pada widget ini. Opsi ini akan muncul jika, Opsi showSummaries bernilai `true`
loading	Memuat Content...	Sedang memuat content
searching	Mencari...	Sedang mencari content
noResult	Tak Ditemukan	Content tidak di temukan
loadCat	Reset Ulang Category...	Mereset ulang label
noImage	data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==	Digunakan untuk menggantikan posting yang tidak memiliki gambar.
monthNames	["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"]	Nama nama bulan saat posting di publish atau di terbitkan Opsi ini muncul bila Opsi showSummaries bernilai `false`

Pasang Iklan Anda di Sini

5 comments

BalasHapus

Anonymous

September 24, 2014 Permalink

Wah mantap tutorialnya gan., Ctrl+D dulu dech

Id Tutor Plus

September 27, 2014 Permalink

Dipersilahkan gan :-bd

Eka Ikhsanudin

October 07, 2014 Permalink

mantep tutorial pembuatan sitemap interisting on blog nya sob, aku ijin bookmark dulu yah, nanti mau coba pasang di blog kalo cocok dengan tempaltenya :)

Komentar ini telah dihapus oleh penulis! ❖ Hapus

October 09, 2014 Permalink

Kecoocokan pendukung dengan template yang ada tergantung bagaimana kita mau mendesain, mulai dari bentuk, warna dan desain lainnya.. :)

Catatan :
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag KODE ANDA
Kode yang panjang bisa menggunakan tag KODE PANJANG ANDA
Untuk menyisipkan gambar, gunakan tag URL GAMBAR
Untuk menyisipkan judul, gunakan tag JUDUL ANDA DI SINI...
Untuk menciptakan efek tebal gunakan tag TEKS ANDA DI SINI...
Untuk menciptakan efek huruf miring gunakan tag TEKS ANDA DI SINI...

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
$:\$ $\o/$ Klik untuk melihat kode!

Konversi Kode di Sini Tutorial pasang link Daftar Member Aktif