Welcome to My Blog!

 Daftar isi blog atau Sitemap sebenarnya bukan hal yang mutlak harus ada di sebuah blog. Namun, Daftar isi blog atau Sitemap akan memberikan kemudahan dan kenyamanan tersendiri kepada pengunjung blog anda. Bayangkan saja bila blog anda berisi ratusan bahkan ribuan artikel, pengunjung blog anda akan kesulitan untuk menemukan artikel-artikel yang telah anda tulis. Besar kemungkinan, mereka hanya akan mengandalkan mesin pencari untuk bisa datang ke blog anda, itupun kalau blog atau artikel blog anda mendapat posisi bagus di hasil pencarian search engine.
Bila pengunjung blog anda sudah bisa berlama-lama berada di blog anda karena dengan mudah menemukan artikel-artikel lain yang telah anda posting, maka blog anda semakin semakin disenangi oleh para pengunjung. Itu artinya, Daftar isi blog atau Sitemap sangat penting untuk memberikan kenyamanan kepada pengunjung agar betah di blog anda.

Bagaimana cara membuat Daftar isi blog atau Sitemap?

Dalam artikel ini saya akan membagikan Cara Membuat SITEMAP Blog paling mudah. Ada dua pilihan dalam menempatkan Daftar isi blog atau Sitemap, bisa ditempatkan pada widget, atau bisa juga di halaman khusus Daftar isi blog atau Sitemap. Berikut langkah-langkah cara paling mudah membuat Daftar isi blog atau Sitemap:

1. Buat postingan baru pada blogspot atau membuat halaman baru di blogspot, beri judul Daftar Isi (judul terserah anda).
2. Pilih opsi Edit HTML
3. Copy code berikut dan letakkan dalam postingan anda seperti membuat postingan biasa.

   <script src="https://sites.google.com/site/filesoepeno/file/sitemapblogger.js?attredirects=0&d=1"> </script> <script src="http://namabloganda.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"> </script>

4. Publish. Lihat hasilnya. 

Catatan:

• Ganti tulisan berwarna Biru dengan alamat url blog anda.
• Agar daftar ini tidak muncul di halaman depan, gantilah tanggal pada pilihan scheduled ke tanggal yang lebih dulu.
• Untuk melihat contoh nya lihat di halaman Daftar isi blog atau Sitemap Prasetyo Design.

Untuk membuat daftar isi blog pada widget, anda tinggal menambahkan widget melalui menu rancangan (design) dan pilih HTML/Javascript, dan masukkan script / kode yang sama seperti di atas. Agar tidak terlalu memakan tempat pada widget, gantilah tulisan warna biru sesuai dengan selera anda. Itu menunjukkan jumlah postingan yang akan ditampilkan pada daftar isi blog di widget.
Sekali lagi Mudah kan,,,,,

1. Copy paste kode CSS berikut pada website Anda. Jika pada Blogspot, copy paste sebelum kode ]]></b:skin> pada template Anda. Jangan lupa membackup terlebih dahulu template Anda supaya bisa dikembalikan jika terjadi kesalahan.
   
/* ######### CSS untuk Shade Tabs ######### */

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

