Floating Share Button

Assalamualaikum...
Masih merasa risih mengenai share widget? Bagaimana kalau kita tambahkan Floating Share Button? Wuih, keren tuh Sobat! Oiya, kode yang dipakai adalah HTML/Javascript yang mungkin berpengaruh pada loading page Blog Anda. Yo wes cekidot ke tutornya! ^_^

Step 1

Login seperti biasa dan langsung terbang ke menu Tata Letak.

Step 2

Berikut ini ada dua pilihan kode script untuk Light Template dan Dark Template :

Light Template

<!--SideBar Floating Share Buttons Code Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://mziqbal.blogspot.com/2012/04/floating-share-button.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

<!--SideBar Floating Share Buttons Code End-->

 Dark Template

<!--SideBar Floating Share Buttons Code Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://mziqbal.blogspot.com/2012/04/floating-share-button.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

<!--SideBar Floating Share Buttons Code End-->

Ket : Kode yang di beri warna merah adalah kode letak share button

right : di sebelah kanan

left : di sebelah kiri

Jika sudah selesai, jangan lupa di save ya!
Selamat Mencoba!!!

Widget Popular Post - Grid Layout

Assalamualaikum...
Sudah lama Saya tak berjumpa dengan Sobat Blogger semua. Maaf ya, Saya sedikit sibuk dengan hubungan Saya (cuiit,cuiitt!!). hehehehe.... okelah kalau begitu yukk kita lihat bagaimana cara membuat Widget Popular Post dengan Grid Layout.
Coba lihat di atas (widget popular post), tersedia thumbnail gambar dari beberapa post yang paling sering dikunjungi. Pada saat mouse Anda berada di atas gambar tersebut, maka akan menampilkan efek "muter-muter". Bagaimana caranya? Ini dia Tutorialnya! CeQidoutt! ^_^

Step 1

Login ke akun blogger Anda dan langsung buka Edit HTML. Namun, sebelumnya Anda harus menambahkan widget popular posts terlebih dahulu lewat menu tata letak.

Step 2

Jikalau sudah menambahkan widget Popular Posts, buka Edit HTML dan centang "Expand Template Widget". Kemudian, CoPas kode ini :

.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);} 

dan taruh di atas kode ]]></b:skin> 

Step 3

Cari teks PopularPosts1 dan ganti kode scriptnya :

<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

dengan kode ini :

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png' expr:width='data:thumbnailSize'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Step 4

Simpan dan lihat hasilnya.

NB : Disarankan agar mem-backup template Anda terlebih dahulu untuk menghindari kesalahan.

Source : http://kode-blogger.blogspot.com/2012/04/modifikasi-widget-popular-post-with.html

Cara Membuat Tampilan Maintenance pada Blog

Assalamualaikum...
Pernahkah Anda melihat tampilan Maintenance? (Moga aja pernah he...he...he...) Biasanya tampilan Maintenance digunakan pada saat suatu site/blog masih membetulkan templatenya, sehingga tidak mengganggu para pengunjungnya. Kalau di site udah biasanya, nah kalau di blog, gimana? Gampang dah caranya! Ikuti saja tutorial di bawah ini!

Tutorial > Maintenance Screen
1. Login ke Akun Blogger Anda
2. Langsung terbang ke Edit HTML. (untuk interface blogger yang baru, Edit HTML terletak di template)
3. Cari kode ]]></b:skin>
4. Copas kode di bawah ini :

html { height: 100%; background: url(http://i865.photobucket.com/albums/ab218/1rd3/site-under-maintenance-kodeblogger.png) no-repeat center 50%; margin: 0; } body { display: none; }

Taruh kode tersebut tepat DIATAS kode ]]></b:skin>
NB : code yang berwarna merah bisa diganti dengan URL gambar Anda sendiri.
5. Simpan

Catatan : Sekedar info saja, Blog dari Wordpress juga dapat menampilkan Tampilan Maintenance seperti itu.
Sumber : kode-blogger.blogspot.com

Notice - Template Results

Assalamualaikum...
Wah, habis utek-utek Template nih! Oya, menurut Anda template Muhamad Iqbal Inc. yang saat ini digunakan apakah bagus,menarik, atau lebih buruk dari template-template Saya sebelumnya? Untuk itu, silahkan berkomentar pada post ini. Karena komentar Anda akan membantu sekali dalam pengembangan Muhamad Iqbal Inc. So, langsung comment di form yang terletak di bawah post. Terima Kasih!

Ganti Cursor Blog

Assalamualaikum...
Rasanya lama banggeeettt!!! nggak nge-blog. Rindu sama Sobat Blogger semua, nih! Dan Alhamdulillah Saya habis otak atik script di HTML blog ini. Oya, apakah cursor Muhamad Iqbal Inc. telah berubah dari cursor sebelumnya? Yupz! itu semua ada caranya. Ikuti Tutorial berikut ini :

