Minggu, 17 April 2011

Membuat Buku Tamu Melayang Dari Atas Ke Bawah

oke untuk caranya mudah anda hanya tinggal meng-Copy
kode di bawah ini Lalu Anda tinggal mengganti apa yang harus
di ganti......

caranya:

1. Log in ke blog anda
2. Klik Rancangan / Layout
3. Klik tambah gadget
4. Pastekan kode nya disitu


<style type="text/css">
#at{
position:fixed;
right:200px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #ff0000;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIWPI2t6ZEk3as8lxiBLA0_vV4723bk-h_5MZp2T2_yZudKcY43zWPKWVubCCRgns9QBXsAQXt_XEGrkktO9UjClnpLYmTIRl58NiiHbiBOj5dB4yU98RKzViZF3ygwHCqYJlh6SQDHnnx/) #000000 repeat;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</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:transparent">
<div id="edited" style="width:auto; height:auto; background:transparent; position:relative" align="center">
DISINI   KODE     BUKU    TAMU    ANDA
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYpV9wx1FnB4XeoXsVw7RFa_yuzUdvCebSQv4ClWhI8bBFBkCLwpwex-XRZjr59G1rc_s3zovBuC9uM_3vspIEdqPesVhOD-WcAs1CsdBf24bOIEuR2CCR_ILF5wj1fkR4vfzWX1iMxwU/" alt="close" title="Click here to Close Cbox" /></a></div>
<div align="left"><font size="2"><a http://caesar-raseac.blogspot.com/2011/04/membuat-buku-tamu-melayang-dari-atas-ke.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">Caesar Rendra</span></div></a></font></div>
</div></div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></center>
<div class="attab">
<a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://www.cutmypic.com/uploads/title242655465.png" alt="cbox" title="Click here to open Guest Book" /></a>


ANDA hanya tinggal mengganti kata  DISINI   KODE     BUKU    TAMU   ANDA dengan kode buku tamu
ANda.......

Kamis, 14 April 2011

Logo2 Animasi Buku Tamu !!


http://th769.photobucket.com/albums/xx338/raharjoismail/th_UpinBukuTamu.png





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS549njmYBOOeATFwIqyP2GqlBK5f_Ht6vSbbzaUC0COO1Zx4zE1Yus2759kmY9CcQtsLD6CWM4ZSjwpQVYU8kfQXB8NBCta-JUVREiEIDCGHry9Bmh_6yxTEIR99ynSjQ_jP8BfDeITI/s1600/Teoringeblog-buku+tamu+1+(78+x+190).gif






https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4-aLw6APm9NSPGcT-XOxw-dLp03izobT0OcKf31GJj0vTQPO0IUyP7SGU_8Q-_0461M5vZGnO7QiZPGutrue0QWrOzSo9m3Bbff1GK9_k1hF3CeQlnUEG5ATAv8pTdffGuK_TE605TCk/s1600/Teoringeblog-buku+tamu+2++(+63+x+152+).gif






https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirbMf_H_VsXD75-IYgEGXMXWY5oo9UB-Zvvhsp2UsOT2G3gOHtU7NzuYTmKNSgN7Y6XtiufhmeR80bzrrjZtJe5wCrS-j7Ur1BG4V-jAGreAA930pOt8fm_EvSD-KvDrJNNGrblXNx-S8/s1600/Teoringeblog-buku+tamu+3+(+64+x+244+).gif






https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT2Y9Ghd-pce0PXMJiK26iRmdeq5Rg6IoZ9GdZWrCQNQ3-v6l2NBMzxv3gFiH6D1FBPEiRn5anm4R5yfYqdFzLMULSMQYYACwDOhIVSy6a4To6Y8y0tgnlW9UJRCX24wiZTP0A9fTtEy8/s1600/Teoringeblog-buku+tamu+4+(+87+x+127+).gif





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIY0UqMCE9rq2fdfOkhcndEsiAwomBOn7fCi7n_kFnv7JOyDl1fnxijbHkCFNCkaJYYdN1DXO0y8f6W1hg32ZZhyJZ2OKqzXuhH9-rf9hteo0yX5Oi8NmpuninQJLIe3Ke_erKiAz_Qc8/s1600/Teoringeblog-buku+tamu+5+(+67+x+185+).gif





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD0xM4nN_NxLuNeROBcE_hQLZRkm9QqJw2mY4KUuPNlCi0OOPeOOrXlpZV3TGvelCgqIFGsWDBwZulNhCRwsNXKMhM4v11lnrXInRlaYm1fOvZthA6bhpOhvVMQLdegnfw-DEO7im6odU/s1600/Teoringeblog-buku+tamu+6+(+65+x+202+).gif





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsWpHZ8Jl6xAeW6UqCHI7uHV0VIjRCAjJhXWxSZ_OIaDaOubMOEZVRE5UrsFDWovZR6qAnHYVIUoF6u-Imo5OvsjN-wV0UHM9I714WP0ajgtyhP7WWSFXz3-mIHXPGzSR_PrxjVEWs9V8/s1600/Teoringeblog-buku+tamu+7+(122+x+147+).gif






