Membuat Kontak Komen Facebook disamping Kotak Komen Blog

Cara Menambahkan Kotak Komentar Facebook di Samping Kotak Komentar Blog , yaitu berguna untuk membantu buat pengunjung blog berkomentar menggunakan facebook , kotak komentar nya akan dipasang bersebelahan dengan kotak komentar blog selain rapi juga dapat meningkatkan traffick blog agan berikut contoh screen shoot komentarnya gan :

untuk cara memasang nya :

• login dulu dengan account blog yang mau di pasang
• Lalu masuk lah ke template
• Lalu edit HTML Template blog dan jangan lupa centang Expand Template Widget
• Cari kode <div class='comments' id='comments'>
  menggunakan Ctrl + F

kalau kode <div class='comments' id='comments'> ada 2 pasangan lah kode di bawah ini bawah         kode ke 2 dari <div class='comments' id='comments'>

     kode yang akan dipasang :

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

• lalu cari lagi kode </head>
  

lalu pasangkan kode di bawah ini tepat di atas kode </head>

kode yang dipasang :

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID Facebook' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

Ganti ID Facebook dengan url id profil facebook kepunyaan sobat.

• Cari kode yang mirip dengan kode /* Comment atau #comments
    lalu pasangkan kode dibawah ini diatas kode/* Comment atau #comments
  

      kode yang dipasang :

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

• Terakhir simpan untuk melihat hasil nya gan.

Cara Membuat Link di Kontak Komentar blog

Cara Membuat Link di Kolom Komentar, di saat anda berkunjung ke blog sobat lain dalam rangka memperbanyak jumlah link (tautan) dan meningkatkan trafik blog anda, anda perlu menyisipkan jejak link anda pada kolom komentar sebuah posting. Tetapi yang paling penting adalah komentar yang anda entry haruslah berhubungan dengan posting yang sedang anda simak. Saya sarankan jangan sembarangan menyisipkan link, apalagi banyak-banyak nanti komentar anda ditolak. 

Sebenarnya sederhana saja, anda tinggal menyimpan link dengan menulis kode tag HTML pada kolom komentar, caranya tulis tag alamat dan anchor link blog anda.

Contoh :
<a href="http://nama blog anda.com">Anchor Text</a>, maka hasilnya akan  terlihat seperti ini : Anchor Text 

Anda juga dapat menambah efek huruf tebal dengan tag <b> dan </b>.

Contoh : 
<b><a href="http://nama blog anda.com">Anchor Text </a></b>, maka akan terlihat seperti ini : Anchor Text 

Teks berwarna merah anda gantikan dengan nama blog dan teks anchor blog anda.

Ini hanyalah salah satu tag yang dapat anda manfaatkan sebagai pemanis tampilan, masih banyak variasi tag lainnya yang dapat anda sisipkan pada anchor link anda.

Semoga Cara Membuat Link di Kolom Komentar ini bermanfaat, selamat mencoba.

Mempercantik Tampilan Komentar Blog

Apabila mencermati model kolom kotak komentar pada setiap blog yang kita kunjungi, maka tidak jarang kita akan mendapati kolom kotak komentar yang telah dimodifikasi dengan model kustom sehingga tampilannya menjadi lebih menarik bila dibandingkan dengan tampilan kolom kotak komentar yang diberikan oleh Blogger (termasuk kolom kotak komentar yang saya gunakan padablog ini). Namun tahukah Anda, bahwasanya kita juga dapat melakukan modifikasi model kolom kotak komentar standar yang diberikan oleh Blogger, sehingga tampilannya tidak kalah menarik apabila dibandingkan dengan model kustom.

Seperti yang kita tahu, bahwasanya selain dengan menggunakan model kustom untuk mempercantik tampilan kolom komentar, selama ini yang sering dilakukan hanyalah sebatas menambahkan scroll untuk kolom komentar sehingga jika jumlah komentar cukup banyak, maka tampilan halaman tidak terlalu panjang. Namun demikian tidak jarang pula pengelola blog yang kurang memperhatikan tampilan kotak komentar (membiarkan apa adanya sesuai dengan desain tampilan yang diberikan oleh Blogger). Padahal dengan hanya menambahkan sedikit kode CSS tertentu ke dalam template, maka desain tampilan kolom kotak komentar akan menjadi lebih menarik (seperti halnya bila kita menggunakan model kustom).

Nah, untuk keperluan ini maka terlebih dulu yang perlu diperhatikan adalah setelan untuk “Pos dan Komentar’ pada blog yang Anda kelola, karena teknik ini hanya dapat diterapkan dalam setelan ‘Tersemat’. Sehingga jika saat ini Anda belum menggunakan setelan ini untuk ‘Pos dan Komentar’ blog yang Anda kelola, maka ubah terlebih dulu setelanya dengan cara klik menu ‘Setelan’ > ‘Pos dan Komentar’ > kemudian pada pilihan ‘Lokasi Komentar’ gunakan pilihan ‘Tersemat’, seperti yang tampak pada gambar di bawah ini.

Sumber gambar: blogger.com

Apabila setelan untuk lokasi komentar telah diubah menjadi ‘Tersemat’, maka langkah berikutnya buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’. Kemudian untuk mempermudah proses, cari kode ]]></b:skin> dan sisipkan kode berikut ini tepat di atasnya.

/*--------------------------------------------------------------
Kustomisasi Kolom Komentar Blogspot
Oleh: Semar Bingung
Blog: http://eltelu.blogspot.com/
--------------------------------------------------------------*/
.comments {
  padding: 4px;
  background: #eeeeee;
  border: 1px solid #999999;
  -moz-border-radius: 5px 5px 5px 5px;
}

