Cara membuat Pop-Up Window

Teman-teman pernah mendengar bahkan mungkin familiar dengan pop-up window. Ok begini saya ada tips buat anda. Cara sangat mudah yaitu
1-Login ke account blogger anda.
2-Click Layout--->
3-Add a gadget
4-Kemudian copy code dibawah ini, sebelumnya .... ganti dulu code yang berwarna biru :
<FORM METHOD="post">

<INPUT TYPE="button" VALUE="Click me!"

OnClick = "hint_wnd = window.open(
'', 'hint_wnd', 'width=50, height=60, resizable=no, scrollbars=no' );

hint_wnd.document.write( 'Tulis text anda disini' );
return true;">

</FORM>
Semoga berhasil dan mimipi indah

Read More

Cara memasang Text Kedap kedip-rainbow.js

Bagaimanakah cara memasang text berkedap-kedip ?.Ingin tahu caranya ?Kalo ingin contoh sudah banyak rekan-rekan yang pakai trick ini bahkan saya juga memakainya
caranya gampang yaitu :
1-Login ke account blogger anda.
2-Backup Template anda--->click--><span style="font-weight: bold; color: rgb(255, 204, 0);">Download Full Template</span>
3-Click Layout--->
4-Click Edit HTML--->
5-Download kode dibawah ini dan upload ke hosting anda :
6-Ganti code dibawah ini yang berwana biru dengan code JS yang sudah anda upload di hosting:

Download

<script src='rainbow.js'/>
7-Kemudian copy pasta pada HTML anda sesudah </head> lalu simpan atau anda bisa pakai script saya yang sudah saya upload pada hosting saya, code telah tersedia dibawah ini :
<script src='http://sites.google.com/site/sugwijays/sugwi.js'/>
Semoga anda menyukainya.

Read More

Highlight untuk Text Area

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"><a href="http://www.mutiaramail.blogspot.com" target="_blank">Mutiaramail</a></textarea></p></div></form>
Hasilnya seperti dibawah ini :

<a href="http://www.mutiaramail.blogspot.com" target="_blank">Mutiaramail</a><br />

Selamat mencoba semoga berhasil.

Read More

Cara Menampilkan warna background dengan postingan yang berbeda

Dalam membuat background ada dua alternatif yaitu membuat background dengan warna dan membuat background dengan bantuan gambar, khusus untuk background dengan gambar terbagi lagi ke dalam beberapa teknik yaitu background gambar dengan teknik repeat (ada repeat, repeat-x, repeat-y) dan background gambar dengan teknik no-repeat (gambar backgroundnya memang ukuran besar). Untuk teknik-teknik ini mungkin lain kali saja deh, kangrohman nya sedikit bad mood nih, mending sekarang yang singkat aja deh.
Membuat background dengan warna
Agar warna background postingan bisa berbeda-beda setiap postingan, anda perlu melakukan :
Ketika anda akan memulai untuk membuat postingan, pilih tab Edit HTML jangan pilih Compose. Awali postingan anda dengan kode seperti ini :
<div style="background:#FFECB3; text-align:justify;font-size:120%"></div>
Ganti tulisan kode_warna_disini dengan kode warna yang anda inginkan. Sedikit tips yang masih bingung dengan kode warna,klick disini
Contoh seperti dibawah ini :

