Tampilkan postingan dengan label Daftar Isi. Tampilkan semua postingan
Tampilkan postingan dengan label Daftar Isi. Tampilkan semua postingan

Kamis, 15 November 2012

Menu dTree,Membuat Arsip / Archive Blog Seperti Folder Windows Explorer

Membuat Archive Blog atau Menu Seperti dalam Bentuk Folder2 Windows Explorer [dTree]

cara mudah membuat daftar isi,link,blogroll,archive blog dalam bentuk folder-folder seperti pada windows explorer.
Baca artikel ini dengan teliti (termasuk curhat penulisnya pent-),hal ini supaya pembahasan trik ini dapat bekerja dan dijalankan dengan baik.
Bismillah - hi,hello sobat blogger,seneng,gembira,sukacita (sama aja deng!),itulah sekelumit perasaan yang sekarang penulis sedang rasakan,kenapa? ada apa?

Ya,karena sore ini akhirnya penulis bisa meluangkan waktu buat kembali menyapa sobat blogger,sekaligus ada trik sederhana dalam menghias blog yang ingin kami publikasikan.

Sobat lihat demo-nya di SINI

Betul sob,untuk sekedar memperkaya konten pada blog sederhana ini,kami menambahkan satu artikel yang berkaitan dengan menghias blogroll,daftar link,archive / arsip blog,maupun menu navigasi blogger dalam bentuk folder-folder layaknya dtree folder pada windows explorer,ya seperti pada screenshot gambar diatas.

I.Apa saja yang kita butuhkan?

Pertama kita harus memiliki file dalam extention *.js yang akan mengeksekusinya,dan file *.css dalam tampilannya.
Adalah destroydrop.com,yang telah menyediakan script dalam membuat menu dTree untuk blogger/blogspot ini.
Untuk file *.js dan *.css nya sobat bisa download di SINI.
iNGAT gan,jangan merubah kode apapun didalam script tersebut,pelanggaran hak cipta :D

TETAPI,untuk tahap belajar,saya telah menyediakan url script filenya yang sobat bisa copy di:
Untuk file *.js nya di:
http://membuatgempar.net23.net/dtree.js
Untuk file *.css nya di:
http://membuatgempar.net23.net/dtree.css
II.Bagaimana kita menerapkan kedua script tersebut?

Mengapa kami menuliskan 'untuk tahap belajar'?,ya,karena jika sobat menginginkan sumber script yang akan mengeksekusi 'menu dtree' ini dari hosting miliki pribadi,akan memerlukan penjelasan yang panjang,oleh karenanya,untuk langkah awal sobat bisa gunakan scriptnya dari url diatas.

Tentu,script ini akan tetap bekerja jika file tersebut belum di remove oleh pemiliknya,untuk itu,jika sobat menginginkan script tersebut selalu dapat bekerja,tentu saja langkah yang sobat seharusnya lakukan adalah memang menggunakan hosting pribadi,TAPI sekali lagi,blog ini hanya untuk tahap belajar saja,jadi meskipun sobat tidak memiliki hosting pribadi selama file tersebut belum saya hapus,Insya Allah trik ini akan tetap berjalan baik (kcuali klo kena hack ya gan! hehe)

Ya,kedua script dari url diatas (file js dan css) inilah yang nantinya akan kita letakkan pada tag 'head' pada halaman blog yang kita miliki.

III.Bagaimana penjelasan detail nya dalam menerapkan trik ini?

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak selanjutnya pilih Edit Html dan contreng 'Expand Widget Templates'.
Atau untuk tampilan baru blogger,sobat pilih Dashboard lalu pilih Templates kemudian klik Edit Html selanjutnya klik Proceed baru kemudian sobat contreng 'Expand Widget Templates',lihat gambar:
trik mudah membuat menu dtree blogger blogspot-membuat label blog - archive atau arsip blog - blogroll - daftar isi - sitemap - daftar artikel - menu navigasi dalam bentuk fisik gambar folder.
Templates

merubah - mengganti - mengubah label - arsip blog menjadi gambar folder-folder.
Edit Html

cara mudah membuat daftar isi,link,blogroll,archive blog dalam bentuk dTree windows explorer.
Proceed

cara membuat label - kategori blogger blogspot menjadi menu dtree.
Contreng Expand Widget Templates

Setelah itu,sobat cari kode berikut:
<head>

Setelah sobat temukan,persis diBAWAHnya letakkan kedua script ini:
<link href='http://membuatgempar.net23.net/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://membuatgempar.net23.net/dtree.js' type='text/javascript'/>

Lalu sobat simpan Templates.

Selanjutnya,sobat pergilah ke Dashboard lalu pilih Tata Letak selanjutnya pilih Add New Gadget.
Atau untuk tampilan baru blogger,sobat pilih Dashboard lalu pilih Layout kemudian klik Add a Gadget,lalu pilih HTML/Javascript dalam mode html,lihat gambar:

cara buat menu bertingkat-tingkat berfolder.
Layout / Tata Letak

cara memasang menu dtree di blogger.
Add A Gadget

membuat - memasang daftar isi - sitemap blogger dalam bentuk menu dtree.
Html/Javascript

cara bentuk folder-folder seperti pada windows explorer untuk arsip - label -kategori - blogroll - link blogger.
Pilih mode HTML

Dan letakkan kode berikut,lalu simpan.
<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://1.bp.blogspot.com/-RbQWnGW5bd8/UKJGKQD3f2I/AAAAAAAACmA/oLAHt0hhYUc/s200/pelajaran%2Bblog%2Bplus.gif" /><b>Buka</b></a> | <a href="javascript: d.closeAll();"><img src="http://2.bp.blogspot.com/-F6ylYYXiatg/UKJKASk86eI/AAAAAAAACnQ/XB9Ka_qHyO4/s200/pelajaran%2Bblog%2Bminus.gif" /><b>Tutup</b></a></p>
<script type="text/javascript">

<!--

d = new dTree('d');

d.add(0,-1,'Home','#');

d.add(1,0,'Menu 1')

d.add(3,1,'sub menu 1','');

d.add(10,3,'edit','#');

d.add(20,3,'edit','#');

d.add(30,3,'edit','#');

d.add(40,3,'edit','#');

d.add(50,3,'edit','#');

d.add(60,3,'edit','#');

d.add(70,3,'edit','#');

d.add(80,3,'edit','#');

d.add(90,3,'edit','#');

d.add(100,3,'edit');

d.add(110,3,'edit','#');

d.add(120,3,'edit','#');

d.add(5,1,'sub menu 2');

d.add(10,5,'edit','#');

d.add(20,5,'edit','#');

d.add(30,5,'edit','#');

d.add(40,5,'edit','#');

d.add(50,5,'edit','#');

d.add(60,5,'edit','#');

d.add(70,5,'edit','#');

d.add(80,5,'edit','#');

d.add(90,5,'edit','#');

d.add(2,0,'menu 2','','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(10,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(20,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(20,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(30,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(40,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(50,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(60,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(4,0,'menu 3','#','menu 3','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(6,0,'menu 4','#','menu 4','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(7,0,'menu 5','#','menu 5','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(8,0,'menu 6','#','menu 6','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

document.write(d);

//-->
</script>
</div>

**Keterangan:
Untuk tanda '#',sobat ganti dengan url tujuan misal http://.....
Sedang untuk kode yang saya beri nama 'edit',sobat rubah sesuai dengan keinginan,yang nantinya akan terbaca dalam menu dTree yang sedang kita bahas ini.

Selamat men'gulik' dan berkreasi,sampai jumpa kembali ya sob :D
Read more > Menu dTree,Membuat Arsip / Archive Blog Seperti Folder Windows Explorer
Diposting oleh Befitnes di 05.45 0 komentar
Label: , , , , , ,

Kamis, 12 Juli 2012

Script Untuk Daftar Isi Blog / Situs (SiteMap)

Membuat Daftar Isi Blog dengan Javascript

Masih ingat dengan script daftar isi ciptaan abu farhan beberapa waktu lalu yang sampai saat ini beliau masih menjadi rujukan para blogger senior?

Kali ini tidak jauh berbeda,mungkin kamii hanya njiplak kali ya (copas lagi dah!),namun script ini memang sangat efektif,untuk contoh fisiknya,sobat bisa lihat di SINI

Cara menerapkannya pun sangat mudah,hanya lakukan posting seperti biasa,letakkan script dan sobat bisa lihat hasilnya.

Langkah dan Cara Memasang / Membuat Script Daftar Isi Blog

Pertama,sobat kunjungi dashboard lalu pilih 'New Post'

cara membuat daftar isi blog keterangan new
Lihat Gambar lebih Besar di SINI


Setelah itu,pilih tab 'Edit HTML' bukan mode 'Comppose'

daftar isi dalam posting
Lihat Gambar lebih Besar di SINI


Kemudian letakkan script daftar isi berikut:

<link rel="stylesheet" media="screen" href="http://membuatgempar.net23.net/index-script-blogger.css" type="text/css" type="text/css" />

<script type="text/javascript">
var showPostDate = true,
showComments = true,
idMode = true,
sortByLabel = false,
labelSorter = "JQuery",
loadingText = "Loading...",
totalPostLabel = "Jumlah Artikel:",
jumpPageLabel = "Halaman",
commentsLabel = "Komentar",
rmoreText = "Selengkapnya &#9658;",
prevText = "Prev",
nextText = "Next",
siteUrl = "http://pelajaran-blog.blogspot.com",
postsperpage = 10,
numchars = 370,
imgBlank = "http://1.bp.blogspot.com/_n7xseT2-HDU/Saz6WSR1ptI/AAAAAAAAANY/QA1vxRormlY/s200/Loggo-pelajaran-Blog.gif";
</script>

<script type="text/javascript" src="http://membuatgempar.net23.net/index-script-blogger.js"></script>


Dan beri nama pada judul seperti biasa sobat posting,lalu klik 'Publish Post'

membuat daftar isi blog javascript
Lihat Gambar lebih Besar di SINI


Dan sobat bisa lihat hasilnya dengan mengklik tombol 'View Post',moga berhasil ya.

script daftar isi
Lihat Gambar lebih Besar di SINI
Read more > Script Untuk Daftar Isi Blog / Situs (SiteMap)
Diposting oleh Befitnes di 06.02 0 komentar
Label: , , , ,

Rabu, 21 Juli 2010

Cara Membuat Daftar Isi di Blogspot

Membuat Daftar Isi pada Blog: "

Hallo!! baru sempet update lagi nich! Membuat Daftar Isi,berhubung 3 hari pulang ke kampung Purworejo,he..he..

Tapi disini aku tidak mau ngomongin soal pengalaman aku waktu di kampung,ntar panjaaang dech ceritanya..Buat Daftar tentang Isi

Langsung aja yach! sesuai judul artikel pelajaran kali ini,kita akan membuat Daftar Isi Pada Blog,contohnya anda sudah bisa melihat Daftar Isi pada Blog ini.

Sebelumnya,dari mana saya dapat artikel ini? ya..dari senior kita semua tentunya,
Kang Rohman di Blog Tutorialnyanya.

Siapa sich yang belum pernah berkunjung ke Blog nya?Isi dari Daftar Blog

Meskipun demikian,Pelajaran Blog,tanpa mengurangi etika sopan santun Blogging,akan menjabarkan lagi,bagaimana sich membuat Daftar Isi pada Blog.

Langkah pertama,Pergi Dashboard lalu pilih Tata Letak,selanjutnya pillih Edit HTML.
Selanjutnya,beri contreng Partai pilihan kamu,..

Hus ! bukan maksudnya,contreng tulisan Expand Widget Template,seperti di bawah ini :

Daftar Isi Dibuat
Selanjutnnya,cari kode di bawah ini:
<b:include data='post' name='post'/>
Untuk mempermudah pencarian,tekan Ctrl+F pada Keyboard anda,pakai keyboard khan?
Setelah ketemu kode diatas,Hapus kode tersebut,lalu ganti dengan kode di bawah ini :
<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px
5px;border-right:1px solid
#ccc;border-bottom:1px solid
#ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Lalu Simpan Template.

Apakah dah selesai?

Ya belum dong! Kalau dah selesai,gimana caranya bisa ngliat daftar isi blog?

Nah! Untuk melihat Daftar Isi Blog,kita harus membuat Link terlebih dahulu,yang mana saat link di klik akan menuntun kita ke halaman khusus Daftar Isi tersebut.
Anda bisa menggunakan seperti contoh di bawah ini:
Untuk link berupa text:
Daftar Isi Blog

Anda bisa gunakan kode berikut :

<a href="http://NAMABLOGANDA.blogspot.com/search?max-results=100">Daftar Isi Blog</a>
Untuk Link berupa form:


Anda bisa gnakan kode berikut :

<form action="http://NAMABLOGANDA.blogspot.com/search?max-results=100" target="_blank"><input value="Daftar Isi Blog" type="submit"></form>
Jangan lupa! kode yang berwarna merah,tuliskan alamat Blog anda sendiri.

Sebenarnya,masih banyak pilihan yang bisa anda buat link untuk Daftar Isi Blog,caranya hanya dengan menambahkan Element Baru/Add New Widget dan pilih HTML/Javascript lalu tuliskan kode link pilihan anda (anda bisa memakai contoh di atas).

Lalu apa arti tulisan '100' yang berwarna hijau di atas ?
Angka '100' pada kode diatas,menentukan berapa jumlah judul yang akan di tampilkan untuk Daftar Isi tiap halaman,klo saya menuliskan '50',ya nantinya akan ada '50' judul yang akan di tampilkan pada setiap halamannya.

Udah jelas khan?Pelajaran Blog

Baca Juga Yang Ini..


Read more > Cara Membuat Daftar Isi di Blogspot
Diposting oleh Befitnes di 04.02 0 komentar
Label: , ,
Langganan: Postingan (Atom)
 
 
Copyright © MXM BERBAGI INFO
Blogger Theme by Blogger Designed and Optimized by Tipseo