Showing posts with label isi. Show all posts
Showing posts with label isi. Show all posts

Wednesday, December 28, 2016

Cara membuat widget Daftar isi

Cara membuat widget Daftar isi


Semua blogger ingin blognya masuk dalam daftar mesin pencari dibagian atas, karena itu pasti akan membuat traffiknya meningkat. Tapi selain dari mesin pencari, kita juga harus menebar link posting di blog kita. Kalau lama kelamaan, kita malas juga menebar link.

1. Dasbor > Rancangan / Layout > Tambah / Add gadget

2. Pilih HTML / JavaScript

3. Copy kode dibawah ini

   <div style="background: transparent url(#) no-repeat scroll 0 0; border:1px solid white; height:250px; overflow:auto; width:280px;text-align:left;float:center">
    <div id="cl_option">
    Loading... </div>
    <div id="cl_content_list">
    </div>
    <script type="text/javascript">
    var jumlah_kata_dalam_ringkasan = 200;
    </script>
    <script src="http://sites.google.com/site/kibagusnet/x-design/Daftarisi-hdx.js">


    </script>
    <script src="http://faishal94.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">


    </script><div style="text-align:center">Cara membuat <a href="http://faishal94.blogspot.com/2011/11/cara-membuat-widget-daftar-isi.html">ini</a></div></div>

4. Paste kode diatas pada kotak konten Kode HTML / JavaScript

Simpan !

Ket:
- ganti faishal94.blogspot.com dengan nama domain blog sobat

Go to link Download

Read more »
Posted by at
Labels: , , , ,

Saturday, December 24, 2016

Cara Membuat Daftar Isi Abu Farhan

Cara Membuat Daftar Isi Abu Farhan


Cara Membuat Daftar Isi Abu Farhan - Selamat sore sobat blogger semua !!! Setelah dulu aq sempat membagikan artikel tentang Cara membuat daftar isi blog secara otomatis. Kali ini, aq akan membagikan artikel yang tidak jauh berbeda, yaitu Cara Membuat Daftar Isi Abu Farhan. Daftar isi ini termasuk dalam daftar isi otomatis, tetapi hanya berbeda di segi penampilannya. Daftar isi Abu Farhan ini sangat simpel dan rapi ( Accordion pack style ), untuk lebih jelasnya, silahkan sobat lihat screenshots dibawah ini.

Daftar Isi Abu Farhan
Sebelum di Klik
Daftar Isi Abu Farhan
Setelah di Klik
 Jika sobat tertarik untuk menggunakannya, silahkan ikuti Tutorial dibawah ini.

  • Login ke akun blogger.com sobat.
  • Pada dashboard, klik Laman => Laman baru => Laman kosong.
  • Lalu, silahkan sobat copy kode dibawah ini, dan paste pada halaman posting sobat. Ingat !!! Paste dalam bentuk HTML ! Bukan Compose !
Click HTML. Not Compose !

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">
</script>
<script src="http://fahrurrozi18.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript">
</script>
Keterangan :
Silahkan sobat ganti Teks yang berwarna Merah dengan Url blog sobat sendiri.

  • Kalau sudah, klik Publish / Publikasikan.
Sekian tutorial dariku tentang Cara Membuat Daftar Isi Abu Farhan. Semoga artikel ini bermanfaat. :)

Go to link Download

Read more »
Posted by at
Labels: , , , , ,

Tuesday, December 20, 2016

Cara Membuat Daftar Isi Blog Secara Otomatis

Cara Membuat Daftar Isi Blog Secara Otomatis



How to Create a Blog Content Automatically | New

English


 this occasion I will explain how to create a table of contents on the blog automatically. Table of contents is very useful to make it easier for visitors to find articles or blog content that they are looking for / want. While the benefits for the blog admin blog content can also increase the number of page views the blog.


To see what it looks like, you can see the demo first:

 DEMO

Well how about, if you want to put content on your blog? To install the widget on your blog content, you can do some simple steps to make the following content:
The steps to install the widget on the blog contents:

1. Login to your blogger account

