My Facebook

Selasa, 01 Oktober 2013

Cara membuat kotak scroll pada postingan blog

Bagaimana cara membuat kotak scroll pada postingan? Caranya sangat sederhana dan mudah.
Pada saat kalian ingin membuat sebuah postingan, masuk pada mode HTML (bukan mode Compose. Lihat gambar)

Kemudian copy-paste kode dibawah ini

<div style="overflow:auto;width:400px;height:150px;padding:10px;border:1px solid #000000">
Hapus tulisan ini dan ganti dengan tulisan yang kalian inginkan</div>


NB: ubah angka berwarna biru untuk mengubah ukuran lebar kotak scroll. ubah angka berwarna hijau untuk mengubah ukuran tinggi kotak scroll. ubah kode warna berwarna oren untuk mengubah warna border/pinggiran kotak scroll. Dan ubah tulisan berwarna merah dengan yang kalian inginkan.

Contohnya lihat dibawah ini

Kotak scroll
Kotak scroll
Kotak scroll
Kotak scroll
Kotak scroll
Kotak scroll
Kotak scroll
Kotak scroll
Kotak scroll
Kotak scroll
Kotak scroll

Baiklah, tutorial ini sebenarnya sangat singkat. Apa saya sukses membuat tutorial ini menjadi cukup panjang? Semoga berhasil! Oh iya, kalau ingin melanjutkan menulis postingan, kembali ke mode compose. Selamat malam!


By: Oki F.

Membuat Buku Tamu

Cara Membuat Buku Tamu Yang Tersembunyi

Sebelum anda membuat buku tamu di blog anda, anda harus memiliki kode buku tamu, anda bisa mendapatkannya di Shoutbox, Cbox, atau Shoutmix.
Yuk Langsung ke tutorialnya!!!


1. Login di blogger dengan ID anda.
2. Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
3. Lalu Copy kode berikut dan Pastekan Pada kotak HTML

 <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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvd25aItIESvrS9RkspuO6rc4Muyg4JOaj241vFx9bSMge1PjdxfGqc9VEm_qkwfouZYD4UbUGGqU20oYcp8X0ZYG5i068nJi00JbH1BDCyN95CH_VSSL5MC0leH8yMhwhEccD23Y5RDFS/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
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">

< Letakkan disini kode Shoutbox Anda>

<div style="text-align: center;">
<span style="font-size: 10px;"><span style="font-family: "Trebuchet MS",sans-serif;">Supported by <a href="http://sazuke-4rt.blogspot.com/2013/01/buku-tamu.html" target="_blank">Sasuke Blog</a></span></span></div>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Ganti tulisan < Letakkan disini kode Shoutbox Anda> dengan kode script buku tamu sobat.
4. Save Widget tersebut.

Jika langkah tersebut sudah anda lakukan, anda dapat melihat hasilnya pada blog anda masing-masing. Demikianlah cara memasang buku tamu tersembunyi ini, semoga bermanfaat.

Berkomentarlah dengan Menyangkut Nama Judul Artikel Di Atas !!!!

By : Oki F.