Tab View Menu Tanpa edit HTML diBlogspot

Setelah bereksperimen, akhirnya saya coba dengan meletakkan kode script-nya langsung di gadget, ternyata berhasil. Dengan menyatukan semua kode yang ada, pembuatan menu tab view tidak perlu lagi susah payah mengedit HTML template. Jika sobat sudah pernah membaca postingan saya yang dulu, sobat tinggal menyatukan semua kodenya dan letakkan di gadget, belum tau urutan kodenya?

Baiklah langsung saja, sekarang anda mesti login dulu ke blogger, kemudian pada Elemen Halaman klik Tambah Gadget, lalu pilih yang HTML/Javascript. Setelah itu tambahkan kode script menu tab view-nya seperti dibawah ini :

<style type="text/css"> div.TabView div.Tabs a { float: left; display: block; width: 80px; /* Lebar Kotak Tab */ height: 22px; /* Tinggi Menu Utama Atas */ text-align: center; /* Posisi Teks Menu Tab */ margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */ background-color: #000; /* Warna background Kotak Tab */ padding-top: 2px; /* Spasi Atas */ border: 1px solid #ffffff; /* Warna border kotak Tab */ border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */ font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */ font-weight: 900; /* Ketebalan Teks kotak tab */ } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #736F6E; /* Warna background utama kotak tab */ } div.TabView div.Pages { clear: both; border: 1px solid #cccccc; /* Warna border Kotak Konten */ overflow: hidden; background-color: #ffffff; /* Warna background Kotak konten */ } div.TabView div.Pages div.Page { height: 100%; padding: 5px; /* Jarak teks dalam kotak content */ overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; } </style> <form action="tabview.html" method="get"> <div id="TabView" class="TabView"> <div style="width: 300px;" class="Tabs"> <a><span style="color: #fff">Tab 1</span></a> <a><span style="color: #fff">Tab 2</span></a> <a><span style="color: #fff">Tab 3</span></a> </div> <div style="width: 300px; height: 200px;" class="Pages"> <div class="Page"> <div class="Pad"> konten 1 </div> </div> <div class="Page"> <div class="Pad"> konten 2 </div> </div> <div class="Page"> <div class="Pad"> konten 3 </div> </div> </div></div></form> <script src="http://my-project-mustainalibasya.googlecode.com/files/tabview.js"> </script> <script type="text/javascript"> tabview_initialize('TabView'); </script></div>

Keterangan:

• Tulisan berwarna kuning merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
• Tulisan berwarna orange merupakan warna judul Tab
• Tulisan berwarna hijau merupakan judul Tab
• Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
• Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berkedip dibawahnya. Demikian tadi tutorial membuat tab view widget tanpa eit HTML, contoh dari tab view ini bisa anda lihat di blog ini.

Membuat Daftar Isi pada Blogger

Cara membuat daftar isi blog kali ini berbeda dengan sebelumnya, baik tampilan maupun script yang akan digunakan, saya pribadi lebih suka dengan daftar ini (content) karena bisa menampilkan seluruh judul postingan dan dikelompokkan sesuai dengan label masing-masing judul. Jadi kalo postingan kita buat tanpa menggunakan label, besar kemungkinan judul postingan tidak akan muncul didalam daftar ini.

Daftar isi (content) ini saya bagi menjadi dua bagian, yaitu Daftar isi ditampilkan pada satu halaman penuh dan Daftar isi ditampilkan pada halaman depan blog..

Cara pertama adalah jika kita ingin menampilkan daftar isi ini dihalaman depan blog kita, agar setiap pengunjung dapat melihat daftar isi blog kita tiap kali mengunjungi blog kita...

Contohnya sebagai berikut :

Berikut ini langkah-langkahnya :
1. Masuk ke account blogger anda
2. Pilih tata letak/layout
3. Pilih tambah gadget
4. Pilih HTML/javascript.
5. Beri Judul Dafar isi atau judul sesuai dengan keinginan sobat
5. Kopas kode di bawah ini


<div style="border: 1px solid #eee; height: 120px; overflow: auto; padding: 10px; width: 430px;"> <script src="http://my-project-mustainalibasya.googlecode.com/files/daftarisi.js"></script><script src="http://namablog.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> </div>

namablog.blogspot.com : ganti dengan alamat blog sobat
width:430px : Ganti Lebar sesuai dengan yang sobat inginkan, sesuaikan dengan template
height:120px : Ganti tinggi nya sesuai dengan keinginan sobat

6. Kemudian save dan letakkan sesuai dengan keinginan sobat.

Kemudian cara kedua saya akan bahas Daftar isi yang akan ditampilkan pada satu halaman penuh

Berikut ini langkah-langkahnya :
1. Masuk ke account blogger anda
2. Pilih New post
3. Pilih Edit HTML pada kanan atas halaman tersebut
4. Beri Judul postingan tersebut dengan Daftar Isi, atau judul apapun sesuai keinginan sobat.
5. Copy paste script berikut ini :

<script src="http://my-project-mustainalibasya.googlecode.com/files/daftarisi.js"></script><script src="http://alamatblog.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

http://alamatblog.blogspot.com : Ganti dengan alamat blog sobat

6. Klik Publish Post

Jadi deh...

Cara Pasang Iklan Adsense di Tengah dan Bawah Posting Blogger

Tutorial ini khusus untuk teman-teman yang ingin memasang iklan google adsense di bawah posting artikel blogger. Dalam tutorial ini saya menggunakan template blogger standard yaitu Template Awesome, desain template blogger merupakan salah satu fitur teranyar dari blogger.

Cara ini juga bisa Anda pergunakan untuk menambahkan kode iklan PPC lainnya seperti adsensecamp.com, kliksaya.com, kumpulblogger dan lain-lain.

Okey, lanjut aja lihat cara menambahkan kode adsense ketengah posting blogger berikut:

1. Login ke akun blogger

2. Dari Dashboard, pilih Design pada blog yang ingin Anda tambahkan kode adsensenya, jika hanya punya satu blog bisa langsung klik Design.

3. Setelah menu Design muncul, klik Edit HTML, jangan lupa centang/klik Expand Widget Templates.
4. Sebelum melanjutkan, siapkan dulu kode google adsense atau script iklan ppc lainnya.

5. Lalu cari (tekan CTRL+F) kode berikut: <p><data:post.body/></p>, biasanya Anda akan menemukan 2 tag <p><data:post.body/></p> ini, fokuslah pada tag yang kedua.

6. Sebelum mem-paste-kan kode adsense ke script blogger Anda harus mengubah sedikit script adsense tersebut, tujuannya agar kode adsense tidak dianggap salah/error oleh blogger, misalnya: parse error atau iklan adsense tidak tampil secara optimal. Sebagai contoh, kode adsense akan terlihat seperti ini:

<p><script type="text/javascript"><!--
google_ad_client = "pub-030814490767xxxx";
google_ad_host = "pub-1556223355139109";
/* 336x280, dibuat 10/05/30 */
google_ad_slot = "1117347509";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><p>

Jika kode tersebut langsung di copy/paste kedalam script blogger maka akan muncul pesan error dari blogger atau iklan adsense tersebut tidak akan ditampilkan. Untuk mengantisipasi hal tersebut Anda harus mengganti setiap tanda atau di encode/decode lewat web Klik disini.

Setelah kode adsense diatas diganti atau di encode/decode, maka akan terlihat seperti dibawah ini:

& lt;p& gt;& lt;script type=& quot;text/javascript& quot;& gt;& lt;!--
google_ad_client = & quot;pub-0308144907671494& quot;;
google_ad_host = & quot;pub-1556223355139109& quot;;
/* 336x280, dibuat 10/05/30 */
google_ad_slot = & quot;1117347509& quot;;
google_ad_width = 336;
google_ad_height = 280;
//--& gt;
& lt;/script& gt;
& lt;script type="text/javascript& quot;
src="http://pagead2.googlesyndication.com/pagead/show_ads.js& quot;& gt;
& lt;/script& gt;& lt;p& gt;

Jadi, susunannya pada script blogger akan terlihat seperti berikut:
<div class='cover'>
<div class='cahayaentry'>

<!-- Kode Adsense Anda Disini -->

<p><data:post.body/></p>

<!-- Kode Adsense Anda Disini -->

<div style='clear:both;'/>
</div>

7. Setelah itu copy kode adsense yang sudah dimodifikasi ke script blogger Anda.

8. Hasilnya iklan adsense akan ditampilkan dibawah judul posting blogger dan diakhir artikel Anda.

Okey, semoga tutorial memasang iklan google adsense dibawah dan diakhir posting blogger ini bisa bermanfaat kepada teman-teman blogger.

Selamat mencoba....

Cara Bikin Text Area pada Blogspot

Untuk membuat text area, silahkan anda Copy kode di bawah ini :



<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>



Sebagai contoh :

<a href="http://kolom-tutorial.blogspot.com" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/animasichicklet.gif" border="0" alt="Blog Tutorial" /></a>

Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.



Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.



Text Area dengan memakai HighLight



Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :





<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();"
type="button" value="Highlight All"> </div><div align="center"></div><p
align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt"
rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form>






Sebagai contoh :

<script language="JavaScript"> function clickIE() { if (document.all) { return false; } } function clickNS(e) { if (document.layers(document.getElementById&&!document.all)) { if (e.which==2e.which==3) { return false; } } } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS; } else{ document.onmouseup=clickNS; document.oncontextmenu=clickIE; } document.oncontextmenu=new Function("return false") </script>

Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area.