2. Click on "New Page" and then click "Empty Pages", for more details, please look at the picture below:

How to Create a Blog Content Automatically
Cara Membuat Daftar Isi Blog Secara Otomatis
Gambar 1.1

3. Then select the HTML Mode


4. Then copy the script code below:
<div style="border: 1px solid #eee; height: 700px; overflow: auto; padding: 10px; width: 530px;">
<script src="http://widgetsitemap.googlecode.com/files/daftarisi.js"></script><script src="http://airlandzz.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> </div>


Description:

     Replace the red code (Airlandzz): the address of your blog!

6. Then you put on the blank page before,
Cara Membuat Daftar Isi Blog Secara Otomatis
Gambar 1.2
How to Create a Blog Content Automatically

Figure 1.2

Caption 1.2:

1. Choose HTML mode

2. Place code on the blank page

3. Give the title (up to you)

4. Click "Publish"

7. completed

How, easy right? Maybe thats all I can say, now you are trying to practice tingga. Similarly, an article about how to put content on your blog automatically. Although this article is simple, but hopefully can be useful. Thank you
 

Indonesia


Cara Membuat Daftar Isi Blog Secara Otomatis - kesempatan ini saya akan menjelaskan bagaimana cara membuat daftar isi di blog secara otomatis. Daftar isi sangat berguna untuk mempermudah para pengunjung blog dalam mencari artikel atau konten yang mereka cari / inginkan. Sedangkan manfaat untuk admin blog yaitu daftar isi blog juga dapat meningkatkan jumlah page view blog. 
Untuk melihat tampilannya seperti apa, anda bisa melihat demonya terlebih dahulu :
DEMO
Nah bagaimana, apakah anda berminat untuk memasang daftar isi di blog anda? Untuk memasang widget daftar isi di blog, anda dapat melakukan beberapa langkah mudah membuat daftar isi berikut ini :

Langkah-langkah memasang widget Daftar Isi di blog :

1. Login ke akun blogger
2. Klik "Laman Baru" kemudian klik "Laman Kosong", untuk lebih jelasnya, silahkan perhatikan gambar dibawah ini :
Cara Membuat Daftar Isi Blog Secara Otomatis
Gambar 1.1
3. Kemudian pilih Mode HTML
4. Lalu copy kode script dibawah ini :
<div style="border: 1px solid #eee; height: 700px; overflow: auto; padding: 10px; width: 530px;">
<script src="http://widgetsitemap.googlecode.com/files/daftarisi.js"></script><script src="http://airlandzz.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> </div>

Keterangan :

  • Ganti kode yang berwarna merah (Airlandzz ) : dengan alamat blog anda!

6. Kemudian anda letakan pada halaman kosong tadi, 
Cara Membuat Daftar Isi Blog Secara Otomatis
Gambar 1.2
Keterangan gambar 1.2 :
1. Pilih mode HTML
2. Letakan kode pada halaman kosong
3. Berikan judul (terserah anda)
4. Klik "Publikasikan"
7. Selesai
Bagaimana, mudah bukan? Mungkin hanya itu yang dapat saya sampaikan, sekarang tingga anda yang mencoba mempraktekannya. Demikian artikel tentang bagaimana cara memasang daftar isi di blog secara otomatis. Walaupun artikel ini sederhana, tapi mudah-mudahan dapat bermanfaat. Terimakasih

Go to link Download

Read more »
Posted by at
Labels: , , , , , ,

Friday, December 9, 2016

Cara Membuat Daftar Isi di Blog Secara Otomatis

Cara Membuat Daftar Isi di Blog Secara Otomatis


Cara Membuat Daftar Isi di Blog Secara OtomatisMembuat Daftar Isi di Blog Secara Otomatis - Kali ini saya akan share cara membuat daftar isi di blog secara otomatis , karena biasanya kita membuat daftar isi dengan cara manual , dan cara tersebut mungkin sangat melalahkan dan membutuhkan waktu lama , mungkin dengan daftar isi di blog secara otomatis ini , dapat mempermudahkan anda dalam membuat daftar isi , cara membuat daftar isi otomatis ini tidak terlalu sulit ( mudah ) , bahkan seorang newbie pun seperti saya bisa membuatnya .

