Pasang TV Dengan Float di Blog

4/24/2011 Blog Tutorial Blogger Tips Trik Blog Tutorial Blogger Widget
Pasang TV FloatingHaloo 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 :

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

    <!-- left hidden chatbox by http://ade-tea.blogspot.com START -->
    <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">
    <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

    </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>
    <!-- left hidden chatbox by http://ade-tea.blogspot.com END -->


    Nah pada kode yang berwarna merah Kita ganti dengan Script point No 2 dibawah.

  2. 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.

  3. 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

  4. 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="&amp;file=tvone&amp;type=video&amp;streamer=rtmp://202.129.216.34/live/&amp;stretching=exactfit&amp;logo= &amp;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="&amp;file=antv&amp;type=video&amp;streamer=rtmp://202.129.216.34/live/&amp;stretching=exactfit&amp;logo= &amp;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

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

9 comments

terima kasih mas, ilmunya sangat bermanfaat semoga amalnya diterima Tuhan YME.
boleh tukerin link ya mas ...

Balas

@abifadhilblog's Tuker LINK bole gan, cuman LINK yang Agan gak bisa di copy n di Blok, Kalau bisa pasang langsung aja di link banner otomatis saya OK.

Balas

mas yg sya koq gk muncul siaran tv ya..tpi udah berhasil ad d blog tv ea

Balas

@Dedi Mungkin lagi ada gangguan Gan coba aja cari Embed TV yang lain OK.

Balas

makasih tip nya gan, bisa dicoba nih,hehe,,,

Balas

kang fatur simkuring teu ngartos eta artikel Tv online,,tos di cobian teu janten wae,,janten layar na hejo wae kumaha??
nyungkeun bimbimnganna maklum newbie...

Balas

makasih ya, saya juga mau pasang kabel hdmi di blog saya :)

Balas