Cara Membuat Blogroll Blog

Cara Membuat Blogroll Blog

Sesuai dengan judul postingan ini bahwa Blogroll Menghemat Tempat pada blog kita, ini bisa kita manfaatkan jika banayak link teman-teman di blog kita, kemudian blogroll juga bisa kita gunakan bukan hanya link berupa teks saja tapi link-link bergambar seperti banner dari blog teman-teman atau gambar-gambar lainnya. di bawah ini tiga contoh blogroll yang bisa sobat gunakan. tipe-tipe ini perbah dicoba pada blogger dan worpress. widget blogroll ini berupa tag HTML/cript dan sobat tinggal memasangnya pada gadget. Ketiga tipe tersebut adalah blogroll yang menggunakan background, blogroll border (garis pinggir), dan blogroll tanpa border. lihat contohnya di bawah ini.

Code Script Blogroll 1

<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 150px; height: 180px; text-align: left; background:#7fffda;">

Apa saja terserah anda dengan menggunakan kode HTML

</div> 

Code Script Blogroll 2

<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 150px; height: 180px; text-align: center; background:#FFFFF;">

Apa saja terserah anda dengan menggunakan kode HTML
 
</div>

Code Script Blogroll 3

<div style="border: 0px; overflow: auto; width: 150px; height: 180px; text-align: center; background:#FFFFFF;">

Apa saja terserah agan dengan menggunakan kode HTML

</div>

Cara Pasang:
Masuk blog sobat-> Rancangan-> Tambah Gadget-> HTML/JavaScript, kemudian masukan salah satu script di atas, klik simpan.

Keterangan:
sobat bisa merubah align teks dan backgroundnya, sobat bisa mengubah left (kiri), right (kanan) atau center (tengah) setalah text-align: dan mengubah kode warna setelah background:# … disesuaikan dengan warna template.
Kemudian untuk merubah lebar dan tinggi kotak widget blogroll terseb sobat tinggal mengganti angka yang terdapat setelah width (lebar) dan height (tinggi) disesuaikan dengan ukuran sidebar template sobat.

Membuat Spoiler Pada Blogger

Membuat Spoiler Pada Blogger

Spoiler itu apa sih?? Mungkin yg sering berkelana dalam dunia internet tahu apa itu spoiler. Ok, spoiler adalah ras ayam yang mampu tumbuh cepat sehingga dapat menghasilkan daging dalam waktu relatif singkat kurang lebih 5-7 minggu... eits, apaan nih ayam-ayaman segala.. ngaco lo, bukan inilah artinya..

Oke, jadi balik lagi ke spoiler. Spoiler bisa disebut juga tulisan atau keterangan mengenai suatu cerita yang membeberkan jalan cerita tersebut. Karena sifatnya yg 'membocorkan' itu, maka keberadaanya kadang2 mesti disembunyikan. Jadi hanya terbaca oleh orang yg mau ngebaca bocoran tsb. Untuk menyembunyikan bocoran tsb, biasanya menggunakan kombinasi CSS dan JavaScript. Nah, teknik menyembunyikan bocoran itu akhirnya biasa disebut juga dgn spoiler.

Spoiler bisa juga digunakan untuk mengejutkan pengunjung dgn apa yg ada dalam spoiler tsb. Atau bisa juga untuk menghemat tempat artikel yg terlalu panjang. Well, fungsi spoiler bisa macem2 lah pastinya. Tinggal sekreatifnya kita aja.

Terus gimana cara ngebuatnya??
Caranya mudah banget koq..
Tinggal masukin kode HTML ke dalam postingan atau Elemen HTML.

<div><div style="margin-bottom: 2px;"><i><b><small>JUDUL SPOILER  </small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/></div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">

ISI SPOILER

</div></div></div>

Selesai......

Membuat Chat Box/Buku Tamu Tersembunyi

 Membuat Chat Box/Buku Tamu Tersembunyi

Hello, Kita jumpa lagi semoga semua sehat walafiat.....
Oke kali ini saya akan memposting cara membuat chatbox/buku tamu tersembunyi, semua pasti udah tau apa itu chatbox /buku tamu oke langsung aja dech.....

Berikut langkah-langkahnya

1. Login di blogger dengan ID anda
2. Klik menu Layout
3. Klik Page Elements
4. Klik Add a Page Element
5. Klik Add Gadget
6. Klik HTML/Java Script
7. Truss Copy Kode Dibawah

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i1182.photobucket.com/albums/x449/hadist4r/tabs2-2.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #F05C0A;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

HTML/Java Script ChatBox Kamu

<div style="text-align:right">
<a href="javascript:showHideGB()">
[X]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Keterangan:

http://i1182.photobucket.com/albums/x449/hadist4r/tabs2-2.png: Bisa di ganti dengan gambar kamu sendiri

Height: Sesuaikan dengan gambar kamu

Width: Sesuaikan dengan gambar kamu

Selesai Dech.....
Jangan Lupa Comment...

Cara Pasang Emoticon / Smile di kotak komentar

Cara Pasang Emoticon / Smile di kotak komentar

Kali ini saya akan memberitahu anda bagaimana cara pasang emoticon/smile di kotak komentar...

oke langsung aja.....

[-]Buka blogger ==> Rancangan ==> Edit HTML

[-]Cari kode </body> , kalau udah ketemu taruh kode di bawah sebelum </body> , tekan 'ctrl+f ' biar gampang...

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

 Setelah itu cari kode:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

Cari kode yang warna merah, kalau  <p class='comment-footer'> ada 2 pilih yang kayak diatas

lalu taruh kode di bawah, di bawah kode <p class='comment-footer'>  ini kodenya:

<center><b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b></center>

 Selesai dech....

Silahkan Comment bila berhasil.....

Membuat Daftar Isi Blog

Daftar isi di blog sangatlah penting perannya, karena ini dapat mempermudah pembaca kita menemukan artikel-artikel lain di blog kita.
Setelah berkutat berhari-hari dengan javascript, akhirnya selesai juga script untuk membuat daftar isi blog.

Daftar isi ini tidak hanya menampilkan judul dan link-nya, tapi juga menampilkan label, tanggal postingan, serta ringkasan dari artikel-artikel kita.

Selain itu, daftar isi ini dapat di-filter untuk menampilkan beberapa artikel dengan label atau tanggal tertentu saja, dan dapat juga diurutkan sesuai tanggal atau judulnya.
Untuk contohnya, kamu bisa lihat di sini.

Caranya:

1. Masuk ke account Blogger kamu, pilih "Posting" - "New Post",
2. Kemudian isi judulnya dengan judul yang kamu inginkan, seperti "Daftar Isi" atau semacamnya,
3. Kemudian copy-paste kode di bawah ini:

<br /> <div id="cl_option">Loading... </div><div id="cl_content_list"></div><script type="text/javascript">var jumlah_kata_dalam_ringkasan = 200;</script><br /> <script src="http://colorfullink.googlecode.com/files/Daftar_isi.js"> </script><br /> <script src="http://BLOGKAMU.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script><br />

4.Jangan lupa untuk mengganti BLOGKAMU dengan URL blog kamu,
5.Kamu juga bisa mengatur jumlah kata dalam ringkasan dengan mengubah nilai variabel jumlah_kata_dalam_ringkasan,
6.Untuk mencegah daftar isi ini berada di halaman paling depan, klik "Post Option" di bagian bawah sebelah kiri, kemudian ganti tanggalnya jadi beberapa hari yang lalu, sebulan yang lalu, atau setahun yang lalu,

Selesai Dech....