Oh ya , nanti demo daftar isi di blog secara otomatis ini , demonya akan seperti di bawah ini :

daftar isi di blog secara otomatis

Berikut Cara Membuat Daftar Isi di Blog Secara Otomatis :

1. Pertama sobat buat terlebih dahulu artikel baru 
2. Kemudian sobat Pilih HTML untuk memasukan kodenya nanti ( ingat brow HTML bukan Kompos ) . untuk lebih jelasnya lihat gambar dibawah ini

Cara Membuat Daftar Isi di Blog Secara Otomatis


4. Di dalam HTML tersebut kemudian sobat copy kan kode html di bawah ini 

<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height:270px; background-color: none; text-align: left;">
<script style="text/javascript" src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://ahmadsuyadi.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

Note :
Sebelum anda menyimpan dan mempublikasikan daftar isi tersebut maka 1 hal yang harus anda perhatikan adalah sobat harus mengganti ahmadsuyadi.blogspot.com dengan nama blog anda sendiri

Go to link Download

Read more »
Posted by at
Labels: , , , , , , ,

Wednesday, November 16, 2016

Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren

Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren


Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren. Widget daftar isi merupakan salah satu yang tidak boleh ditinggalkan. Karena, site map atau daftar isi dapat menginformasikan kepada pengunjung apa apa saja yang di posting oleh blog tersebut. Ya, sebab daftar isi menampilkan semua artikel secara kesluruhan. Tapi ada juga daftar isi yang hanya menampilkan beberapa artikel. Contohnya widget daftar isi berdasarkan satu label.

Daftar Isi Tampilan Tab

Widget daftar isi kini sudah banyak di share oleh para blogger. Jenisnya pun juga sudah banyak. Ada yang diurut berdasarkan tanggal, ada yang menurut abjad, widget daftar isi berdasarkan label, dan ada juga widget daftar isi tampilan tab yang keren. Kali ini saya akan bahas lebih lanjut mengenai Widget Daftar Isi Tampilan Tab yang Keren.

Seperti gambar di atas lah tampilan widget ini. Dikiri terdapat Tab Tab yang menampilkan label dari blog, dan di kanan menampilkan judul posting. Keunggulan dari tab ini, pengunjung dapat memilih kategori posting mana yang ingin dia lihat. Jika diklik, tanpa loading di kiri widget sudah muncul judul posting pada label yang dipilih.

Bagus kan? Lihat live demo nya di Site Map blog saya ini. Pada daftar isi, juga sudah saya tambahkan CSS berwarna biru. Supaya kelihatan nyambung dengan tema warna blog Jona Rendra ini yang juga biru. Mau pasang widget daftar isi tampilan tab yang keren ini? Baca selengkapnya artikel ini.

Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren

1. Login ke blogger
2. Pada dashboard, pilih blog anda lalu masuk ke menu Entri
3. Klik Buat Entri, setelah itu masuk ke edit entri mode HTML (caranya klik saja tulisan HTML yang ada disamping Compose)
4. Copy kode dibawah ini, lalu paste tepat di bagian HTML entri tersebut.


<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#EBEBEC;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#000;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Tahoma,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Tahoma,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#D8D8D8;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#676767;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #676767;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#000;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#D2D2D2;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #5C5C5C;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#999;
  color:none;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#4D4F4D;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>


<br />
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
&nbsp;<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://jonarendra.blogspot.com/",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://jonarendra.googlecode.com/files/daftar-isi-keren.js" type="text/javascript"></script>  </div>

5. Sekarang tinggal di kustomisasikan sendiri dengan mengganti url berwarna biru dengan alamat blog anda.
6. Terakhir klik Publikasikan dan selesai. Coba buka halaman daftar isi yang telah anda pasang tadi. Sudah muncul kan?