<div style="background:#FFECB3; text-align:justify; font-size:120%">
This is an enjoyable movie and rightly billed as Rocky for a new generation. I must say the music, and cinematography people will instantly recognise the Rocky references, even without being told that this is being billed as Rocky for a new generation.
It stars Channing Tatum(Step up to the streets) as a former college wrestler Shawn McArthur struggling hard to make ends meet in New York after having an altercation with his father/coach of the wrestling team. We meet him as he is struggling to offload a series of books he has no idea are counterfeit, one of the hapless buyers happens to be the gorgeous Zulay Valez (Zulay Henao, S. Darko something about her just reminds me of a cat), from the altercation that occurs with Harvey Boarden(Terrence Howard, Iron man) and some of his associates, Harvey gets the impression Shawn may indeed be just what he is looking for, for an underground fighting campaign, the rates of pay of course are several times more than either of them could make struggling to survive on the unforgiving metropolis that is New York.
Although billed as Rocky for the next generation, there are some testing questions the original Rocky would not have crossed his mind to contemplate, and of course there is the familiar territory of the arch nemesis of a protagonist, the talented wrestler Evan Hailey (Brian J. White The Shield) who happens to have been the catalyst for the original fallout with Shawn's father, as equally Harvey as Shawn's unofficial manager has to face some of the taunts from his comrades who are rolling in the money, notably Martinez (Luiz Guzman, Traffic) Jack Dancing (Roger Guenver Smith, He got game).
You are left wondering if Shawn is going to make it as a underground fighter, and if there is any romantic hope for him and the lovely Zulay equally struggling herself to raise a child on her own, and her troubling grandmother.
</div>
Menjadi seperti ini :

This is an enjoyable movie and rightly billed as Rocky for a new generation. I must say the music, and cinematography people will instantly recognise the Rocky references, even without being told that this is being billed as Rocky for a new generation.
It stars Channing Tatum(Step up to the streets) as a former college wrestler Shawn McArthur struggling hard to make ends meet in New York after having an altercation with his father/coach of the wrestling team. We meet him as he is struggling to offload a series of books he has no idea are counterfeit, one of the hapless buyers happens to be the gorgeous Zulay Valez (Zulay Henao, S. Darko something about her just reminds me of a cat), from the altercation that occurs with Harvey Boarden(Terrence Howard, Iron man) and some of his associates, Harvey gets the impression Shawn may indeed be just what he is looking for, for an underground fighting campaign, the rates of pay of course are several times more than either of them could make struggling to survive on the unforgiving metropolis that is New York.
Although billed as Rocky for the next generation, there are some testing questions the original Rocky would not have crossed his mind to contemplate, and of course there is the familiar territory of the arch nemesis of a protagonist, the talented wrestler Evan Hailey (Brian J. White The Shield) who happens to have been the catalyst for the original fallout with Shawn's father, as equally Harvey as Shawn's unofficial manager has to face some of the taunts from his comrades who are rolling in the money, notably Martinez (Luiz Guzman, Traffic) Jack Dancing (Roger Guenver Smith, He got game).
You are left wondering if Shawn is going to make it as a underground fighter, and if there is any romantic hope for him and the lovely Zulay equally struggling herself to raise a child on her own, and her troubling grandmother.

Read More

Menghilangkan nomor label pada Blogspot

Setiap Blogger menginginkan kelihatan blognya lebih kelihatan bagus atau kata lain profesional.Oke kita mulai saja yaa ....

1-Login ke account blogger anda.
2-Backup Template anda--->click-->Download Full Template
3-Click Layout--->
4-Click Edit HTML--->
5-Click Expand Widget templates
6-Cari code dibawah ini :
(<data:label.count/>)
Kemudian "HAPUS/DELETE"
7-Simpan

Read More

Accessories From Mutiara-Mail pada Blog

Selamat bertemu lagi pada postingan saya hasil dari jalan-jalan, tips ini sengaja saya posting pada blog saya, siapa tahu teman juga membutuhkan tips ini.Contohnya gambar bergerak ada dibawah ini,yaa .. seperti yang saya pasang pada blog saya ini:
Gambar 1Gambar 2Gambar 3
1-Login ke account blogger anda.
2-Click Layout--->
3-Click Edit HTML--->
4-Letakkan code dibawah ini sebelum </body>
<a href='http://mutiaramail.blogspot.com' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Blog Invest'><img src='http://i721.photobucket.com/albums/ww218/sugwi/DRUIDD.gif'/></a>
Catatan:
Kode yang berwarna merah ganti bottom atau up
Kode yang berwarna merah ganti left atau right
5-Selesai

