Trik Membuat Daftar Isi Dengan JQuery Di Blog

Trik Membuat Daftar Isi Dengan JQuery Di Blog. Daftar isi merupakan salah satu fasilitas tambahan yang kita pasang pada blog dengan tujuan untuk memudahkan pengunjung blog dalam mencari informasi-informasi yang ada pada blog bersangkutan. Selain untuk maksud tersebut, daftar isi juga bisa memberikan penilaian tersendiri dari para pengunjung terhadap pengaturan-pengaturan tata letak informasi pada blog tersebut.

Cara membuatnya pun menurutku tidak terlalu sulit juga. Untuk itu silakan praktekkan langkah-langkah berikut :

1. Silakan login ke akun blogger anda. Pada halaman akun blogger, silakan klik nama blognya.
2. Pada halaman overview silakan pilih menu template kemudian klik edit HTML dan klik lagi Proceed lalu aktifkan pilihan Expand Widget Template.
3. Pada halaman edit HTML blog anda, silakan cari kode ]]></b:skin> atau silakan tekan tombol ctrl + f untuk memudahkan pencarian kode. Kemudian copy kode di bawah ini dan letakkan di atas kode ]]></b:skin>.

/* Daftar Isi With JQuery */ #dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTiRR3BTd-bik7BpNUvEr5FDAi0-wIIZm5pJ6PTTzybrS16RHjqIIwIIEzXaIv_G3ut3md8GKJ24Vk5IyrO7-2Q1rJHEZSeObUWgG81UnNIMrUrbYBxl9NRQnOFT3DBme1XFq97Segmzc/s320/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitMw2m9VeIp_b3Wj7FaIkBtKsvs3pYu4EzuFOgmyLSptqR75wLSnstGmbPn2fgzg61ZizQ1mSFb2nH38uxtTl_isMWES8I-IRyw9igy398ttVD4V7CqFYyfI1SAkCIVHhK4WgJz-kF2Qg/s1600/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwPTMrQIla7gk8b749dxg8Gm4ecks1lSoXFjIzybCfYkvoTRrn9IS51s9XG1D_OvE6p-x9GOOj6xgeJStJbqtSZbLvnqfK8vQyzWJPs-yhtRAir7pZFvrUVUGNblACSrSQfxXJtkc98u4/s320/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }

4. Langkah selanjutnya silakan cari kode </head> lalu letakkan kode di bawah ini tepat di atas kode </head>.

<script src='http://dapurtutorial8.googlecode.com/files/Scriptdaftarisi1.js' type='text/javascript'/>

5. Kemudian simpan templatenya dan close halaman edit HTML tersebut
6. Langkah terakhir, silakan buat postingan baru dan copy paste kode di bawah ini pada bagian mode HTML postingan baru Anda tersebut. Untuk judulnya, terserah Anda mau kasih judul apa.

<script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script> <script src="http://badalirextor.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Keterangan :
kode http://badalirextor.blogspot.com/ ganti dengan alamat blog sobat.

Demikian informasi saya tentang trik membuat daftar isi dengan JQuery di blog dan semoga bermanfaat. Jangan lupa setelah membaca informasi ini untuk menuliskan komentarnya. :)

Membuat Efek Daun Berjatuhan Pada Blog

1. login Blog
2. Rancangan --> Elemen Halaman --> tambah gadget --> HTML/javascript


langsung deh copy kode dibawah ini dan paste pada kotak HTML/javascript.

<script src='https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/daungugur.js' type='text/javascript'/>

3. simpan deh... dan lihat hasilnya..... 


Tapi bila cara ini belum berhasil, ane punya tips berikutnya yaitu :


1. login blog
2. Rancangan --> Edit HTML --> cari kode ]]></b:skin>
lalu copy kode dibawah ini dan taruh dibawah kode ]]></b:skin>

<script src='https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/daungugur.js' type='text/javascript'/>

3. simpan template

Semoga Berhasil.....

Cara Menambah Gadget Daftar Isi Pada Blog

Oke langsung saja kita mulai
1. Pertama masuklah ke Dasboard  sobat, lalu klik salah satu blog sobat
2. Pilih Tata Letak , lalu Tambah Gadget  
3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
4. Lalu muncul halaman baru lagi
5. Isi Judul, dan isikan kode berikut pada kontennya

 <div style="border: 0px solid rgb(51, 255, 51); overflow: auto; height: 350px;" margin="5px" ;>