.comments-content .comment-thread {
  padding: 4px;
  background: #ffffff;
  border: 1px solid #cccccc;
}

.comments .comments-content .comment {
  margin-bottom: 0px; padding-bottom: 0px;
}

.comments .comments-content .comment:first-child {
  padding-top: 0px;
}

.comments .avatar-image-container {
  height: 36px;
  padding-left: 4px;
  background: #ffffff;
  border: 1px solid #cccccc; 
  -moz-border-radius: 3px 3px 3px 3px;
}

.comments .comment-block {
  padding-top: 4px;
  padding-bottom: 8px;
  padding-left: 4px;
  padding-right: 4px;
  background: #fcfcfc;
  border: 1px solid #cccccc;
  -moz-border-radius: 3px 3px 3px 3px;
}

.comments .comments-content .inline-thread {
  border: 1px solid #cccccc;
  -moz-border-radius: 3px 3px 3px 3px;
}

.comments .comments-content .comment-replies {
  margin-left: 48px;
}

.comments .comment .comment-actions a {
  margin-right: 4px;
  padding: 2px;
  background: #f3f3f3;
  border: 1px solid #cccccc;
  -moz-border-radius: 3px 3px 3px 3px;
}

.comments .continue a {
  padding: 2px;
  background: #f3f3f3;
  border: 1px solid #cccccc;
}

.comments .comments-content .datetime {
  float: right;
  margin-right: 4px;
}

.comments .comments-content .icon.blog-author {
  float: right;
  margin-right: 3px;
}

.comment-form {
  max-width: 100%;
  width: 100%;
}

Setelah kode tersebut disisipkan dalam template, langkah berikutnya simpan template Anda sehingga akhirnya model kolom komentar standar Blogger tampilannya akan berubah menjadi seperti yang tampak pada gambar di bawah ini.

Kemudian apabila Anda ingin menyesuaikan warna garis dan warna latar yang digunakan pada kolom komentar tersebut dengan desain halaman blog yang Anda kelola, maka Anda tinggal mengganti kode warna yang terdapat pada kode border: dan background:, sebagai contoh misalnya yang terdapat dalam kode border: 1px solid #999999; dan background: #eeeeee;.

Semoga berguna dan bermanfaat.

Salam.

Mengganti Pos Lama dan Pos Baru dengan Icon

Variasi pada tulisan Posting Lebih Baru, Halaman Muka dan dan Posting Lama, selain menggunakan cara pada postingan "Membuat Pembuka halaman Belakang (Navigasi Halaman)" , juga dapat anda gunakan dengan icon gambar. Perhatikan contoh dibawah ini.



Untuk memudahkan dalam pembuataanya, anda dapat menggunakan icon dari blog lain atau icon-icon yang tersedia dibagian bawah postingan ini. Dan bagi anda yang suka menggunakan made in sendiri, buat dulu icon gambarnya sebanyak 3 buah yaitu untuk : post lebih baru, halaman muka dan post lebih lama.
Anda siap...maju.....jalan....!!!!

• Sign ke Blogger dengan ID anda.
• Pilih Rancangan.
• Pilih Edit HTML.
• Back up template dulu untuk menjaga jika terjadi kegagalan.
• Beri tanda centang pada kotak "Expand Widget Template"
• Untuk mengganti tulisan Post lama, cari kode <data:olderPageTitle/> kemudian ganti dengan salah satu alamat URL dibawah ini. (pilih yang paling menarik menurut anda).
  
  
  

  	<img src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZxXaumeLOI/AAAAAAAACTo/ImuTbXpWxV8/bt-right.png"/>
  	<img src="https://lh6.googleusercontent.com/_1j80TgNqd_8/TZxXbkVrAWI/AAAAAAAACTw/F9ylUAfr44Q/forward.png" />
  	<img src="https://lh4.googleusercontent.com/_1j80TgNqd_8/TZxXbzjIu6I/AAAAAAAACT0/lQ5fS_n-bnc/forward3.png"/>
  	<img src="https://lh4.googleusercontent.com/_1j80TgNqd_8/TZxXbzG0A5I/AAAAAAAACT4/pza1zfuwkD8/forward2.png"/>





• Untuk mengganti post lebih baru, cari kode <data:newerPageTitle/> kemudian ganti dengan salah satu alamat URL dibawah ini. (pilih yang paling menarik menurut anda).
  
  
  

  	<img src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZxXY3rt8bI/AAAAAAAACTQ/vn0gBLurwKU/back.png"/>
  	<img src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZxXZfEL8rI/AAAAAAAACTU/OISdrFcMEiw/back1.png"/>
  	<img src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZxXZroivYI/AAAAAAAACTY/NNFG9vwtVak/back2.png"/>
  	<img src="https://lh3.googleusercontent.com/_1j80TgNqd_8/TZxXaHrSSJI/AAAAAAAACTg/PLh_Fl26WwI/back3.png"/>





• Untuk mengganti halaman muka, cari kode <data:homeMsg/> kemudian ganti dengan salah satu alamat URL dibawah ini. (pilih yang paling menarik menurut anda).
  
  
  

  	<img src="https://lh6.googleusercontent.com/_1j80TgNqd_8/TZxXcT3oCHI/AAAAAAAACT8/upej8JiqEco/home.png"/>
  	<img src="https://lh6.googleusercontent.com/_1j80TgNqd_8/TZxXctaXhAI/AAAAAAAACUA/FFZ2czz5LW0/home1.png"/>
  	<img src="https://lh3.googleusercontent.com/_1j80TgNqd_8/TZxXdQ31uII/AAAAAAAACUI/1ZK53M_tTe4/home2.png"/>
  	<img src="https://lh4.googleusercontent.com/_1j80TgNqd_8/TZxXdpa9VLI/AAAAAAAACUQ/oTD5a2856hs/home3.png"/>




• Setelah ketiga icon pilihan anda dimasukan, klik tombol Simpan Template.
• Lihat Blog anda yang baru...!!

Postingan ini telah berhasil dicoba pada blog percobaan EPG Studio.

Read more: http://epg-studio.blogspot.com/2009/05/mengganti-tulisan-posting-lebih-baru.html#ixzz2CTxqlO9K

Mengunci Folder dengan Script

Dalam postingan saya kali ini, saya akan membahas mengenai cara melindungi folder dengan password tanpa bantuan software. Saya akan mencoba bagaimana caranya untuk mengunci folder dengan password tanpa menggunakan software, melainkan menggunakan script.

Pasti penasaran bukan??

Baiklah  buat kamu yang penasaran langsung saja deh saya bahas mengenai cara mudah kunci folder dengan password agar file tidak dapat diakses orang lain

Langkah 1

Sebelum nya untuk pembelajaran, saya sengaja membuat folder baru yang sudah saya beri nama “coba-coba”.

Langkah 2

Buka windows explorer kamu,klik kanan >new > text document

 

Langkah 3

Copy script berikut ke dalam text document yang telah dibuat tadi tanpa tanda kutip

" Quote:
Quote: cls
@ECHO OFF
title Folder Private
if EXIST "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" goto UNLOCK
if NOT EXIST Private goto MDLOCKER
:CONFIRM
echo Are you sure you want to lock the folder(Y/N)
set/p "cho=>"
if %cho%==Y goto LOCK
if %cho%==y goto LOCK
if %cho%==n goto END
if %cho%==N goto END
echo Invalid choice.
goto CONFIRM
:LOCK
ren Private "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
attrib +h +s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
echo Folder locked
goto End
:UNLOCK
echo Enter password to unlock folder
set/p "pass=>"
if NOT %pass%== password anda goto FAIL
attrib -h -s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
ren "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" Private
echo Folder Unlocked successfully
goto End
:FAIL
echo Invalid password
goto end
:MDLOCKER
md Private
echo Private created successfully
goto End
:End "

Keterangan:

Pada tulisan yang dicetak miring berikut “password anda” diisi dengan password atau kata kunci untuk mengakses folder
anggap saja passwordnya ” 654321 “.