Read More

Membuat 3-tiga colom pada kaki template

Mungkin sobat pernah memakai template yang mana template tersebut tidak ada tiga kolom pada kaki template lihat seperti conto dibawah ini :

1-Log in ke account blogger anda.
2-Click Layout--->
3-Click Edit HTML
4-Check list pada Expand Widget Templates->Tapi sebelumnya Backup dulu Template Anda
5-Cari kode yang berwarna biru
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Perhatian !!!:
Perlu sobat ketahui tidak semua template bisa dijadikan 3 tiga kolom misalnya "footer-wrap" or "footer".
6-Bila tidak ada masalah maka ganti kode yang berwarna merah dengan kode dibawah ini:
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>

</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
Setelah itu simpan dan apabila sobat menginginkan warna yang sesuai dengan tempat sobat maka ganti kode yang berwarna merah.
7-Kemudian step yang terakhir letakkan kode dibawah ini sebelum ]]></b:skin> tag
#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}
8-Tahan berikut simpan dan selesai semoga anda berhasil

Read More

Navigasi CSS Horizontal hover menu

Hi sobat saya datang kembali membawa tip Navigation buat anda.Contoh sepeerti ini

1-Log in ke account blogger anda.
2-Click Layout--->
3-Click Edit HTML
4-Letakkan kode dibawah ini sebelum ]]></b:skin> tag :
.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}

