Cara membuat tag cloud animasi berputar

postingan saya kali ini akan mencoba membahas cara membuat tag cloud animasi berputar di blog.....

oke tanpa banyak cuap-cuap Langsung aja.......

Langkah-langkah pemasangan~nya :
1. Masuk Ke Dasbor Blogger
2. Rancangan
3. Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Copy Code berikut :

<b:widget id='Label50' locked='false' title='tag' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/jetzblogs/tag-cloud/jetztagcloud.js' type='text/javascript'/>
<div id='flashcontent'/>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;185&quot;, &quot;185&quot;, &quot;7&quot;, &quot;#000000&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x80ff00&quot;);
so.addVariable(&quot;hicolor&quot;, &quot;0xFFFFFF&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;125&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
<script type='text/javascript'>
</script>
</div>
</b:includable>
</b:widget>

4. Paste-kan kode tadi dibawah kode :

<b:section class='sidebar' id='sidebar' preferred='yes'> 
                                       atau

<b:section class='sidebar' id='sisiatas' preferred='yes'>

5. Save templat anda, dan lihat hasilnya.........


Keterangan HTML :
185          = Lebar Widget dalam px
185          = Tinggi Widget dalam px
#000000   = Warna Background (Hitam)
0x80ff00  = Warna Huruf
12            = Ukuran Font
0xFFFFFF  = Warna Link

========Selamat Mencoba======== 

Read more »

Posted in: Internet,tutorial blog

Cara membuat iklan melayang dengan tombol close

Objek melayang atau sering juga di sebut dengan Float Top Bar, sebuah jendela kecil yang muncul dari atas halaman setiap kali kita mengunjungi Website atau Blog. Float Top Bar ini biasanya berisi Content Iklan ataupun sebuah Form SubScribe sehingga pasti terlihat oleh pengunjung Website atau Blog kita. Untuk membuat Iklan melayang seperti ini sangatlah mudah, hanya dengan beberapa langkah, maka Iklan Melayang tersebut sudah bisa terpasang pada Website atau Blog Anda . . . . ..

           
                berikut ini adalah langkah-langkah pembuatannya :

• Login Ke blogger.com dengan Akun anda masing-masing Pastinya
• Masuk ke Tab Tata Letak
• Pilih Elemen Halaman
• Tambah Gadget Pilih HTML / JAVASCRIPT
• copy kode di bawah ini dan paste

<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:right; border:2px solid #A5BD51; background:#ffffff; 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.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()"> .:[Close][Klik 2x]:. </a> </div> <center> Masukan Kode iklan atau Gambar yang anda inginkan di sini </center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></center></div></div>

• simpan

Untuk tulisan yang berwarna merah, bisa teman-teman ganti dengan kode iklan, gambar ataupun tulisan yang diinginkan, selamat mencoba.

Read more »

Posted in: Internet,tutorial blog

Membuat read more

Bagi para sobat yang menggunakan template baru tentu saja akan mengalami kebingungan ketika membaca tutorial terdahulu yang membahas tentang membuat menu Read more.. atau menu Baca selengkapnya.., karena tutorial tersebut memang di peruntukan bagi para sobat yang menggunakan template klasik. Nah bagi sobat yang menggunakan template baru dan ingin menggunakan menu Read more.. juga silahkan ikuti langkah-langkah berikut :

• Sign in seperti biasa di blogger dengan id milik sobat
• Klik Setting
• Klik Formatting
• Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi tesxt area kosong tersebut dengan kode di bawah ini :
<div class="fullpost"> </div>
• Klik tombol yang bertuliskan Save Settings
Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu mengingat kode tersebut.

Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :

• Klik menu Dasboard
• Klik menu Layout
• Klik menu Edit HTML
• Klik tulisan Download Full Template
• Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
• Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah, sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya
• Tunggu beberapa saat ketika proses sedang berlangsung
• Silahkan Sobat cari kode berikut pada kode template milik sobat :
<div class='post-body'>
• Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style>
• Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :
<p><data:post.body/></p>
• Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
<a expr:href='data:post.url'>Read More......</a> </b:if>
• klik tombol bertuliskan Save Template
  
  
• Selesai.

Cara Posting Artikel

• Klik menu Posting
• Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :
<div class="fullpost"> </div>
• Tulisankan artikel yang ingin tampak pada blog sebelum kode :
<div class="fullpost">
• Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :
</div>
• Klik tombol bertuliskan PUBLISH POST
• Klik tulisan Open New Window untuk melihat hasil dari postingan kita, kemudian lihat apakah hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan. Coba lihat kembali langkah diatas
• Selamat mencoba !

Read more »

Posted in: Internet,tutorial blog

Membuat teks area

Apa itu text area?. Untuk memudahkan anda memahami apa itu text area, silahkan alihkan perhatian anda ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

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>


contohnya :

<a href='http://kajetz.blogspot.com'><img src='http://i1237.photobucket.com/albums/ff478/kajetz/jetz.gif'/></a> <br />

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>


 
contohnya :

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

Read more »

Posted in: Internet,tutorial blog

Cara memasang plugin comment facebook di blog

1. Buka Link ini http://developers.facebook.com/docs/reference/plugins/comments/

2. Akan terlihat seperti gambar dibawah, isi kolom sesuai dengan yg diinginkan.
-URL, isi dengan alamat blog anda.
-Number of Post , isi dengan jumlah koment yg ajan tampil.
-Width, isi dengan ukuran lebar kotak komentar fb (pixel).
-Color Scheme, pilih warna, terang/gelap.

4. Kode yang anda dapat akan persis seperti ini:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="cekau.com" num_posts="30" width="480"></fb:comments>

5. Kode yg bewarna merah ganti dengan kode ini :

expr:href='data:post.url'

6. Kodenya akan jadi seperti ini:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments expr:href='data:post.url' num_posts="30" width="480"></fb:comments>

7. Lalu tambahkan kode untuk membuat fb comment ini hanya tampil di halaman posting.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments expr:href='data:post.url' num_posts="30" width="480"></fb:comments>

</b:if >

8. Setelah kode seperti yang terlihat pada point 7, saatnya kita menempatkan kode tersebut pada template blogspot anda.

a. buka perancangan edit html.
b. ceklis expand template widget.
c. cari kode ini:

<div class="post-footer-line post-footer-line-3">

d. paste kode fb comment tepat dibawah kode diatas. hasilnya akan seperti ini:

<div class='post-footer-line post-footer-line-3'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments expr:href='data:post.url' num_posts="30" width="480"></fb:comments>

</b:if >

</div>a

9. Setelah dipastikan semua kode ditutup dengan benar, Save template lihat blog anda.


semoga bermanfaat. . . . .

Read more »

Posted in: Internet,tutorial blog

Cara membuat screen saver di blog

Screen Saver adalah halaman yang ditampilkan apabila tidak ada respon / aktifitas di blog kita. Jadi, ketika kita membuka blog, dan tidak kita respon, secara tiba-tiba akan muncul sebuah halaman baru. Tapi jika kita menggerakan kursor kita pada halaman tersebut, maka halaman blognya akan kembali lagi. Gimana? Bagus kan........?!
Ok Langsung aja ke TKP

1. Login ke blogger

2. Masuk ke tata letak
3. Dan pilih Edit HTML
4. Jangan lupa centang kotak kecil (Expand Template Widget)
5. Cari Kode <head>
6. Letakan kode di bawah ini, diatas kode <head>

<script src='http://sites.google.com/site/jetzblogs/screensaver/ScreenSaver.js'>
</script>

7.simpan
8.taraaa.....Liat hasilnya

semoga bermanfaat..........

Read more »

Posted in: Internet,tutorial blog

Tes kecepatan internet

ingin tes kecepatan internet anda?
wokeh langsung aja.......

(c) Speed test

Semoga bermanfaat.........

Read more »

Posted in: Internet,tutorial blog

Cara membuat widget sms gratis di blog

sobat blogger kali ini saya akan membagikan cara pasang sms gratis untuk blog...
oke tanpa panjang Lebar Langsung aja k TKP....

•    copy kode di bawah ini :

<iframe frameborder="0" height="264" name="I2" scrolling="no" src="http://sms-online.web.id/widget" style="border: 1px solid rgb(255, 255, 255);" width="84%">&amp;lt;p&amp;gt;not support&amp;lt;/p&amp;gt;</iframe><br /> <small></small><br /> <center><small><a href="http://kajetz.blogspot.com/2011/06/cara-membuat-widget-sms-gratis-di-blog.html" rel="nofollow">Make Widget</a></small></center></div>

• login ke blogger
• pilih tata letak
• tambah widget baru
• kemudian pilih
• Edit HTML/Javascript
• kemudian pastekan kode yang tadi sudah di copy dan simpan 

=sekian dulu postingan saya kali ini, semoga bermanfaat =

Read more »

Posted in: Internet,tutorial blog