.shadetabs li a.selected{ /*selected main tab style */
background-image: url(shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

/* ######### CSS untuk Inverted Modern Bricks II Tabs ######### */

.modernbricksmenu2{
padding: 0;
width: 362px;
border-top: 5px solid #D25A0B; /*Brown color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.modernbricksmenu2 ul{
margin:0;
margin-left: 10px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/
border-top: 1px solid white;
}

.modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/
color: white;
}

.modernbricksmenu2 a.selected{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
color: white;
border-color: #D25A0B; /*Brown color theme*/
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

/* ######### CSS untuk Indented CSS Tabs ######### */


.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 80%; width of menu*/
border-top: 0px solid navy; /*navy border*/
background: #e0e0e0 url(htp://h1.ripway.com/sinaga/gambar/indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: #000000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 0px solid navy; /*navy divider between menu items*/
}

.indentmenu ul li a:visited{
color: #000000;
}

.indentmenu ul li a:hover{
color: #66B5FF;
}

.indentmenu ul li a.selected{
color: #66B5FF !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: #e0e0e0 url(http://h1.ripway.com/sinaga/gambar/menutabbg.gif) center center repeat-x;
}


.tabcontentstyle{ /*style of tab content oontainer*/
border: none;
width: 450px;
margin-bottom: 1em;
padding: 10px;
font: normal 11px Arial;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}
   
2. Selanjutnya copy paste struktur berikut pada website atau blog Anda sebelum kode </head>:
   
<script src='http://h1.ripway.com/sinaga/blogspot/tabcontent.js' type='text/javascript'>script>


3. Masukkan struktur tab menu berikut pada bagian dimana Anda ingin menampilkan tab menu pada website atau blog Anda:
   
   <div id="pettabs" class="modernbricksmenu2">
<ul>
<li><a href="#" class="selected" rel="dog1">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="http://www.banditbatak.com" title="Klik untuk masuk ke situs BanditBatak.Com">Bandit Batak</a></li>
</ul>
</div>

<div style="padding: 5px; margin-bottom:1em">

<div id="dog1" style="font-size:11px; padding:5px;" class="tabcontent">
<img style="float:left;" src="http://h1.ripway.com/sinaga/gambar/bannerits.jpg"/>ITS diisukan menjadi kampus BHP. Siapkah mahasiswa ITS menghadapinya?Menolak atau menerima?<br/>
<i><a href="javascript: mypets.expandit('akhir')">Klik untuk memilih tab akhir</a></i>
</div>

<div id="dog2" style="font-size:11px; padding:5px;" class="tabcontent">
Isi Tab 2
</div>

<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(false)
mypets.setselectedClassTarget("link")
mypets.init()
</script></div>

4. Silahkan ganti tulisan "Tab 1", "Tab 2", dst dengan nama-nama tab menu yang Anda inginkan.
5. Coba perhatikan struktur Tab 1:
   <li><a href="#" class="selected" rel="dog1">Tab 1</a></li>
   class="selected", artinya adalah tab tersebut menjadi tab yang terbuka pertama kali.
   rel="dog1", artinya tab tersebut dihubungankan dengan "dog1".
   Adapun "dog1" didefenisikan sebagai isi dari Tab 1. Perhatikan struktur yang berwarna orange. Kita memberi atribut ID pada struktur div (kotak) sebagai "dog1". Artinya, isi dari div (kotak) tersebutlah yang akan dihubungkan dengan "Tab 1" dan menjadi isi dari tab tersebut.
6. Begitu pula dengan "Tab 2". Tab tersebut mempunyai rel="dog2". Sedangkan "dog2" merupakan struktur yang berwarna merah.
   
7. Jika kita ingin menambah tab baru, cukup buat struktur yang mirip dengan struktur "Tab 1" atau "Tab 2". Jadi, yang Anda lakukan adalah menambah tab bernama (misalnya)  "Tab 3" sehingga stukturnnya menjadi:
   
   <div id="pettabs" class="modernbricksmenu2">
<ul>
<li><a href="#" class="selected" rel="dog1">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
<li><a href="http://www.banditbatak.com" title="Klik untuk masuk ke situs BanditBatak.Com">Bandit Batak</a></li>
</ul>
</div>
.......
   Kemudian mendefenisikan "dog3" sebagai is "Tab 3", sehingga struktur lengkapnya menjadi:
   <div id="pettabs" class="modernbricksmenu2">
<ul>
<li><a href="#" class="selected" rel="dog1">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
<li><a href="http://www.banditbatak.com" title="Klik untuk masuk ke situs BanditBatak.Com">Bandit Batak</a></li>
</ul>
</div>

<div style="padding: 5px; margin-bottom:1em">

<div id="dog1" style="font-size:11px; padding:5px;" class="tabcontent">
<img style="float:left;" src="http://h1.ripway.com/sinaga/gambar/bannerits.jpg"/>ITS diisukan menjadi kampus BHP. Siapkah mahasiswa ITS menghadapinya?Menolak atau menerima?<br/>
<i><a href="javascript: mypets.expandit('akhir')">Klik untuk memilih tab akhir</a></i>
</div>

<div id="dog2" style="font-size:11px; padding:5px;" class="tabcontent">
Isi Tab 2
</div>

<div id="dog3" style="font-size:11px; padding:5px;" class="tabcontent">
Isi Tab 3
</div>

<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(false)
mypets.setselectedClassTarget("link")
mypets.init()
</script></div>

8. Coba perhatikan kembali kode CSS yang ada pada langkah 1. Kode tersebut terdiri dari beberapa bagian, yaitu Shade Tabs, Inverted Modern Bricks II Tabs, dan Indented CSS Tabs. Bagian-bagian tersebutlah yang menjadi style atau tipe dari Tab Menu yang bisa Anda ganti-ganti. Untuk menggunakannya cukup ganti bagian yang berwarna merah seperti di bawah ini pada struktur yang Anda copy paste pada langkah 3: 

<div id="pettabs" class="shadetabs">
<ul>
<li><a href="#" class="selected" rel="dog1">Tab 1</a></li>
......
   
   Misalkan ingin membuat Tab Menu bergaya Indented, maka ganti menjad:
   
   <div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" class="selected" rel="dog1">Tab 1</a></li>
......
   
   Sesuaikan dengan nama atribut class pada CSS tersebut.