.hovermenu ul li a:hover{
background-color: #FFE271;
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
5-Letakkan kode dibawah ini pada HTML anda
<div class='hovermenu'>
<ul>
<li><a href='http://www.mutiaramail.blogspot.com'>Mutiaramail</a></li>
<li><a href='#http://Edit Link'>Edit Link</a></li>
<li><a href='#http://Edit Link'>Edit Link</a></li>
<li><a href='#http://Edit Link'>Edit Link</a></li>
<li><a href='#http://Edit Link'>Edit Link</a></li>
</ul>
</div>
6-Simpan dan selesai

Read More

Blogger Tips jQuery Scroll to Top Control

Hi friend, saya ada trick buat anda, khususnya buat blogger pemula yaitu Scroll top. Ok kita mualai saja ya ......
1-Login ke account blogger anda---->
2-Click Layout--->
3-Click Edit HTML---->
4-Copy kode dibawah ini kemudian letakkan diatas </head> :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js">
/***********************************************
* Followt http://mutiaramail.blogspot.com for full source code
***********************************************/
</script>
5-Letakkan kode berikut ini diatas </body>:
<a href="#top"><img src="#http://Up.gif"></a>
6-Download js dan image-nya

Download

7-Selesai dan selamat mencoba semoga berhasil.

Read More

Trick Tips memasang Bookmark

Setiap pemilik blog tentunya, berkeinginan agar blognya lebih baik dan lebih menarik daripada blog lain.Nah saya ada tips buat anda.sebelumya klik disini lalu tambahkan "Get Your Button" Lihat contoh seperti dibawah ini :
Selanjutnya ---->
1-Login ke account blogger anda---->
2-Click Layout--->
3-Click Edit HTML---->
4.cari kode dibawah ini :
<div class='post-footer'>

atau

<p class='post-footer-line post-footer-line-1'>
Jika anda masih tidak menemukannya maka coba cari kode yang sejenis seperti diatas. Kemudian pastekan kode yang didapat dari "Get Your Button" dibawahnya.
<p class='post-footer-line post-footer-line-3'><br/><div align='left'><a expr:href='"http://www.addthis.com/bookmark.php?pub=4QVQQ2TM5XDPAYVN&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Bookmark using any bookmark manager!'><img alt='AddThis Social Bookmark Button' height='16' src='http://s5.addthis.com/button1-bm.gif' style='border: 0px; padding: 0px' width='125'/></a></div><!-- AddThis Bookmark Post Button END --></p>
Setelah itu anda akan bisa melihat bookmark anda pada setiap postingan.
Ada model yang lain selain diatas
klik disini lalu tambahkan "Get Your Button" Lihat contoh seperti dibawah ini :
Selanjutnya ---->
1-Login ke account blogger anda---->
2-Click Layout--->
3-Click Edit HTML---->
4.cari kode dibawah ini :
<data:post.body/>
Jika anda masih tidak menemukannya maka coba cari kode yang sejenis seperti diatas.
<b:if cond='data:blog.pageType == "item"'>

<script
type='text/javascript'>digg_url=&quot;<data:post.url/>&quot;;</script><script
src='http://digg.com/tools/diggthis.js' type='text/javascript'/>

<a
expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; +
data:post.url + &quot;&amp;title=&quot; + data:post.title'
rel='external nofollow' target='_blank'><img alt='Stumble' src='ganti Icon URL '/></a>

<a expr:href='&quot;http://del.icio.us/post?url=&quot; +
data:post.url + &quot;&amp;title=&quot; + data:post.title'
rel='external nofollow' target='_blank'><img alt='Delicious' src='gantiIcon URL '/></a>

<a expr:href='&quot;http://technorati.com/faves?add=&quot; +
data:post.url' rel='external nofollow' target='_blank'><img
alt='Technorati' src='ganti Icon URL '/></a>

<a expr:href='&quot;http://twitthis.com/twit?url=&quot; +
data:post.url' rel='external nofollow' target='_blank'><img
alt='Twitter' src='ganti Icon URL '/></a>

<a
expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; +
data:post.url + &quot;&amp;t=&quot; + data:post.title'
rel='external nofollow' target='_blank'><img alt='Facebook' src='ganti Icon URL '/></a></b:if>
Perlu anda ketahui bahwa kode yang berwarna biru harus diganti, caranya yaitu ganti icon dengan klik disini kemudain down dan simpan pada hosting anda.
Selamat mencoba dan semoga sukses.

Read More

Trick Hidden sebagian content

Apa itu jQuery? Dari situsnya “jQuery adalah sejenis pustaka JavaScript yang baru. jQuery adalah pustaka JavaScript yang cepat dan ringkas yang menyederhanakan traversing dokumen HTML, penanganan event, animasi, dan interaksi Ajax untuk mempercepat pengembangan web”. Mari kita liat contoh sederhana ini bagi penggunaan jQuery:
Klik di sini untuk menimbulkan atau menyembunyikan

The important thing to remember is that all vacations are of a very personal nature. The perfect holiday for one person might sound like a complete nightmare to someone else.
You'll want to book something that's right for you and your family. Have a good think about what this would entail and maybe even draw up a list of the key features that you're looking for.
This can actually be really good fun and it's well worth getting the kids involved. Even if they just tell you that they'd like somewhere with a beach, then it gives you a good start!.

Caranya seperti ini:
1-Login ke account blogger anda---->
2-Click Layout--->
3-Click Edit HTML---->
4-Simpan kode dibawah ini diatas ]]></b:skin>
$(document).ready( function() {
$("#toggle-hidden-div").click( function() {
$("#hidden-div").slideToggle('slow');
});
});
5-Simpan kode ini diatas </Head>
<script src="http://gedex.web.id/wp-content/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#toggle-hidden-div").click( function() {
$("#hidden-div").slideToggle('slow');
});
});
</script>
6-Copy kode dibawah ini dan Simpan di konten anda
<a id="toggle-hidden-div" href="#toggle-hidden-div">Klik di sini untuk menimbulkan atau menyembunyikan</a>
<div id="hidden-div" style="display: none">
Tulis konten ada disini?
</div>
6-Selesai

Read More

Trick Dropline Menus

Friend dah lama nih gak posting akhirnya kangen juga posting.Saya ada tips buat anda ikuti aja stepnya.