Ups, kode diatas ternyata kode dengan widget daftar isi tema berwarna putih abu abu. Widget daftar isi style biru kodenya seperti ini


<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#8A94F0;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#000;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Tahoma,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Tahoma,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#C4C9F8;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#181D67;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #181D67;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#051466;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#999;
  color:none;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>


<br />
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
&nbsp;<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://jonarendra.blogspot.com/",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://jonarendra.googlecode.com/files/daftar-isi-keren.js" type="text/javascript"></script>  </div>

Jangan lupa ganti url berwarna biru dengan url blog anda

Akhirnya selesai sudah Membuat Widget Daftar Isi Tampilan Tab Yang Keren. Jadi, saya sudah berikan 2 tema warna daftar isi diatas. Tinggal pilih saja widget mana yang kelihatannya cocok dengan blog anda.

Widget ini memang sebaiknya di pasang di postingan. Ini dikarenakan cukup besar. Kalau dipasang di sidebar akan kurang menarik. Tetapi jika anda butuh widget yang dipasang di sidebar, mungkin Widget Daftar Isi Berdasarkan Satu Label akan cocok.

Merasa terlalu lebih banyak CSS yang ada pada widget ini? Mau yang polos? Widget Daftar Isi Berdasarkan Label Tampilan Ringan lah yang tepat. Itulah keseluruhan artikel Jona Rendra yang berjudul Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren, semoga dapat berguna untuk menghias blog anda. Biasanya postingan daftar isi itu diletakkan sebagai menu di menu horizontal. Seperti blog ini.

Jika ada kesulitan saat mengerjakan langkah langkah diatas, widget tidak muncul atau sebagainya, silahkan tanyakan lewat komentar.

Go to link Download

Read more »
Posted by at
Labels: , , , , , , , ,

Saturday, November 12, 2016

Cara Membuat Daftar Isi Sitemap Tabulasi untuk Blog

Cara Membuat Daftar Isi Sitemap Tabulasi untuk Blog


Cara Membuat Daftar Isi (Sitemap) Tabulasi untuk Blog
YANG dimaksud Daftar Isi Tabulasi adalah daftar isi berbentuk tabel seperti ilustrai gambar di samping. Contoh atau demonya bisa dilihat di Sitemap Versi 1 punya CB di Top Menu. Keren kan?

Tipe atau bentuk daftar isi berupa tabulasi ini dibagi oleh DTE. Anda bisa kunjungi langsung ke sana untuk mendapatkan kodenya, lengkap dengan kode CSS dan Javascript yang bisa diunduh.

Sebelumnya, CB sudah share tentang cara membuat daftar isi blog yang bentuknya sederhana, per kategori, seperti di Sitemap Versi 2.

Anda tinggal pilih, mau sitemap berupa tabulasi atau daftar isi "konvensional". CB sih bikin dua-duanya, namanya juga Contoh Blog (CB), jadi nyontohin dong :)

Cara Membuat Daftar Isi (Sitemap) Tabulasi

1. Page > New Page
2. Isi kolom judul dengan Daftar Isi atau Sitemap
3. Pilih mode HTML

mode html page daftar isi blog


4. Copy & Paste Kode Berikut ini di kolom konten. Ganti alamat blognya dengan alamat blog Anda.

<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css"/>
<div id="tabbed-toc"><span class="loading">Memuat...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://contohblognih.blogspot.com", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style=color:red;>New!</em>" // HTML for the "New!" text
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>

5. Klik "Publish!

Selamat, kini blog Anda sudah dilengkapi Peta Situs (Sitemap), Table of Content (TOC), alias Daftar Isi sebagai menu, navigasi, sekaligus internal link blog Anda!

Lihat DEMO

Itu dia Cara Membuat Daftar Isi (Sitemap) Tabulasi untuk Blog platform Blogspot. Good Luck!

Go to link Download

Read more »
Posted by at
Labels: , , , , , , ,

Friday, November 4, 2016

Cara membuat Daftar isi Otomatis menurut Label Dengan Mudah

