Cara Membuat Widget Daftar Isi Blog Keren

Cara Membuat Widget Daftar Isi Blog Keren | Pintu Seo - Membuat Widget Daftar isi dalam Laman Blog memang sangat membatun para pengunjung untuk melihat daftar isi dalam suatu blog kali ini saya akan membagikan cara membuat widget daftar isinya , simak di bawah ini ya ^_^

DEMO

1. Masuk ke Blogger
2. Laman
3. Buat Laman Baru 
4. Masukan Kode HTML di bawah ini di bagian HTML Laman

<style type="text/css">
#table-outer {
  padding:7px 10px;
  margin:30px 30px 0;
}
#table-outer table {
  width:80%;
  margin:0;
}
#table-outer form {font:inherit;}
#table-outer td {padding:2px 2px;}
#table-outer label {
  font-weight:bold;
  color:#999;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  display:block;
  text-align:right;
  margin:0 10px 0 0;
  padding:4px 0 0;
}
#table-outer select[disabled] {opacity:.4;}
#post-searcher {
  display:block;
  margin:0;
  padding:0;
}
#table-outer input,#table-outer select {
  width:100%;
  background-color:#0a9;
  border:none;
  display:block;
  margin:0;
  padding:5px 5px;
  font-size:86%;
  text-transform:uppercase;
  color:#e00;
  outline:none;
  -webkit-box-shadow:inset 0 1px 3px black,0 1px 0 #000;
  -moz-box-shadow:inset 0 1px 3px black,0 1px 0 #000;
  box-shadow:inset 0 1px 3px black,0 1px 0 #000;
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
}
#table-outer input:focus,#table-outer select:focus {background-color:#090909;}
#feed-container {
  display:block;
  clear:both;
  margin:0 30px;
  padding:0;
  list-style:none;
  overflow:hidden;
  position:relative;
  border:1px solid #3c3c3c;
  border-top:none;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
#feed-container:after {
  content:"";
  display:block;
  width:1px;
  height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  background-color:#3c3c3c;
}
#feed-container li {
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #3c3c3c;
  color:#999;
  width:50%;
  float:left;
  display:inline;
}
#feed-container li .inner {
  margin:15px 16px;
  height:116px;
  overflow:hidden;
  word-wrap:break-word;
  text-overflow:ellipsis;
}
#feed-container li a {
  text-decoration:none;
  color:#5687B8;
}
#feed-container li a:hover {
  text-decoration:none;
  color:#eee;
}
#feed-container li a.toc-title {font-weight:bold;}
#feed-container li .news-text {margin:10px 0 0;}
#feed-container li img {
  margin:0 10px 5px 0;
  padding:5px;
  background-color:#222;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  float:left;
}
#result-desc {
  margin:0 30px;
  padding:0;
  border-bottom:4px solid #303030;
}
#result-desc span,#result-desc div {
  display:block;
  margin:0;
  padding:5px 10px 7px;
  color:#D64D52;
}
#result-desc div {color:inherit;}
#feed-nav {
  margin:10px 30px 0;
  text-align:center;
  font-weight:bold;
  text-transform:uppercase;
}
#feed-nav a,#feed-nav span {
  background-color:#111;
  padding:0;
  color:#999;
  text-decoration:none;
  display:block;
  height:30px;
  line-height:32px;
}
#feed-nav a:hover,#feed-nav a:active {
  background-color:black;
  color:white;
}
#feed-nav span {cursor:wait;}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>

<br />
<div id="table-outer">
<table border="0">
        <tbody>
<tr>
                <td><label for="feed-order">Urutkan artikel berdasarkan:</label>
                </td>
                <td><select id="feed-order">
                        <option selected="" value="published">POSTING TERBARU</option>
                        <option value="updated">POSTING DIPERBAHARUI</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="label-sorter">Filter artikel berdasarkan kategori:</label>
                </td>
                <td><select disabled="" id="label-sorter">
                        <option selected="">Loading....</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="feed-q">Cari dengan kata kunci:</label>
                </td>
                <td><form id="post-searcher">
<input id="feed-q" type="text" />
                    </form>
</td>
            </tr>
</tbody>
    </table>
</div>
<br />
<br />
<header id="result-desc"></header>
<br />
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src="http://yourjavascript.com/571353024/hg.js" type="text/javascript"></script>

Note's

Kalian Juga Bisa Mengedit Sesuai Rekreasi kalian ya .

Share :

Tweet

✚

Related Post