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

Script Anti Copy, Anti Klik Kanan, Anti Block

Assalamualaikum...
Pernah Anda mengunjungi sebuah blog yang pada waktu ingin memblock textnya tidak bisa? Di klik kanan juga tidak bisa? Wah, tentunya diCopy jelas nggak bisa. Baiklah, Saya habis Blogwalking di kode-blogger.blogspot.com eh malah nemu script kayak gini! He...he..he.,. cuma buat nambah Poting doank,, Yo wes, ikuti Tutorial di bawah ini Sobat!

Tutorial > Anti Copy, Right Click, Blocking Text
1. Login ke Akun Blogger Anda
2. Langsung ke Edit HTML
3. Cari kode <body>
4. CoPas kode di bawah ini dan ganti kode kode <body> dengan kode di bawah ini :

<body oncontextmenu='return true;' onkeydown='return true;' onmousedown='return true;'>

5. Sebelum Anda menyimpan Template Anda, sebaiknya Anda tidak memasang script ini apabila Anda mempunyai Blog yang :
• Berisi info yang biasa di share
• Berisi kode-kode seperti HTML, Javascript, jQuery, dsb
• Script ini sedikit merugikan bagi pengunjung Blog
6. Jika sudah membaca info di atas, Simpan Template.
Info : Kode ini sebenarnya dibawgi menjadi 3 script yang fungsinya :
1. Disable Klik Kanan (onmousedown)
2. Disable Block Text (oncontextmenu)
3. Disable Ctrl+C / Ctrl+V (onkeydown)

Selamat Mencoba!

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

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!

Install Opera Mini di Komputer

Assalamualaikum...
Tahu Opera Mini? Yupz! Opera Mini merupakan Mini-Browser untuk Handphone yang mendukung Java. Opera Mini sangat populer di kalangan masyarakat. Memang sih pulsa bisa dikontrol lewat Opera Mini. Tapi, bagaimana pulsa tiba-tiba habis buat facebook-an melulu? Pertanyaan tersebut membuat Anda berpikir, "Gimana ya kalo Opera Mini ada di Compi gue yang connect sama internet?". Postingan Saya yang satu ini, menjawab masalah Anda. Namun, Anda harus menyiapkan Tools dan Opera Mini-nya. Berikut ini Toolsnya dan Opera Mininya :

LINK to DOWNLOAD :
JRE → Click Here
MicroEmulator → Click Here
Opera Mini → versi.JAD and versi.JAR
NB : download semuanya (file jad dan jarnya)

~^tUtOr!aL^~

1. Install JRE

2. Extract MicroEmulator

3. Buka file microemulator.jar

4. Klik File >> Open MIDLet File

5. Pilih Opera Mini yang versi jad

6. Ikuti perintah selanjutnya dari Opera Mini

7. Selesai!

NB: untyk sementara hanya Opera Mini saja yang bisa dicoba. Untuk Program Java lainnya menunggu Update dari Saya.

Hot News! Akhirnya Blog di Blogger Punya Favicon Sendiri

Assalamualaikum..
Sobat Blogger, sekarang Blogger memberikan kemudahan dalam hal favicon. Yap, favicon Blogger yang semula kayak gini akhirnya bisa diubah. Caranya ikuti tutorial berikut ini :

~^tUtOr!aL^~

1. Buka draft.blogger.com

2. Jika belum Log In, Log In terlebih dahulu

3. Klik Dashboard

4. Klik Layout
5. Klik edit pada favicon

6. Nanti akan muncul sebuah jendela tempat meng-upload gambar. Ukuran gambar maksimal sektar 10 KB.

7. Klik Simpan.

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 Memperpanjang Masa Aktif Domain .Co.CC - Gratis!

Lagi males nulis nich Sobat Blogger! CoPas aja dech dari Blog sebelah. Isinya mah cara Memperpanjang masa aktif domain .co.cc. Saya kira bayar, ternyata eh, gratis Gan! Coba lihat postingan di bawah ini :
Perlu anda ketahui bahwa Domain co.cc memiliki masa aktif, biasanya 1 Tahun. Memperpanjang Masa Aktif Domain co.cc masih tetap gratis, jadi anda tak perlu mengeluarkan biaya perpanjangan domain. Bagi anda yang masa aktif domainnya sudah mulai habis, ada baiknya anda perpanjang masa aktifnya dengan mengikuti langkah berikut ini :

1. Silahkan klik di sini untuk masuk ke co.cc

2.Anda harus login ke akun co.cc anda dengan klik Returning user, sign in here