Cara membuat Daftar isi Otomatis menurut Label Dengan Mudah


 
kalau mau liat fotonya klik kana terus View image yah :L
Selamat Pagi Sobat Blogger :x , saya hari ini berbagi Cara membuat Daftar isi Otomatis menurut Label Dengan Mudah. Daftar isi ini mempermudah pengunjung atau pembuat/pengarang mencari artikel yamg di inginkan dengan cepat,,,, oleh karena itu mari kita buat bersama-sama :d

Ada 2 Jenis Daftar isinya yaitu Menggunakan Scroll seperti di Gambar dan tdk berscroll,,
- Pertama Anda Ke Dasbor Blogger >>> Laman >>> Laman baru


Kalau sudah Dilaman Baru perhatikan gambar berikut



Kemuadian copy kode Script ini ,,,
yang ini untuk berscroll

<div style="background-color: none; border: 1px solid #000000; height: 500px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;">
<script src="<script type="text/javascript" src="http://yourjavascript.com/3498596215/daftar-isi.js"></script>
</script><script src="http://anggadwisaputrablog.blogspot.com//feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

yang tidak berscroll
<script src="<script type="text/javascript" src="http://yourjavascript.com/3498596215/daftar-isi.js"></script>
</script><script src="http://anggadwisaputrablog.blogspot.com//feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti Text yang berwarna merah dengan alamat blog sobat Dah selesai cemungut :t


Go to link Download

Read more »
Posted by at
Labels: , , , , , , , ,

Cara Membuat Daftar Isi dengan Titik Titik Otomastis di Word

Cara Membuat Daftar Isi dengan Titik Titik Otomastis di Word


Ms. Word Tutorial Cara Membuat Garis Titik-titik otomasti di Daftar Isi,- Daftar isi merupakan hal yang perlu atau wajib ada di sebuah makalah, Skripsi, Proposal dan lain-lain. Kebanyak membuat daftar isi dibuat dengan asal-asalan yaitu seperti membuatnya dengan cara manual, seperti memberi titik-titik secara menggunakan tombol titik di keyboard. namun cara tersebut kurang efektif dikarenakan kebanyakan titik yang dibuat tidak sama alias tidak rata.

Sebenarnya ada cara paling mudah untuk membuat Daftar Isi dengan titi-titik otomatis atau rata semua, cara ini bisa digunakan dalam semua versi Microsoft Word seperti Word 2003, 2007, 2010, 2013 dan versi terbaru lain. Nah jika anda mencari Tutorial Care membuat daftar Isi Titik-titik otomatis di Ms. Word. silahkan ikuti tutorial dibawah ini.

Cara Membuat Daftar Isi Titi-Titik Otomatis di Ms. Word


1. Pertama silahkan Buka Ms. Word anda, Sebagai contoh disini saya menggunakan Microsoft Word 2007. kemudian buat atau tambah satu lembar kosong, dan Pastikan Rules sudah Tercentang, Caranya silahkan pilih menutab View dan Centang Rules.


2. Setelah Itu silahkan Buat judul "DAFTAR ISI" dan silahkan buat Daftar isi Pertama yaitu "Kata Pengantar". Kemudian silahkan Klik dua kali di lembar kerja Ms. Word, maka otomatis akan muncul tanda "L" berwarna merah diatas. Silahkan Buat dua tanda " L" dan aturlah posisinya seperti gambar dibawah ini.


3. Selanjutnya silahkan Klik salah satu Tanda "L"Tersebut. maka akan muncul tampilan FORM pengaturan. Berikut Penjelasanya:

1. Pada bagian Tab stop position dan Default tab stops: Biarkan seperti itu atau Abaikan saja.
2. Pada Bagian Alignment: Silahkan pilih Right
3. Pada Bagian Leader: Silahkan pilih 2....
4. Terakhir tinggal Set dan OK


4. Kemudian silahkan perhatikan pada Tanda "L" Pastikan tanda tersebut sudah terbalik, atau berlawanan. Untuk lebih jelasnya silahkan lihat pada gambar di bawah ini.


5. Biasanya tanda Titik-Titik akan otomastis muncul, Jika tidak silahkan Tekan tombol TAB pada keyboard. maka otomatis titik-titik akan terisi otomatis dengan ukuran yang sama dan jangan lupa kasih No Halaman.


6. Untuk setiap kali menambah Daftar Isi silahkan tekan Tombol TAB dan kasih no Halaman, serta untuk menyesuaikan panjang pendek Titik-titik silahkan tarik ke kanan atau ke kiri Tanda "L"

Begitulah Cara mudah membuat garis titik-titik Otomasti di daftar Isi, Sekian yang dapat saya bagikan dan Semoga bermanfaat.

Go to link Download

Read more »
Posted by at
Labels: , , , , , , , ,

Thursday, October 20, 2016

Cara membuat daftar isi di ms word 2007

Cara membuat daftar isi di ms word 2007


Assalamualaikum wr.wb

Hai Sob apa kabar ? kali ini ane mau posting cara membuat daftar isi di ms word 2007 Untuk pengguna ms word 2010 insyaAllah akan saya post pada postingan berikutnya soalnya ane belum terlalu paham dengan ms word 2010.Karena lagi semesteran ane males ngepost yang harus ngeupload dulu...he..he..mungkin sudah banyak di antara teman-teman yang sudah tahu apalagi yang udah master pasti udah tahu...tapi gak papalah maklum ane masih newbie...jadi biar ane gak lupa ane share aja...Okelah langsung aja :

1.Pada horizontal ruler klik ,aktifkan dua tabulasi tergantung kebutuhan (jika aktif ditandai dengan tanda siku)


2. Ketik halaman judul,
selanjutnya klik kanan pada lembar kerja, pilih Paragraph...



3. Pilih Tabs...

4.Pilih 14,76 pada "Tab stop position" (sesuaikan dengan tab stop yang anda buat)
Pada bagian leader pilih 2......
Klik Set
OK
5. setelah kursor berada di bagian belakang halaman judul, tekan spasi (di keyboard)
akan muncul gairs titik-titik
tekan spasi sekali lagi akan pindah ke tab stop berikutnya, ketik nomor halaman
tekan enter untuk pindah baris

6. Ketik halaman pengesahan,letakkan kurso di bagian belakang halaman pengesahan, tekan spasi 2 kali  seperti pada langkah 5

7. lakukan langkah 5 berulang pada baris berikutnya, hasilnya akan tampak seperti di bawah ini

 


Demikian post kali ini.Wassalam....

sumber : komputerseo
Untuk membuat daftar isi di word 2007, maka perlu dilakukan setting atau pengaturan pada tab (tabulasi) sehingga hasilnya bisa terlihat rapi. Anda bisa membuat tabilasi (tab) dua bagian, bagian pertama untuk diisi dengan leader titik-titik, dan tabulasi kedua diisi dengan nomor halaman.

Untuk membuat daftar isi pada word 2007 lakukan prosedur berikut:

1.Pada horizontal ruler klik ,aktifkan dua tabulasi tergantung kebutuhan (jika aktif ditandai dengan tanda siku)

2. Ketik halaman judul,
selanjutnya klik kanan pada lembar kerja, pilih Paragraph...



3. Pilih Tabs...

4.Pilih 14,76 pada "Tab stop position" (sesuaikan dengan tab stop yang anda buat)
Pada bagian leader pilih 2......
Klik Set
OK
5. setelah kursor berada di bagian belakang halaman judul, tekan spasi (di keyboard)
akan muncul gairs titik-titik
tekan spasi sekali lagi akan pindah ke tab stop berikutnya, ketik nomor halaman
tekan enter untuk pindah baris

6. Ketik halaman pengesahan,letakkan kurso di bagian belakang halaman pengesahan, tekan spasi 2 kali  seperti pada langkah 5

7. lakukan langkah 5 berulang pada baris berikutnya, hasilnya akan tampak seperti di bawah ini

