Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah

Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Kali ini saya akan memposting cara memasang Cbox  auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.

Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.

Berikut ini adalah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah:

1. Seperti biasa sobat harus Login dulu di akun blog sobat
2. Pilih Tata Letak
3. Tambah Gadget HTML/Java Script
4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.  

Kodenya Gan

<style type="text/css">

#at{

position:fixed;

right:35%;

z-index:+1000;

}

* html #at{position:relative;}

.attab{

height:0px;

width:0px;

float:top;

cursor:pointer;

background:url(url);

}

.atcontent{

float:left;

border:2px solid #fff;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPjMb7lyrw7FKtTCwB2OCedDH34yKKGhj8Lkqkt3NJBXjdaxlQflk-qbqNNPdYIFDEiCDugfwQ5fyMSJJeC1u8o1W0h6NC___y9YTUIpJg2grJKxE2q31OQwjHlL5upsFH2ieyiSrR34Lf/)#000000 repeat-x bottom center scroll;

-moz-border-radius:10px;

padding:10px;

}

.atcontent:hover{

border:2px solid #fff;

background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;

}

</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.bottom = 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:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

Strip kode cbox sobat

</div>

</div>

<br />

<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>

</div></div>

<script type="text/javascript">

var at = document.getElementById("at");

at.style.bottom = (-200-at.offsetWidth).toString() + "px";

</script>

Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

1. Tetap login di akun blog sobat
2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script 

Kodenya Gan 

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikh5AlQ87ywclEp08-V5Icr-jogUW6SCA4QmuA1QGMFWjt6o-BgTZXfnfuP7DBU9yJQVJ9Nbr5tOCRowzJLQ1WdIFmhxrVXh32PUAqlI40lSOVknYknn9aVJgyvidCR8v_50O8Ik5Fvx1_/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div> 

Demikianlah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah. Semoga bermanfaat bagi sobat semua.

Menambahkan Basmalah dan Hamdalah di Awal dan Akhir Artikel

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Salam sahabat blogger, alhamdulillah dapat menyapa anda kembali, semoga dimanapun anda berada selalu dalam penjagaan-Nya. Setelah beberapa waktu sempat vakum, request tutorial yang disampaikan lewat komentar atau emailpun akhirnya menumpuk. Mohon maaf juga untuk pertanyaan-pertanyaan yang belum sempat terjawab satu persatu. Hari ini dan kedepan insyaAllah saya ingin mencicil request sahabat blogger, tapi mohon jangan ditambah dulu sebelum PR yang satu ini selesai! Baiklah tutorial kali ini saya ingin mengetengahkan cara menambahkan basmalah dan hamdalah diawal dan akhir artikel blog.
Hampir setiap muslim pasti mengenal kalimat basmalah dan hamdalah. Kalimat pendek sarat makna ini biasanya dipakai ketika akan memulai suatu pekerjaan dan usai mengerjakannya. Karena bacaannya yang pendek ini pula, banyak yang menyepelekan kalimat basmalah dan hamdalah. Padahal jika dikaji lebih mendalam, di samping sebagai sarana meraih cinta Allah, ternyata kedua kalimat ini mengandung kekuatan luar biasa dalam meraih kesuksesan dan keberkahan hidup. Tidaklah mengherankan jika para Nabi, Rasul, dan orang-orang sukses selalu membaca basmalah setiap memulai aktivitasnya dan mengakhiri dengan hamdalah sebagai ungkapan syukur.
Tapi tak menambahkan kedua kalimat ini dalam artikel yang anda tulis, dan mencukupkannya dilisan sendiri saja tentu juga sudah cukup dan baik karena menambahkan keduanya dipostingan bukanlah kewajiban.
Baiklah cukup untuk pengantar, berikut cara menambahkan basmalah dan hamdalah diawal dan akhir posting blog

• Setelah login ke akun blogger anda
• Pada dasbor >> klik  tab template >> Edit HTML
• Klik tab drop down Lompat ke widget >> Blog1 >> Klik tanda panah kecil disamping kode dengan id Blog1
• Klik tanda panah kecil disamping kode <b:includable id='post' var='post'>
• Click Ctrl+F >> cari kode <data:post.body/>

Untuk menambahkan basmalah diawal posting tambahkan kode berikut diatas <data:post.body/>

Kodenya Gan  

<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></span></span></div><br/>

Untuk menambahkan hamdalah diakhir postingan tambahkan kode berikut dibawah <data:post.body/>

Kodenya Gan

<div align='center'><span style='font-size: medium;'>ٱل&#1618;ح&#1614;م&#1618;د&#1615; ل&#1616;ل&#1614;&#1617;ه&#1616; ر&#1614;ب&#1616;&#1617;
ٱل&#1618;ع&#1614;&#1648;ل&#1614;م&#1616;ين</span></div>  

• Simpan template dan lihat hasilnya di blog anda.

Demikian tutorial kali ini, cara menambahkan basmalah dan hamdalah diawal dan akhir artikel blog. Semoga bermanfaat dan berkah.
Terimakasih.

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين