Streaming TV Online

Cara Membuat 2,3 atau 4 Kolom di bawah Postingan blog

Hai sobat Dunia IT...!!
Kali ini saya akan posting bagaimana Cara Membuat Footer 2,3 atau 4 di bawah Postingan Blog..
Gausah Bingung2 ane sudah siapkan script nya :D

Tidak panjang lebar karena bakalan panjang nanti berat lagi loadingnya - langsung saja yah ke pembahasan :

1. Login ke Blogger..
2. Masuk ke template >> Edit HTML 
3. Jangan lupa centang expland template widget 
    Nb: untuk jaga-jaga backup dulu template sobat .
4. Kalau udah, cari kode ]]></b:skin> Dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

#footer-column-divide clear:both; } .footer-column { padding: 10px; }

5. Berikutnya, cari kode yang mirip seperti kode dibawah ini:

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

ATAU 

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

Note :

Biasanya, setiap template memiliki kode yang berbeda-beda.Dalam hal ini, jika Anda tidak dapat menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

6. Yang perlu sobat lakukan adalah copy kode dibawah ini tepat dibawah salah satu kode 

<div id='footer'> atau   <div id='footer-wrapper'>

7. Untuk membuat Footer 2 kolom dibawah postingan:

<div id='footer-column-divide'> <div id='footer1' style='width: 50%; float:left; margin:0; text-align:left;'> <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/> </div> <div id='footer2' style='width: 50%; float: left; margin:0; text-align: left;'> <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/> </div> <div style='clear:both;'/> </div> </div>

8. Untuk Membuat Footer 3 Kolom dibawah postingan:

<div id='footer-column-divide'> <div id='footer1' style='width: 33%; float:left; margin:0; text-align:left;'> <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/> </div> <div id='footer2' style='width: 33%; float: left; margin:0; text-align: left;'> <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/> </div> <div id='footer3' style='width: 33%; float: right; margin:0; text-align: left;'> <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/> </div> </div>

9. Untuk Membuat Footer 3 Kolom dibawah Postingan:

<div id='footer-column-divide'> <div id='footer1' style='width: 25%; float:left; margin:0; text-align:left;'> <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/> </div> <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'> <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/> </div> <div id='footer3' style='width: 25%; float: right; margin:0; text-align: left;'> <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/> </div> <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'> <b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/> </div> </div>

10. Lalu simpan template sobat dan lihat hasilnya

--SEMOGA BERHASIL--   Kalau ada masalah silahkan komentarnya, apalagi kalau berhasil hehe.

Cara Membuat Text Area Script dengan Copy All pada postingan blog

Kali ini saya akan kasitahu Cara Membuat Text Area Script dengan Copy All

Pasti sobat Dunia IT tidak sabar lagi kan :D hahaha . yaudah Langsung saja ke TeKaPee :)

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus (); this.form.txt.select ();" type="button" value="Copy All" </div><div align="center"></div><p align="center"><textarea style="widht: 150px; height: 50px" name="txt" rows="35" wrap="virtual" cols="25"> silahkan anda sobat menuliskan scrip sesuka anda sobat </textarea></p></div></form>

Setelah mengcopynya pada artikel yang di inginkan akan nampak hasil seperti contoh di bawah ini

Masukkan script widget yang sobat inginkan 

Sobatuntuk lebih jelas dan bagaimana cara tinggi dan lebar serta lebih memahami scrip yang sobat copy akan sedikit jelaskan fungsi scrip yang ada
Scrip untuk membuat Tombol Copy All

• Scrip <form name="copy"> secara umum, form berfungsi untuk menampung elemen-elemen yang nantinya akan di masukan ke dalam sebuah objek. Elemen itu di beri nama fungsi copy.
• <div align="center"> merupakan sebuah elemen yang digunakan untuk mengatur posisi, layout web/blog yang sobat buat, dan pada fungsi tag div disini mengatur posisi buton Copy All berada di tengah "center" untuk posisi yang lain kiri "left" dan kanan "right"
• <input onclick="javascript:this.form.txt.focus (); this.form.txt.select (); maksudnya adalah ketika tombol Copy all di klik maka seluruh isi pada Box Text Area akan diblok dan terselesi semuanya, ini merupakan printah utama dari Java Scrip Buton Copy All, diharapkan untuk tidak di hapus oleh sobat.
• value="Copy All" merupakan tulisan yang terdapat di tengah tengah buton/tombol Copy All, Tulisan ini bisa sobat ganti dengan tulisan yang sobat inginkan.  

Scrip untuk membuat Box Text Area untuk scrip

• <textarea style="widht: 150px; height: 50px" name="txt" rows="35" wrap="virtual" cols="25"> silahkan anda sobat menuliskan scrip sesuka anda sobat </textarea> Ini scrip yang di gunakan untuk membuat Box Text Area Scrip dengan Copy All.
• style="widht: 150px; ini untuk ukuran lebar, ukuran ini bisa sobat sesuaikan misalnya 500px atau yang lainnya di sesuaikan dengan kebutuhan sobat. Begitu juga untuk tinggi height: 50px" bisa di sesuaikan.

Mungkin sedikit yang bisa saya bagikan, karena saya juga masih tahap belajar dalam dunia Blogger, 

Cara Membuat Widget model scroll

Cara Memodifikasi Blockquote Dengan Berbagai Style sebelum saya beritahu caranya bisa lihat contoh-nya di bawah ini, saya beri contoh dengan gambar ini

Langsung saja ke TeKaPee :)..

<div style="border: 1px solid#000000; height: 1750px; overflow: auto; width: 310px;"> <ul> <span style="color: blue;">Masukkan script widget yang anda inginkan </ul> </div>