- See more at: http://www.komputerseo.com/2010/02/cara-membuat-daftar-isi-di-word-2007.html#sthash.l08ANCDh.dpuf
Untuk membuat daftar isi di word 2007, maka perlu dilakukan setting atau pengaturan pada tab (tabulasi) sehingga hasilnya bisa terlihat rapi. Anda bisa membuat tabilasi (tab) dua bagian, bagian pertama untuk diisi dengan leader titik-titik, dan tabulasi kedua diisi dengan nomor halaman.

Untuk membuat daftar isi pada word 2007 lakukan prosedur berikut:

1.Pada horizontal ruler klik ,aktifkan dua tabulasi tergantung kebutuhan (jika aktif ditandai dengan tanda siku) - See more at: http://www.komputerseo.com/2010/02/cara-membuat-daftar-isi-di-word-2007.html#sthash.l08ANCDh.dpuf
Untuk membuat daftar isi di word 2007, maka perlu dilakukan setting atau pengaturan pada tab (tabulasi) sehingga hasilnya bisa terlihat rapi. Anda bisa membuat tabilasi (tab) dua bagian, bagian pertama untuk diisi dengan leader titik-titik, dan tabulasi kedua diisi dengan nomor halaman.

Untuk membuat daftar isi pada word 2007 lakukan prosedur berikut:

1.Pada horizontal ruler klik ,aktifkan dua tabulasi tergantung kebutuhan (jika aktif ditandai dengan tanda siku)

2. Ketik halaman judul,
selanjutnya klik kanan pada lembar kerja, pilih Paragraph...



3. Pilih Tabs...

4.Pilih 14,76 pada "Tab stop position" (sesuaikan dengan tab stop yang anda buat)
Pada bagian leader pilih 2......
Klik Set
OK
5. setelah kursor berada di bagian belakang halaman judul, tekan spasi (di keyboard)
akan muncul gairs titik-titik
tekan spasi sekali lagi akan pindah ke tab stop berikutnya, ketik nomor halaman
tekan enter untuk pindah baris

6. Ketik halaman pengesahan,letakkan kurso di bagian belakang halaman pengesahan, tekan spasi 2 kali  seperti pada langkah 5

7. lakukan langkah 5 berulang pada baris berikutnya, hasilnya akan tampak seperti di bawah ini

- See more at: http://www.komputerseo.com/2010/02/cara-membuat-daftar-isi-di-word-2007.html#sthash.l08ANCDh.dpuf
Untuk membuat daftar isi di word 2007, maka perlu dilakukan setting atau pengaturan pada tab (tabulasi) sehingga hasilnya bisa terlihat rapi. Anda bisa membuat tabilasi (tab) dua bagian, bagian pertama untuk diisi dengan leader titik-titik, dan tabulasi kedua diisi dengan nomor halaman.

Untuk membuat daftar isi pada word 2007 lakukan prosedur berikut:

1.Pada horizontal ruler klik ,aktifkan dua tabulasi tergantung kebutuhan (jika aktif ditandai dengan tanda siku)

2. Ketik halaman judul,
selanjutnya klik kanan pada lembar kerja, pilih Paragraph...



3. Pilih Tabs...

4.Pilih 14,76 pada "Tab stop position" (sesuaikan dengan tab stop yang anda buat)
Pada bagian leader pilih 2......
Klik Set
OK
5. setelah kursor berada di bagian belakang halaman judul, tekan spasi (di keyboard)
akan muncul gairs titik-titik
tekan spasi sekali lagi akan pindah ke tab stop berikutnya, ketik nomor halaman
tekan enter untuk pindah baris

6. Ketik halaman pengesahan,letakkan kurso di bagian belakang halaman pengesahan, tekan spasi 2 kali  seperti pada langkah 5

7. lakukan langkah 5 berulang pada baris berikutnya, hasilnya akan tampak seperti di bawah ini

- See more at: http://www.komputerseo.com/2010/02/cara-membuat-daftar-isi-di-word-2007.html#sthash.l08ANCDh.dpuf

Go to link Download

Read more »
Posted by at
Labels: , , , , , , ,
Subscribe to: Posts (Atom)