1-Login ke account blogger anda.
2-Click Layout--->
3-Click Edit HTML
4-Letakkan kode dibawah ini sebelum ]]></b:skin> tag :
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated html
is available at http://www.sumbloggers.com.
Follow the instruction to make this menu on mutiaramail.blogspot.com
=================================================================== */
#nav {
height:36px; position:relative; font-family:arial, verdana, sans-serif; font-size:11px;z-index:500;
}
#nav .select {
margin:0; padding:0; list-style:none; white-space:nowrap;
}
#nav li {
float:left; background:url(blank_over_p.gif);
}
#nav .select a {
display:block; height:36px; float:left; background: url(blank_p.gif); padding:0 0 0 15px; text-decoration:none; line-height:25px; white-space:nowrap; color:#ddd;
}
#nav .select a b {
display:block; padding:0 30px 10px 15px; background:url(blank_p.gif) right top;
}
#nav .select li:hover a {
background: url(blank_over_p.gif); padding:0 0 0 15px; line-height:27px; cursor:pointer; color:#fff;
}
#nav .select li:hover a b {
display:block; padding:0 30px 9px 15px; background:url(blank_over_p.gif) right top; cursor:pointer;
}
#nav .sub {
display:none; margin:0; padding:0 0 0 60px;list-style:none;
}
#nav .sub li {background:transparent;}
#nav .select li:hover .sub {
height:18px; display:block; position:absolute; float:left; width:750px; top:28px; left:0; text-align:center;
}
#nav .select li:hover .sub li a {
display:block;height:18px; line-height:16px; float:left; background:transparent url(transparent.gif); padding:0 16px; margin:0; white-space:nowrap; border:1px solid #000; border-color:#888 #777 #666 #ddd; color:#888;font-size:10px;
}
#nav .select li:hover .sub li a:hover {
color:#000; background:#e8e8e8; border-color: #fff #333 #000 #fff; line-height:15px;
}
5-Letakkan kode dibawah ini sebelum </head> tag:
<script src="stuHover.js" type="text/javascript"></script>
6-Letakkan kode dibawah ini pada HTML anda :
<div id='nav'>
<ul class='select'><li><a href='#'><b>Home</b></a></li>
<li><a href='#'><b>Joseph Turner</b></a>
<ul class='sub'>
<li><a href='#'>Fishermen at Sea</a></li>
<li><a href='#'>The Shipwreck</a></li>
<li><a href='#'>The Vale of Ashburnham</a></li>
<li><a href='#'>Crossing the Brook</a></li>
</ul>
</li>
<li><a href='#'><b>John Constable</b></a>
<ul class='sub'>
<li><a href='#'>The Hay Wain</a></li>
<li><a href='#'>Brighton Beach</a></li>
<li><a href='#'>Malvern Hall</a></li>
<li><a href='#'>Salisbury Cathedral</a></li>
<li><a href='#'>Weymouth Bay</a></li>
</ul>
</li>
<li><a href='#'><b>Henri Matisse</b></a>
<ul class='sub'>
<li><a href='#'>The Girl with Green Eyes</a></li>
<li><a href='#'>The Dream</a></li>
<li><a href='#'>Woman in Blue</a></li>
<li><a href='#'>The Yellow Dress</a></li>
<li><a href='#'>The Piano Lesson</a></li>
</ul>
</li>
<li><a href='#'><b>Mutiaramail</b></a>
<ul class='sub'>
<li><a href='http://mutiaramail.blogspot.com/2008/12/about-me.html'>About Mutiaramail</a></li>
<li><a href='http://mutiaramail.blogspot.com'>Need for help</a></li>
<li><a href='http://sumbloggers.blogspot.com'>Blog Invest</a></li>
<li><a href='http://mutiaramail.blogspot.com'>Css Menu</a></li>
<li><a href='http://mutiaramail.blogspot.com'>How to make this menu?</a></li>
</ul>
</li>
</ul>
</div>
7-Download perlengkapannya jangan lupa ganti kode yang berwarna biru.

Download

Read More