Cara Membuat Chat Room Pada Blog

Yang di maksud disini adalah chat room seperti mIRC, dan bukan shoutbox seperti kotak pesan singkat begitu.

Untuk script-script chat yang banyak tersedia di internet kan biasa nya di sediakan bagi website kita yang sudah memiliki hosting sendiri, dan biasa nya script tersebut mesti di instal dulu di tempat kita menyewa hosting, tapi..biasa nya para pemiliki web hosting memiliki aturan bahwa kita tidak boleh menginstal script-script yang terlalu memakan banyak resource seperti script IRC (chatting), namun sebenarnya ada cara lain untuk membuat chat room sendiri tanpa harus menyewa hosting VPS.Yaitu dengan menggunakan Chat room hosting 99chats.com.

 

Apa itu chat room hosting (99chats.com)? Jadi, chat room hosting itu seperti website yang sudah menyediakan script khusus yang bisa kita pasang di website kita namun tanpa harus menginstal di tempat kita hosting, kita cukup copy saja script nya (biasa nya berupa java Script) maka website kita sudah bisa memiliki chat room sendiri, dan untuk Customize nya bisa kita atur sendiri seperti warna, dan juga luas nya.

 

Untuk mencoba nya silahkan kunjungi website nya di link berikut : 99chats.com

Chats Room

Cara Membuat Popular Posts Dengan Efek Slide

Dilihat dari tampilannya, Popular Posts dengan menggunakan efek animasi slide memang sangat keren bila dipasang pada web atau blog kita. Sampai saat ini saya masih tetap tertarik dengan widget ini, makanya kali ini saya update kembali random post tersebut. Random post ini sudah lama saya dapatkan dari blogger senior Abu Farhan (Tanks Bang...., sukses dan tetap berkarya selalu...)

Pada update kali ini, saya sedikit merubah tampilan widget random post tersebut, biar tampil beda, saya yakin sobat blogger suka. Silahkan anda 

LIHAT DEMO

Bila anda berminat, silahkan ikuti langkah - langkah dibawah ini :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:10px;
padding: 0px;
height:280px;
}
#spylist ul{
width:275px;
overflow:hidden;
list-style-type: none;
padding: 0px;
margin:0px;
}
#spylist li {
width:240px;
padding: 7px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:65px;
overflow: hidden;
background: -moz-linear-gradient(center left, #727273 0%, #ccc 40%,#ccc 90%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #727273),color-stop(0.40,

#ccc),color-stop(0.90, #ccc),color-stop(1, #ffffff));
border-style:solid;
border-left-width:10px;
border-color:#ddd;
box-shadow: 3px 4px 3px #797979;
-webkit-box-shadow: 3px 4px 3px #797979;
-moz-box-shadow: 3px 4px 3px #797979;
}
#spylist li a {
text-decoration:none;
color:#000;
font-size:14px;
font-weight:normal;
font-style:normal;
text-shadow: 1px 3px 3px #fff;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 5px 0px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
#spylist li img {
float:left;
margin-right:7px;
margin-left:7px;
background:#EFEFEF;
border:2px solid #fff;
box-shadow: -3px 2px 2px  #000;
-webkit-box-shadow: -3px 2px 2px #000;
-moz-box-shadow: -3px 2px 2px #000;
}
.spydate{
overflow:hidden;
font-size:10px;
text-shadow: 1px 2px 2px #8EABFF;
color:#455D95;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
display:none;
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#fff;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='JavaScript'>
imgr = new Array();
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#012EB0";
aBold = false;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 60;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "ULR BLOG ANDA";
limitspy=3
intervalspy=4000
</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js'

type='text/javascript'></script>
</div>

5. SIMPAN

Selamat mencoba ya...
Semoga bermanfaat..... Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Cara Mudah Membuat Link Menjadi Warna-Warni di Blog

Udah pernah liat link yang berwarna-warni seperti pelangi (rainbow) ketika disorot kursor ? Ya kalau belum ya lihatlah seperti yang ada di blog ini link berwarna-warna. Sebenarnya ini adalah salah satu trik sederhana yang menggunakan javascript. Cara membuatnya pun sangat mudah dan GPL alias gak pake lama, asal sudah tau script yang mau dipake maka ngga sampe 5 menit proses membuat link di blog menjadi berwarna-warni seperti pelangi itu pun akan segera terwujud dan hasilnya blog teman pun sudah semakin menarik bukan.

Berikut cara membuat link berwarna-warni :

1. Cari Kode <head>
2. kemudian taruh kode dibawah tepat dibawah kode <head>
   
   <script src='http://anas.ku93.googlepages.com/rainbow.js'>
   </script>
3. Kurang lebih jadinya
   
   <head>
   <script src='http://anas.ku93.googlepages.com/rainbow.js'>
   </script>
4. Semudian Save dan Lihat hasilnya ok!

Benar kan ngga sampai 5 menit ? Nah selamat mencoba cara membuat link menjadi warna-warni ini, semoga sobat puas dengan hasilnya.

Membuat Tab View Menu Tanpa Edit HTML di Blogspot

Sebelumnya saya sudah pernah membahas tentang cara membuat tab view menu (menu dengan tab), namun dalam pembuatan tab view menunya kita harus mengedit HTML template. Mungkin banyak sobat blogger yang takut gagal sehingga bisa merusak template, padahal tidak mungkin rusak jika sebelum melakukan pengeditan sudah membackup template terlebih dahulu.

Setelah bereksperimen, akhirnya saya coba dengan meletakkan kode script-nya langsung di gadget, ternyata berhasil. Dengan menyatukan semua kode yang ada, pembuatan menu tab view tidak perlu lagi susah payah mengedit HTML template. Jika sobat sudah pernah membaca postingan saya yang dulu, sobat tinggal menyatukan semua kodenya dan letakkan di gadget, belum tau urutan kodenya?

Baiklah langsung saja, sekarang anda mesti login dulu ke blogger, kemudian pada Elemen Halaman  klik Tambah Gadget, lalu pilih yang HTML/Javascript. Setelah itu tambahkan kode script menu tab view-nya seperti dibawah ini :

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">

<div class="Page">
<div class="Pad">
konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>

<script src="http://creatingwebsite.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

Keterangan:

• Tulisan berwarna kuning merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
• Tulisan berwarna orange merupakan warna judul Tab
• Tulisan berwarna hijau merupakan judul Tab
• Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
• Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berkedip dibawahnya. Demikian tadi tutorial membuat tab view widget tanpa eit HTML, contoh dari tab view ini bisa anda lihat di blog ini.

Semoga bermanfaat !

Cara Merubah Read More Pada Postingan Menjadi Lebih Menarik

Banyak template dengan fasilitas read more mempunyai tampilan kurang menarik. Mungkin juga anda bosan dengan bentuk read more seperti yang dimiliki dan bermaksud menggantinya. Jangan khawatir gan, saya akan berikan beberapa pilihan read more menarik dan bisa dimiliki sesuai keinginan anda. Sekarang mari kita bahas cara merubah read more menjadi menarik. Ikuti langkah berikut.

1. Log in ke blog anda
2. Klik Rancangan
3. Klik Edit HTML
4. Centang Expand Template Widget
5. Kemudian Cari kode read more, selanjutnya, teruskan baca, atau apa saja seperti tampilan jump break (read more) artikel anda. Setulah Ketemu Hapus kode tersebut dan ganti dengan salah satu kode di bawah ini.

Perhatiakan kode dasar read more. Anda hanya perlu mengganti tulisan merah dengan kode gambar (read more) yang di pilih.

<img align='right' alt='read more' margin='0' border='0' width='80' height='35' src='MASUKKAN KODE GAMBAR ANDA DI SINI'/>

Catatan: Silahkan anda edit width untuk ukuran lebar dan height ujtuk ukuran tinggi tampilan read more

Berikut merupakan beberapa alamat kode gambar yang ada :

 http://i1138.photobucket.com/albums/n524/blogonol/blogonol-readmore4.png

http://i1138.photobucket.com/albums/n524/blogonol/blogonol-readmore3.png

http://i1138.photobucket.com/albums/n524/blogonol/blogonol-readmore-1.png

http://i1138.photobucket.com/albums/n524/blogonol/blogonol-readmore9.png

http://i1138.photobucket.com/albums/n524/blogonol/blogonol-readmore11.png

http://i1138.photobucket.com/albums/n524/blogonol/blogonol-readmore12.png

http://i1138.photobucket.com/albums/n524/blogonol/blogonol-reradmore8.png

http://i1138.photobucket.com/albums/n524/blogonol/blogonol-readmore13.png

http://i1138.photobucket.com/albums/n524/blogonol/blogonol-readmore14.png

http://i1138.photobucket.com/albums/n524/blogonol/blogonol-readmore2-1.png

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyns1iz-ITmEA_fl4ZsZCT9eODIeljIADKltbKmBSxjr-HoGz6cd5rE1H4IkXE0qrOnL2BMaIT5KO5CR6vQ7TMgOhKDGrNwqR4oUylsu7k-EatzSJjg8n8XKGbflf1NJurWnhVxXy_lw-_/s1600/read+more.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQfrJPRFNCU7gmPKtq82gXgXKwUKQvaJ1B8djKDHpxnTkFuSl2H03eHdHtkcgKbGZPFYNGqPYKGykfs3Hm-bWWBIdeOj1Bxvwy3XZCtsW6LI5zIYlyaqokyHWO3GEx36UJ3Q-ttWm12Pe8/s1600/readmore.gif

 

http://www.boisestatebooks.com/outerweb/images/scholarships/readMore.gif

Selanjutnya Simpan Template dan lihat hasilnya

Selamat mencoba dan sukses selalu