Dian's Site

Hai Readers! Jiahaha, judul postinganku ini sok banget ya. Iya, aku kayak orang pinter aja. Tapi karena pengen membantu sesama blogger pemula, aku kasih tau caranya.

Nah, buat kalian yang mau masang widget jam/kalender, atau yang laennya tapi nggak tahu caranya, berikut langkah-langkahnya.. Oh ya, sebelumnya kalian harus cari widget apa yang pengen kalian pasang. Kalian bisa buka di: http://widgetindex.blogspot.com/ atau website lain.

Tapi kali ini widget index aja dulu ya.. Gini, pertama kalian pilih widget apa yang kalian suka, misalnya seperti widget yang ada disamping kiri kalian ini. Tau yang lainnya. Pokoknya kalau udah dapat, klik gambarnya, terus nanti muncul seperti ini:




Terus...

 Abis itu, kebali ke blog, terus buka tata letak, abis itu pilih tambah widget.


Terus pilih HTML/Java Script


Terus pilih save deh! Jadi!! Eh, tapi kalau masang dibagian sidebar baiknya nggak usah make judul widget. Hasilnya kayak dibawah ni.. disamping kiri.. Kekeke.. ada juga yang kayak gini:

Yang ini bikinnya sama yak yang diatas.
kodenya masukin kata-kata dari kita.
Yang kayak gini ada juga yang gambar artis korea kayak IU, Kim Bum, Suzy, dll.
Yang ini juga sama  tapi kodenya tigal copas
aja, nggak usah pake kata-kata dari kita.

Pokoknya, pada intinya, semua widget itu sama cara masangnya, termasuk widget yang bukan dari website widget index. Kalau dari widget index, cuma yang ada pesan dari kita aja, yang kodenya harus diisi dengan kata-kata dari kita. Gimana? Udah bisa belum? Oke, kalo gitu sekian ya, posting ini, bye!!


Thanks for: Widget Index 
Sumber Gambar: capture dari blogku, sama widget index

Ehm..Ehm.. Cek..Cek..1..2..3.. Hai sobat, apa kabar, Setelah lama kebingungan mau update post tutorial blogspot tentang akhirnya ketemu juga, yaitu Cara membuat show / hide guest book dari atas. Tapi yang kali ini beda loh, bukan yang saya share Disini . Kalau yang itu kan show / hide dari kanan. Kalau ini show / hidenya dari atas. Seperti punya saya. Kalau mau lihat Demonya lihat ke bagian kanan blog saya ada gambar Guest Book dan klik itu. Dan chat box pun keluar. Sobat ingin tau bagaimana cara membuatnya? Ikuti langkah - langkah di bawah ini:

1. Pastikan sobat sudah login pada blog sobat
2. Langsung beralih ke halaman Rancangan
3. Selanjutnya klik Tambah Gadget dan pilih HTML / Javascript
4. Kemudian pasang kode di bawah ini

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:autopx;
width:autopx;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #FF0000;
background: #F5F5F5;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:5px;
-moz-box-shadow: 0px 2px 5px 0px #FF0000;
}

</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:#F5F5F5;">

<!-- Taruh kode chat box sobat Disini -->

</div>
</div>

<div align="center"><a href="javascript:void(0);" onclick="showHideAT()"><input type="button" value="Close" class="close" /></a>
</div>

</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<div style='display:scroll; position:fixed; top:80px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://1.bp.blogspot.com/-dsspRx_lf3M/TvvZ4De97aI/AAAAAAAAAAw/PTp1z_YvqJE/s1600/Chat+Book.png"  /></a>
</div> 

5. Simpan dan lihat hasilnya

Keterangan:

• Ganti tulisan  yang berwarna merah dengan kode chat box sobat
• Jika sobat ingin merubah garis pinggirnya ganti kode yang berwarna biru
• Jika sobat ingin merubah tab picturenya ganti kode yang berwarna pink
• Kode yang berwarna hijau adalah kode background nya
• Sobat tiadk tau kode warna? silahkan lihat Disini

Bagaimana? sudah jelas? bila masih ada pertanyaan silahkan berkomentar oke? Selamat Mencoba!!

Tambahan dari author blog:
Yang tulisan merah itu, diganti sama kode chat box kalian, jadi sebelum itu harus buat chat box cara buat chat box, ada di entry sebelumnya. 

Sumber: Blognya Reggy dengan sedikit tambahan.

Ada yang perlu chat box untuk menghias blog? Mungkin sudah banyak yang tahu. Tapi, bagi yang belum tahu, nih aku kasoh turtorialnya.


A. Cbox

1.Buka Cbox lalu, pilih "Get Your Own Free Cbox Now!" Untuk membuat akun Cbox.

2.Setelah itu isi kolom sesuai ketentua lalu pilih, "Crate my Cbox!"

3. Lalu pilih menu "Publish" pada menu bagian atas. Lalu copy code yang ada di bagian bawah.





Cara lain yang lebih cepat adalah buka e-mail anda lalu buka kotak masuk dari cbox lalu klik linknya (sebelum tulisan About  The Premium Cbox).
Jika belum sing up, sing up lah, lalu copylah code yang ada.


4. Buka blogger kalian, lalu pilih tata letak dan pilih HTML/JavaScript

B. Shout Busuk

1.Buka Shout Busuk lalu pilih Sign Up. Kalian juga bisa sign up melalui akun facebook kalian.
2. Lalu atur tinggi dan lebarnya setelah itu, copy kode yang ada di box.




Cara kerja Shout Busuk berbeda dengan Cbox. Kalian harus mengisi nama dan e-mail terlebih dahulu atau singn up lewat facebook setelah itu baru muncul kolom untuk menuliskan pesan.


Sekian pos ini, semoga bermanfaat ^_^