3. Jika anda sudah masuk, klik renew pada domain yang ingin anda perpanjang

4. Pilih Personal, kemudian beri centang pada If the purpose is not personal,.......

(anda hanya bisa memilih personal untuk perpanjangan secara gratis)

5 Setelah itu klik tombol Continue

Sekarang Masa aktif domain anda telah diperpanjang.

Demikianlah tutorial tentang Cara Memperpanjang Masa Aktif Domain co.cc Gratis, semoga bermanfaat. Jangan lupa tinggalkan pesan dan terima kasih

Resource : http://www.mediabloger.co.cc/2011/03/memperpanjang-masa-aktif-domain-cocc.html

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 Download Dokumen di Scribd.com Gratis dan Tanpa Registrasi

Assalamualaikum Warahmatullahi Wabarakatuh. Pertama-tama marilah kita panjatkan puja dan puji syukur kehadirat Allah SWT. karena atas rahmatnya, kini kita bisa mendownload dokumen di Scribd.com tanpa meregistrasi terlebih dahulu. What! Emang bisa? Bisa dong, karena ada triknya! He..He..,He,.,. Okelah Saya mau kasih cara yang paling manjur. Berikut ini caranya :

~^tUtOr!aL^~

Trick ex1 :
1. Buka http://www.scribd.com/mobile
2. Sebelum melakukan trik di atas, bukalah halaman Dokumen. ex : http://www.scribd.com/mobile/doc/3827449/Membuat-Web-Dengan-Dreamweaver
3. Nah, kita lihat di Link di atas http://www.scribd.com/mobile/doc/3827449/Membuat-Web-Dengan-Dreamweaver, kode (3827449) pastekan ke http://www.scribd.com/mobile.
4. Nanti akan muncul Document yang Anda inginkan.
5. klik Download Now.
6. Nanti nama document sementaranya "download" (tanpa tanda petik).
7. Berhasil dech mendapatkan dokumennya!

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

Hack Misi Ninja Saga - Jounin Exam - Full Hack dengan CE

Mungkin bagi para pemain NS (Ninja Saga) sedikit kesulitan dalam Hal Jounin Exam. Baiklah ini yang bisa dilakukan untuk Menyelesaikan Misi Ninja Saga - Jounin Exam.

~^tUtOr!aL^~

Peralatan :

* Cheat Engine ( All versi )
* Browser mu

Cara Penggunaan :

1. Buka Facebook mu dan Login
2. buka Apps. Ninja Saga
3. masuk ke Kage room
4. buka misi ujian jouninnya
5. baru buka Cheat Engine
6. proses menggunakan plugin container atau browsermu
7. pilih yang TEXT dan Jangan centang ASROM
8. lalu scan misi yang ingin anda lewati
9. Misalnya kamu ingin melewati Jounin Exam part 5
10. kamu scan mission_136
11. nanti akan muncul 1 adress di samping
12. double klik adress tersebut
13. lalu ganti value nya menjadi mission_121
14. lalu masuk ke ninja saga
15. main kan misi part 5 nya dan kamu akan melawan 2 rusa kutub dari misi event natal tahun 2009
16. lalu selesaikan, kalau sudah reload Ninja saga mu
17. dan kamu telah menyelesaikan misi tersebut

List Mission Jounin nya

* mission_132 : Jounin Exam part 1
* mission_133 : Jounin Exam part 2
* mission_134 : Jounin Exam part 3
* mission_135 : Jounin Exam part 4
* mission_136 : Jounin Exam part 5

UPDATEcode sabtu21mei2011 20:53 :
Cheat sudah tidak work lagi.

Download Video di Youtube

Banyak Orang terkenal gara-gara Youtube. Masa kita ketinggalan videonya sih? Kalau lihat di Youtube sih Pas kalau Lemmmoooouutytttt beghhh.... Lebih baik download aja.. Eitss, Gimana??? Kita terbang aja ke keepvid.com. Kemudian, masukkan UrL tempat video di Youtube. Lihat Gambar ↓

Kalau sudah klik download. Oya! Jangan lupa Download Java di sini. Kalau sudah nanti muncul pilihan Jenis, Ukuran, dan satu link download ke  Snipmp3.com untuk mendownload Video tersebut berformat mp3. Kalau sudah dipilih, tinggal ditentukan akan disimpan di mana.
Selamat mencoba!!!

UPDATEcode 11:12 minggu10april2011 :
Link download JAVA telah Saya ganti menjadi http://www.ziddu.com/download/14538752/javainstaller.exe.html