<script style="text/javascript" src="http://www.srbekasi.org/daftar-isi.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://badalirextor.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
powered by:<a href="http://badalirextor.blogspot.com/2012/05/cara-menambah-gadget-daftar-isi-pada-blog.html">badali rextor's blog</a>

Keterangan:

• Ganti kode bewarna biru dengan alamat blog sobat

6. Simpan

Selamat Berkreasi ^_^

Trik membuat form login

1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Pilih Tata Letak , lalu Tambah Gadget  

3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript

4. Lalu muncul halaman baru lagi
5. Kosongkan Judul, dan isikan kode berikut pada kontennya

Silakan Login melalui blogger <br/><br/><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Username: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></form>

6. Lalu simpan Elemen tersebut

Hasil akhirnya ada dibawah ini




Silakan Login melalui blogger 

Username: 

Password: (?) 

Trik Agar Artikel Blog Kita Tidak Bisa Di Copy Paste

Berikut Trik bagaimana agar postingan kita tidak bisa di Copy Paste. Silakan sobat ikuti langkah-langkah dibawah ini :
1. Masuk dulu ke ID Blogger sobat di www.blogger.com
2. Setelah itu silakan masuk ke menu Desain
3. Masuk ke Edit HTML
4. Jangan lupa centang Expand Template Widgets
5. Kemudian cari kode CSS seperti ini : </body>
6. Copy Paste Kode dibawah ini DIATAS kode </body> tadi

<script language='JavaScript1.2'>

//Disable select-text script (IE4+, NS6+)- By Andy Scott

//Exclusive permission granted to Dynamic Drive to feature script

//Visit http://www.dynamicdrive.com for this script

function disableselect(e){

return false

}

function reEnable(){

return true

}

//if IE4+

document.onselectstart=new Function (&quot;return false&quot;)

//if NS6

if (window.sidebar){

document.onmousedown=disableselect

document.onclick=reEnable

}

</script>

<script language='JavaScript'>curPage=1;

document.oncontextmenu = function(){return false}

if(document.layers) {

window.captureEvents(Event.MOUSEDOWN);

window.onmousedown = function(e){

if(e.target==document)return false;

}

}

else {

document.onmousedown = function(){return false}

}</script>
7. Setelah selesai, silakan Simpan Template.

Masuk ke blog anda sekarang, silakan Klik Kanan, apakah tulisan disana bisa di klik kanan Mouse anda??

Demikian Cara Agar Artikel Blog Kita Tidak Bisa Di Copy Paste, semoga bermanfaat. Terima kasih.

Cara membuat chat box di blog

Cara membuat chat box di blog

Chat box merupakan salah satu fasilitas media komunikasi antara pengunjung dengan yang punya blog atau dengan sesame pengunjung blog sehingga kita  bisa ber interaksi satu sama lain menjalin persahabatan dan berbagi informasi seputar blogging atau informasi yang lainnya, sangat dimungkinkan sekali saling bertukar link blog anda atau undang mengundang antar teman.

Atau chat box ini juga bisa bermanfaat sebagai tempat komentar cepat atau instant sehingga komentar dan pertanyaan anda akan cepat tampil tanpa harus menunggu loading blog.

Di bawah ini ada beberapa aplikasi chat box yang bisa di tampilkan di blog atau website kita. Cara membuat chat box ini sangat mudah anda hanya copypaste widget chat box dib log anda. apalagi bagi yang sudah sering membuat akun hanya memerlukan beberapa menit saja :

Cbox yang tentunya basic dari aplikasi ini adalah  gratis. Cbox adalahaplikasi chatting unik dan pesan yang membawa fitur terbaik dari sistemchatting ke web atau blog. Cara membuat chat Cbox ini cukup mudah,Silahkan kunjungi  http://www.cbox.ws dilanjutkan klik ‘Sign Up’ untuk membuat akun Cbox

Chatroll yang ini juga merupakan aplikasi chat box dengan tampilan dan fiturnya cukup bagus simple dan mudah di gunakan dan tentunya gratis. Cara membuat chat Cbox ini cukup mudah, Silahkan kunjungi http://chatroll.com dilanjutkan klik ‘Sign Up’ untuk membuat akun Chatroll

Maeebo merupakan penyedia layanan chating online gratis dan maaebo juga menyediakan aplikasi chat box untuk blog atau website secara gratis.

Cara membuat chat Cbox ini cukup mudah, Silahkan kunjungi http://www.maeebo.com dilanjutkan klik ‘Sign Up’ untuk membuat akun maeebo.

Fun Chat Box aplikasi chat unik dan keren untuk blog anda berbagai macam pilihan background bisa di terapkan di aplikasi fun chat box ini sangat keren dan basic nya pun gratis. Cara membuat chat Cbox inicukup mudah, Silahkan kunjungi Fun Chat Box Widget - Widgetbox

Selamat mencoba dan semoga informasi Cara membuat chat Cbox ini bisa membantu anda

Cara Mengubah atau Memasang Background Header di Blogger/Blogspot

Cara ini digunakan untuk mengubah/menambahkan gambar header secara keseluruhan sebagai background/latar. Jika hanya ingin mengganti/memasang gambar header pada judul dan deskripsi, cukup masuk ke Page Elements dan klik edit pada widget judul dan deskripsi pada bagian header. Upload gambar anda melalui fitur upload yang telah disediakan.

click to enlarge

Namun untuk mengganti seluruh bagian backround/latar wrapper header di blog anda, gunakan cara berikut:

1. Masuk ke Edit HTML.

2. Cari  (Ctrl+F) #header-wrapper atau yang sejenisnya (masing-masing template tidak sama tergantung basic template tersebut). Declarator ini selalu di bagian pengaturan header dan posisinya paling atas.

Contoh:

#header-wrapper{background-color:#00000;width:975px;margin:0 auto 0;height:125px;)

3. Tambahkan atribut ini sebelum background-color (atau anda dapat menghapus bagian background color jika header anda akan dipenuhi dengan gambar):

background image: url(http://alamat-url-gambar/gambar.jpg);

background-repeat: no-repeat; 

contoh jadinya:

#header-wrapper{ 

background image: url(http://alamat-url-gambar/gambar.jpg);

background-repeat: no-repeat;

background-color: #00000;

width:975px;margin:0 auto 0;height:125px;)

Atau aturan shorthand untuk background juga dapat digunakan:

background:url(http://alamat-url-gambar/gambar.jpg) no-repeat #000000;

contoh:

#header-wrapper{background:url(http://alamat-url-gambar/gambar.jpg) no-repeat #00000; width:975px;margin:0 auto 0;height:125px;)

Ganti http://alamat-url-gambar/gambar.jpg dengan direct url dimana anda mengupload gambar  header blog. Sebelum mengupload & memasang gambar header, edit atau pastikan ukuran gambar sama dengan width dan height header blog.

4. Save template.

Jika ada pertanyaan, permasalahan, atau apa saja, silakan gunakan form comment.

Cara Menghilangkan Icon Obeng dan Tang / Quick Edit Blogger

Menanggapi pertanyaan dari beberapa blogger… hehehe… kang Rohman serasa jadi konsultan blogger saja ya kalau posting biasanya pake kata-kata tersebut soalnya “ Your Questions is my inspiration” pertanyaan anda adalah inspirasiku. Jadi rahasia kenapa blog ini masih bisa bertahan sampai sekarang adalah karena masih ada yang bertanya ke kang Rohman. So, tentu saja ide untuk posting selalu ada. Eh..eh.. ko…gitu sich.. la ko  jadi ngelantur nih, kembali ke judul posting ini ah.
Apa sih maksud dari judul posting ini, sepertinya agak aneh? begini nih teman-teman, jika kita sedang mengedit template dan melihat hasilnya maka pada sudut-sudut element akan terlihat icon bergambar obeng dan tang. berikut contoh screenshotnya :



Icon tersebut di sebut juga dengan icon Quick Edit atau dengan kata lain untuk mengedit secara cepat. Fungsinya jika kita ingin melakukan editing terhadap elemen tersebut tinggal klik saja icon nya dan kita bisa langsung mengeditnya. Icon tersebut sebenarnya hanya bisa di lihat apabila kita sedang login ke blogger saja, sedangkan pengunjung yang lain tidak bisa melihat icon tersebut.
Namun ternyata ada beberapa blogger yang tidak suka dengan kehadiran icon tersebut dan ingin menghapusnya. Apakah kita bisa  menghapus icon tersebut? Jawabannya tentu saja bisa, dan sangatlah gampang karena kita hanya melakukan perintah agar icon itu tidak di munculkan dengan hanya manambahkan sedikit kode pada kode CSS template kita. Ingin tahu kodenya seperti apa, nih ini dia kodenya, coba pasang saja di Style Sheet CSS anda :

.quickedit{
display:none;
}

Mudah sekali bukan? atau masih bingung. Ok deh, ini dia cara lengkapnya :

1. Login ke blogger dengan ID anda tentunya.
2. Klik  Tata Letak.
3. Klik tab Edit HTML.
4. Cari kode seperti ini :
   ]]></b:skin>
   
   
