Tes Tes Tes

Bengkel Utak Atik Blog

Membuat Daftar Isi / Daftar Menu SENTUH

Terus terang kepala-ku sempat pening berbulan-bulan gara2 pengen buat widget ini,

Widget ini tadinya kuperoleh dari http://sites.google.com/site/epgstudiosite/javascript/jquery.min.js
Lalu ku-gabung2kan dengan beberapa postingan blog teman, eih tampil-nya cantik seperti daftar isi blog ini:
Aku berterima kasih sama yg buat program ini, Kalo teman2 laen ada yang sir silahkan kunjungi situs tempat sumber aslinya, di sana banyak pelajaran utk kalian, atau coba pakai cara-ku ini sbb:


LANGKAH PERTAMA
  • Masuk ke Blogger.
  • Pilih Rancangan pada bagian Edit HTML.
  • Centang/Contreng “Expand Template Widget”
  • Tekan Ctrl – F lalu copy paste kode </head>
  • Copy kode dibawah ini dan paste tepat diatas kode </head>


    <script src='http://sites.google.com/site/epgstudiosite/javascript/jquery.min.js' type='text/javascript'/>

    <script src='http://sites.google.com/site/epgstudiosite/javascript/ddaccordion.js' type='text/javascript'>



    </script>
    <script type='text/javascript'>
    ddaccordion.init({
    headerclass: &quot;silverheader&quot;, //Shared CSS class name of headers group
    contentclass: &quot;submenu&quot;, //Shared CSS class name of contents group
    revealtype: &quot;mouseover&quot;, //Reveal content when user clicks or onmouseover the header? Valid value: &quot;click&quot;, &quot;clickgo&quot;, or &quot;mouseover&quot;
    mouseoverdelay: 200, //if revealtype=&quot;mouseover&quot;, set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: [&quot;&quot;, &quot;selected&quot;], //Two CSS classes to be applied to the header when it&#39;s collapsed and expanded, respectively [&quot;class1&quot;, &quot;class2&quot;]
    togglehtml: [&quot;&quot;, &quot;&quot;, &quot;&quot;], //Additional HTML added to the header when it&#39;s collapsed and expanded, respectively [&quot;position&quot;, &quot;html1&quot;, &quot;html2&quot;] (see docs)
    animatespeed: &quot;fast&quot;, //speed of animation: integer in milliseconds (ie: 200), or keywords &quot;fast&quot;, &quot;normal&quot;, or &quot;slow&quot;
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    //do nothing
    }
    })
    </script>

    <style type='text/css'>
    .applemenu{
    margin: 5px 0;
    padding: 0;
    width: 170px; /*lebar menu*/
    border: 1px solid #9A9A9A;
    }
    .applemenu div.silverheader a{
    background: black url(http://sites.google.com/site/epgstudiosite/image/silvergradient.png) repeat-x center left;
    font: normal 12px Tahoma, &quot;Lucida Grande&quot;, &quot;Trebuchet MS&quot;, Helvetica, sans-serif;
    color: white;
    display: block;
    position: relative;
    width: auto;
    padding: 5px 0;
    padding-left: 8px;
    text-decoration: none;
    }
    .applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
    color: white;
    }
    .applemenu div.selected a, .applemenu div.silverheader a:hover{
    background-image: url(http://sites.google.com/site/epgstudiosite/image/silvergradientover.png);
    color: white;
    }
    .applemenu div.submenu{
    background: solid#05053f;
    padding: 5px;
    height: 300px;
    }
    </style>

  • Perhatikan huruf warna merah :width: 170px; merupakan ukuran lebar menu, silahkan anda ganti sesuai lebar sidebar yang anda gunakan.
  • border: 1px solid #9A9A9A; merupakan ukuran dan warna garis, anda ganti dengan yang diinginkan.
  • height: 300px; merupakan ukuran tinggi dari menu yang tampil setelah disorot mouse, ubah ukurannya sesuai keperluan.
  • Kode solid#05053f  adalah warna biground silahkan ganti dengan yg sesuai, #eeeeee=ke-abu2an, #ffffff=putih, #000000=hitam atau lainnya.
  • Setelah selesai pengeditan, klik tombol Simpan Template.

LANGKAH KEDUA
  • Masuk ke Elemen Halaman..
  • Klik Tambah Gadget.
  • Pilih HTML/JavaScript.
  • Perhatikan yang berwarna merah dan hijau
    1. http://harunarcom.blogspot.com adalah link yang akan terbuka pada tab baru.
    2. Artikel – Berita, Tutorial Bloger, Peta Wilayah, Materi IPS SMP Kls 7 (dst ada 10) adalah judul dari seetiap menu yang tampil.
    3. Jumlah menu yang ditampilkan pada kode diatas sejumlah 10 menu. kalo pingin menambah dengan menu lainnya, tinggal menambahkan kode seperti di bawah ini :
<div class="applemenu">
<div class="silverheader"><a href="http://harunarcom.blogspot.com/" target="_blank">Artikel - Berita</a></div>
<div class="submenu">
<div style="border: 1px solid #000000; overflow: auto; height: 300px;">
<script style="text/javascript" src="https://sites.google.com/site/bloggermyblog/TableOfContents.js"></script>
<script style="text/javascript"><br /></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://harunarcom.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999&amp;callback=showrecentposts"></script>


</div>

    1. Setelah selesai pengeditan tampilan menu sentuh, klik tombol Simpan.
    2. Lihat Blog anda.
  • Ganti kode warna merah dan warna hijau dibawah ini dengan situs-mu, lalu copy kode dan paste pada kolom yang tersedia.

<div class="applemenu">
<div class="silverheader"><a href="http://harunarcom.blogspot.com/" target="_blank">Artikel - Berita</a></div>
<div class="submenu">
<div style="border: 1px solid #000000; overflow: auto; height: 300px;">
<script style="text/javascript" src="https://sites.google.com/site/bloggermyblog/TableOfContents.js"></script>
<script style="text/javascript"><br /></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://harunarcom.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999&amp;callback=showrecentposts"></script>


</div>

</div>
<div class="applemenu">
<div class="silverheader"><a href="http://harunar-tutorial.blogspot.com/" target="_blank">Tutorial Bloger</a></div>
<div class="submenu">
<div style="border: 1px solid #000000; overflow: auto; height: 300px;">
<script style="text/javascript" src="https://sites.google.com/site/bloggermyblog/TableOfContents.js"></script>
<script style="text/javascript"><br /></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://harunar-tutorial.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999&amp;callback=showrecentposts"></script>


</div>

</div>
<div class="applemenu">
<div class="silverheader"><a href="http://harunar-peta.blogspot.com/" target="_blank">Peta Wilayah</a></div>
<div class="submenu">
<div style="border: 1px solid #000000; overflow: auto; height: 300px;">
<script style="text/javascript" src="https://sites.google.com/site/bloggermyblog/TableOfContents.js"></script>
<script style="text/javascript"><br /></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://harunar-peta.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999&amp;callback=showrecentposts"></script>


</div>

</div>
<div class="applemenu">
<div class="silverheader"><a href="http://harunar-ips7.blogspot.com/" target="_blank">Materi IPS SMP Kls 7</a></div>
<div class="submenu">
<div style="border: 1px solid #000000; overflow: auto; height: 300px;">
<script style="text/javascript" src="https://sites.google.com/site/bloggermyblog/TableOfContents.js"></script>
<script style="text/javascript"><br /></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://harunar-ips7.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999&amp;callback=showrecentposts"></script>


</div>

</div>
<div class="applemenu">
<div class="silverheader"><a href="http://harunar-ips8.blogspot.com/" target="_blank">Materi IPS SMP Kls 8</a></div>
<div class="submenu">
<div style="border: 1px solid #000000; overflow: auto; height: 300px;">
<script style="text/javascript" src="https://sites.google.com/site/bloggermyblog/TableOfContents.js"></script>
<script style="text/javascript"><br /></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://harunar-ips8.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999&amp;callback=showrecentposts"></script>


</div>

</div>
<div class="silverheader"><a href="http://harun-ar.blogspot.com/" target="_blank">Materi IPS SMP Kls 9</a></div>
<div class="submenu">
<div style="border: 1px solid #000000; overflow: auto; height: 300px;">
<script style="text/javascript" src="https://sites.google.com/site/bloggermyblog/TableOfContents.js"></script>
<script style="text/javascript"><br /></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://harun-ar.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999&amp;callback=showrecentposts"></script>


</div>

</div><div class="applemenu">
<div class="silverheader"><a href="http://harunar-bio.blogspot.com/" target="_blank">Pengalaman Hidup</a></div>
<div class="submenu">
<div style="border: 1px solid #000000; overflow: auto; height: 300px;">
<script style="text/javascript" src="https://sites.google.com/site/bloggermyblog/TableOfContents.js"></script>
<script style="text/javascript"><br /></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://harunar-bio.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999&amp;callback=showrecentposts"></script>


</div>

</div>
<div class="applemenu"><div class="silverheader"><a href="http://haruncampoeng.blogspot.com/" target="_blank">Gambar</a></div>
<div class="submenu">
<div style="border: 1px solid #000000; overflow: auto; height: 300px;">
<script style="text/javascript" src="https://sites.google.com/site/bloggermyblog/TableOfContents.js"></script>
<script style="text/javascript"><br /></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://haruncampoeng.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999&amp;callback=showrecentposts"></script>


</div>

</div>
<div class="silverheader"><a href="http://haruncmoneng.blogspot.com/" target="_blank">Album Photo</a></div>
<div class="submenu">
<div style="border: 1px solid #000000; overflow: auto; height: 300px;">
<script style="text/javascript" src="https://sites.google.com/site/bloggermyblog/TableOfContents.js"></script>
<script style="text/javascript"><br /></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://haruncmoneng.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999&amp;callback=showrecentposts"></script>


</div>

</div><div class="applemenu">
<div class="silverheader"><a href="http://campoengcmoneng.blogspot.com/" target="_blank">Koleksi Karya Pengunjung</a></div>
<div class="submenu">
<div style="border: 1px solid #000000; overflow: auto; height: 300px;">
<script style="text/javascript" src="https://sites.google.com/site/bloggermyblog/TableOfContents.js"></script>
<script style="text/javascript"><br /></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://campoengcmoneng.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999&amp;callback=showrecentposts"></script>


</div>
 

ARTIKEL TERKAIT:

Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)