Elemen tombol highlight All :

1. <div align="center"> --> kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.
2. <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.
3. Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

Element text area :

1. <p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
   
   
2. <text style="WIDTH: 300px">-->kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"
3. HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.

Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari right click para pengunjung. skript ini di pakai apabila anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode <HEAD> dan </HEAD> selamat mencoba.




Sumber : http://kolom-tutorial.blogspot.com/

Cara Bikin Teks Berjalan (marquee) pada Blog

Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog.

Marquee ini bisa di buat dengan menggunakan tag ....

Atribut yang sering di gunakan adalah :

BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks

DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks

BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan

Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks

SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.

SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik

LOOP="angka|-1|infinite" --> Mengatur jumlah loop

WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen

Agar lebih jelas akan saya sertakan contohnya :

<marquee align="center" direction="right" height="200" scrollamount="2" width="30%">marquee dari kanan ke kiri</marquee>

Ganti (Tulisan marquee dari kanan ke kiri) Terserah anda.

Contoh marquee dari perilaku gerakan :

<marquee align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate"><br /> <br /> marquee menurut perilaku</marquee>

Ganti (Tulisan marquee menurut perilaku) Terserah anda.


Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left">&ltFONT ><b><marquee bgcolor="RED" width="70%" scrollamount="3" behavior="alternate"><br /> marquee dengan variasi hurup dan warna latar</marquee></b></span></div>

Ganti (Tulisan marquee dengan variasi hurup dan warna latar) Terserah anda.

Contoh marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center"><br /> <br /> <a href="http://rubrik-elektronik.blogspot.com" target="new">Rubrik Elektronik</a><br /> <br /> <br /> <a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br /> <br /> <br /> <a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br /> <br /> <br /> </marquee>

Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.

Selamat ber eksperimen