https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoSROPkLb3H5BQOR-1YjOCU-r8SDBES6MKbmMWrD6nPKtsG6jhu3NZ79qEcea8Ar1vmxUDSMi2W4h2L_rN99ta7JKqJ-6BWx0Ra2fpZR8EOUWQOv9qTeWjEzNtwQAhaUowYoNmC8ewQTo/s1600/Teoringeblog-buku+tamu+8+(+81+x+147+).gif





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-qykZME_fUowC6G8cMzyektuWESzDo2LxQeYRFmTx2n6EHrk0oKTgKcAzOub-2Lc0B6UDDeMrMuluFAQmWjDG55K0sq6utsY4CHhHeEYTyV-Ps1Zh-MuYGxeGkOlWuoT9XrQ4vxEnXq4/s1600/Teoringeblog-buku+tamu+9+(+89+x+100+).gif






http://th1210.photobucket.com/albums/cc419/GABRIELMUALANK/buku%20tamu/th_Chatbox.png





http://th890.photobucket.com/albums/ac110/arary/th_buku-tamu_03-1.gif




http://th263.photobucket.com/albums/ii151/wirnawan/th_guestbook.png




http://th1084.photobucket.com/albums/j416/kimzigr/th_bukutamu.jpg

Senin, 11 April 2011

Menambah Add Elemen Pada Bagian Header

Menambah add elemen pada bagian header bertujuan agar kita dapat menambah suatu gadget di lain waktu, mungkin ketika teman2 ingin menambah kotak pencarian blog maka trik ini cocok digunakan. Selain itu sebagian rekan blogger (termasuk saya) menggunakan trik ini untuk menambah gadget menu Horisontal. Nah bagi teman2 yang menginginkan layout/tata letak blognya memilki elemen add gadget tambahan pada bagian header, silahkan langsung peraktek trik yg akan kita bahas dalam postingan kali ini.

Sebagai contohnya, berikut ini adalah tampilan bagian header sebelum ditambah elemen add




Setelah ditambah, maka tampilannya akan seperti berikut ini




Sekarang teman2 pasti sudah pada tahukan bedanya, pada bagian yg telah saya tandai dgn warna merah tersebutlah yang saya maksud dengan add elemen baru atau tambahan, maka untuk membuatnya silahkan login dulu ke blogger, lalu klik Tata Letak dan klik Edit HTML


Selanjutnya Taruh kode berikut tepat di atas kode
]]></b:skin>
#gadget_header{
margin:10px 0;
padding:1%;
width:100%;}

Cari kode <div id='header-wrapper'> dan letakkan kode berikut di atasnya:


<div id="gadget_header">
<b:section class='header' id='gadgetheader' preferred='yes'/>
</div>

Simpan hasil kerjaan teman2. Untuk melihat hasilnya, silahkan untuk pergi ke halaman tata letak/layout.

Di atas adalah cara menambah add gadget elemen yg berada tepat di atas bagian header blog. Oleh karena itu, elemen ini cocok digunakan untuk menyimpan gadget seperti form pencarian atau search. Bagi teman2 yang ingin menambah add gadget elemen yg berada tepat di bawah header blog maka teman2 bisa menggunakan trik berikut ini (kalau yg ini cocok digunakan/diisi dengan gadget menu horizontal)


kembali ke halaman edit HTML dan jangan lupa centang kotak "expand widget template", lalu letakkan kode berikut tepat di atas kode
]]></b:skin>
#under_header{
margin:10px 0;
padding:1%;
width:100%;
}

Selanjutnya yang harus teman2 lakukan adalah mencari kode berikut


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>



(Kalau memang susah untuk dicari, jangan cari semua kode yang tertera. Cukup cari <div id='header-wrapper'> selanjutnya kalau dah ketemu coba cocokkan dengan kode di atas)


Kalau dah ketemu letakkan kode berikut di bawahnya




<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>


Dah, simpan. Sekarang tengok hasilnya...

Tampilannya nanti akan seperti berikut ini


nonton tv di sini !!