Lalu simpan dan lihat hasilnya

--SEMOGA BERHASIL-- 

--Jangan Lupa Tinggalkan komentarnya ya gan--

Cara Membuat Widget Live Update via twitter

 

Menampilkan widget twitter live updates di blog ini saya bagikan untuk sobat yang gemar menggunakantwitter sebagai sarana sosial media. Widget ini salah satu yang menjadi favorit saya, karena tampak atraktifdan animatif sehingga dapat menjadi tambahan dalam hal desain blog.

Widget ini banyak ditemui di banyak blog terkenal seperti blog terkenal terselubung. Sebagian menggunakan JavaScript yang rumit sehingga memakan waktu loading yang cukup lama dan berat. Sehingga bagi blog yang menggunakan JavaScript, widget ini dapat menambah beban blog dan membuang waktu load lebih panjang. Untuk versi widget twitter live updates ini, saya sudah memodifikasi kode JavaScript-nya menggunakan Minify JavaScript dan hasilnya widget ini menjadi lebih ringan.

Cara memasang twitter widget live updates di blogger

1. Masuk ke Dashboard >> Tata Letak >> Add Gadget/Tambah Gadget
2. Pilih HTML/JavaScript
3. Masukkan kode JavaScript berikut ini di kolom yang tersedia.

<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW29F8H6pRijeRjFTskJRCsapZ6mbw1FQhcWv9N06xHu5lyTETwn6KcgOYfkx31KHiAWJUhjtBY8M3ZTOCEDAJV4vgNYuFyq4jtK6D5eU3eVVX3m0M2p_pDkubMb1Sa_SIBoGP-jYDmgc/s1600/bg_twitter.gif) no-repeat;padding-top:40px;padding-left:5px">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
(new TWTR.Widget({version:2,type:"profile",rpp:10,interval:3e3,width:285,height:118,theme:{shell:{background:"transparent",color:"#000000"},tweets:{background:"transparent",color:"#000000",links:"#B45F04"}},features:{scrollbar:true,loop:true,live:true,hashtags:true,timestamp:true,avatars:false,behavior:"default"}})).render().setUser("USERNAME").start()
</script>
</div>

Keterangan :

Ganti USERNAME dengan username twitter yang ingin ditampilkan pada widget.

4. Jangan lupa untuk klik Save dan lihat hasilnya.

Cara membuat Visitors di blog

\ Bagaimana cara membuat VISITORS yang menggunakan gambar BENDERA negara 

Sama - sama belajar nge-blog ... Bagaimana cara membuat VISITORS yang menggunakan gambar BENDERA negara seperti tampilan pada blog saya ini. VISITORS adalah sebuah situs yang menyediakan tentang data statistik pengunjung yang masuk pada blog anda, jika kalian memasang VISITORS ini maka kalian akan mengetahui siapa saja dan dari negara manakah yang masuk berkunjung mampir ke blog anda WOW keren seolah-olah negara luar yang berkunjung hemmmmm jadi bangga ...

1. Klik langsung http://flagcounter.com

2. Berhasil masuk ke http://flagcounter.com maka anda akan menemukan seperti dibawah ini :

    - Show on your site ( pilih saja TOP COUNTRIES )

    - Columns Of Flags ( maksudya jumlah bendera negara yang akan ditampilkan di blog anda)

    - Label on Top of counter (nama judul flag counter)

    - Background Color (warna background atau halaman flag counter)

    - Text color (warna tex)

    - Border color (warna pinggir kotak flag counter)

    - Show country codes (kode negara dan anda juga bisa ceklis pada kotak kecil yang sudah tersedia)

    - Show Pageview count 

       (anda bisa ceklis lagi untuk mengetahui jumlah halaman blog anda yang dibuka oleh pengunjung)

3. Sekarang anda klik saja langsung Get Your Flag Counter 

4. Kemudian masukan Email anda Lalu klik Continue 

5. Kemudian anda akan melihat kolom yang bertuliskan Code For Websites 

6. Copykan Code For Websites 

    - Sampai disini Anda kembali ke Blog Anda 

7. kembali ke Tata Letak >>> klik tambah Gedget  >>> pilih   HTML Javascript

8. Paste atau salin kode Code For Websites tadi kedalam content HTML tersebut

9. Selesai THE END langkah terkahir save dan coba lihat hasilnya hehehehehehehehehe follow blog saya

Cara Membuat Facebook Like Box Melayang di samping blog

Hai sobat semua....




Kali ini saya akan meng-share cara membuat Facebook Like Box melayang di samping blog...
seperti punya saya itu......

Nah nih sangat efisien sekali
agar para pengunjung dapat dengan mudah menyukai blog kita....
Ok... tak kasih cara yang mudah neh...


Nih caranya

1. Buka Dashboard
2. Pilih Template
3. Edit HTML
4. Terus cari kode ]]></b:skin>
5. Masukkan kode berikut diatas kode ]]></b:skin>
   
   
   #melayang { position:fixed;_position:relative;top:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
6. Lalu cari kode </body>
7. Masukkan kode berikut diatas kode </body>
   
   
   <div id='melayang'> KODE FACEBOOK LIKE BOX KAMU </div>
8. Lalu simpan..... selesai deh

Tulisan BIRU dapat diganti dengan BOTTOM (posisi dibawah) atau TOP (posisi diatas)
Tulisan HIJAU dapat deganti dengan RIGHT (posisi dikanan) atau LEFT (posisi dikiri)
Tulisan MERAH diganti dengan kode facebook like box kamu.....