5. Copy paste kode berikut persis di atas kode yang tadi :
   
   .quickedit{
   display:none;
   }
   
   
6. Klik tombol Simpan template.
   
7. Selesai.
   

Selain langkah di atas, sebenarnya masih ada yang harus anda lakukan yaitu silahkan ucapkan “ Selamat tinggal Obeng dan Tang…dadaaahhhhh “ hehehe….

Mengetahui Orang Yang Copas Artikel Kita

Ini adalah cara untuk mengetahui siapa yang mengcopy artikel di blog kita. Kita akan tahu blog mana saja yang mengcopy artikel kita di blogmereka. Atau barang kali kita yang suka Copas...hihihi. Tapi jujur saja saya juga suka copas artikel dari blog lain, menurut copas adalah kegiatan yang mengasikkan...hohoho. Tapi apabila copas sebaiknya kita juga menyertakan dari mana artikel kita berasal atau sumber artikelnya. Untuk mengetahui siapa yang copas artikel di blog kita silakan website ini "http://trickyourmove.blogspot.com ". Kalau sudah dibuka masukkan alamat url blog kita atau agar lebih specific masukkan alamat url salah satu postingan kamu yang ingin di cek.

CARA MEMBUAT BLOG DI BLOGGER

Membuat blog di blogger.com sangatlah mudah.

Sekarang saya akan tunjukan cara untuk membuat sebuah account baru di blogger.com, yang 100% gratis. Saya merekomendasikan anda untuk membuat blog di blogger.com karena program ini sangat didukung penuh oleh google, sehingga apabila kita membuat blog disini maka google akan cepat mengindeks blog kita. Alhasil blog kita akan muncul dihalaman pencari google.

• LANGKAH KE-1 (GETTING STARTED)

Silahkan anda kunjungi website www2.blogger.com

• LANGKAH KE-2 (CREATE AN ACCOUNT)

Setelah page terbuka, silahkan anda klik CREATE AN ACCOUNT setelah anda klik, maka akan muncul form untuk mengisikan nama dan password. Silahkan isi dan anda harus selalu ingat username dan password yang anda isikan.

Jangan lupa untuk menceklist Term of service agreement.
Kemudian klik tombol panah "Continue" untuk melanjutkan ke langkah ke-3

• LANGKAH KE-3 (NAME YOUR BLOG)

Bagian ini sangat penting, karena nama dari blog anda nantinya akan menjadi sebuah keyword.
TIPS: agar blog anda mudah terindex oleh search engine(mesin pencari), maka alangkah lebih bagusnya jika anda membuat sebuah kesamaan antara addres dan name dari blog anda!
Sekarang klik tombol panah ORANGE"Continue" untuk melanjutkan ke langkah ke-4

• LANGKAH KE-4 (CHOOSE YOUR BLOG TEMLATE)

Sekarang anda haya tinggal selangkah lagi untuk mempunyai webblog buatan sendiri!!!
Disini anda ditujukan untuk memilih warna dan bentuk dari web anda. Silahkan pilih sesuai dengan topic dan selera anda.
OK jika anda sudah selesai memilih template, sekarang kita akan lanjut ke langkah berikutnya.
Sekarang klik tombol panah ORANGE"Continue" untuk melanjutkan ke langkah ke-5

• LANGKAH KE-5 (GENERATE YOUR BLOG)

Sekarang blogger akan menciptakan blog anda. Setelah blog selesai dibuat, maka di browser anda akan ada tulisan "Your Blog Has Beeb Created" Klik start Posting untuk untuk membuat artikel/tulisan pertamamu.
Sekarang Isikan Judul artikel kamu pada kolom tile, dan tulis isi dari artikelmu di bawahnya!

SELAMAT!! sekarang anda sudah mempunyai blog sendiri dan sudah bisa dilihat dari penjuru dunia manapun :)