Pasang TV Dengan Float di Blog

Haloo para sobat Blogger semua gimana keadaan saat ini? mudah-mudahan dalam keadaan sehat dan tetap semangat!!.

OK. Tutorial kali ini saya akan membahas tentang "Pasang TV Dengan Float di Blog". Tutorial ini saya buat atas permintaan tiga para sobat yang menuliskan/meminta lewat Kotak Komentar, maka dari itulah saya menyempatkan diri untuk mempostingkannya dan mudah-mudahan postingan ini juga dapat bermanfaat bagi sobat yang lain.

Sebenarnya Script ini adalah gabungan dari berbagai macam Script yang banyak digunakan oleh kebanyakan orang antara lain yaitu, Script Buku Tamu Tersembunyi di kiri, Script untuk membuat Scrollbar, dan yang terakhir adalah script Spoiler/Tombol Tutup Buka.

OK, takut para sobat yang sudah menunggu gak sabar, kita langsung aja menuju cara pembuatannya.

Seperti biasa Sobat LogIn ke Blogger masing-masing
Setelah sampai halaman Dasbor klin Rancangan
Pada Halaman Elemen Lamaan Klik Tambah Gadget

Untuk memasuak Kode Script kita mempunyai Empat Tahapan diantaranya adalah sebagai berikut :

Script Buku Tamu yang bisa dismpan di samping kiri / kanan (hidden chatbox ),
Secara keseluruhan script buku tamu sembunyi di samping kiri adalah seperti ini :


<style>
#hcl {
position:fixed;
top:50px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i649.photobucket.com/albums/uu217/teaade/TVOnline1.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

Masukkan Kodenya Disini/ Script Point No 2 Disini

<div class="hc-credit">
<span style="float:left">


</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>

</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>


Nah pada kode yang berwarna merah Kita ganti dengan Script point No 2 dibawah.
Script untuk membuat Scrollbar,
Secara keseluruhan scriptnya adalah seperti ini :

<div style="border: 2px solid rgb(255, 0, 102);
overflow: auto;
width: 400;
height: 200;
text-align: left; ">

Isi content/ Script Point No 3 disini

</div>

Sesuaikan ukuran width dan height dengan ukuran tombol show dan hide pada script no 3
kalau menurut Saya sich ukuran yang pas adalah width = 120 dan height = antara 20-25
Langkah selanjutnya adalah memasukkan script no 3, pada tulisan yang berwarna merah.
Script untuk membuat tombol Hide and Show/Buka Tutup
dan script aslinya adalah sperti ini :

<input 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
= 'sembunyikan'; } else{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
this.innerText = ''; this.value = 'tampilkan'; }" style="font-size:
10px; margin: 0px; padding: 0px; width: 116px;" type="button" value="tampilkan" /></div>

<div class="alt2">

<div style="display: none;">

<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(0, 0, 0)
none repeat scroll 0% 0%; color: white; padding: 10px; text-align: left;">

Isikan dengan yang mau anda simpan/Script TV Disini

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

Ganti tulisan sembunyikan dengan 'STOP' dan tulisan Tampilkan Dengan Nama Stasun TV, tombol ini akan berfungsi sebagai tombol play dan Stop nantinya
Nah baru kita masukkan Script TV nya pada tulisan yang berwarna merah atau sebelum kode
<div><div></div></div></div></div></div>
</div>

Untuk Script TV bya dibawah ini :

Script TV ONE :

<embed allowscriptaccess="always" src="http://www.tvone.co.id/embed/player.swf" allowfullscreen="false" flashvars="&file=tvone&type=video&streamer=rtmp://202.129.216.34/live/&stretching=exactfit&logo= &autostart=true" bgcolor="transparent" height="170" width="220"></embed>

Script TV ANTV

<embed allowscriptaccess="always" src="http://www.tvone.co.id/embed/player.swf" allowfullscreen="true" flashvars="&file=antv&type=video&streamer=rtmp://202.129.216.34/live/&stretching=exactfit&logo= &autostart=true" bgcolor="transparent" height="170" width="220"></embed>

Kalau untuk Script TV yang lain silahkan klik disini.

Naahhh.. selesai juga akhirnya pekerjaan kita, sekarang sobat tinggal klik tombol SAVE dan lihat hasilnya.

Selamat mencoba dan semoga dapat bermanfaat.

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI