Archive for Juni, 2009

29 Juni 2009

Cara membuat daftar isi otomatis pada blogger

cara membuat daftar isi otomatis blogspotHampir satu tahun ngeblog baru aq pasang daftar isi otomatis aja pada blog saya ini, karena capek jg ya kalo membuat manual daftar isi saya yang seperti anda lihat di kanan sidebar blog saya ini, sekarang anda pengen tahu yang otomatis kan, coba kamu klik tulisan daftar isi pada menu horisontal di atas, maka hasilnya akan otomatis tampak daftar isi saya, pengen tahu caranya.

Langkah Pertama:
1. Login ke account Blogger
2. Pilih Layout atau Tata Letak –> Edit HTML
3. Setelah itu beri centang pada tulisan Expand Widget Templates
4. Sebaiknya back up dulu template sobat dengan meng-klik Download Template Lengkap
5. Cari kode dibawah ini

<b:include data=’post’ name=’post’/>

Kalau sudah ketemu ganti kode itu dengan script dibawah ini:

<b:if cond=’data:blog.homepageUrl != data:blog.url’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<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:#000000;’>
<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>

6. Simpan Template (save).

Keterangan:#EAE9E9 dan #000000 adalah warna latar belakang (background) dan 000000 adalah warna tulisan (teks). sobat bisa menggantinya jika ingin menyesuaikan dengan template blog sobat.

Sebenarnya sampai disini sudah selesai, coba sobat klik salah satu label/kategoti maka yg muncul hanya judulnya.
Jika sobat ingin menampilkan daftar isi keseluruhan lanjut ke langkah ke dua

Langkah Kedua:
Pada langkah ini kita membuat pemanggil daftar isi.
1. Pilih Layout atau Tata Letak –> Page Element atau Element Halaman.
2. Pilih Add a Gadgets atau Tambahkan Sebuah Halaman
3. Pilih HTML/JavaScript
4. Masukkan kode berikut ke dalam kontennya

<a href=”http://Nama blog sobat.com/search?max-results=200″>Daftar isi&raquo;</a>

5. Simpan Widgets
Keterangan:
hanya saja saya ambil urlnya saja pada blog saya jd saya hanya memasukkan url ini http://www.sabarmuanas.co.cc/search?max-results=200
Ganti yang merah dengan nama blog sobat, dan nilai 200 adalah jumlah maksimal judul artikel yang akan ditampilkan dalamm satu halaman daftar isi. Silahkan ganti sesuai keinginan

24 Juni 2009

Cara membuat kotak banner

Membuat kotak banner hal yang biasa dilakukan oleh para blogger, tapi bagaimana membuat kotak banner yang teratur, itulah pertanyaan yang perlu dijawab, sebelumnya kamu juga harus tau dulu berapa lebar halaman sidebar kamu, kali ini saya akan kasih tutorialnya buat kamu yang pengen membuat kotak banner dengan ukuran 125x125px, karena ukuran banner ini adalah ukuran srandar yang sering dipakai oleh para blogger untuk memasang iklan ataupun bertukar banner dengan sesama blogger untuk bertukar link.

Langkah pertama:

  • Log in dulu ke blogger
  • klik Tata letak
  • Edit HTML
  • jangan lupa download dulu tamplate asli anda untuk mencegah hal-hal tak diinginkan
  • cari kode ]]></b:skin>
  • letak kan kode dibawah ini di atas kode ]]></b:skin>


/* Kotak Banner
===================== */
#Box-Banner-ads {
margin: 0px;
padding: 5px;
text-align: center; }

#Box-Banner-ads img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px outset #c0c0c0; }

#Box-Banner-ads img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px inset #333; }



  • Simpan tamplate anda
Langkah Kedua:
  • Klik Tata letak
  • Elemen halaman
  • klik HTML/Java script
  • kemudian copy kode di bawah ini


<div id=”Box-Banner-ads”>
Letakkan kode banner anda disini

<a target=”_blank” href=”http://#”><img alt=”banner ads” src=”http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif&#8221; border=”0″/></a>

<a target=”_blank” href=”http://#”><img alt=”banner ads” src=”http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif&#8221; border=”0″/></a>

</div>



yang kode # ganti dengan alamat blog anda disana untuk memasukkan anda ganti tulisan Letakkan kode banner anda disini dengan script banner anda kemudian simpan liat hasilnya

19 Juni 2009

Membuat 3 kolom element dibawah header

kadang blogger menginginkanya 3kolom dibawah header, biar ada yang ditengah katanya,emang enak ya kalo ada yang tengah2, he he…eh jangan ngeres loh..ha ha ha..dah ah malah nglantur,
tutorial tentang bagaimana cara membuat 3 kolom element dibawah header.

1. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:



#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;

}



2. Kemudian cari kode <div id=’main-wrapper’> setelah dapat letakkan kode beikut diatasnya :



<div id=’box-main-container’>
<div id=’box1′ style=’width: 30%; float: left; margin:0; text-align: left;’>
<b:section class=’box-column’ id=’col1′ preferred=’yes’ style=’float:left;’/>
</div>
<div id=’box2′ style=’width: 40%; float: left; margin:0; text-align: left;’>
<b:section class=’box-column’ id=’col2′ preferred=’yes’ style=’float:left;’/>
</div>
<div id=’box3′ style=’width: 30%; float: right; margin:0; text-align: left;’>
<b:section class=’box-column’ id=’col3′ preferred=’yes’ style=’float:right;’/>
</div>
<div style=’clear:both;’/>
</div>



3. Simpan template dan lihat hasilnya, jika sukses maka akan ada 3element lagi dibawah header kamu seperti gambar dibawah ini:

3 element

12 Juni 2009

Membuat background pada artikel terkait

Buat temen2 yang pengen relate postnya atau artikel terkaitnya mungkin perlu tutorial yang satu ini, caranya mudah kok, kamu tinggal menambahkan kode css saja, yuk dipasang background juga biar tambah keren juga blognya,soalnya jika blog kamu enak dipandan maka pengunjungpun akan betah berlama-lama di blog kamu, asal blog kamu gk lama aja loadingnya..ha ha ha…

langsung aja ya…..buat yg sudah pasang related post or artikel terkait kawan tinggal
cari code ]]></b:skin>
trus copas code berikut ini dan taruh di atas code ]]></b:skin>

/* Related post
———————————————– */
.rbbox{border:1px solid silver;background:#e0ffff url(http://i492.photobucket.com/albums/rr288/angger07/EmoExcited.gif) no-repeat right bottom;-moz-border-radius:5px;margin:5px;padding:5px}
.rbbox:hover{background-color:#fff}

ganti alamat url gambar berwarna merah backgound sesuai gambar yang anda inginkan!

11 Juni 2009

Proteksi WordPress dengan Plugin Antivirus

antivirus wordpressWordPress memang Blog  CMS yang sudah dikenal baik dengan keamanan-nya, namun Cracker menemukan Bugs atau celah untuk dapat memanfaatkan blog tersebut menjadi berantakkan karena di rusak oleh-nya.

untuk mengantisipasi kerusakan yang mungkin terjadi, anda diminta untuk meng-upgrade wordpress dengan update-an terbaru dari wordpress. sehingga anda dapat lebih mengamankan blog anda dari serangan-serangan yang mungkin terjadi, untuk melindungi wordpress anda anda bisa menggunakan WP-Plugin Antivirus.

WP-Plugin Antivirus adalah Plugin antivirus untuk WordPress yang sangat bagus untuk melindungi dari blog injection dan untuk meng-eksploitasi Spam.

Fitur yang diperoleh dari plugin ini:

  1. Mendeteksi back door  permalink WordPress
  2. Manual pengujian dengan hasil langsung dari file yang terinfeksi
  3. Secara otomatis memeriksa setiap hari dengan pemberitahuan melalui email
  4. Putih: Menandai file yang dicurigai sebagai “Tidak Virus”

Untuk menginstalnya, Anda dapat masuk ke Dashboard WP, kemudian klik Add New Plugins, masukkan di kolom pencarian “Antivirus”.

Nb: Eksploitasi adalah nama untuk segala sesuatu yang dapat digunakan untuk melakukan serangan terhadap sasaran-sasaran.