Sitemap Minimalis Untuk Blog - Tampilan yang minimalis terkesan apa adanya, namun tetap terlihat mewah dan elegan untuk menghias menu Daftar Isi di blog Anda. Design sitemap ini saya apit dengan border bingkai ribbon pada sisi atas dan bawah, sedangkan untuk tampilan warna menggunakan background:linear-gradient dengan pemudaran warna pada sisi left dan right. Dan hasilnya:





DEMO SHOW




Untuk mengatur kecepatan muat halaman, saya meringkas beberapa perintah JavaScript yang mangatur loading-open, menghapus perintah jQuery dan menggantikannya dengan perintah variable-labelSorter, dan hasilnya waktu muat halaman dari 4,532 second menjadi 1.851 second, cukup ringan bukan.?.

Sitemap Theme


Bagaimana.? Anda tertarik ingin mencoba Sitemap Minimalis ini pada blog, namun sebelumnya saya akan berikan beberap koleksi Daftar Isi blog sebagai pilihan buat sahabat semua pecinta SAHABAT BLOGGER 77, Koleksinya lihat pada TAB dibawah ini:





Sitemap Minimalis Untuk Blog All Codes
1.1 CSS Element

  • Edit Template
  • Temukan kode ]]></b:skin>
  • Copy semua CSS dibawah ini, lalu letakkan tepat diatasnya



#toc-outer {
  font:normal 11px/14px Verdana,Sans-Serif;
  color:black;text-align:left;margin:-25px 10px 0 10px;
  background-color:white;border-left:3px solid #39f;
  border-right:3px solid #39f;overflow:hidden}

#loadingscript {font:bold 20px/normal Arial;text-align:center;padding:30px 0px}
.itemposts {margin:10px 10px 0px;height:auto;overflow:hidden;display:block}
.ribbon-top {
  font:bold 16px/40px Cambria,Georgia,Times,Serif;
  color:#fff;width:auto;padding:0px 20px;
  background: linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  background:-webkit-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  background:-moz-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  background:-o-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  position:relative;margin:0 auto;text-align:center}

.ribbon-top:before {
  content:"";position:absolute;top:100%;left:0px;
  width:0px;height:10px;border-width:6px;border-style:solid;
  border-color:#39f #39f transparent transparent}

.ribbon-top:after {
  content:"";position:absolute;top:100%;right:0px;
  width:0px;height:10px;border-width:6px;border-style:solid;
  border-color:#39f transparent transparent #39f}

.itemposts h6 {
  margin:0px 0px 10px;font:bold 15px/17px Sans-Serif;
  color:#6495ED;padding:0px 0px}

.itemposts h6 a {color:#285A7E}
.itemposts h6 a:hover {color:red}
.itemposts img {
  float:left;height:72px;width:72px;
  margin:0px 10px 5px 0px;padding:2px;
  background-color:white;border:1px solid #ccc;
  box-shadow:2px 4px 5px #ccc}

.itemposts .itemfoot {
  clear:both;padding:5px 10px;margin:10px 0px 0px;
  background: linear-gradient(left, #2c4762 80%,#b80000 50%,#b80000 100%);
  background:-webkit-linear-gradient(left, #2c4762 80%,#b80000 50%,#b80000 100%);
  background:-ms-linear-gradient(left, #2c4762 80%,#b80000 50%,#b80000 100%);
  background:-moz-linear-gradient(left, #2c4762 80%,#b80000 50%,#b80000 100%);
  background:-o-linear-gradient(left, #2c4762 80%,#b80000 50%,#b80000 100%);
  color:white;font-style:italic;overflow:hidden}

.itemposts .itemfoot::before {
  display: inline-block;content:"";width: 12px;height: 12px;
  border-radius: 50%;margin: 1px 10px 0 -3px;
  background: #39f;float:left;
  box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4)}

.itemposts .itemfoot a.itemrmore {font-weight:bold;color:#d9d9d9;float:right}
.itemposts .itemfoot a.itemrmore:hover {color:#FFF8DC}
#itempager {padding:30px 0px}
#pagination, #totalposts {
  display:block;color:black;
  font:bold 10px Verdana,Arial,Sans-Serif;padding:0px;
  margin-bottom:10px;text-align:center}

#pagination span, #pagination a {
  color:white;display:inline;margin:0 1px;
  padding:3px 5px;text-indent:0px;
  background-color:#008080}

.ribbon-bot {
  font:bold 16px/28px Cambria,Georgia,Times,Serif;
  color:#fff;width:auto;padding:0px 20px;
  background: linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  background:-webkit-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  background:-moz-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  background:-o-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  position:relative;margin:-30px auto;text-align:center}

.ribbon-bot:before {
  content:"";position:absolute;bottom:100%;right:0px;
  width:0px;height:0px;border-width:5px;border-style:solid;
  border-color: transparent transparent #39f #39f}

.ribbon-bot:after {
  content:"";position:absolute;bottom:100%;left:0px;
  width:0px;height:0px;border-width:5px;border-style:solid;
  border-color:transparent #39f #39f transparent}

#pagination a:hover {background-color:#b80000}
#pagination span.actual {background-color:#b80000}
#pagination span.hidden {display:none}


1.2 HTML Code Input
Sebelumnya ganti siteUrl="http://sahabatblogger77.blogspot.com" dengan URL Blog Anda, selanjutnya Copy HTML-JavaScript berikut, dan letakkan pada formulir kosong Laman blog Anda, kode lengkapnya seperti ini:


<div class="ribbon-top">DAFTAR ISI BLOG</div>
<script type="text/javascript">
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Total posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &raquo;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://sahabatblogger77.blogspot.com",
    postPerPage    = 10,
    numChars       = 370,
    imgBlank       = "http://3.bp.blogspot.com/-HEXSthA2Y_k/VFB86mxv7VI/AAAAAAAAA_k/rkPrcdyxGMU/s1600/sb77-image6.jpg";
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/minimalis-theme-sitemap-design.js"></script>
<div class="ribbon-bot">Terima Kasih Atas Kunjungan Saudara</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Sitemap Minimalis Untuk Blog
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 =

40 komentar

  1. simple dan bgus sitemap nya ,,,,

    sy juga pakai sitemap yg devy bikin sblmnya ,,,hehe

    BalasHapus
    Balasan
    1. oh iya, Devy baru ngeh kalau mas Fiu menggunakan sitemap dari saya, kalau gak slah yang model facebook ya mas, tadi barusan saya lihat.

      Hapus
    2. iyah ,,,, kn pas bangt warnanya dg blog sy pake ,,,
      gpp kn ? itung2 biar ingt sama devy trs ,,, :)

      Hapus
    3. hehe..gak apa-apa mas, kan tujuan devy untuk berbagi, jadi bebas siapa saja yang mau menggunakan karya devy. termasuk sitemap ini.

      Hapus
    4. hehehehe .... sblm dan ssdh maksih banget untuk devy ,,, smoga ilmun selalu bertambah, bermanfaat dan berkah ,,, :)

      Hapus
    5. amin..
      sudah ah, devy pamit dulu ya mas, mau bobo, besok ada kuliah pagi jadi biar besok bisa bangun cepat, next time kita bahas lagi hal ini disini, ok mas fiu yang ganteng.
      hehe..

      Hapus
    6. oke deh devy yang cantik ,,,, met bobo yah ,,, :)

      Hapus
    7. Cieee ... cieeee mas Fiu :d

      Hapus
  2. yang lain pada kemana nich?
    kogk cuman berdua doang :d

    BalasHapus
  3. Wah makin gaya dan simple pake sitemap ini..ijin nyoba di blog unikajaib dev..

    BalasHapus
  4. sitemap nya keren sekali nih mbak devy tadi saya lihat demo nya ringan banget :) selain memperindah daftar isi pasti pengunjung bakal tambah betah nih kalo ini dipasang :)

    BalasHapus
  5. sitemap nya keren sekali nih mbak devy tadi saya lihat demo nya ringan banget :) selain memperindah daftar isi pasti pengunjung bakal tambah betah nih kalo ini dipasang :)

    BalasHapus
    Balasan
    1. bukan hanya betah saja mas, bisa-bisa mereka dengan suka rela mau menginap, hehe..!!

      Hapus
    2. Menginap dimana nih?
      *curiga*wkwk

      Hapus
  6. sitemap tuh daftar isi? maaf saya gaptek :D

    BalasHapus
  7. Assalamu Alaikum waduh soal css seperti saya kurang tahu terimakasih tutorialnya

    BalasHapus
    Balasan
    1. sama donk, saya juga belum tahu.?
      kalau begitu terimaksihnya saja dech yang saya terima. hehe..

      Hapus
  8. tak simpen dulu mbk sitemap ini, tertarik saya. makasih..

    BalasHapus
  9. Terimakasih neng,,,,Keren sitemapnya :)

    BalasHapus
  10. Tadi liat demo-nya, keren gitu.
    Ada lho bisa paham CSS gini tapi ngakunya baru ngeblog sebulan. Ada.

    BalasHapus
    Balasan
    1. hehe..tadi kan berkomentar seperti itu agar kita sesama blogger bisa saling berbagi dan membenarkan apalagi perdana comment, kalau saya bilang saya sudah ahli CSS kan gak mungkin, hanya bisa, itupun cuma sedikit kok mas.

      tetapi selamat datang ya diblog Sahabat Blogger 77 yang semerawut ini, belum bisa merapihkan mas,hehe..

      Hapus
    2. Oh gitu :d

      Iya, mbak terima kasih sambutannya. minumnya teh manis aja ya, saya nggak minum kopi soalnya. :)

      Salam blogger.

      Hapus
  11. Oya, Sitemap ini sudah saya gunakan di blog saya yang lain mbak, terima kasih atas sharingnya ya, hmmm terlihat elegant mbak sitemap nya

    BalasHapus
    Balasan
    1. saya juga mau pakai sitemap ini ya pak... Eh, mbak... boleh khan :d

      Hapus
  12. cocok banget vy, tapi ya gitu tea, ada keterangan jumlah total postingnya, malu artikelnya baru beberapa biji hihi..

    BalasHapus
    Balasan
    1. biji apa teh?
      hehe :d

      Hapus
    2. beda ya kalau blognya tentang biji - bijian hehehe.... tapi gak apa khan bijinya sedikit juga ... :d

      Hapus
  13. siip mbak cocok untuk blog saya yang satunya nich

    BalasHapus
  14. Waw keren dan simpel sitemap ... minimalis juga .... cocok sepertinya untuk blog saya

    BalasHapus
  15. dari kemarin mau pasang inih, tp yg muncul cuma kotak birunya sj Vy..!, load artikel nda muncul2..hihihi.. padahal serasi dgn warna blog.. ;((

    BalasHapus
    Balasan
    1. <div class="ribbon-top">DAFTAR ISI BLOG</div>
      <script>
      var showPostDate = true,
      showComments = true,
      idMode = true,
      .....
      .....
      » siteUrl = "http://sahabatblogger77.blogspot.com",
      </script>
      <script src="https://s-blogger77.googlecode.com/svn/trunk/minimalis-theme-sitemap-design.js"></script>
      <div class="ribbon-bot">Terima Kasih Atas Kunjungan Saudara</div>


      perhatikan tanda panah mas, mungkin simbol Petik ( " ) dan Koma ( , ) diakhir URL terhapus.

      Hapus
  16. keren desain sitemapnya, sekarang saya masih suka sitemap alakadarnya yang diterapkan di blog saya aja ...

    BalasHapus
  17. saya udah ada halaman sitemap
    tapi yang ini boleh juga :d

    BalasHapus
  18. Kalau saya lihat malahan seperti halaman depan Blog daftar isinya. :-d

    BalasHapus
  19. Banyak sekali koleksi tampilan sitemapnya mba,, (h)

    Oya saya boleh Request gak mba.. cara bikin rss news seperti rsspump di blog saya.. tapi saya pengennya di buat Rss pakai css tanpa iframe ataupun .js. soalnya kalau pakai cara iframe harus manggi 2 kali ya mba ;(

    BalasHapus
    Balasan
    1. hati-hati dalam penggunaan iframe mas, karena secara tidak langsung kita juga membuka link lain dengan penggunaan iframe, lebih baik menggunakan js,

      kalau js memanggil even yang terjadi saat itu dimana elemen ini kita letakkan, sedangkan iframe, membuka 2halam sekaligus yang bersumber dari halaman blog kita.

      Hapus
  20. wah, bagus tampilannya, simple dan menarik.

    BalasHapus
  21. terima kasih ya mbak sitemap nya, udah dipasang nih hehe.. warnanya cocok banget sama warna blog :d

    BalasHapus
    Balasan
    1. sangat cocok dengan tampilan warna di blog mas, tadi sudah saya lihat, namun ada beberapa judul yang tertutupi oleh style ribbon.

      lihat pada kode ini mas:

      #toc-outer {
      font:normal 11px/14px Verdana,Sans-Serif;
      color:black;text-align:left;margin:-25px 10px 0 10px;
      background-color:white;border-left:3px solid #39f;
      border-right:3px solid #39f;overflow:hidden}


      ubah kode margin menjadi seperti ini: margin:0 10px 0 10px;

      lalu ubah juga kode margin pada ribbon-bot seperti ini:

      .ribbon-bot {
      .....
      .....
      position:relative;margin:10px auto;text-align:center}

      Hapus
  22. koq errror blog ana mba....d mskin css d atas
    mampir ya mba d blog http://infotuotrial.blogspot.com
    mhn solusinya..ana masih dalam tarap belajar.

    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