?

Followers

×

Tentang Blog Ini×

Blog ini wadah merupakan media pembelajaran otodidak secara online bagi kalangan newbie seperti Andmin ini, akan tetapi belajar dan berusaha secara otodidak inilah yang membuat saya bisa berkreasi dengan ala kadarnya.

Salam pembuka dari Admin sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Jawa Timur.

Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini.

Nama :  Admin
Email :  admin[at]gmail[dot]com

by Admin

Sidebar Blog×

Daftar Blog Bacaanku×

Bagikan kepada teman!
Close Info

LINK FRIEND

Sampaikan pesan anda jika ingin memajang link blog anda di Id Tutor Plus pada  (Link Friend)

NAMA BLOGURL BLOGDESCRIPSI BLOG
KOD Bloghttp://kang-onk.blogspot.com/Konsep Blogging Sederhana
KOD Sharehttp://onk-shared.blogspot.comShare something beautiful for you
Klik Templatehttp://klik-template.blogspot.com/Beauty Premium Teamplate for You

Pembuatan Sitemap Interesting on Blog

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

Sitemap Interesting on Blog
Pembuatan Sitemap Interesting on Blog
#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: "http://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="http://cekidot.96.lt/file/js/tocConfig.js"></script>

Pengaturan

OpsiNilaiKeterangan
urlhttp://nama_blog.blogspot.comGanti nilainya menjadi url blog anda.
feedNum12Ganti nilainya menjadi, misal 40 jika Anda ingin menampilkan jumlah artikel lebih dari 12.
numChars100Digunakan untuk menentukan jumlah potongan snippet posting.
thumbWidth40Digunakan untuk menentukan ukuran besar kecil thumbnail/gambar posting.
newTabLinktrueJika bernilai true maka link akan terbuka pada tab baru begitupun sebaliknya jika bernilai false maka link tersebut akan termuat pada tab yang sama.
false
showDatestrueJika bernilai true maka tanggal penerbitan posting akan di tampilkan begitupun juga sebaliknya jika bernilai false maka tanggal penerbitan posting tidak akan di tampilkan.
false
labelNamefalseJika bernilai false, akan menampilkan artikel berdasarkan posting terbaru. Dan jika anda ingin menampilkan berdasarkan kategori ganti nilainya menjadi nama label anda, misal Code Snippet
Nama label
showSummariestrueJika 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.
false
showThumbnailstrueJika 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.
false
navTextBerikutnyaDigunakan untuk memanggil posting berikutnya.
frontTextKembali ke Awal ⇑Digunakan untuk memberitahukan jika post uda mencapai batas.
moreTextSelengkapnya ►Digunakan untuk text read more atau baca selengkapnya pada widget ini. Opsi ini akan muncul jika, Opsi showSummaries bernilai true
loadingMemuat Content...Sedang memuat content
searchingMencari...Sedang mencari content
noResultTak DitemukanContent tidak di temukan
loadCatReset Ulang Category...Mereset ulang label
noImagedata: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

Terakhir Diperbaharui

    5 comments

    24 September 2014 02.45 Permalink
    Wah mantap tutorialnya gan., Ctrl+D dulu dech
    27 September 2014 01.17 Permalink
    Dipersilahkan gan :-bd
    6 Oktober 2014 14.29 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
    8 Oktober 2014 18.20 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 <i rel="code">KODE ANDA</i>
    Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
    Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
    Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
    Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
    Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

    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.
    :):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya:=p*Klik untuk melihat kode!

    Konversi Kode di Sini  Pasang Link Gratis  Daftar Member Aktif

    Batal

    Ke atas!Ke bawah!