Maka, code tersebut harus seperti ini:

"Quote:
Quote: cls
@ECHO OFF
title Folder Private
if EXIST "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" goto UNLOCK
if NOT EXIST Private goto MDLOCKER
:CONFIRM
echo Are you sure you want to lock the folder(Y/N)
set/p "cho=>"
if %cho%==Y goto LOCK
if %cho%==y goto LOCK
if %cho%==n goto END
if %cho%==N goto END
echo Invalid choice.
goto CONFIRM
:LOCK
ren Private "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
attrib +h +s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
echo Folder locked
goto End
:UNLOCK
echo Enter password to unlock folder
set/p "pass=>"
if NOT %pass%==  654321 goto FAIL
attrib -h -s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
ren "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" Private
echo Folder Unlocked successfully
goto End
:FAIL
echo Invalid password
goto end
:MDLOCKER
md Private
echo Private created successfully
goto End
:End "

Password hanya sekedar contoh tutorial saja, jadi kalau kamu mau buat file “kunci” yang sungguhan, silahkan gunakan password dari anda sendiri.

Langkah 4

Simpan text document di folder yang baru kita buat tadi dengan nama “kunci.bat”. dan pilih all files pada save as type.

Eksetensinya adalah  “.bat” yang sebelumnya diikuti nama file tersebut.

Langkah 5

Double klik file yang bernama kunci.bat tadi
maka akan muncul perintah / command seperti dibawah ini dan masukkan password yang kita buat tadi.

Masukkan password yang kita buat tadi.

Langkah 6

Maka akan muncul folder yang bernama private. Dan difolder private inilah kamu meletakkan file file penting yang rasanya orang lain tidak tahu dan ingin di password.

Contoh penempatan file pribadi yang kita miliki.

Langkah 7

Jika selesai menyimpan file yang penting kedalam folder private, maka klik kembali file kunci tadi, lalu tekan huruf “y” dan tekan enter. Dan secara otomatis folder private tersebut akan menghilang.

Jika kamu ingin mengakses folder yang dipassword tadi, klik file kunci.bat dan masukkan password kamu tadi, lalu tekan enter. Dan untuk penyimpanannya lakukan dengan cara yang sama seperti langkah-langkah yang sudah saya terangkan tadi. Namun, untuk menjaga supaya “kuncinya” aman, file tersebut harus di hidden atau disimpan di flashdisk.

Baiklah selamat mencoba! ^_^.

Mengapus File | Folder yang Tidak Bisa Dihapus

File Tidak Bisa Dihapus - Cara Mudah Menghapus File Tidak Bisa Dihapus di Komputer,pasti anda pernah mengalami hal yang seperti yang akan saya bahas ini. Ada beberapa file di komputer/Laptop bahkan di flashdisk yang terkadang tidak bisa dihapus dan di Ubah namanya atau Rename. Tenang aja saya akan memberikan Cara Mudah Menghapus File Tidak Bisa Dihapus di Komputer anda, simak berikut :

1. Langka pertama anda download software Unlocker:
Unlocker 1.9.0 Installer [download] (966 Kb)
UnLocker 1.8.8 Portable [download] (51 Kb)

2. Kemudaian install untuk yang versi installer. Setelah selesai, Unlocker akan secara otomatis ada pada menu klik kanan .
3. Untuk penggunaannya, anda tinggal klik kanan pada file/folder yang akan dihapus dan pilih Unlocker.



4. Setelah itu, akan muncul kotak dialog, pilih Delete untuk menghapus, Rename untuk mengubah nama, dan Move untuk memindahkan. Lalu klik ok.



5. Selamat file/ folder sudah terhapus.

Warning !!

1. Terkadang saat kita akan menghapus file/ folder, kita disuruh untuk merestart/reboot PC/Laptop .
2. Unlocker installer akan berjalan dengan sendirinya saat windows startup. Tapi tenang aja, software ini sangat ringan jadi tidak akan mempengaruhi kinerja windows. Sedangkan Unlocker Assistant yang berada di system tray, hilangkan cawang pada Autostart.
3. Untuk penggunaan Unlocker portable tinggal menyesuaikan. 

Cara Membuat Daftar Isi Keren di Blogger

Daftar isi atau dalam bahasa Inggris biasa disebut Table of contents adalah sebuah fitur untuk memudahkan pengunjung mengeksplorasi isi sebuah blog, aagar pengunjung bisa mengetahui seluruh isi postingan sebuah blog. Tak sedikit blogger menyamakan istilah daftar isi dengan sitemap, padahal jelas berbeda. Daftar isi biasanya ada yang berdasarkan label atau kategori ada juga yang berdasarkan tanggal publikasi artikel.

Pada kesempatan ini saya akan berbagi tutorial bagaimana cara membuat daftar isi dengan scroll dan daftar isi dengan menu efek accordion jquery. Jika dengan scroll atau tombol gulir menampilkan isi berdasarkan tanggal posting maka daftar isi efek accordion adalah per label.

A. Membuat daftar isi sederhana dengan Scroll atau tombol gulir

Daftar isi dengan scroll ini tampilannya sangat sederhana dan tidak begitu banyak berat loadingnya. Menampilkan arsip atau isi blog berdasarkan tanggal dan bulan posting artikel. Cara membuatnya cukup mudah, bisa sobat masukkan di halaman statis, postingan, sidebar atau footer sekalipun. Khusus di halaman statis dan postingan harus masuk ke menu HTML (bukan compose). Silakan sobat copy kode berikut ini:

<div style="background-color: none; border: 1px solid #CCC; height: 400px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 95%;"><div align="center"><span style="font-size: medium;">Daftar Isi</span></div><script src="http://julak-project.googlecode.com/files/dafisiscroll%20.js"> </script><script src="http://www.be2saudara.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div>

Jangan lupa mengganti nama blog saya www.be2saudara.blogspot.com dengan nama blog sobat blogger sendiri. Silahkan masukkan/ paste di sidebar atau footer.

Catatan;

• Untuk mengurangi atau menambah ukuran tinggi lihat angka 400px silakan dimodifikasi
• Sedangkan untuk lebar kotak daftar isi ditunjukkan dengan angka 95% jadikan 100% atau dikurangi.
• Kata Daftar Isi bisa sobat ganti juga

Oke sobat, saya kira cukup mudah silakan lihat demonya di sini.

B. Cara membuat daftar isi keren efek accordion style

 

Sebelum sobat memakai atau mempraktekkan nya sobat bisa melihat contoh demonya di Daftar Isi

Bagaimana, bagus tidak, hehehe. hemat tempat karena begitu satu label dibuka secara otomatis label atau artikel lain akan menutup sendiri. Kalau sobat mau menggunakan silakan ikuti tutorial di bawah ini.

1. Langkah pertama yaitu menambahkan kode css ke template blog.
cari kode  ]]></b:skin> kemudian masukkan kode css di bawah ini tepat di atas kode]]></b:skin> tadi.

debby

#dafis-acc {

font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;

font-size:14px;

}

.dafis-label {

background: rgb(125,126,125);

background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));

background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);

background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);

background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);

background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );

-webkit-border-radius: 25px;

-moz-border-radius: 25px;

border-radius: 25px;

color: #A1A1A1;

text-transform:uppercase;

font-weight: bold;

line-height: 2em;

margin: 1px 3px;

cursor: pointer;

outline: medium none;

overflow: hidden;

padding: 2px 10px;

text-decoration: none;

text-align: center;

}

.dafis-label:hover {

color: #F2F2F2;

}

.dafis-daf ol {

margin: 0 0 0 30px !important;

padding: 0 !important;

}

.dafis-daf ol li {

background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));

background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);

background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);

background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);

background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );

-webkit-border-radius: 25px;

-moz-border-radius: 25px;

border-radius: 25px;

line-height: 1.3em;

margin: 1px 3px !important;

text-align: left;

white-space: nowrap;

}

.dafis-daf ol li a {

color: #333333 !important;

display: block;

padding-top:5px;

padding-left: 10px;

text-decoration: none !important;

}

.dafis-daf ol li a:hover {

color:f2f2f2;

padding-left: 5px;

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

}

2. Memasang kode javascript / jquery. Cari kode </head> kemudian masukkan kode berikut ini di atasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Jika ditemplate blog sudah ada kode tadi tidak perlu lagi memasukkannya.
Terakhir simpan template.

3. Langkah ke tiga yaitu memasang kode berikut boleh di postingan blog atau di static page (halaman statis)

<script src="http://julak-project.googlecode.com/files/daftar%20isi.js" type="text/javascript">

</script>

<script src="http://www.ber2saudara.blogspot.com.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">

</script>

silakan masukkan / gunakan  menu HTML pada saat menulis artikel. Jangan lupa untuk mengganti www.ber2saudara.blogspot.com dengan nama blog sobat sendiri. Kemudian publikasikan. Dan daftar isi keren dengan accordion style pun sudah jadi. 

Sobat blogspotter mau pakai yang mana yang pertama atau kedua, dipersilahkan, hehehe.