·Tutorial·

1. Login ke Account Anda

2. Pilih Edit HTML

3. masukkan code

<style type='text/css'>body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-4/cur394.cur), progress;}</style>

4. Taruh di bawah code </body>

5. code http://cur.cursors-4u.net/cursors/cur-4/cur394.cur dapat diganti dengan URL cursor lainnya.

Selamat Mencoba!

Membuat Link Terbuka pada Jendela Baru/Tab Baru

Assalamualaikum...
Pengen mindahin link ke tab/window baru hanya satu Script? Yups! Kalo ya, coba utek-utek script pada Edit HTML di Blogger. Oya, effectnya semua Link ke buka di tab baru, namun untuk link seperti javascript:... Akan terjadi sedikit error. Saya tidak merekomendasikan untuk memakai script ini. ↓

<base target='_blank'/>

Caranya gimana?
1. CoPas kode di atas.
2. Taruh di bawah tag <head>
3. Simpan.

Hasilnya bisa dilihat sendiri!
Selamat Mencoba!

Cara Menyembunyikan Chat Box (ShoutMix) Pada Blogger (versi3)

Assalamualaikum...
Chat Box pada saat ini telah banyak di-"Kembang biakkan" pada Blog-Blog Sobat Blogger. Tapi, pingin gak bikin tempat widget penuh? Jawabannya "Sembunyikan"! Yap, pada tutorial sebelumnya, yaitu TutorCB1 dan TutorCB2 dijelaskan bagaimana cara menyembunyikannya. Nah, Saya menemukan kode baru. Tapi, instalasinya sedikit utak atik Template. But, no problem! Hasilnya memuaskan! Berikut ini tutorialnya dari Tutorial Blogging.

~^tUtOr!aL^~

1. Masuk ke blogger.
2. Pilih Layout (Tata Letak) » Page Elements (Elemen Laman).
3. Klik tulisan Add a Gadget (Tambah Gadget).
4. Pilih gadget HTML/JavaScript.
5. Copy-paste kode berikut di bagian konten.
   
   
   <script type="text/javascript">
   function showHidechat(){
   var chat = document.getElementById("chat");
   var w = chat.offsetWidth;
   chat.opened ? movechat(0, 30-w) : movechat(20-w, 0);
   chat.opened = !chat.opened;
   }
   function movechat(x0, xf){
   var chat = document.getElementById("chat");
   var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
   var dir = xf>x0 ? 1 : -1;
   var x = x0 + dx * dir;
   chat.style.right = x.toString() + "px";
   if(x0!=xf){setTimeout("movechat("+x+", "+xf+")", 10);}
   }
   </script>
   <div id="chat">
   <div class="chat-click" onclick="showHidechat()"> </div>
   <div class="chatbox">
   <center>
   
   
   SCRIPT CHATTING DI SINI
   
   
   </iframe></center>
   <a href="http://www.tutorialblogging.co.cc/2010/04/membuat-kotak-chatting-tersembunyi.html" title="Pasang widget chatting seperti ini di blog anda" target="_blank">[+]</a>
   <span style="float:right">
   <a href="javascript:showHidechat()">
   [x]
   </a></span>
   </div></div>
   
   <script>
   var chat = document.getElementById("chat");
   chat.style.right = (30-chat.offsetWidth).toString() + "px";
   </script>
   
   
6. Simpan gadget.

CSS
Sekarang pada bagian css, ikuti langkah-langkah berikut.

1. Pilih menu Layout (Tata Letak) » Edit HTML.
2. Cari kode ]]></b:skin>, kemudian copy-paste kode css berikut di atasnya.
   
   
   #chat{position:fixed; top:25px; z-index:+1000}
   * html #chat{position:relative}
   .chat-click{height:100px; width:30px; float:left; cursor:pointer; background:url(http://i42.tinypic.com/vhb3vc.jpg) no-repeat;}
   .chatbox{float:left; border:2px solid #1f54bc; background:#f0f8ff; padding:10px}
   .chatbox a {text-decoration: none;}
   
   
3. Simpan template.

Macam-Macam Style/Jenis Border dengan Cara Membuatnya

Assalamualaikum agan-agan sekalian. Kali ini mari kita bahas tentang border. Mungkin, border sudah tidak asing lagi bagi para Sobat Blogger. Berikut ini penjelasan tentang border.



Border adalah garis tepi darisuatu objek. Berikut ini contoh-contoh style border yang didalamnya berupa "Code"nya. Berikut ini contohnya :



1. Solid

<div style="background:#F2F2F2;border:3px solid #000000; padding:5px;">
Tulisan Anda
</div>

2. Dashed

<div style="background:#F2F2F2;border:3px dashed #000000; padding:5px;">
Tulisan Anda
</div>

3. Dotted

<div style="background:#F2F2F2;border:3px dotted #000000; padding:5px;">
Tulisan Anda
</div>

4. Double

<div style="background:#F2F2F2;border:3px double #000000; padding:5px;">
Tulisan Anda
</div>

5. Groove

<div style="background:#F2F2F2;border:3px groove #000000; padding:5px;">
Tulisan Anda
</div>

6. Ridge

<div style="background:#F2F2F2;border:3px ridge #000000; padding:5px;">
Tulisan Anda
</div>

7. Inset

<div style="background:#F2F2F2;border:3px inset #000000; padding:5px;">
Tulisan Anda
</div>

8. Outset

<div style="background:#F2F2F2;border:3px outset #000000; padding:5px;">
Tulisan Anda
</div>

9. Rectangle

<div style="background:#F2F2F2;border:3px solid #000000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
-ie-border-radius-bottomright: 5px;
-ie-border-radius-topleft: 5px;
-ie-border-radius-topright: 5px;
-ie-border-radius-bottomleft: 5px;
-ie-border-radius-bottomright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
padding:5px;">
Tulisan Anda
</div>

Ket :
Border Rectangle tidak bisa bekerja pada IE (Internet Explorer)
Selamat Mencoba!!!

Cara Membuat Marquee

Assalamualaikum...
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 <marquee>...</marquee>.

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 :

Contoh marquee dari gerakan :

<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="30%">

marquee dari kanan ke kiri

</MARQUEE>

hasilnya :



marquee dari kanan ke kiri



Contoh marquee dari perilaku gerakan :

<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate">

marquee menurut perilaku

</MARQUEE>

Contoh :



marquee menurut perilaku


Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left"><FONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">
Example Text
</MARQUEE></b></FONT></div>

hasilnya :

Example Text

Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.

Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">

silahkan tunjuk ke sini

</marquee>

hasilnya :



silahkan tunjuk ke sini



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

<a href="http://rubrik-elektronik.blogspot.com" target="new">Rubrik Elektronik</a><br/>

<a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br/>

<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br/>

</marquee>

hasilnya :

Rubrik Elektronik


Electronic Rubric


Kolom iklan






Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.
Selamat Mencoba!!!
Source : kolom-tutorial.blogspot.com

Cara Membuat Color Picker - Box Kode Warna Modern

Coba Sobat Blogger lihat ke sidebar bawah. ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
Kan ada kotak tuh. Kalau Anda punya PS (Photoshop) mungkin sudah tahu apa itu. Yap, itu namanya Color Picker. Color Picker merupakan nama lain dari Kode Warna. Mengapa berbeda dari Kode Warna seperti biasanya? Mungkin, Anda semua tahu kelebihannya, yaitu :

• Kode yang digunakan lebih sedikit dan tidak mengganggu Template Blog
• Adanya RGB counter. (red,green,blue)
• Adanya Hex Color. (Code warna ex: #ff00ff)
• Adanya HSV counter seperti di Photoshop.

Okelah kalau begitu, ini Saya kasih Kode  Javascript-nya!





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Iqbal" />


    <title>Kode Warna</title>
</head>


<body>


<script type="text/javascript" src="http://www.switchonthecode.com/sites/default/files/64/source/javascript.js"></script>
<div style="position: relative; height: 430px; width: 295px; border: 2px solid rgb(171, 172, 172); background-color: rgb(232, 231, 234);">
      <div id="gradientBox" style="cursor: crosshair; top: 5px; position: absolute; left: 5px; width: 240px; height: 256px; border: 2px solid rgb(255, 255, 255); background-color: rgb(0, 255, 255);">
        <img id="gradientImg" style="display: block; width: 240px; height: 256px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_gradient.png">
        <img id="circle" style="position: absolute; height: 11px; width: 11px; left: 123px; top: 122.5px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_circle.gif">
      </div>


      <div id="hueBarDiv" style="position: absolute; left: 255px; width: 30px; border: 2px solid rgb(255, 255, 255); background-color: rgb(217, 216, 219); height: 255px; top: 5px;">
        <img style="position: absolute; height: 251px; width: 19px; left: 6px; top: 2px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_bar.png">
        <img id="arrows" style="position: absolute; height: 9px; width: 30px; left: 0px; top: 124.496px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_arrows.gif">
      </div>


      <div style="position: absolute; left: 5px; width: 145px; height: 50px; top: 280px;">
      <div style="position: absolute; border: 2px solid rgb(255, 255, 255); height: 50px; width: 150px; top: 0px; left: 0px;">
        <div id="quickColor" style="position: absolute; height: 50px; width: 140px; top: 0px; left: 0px; background-color: rgb(64, 128, 128);">


        </div>
        <div id="staticColor" style="position: absolute; height: 50px; width: 100px; top: 0px; left: 50px; background-color: rgb(64, 128, 128);">
        </div>
</div>
      </div>


<table style="position: absolute; left: 170px; top: 275px; height: 30px;" width="150px">
<tbody><tr>
<td><b>Hex: </b></td>
<td>
            <input size="8" id="hexBox" onchange="hexBoxChanged();" type="text">


</td>
</tr>
</tbody></table>


        <a href="http://muhamad-iqbal-blog.blogspot.com" target="_blank"><img style="display: block; width: 94px; height: 16px; position: absolute; left: 180px; top: 307px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhjrX-yfSWxEAEaU5y5K6JFnuvXxwRA2Q7iILG1xdaAiyn6x1VuzC9RojA11IrsSBUc0bFR8UMC-WFx5MhxQTLc9pYNIcciE-yzJyojYOVR7PRHvaGOpvvRXqtDEqkPYB9BCBwscj5Gptb/s1600/Banner.png"></a>


<table style="position: absolute; left: 5px; top: 340px; border: 2px solid rgb(255, 255, 255);" width="285px">
<tbody><tr>
 <td>Hue:</td>
  <td>
            <input size="8" id="hueBox" onchange="hueBoxChanged();" type="text">


</td>
  <td bgcolor="red"><span style="color: rgb(255, 255, 255);"> Red: </span></td>


  <td>
            <input size="8" id="redBox" onchange="redBoxChanged();" type="text">
</td>
</tr>
<tr>
<td>Saturation:</td>
  <td>


            <input size="8" id="saturationBox" onchange="saturationBoxChanged();" type="text">
</td>
 <td bgcolor="green"><span style="color: rgb(255, 255, 255);">Green:</span></td>


  <td>
            <input size="8" id="greenBox" onchange="greenBoxChanged();" type="text">
</td>
</tr>
<tr>
  <td>Value: </td>


  <td>
            <input size="8" id="valueBox" onchange="valueBoxChanged();" type="text">
</td>
<td bgcolor="blue"><span style="color: rgb(255, 255, 255);"> Blue:</span></td>


  <td>
            <input size="8" id="blueBox" onchange="blueBoxChanged();" type="text">
</td>
</tr>
</tbody></table>


    </div>
    <script type="text/javascript">
      fixGradientImg();
      var currentColor = Colors.ColorFromRGB(64,128,128);
      new dragObject("arrows", "hueBarDiv",
          arrowsLowBounds, arrowsUpBounds,
          arrowsDown, arrowsMoved, endMovement);
      new dragObject("circle", "gradientBox",
          circleLowBounds, circleUpBounds,
          circleDown, circleMoved, endMovement);
      colorChanged('box');
    </script>
</div>




</body>
</html>



CoPas kode di atas ke mana saja, seperti Widget Blogger atau halaman tertentu.
Selamat Mencoba!!!

Cara Membuat Button dengan Alert Box

Assalamualaikum para Sobat Blogger! Tahu "Button" nggak? Nah, ini contohnya :

~^tUtOr!aL^~

• Membuat Button Dasar

1. CoPy kode di bawah ini dan paste ke Notepad dulu!

↑↑↑Contohnya sudah bisa dilihat↑↑↑ 

2. Atur dahulu kode yang harus diubah.
3. CoPas ke tempat yang Anda inginkan.

•  Membuat Button dengan Alert Box

 1.  CoPy kode di bawah ini dan paste ke Notepad dulu!

 ↑↑↑Contohnya sudah bisa dilihat↑↑↑

2. Atur dahulu kode yang harus diubah.
3. CoPas ke tempat yang Anda inginkan.
NB : bila ada hal-hal yang ingin ditanyakan, klik disini untuk mengirim pesan ke Facebook Saya.
Selamat Mencoba!

Cara Membuat Marquee

Assalamualaikum...
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 karena dapat menghemat 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 semakin 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 :
Contoh marquee dari gerakan :

marquee dari kanan ke kiri

marquee dari kanan ke kiri
ganti kata “left” dengan keinginan anda yaitu bisa : left, up, down .
Contoh marquee dari perilaku gerakan :

marquee menurut perilaku

Contoh marquee dengan variasi hurup dan warna latar belakang :

&ltFONT FACE=”georgia” color=”White”>

Marquee dengan variasi huruf

Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.
Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :

silahkan tunjuk ke sini

Contoh marquee yang di dalam nya terdapat link :

Notebookmarketreview

Printscanreview

Blog Trick
Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda ganti sendiri agar tercipta variasi-variasi dari marquee ini.
Selamat Mencoba

Mengubah Tulisan Posting Baru, Beranda, dan Posting Lama dengan Gambar

Hai Sobat Blogger! Sorry ya, lama nggak posting. Saya coba-coba Template baru dari http://www.ezwpthemes.com/. He...He,,,He,., Kali ini Saya share cara merubah NewPost/OlderPOst/Home seperti setiap bagian bawah entri yang Saya terbitkan. Jadi akan Saya share cara-caranya.

~^tUtOr!aL^~

1. Login dulu ke Blogger.

2. PIlih Rancangan.

3. Pilih Edit HTML

4. Centang Expand Template Widget.

5. Untuk mengganti Posting Baru, cari kode <data:newerpagetitle> dan ganti dengan <img src="http://i763.photobucket.com/albums/xx275/ChandraRika23/icon-prev-grey.png" alt="Next" />

6. Untuk mengganti Posting Lama, cari kode <data:olderpagetitle> dan ganti dengan <img src="http://i763.photobucket.com/albums/xx275/ChandraRika23/icon-next-grey.gif" alt="Prev" />

7. Untuk mengganti Beranda/Home, cari kode <data:homemsg> dan ganti dengan <img src="http://i903.photobucket.com/albums/ac239/Dediekusmayadi/home_icon-2.png" alt="home" />

8. Pratinjau dahulu. Kalau udah oke klik Simpan Template

NotaBene :

• Teks yang berwarna merah merupakan alamat gambar.
• Biasanya terdapat 2 kode <data:homemsg>. Pilih yang pertama saja.
• Kode di atas sudah dicoba dan WORK100%

Selamat Mencoba!

Jenis-Jenis Border - Style Border Para Blogger

Assalamualaikum...
Sering kali kita melihat bagian tulisan atau elemen disidebar blog orang lain yang dibubuhi hiasan berupa bingkai di tepinya, bahkan pada sebahagian lainnya juga ada yang dihiasi berupa gambar belakang atau background sebagai latar belakang penulisannya.dan untuk masalah ini sudah ada beberapa orang yang menanyakan cara pemasangannya pada saya
Nah oleh karena itulah pada pembahasan ini saya tertarik untuk membahas tentang penggunaan style border atau bingkai pada blog ini, tetapi sebelum membahas mengenai cara pemakaiannya alangkah lebih baik kalau kita belajar untuk mengenal jenis-jenis style bordernya terlebih dahulu, iyakan ?

Pada umumnya jenis style border yang sering digunakan oleh para blogger ada 5 macam tampilan, yaitu sebagai berikut :

1.

dotted

2.

dashed

3.

double

4.

solid

5.

groove

6.

ridge

7.

inset

8.

outset

Sekian dan Terima Kasih bila Anda membacanya!!!
Sumber : http://resep-jitu.blogspot.com/2009/04/mengenal-jenis-jenis-style-border.html

zFPmenu, Floating Navbar Di Blog

zFPmenu – Fixed-Position Custom Menu and Navigation/Share Widget, adalah widget ‘melayang’ yang bisa diisi dengan menu berisi link-link sesuai keinginan.
Di dalamnya sudah termasuk navigasi scroll to top/bottom of page (scroll ke bagian paling atas/bawah halaman web) ber-engine jQuery, dan juga tombol share Twitter dan Facebook (bila diinginkan).

*

zFPmenu Code

Put this code into your web pages (before the closing </body> tag):

<!-- zFPmenu START -->
<div id="zfpm_div" style="display:none;">
<div id="zfpm_upperBox">
Place ads, text message, or anything here.
</div>
<ul id="zfpm_ul">
<!-- Your menus start -->
<li><a href="">YOUR MENU-1</a></li>
<li class="dir"><a href="">YOUR MENU 2 (containing submenu)</a>
   <ul>
      <li class="dir"><a href="">YOUR SUBMENU 2.1 (containing sub-submenu)</a>
         <ul>
            <li><a href="">YOUR SUB-SUBMENU 2.1.1</a></li>
            <li><a href="">YOUR SUB-SUBMENU 2.1.2</a></li>
         </ul>
      </li>
      <li><a href="">YOUR SUBMENU 2.2</a></li>
      <li><a href="">YOUR SUBMENU 2.3</a></li>
   </ul>
</li>
<li><a href="">YOUR MENU 3</a></li>
<!-- Your menus end -->
</ul></div>
<script type="text/javascript">
var zfpm_colorTheme = 'light'
var zfpm_shareBox = 'no';
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js"></script>
<!-- zFPmenu END -->

*

Usage/Configuration

Menu

Replace menu with your own menu. Place class="dir" attribute inside li tag where you want to add submenu.

Setting/Variable

You can change the color theme and the share buttons visibility setting.

• var zfpm_colorTheme = 'light';
  Set the color theme for the menu widget.
  Valid input: 'light' or 'dark'
• var zfpm_shareBox = 'no'
  Show the Twitter ‘Retweet’, Facebook ‘Share’, and Facebook ‘Like’ buttons (using LinksAlpha’s widget) or not.
  Valid input: 'yes' or 'no'

Setting Preview

Color theme:
Show share box:

Complete Variabel List

• var zfpm_colorTheme = 'light'; valid input: 'dark' or 'light'.
• var zfpm_customBackgroundImage = ''; valid input: full URL of an image.
• var zfpm_customBackgroundColor = ''; valid input: example: '#999999'.
• var zfpm_shareBox = 'yes'; valid input: 'yes' or 'no'.
• var zfpm_shareBoxPosition = 'right'; valid input: 'left' or 'right'.
• var zfpm_shareBoxCustomWidth = ''; valid input: example: '300'.
• var zfpm_waitForPageLoad = 'yes'; valid input: 'yes' or 'no'.

Upper Box

You can also place text messages, advertisements, or whatever you like in the div box with the ID zfpm_upperBox (above the menu).

*

Warning

This script is not design for Internet Explorer 6 browser.
Instead, if you add a variable var zfpm_ieUpgradeMessage = 'yes'; to the script, it will show an upgrade notification message on the top of page (see screenshot here) for IE 6 users.
Contoh bisa dilihat di sini.
Sumber : http://inimu.com/widget/zfpmenu/

Memasang Mode Penyimpanan Energi

Coba biarkan Blog Saya tetap StandBy. Jangan diapakan Blog Saya seperti mengklik pada Blog Saya, nanti akan muncul layar gelap bertuliskan Mode Penyimpanan Energi. Mau tahu bagaimana cara memasangnya? Pastinya mau donk... Tapi sebelumnya Saya berikan penjelasan tentang JavaScript kali ini.

JavaScript ini dikeluarkan oleh situs http://www.onlineleaf.com. Fungsi dari script ini seperti StandBy pada computer. Bedanya kalau di computer StandBy-nya "menidurkan" computer. Tapi kalau ini, fungsinya mempercepat loading Web pada Tab/Browser lainnya. Jadi Script ini nggak bikin lemot koneksi Anda. Ada baiknya juga kan Script yang satu ini kan??? He...He...He.... Dan berikut ini Scriptnya

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?lang=id&time=90"></script>

Keterangan : Kode yang berwarna merah bisa diganti dengan salah satu bahasa yang tertera pada daftar di bawah ini :

• ak - Akan
• da - Danish
• de - German
• en - English
• es - Spanish
• fr - French
• fi - Filipino
• gr - Greek
• hr - Croatian
• id - Indonesian
• jp - Japanese
• it - Italian
• nl - Dutch
• pl - Polish
• pt - Portuguese
• bpt - Brazilian Portuguese
• ro - Romanian
• sl - Slovenian
• se - Swedish
• sk - Slovak
• sw - Swahili
• tr - Turkish
• vi - Vietnamese

Dan kode yang berwarna orange, ganti dengan detik. Contoh : 90 = 1.5 menit diganti menjadi 60 = 1 menit.
Selamat Mencoba!

Perbedaan ShoutMix ver1.0 dengan ver 2.0

Baru saja Saya meneliti antara kode ShoutMix ver1.0 dengan ver2.0. Kalau dilihat secara teliti, pastinya Sobat Blogger tahu dimana letak perbedaan antara ShoutMix ver1.0 dengan ver2.0. Apakah perbedaannya? Berikut ini daftar perbedaannya, antara ShoutMix ver1.0 dengan 2.0 yang telah Saya data, mulai dari JavaScript sampai Layout.

~^LiSt^~

 

Perbedaan	Ver1.0	Ver2.0
Kemudahan dalam mengedit Java Script	Sulit	Lebih Mudah
Gambar yang di tampilkan	Bagus	Lebih bagus
Floating efect	Nice	Nice
Border	Melengkung	Tegak-lurus
Ukuran gambar	Terserah	Terbatas/di atur manual

Kalau udah lihat perbedaannya, bisa tentukan JavaScript yang nanti akan Anda gunakan. Ini JavaScriptnya :

Versi 1.0

<!-- Begin Show Hide Floating - http://www.hitsuke.blogspot.com -- http://www.remo-xp.com--> <style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:550px; width:35px; float:left; cursor:pointer; background:url('http://i642.photobucket.com/albums/uu147/remoxp/Chatbox.png') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #ffffff; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#000000; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent"> <!-- Kode Shoutmix mu Disini -->

<!-- Tulis kode shoutmix disini --!>

<div style="text-align:right"> <a href="javascript:showHidehitsukeFX()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

Versi 2.0

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:right;
cursor:pointer;
background:url('http://www.effutio.com/wp-content/themes/effutio/images/contacttab.jpg') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #FFFFFFF;
background:#000000;
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.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!--Tulis kode shoutmix di sini --!>

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

NB : Untuk shoutMix versi 2.0 ganti tulisan yang berwarna orange dengan lawan katanya Untuk menampilkan float efek yang berbeda. ex : right ganti dengan left atau left ganti dengan right.

Merubah Tag Judul Blogger

Secara default Blogger menampilkan judul blog pertama, diikuti dengan nama pos. Seperti yang Anda mungkin melihat ini tidak baik ketika datang ke SEO . Sangat penting untuk nama pos datang sebelum nama blog Anda, terutama ketika datang ke google hasil pencarian. Pelajari cara membuat judul posting Anda muncul pertama sehingga anda dapat kumparan di lebih banyak lalu lintas dari mesin pencari.

Mengapa Mengubah Judul?
Ini cukup penting untuk memiliki Post Title + Judul Blog diatur sesuai karena ini adalah bagaimana Anda ingin blog Anda akan ditampilkan pada hasil pencarian's google. Dengan cara ini lebih banyak orang akan mengklik link anda saat melakukan pencarian google karena judul posting lebih relevan daripada nama posting Anda.
Contoh Hasil Pencarian Google:
Anda kemungkinan besar untuk mengklik pada gambar bawah saat mencari google untuk kata kunci "gambar generator refleksi". Alasannya adalah bahwa pikiran Anda membaca teks dari kiri ke kanan. Jadi masuk akal untuk memiliki judul yang lebih penting di sebelah kiri.

Bagaimana Mengubah Judul:

1. Pergi ke Layout> edit HTML di dashboard Blogger Anda.
2. Cari tag ini: <data:blog.pageTitle/> <title> </ title>
3. Ganti tag ini dengan kode berikut:

<b:if cond='data:blog.pageType == "index"'> <title> <data:blog.title/> </ title> <b:else/> <title> <data: blog.pageName /> | <data:blog.title/> </ title> </ b: if>

4. Simpan template Anda dan Anda akan melihat hasilnya di browser web Anda seperti digambarkan dalam gambar di bawah.
5. Mungkin diperlukan beberapa hari agar perubahan ditampilkan di atas hasil pencarian google. Saya menjamin Anda bahwa Anda akan mulai menerima lebih banyak lalu lintas dari google setelah Anda diindeks kembali!

dari : http://widgetsforfree.blogspot.com/2009/08/change-title-tags-in-blogger-for-more.html yang telah di translate ke Bahasa Indonesia

Cara Membuat Kotak Feed Burner

Coba lihat Kotak feedburner di sebelah kanan, kalau mau langganan silakan aja ya! Kotak tersebut Saya dapatkan dari sebuah Blog (maaf tidak bisa saya sebutkan sumbernya). Biasanya Kotak feed burner digunakan untuk menawarkan FEED via email kepada seseorang yang mendaftarkan emailnya dengan mengisi kotak tersebut. Langsung aja kita ke tutorial!

~^tUtOr!aL^~

1. Daftar ke feedburner dulu ya! Kalau udah daftar silakan login.
2. Klik tulisan Register pada halaman bagian atas
3. Isi seluruh form yang telah di sediakan seperti Username, password , Email address, Secret Question, Secret Answer,  Klik tombol Sigin
4. Jika berhasil, maka sobat sekalian akan menerima ucapan selamat datang (welcome) dari feedburner
5. Isi kotak di bawah tulisan Burn a feed right this instant dengan alamat blog sobat
6. Beri tanda pada radio buuton(titik) yang tersedia, terserah sobat mau pilih yang mana, kemudian klik tombol Next
7. Sekarang sobat ubah Feed Title dengan Feed Address (tidak wajib), kemudian klik tombol Active Feed
8. Sobat akan menerima ucapan Conrats, klik tombol Next saja.
9. Beri tanda cek list (centang) pada Clickthroughs dan I want more ! have FeedBurner stats PRO also track, lalu klik tombol Next
10. Klik pada tab Optimize
11. Banyak setting-an yang bisa sobat lakukan, tetapi saya sarankan pada bagian yang terpenting, yaitu klik pada SmartFeed lalu klik tombol Active
12. Klik pada tab Publicize, lalu klik FeedCount
13. Pilih bentuk style feedcount sesuai selera sobat, lalu beri tanda pada radio button (titik) di sampingnya, kemudian klik tombol Active
14. Setelah itu sobat akan mendapat kode HTML, copy dan paste di blog sobat
15. Klik Chicklet Chooser untuk memilih berbagai banner yang disediakan dengan cara beri tanda pada radio button (titik) di samping banner, kemudian copy kode HTML nya di paling bawah, kemudian paste di blog sobat
16. Klik Pingshot, lalu Klik tombol Active
17. Klik Headline Animator, kemudian klik menu dropdown di bawah tulisan Theme, pilih yang sesuai selera sobat, lalu klik tombol Active
18.  Klik menu dropdown di samping tulisan Add to, pilih Blogger blog, klik tombol Next
19. Setelah itu muncul window baru, klik tombol Add to Blogger, jangan lupa Sigin dulu di blogger
20.  Pilih blog yang mau di pasang banner animasi nya, lalu klik tombol Menambah Widget maka secara otomatis banner animasi akan di tambahkan di blog sobat.

Eitt.. Tunggu dulu itu masih Chicklet Chooser-nya aja belum kotaknya. Baiklah ini JavaScript kotaknya.

<style>

.form {
border:1px solid #ccc; /* warna garis pinggir form */
background: #ffffff /* warna background form */
padding:3px; /* spasi form */
width:260px; /* panjang form */
height:108px /* tinggi form */
}

.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjI6dlElYV1DaReAr-8KKoNCJ9B1EOtJpnv071ev80Wjq-Fi7BRTvxE3XBcFg0AAQpuibtsqxB_10WxrQzcZOBd6w7ahtkAoIwFHRw3zoNbN3-rq8w6OErcDHekaWRaTUUalJIVm_eF6DC/s320/mouse-rss-symbo2l.jpg") no-repeat top right;}

.button {
background: #006699; /* warna tombol subscribe */
color: #FFFFFF; /* warna font subscribe */
font-size: 12px; /* ukuran font subscribe */
font-family: Arial, Tahoma, Verdana; /* font subscribe */
margin-left: 5px; /* margin kiri tombol subscribe */
border: 1px solid #234B69; /* warna garis pinggir tombol subscribe */
padding:3px 5px 3px 5px; /* jarak antara font dengan garis pinggir tombol subscribe */
font-weight: bold;
}
</style>

<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:12px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/MIT-feed"></a> <a href="http://feeds.feedburner.com/MIT-feed">Dapatkan Update Terbaru Melalui RSS </a></div>

<div style="padding-left:10px; font-weight:bold; font-size:12px;">atau Dapatkan artikel terbaru <br/>langsung ke email anda!</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= MIT-feed ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:22px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email anda disini..." /> <input type="hidden" value=" MIT-feed " name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="DAFTAR" /></div></form></div></div><p><a href="http://feeds.feedburner.com/MIT-feed"><img src="http://feeds.feedburner.com/~fc/MIT-feed?bg=0000FF&amp;fg=FFFFFF&amp;anim=1&amp;label=listeners" height="26" width="88" style="border:0" alt="" /></a></p>

NB : > Tulisan yang tebal ganti dengan script chiklet chooser yang tadi.
        > Tulisan MIT-feed ganti dengan feed Anda di feedburner.
Selamat Mencoba dan silakan langganan!

Dapatkan

Update Terbaru Melalui RSS

atau Dapatkan artikel terbaru
langsung

ke email anda!

Isi aja kotak di atas atau isi kotak yang ada di sebelah kanan blog saya ini ya!

Membuat Tulisan Berjalan Di Tab Browser

Coba lihat Tab Browser di Browser Anda, pasti akan muncul tulisan ~^Ŵēŀĉ0мė Ţό BŀΘģ Műĥāmãď Ĭqbǻļ^~ lalu ~^Ĵāňğąň Ĺuрa Ķ0méʼnťâŕʼnŷą^~ lalu ~^Añď Ţĥāŋkś Fǒŕ Ÿouř Vīśįť^~ lalu ~^Ĥąţĺ- Ĥąţĺ Ķĺìķ Ķǎʼnāňʼnŷã Ēřŗǒř^~. Semua tulisan tersebut merupakan "ulah" dari JavaScript. JavaScript ini mirip marquee, namun efeknya merupakan ketikan. Tanpa basa-basi, langsung aja ke tutorial.

~^tUtOr!aL^~

1. Masuk ke Blogger.

2. Klik Rancangan

3. Pilih Elemen Laman

4. Tambah Widget JavaScript/HTML

5. Masukkan kode di bawah ini.

<script>
function tb8_makeArray(n){
this.length = n;
return this.length;
}

tb8_messages = new tb8_makeArray(4);
tb8_messages[0] = "~^Ŵēŀĉ0мė Ţό BŀΘģ Műĥāmãď Ĭqbǻļ^~";
tb8_messages[1] = "~^Ĵāňğąň Ĺuрa Ķ0méʼnťâŕʼnŷą^~";
tb8_messages[2] = "~^Añď Ţĥāŋkś Fǒŕ Ÿouř Vīśįť^~";
tb8_messages[3] = "~^Ĥąţĺ- Ĥąţĺ Ķĺìķ Ķǎʼnāňʼnŷã Ēřŗǒř^~";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 100;
tb8_delay = 2000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return; } tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
</script>

Keterangan :
Tulisan yang berwarna merah merupakan banyak tulisan yang keluar nantinya.
Tulisan yang berwarna orange diganti dengan kata-kata Anda sendiri.